{"_id":"@bentoproject/fit-text","_rev":"245-a645aa5afc2811a1265a16ba10c895ff","name":"@bentoproject/fit-text","dist-tags":{"nightly":"1.2305241828.0","latest":"1.2305051745.1"},"versions":{"1.2110261518.0":{"name":"@bentoproject/fit-text","version":"1.2110261518.0","description":"AMP HTML amp-fit-text Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":"./web-component","./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"e4bbe5c706c18a2c817265b40388ca4d4771613a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2110261518.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Jmee4n3JWIgAAfnqiiT6aakaKDkerJdJQ7dzQ2iZisLBB8YAYdPaNe8aKhfnOYagxjnJXfCnkEM7aPNxPA8lag==","shasum":"d740eb0260ec459366a7a09bf249558a36c078c9","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2110261518.0.tgz","fileCount":28,"unpackedSize":1761672,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGe9zoZk3DIqiLSBEafzoqYYj6xpQ+19hIVsMbR9cXx0AiAJgbbfePh9s3+lZNJ2Li1Sz79UGINy/jgOIlGJFRIkwg=="}]},"_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/fit-text_1.2110261518.0_1635445889423_0.1651165573528668"},"_hasShrinkwrap":false},"1.2110252343.0":{"name":"@bentoproject/fit-text","version":"1.2110252343.0","description":"Bento fit-text Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":"./web-component","./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nThe Bento Fit Text component allows you to manage the size and fit of text within a specified area. For content contained in a Bento Fit Text component, it determines the best font size to fit all of the content within the available space. The expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\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-fit-text>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n</head>\n<bento-fit-text id=\"my-fit-text\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</bento-fit-text>\n<div class=\"buttons\" style=\"margin-top: 8px\">\n  <button id=\"font-button\">Change max-font-size</button>\n  <button id=\"content-button\">Change content</button>\n</div>\n\n<script>\n  (async () => {\n    const fitText = document.querySelector('#my-fit-text');\n    await customElements.whenDefined('bento-fit-text');\n\n    // set up button actions\n    document.querySelector('#font-button').onclick = () =>\n      fitText.setAttribute('max-font-size', '40');\n    document.querySelector('#content-button').onclick = () =>\n      (fitText.textContent = 'new content');\n  })();\n</script>\n```\n\n#### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a\n`min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n##### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoFitText>` 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/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Props\n\n##### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n##### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"57e62ecc0e24bc2cd64467dba9d0f9836eea0182","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2110252343.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-c6YcRt4MJYx7H6rKrJOtnuAJJAd4k6VnDo81ogDI/D+bu3TBWTY7RJQOaPaLCS+Lh4tlUHuE5KZITmiUos1VNA==","shasum":"8bc56ad5a7ab60f6605138a67e93a2307da0b0f8","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2110252343.0.tgz","fileCount":28,"unpackedSize":1761563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIERSqAt9+f2ltrdcMHuuSSiXgMnGfXba34Is38/VNTTeAiEA1dOaVgi18G+bhtXV2pa6MrmdG89u0/p206j7MgDAxgI="}]},"_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/fit-text_1.2110252343.0_1635457627518_0.6374083981318459"},"_hasShrinkwrap":false},"1.2110281959.0":{"name":"@bentoproject/fit-text","version":"1.2110281959.0","description":"Bento fit-text Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":"./web-component","./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nThe Bento Fit Text component allows you to manage the size and fit of text within a specified area. For content contained in a Bento Fit Text component, it determines the best font size to fit all of the content within the available space. The expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\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-fit-text>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n</head>\n<bento-fit-text id=\"my-fit-text\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</bento-fit-text>\n<div class=\"buttons\" style=\"margin-top: 8px\">\n  <button id=\"font-button\">Change max-font-size</button>\n  <button id=\"content-button\">Change content</button>\n</div>\n\n<script>\n  (async () => {\n    const fitText = document.querySelector('#my-fit-text');\n    await customElements.whenDefined('bento-fit-text');\n\n    // set up button actions\n    document.querySelector('#font-button').onclick = () =>\n      fitText.setAttribute('max-font-size', '40');\n    document.querySelector('#content-button').onclick = () =>\n      (fitText.textContent = 'new content');\n  })();\n</script>\n```\n\n#### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a\n`min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n##### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoFitText>` 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/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Props\n\n##### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n##### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"55fa3e004e2aeece5faf9a68717228077c215a13","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2110281959.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-c6pxxPTqMuwMsp0D/1dNxEDgjvNGd5rRyJ9myHpmYy4uu/uBodnsdXQiUh99oJ75U2dB2P4nDvbS78cjNnPIQA==","shasum":"03063811c938f5316e446b40646ccafb161eef82","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2110281959.0.tgz","fileCount":28,"unpackedSize":1761563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzh1Up6UIyHNmq8Gmf3Qikkf6kLPRmg+A2mN6AsPHbFAIhAKxVvxE4LeasYlRHWa6APMs/MTjI99vBisBZ4eVkv61Q"}]},"_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/fit-text_1.2110281959.0_1635508328944_0.10521103018844502"},"_hasShrinkwrap":false},"1.2110290545.0":{"name":"@bentoproject/fit-text","version":"1.2110290545.0","description":"Bento fit-text Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":"./web-component","./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nThe Bento Fit Text component allows you to manage the size and fit of text within a specified area. For content contained in a Bento Fit Text component, it determines the best font size to fit all of the content within the available space. The expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\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-fit-text>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n</head>\n<bento-fit-text id=\"my-fit-text\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</bento-fit-text>\n<div class=\"buttons\" style=\"margin-top: 8px\">\n  <button id=\"font-button\">Change max-font-size</button>\n  <button id=\"content-button\">Change content</button>\n</div>\n\n<script>\n  (async () => {\n    const fitText = document.querySelector('#my-fit-text');\n    await customElements.whenDefined('bento-fit-text');\n\n    // set up button actions\n    document.querySelector('#font-button').onclick = () =>\n      fitText.setAttribute('max-font-size', '40');\n    document.querySelector('#content-button').onclick = () =>\n      (fitText.textContent = 'new content');\n  })();\n</script>\n```\n\n#### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a\n`min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n##### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoFitText>` 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/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Props\n\n##### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n##### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"1cc07336e186d25fc5fbfb2e8f7e12c4a5c79fe9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2110290545.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-wGpAsbhYtd7CzhmdQbm3xgVJZQSyHgHdW8WBBG0SSLK5tj6DNGBsV1LImO7GkTMozE8CzpljS8+pqF0tDqOMMg==","shasum":"42de24f2ab860b8523fe03400d1ecc200e63145c","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2110290545.0.tgz","fileCount":28,"unpackedSize":1761563,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDaMa7x286ort13psyNP2qfi7xtNvyP2AbBOjKbe2AeQIhAKYI18x0rxJAvcR0f/gZdIx2iK6Fg4h6C1EoiOyPez4I"}]},"_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/fit-text_1.2110290545.0_1635592871805_0.8920273079532044"},"_hasShrinkwrap":false},"1.2111011823.0":{"name":"@bentoproject/fit-text","version":"1.2111011823.0","description":"The Bento Fit Text component allows you to manage the size and fit of text within a specified area.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nThe Bento Fit Text component allows you to manage the size and fit of text within a specified area. For content contained in a Bento Fit Text component, it determines the best font size to fit all of the content within the available space. The expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\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-fit-text>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n</head>\n<bento-fit-text id=\"my-fit-text\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</bento-fit-text>\n<div class=\"buttons\" style=\"margin-top: 8px\">\n  <button id=\"font-button\">Change max-font-size</button>\n  <button id=\"content-button\">Change content</button>\n</div>\n\n<script>\n  (async () => {\n    const fitText = document.querySelector('#my-fit-text');\n    await customElements.whenDefined('bento-fit-text');\n\n    // set up button actions\n    document.querySelector('#font-button').onclick = () =>\n      fitText.setAttribute('max-font-size', '40');\n    document.querySelector('#content-button').onclick = () =>\n      (fitText.textContent = 'new content');\n  })();\n</script>\n```\n\n#### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a\n`min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n##### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoFitText>` 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/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Props\n\n##### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n##### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"7bd4192edeb4ded8e78291b094118653b1a78939","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2111011823.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-2oKy9bmoH+36DgW+SwW1Il+57BIESBRrQ4awI053P5W2nfLrqJ3Ml/LCBS0LKnkL65SF2+gQa9WJ5FF7EW+spg==","shasum":"6eda3bf6104ea91e3a9e1794af4bed90da31eb44","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2111011823.0.tgz","fileCount":28,"unpackedSize":1761721,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA/ZOAQLBSXXtwsyIlp2eKI3g0ZrdmmYfvWBYates1vBAiEAg5vfILImZjsjgZuEe3iKN78DkTTuLM5l2/52A3HXmXY="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2111011823.0_1635852299304_0.05470117765973703"},"_hasShrinkwrap":false},"1.2110152252.3":{"name":"@bentoproject/fit-text","version":"1.2110152252.3","description":"The Bento Fit Text component allows you to manage the size and fit of text within a specified area.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"7a44c3f3047d8b5f5bcbcf5a86c4c1cb30184bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2110152252.3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-n1pHzjMQwLlsCEhyIUClV/e6gaor/Feh9xUk6l+arPpOGOrGfQ0nN3B8el7XrdnHDHJ7EoaHVBOK5prchsMlMw==","shasum":"e6fb2a4b99def18d093d5ed4fd9f4a294cfd44a0","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2110152252.3.tgz","fileCount":28,"unpackedSize":1761721,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0h1TOuOnFh3vzlCcxMxIwH2HBAqdMag9gvELE+j4xIAIhAMGKyyDERI416n9hNZYiT1ZNNWwKQhyEVPW+QQmzoKHy"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2110152252.3_1635890627165_0.11670155663671311"},"_hasShrinkwrap":false},"1.2110212130.2":{"name":"@bentoproject/fit-text","version":"1.2110212130.2","description":"The Bento Fit Text component allows you to manage the size and fit of text within a specified area.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"7a44c3f3047d8b5f5bcbcf5a86c4c1cb30184bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2110212130.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-uwOWPb4omsABh/MZzbeAlPf5fZQNdo9oIQ/DPq6ciGdKFjus1OeheTt4t8mVZIbcA7qAhUP6uHI0U4rAhSi5TA==","shasum":"02a399ab95cf3ff40948c4e72139f298689ed9d9","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2110212130.2.tgz","fileCount":28,"unpackedSize":1761721,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDi8hTlF0LAcm3fyAUSRQl0gsF6BIgF6t11NKbdOjSFBAIgN+ke8EFN1TIJM5fsBaS+hla9L2go04FSehc7cFvGJ7w="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2110212130.2_1635891302264_0.42040381306348973"},"_hasShrinkwrap":false},"1.2111022043.0":{"name":"@bentoproject/fit-text","version":"1.2111022043.0","description":"The Bento Fit Text component allows you to manage the size and fit of text within a specified area.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nThe Bento Fit Text component allows you to manage the size and fit of text within a specified area. For content contained in a Bento Fit Text component, it determines the best font size to fit all of the content within the available space. The expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\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-fit-text>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n</head>\n<bento-fit-text id=\"my-fit-text\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</bento-fit-text>\n<div class=\"buttons\" style=\"margin-top: 8px\">\n  <button id=\"font-button\">Change max-font-size</button>\n  <button id=\"content-button\">Change content</button>\n</div>\n\n<script>\n  (async () => {\n    const fitText = document.querySelector('#my-fit-text');\n    await customElements.whenDefined('bento-fit-text');\n\n    // set up button actions\n    document.querySelector('#font-button').onclick = () =>\n      fitText.setAttribute('max-font-size', '40');\n    document.querySelector('#content-button').onclick = () =>\n      (fitText.textContent = 'new content');\n  })();\n</script>\n```\n\n#### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a\n`min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n#### Attributes\n\n##### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different\noptions based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n##### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n##### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoFitText>` 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/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Props\n\n##### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n##### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"f4d548031e8e20aaea8ade649d3394d56518b769","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2111022043.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-VjGS/d3JlADUt0UpnLgNbyi0A0CyYUA8koSaZUQVyVhTV83xl0ymncDUMTgQjinX1atmOQoDB/q4jFnOuldAtA==","shasum":"cc61e4489c690f272849da4a1f37598d9b5daf9d","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2111022043.0.tgz","fileCount":28,"unpackedSize":1761721,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3mlq2QSpubWlgWQrFIK/vD4hIIC0vs7mzY4T1dSL6zAIgXVI1uYP1G0tAhQ42vmYFt9WuLVsFVCOhhZDtMgX3LPg="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2111022043.0_1635938488641_0.798019715377505"},"_hasShrinkwrap":false},"1.2111180040.0":{"name":"@bentoproject/fit-text","version":"1.2111180040.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"f53cd87e15233c147123f81aad5da820c5581752","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2111180040.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-BxvNgIiC2J3XhDx1XxHl/MJjFlT8sUmkrni2tC1PvZ7jyjFRB1PYg49C9r6Ljow/1tw2/XKngxyVEHD5xu7Hqg==","shasum":"cb523f1d4b239f73f36feeb0fcb07a46d946de0e","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2111180040.0.tgz","fileCount":28,"unpackedSize":1639980,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlsUiCRA9TVsSAnZWagAA0CMP/iUh0NPgQNOv2VmYksB+\nLJRUTauNaQNTrbCyDwab6QNszevuZNJFpnBhR+QJZ6zST22vJjSs89A03IBc\nepAMpxwYtMWZRsr73Y0F0Ez9Q8bC3OAMPf3axt4fscSZrwLXttizktSZNy0Y\nfLYPv2CQI6kLaVVk2SELUeCE17pIVQjNi2O9riQ8COfOYPWPRHHjc6434cHW\nFgcncVvkYokSMn1AfUFgdAx6QBx8G8MBs7Cqr4g8EQoZ6U333gLNyJW4UBJ1\n/AMZOB/rFGfNfu8sixUDTqx71ToqyqfSG+iHoEk3DyxCRzPEF6M9QnWqhc/3\nh6RGG8rYB/HOSbb3eSLsHU3CQfycKmJ7bvCulyCUW26mhgixCGkcSc9w50UE\nzvoy/eZtESv5wYVIz+Hu2LJQkLbVfUCVbu00lUdfUpi8RlbPqE4kJm8XyeaZ\neAFHenICVMMei75uAUVyQ0WWkvvSGdSwXA9ergA6lRrYR1em1DH33YJNMDY6\nTNZiAPoKdITbztNEXNQHweqHy/6mSeO0D/e9xKsZGOb6oCDlkRYflSYOWpfP\nsnLJAJ37+GXu1bmJdF59dVJSSHIisTCgezvenZhybwlvXh8mAXG8nGxWKxX3\nuFoNcbelImIHzrAfz3qCxwPZng4DvjVpNKIOzjCQ+koZHF6zs5OOcC8Ju2Vm\n4NSs\r\n=4PVz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzWnmT+KEPzsAKqgoympHP6rgSqu39pYmaUadJ2ciLWQIhAOnsitqMeiYN5Egp0LlCe0zKfpQ8WM4e48POlJfLqGdA"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2111180040.0_1637270817940_0.0718628563569712"},"_hasShrinkwrap":false},"1.2111060251.3":{"name":"@bentoproject/fit-text","version":"1.2111060251.3","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"f53cd87e15233c147123f81aad5da820c5581752","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2111060251.3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-r0vHhrqflsjBrgPkXeXKlG80/sy81jIxj39qdV+mycDbqEEohEoiKCcn7eBj7DAwaMFx58szNUnQmLivmk1Igw==","shasum":"0855d373a857e740aa7f993eb71c3790aafe361b","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2111060251.3.tgz","fileCount":28,"unpackedSize":1639980,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlsi0CRA9TVsSAnZWagAA/UAP/3dVbyM2IWQD7Co6iPc2\nm9FOE6tr6d/Ny30Ex9ywt+m1zHArdKa0L4wBfYSaBCvYu2Jx8jQDsdZGJZda\nAW/cxfnxBHFSd20GP+oQqJvVTHVqfJnQXTUkgHLUpGVXUuM44P5ue/ygBdJV\nDOaugjloMEGmrIB+mSlhFDqBPj0zD1f0o/A0ABwCY8Z1px2lqPKJXtdPPw4q\ntTos+Kzo9CgQFwC9NYzPICYvVKsOSSOajCQQgM49/ltV+8V6EppLvnR/Ojdn\n8ZDfjDzB3ATruQEuuCGO0SnJrLsYfrwvD0cbdBUNIw7T4l5Hrx9ZzVFBPciS\nEd9B8dLcN4w5SX/3puvsHdmWV1avw0hWod9naJWfXLrL3lYZ2KFFFNpztkX9\n4hL1YJnRD5w28wj9vpzmkypSLEnNoSKSsm0DNVdd+9piODS7E9o5pr1ibkRX\ne0Me4FsrQ9vjJnByyej6E8CuOi57xIsvYz5W+ewHBbSrZWCoAllocSrqP1L7\nr1hVUIIqxNjMEy9hOxpA+NY5Cnyp988BhsyY9ojyUSfQ7Ncs+c/kmXoAzdtp\nkJ5hMKIfZlg6b7PYmkoj9wRmAscSOJNs+2EcpVHviEJAKi9YC97zjaOSkxz0\noA+TnfbL80AlpRpfmnmiLi+p7Iv4oPIRGNChwiDnLQ6FeBhYz0Nomgurha6m\nazzs\r\n=Tb8S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBpfSx95+etPS9agG3UZOGz15AIxbJynrZpIyN6uJRdtAiEA2LbTVnm0AttmYCNC5vlGYs0UDVjVW4r6Viclw+R7eQw="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2111060251.3_1637271732218_0.7275001276050159"},"_hasShrinkwrap":false},"1.2111182332.0":{"name":"@bentoproject/fit-text","version":"1.2111182332.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"34ebd943d9b16506b7a515b38941fdd8357bd288","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2111182332.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-2BC+Yp5YEFGMyDrI8oXR8hnnde8WwAbunfE5A3f7RCUeNxbxEdc94uwhqy9W5TrUGR7jn47S+be8gA63hPqMTA==","shasum":"5fbb6dc1390f324d6873a18ade1e522566bf99b0","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2111182332.0.tgz","fileCount":28,"unpackedSize":1653188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl5dwCRA9TVsSAnZWagAAM40QAJEnJUxXUJ2OCV1gQKMV\nl9aYCTCUNM9n7oFVWmRKP10d92dQmcOoJKM186E67MjuAFB3LCVeomDiEpch\nCIqoZ0mUNYDwTtQtRLJC4b8+NFYcBtxBv2/SPLoDPPsvFZU5mIXRURqfz8tW\nv+7HtFwhRitYltSWySVJnCsv+Pch2TDS4gfQ1jwDjXhrhwfe4lJ/asfrDxRH\ndnX8EK1Ip84cNqst2raQH/yG5Oi6HLt9STd0h1JVUFYHlzGitqgWRqgAkXJy\n5AY2nAnJ0AfDcqBGXLMsaRDIoC0ygogJ8nZEABMM2HlNXjFbLkr29C9SZ/pG\nt2WLOxe5uQYzrV0Q9Mv14Nts2JxzzzuWAt2xLecs29uKT6VStGCau6gpBkTC\nuhPpmEW/N2jV/SffAPoDTRMGjKlneVDM+TIMJfUpC3QdOuuwkjNjOQIlASyK\nIXKJs9BezWKDA4H8RWXa/TJuN56mLa1vq9SOFKM5K9xF7Z/P/+3pSX3iYcDZ\noqBxpy36/WFBVjjAzebtdT2fGm0OQB17HhHUrrb+kvh+e4ISW8PdVd1McPE1\nH/QqRgbA00eDiU5uueIMc/NqkZ2Z8yt/kEbO8S6MmzU4498k6t4aj18Vb+bg\nkZPLphEYfqd14dJKIoQ51m+s6PA/vv5pGXVJwCrJK/Ua6hkZXXyhzcl1UmBy\nS/El\r\n=lXoK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDf2Mr1ecybYi2GBVwAbMeO8PunseJi1ihTVx8kx5fzWwIgLRcOHVlAeo+8A9mBsot3peLhf5pxI+qAFagVAjcugjw="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2111182332.0_1637324655445_0.3539504502734787"},"_hasShrinkwrap":false},"1.2111060251.9":{"name":"@bentoproject/fit-text","version":"1.2111060251.9","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"04e44a3695f8db307eda69f753e10665cfa70fa1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2111060251.9","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-ZnVf6BhBB+XPIVkK8R9uJAEFBNUL5GMVTDQslQMlS54TCuQiZnl7hYZckw3vuYZhxwO4Gy1PLLbivDGMGKkZvA==","shasum":"2a2357e984db19186795013b98897491eff52cbe","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2111060251.9.tgz","fileCount":28,"unpackedSize":1653188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl9FGCRA9TVsSAnZWagAAe8sP/juFohGcUBzNj56m47EF\nHwq24KIz77lmxp8b/zG/ikl54fpaRJbbuee0yWgSASxiFsjwllfR/OaeuOvX\nYdQtYTMC7fhA7JhkXbCXVY7ekJHzfdFhU/IGROyCh6bggBQNA3IcA6Bmjxik\nyl/fx82Q9C7YuiOpYuNALE2uA1DWzCy1xrv1J6dRMcxuYrsZKCzc6o6FSQxZ\nlmNejfH6MBjjbvK3F/P0Pcx4QLMMCx6oj3P50eUhQ3mxkzDV429blyehAJCd\nADhsAhdOF3intx2kjGnVFXlgCnfyh56hDZKoXp0W44dK0zcmP/VFREivBdeB\nu3dkfMT95MS2Bn2fgqnEhqUdHu26oTYH4KpylpryYhijdKpO6Sl4nS3o5zfG\nconGBE1uH/f8Cv38hqe7t8GeXw3+4ku7iVBVz6cP7awoxkDR/603iQz7cgkt\nSLhTNuhieOVAopl41CMZtxhny4ZNwJpY4QAL7SBtcOPOybVhkqzfnzBjCAvK\nBm9hDDPq+cWfie7Kk0W2g9RUVkPEApkMBg1Y5OOQ+K33fB4y/m5LowmQuCqh\n/SNWYvPqF3ujsOmW9M338r5pY6vItZUTrv/FFLnUcbq6IuDa1cfiikw1wRqr\nRq02asMLsu8+mi8yNFwX1Fq6plk1gmBNMbGW7+id68BUeLKVg8zb+k0MgAR1\nJy1p\r\n=j6sE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICDQwUeRl39E0RkMGMG0Qd51VxbnSHJr9jme1M8Tkc7NAiEA0kZrhxKpLKlIIRxrXpelt+LoHi7lrsPnioDSg69JH0c="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2111060251.9_1637339462365_0.8846750397555183"},"_hasShrinkwrap":false},"1.2111191951.0":{"name":"@bentoproject/fit-text","version":"1.2111191951.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"22d6da19b9e01e75e6b67f54cd425c465822fe8c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2111191951.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-pFAHlw8fd2WqSjJEn2IqZ3MArb/rSKljG+bYseOY2A4d9C+H92vEOUz6x6XqSokCzNyuYA/XgwEdxz8ugy7lJA==","shasum":"b35edc89d32019ecefc83f9fcb2d63b3b1539982","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2111191951.0.tgz","fileCount":28,"unpackedSize":1653188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmOjbCRA9TVsSAnZWagAA0V4P/1J/ykEV8yZDnd5OW6vZ\nv0fblnCAx38DFbmHU3ul3RFA4zPX3O1PwH0dUxLN2BcwQrdomVWwZ/X0Dkuu\nlPX+X9DHKKeONyvjja6tRwAwU0aH9KjyYbKjTSfOOHC7nC5JxnXgLk4PJHUR\nRpljoL6u3mcmKSsUjNXI5JfbkuHqysTae08M/O1VMAbuI7U/b1ZID8OOoz/w\n1IqdkCG3NSmHULQ/TjieMPoEHpuztejHQnZM3g7d3dBIU4UwUxPuCKgqqRIO\nXcEzpK2hjkE7DfKppOxEjNXGb4gm8Xby6NSVyV+UijFM5fQvfszVJ65MpMmA\nterSNx0ddPq6kuPNG7ACwHGVG7A6dd0lEPq7HvpylbVJptvmIBPqOIT0sVrK\nbS1+qNuXnvS6PQ/dmmGMEHH/NOV79rpIr0WtmEqLgGpoK/TyNHzYJzjcOr/2\nftgpvv/Z4bPlr/yP/jWzfKt9EYCvfNSk69l21Zq7mct0dYxyy+kVNnat170i\n4niItEg0xsr778PX+N13rh+KDOYWDsmjdh0yrfqBH7DF7/+0Drtgd+XYCPKd\n3vfwSTlbiEVLRj5eafwr2Czr0Z1NU4vziZjbHWsB3A4znosuAtPICF4BsMBf\n4PLoWg8+q4FNDsPkoaW+vujpi5sA3+B8U+fRR3YYZkoNps8OTEe8iC6FQYq1\nCBq8\r\n=GfuX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAWbigFuSU6lyqkM7msmG8+kMuvshdOfy4nw1v+IHVLAAiEAluuj2nmeVWV10l52YUUslqITOpr3TzZ3+GWIXiAmXUk="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2111191951.0_1637411034833_0.21147834939460197"},"_hasShrinkwrap":false},"1.2111230244.0":{"name":"@bentoproject/fit-text","version":"1.2111230244.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"d906c0bae3e05aebd88696b9659414f63c1ca45a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2111230244.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-kNLl6daZS5R2x8piE2A30F7W3O+1/6QVf+YbbmVeBsOvFR5Nw/tybTP/kZsE5smqiQMl1HQL+nh/v/cxUy9B1Q==","shasum":"6a382a9052490abce29488b66244af1959e8ac4f","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2111230244.0.tgz","fileCount":28,"unpackedSize":1653188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnN2HCRA9TVsSAnZWagAA7LYP/1OpfOzbzlLm0DDOtDaP\nKtm8Jv+LYKdGFkJsO3QwkYsXpfbqedDjp35BKGlwAw7tsB1x/ZdvtTP+f2qL\n+pmUpaoMDfWJqxNCfozDlwhzwA91ylds/iHyqp+mUheeiNQUChm/pEy1rzcm\ngPLhwU8yXFg5ndoT8hDQm6KO1OL1MmNh9lqXCsZnA3SuZ20LimNmTFX+wQ9G\nV1ZXTKIfq3ncP9eTURUTCPVpXXKgkc6+lGBelFEiXVHYs6cUxg7HLsCiiCC/\nQMZfkFbDHaFT+OOLM6cFtKC6bZ4XasE3hHTUnrRn7lcqc6qO0RMPvfem2uO0\nQYPTmbJmDDniG4A8UKoTQnzHmFEa0Td5HskV3mAp+TUsy8hSZQA83benDKFm\n7c3OmrvMXd1VmtCHASrP2YC4JrJTiz4Be4dObSwtbU7h/D3c0ERH0EM5GPQZ\nygA69Tm1RV2CpzMbsDxPrqd+byM1rwUIGSW4WbwveOzW024JvLk7EwS0PRV9\nDOM+k7Adq/3WhWzTaMoetnbmVFj6MgxNSgy5QIQAbRY+xLbY8Olr6Ygz/xt2\nYbgBIKyKTmJKSSKl5DF2bGROJpaFalJEbf6pBpkQyv5BZZnXdrRvBWjVMw4N\nnhyHArlU1UuJMf2c1ALA9kdXKOEoxHtpwVNOnm+HQidPGo8CcR1hUNwqAVHz\n1W2/\r\n=DOjR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgsCGpYj+ENifVn3v8pWYCixh1xRiNd3SM7tS5D3byYwIhAOPZGgqrEGk06hCGruJcXWaC1yzouN4UPD2uJKtQNZxV"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2111230244.0_1637670278784_0.36526099283576774"},"_hasShrinkwrap":false},"1.2111230636.0":{"name":"@bentoproject/fit-text","version":"1.2111230636.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"46e8f482bf5e3008ef07e950034d194c48317990","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2111230636.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-YYBIYGOMUaapnHjLzb7OgxZEGqrtwr5W+jbp1cm3FROvkN/elN68MD64thqrY8q+bDN93O656loN6jy2xorpoA==","shasum":"dfc26193f56d1644873bd61094c486fc1baf99f5","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2111230636.0.tgz","fileCount":28,"unpackedSize":1653188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhni5+CRA9TVsSAnZWagAAbLkQAJ+kobZmYlKGL+4WuSpE\nYS3NBkSU1eg0F0TBKJwT+LLxghpHBC1b2z1C9F07qRpIJ3aKZs36tzGXfRGH\nf44bAF/SDuAH1GpIi824qr4KJbhughNHfMm/W7omEPND70qpxCbzPtKzHyvk\n2ApEfoGKiTZ47U0H5TWhGG7NWU4q6if/2d67YWr8Kby4GImm0rn5ThNvBNSj\nEFpL5l2YM7aL4MIdMIFzExQMHLgH1dq4CWM6lL2w/W7cAImR7NYcJLbnx/Rd\nyVCxad+6/zjgcDdCypwSrjxCoLIuO7q45SE9jCLbx2tELB1D7+nrFr2JCZD+\nR5Xx+MkHMSwhII/4UJABFgvWyUQn/3J/QON9LAPnCh2+LMslQ88deTqnyGpe\ndikpJ3nj5rGEVU+nJ9QaSq3fNvo9xTQcgTqHNxTtxyQaJ9TlTlHkoOgqZhKD\nHT/1MMXDc0+m8k1SQ5fkH0NVnlY1uIKBT4fCcnXXXVUJLVnhuQzR4xNsh88+\n3aCjP8HawWVaJ34WICBaHmAkMwG/GC6mgPi8l7M0F1F5fLFVtZAKsSWeGhL/\nMGSBXHxlGR1M5MjBUiAAQwtOhcesm48gRgLvTcRnVvtqqV/wt7UZ4eea56jd\nFIu0IodkX6JvAPofJ+QiFGfbo2J/Njexgfzfd+zvFUdgXtei/Ixp/uiJ349P\nloAi\r\n=O+04\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4RvMjgZc8HqfVCbhslfU5G1m6AlWOx1i/Mk8tm3ghBQIgS4xc5D/1+ajhB1xZMBbvmcRwtl14KRPHKl0ms0B4JiA="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2111230636.0_1637756542304_0.39569655746982657"},"_hasShrinkwrap":false},"1.2111242025.0":{"name":"@bentoproject/fit-text","version":"1.2111242025.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"b78e8781ff3976b3bff1ba881cf66dd2609b5c07","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2111242025.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-/An07sHsl4NFQ0ORhzA2vgMqgwf9dPaCBspXnto49Ja4T3rwBWcPPWCN37IQLZWeieZjFRnlMejYEnpIZ+oj9Q==","shasum":"7f666044c5cb1692a21d701d7271c64d76cb3e65","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2111242025.0.tgz","fileCount":28,"unpackedSize":1654108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhn4ShCRA9TVsSAnZWagAAWoYP/i2xEuEJzq7y9e7c+FLW\nw/ZY9waSUXqdg9RwML9cEyvSegWvb/OJCkoF3nvhLagnbvt+eP1Fei2FpgZI\nKhXXimA/eo7Bw0Vqoc3oFo3FG/UrBUIAfhXO3VrWGR5mshF/28p3oq8Q4jqI\nzLJpte5Y0V7PX7Ty5PKIjsZPBpau+4Nx87l6s9N904tA59dgeekplLLkJ2GU\nHNC7Pc4lesrZ/jDPDdqc1QqnQvfF1qlWuH7WnpT7R/ltuMRcS+RLfLtuBxDo\neaqKisjmkAGyebdshIbzo6H3Go3BTElPg560smUngB8mAtkN/X1/6DOhV4Mc\n8zMjg62j1VZjcjoC58eu6mgOal0APQYGFJCqp3mOS7dHgdlnnC6ZAxj+YjHq\no89ehUj7Mqi80k/zuR4/0y23mCYLLy4s238ktY34UusxFnpm1EJcEvKiTrOk\nUm77fa79OUt0eE4sfylCQzQ+DFYVOIfY0RHOZRcPn9Ywf5owABO98ZfW2XqV\ncIYF5sf0230oF1/htMZBZhhCZSwdYYtakvom9ez4sBQvXGwz/QPUy114/ZYf\nxe++60doEO2fkdB+BWs8qNlMrBJKcjWMrlFU4XXK0eKT3BnFX40dyxpD3Byn\nbv2PzWC/+gNaVwuz88nC4zQ8Q3R3eSADATUFT+MuUvCAGJCadM1mw6/UL5Jx\nig0y\r\n=HGuR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBE9hYgKj5QjrkZKyPjMMdQm1z/W+9aFVi3iF/gD3LF8AiBswBwJ5fIoz6gTmFiNJFwPRdLbRvimpPSYsXVkwI7//Q=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2111242025.0_1637844128954_0.15340550843928535"},"_hasShrinkwrap":false},"1.2111292120.0":{"name":"@bentoproject/fit-text","version":"1.2111292120.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"e938f7c9446e2d1eb0f0f865c0f1ff42a4be76c5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2111292120.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-rEOi2dvlhi/oBEmto8cLcgLUmGBf2zBcoX8oGCQejYQb2XTvIhZHqg8ZD8B3hfieDf4MqvYiy9tOjm8u6mvPuw==","shasum":"0cb0166304d28f25db54b2149bba4909a6147bc3","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2111292120.0.tgz","fileCount":28,"unpackedSize":1654108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhphvaCRA9TVsSAnZWagAAaCAP/RXHRppmJk+622J/8qqz\nn8w6iGZexMpVjy8uYOCLTicl+OPAlGGyl54+j+XJ2l/QHuw5n6dRm0BmdidL\nOzbpYF+XqLwYK74sLcxJE70+QwkJ2tQYBtIAJTQLfnL1lbjeyKhLYmcni2Jr\nKwSbObaNNilVkrk27VERG2S6/yk/K7I1byUH+E7p+dGwRyrjClsRTrzL0iHX\npwxZ4HIYzGhayTgtOaXcPoe7r9dwgt65p5exT2hysCpcBNy/J8zQCE5f9e6N\nVibAJC+MNXmiJhkNZ/3fugS2kiG8GdU6eTzpfPVjY0BLI3OtC0JFlpUThVk3\npX9eFkkfyf57ZELRAeSjiuCr8MED8E5kwgZ6adOrMzObPz35ZXVC0m08cQBg\nwweOsOXcS4bermvPIDyNsA2jVAENIvl/8W7OMad0rxL16ar3ACZKSC7fCRWj\n4VIW/zaVlwChMBMZ8Ue6Y1B9e9WIiPwSulSxvBIQqUAXgRTbZYpoeKPZgu0W\n5s23WTbJH49+bkYR/c8LzFKz1BET/+Tfc2ci0vNYtEnSzzT89SdJR80/X1DR\nbeMbtaty8bMmg2AKkBnwXKbUCTC+wVp1pNumFdGQ0d2BGdtyKrzEMJ/qTVsj\nCCwpMAFT99ylgJ350UWYrEqCPUflYq1TSIWCWVYEaZJ94uJTOsI0fp2kM2kN\nEto5\r\n=fA6G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZwmR/VZ3dx+o4key8APhIRZcZxk0sk5kPwa742WSMsgIhAIW9RfEI6zT9s+GA3X378WUeihe6nB4UvQjRlUHAjf9Y"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2111292120.0_1638276058026_0.46562788252153786"},"_hasShrinkwrap":false},"1.2111152338.2":{"name":"@bentoproject/fit-text","version":"1.2111152338.2","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"27e204ed206cf75fae0a37d8f110b5fedb45fa7e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2111152338.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-hKKoyAY2ciz+z297ia5ptvSAcT70Zs/qEExFjJ6Iv8KT/5Jux1KAdRl9+WaneGCkszSogsqv4VzamCgBjw/FLA==","shasum":"f1128d060b8fa374833433951db3730ba7c8344c","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2111152338.2.tgz","fileCount":28,"unpackedSize":1654108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpmU7CRA9TVsSAnZWagAAYpMQAIGe2hZYFnIpSwXt8FpG\nZOQRVpH2FZmXrd4yyth1MU+p4wU85Ol0E64yK8PTWe14lXEDSXFIttHtXDMC\n+eR7f72/qnDnEHZnF0s/Kg6yHskn33JTBJ1yXe98F80B5HIdAwgulzi704jc\nCHEj0LpoMb/0gI2FjRadPP8aOyiuH+z6cMSlLfTCQr9ME/E1wvp0FnjXdQLy\nmzREPJ85yeCwLtd0ZiS+1OdMaUh7o2lv6DRC29eLiw7/G478juW72vJUzE6p\nmBsHL04+/WD2dPvsKxq7eb7b/BoNriK1FUxMyziYdPO8vWv86QehKcqIc9vq\nn3UHnlOYIyiE0nzh0GN57MRt8NILfI1KefKl1uypu8ErMAI/KvgJdc6goyWq\npzKp9XksPOIyTT5HdcV6eR4hsP0Q4z+0yWCFnRO439wOtaJLnshYR1cs211g\n3fvU+iCvOnmD+X8tG9hKUnjVknF94LyY147APvLsR1+eMIhFTIpYshBV6dQd\n2Q9ETiB9xvdq3Y0YpXrbOqxcmbjU0tR+Mnshu7+mrNivN3WRw50C1xBSo+QF\nJGXf2CMUnGaRV8jWVhp6z2bgPIu5qfHvvu/REWQayJp+jW2+TKXcsIInCoiy\nTS1bgstZ256c9vERBuPs93LAUPtzFNs6xUN1KqZr6Jryn74Sj0qqeeVaLR2V\nJZRy\r\n=ZZHC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHyNOVLiVt/Y0f3YqPfrt/Oz3vZMxQS7/Vh0mew+7wwrAiEAtdbHH6/6JoxuL5t4s99C1d9l9HPvgYwBWREpkGDgrJc="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2111152338.2_1638294843016_0.05466342959552617"},"_hasShrinkwrap":false},"1.2112010058.0":{"name":"@bentoproject/fit-text","version":"1.2112010058.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"6d1060a3a4288fb99047cc700661d589bc9e2a01","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2112010058.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-ZkUKBr6z5Mn+zGNgvHDsGXM+uEF0oPgg8WsUAR4cvrSqoY3oKtUx6kWDwDkAZeqZFCb2WN0l5jMnLnam4kfYGg==","shasum":"6ab8fcf6e1fe785379d594165e853599770a313c","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2112010058.0.tgz","fileCount":28,"unpackedSize":1654400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhp2giCRA9TVsSAnZWagAAPBkP/1IxIPtzmqNipgeJS4tf\nkq8nhc0RaMcpOeunGIVaUkht+v6uoTLvVgaZtI0yCkGDo4+VG6JfV6a08fMo\nnqbVg0vaCQ08gNhL3vhhaPbU/t7A86WvJzlvvBGaZoD1caB2rCnLGQ+rwTxZ\nlUWVLVTeMP8e/CfUSM1WEwM6NEmz/J+rPL2oWf+NOoQGKB+9k798B1+g2oJn\nuLHa+B8Uzw/o5yhfWWszfoavF8cOEVuXOwzNmHaHGcAH07NWksZUS6U+ep3b\n3jMwNUllDuWTnlDbpVyzRj7DtZT47On9iEo0MbwUyaZYaw/BE123hNXDju1G\nsOPtR97+1cogSN1p9JJuiqT/ot5Jl6kbKZN0g5rE1mvGb/hu8QPLZM/uR/Fj\nDSAUwCBGiJLBXJmMctEfxXuEBXAvxzgdkXUWN7v14sHNJedeuYtYL+SsFQ2L\nqsq/N+dVbx1J5apjpHxbK100Ct6xVUHkS02m3URATpNE86L1tyj8buS9O6eA\n3sNpTvt2aanxaNUiKI3unu9t0c/7f773i8eBBG54rBuUUlLV/UPp3EkUChYt\nqnct0Xq6GGNdnESU+mcxwcRw/kL1xH2PovmggmzJrYJRZy8BDOh0bXG0yP7I\nXS0pS8r6SVqOTAKQwCEU8JjyYbVs2M2yNNrZKlTPTe4q3+5JLvB3uYDSqDpm\nVHlk\r\n=ioGq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFWLbL8Ti1EsNx5QVA2HIfU9fnSrgswh8kF8hBNqKroRAiEA4ZKcY/jroi+bfurFhk2NScmQV52Cv6Mu+d9lG5ZJvak="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2112010058.0_1638361122681_0.8653079337410543"},"_hasShrinkwrap":false},"1.2112012300.0":{"name":"@bentoproject/fit-text","version":"1.2112012300.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"4ecf84d856583465c1ab59847234535fed16d55a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2112012300.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-VPOUZPO550Nh76DZsG1u2VBiIdX7JdsMWmOGzJCDNihghSHtOX9mqB9tX7PsDln/U3vNRz60DK2VScvCH91O0w==","shasum":"b672f7619ff50cb9b9de3d6b3ef2fa5df570cc67","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2112012300.0.tgz","fileCount":28,"unpackedSize":1654400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqLxzCRA9TVsSAnZWagAAAh8P/2P7ARdKCLrdfaN9aP9q\nIfC00jsvkPUNUu5ML0pAoOXRHZvBGa1oa10U+6H0qWMBYtUAZ5UsLeKIrm+9\nqhko8rTvK3R9va/FhWdYjeyHafF08A+fWeSVXK2OmU5QmNBwf3trjxaehU6H\nk1vRVd7P4PMQi/S7FwSGXZOODnjpWDVCFj5L1DSabioFXCBMlKL32M/Obre3\nwjTOl081e7mDUz3AheguJHwVbvDlkRxt7UCSqdzO31XGeesKKu27Xr3Ex2gC\nuQAonAWiZ53zGFzYRsQP1WvSVrtnX16Rp3qev/pW2oJIVjHl9Zx85inyBTJD\n7RD6AMsMcVNeFXdOVOJy6lYjF9RSAZZj+xqerl9XzgupOlPb7yy0WFeV9yqO\nHc6vtb12ZcwDjMXZpNWB4THMYhzxeOVo18EQsgt8Y08m2SioDfmsw44uO0Rd\n5O3kKgYPBrUGEuZaq6+9znpz3y9E9obLyES+4qcAaiHmt4oiR9aneVvhmM8t\naV3dGBGARRaajrUCFZVjHF/3E59h2VyY0NXJJkv+dHoqR8xDkYQJBVyttYrn\nQVQo+La2RmnrTxo26dm9o18kLeD5uMl39XekUmqRsrRrLdRoGYj99Nv4IUA9\niyP16ePAkJ2MGs6Cah0b5POCIHzx58CfeXL4FtXa+53bjk1KpwipRBxY5gMq\n2ZCc\r\n=BIWg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGVGIEecuS0436ydAE88+AMJOLtoDUiUyNn/QXlo/5GwIhAOI1EMUeHYXtEcpwbXYN5u5Cto5VMt12Xhdz15HzunQl"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2112012300.0_1638448243627_0.3862276351434186"},"_hasShrinkwrap":false},"1.2112021656.0":{"name":"@bentoproject/fit-text","version":"1.2112021656.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"4a66d3f7120b51959ea01867aa68d516d5e0dc36","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2112021656.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-ypyon4hLav14df3stL5iuObCLDuB0i/HTgYrp2nFNQF68ugX+FXCA7EfwrkdIKo2oPAljCV4F+Z3iWMIAZ+CmQ==","shasum":"ff8f80773abc9664fb0db465548a87ad6e357576","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2112021656.0.tgz","fileCount":28,"unpackedSize":1654400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqgviCRA9TVsSAnZWagAA18UP/2krRkwsvqVAUYSCsu2X\nkbsSSoPkSkWK+beT76aYVzHHclqX3726qeApJBUMwFMQfxb1ExmP1qVG9UNr\nYKjMwVYZus8gtuA0MDHoDv7U9z6qxJoIf6pZ5t2rHyndn/G82lTqaHeNiRo6\nGYktmNHlVj+QN8CI8GNAgOWY/MvKseeUOT/a7zJursncSr6nMcvesD+cNUUU\naWoe7uXFIocD3hd9+mgMeuUsQQYMi5NpcEsmVaSkQzvqVf8az8LF8LPzBq9Y\nWFD7GqtsN9d+gL6LjVDcE1LHWefKiMOwSLOcfNyBlrqVJYhibnIjgheXCPpF\nlex7FTz/6gT9M9IFMBk8p32E/MIz+LM35l2elkkzqtd/EEp9rYP2KiVu6UY3\n6fEAhRRK4thHkka0nS6bR9zuGNpPV2lYMmaRzxBvhgEyHb5IWdKBW8QtcAyi\nzYl6zM4p0PPoqLXh3tnHX6tZyyUwbkS/NUWbKVHu2s41nnT0uT7idb1GktMQ\nmG/JGaAskbtlONy6wzJCeM4raGVpXVf52G/h9oiEhg/H+JaqAhrfqkPJK6Qp\npj4FD+3NFGexX3UgjWya4NRkYABzeROxzcr5kSKQBbUE2klZ7gv/jMkcBE4H\nZkZutUQDvGozufQEVt+kFnxwhGPNZ/ccw1LytpuiPs+fa0hJ837ZNwb0MYw7\n3jzK\r\n=+TOI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDE7p8rjlnjOqp+5BhZpRJnLg0XHZeFp05an0nGoskKMwIgZZ/6B1NVkrsuKtzQmb0asIuu8zULnGP+Fxa7bdYwgJA="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2112021656.0_1638534114502_0.8544383557543"},"_hasShrinkwrap":false},"1.2112032204.0":{"name":"@bentoproject/fit-text","version":"1.2112032204.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"80ca53e97f8ac619b78398d429e0031f40cf68c0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2112032204.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-trbOS4unLjSr+aenZsMW7P/48NB7LcV2vyQ05kzXvTJOOPkxK3StsDx+OvOG8sUfClYpgaMPqGCA3Fe25tWfbg==","shasum":"d3589f41623e5c7a94e1d4596a3e51e30546144c","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2112032204.0.tgz","fileCount":28,"unpackedSize":1643174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhq1z7CRA9TVsSAnZWagAAzzEP/1bGHN9gOX58KnwKTprJ\nyiYRu7iq1GrWf1G6d8ihXDFD9BU1ZPOzr6f1/brLGNvIsvyBMZ9Ws3oxiG/X\nsteZmQ4o7EwNox4c3j7ZE1UDJ6bVygD93swA2DntxBilYbKc0xd3EcO2faUY\noisd0ZKkuyC3OHbLteBo72QbKNxkfYTjHOUOM3qIJ3LKA1OWzLoM8bnaXiA1\nGyn15/7SP8Z+9Iljzl2tUhS9+ozs1sHT5mgmhjebplKUMKYuqfh7Scu7FrzY\n5i1Q/FB3OqADhhx7A8RarCwIsiBzrIYnYi6p3PrUcPnxcqyK0/RuLKnpBOok\n1SoZckR02x0addFLgOcoyUaTxEgjcZPeNkxQRwHVBtB1Be+LmFXcq/dpZ3n7\nZaOqT8OXXtYqNNenCIKNi3Sw4eulDYKoYWP946k0mZB+h064/jDb1EQmrq8d\n2c9OJZJZnzxjZlIfYDn0UMc9I+ALSUDtlMQJ5JzrF2E+UYAj6wx+Sa1m54Su\nFFt6YXCxNXcqnIiN+Lady/FSog282P38eoYqbjbpntZW5YVWeabFzhDL4PLA\nQkv4lXzDHZUzb3IJYEOpz9Xycoh4AIBpyRr18aao79T2SM879IOESQ/COt+J\nUsSrbzpo+6EINH/OEM7vbRypbyXo5OXvm6exN9Q3NFNU62/EHmze1IZedeI6\nJllH\r\n=IIOh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICD9KT+FPbp03xsfVv/+yXiyA3wUYkAwvgQx7CUNbvzgAiEApeZVsGMxKhqTecLbyHS2stdAFeV88ke0piqY/6vk7Io="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2112032204.0_1638620411183_0.02281789191453165"},"_hasShrinkwrap":false},"1.2112062322.0":{"name":"@bentoproject/fit-text","version":"1.2112062322.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"cddcce65024c209c9420ce0567f525aef4fc971f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2112062322.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-hnHGgPkC6Q/YaQrqtDVzBgYb+TAOJ7sACRxNvVaQ2Kx+rRIvni3yZqetdOzVEjPJTJoYfKvoEoputXLINdWKjg==","shasum":"7ab5438bac0192eefbe6451d1f4a6deeacc32af4","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2112062322.0.tgz","fileCount":28,"unpackedSize":1645290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr1MWCRA9TVsSAnZWagAAwd4P/jsRmkk2NokjvDd9XW0B\nP/knX5MhDjxyd5wOf++FeYBhg3fN+gfXEbSp8IxeaGA3ARHKhsETFyrI5jyx\n31C5d54VHLULdnAnWZd3lZE4gZD4VeWCAo8s6Lk9IVAYm7VgMB8aG8TyTGy7\nWJbkeDFL5T+VgotNAAfv7OosFH8fFoQ1QEDqwwBx0byX9Fl3taW8fZg5f6Rj\n9LDNrhOI1ZsntpewnFPH4gYvACGE4X0JfLrSwhj5lS8Kod1bxcnMNXvAAi6O\nIuKm3oylxeDqSyCbnBrDnPbN700WCQh6gYB3HZaTlt3DZskf3YpIELR25goN\nFUCVbWZKttwwWl6VuMwTdJzXdqv8BbYhvwVZydrNzmbHzL0YW+OZtpu0+8JU\nR0PVmtV1tWNxDEo07Yvw6t92GlIjVeRTxlh348zwFiyf0ZYlpqsBH/2+Le0e\nuHDELCgytnrVO2IXgDNl082sttC2JQm3Elo1c+K958Ldm9GBpYi7T8ABt5cR\nayAL9+ALFMHfOhsxfELcZaUn7fpqC9rZkfSxWIMl8OqcZDAQZSEXCvMOZEyb\niWWOHC5jRvtjmj/8Z+pfJEWCcy93lOtji+3gXHH3F+XhD+oWoNuX7tgWh9Wc\n96K//wz63J+FHZjYzwLfFieovF7TEIRJk8mNPGS8Rx68Y5id6jGJGMmZM+os\nVzIF\r\n=Ha6a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcg3aMNwYHhNiWzD318OuCVEnD2OlWgdJUOH+PTuTDDwIhAPglnU4amPBNcPDWsMyA0n4H2p3ZYr4b9azASzNKSiXI"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2112062322.0_1638880022198_0.8294721894326675"},"_hasShrinkwrap":false},"1.2112062322.1":{"name":"@bentoproject/fit-text","version":"1.2112062322.1","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"f7475a0b3b8ebdf1b06b5d14e2905a8154e0fb65","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2112062322.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-uHlzELqj7nezNxaXubbZcFKAa1PzLs5Yh3gkBJc6hCuhE87UcVYI+EKTDLs9uiZlRxWiim/dN8HpddlxEzOc/w==","shasum":"acb8a70ca18d476635c8b87ff3cdd309566a0421","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2112062322.1.tgz","fileCount":28,"unpackedSize":1645290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr9RRCRA9TVsSAnZWagAA+s4P/1sC4/Hz8WytQqiPjAdK\n6/s2v/LEp0qbapsAzWqXb15ibAq5f5TBM+zbea5wp+u2XMcfUd6GZwWNmZcN\nOghcT/WUZexfV4hDvyV35ytuHrz/spysdLKFDIuYDSrze2zBLSbVLz1gzr1r\ngb2SSgNET4FYyyLcx5DSUbJ/ZWe2yvzjFrYUTbBOp2pWGi36Jp5EDuNGCcwD\nIqhQQkEQv8+UQb60keRfoe2jrmiq8EYirPUSt4Z0BWZ5BOc21sjMn9K8fMLw\nMGCOB+if7hAM9tDSDAwGhdus07vdKOMmgHVAUMO3DauJAu0tM7f6Gl1ydm4n\nRBVCrsKdhrwhHPlJ+ay2on55R6+093irvJ94yzL93LuzyUw4ZFKTtGsSOM1F\nE4mUCB074ZAYCTq0SFnr0fPIsRPdArivdJzF8yauScTr6mBH1W8Ad+mYDmQ+\nJROng/04KDYooaGamzczakGaDsR5xFanbVte8JxqtLAmkXAYd1F8lnw9iMSf\n+RW99kEI5DOL+EtiEacFDx+uSAbV5FlfMwVLP3bT9EF6afsjfO16BlNfQsWX\nA6S3UWr0x6twX/hnk3OEH5CCyZfkVCynkXbxs2t9lpZj6jUXRxJpk0wkJvBD\nWVfgZpRc65gK/EeEalirKot4bKPNoobHe61U3VhOmlPzWlvZGXVu8qpONWij\niEwy\r\n=Mrei\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBb9fgH5fs6Rs3XFFJqGaPkcWNFw8FtsjOymdg1j8Z2bAiEAl07j0wMUW9gkraaMlmaV8Yll/vgM2+e8tUiN2zCDpyg="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2112062322.1_1638913105292_0.01644326127552098"},"_hasShrinkwrap":false},"1.2112062322.2":{"name":"@bentoproject/fit-text","version":"1.2112062322.2","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"3e8072d191c8771ac14d19f2122bba93b872265b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2112062322.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-VFJM/CSYkUIx5QGBiTzkhAzg/rYZzm3fNNoue1hQHufAvUYRmCZ2KXTYCgmmvllt0tD217oWE55/E1ivnLf64A==","shasum":"d408ad15a4240ae7e1eee8a72ba87961311ccdf3","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2112062322.2.tgz","fileCount":28,"unpackedSize":1645290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr+BVCRA9TVsSAnZWagAAAFYP/3r6PDrJQVOWrF2ZCQE6\nesDRzRv5YWoFurqGikXaA7pe1YGedyYHwd9JDDeYIczEedPc7ZS+LjITKjDn\nm+7aJLTTF5Npr4yfr63E7GL0AhjkEO+mpm1WpH8RLwWYUUp6vIaz4heCFt0c\nXtJq1qmzhqANmjYdly37nOzzXEWP2yfhvn9bAN9wsYcMnBL9jKbQdApE0NO2\ncJj1rB7lKVb/BwZMRVI6JaFrSn2r0CnDYob13AJ5MSmGhRoyknXzeITHl+7V\nQnLU/hPUIxPG0T+VhP/zsMrJwAiUIHEUOe/aCId2IC5kL97a6BbzPptV0IH9\n0FmG6bJ0TuJNJi/1o18CLDHNYGFjj4O9OXBkxBDnoBmMbUB+QQLI7X7j9NtQ\nqW4z3jJO9dyRzavP/PYkksHd9Buvtj8jojAMQReWjSmci+I7FEMYFADZwIN3\ncTMYGc4By/ON0p0SkpaLKFzjN4ESvm4ujCDRhp5cIcqlYqYAxtRo4iXciYW/\nsUeROjn+znSPSS4adfCDMFnoiA5hGIQBzvmF5KwFy9WWsPY7MU+t3ULdZdJS\neDkxtkhrw2xnDY9B4vKZi/DU8O+lL6Pq5qweRTIIrWuh8gw5vRopQrYWp44k\nEg9ZsnOPbS5/szXZW+zQhsAwVdTm3XQBQ+tLpRx4ZVXP91BCyoIzkx37jvD0\nQ1nZ\r\n=aLjU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHvGoflZZg5EWDm0Tl6UJhbbIoW+M0GUnmNqyrDONHnDAiARPPj+/uIUpKmSibk+JnWu/LlHpCGIMpiUe7D16iu32A=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2112062322.2_1638916181022_0.3908180774840839"},"_hasShrinkwrap":false},"1.2112080230.0":{"name":"@bentoproject/fit-text","version":"1.2112080230.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"6d03180e136b7ae380fb9d5d3d6fd8c0d5b28e04","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2112080230.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-hgYv0noPBc5QsTaj3qkU9pY1+k7V8In1iMNgDfSht7cCkGI/vghgWMCN3IZoltdBSRjFY9/5h/uLWGX7DOBNhQ==","shasum":"493c4d64e7761ea263c379b9fb829e9cfe3ca30a","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2112080230.0.tgz","fileCount":28,"unpackedSize":1645290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsLFcCRA9TVsSAnZWagAAmW8P/Ao96siEGrFzp1jSIRyP\n9cb5DJfTcdmOx6SxKBrAbTAKwrKNpJN215zh0bOaZy/keMtvo0a05FEQK320\nE/QlMGMt36QHOhMgXCZ5JQqlkboJGOmYxW6E4tzQeVr+Qqwci4W9nc5SLpqS\n/D7TmNcwQIONUwNdszhYxW/iKITleC/LBBXttEoV4rGQ33+LQOei0j46xTyu\nX2JaHb4tGyc11y+Rzk3slXXHMU0o/VMjQl85HOMQjEbdxfRl9G5tovBd+Sdz\nvpD+coEtVJkMu5MnQoH2f57HvAlOPCQ11fkEj5NbVosBau8G29luJqmSotiT\nerk9N0jAF16rBMHHnG2n/7vo+J/+DEOTo5ANBwe+MD4DhkiRlhHpLVrN4bOZ\n1VjhJA/S+Iwz4C48Q7NwXdhVkkh9AiRD8YhfPkLGGhOYEWFl18xAZ00HlOms\n5ilKzkcZY1PoxL9cj0ZVUexLaqmpbwfuZOU+XwIb9Pp20rkUmLyjJykLJPRA\nymMEYUPYg87H+eAPfuBcOPjLkUO+Sdf6N/SeGXKuWS46+9CSl4TPdpXVlOc6\nm23H0OoOWGrWZ/W42GbwCeEAET72yKFNaDC9WnBHv7aMzyOnPWfDd5bwlSvp\nXG2wuOcuYxMdTDiq5EE6JofKzirD3Hrw34t+V5FfIFPjTSDzwSzVPRpA1WIL\nH0RA\r\n=v9Nf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCy59tw1GlVT+7831edX1Cfc8uEDY6Ldq4Qyd7b/eQ6VwIgEqohdB/bXgbraBhvg82HwkKyzyPubBv6ueOMSq0dRjw="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2112080230.0_1638969691635_0.7819081549602125"},"_hasShrinkwrap":false},"1.2112080230.1":{"name":"@bentoproject/fit-text","version":"1.2112080230.1","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6268ef31f81697778937a9d77d4ccda3a561f39f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2112080230.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-vwPPAHk6ZkcXKOxJGWQv6dy576tURneot/ltizVCeCuhSFDsIUQeZ8tAx/uSzwfdVsR0jipkjq5D6f8mt3WVKg==","shasum":"a63fbcaffdda4c813d01ee7cbe009bc42e5ae34e","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2112080230.1.tgz","fileCount":29,"unpackedSize":1645743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsNXNCRA9TVsSAnZWagAA2JoP/is/1/aA1IlR7+ouYt0+\nHXFOPSbhle/my0Ux/do+1d0hhTIH1YYflfEhqgdB3kyngX/56gAVh4wx0xGz\nfsimvzRU6xvAb/iG6akmLo2X0yIDw96rpTpedLK/Q+G3FvtoDfb7kauBU+KI\neVGxLQUJBFjTXnIRUM/9euLjbHZI1QZybTinuLjB06umyOKpomwe1+uU02RP\nSl2HjMPV6zVPe5lF7RONU1jFtoFNGZDbNtLn6MknyCWWSiV+7iOaNEQSSW43\n+mjOqVVzn/e7vYF/4/EleSv+uJPjl09PcwZDNrJzkGTBmhzcL/O3gqkGLqvW\nmhQRaUrA3m9Zn0XsPSEj/TliZ4nXlp3p+u5Ucu785xYMTGXJBU6K8W/JioPc\nn+OmH53XKRSDky7jW9yuhgeX2PBIWIUyeeCGmjXA5iYFsT6O95YxdH+DMzYV\nkL4SGXKssI4WQ72Aa2rDCwtYeNLpAu0mBk4/m8pmxdRswuC+zzL03esUDW3M\nnN0TNgJRuJrk1TXuGTGb3AicyrWdsHXOR+0npQI109fmcc/85sd5LABW/KGN\nXGWEtnRlHlXaD4no8HgdniEremicgm5Q039dqP7lTWo1+7O5CA9ENcIMVorZ\ngBRffp8XcglEQKOOzgGp+Vi+VtZb3ImreRa6tT2P3/fs4ncHtVOMdITdC5DI\nYYf4\r\n=VvLV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCt38ApvfBdOyNebUf9Eo4EXVlCvwHNnF/DT8HbM0FIwAIgNImjgJ5cGWlfYsZOKyGF9P84AfC3X65TWkDFnIgIeDE="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2112080230.1_1638979021036_0.637666661082182"},"_hasShrinkwrap":false},"1.2112082232.0":{"name":"@bentoproject/fit-text","version":"1.2112082232.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"b7b1a9f9f7f0773645f4fbcb9a550233900046a0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2112082232.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-WjFSHScB47AJSZyRhUowDy+eKyliiu9G9v0v8lODKBcQsSx8tkPTJCyUVSsG/tKD17+LQyZcxVt2NBR1ShsdJw==","shasum":"a30590af49f7db78b578e73797f6b33a73ec7c59","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2112082232.0.tgz","fileCount":29,"unpackedSize":1645743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsfpbCRA9TVsSAnZWagAAJgUQAIOqp9mmV0JKgZqHHy3D\nnuhLS8b8VujU1KGKjvj5BmoZkNQuaKPueNZhUFR8604OiQKt1nSUhJ/EcSx5\ny9ENPxMNZuEgFKE4xSr1U5ETIkm8/TYGSFai47BVDV+I2sOKcs2Pij6dDoDg\nPVoi8gWdvqlskPs57GV/Zm+5eMmROOj4kTsmZkumrAAXo/tWCGFlNELQ2gpO\nk40gp82S3aUxumq65CApgOl9A7zd2uY2oHfrxjt5k8yeo0SQFp2lV1RjGzTz\n+dxq5NSu8pwc+fgilE9N5DQXz7DdjP0eHW8hp39qI2n479FpQZr21UC9n3p2\nAqGfH/pWWqnsdb6ZnEine2e3DI+MSNpI0vTChoq1t6ZC7nwS2xsIh3L9I75i\n6OmpcGgtoFKxvaPFtOVo6idvYTcEUpDmu/I6a5smoMNZZQD0eqjkZU9ewkJU\nIlAi/mI2KYiAsQc2/RciWvHD7YuCTLZfBP/Yy/WHWMv9GloTNWFY/az4PUcR\n8keoCqYZTlLhwmIZ/2u5wOfFtiLOHfV+lt3T1vO6VL6GgKvrpHDB+wNMLwzv\nq+RSmBmGhIj9rjtVO/5oG7LXtXa0oEyghIIppfi9cEHYlCljqvpdXYAA2WMQ\nK4ZHMbTjQ1kR/fdi6/lgD9Nn81bk1F3zmqGKAub12dX2YJfwRVjWpr10srdT\nDVsR\r\n=TmSq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEWkcW3gZOYZOEVt3ZWCgZhlgQYqHi+uqf9wh2Mb/VIsAiEAsb3It9fJgSKXOLDRUwvPn1KWYi0h55UwRhH6HkDMmVM="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2112082232.0_1639053915287_0.3896134635841748"},"_hasShrinkwrap":false},"1.2111242025.1":{"name":"@bentoproject/fit-text","version":"1.2111242025.1","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"b65dbd2c132f8cee302c477f3a52cb864a79663a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2111242025.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-g4y7RB8fmqOHU/Aql/upBGFL6vLhLFEmkJGJ6fy0VX1z38L9kGlTnp6713uopSGdx/ekqB8JF6t+ulSGBYS+Rg==","shasum":"b514a8310d96837a2f940482923f1b0a547bc6ad","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2111242025.1.tgz","fileCount":29,"unpackedSize":1617713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhspsxCRA9TVsSAnZWagAAEmYP/23d9e7xa2soX666oD+h\njHQ56TxQkV04jlvhNowp6A36nFz5wwn8ISglfwqHh9HDslUB4+GDPn3lUwUS\nQEdIp88oDT92pu26d8iUTGvdQL97XRVrn/J+jok4FunzYDvpNDSopDD05ngd\nAQBVKx6Jgx3lre9PiIP1GW0HkvicaqeDxjDpJBUh/CspD0PC/OBae3hVnbF3\ngpiVM6EJHnTkhikIhb4J4EjXYQxbA18QG0FUYURRWVeZDTT8g3NQNHL2fze1\nxHWMAFlJCB+cCr7JrciNQ+3+IAL7SHSBsDxAx8NslcYACmdYrDRjxfAkDB46\n9Y6HXKssic0GMMmdRYg2d5hXPyF/vYeM+nUaXrlJrWrVs8BQXUgJ7K7zaPx2\neJvy2+9tlmpnv+o0bt6rCuTn6X/UG3yvoMl7zklQYnxA9A+SECnVlIzLaN2G\n7JS44UBV+yqAh0GBPjNvTa88P5t13SqrUp37hW6fIl76xLlXRK+dzPMoaTML\ngqtBSZezU05peO6tBFCQhFdL72mH/qohjlgfOgflLSHioL3Ccg61E+2VB//9\nozOGFy7ZhUNiZofxuTLZyk2x/E1olY3Kts1gwHl0qmVLc0Ti2u978tbSUb/B\nWCvdMaa/LTXjVm5x3BPjznCAQ6QvEGER4It6pdtQrAZJJgamWgSuWafoCeg6\nj0x0\r\n=dOPS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjjly/1tpsEj/ynnEz9wtwuy61KaXBnTJpkr5Rpx3wSwIgLQmsVrP303ohPD4QKzKbkdzPyaOnhxpfDXmgJcbjVy0="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2111242025.1_1639095089542_0.9229411919139074"},"_hasShrinkwrap":false},"1.2112091956.0":{"name":"@bentoproject/fit-text","version":"1.2112091956.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"b65dbd2c132f8cee302c477f3a52cb864a79663a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2112091956.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-w6fGdX2MB/RwcaaFXnEcQGmHBFqhNCACFa41eeLB2BawVUnIsyXJ7xR0dQwkE9ITspGgsQgRyH2r4YbKzPhdbQ==","shasum":"1250714d9d351cf6de9f5960049525bc92f6ac8d","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2112091956.0.tgz","fileCount":29,"unpackedSize":1617713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs0wNCRA9TVsSAnZWagAAFMoP/RTXLmaAGKS7OH4AdGvj\nzdY+SEhrMY00NIU4Hx1F4xO6lp71ITonbWEolmYAdQRKm1yE3WAxLRaoIJZk\n8V/SYyc8S+ekW5D5P+rXt3e8DY+Llr4+pGBdbonlBILlzHwpALvYu/rAV7Vs\ndRTNZcIrBtEC+OnaRhGuQQdV5GkU72A0CMkXFIkOrGDCLoAvN/kgEforta2v\npQDUT9srZH37gt1ZbajPykxDmyuZ0B+UFJc2SCnmQ5DyDoo6CsiT4tGiR8lf\nwGDAemnZonBB0Z1KxnGlk9fpByzTpt5dDPEkw7MNE8khz5xwlGflYOtPq8Ox\n+mbpr3ErEgWLzHckj2AaDgAFSN2fRYM9hArkUGW6LsBI3wW2/EwyEx6Mx4MZ\n2f2fdosNJHH1VUqUDZTw2qL1i4R0KMdINKV+JMRr9BCJeHsKPNihmsiBZtU/\nCqr3QoIcOctVZwChTq7MLJUhQi2ZqAOpNdfnIrwBS9Td4jpTtsv9EhmPEJCQ\nceJWf4hJoY2Yn9iCZhGa3P4SsEsK35pxtuah2K9jTA9D9FxPU0gRfNiRJmD5\nd9e742Idm6sCEAMZvX0ppgbk2g1yn7NNwHQf7FDTcXKasP/TN5CIeoo4hK/c\np2XjUITv9IWVEREZz8X+009k3smGUe77ByBU857vpTEmY93dmHdJ8/kBocMo\nX50B\r\n=OHhE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFa09FdITOxbWjWucv0BKjCAP2DAqUxNO9NCuvXJvDcPAiATqdYEd1uH3s6wwdnad71zyaM/jS4zCu8bVRwbJeRFUw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2112091956.0_1639140364997_0.8005583741204161"},"_hasShrinkwrap":false},"1.2112102136.0":{"name":"@bentoproject/fit-text","version":"1.2112102136.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"07236921f8e25ede71217e1921f8aac93c30ab6b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2112102136.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-PHw2Tfjd/oInzFr84dQnAnM4SJh6ZquNTsEl15+M7f5/7t2SteYhaA6hqu+U1bWHfbYsS6WjMSvrHQ8n2J4nFw==","shasum":"ecbde798d2d9fcab6f1811056c61f212493edc86","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2112102136.0.tgz","fileCount":29,"unpackedSize":1628864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtJoKCRA9TVsSAnZWagAAiSwP/2d3xLxgTHczneVqpJ7r\nl1v/JB3EolA4vnFtWkpTp56/U8AB5MOSz2fej0CMsj/9W9dwog8urvUPguQW\nHLCS7/z1OGY2qwAXoSzK6IYYkS+8geLYP+tA4l99AZR14Qc8GDdjz4v3rzVB\nhBcGlRVPR7ry5Mz0eROwq/SmSMJIeEmQ0pgwDAFlNfIC0U5BeGCpUEWv5QPJ\niKmzV049hZuu+swjerFGmDeaWQVUg8seLepC4Wl6yCh3wCmnzGsBBkB+gbS+\nNjx2v+u8/dO8i3NByuJVtHyyXrCYDv6epWeRqe64w/YOP5j7t5mkr20tiAf5\nO8tGzHKXXa8IejUYFRjO+2XNYwgbEOnqAS4htudL5iT9L5bGqoZzi/9/Zk8b\nr16ygBYch8Okk2C5Ru25pVMtnOVGIqOaBRik8JyUXaq3HoR+2tD4R/sIzKeD\n1HxNdxOmqsVE2HKXLKfvGx08ah3O2j4jryiIuFI1H2Tmi0EsE14SdyDvSyWT\n41wyqk6v8jn0IXyRc0qMUFApgoNMIGIay9ic4Pla3p6Gu54s81I983EgJAlf\ncryXwbARKsL9vmOzbCH7G9l8MRS39ItULyEqqHnI5Lgq/F9f1kII8kMJtDHz\n80ulRDRHOhmhWpJRy6XiWq/EXQsCuwIpUWdzHD2UBJSSDYVRsWrIkHbOzwO7\nkekk\r\n=Sa6U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNlHL+vE40G/NegZRS8iUdnGkScQtK9KWTaCgxudIIZAIhAN6IzxBI0dx3cbSbiz/KeUlbeXf13+kcMvhSgQmKcvvm"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2112102136.0_1639225866673_0.0859326709937498"},"_hasShrinkwrap":false},"1.2112132331.0":{"name":"@bentoproject/fit-text","version":"1.2112132331.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"cf62ae1d6a12b70dfb6a7bd8ce66ed5bc6e30d1b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2112132331.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-58rUFAUyVKZbqP3MCRHAi4nnZFq3+ZAQn8HRMxSLpIBfKwOgLioc9p3MdBhLZrkJJn3BNA9/M1thLm3cqYxX+g==","shasum":"976785e1e28351e8d3e46d642506017f9a86b93e","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2112132331.0.tgz","fileCount":29,"unpackedSize":1626219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuJVACRA9TVsSAnZWagAAuE0P/jTFH0TidZpME9etCNh6\n0dPYktJdQKEol3Iwb6aNKQdsoBZs/16LUvCLYwU8EYklzEApkRVH0izG97ar\n3YBA4r0VbnPZY/xx/VUTgWPiYMUdspWrkfB7hcTqJDdLLxV29310ZBCFsE7/\nmBC2TGzvSS5Z4xvslqqb55nErhbPd4q0B70n8ZTXz2WSi4WBXGLzERKpfPqv\nCY8S6Z3hjMZbwTW2WhuKWHDfZgl7knKSzUiVkOSvorD6iNGeD2gP+rl1jjQX\nvT5de5XJg5Woa+F8SycS5gzsJOv8Mb2W3VEVk5vxMKYGF9yL9bCz24fHwhEP\n2v95kznQaax8bExtLiJwsdF5p2iYvQ56kJ0AGYNOjtM6qMa2i9Us5JswkwJc\nLyg0Z4ocVxo/DHuZTSp+ZKeQ8CQU+dZMSSrbsysoMCmlGAczjFbQWImg2nBV\nLlQGKJWAvEty3hz61e5k6593ByD8qh4E7LbaGylLhm+XuPYSBWoPtGUjvqKn\nR7ePVL457mAHMy8ZwDVdwUjBZT5Hg0jc5Y9bf1jQackQ/LJL8evJccTEGcSl\nP3EFt3WK9wf3LfvvELRpgxXZKNicujJyEhaIem5QQuH8rbpsBzY/JTM1mCzR\nR8LtlKmHbVXug8wRkix/fcK77MmS3j9dFQ57nnCkrloMaFZTvTKyDEJronuK\nHfHe\r\n=9wV2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKqjKlaiDL3VlCMAtcVmqJbyuvsyL2TQcq4j/r6VZs2gIhAP4NQkthSosYeKpPOyijVlS3W3IoFqUdA29BmG3kfQyY"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2112132331.0_1639486784286_0.5644130562311049"},"_hasShrinkwrap":false},"1.2112160003.0":{"name":"@bentoproject/fit-text","version":"1.2112160003.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"2bfd164830b15f49d7d86cf73821410a039d9039","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2112160003.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-uIhayjD+qDtqfAVrhHaAQ19tX6sfyzmQfNY4Kymq3FzPJk1LFba8bPmkVIciHfMKbhj1FB5FjGb/hCZAg0w9dA==","shasum":"a1020b927090d4d055aeeae17f68fe0c52a1e923","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2112160003.0.tgz","fileCount":29,"unpackedSize":1626219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuy7ECRA9TVsSAnZWagAAnt0P+wdW628yeac7X2Dkr09r\nHC+woaHWArEnYo6Ayu2Er6EDJEgXnzxdtIPOfA27a2HIyNnVEPV2cj0kVFGK\nPa2ZmQ/uwRmlCiuExAkH9Eeopz2jS0oPq8SdX3lxRN9BW68SrNxAkqbBq2QG\nJLSNU6cv/h75StYEG+gpr0vAb7X2Il9e5BQvmOVLTHR4w2pvwwv8T0mePEIF\n206FYCJSNC2PKHFymzGzSkLcKR8DEBtuH+Jz15e+GaWRSTC2Q6/HUotsX2Ch\nriQtQtC0WaWaC8mOlqokHCMf6KyHhbflFX0Qj7vkYOoip9z/WUCg+iJCGq0A\nQQpCoNtAsUa9GazF66A3AB6JNTfUTCsX1xjpuXxoT5DUpap7A7Dfbs7qx6Yt\nr5VfiQmDDMXYm2rEVXKAKIhD9qCSfDc79EVGa7v50BYjfSHEhYo0tHoVs5UC\nLK0uO10OGfJ/Pbtc0lqtdIeMiVIM8FDv7TR7TkWJhTeMQUTgJ5uuBe+QtcF3\nSAEVcshB6oNwnuSglUhFzbGmYN5dVCKEBl5bPdW4QQl89bA3aOt4CWp1rZ0K\n6UOzx2mRCa8SV1IS4utsl20HNCMySnvH0vM7Z04JrIuecpkNe62BC0uRXotp\nY9f/3rcFzVhQxl08GcihYxjBaY7qBoWiCoYwNE+iLIqtisEmizBhM0iN1cvc\n8fqU\r\n=5IcF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEvCDIlTI5+3bxIJ4uwPBRTGMUnuwwGkVvlTIF8NlNCgIgKy5cE0YFdPQzuZaJe8EKbxGCp+CvsdmE0H3AtfbQeWI="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2112160003.0_1639657155934_0.244726452777291"},"_hasShrinkwrap":false},"1.2112162055.0":{"name":"@bentoproject/fit-text","version":"1.2112162055.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"e3242ec094a87348831cbdd342f5187068444994","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2112162055.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-VAo8g5ZmDvVXeLn5uq84WBDZVwa8w2REUD6QwK7phHwQaCyQZNsars8N8LFeuOfrM9p9AzDETJHJVj9viF9dVA==","shasum":"10c263055f220fab3a761f60f5c27777c4defc5f","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2112162055.0.tgz","fileCount":29,"unpackedSize":1626123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvH/VCRA9TVsSAnZWagAA9CAQAJRNMQsZWPGa5OjJW1lH\nNKa0rF31NmIEiJVoKT5P4xLGt9KEEN9toAuJXwfyd5HKbVv0LCIGpdLsOJqn\n/vbQyrD061tKHPiiOkfyrHgd6a/vxOO0hz+IMWqr9JzREpk9wmkigzo1QT6l\ny0lDV8tcCMhQAQCwe32Dq+ipwP0mLUkn1Eu5ehGIvd6BzgfwAzm+Z8Hn9SQJ\nrkOWo9UTuiaSlPkZlwUyKzcxsxXScNrLNA7TO+Jmce0z+u1qgGtW88vWnMMo\nCyTCljoQXdatYO9vVwJi3x5BIoPR6AD27VCqOGub6OGincV6+MjnPqgP87ta\nzZ7HRekvwvK/xZuo6SV4LW3eg7Zzffq2GeOD/GFy2O1FIZnlh0KelD4KkQsU\nk0QTWOBecj8NN590/P3bDbwPX8YO8YMqc7m9oG52B4YiFzSXT0+g9S6oaCA0\ntE6grDd91znlwDOXBs1osl9qzLJz/9jZqUiwiiGh2YeaLVDO/082/ugmZ7+D\nE27XR+y3M6r+57OAlgrD4nZaemU3q6BOoUbQypGyLaiEJxvmL7bW/ZVMqN6z\n+uiCIJ507kkDmDZDLISdpgE8o0wFOcxfocOmqIW3VU+7j3vDaAoOZg5mIXi9\nuRTb7xxTemPwRSbNqdh9YKwEiJBAxdrQpAjNNx+a5/JMJuPpVY106khnl15a\nH4a6\r\n=Z30W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOOxuq1WRhml+xj1c/G98wnWWAjvrOySbrL+CnKTAZ1QIhAKpG6QEuum0F7Q3HNiCFGdThNl7XHruQDXV+QY/WFsNB"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2112162055.0_1639743445370_0.9484146312819948"},"_hasShrinkwrap":false},"1.2112170012.0":{"name":"@bentoproject/fit-text","version":"1.2112170012.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"38e50237c04e29792bd0ccfdc13308940a873817","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2112170012.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-jbtm8cQNj5dwhAArt+MxLNw+/orpH8Bdv2I8g5ew0edcSbAwZay/DDTAuuGuCbqMzt2IFz7CDIbJBQNsheN6jA==","shasum":"4357c11ef1f11ba674ee36b785a234c112a42ee9","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2112170012.0.tgz","fileCount":29,"unpackedSize":1626123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvdF6CRA9TVsSAnZWagAACeUP/3RdssmyB+QfhjyeyYVa\nKEQfRdckgGUt8KaqE+1qxGSb0wFl2MiY3RaYN3/9xgcRX2Pb4JAXmujIshyq\nxQxQx2hkG9NPCyvwuemm3kC1pC3Vwy+OF9PYoWF/xe6vxZtWf3fSc2EXd2Mb\n8syowIrcXusOWYYxcfN/QzzWtZBHxWD/U9e6qrXxumPFqZCWcIVPM4qbvnly\n6cXozpMdXK53I6PT+1xgLE9O6KcKAJnIsM8tRGLbrWsj79s8xnKsWOz6tnmN\nCkOEKgeKpwC1MJ4io3nwPCrhq60TsyWTZV+XkBnwYdypbCsXxzlsm6lRY5aB\nIt9MJrlZjWKajQ1npYOg/MaaleG2X+W4kozwbA5TEFrI6jYp/fNuNBvplRjG\nSUltugcurOUZwfsvQfBxIUU7tW9FBDNouUTPoeCqOArSEAVFZVSC1O5o076t\nj6fHji9g9slkfcg9ueuqtY3tjOOM6+G5RZcMBmM/6lqSyfR7EbMf+IRzt5gJ\ncqm8Vr1SX3ihWoWFTutUauM8/S78h47Ryicf1Zp2E32k3dORkdclLFOFAwL2\nlNyCpJweadrypdUzKwrcyhMrPBxLZPIpKuffCJk2/GtqCDw1jIjisvaAuS19\ne2sHfyr7OvN6wjGlfh7P9MMOOJUJqUbVCaP4meMaGfRAN3SX+frgAYwlYlFE\nqL4x\r\n=i6ab\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDl9Bv7/Di0wNG6Y165uQ59/m/wUygjOCQIyPlGbNt5PgIgVBC8EX8Q+pFt684TIV5wIZb3PgtnFHh94ucmjGSpGc0="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2112170012.0_1639829882764_0.8050303147744229"},"_hasShrinkwrap":false},"1.2112201724.0":{"name":"@bentoproject/fit-text","version":"1.2112201724.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"a8be9d1eaab4dcebc8c170c9911acf0c8a5e73c1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2112201724.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-yuIqg23s2nx8EPEEHgS+ay+jWavOYb02AxQrQmgHIPxJSDeHgYfPFFmPK8jsYfCmYh0Hj0yVBeESSUpk50QHYQ==","shasum":"5ed26e842817741ad13301059374a4476d1e6281","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2112201724.0.tgz","fileCount":29,"unpackedSize":1626123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwca0CRA9TVsSAnZWagAAL+YQAKPSxPnCuCnRYwyGVSkF\nS6FocVc3LJdpMexfy2oSrQPyWkdGy6raxyNFOD0uG9F8Duu5x899ovtwtD8l\naBR2DF9i/98MXLvhScUdD3xhiyjqjvuSBcJazPD80nChGNmAkEyHmQ3r5pH3\nXIs9AagteSF6KiGOWDMZHp6h+LnSP4R3Qv6sgbH7X5K/m/HSkBQrBGz95k/G\nSWW/3epmeSZ4J9qWDnKl9OYctTBXJsw289s6NYULW9DGWRdpKqw5B1+8I0ae\nlnIZXkt8djHNDe/PchsqDoovSyKtay+1yM1pCkAKNje7wt9oWCQgl+tGuHmK\n2F+mMboeol5peL44nJpvPQrAh0qW0EXq9EahEYuFDlNVBgt8envww4GVgt8Q\nY9x4bPXP66INUPShv+k1gNhQ7tnksftap+U3nbYF7p2ktds3u1T5FEOOEbit\na4DmrdI/R4qQkwYKGUBalWw2CQQwULPfWCGdui7Iclqp8BjnqK6sCtDbHid5\nMozEsTaFqp6qHAEFADY+nZnm09jKALeu9Wb7GLM26RUHJgEn3VAxIG0HWLsp\nKXmnCbj2poeMmKfJymh+RobY3YGXcrbMSs0D5weF3kRyyTGVxSDzJ/wy+v7K\nODtCVqYt87L/3FtfvO4mTKvYL2q+SJUl2bE3vcDYyhnsRJkpe0DP+MOlNLuE\nQ+yI\r\n=6Ziy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBJToWpfzcf1beoEkjDlJXcU9AdIaUdbrt2dVqHyyuHHAiEAiy8cnda1FpBS1jRLTcyKCb1Ki56nuxXRIvogS8n7rnA="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2112201724.0_1640089268368_0.5070348137201464"},"_hasShrinkwrap":false},"1.2112212349.0":{"name":"@bentoproject/fit-text","version":"1.2112212349.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"a6b6a6c259283b2cfcfb474966602c2ada072484","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2112212349.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-TTXaXb3Jei3P8sYnZ7XioWgNfAWeJjH0ldAgZ7hy1LNwfcaVM5RH67QVFqXZW0XoUy7oGXchqwXj9EyPPM6NSg==","shasum":"2d09353ed5adb1068445359bc35473258e620393","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2112212349.0.tgz","fileCount":29,"unpackedSize":1626123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxjGCRA9TVsSAnZWagAAkGwP/01gpAXgRPZOMlff0dlg\ngYy1WgbZ5+CSCZnswJ8G64cg55HGF/XmQLcFDb+qLcyPxrAILZA89EFc1bOn\nr3R5rr/lArTgYa92Z+bJ49fCdS/Dnpw9EG7iC5NWpn9V6dSjz3BWlEfAnDGl\n5AEXa+iiAViEzk2oeNH/lUkKS5KIu37oSa3q5koFElu4S3nFHaXGrdZfOD4f\n0l/N9szKdK0xF1RV/k3xmaHVkXHoPkbzcoPVGjORY2733zVoxi5wc1EGMhJA\niwiuZxgFpM635PHk1eTNkAo/iCIW0JwUxt5cJ4t0UTtqTRtqeMg1CoajgtYa\ncccl6o3N2lQAIXrtQ1GOxpFCGRo6/50fgwXP9je/gj0tXIOn9eqjs16H7pPf\nwgIeZun00akaFBln1DyMbTawpXk3+0vbekjmC6PE3m5loC82LsNGtF0PKihi\nDQM2hJpRzuLKzhj5i38yst1A07GywstpRPtR4qGf4ug01lhBpGjkxk7xTlC8\nhX3C876QmE4NxpKF+NwO7ow+TG/3G7/ZhCg9y824gYxNq4scI8FLJYFjgFTB\nAGLI7BYBf3h4dQc0BqzxD38yT80HIGFN4jGyZtEH3vGEEoerJKvhMFKWaz8R\ngiKkd0gmmMFTJMF3svJ5PmfuxbFbWTHMqFGpc4UCnyfczqPOnruSi38D9eUg\n7lXi\r\n=9d/f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKb3D0IOJBCGmn7cmSPzE8Kdwo7+/Pixg7v6q35n/JmQIgLgXxvvrBBfbxDkVEw7HHOnN9Qor+gDrcvrfkSEX9CBY="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2112212349.0_1640175813997_0.8317522046281498"},"_hasShrinkwrap":false},"1.2112221739.0":{"name":"@bentoproject/fit-text","version":"1.2112221739.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"5d282652a97695e5ec57a655f76c0cb6d40de066","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2112221739.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-r25S1x8+inOHXg9muIjPSBEOyjxnoDdBxWXzojLVCoOJo8ln5o2jC98TvbeIV/pz1iY/IOe69fm95nr+fhQ5qA==","shasum":"8a890a6e95fd455df4b048f5faa547eaa1c2bc6d","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2112221739.0.tgz","fileCount":29,"unpackedSize":1626123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxGkqCRA9TVsSAnZWagAAGVcP/14I/Az26MXTDQ6rwLEG\n4kxhSEpvyc0zgi/D+F8EKvn0K3jrrwojvmq8KDbcyVn+ji0VtZ7fQAmlL+Z3\nllZRpPj2WR4sB4J8lFAjlp0ho90fdaAx007FpPdEndIjVXiqOAyozn/7GD50\nCGJW8LjaMYnCHtNfPUt70Bj4aKhcJAr2t+XZ6cWZ5xxdc6CYJA1FXYZGUJIz\nczYHcmWvh7vYCXAbFfM9xz21WS7fBO2qXFoHRWFj8s8BV+ii8S2q2MBM7pj+\n8WGOvRysRkgNLfb7xGq6XuT8hwxwziTiIXl7A/+nACOQxLlh0F0iDACUprC+\nvJCTx/50vqLj0Eth6W6ZY4mNtujSlvgZr8esLxUeoItq0HmK8VknMCkADpi7\nxcraBG3C0lgV682ARMFEFTQubwkOfN+yHGASYZRDKyIv4pv3El7KcWAXL6fV\n4rIwPvIMhrAYb2Bd1157H9LDBlnmjJ9DTay/GIy4ERzHVmbpXkjB497wRJcp\nC8pPjGU4tQ6EON75kMnTklfNMhgVK1DSJyWDm4rzcK+JmztO2MXNzB9gTK/V\nn/3KtFh1C/pzJ2SBL+vHMmewjrN9Hs3a9tSBFIB0baYxNK6kLyr4bMYQuu17\nvlWZexZHzCqvwutIGWQcku7GuxqPm2CDpdi2wDQ21LR+ockeIx4dxWxHe4vj\nLxda\r\n=xo5S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICBf7uyAw776bPEwtMoOmhPrxyrtK54tQEX8e3GCWLVFAiAYGRJr20+qFvoUhuFgXW4VpXMKYQ4GxTZ9IJVOlqhb/w=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2112221739.0_1640261929998_0.5632056762680859"},"_hasShrinkwrap":false},"1.2112231523.0":{"name":"@bentoproject/fit-text","version":"1.2112231523.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"3d06e61b6949affa49fa2c89bd550777f0fc8c3a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2112231523.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-EhajIP+VTYyjYS62OMpFUEya81gF1SYMNEAVyrx0PNu/1o5XdvPi6SQAhI4YeYIOMc8Xpk4ZP3xe+mDQRQVF0w==","shasum":"ce56a9bc05bcf9329c0dcb81f1baee05d50f13d9","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2112231523.0.tgz","fileCount":29,"unpackedSize":1626123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxbsJCRA9TVsSAnZWagAAyNsP+gNlJp6SofT1j2FT0Kgg\n9YSSiPU/vQpoFHTgKS4CjRwiwYWbQxHxEjbkPkqXZ6A47AshqC3A/509TqTS\nnufkUMLEBV+Wyy6JTKxFGL04nHotSN1CrkDrx46weX83Q01sD+7JUxSCoALO\nXe/mzJcrlA8HhSUZO9Cgso+nBY+9eiYOhJF1563Fj+f+Rd/Q4mNnXV1D45Ks\n1tDczs4lMxq0sMz1RPW5kMHOFFl3Ub9ll0fUFlsDKVO/ZpJkHJX9ZvgtEvfj\nRx0O8h5n1tbcCjREbO2bnfo5h/yP7t7o5uWNvBn3dKWr/g60xaz1mEB9HROg\n4ORI7l4SQYRGizmy48oXHS3WelQtYk7GCtWmFwty8qMxD70YoiqjYw9ghdlt\nD6LoG0Sa12iAtN3VpVaAm20zLqBYsdncUk9P1iT8BC5VM1eMp0NwpyjkQC33\n1CXXuE3p/fZR6I88LHcjc6mOwSJNCb4Vt3kzZJIzbJyPYhtpOdhTN04AcvqZ\n2IRIYrrABeh62TBMI+Viott5Q+ICyujYTJnmrpBbX2QETvpmjKhQi0P2Yd+7\nx+BAA9Ra0tCGe9a3brY2Qw7S6r2gcLRn8/YNJCmhRnC9vJJVYQ0IMBfuolTG\n7M18bVykLTsDEAxXvLH259vuI+HXs0GhPMODNz5DWBnQMt/LEwLBAr+TH+cx\nmwxc\r\n=81Gq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC1ODQA7vrE4DjNKVaG1xK9DC/7EfQvGaWuhNIrvXXLJAiEA0faL2tlvoCVk199igv+BHlehCMWZivkbZEDfuvhsU5o="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2112231523.0_1640348425546_0.7532104479557877"},"_hasShrinkwrap":false},"1.2201042109.0":{"name":"@bentoproject/fit-text","version":"1.2201042109.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"9526fe41f7489e55b2e2a8bf52d6b0e4367e19e8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2201042109.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-Xv9nhHkRLwY1Xrawey6itwjYVW4J0rE/U8Siu1+wT6q7h8zVfSzICU9jS+dY7K29v0y1SoFGYftTTqwVjnVOgA==","shasum":"87f6ff8a89bbccd9eb631dea28098ec26afcad17","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2201042109.0.tgz","fileCount":29,"unpackedSize":1601381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1Y+QCRA9TVsSAnZWagAAvDcP/2CloI1BWETqUbZZHP6T\nU1IXqxgXSGzZ4AWcwA8M4qw2RgLkFCQ6zI/ByHXgVcY9S9tLUNAp7ma7PvYm\ndFD5c0plNxHVti7gS8Cymdp2cTDylZ76ND933LaOwkqnuAIHW1Dp+CH9DU47\nTf/gxnWYDBKBUueeWDCxbzzRzCWAaYWcai/K/raMBv3DLMX1YcJ50XKIKQaW\n9P+bp1IsZTQzepy7pVToQ+OsZUZtnEdZT5mOCAvC4VpP5LdNIRpYaaW9LZT7\nIlXBbUZ1erWZmi2BS6W2rn9uUTxACzBOmmSJtIXOArLiKLQZgBWwRQPXNevi\nxRm9D1ip+1yV5FNbgdyO7uNy9bRLBEcukb3UkvT94zX5WhSg2p+edV5RALPJ\nJCKfmxk16qt5tqM865pm+Fca7ap1ab5lI6sAfUmmr+VfM1PXASj0TVyXc1P1\npfFIDmpIs6QIm41FSHp3MrpCHaY5wFf57owgr4NvrtAGPLcs/njuiL43U9EJ\nPOSjs6y4hQOtpGSBCiskYgJfvJqZ8Y66hS58QpQxxxjaScj/lVjtZSorfVow\n3Ng+ZcA64unKfjmT9axA4iz6P8S4ekDcpRt4OK8dDbzdak4B9CGLyP3k06OT\nnM/vmR7r4eEfMpvER5hJjIxEP7d+jSpCd5YxWzo+o8qCeWPdLaqkJj6rqmZg\n94on\r\n=Z89x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBaHJu+qfhCJ7bYqsTGijfYh3y5NOsyBnkwZ+jch00cLAiEAyEw8B5tBL89MK+p/X8yYk7C8lpJusR3x5alOyAvUtpU="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2201042109.0_1641385871861_0.9216263465987489"},"_hasShrinkwrap":false},"1.2201052144.0":{"name":"@bentoproject/fit-text","version":"1.2201052144.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"09cb7c2c04a007089967ccf35accd80cfaff0c83","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2201052144.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-j5U8egnpiirS+y42jn2Y+8Iff9ZsvGJlhhbcfeiuYJIkzDzPcwlGi4M71JIZetemTjgOHOej5MnIdxUwesWQ6A==","shasum":"c5f1772b67b73153e587d308a7fa8ce7e5359624","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2201052144.0.tgz","fileCount":29,"unpackedSize":1601381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1uNACRA9TVsSAnZWagAASzkP/31I/G+0W+VLvwaTflwM\nNxMJ70Pyg0jdHzDOua69h8WDYrQRyWSz5sqnqBNDEmzrUzmLlbG7BS6ojNmr\nQsKrVRYwWeCto/jbrbL6Cx5DEm7HTT2DYwyJ+ZpD1IoT57cRePQNtvnEvgP4\nZj0qniOcnnLWh3OdS0gxqdoQrPfcSO85zq+E9dNlSK/4hhLDCcWiUvrT95Z5\n8oDGLIQqlzFfJtvafTmO5DPEh6mEsayYNDhGh90eDSU69VaBPQL1jLAOTO3R\nuqBGfDkIoboY3i5Ext2KZW7Ye60IQTDxIAKzi/cgKUYZkliRUmUk6m1a5wz0\nKtKWCPwQT1KEZmAiugnCt0v9ho0S6yc8tACAkVU50tBvss2y+tXsS4QP+hqF\nNeXwrxkB5piPa/t9PIgr2DQbV1qYBPBprc2fyELUbGptWO6f45qiOIV0pAYL\nNijsj2HBcSTS8CEQB9kKd4jfpIKIu+yw3utqzOUNU4StzUGvZJiGc2NQcDvY\nsuXN0G/CiRJL8i/x8UICJIz2tKVecM08qXIA/HWgEnPgA/j046TdqUx/KSBa\ngVMjTnnPEg657WT7V2GvRsVVeCUnH9FVi/tOemH0W5AB+ngD7NTifzkkwLxr\nkvhNDgPHd8zR3h6ff4C/wvDhtfCMq88XKQoAZJaa3X5JdkCzk/T4K7DTfsP1\nipNz\r\n=1OFK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCia2Gc0bsKu75VoLUNPCXbTBAA7gjqD5ZkYpeZss8+3QIhAOqqVZty4xTZCqWBodkR4uuBQC0sTbJcqm5H1nY+DICZ"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2201052144.0_1641472832441_0.3486545715768372"},"_hasShrinkwrap":false},"1.2201061922.0":{"name":"@bentoproject/fit-text","version":"1.2201061922.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"737b882748278c09f4270720744c1618e36be6ba","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2201061922.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-ZQqZRUzcTXNCJxIoedJgR0am1K2PHyLP7SMDxcRYZ+9dqE0L/uqgCbVUPEW5hIG36Rvo1/H9fM8GU2sjsT11/A==","shasum":"8aab699fb47f82152878adefdcae6ab7d81273a4","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2201061922.0.tgz","fileCount":29,"unpackedSize":825907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2DKpCRA9TVsSAnZWagAABsAP/iTz4qHPrdOExnkNqCda\nbrZ5/dePJ8FqN5whOO8OoWleSxEtr0GmAknEyNDHNvIBRh3IGc/rHfBrQvkR\n7MD91MxjXyGgQMDjLTBu9AOwGiJZ1fRDszoINTDfIDifqPIXzNKMlYa7JLjh\nGcYmzf2xeK2uBKF5fcXTVawbEmjyrLWrMRLMnzRDMx0v73aWSW+bxX+bZ1jf\nW5MHm+7vkKj0bw8RvG88rI/6rS56jDgYIHce0xNr7oF+zJq68HZUVSZWkiRN\nk9ZfxZVI4c3c9JABLm5Ib4pNKkO66mXlQeaUHiSdF9+Y+t7Of57jWlp6IDau\n9V91Z7B9pN2GHIhdQt8DaMn6YlHqjtORKDUm380+GPkG6R7q72Ddtk7KJ3fe\nzRnN5L/cqyb4s3znTPGNoJudWFJBqTKG03KtBj1ZYWYPwRrHIhdVZEXOGh6E\neMF8DSMKYaPU4FGE6BB4J4KxyO2qImmWB4VA+3DvKeB8zA4eLPs/ZiHHLhF8\nv5IH3qJ7J02t7qIswQz9xsdIDS/crKx4bjQZlFzaDf9/gxSi19i4oG3XifXm\nZ45yUIAX/AjarC6MqBJvYzcX/8u+E6y9VCZzg3FFHRMBXz/YAJ6L1y+bwK0r\n7oLiUPPb51GmHQN/v+fJ0vxyzXhDzOdVsVoKAp3TtNmdAdmhwrq52OFXj5AR\nSKhj\r\n=pvuP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBnacDDLA2jLQKf8Gncy48Uu8CoPNqAbfAW0F01DbzY7AiB376rPVa/gjGpzS9Kv/7uYGjFstcihenjQdDrsVt9GrQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2201061922.0_1641558697238_0.364670995351831"},"_hasShrinkwrap":false},"1.2201071715.0":{"name":"@bentoproject/fit-text","version":"1.2201071715.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"e40a24fdddceb1c635f67571d9cf513c7e58800e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2201071715.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-7F8Sr+QyxvacFRZDv0loDm28ggV31OBFz0BomQcFJ7mbpZy+DoKLBWWQFK1GnfwhAfbs9k93rkmezRnfShkXBA==","shasum":"da4fa67c5a765de34b431e5b031cbe61f0451117","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2201071715.0.tgz","fileCount":29,"unpackedSize":825907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2YHNCRA9TVsSAnZWagAAx58P/A1i1pyARkGoW3ciACwG\nU4YhpOvJzzyaq9YuVF2IqY3to+aV6vHbFOZz2Y2//5FjvS1YNFim67r7R46y\ngzRrv4KrTlbYPc+tsTFaa7PqRQMi5++Rk8H8EM+J1rPmKkzn1sBJsW1ggyHe\nwoC654hQdSt8HNdk4YzV94GKZmnCB4XqwogrbcnkNeA1BFbPdVLrs5d6cSs4\nM4KhCjmTK88acMN4prPd6qoPF8shr4rPzd5tF/lKPzjcdVZSa5q4T5+5+SX0\nrKbiJrvgdZ3z5RxAj1Ij1Zf4+9T4B1Ohgd3jYvqRMmJjm5pmZ4gmY8ZhUCAe\nW5IuOgLaYy41SBF1eJHPX4JCTKqTRt6aP60W4h7TdmeQAg9Dsrk/guCcZSfi\n99QzWuP6X//e9WqKcmMtTeE+ptOVxjY15T4jk0ZODLB43SjIw6NdyStV/CWJ\n+kbiVULCNGE0PH2aySrdZZlZBLOiaGZUtKQYY55B/rGbuvl9onkuGQuxpMf5\nAhzlXPdIfRqL/JsOfGzJoQU5k8LxCK75yNz3R5vUKXEN8WHEJLHu7vaNFFdS\nAfp7dr2IosH0NUvW7rAvD7pGtwOkP/xcaJWTZrGVhmqQl6R+duV7Og4erh9a\nnOztW61NVjRsci2+foR4tJT7HaR277FQbY3C5XfQXgU6U0Z2AJ4OWAmXVEDT\nAl/j\r\n=4AL9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB0EXHOC/AU8Vd6qc5MMhGHOI0XHgOYCADhyIUmORMo1AiB9MsyHPckAGfKi+rXnt+unUUY9Ha2BwDDoHmOiEBxFdw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2201071715.0_1641644493750_0.5257013696590154"},"_hasShrinkwrap":false},"1.2201101902.0":{"name":"@bentoproject/fit-text","version":"1.2201101902.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"f0b7ffe685c60b51cfbab92bada4e0c87e0377a1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2201101902.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-TU5dHu7WPeYGdbQ5VAPjB1ZX1j+RCiOEp6E1Ec+yOcYMzKhkiqIB8bYOnZlll2Z/u6L/jxL8X4ZqchQv6vRJCA==","shasum":"fe4efc64012f2518ef0f4054a63f45cc40cb524b","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2201101902.0.tgz","fileCount":29,"unpackedSize":825907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3XhmCRA9TVsSAnZWagAAPBEP/1hTRTFE75FsqlXjAWK7\nUfkXkRXFcymlhCOPUBWwoIk9X0syi7JW4pPguv46kZWNcKrbO4d7fCc34r6W\nmUiiQ+yBxtIwmUvnnlyDWt3GCeqzP9Cgmk8+HIW9862hbP0kkdaBx8xR57f2\nUjykbVSZGeZ4RZvJF8QiMLRmYHDflcBwjpSi3qapNUMhZ3AkM4bIIhkTe1Uz\nHGPJSmbY/TF/CnyOK6m2CZOBaBQUiqi+QnY5rYYLOQ4oPUJ+5XSuawWw53Jj\nopOq6O0gmHgIPpSe3rSgscaxwdpVDqe+o9r/bKJLGgfT09P+kLe6gEefK4W0\nvzkVQNj3ph3a0ceQaKwT4K8hv/EHwbSpd0pUxYSh4b4f8iK4Exe7FopEsyZW\nMvcgpTws/V9UOtwzFR84Y1MGMuvtX1iqoWofzkEH/nzRpoOEAzarYxTLottc\nxLZUAZXsq0XdZLIVQ3X3g/77dv1ttg9tmnaE53oA63pUycq65Ettv8xRlFkr\nkq1pQdbj+gdiCvhI1+J/m30YT7Qb+ev1zoW7khxUgy7GYYAQpB98UvWx/BsD\n8GuFqDEh/qY8ubXBKK7s8wG8Xo+pmLi0197I2ghwqkad8YRjwweXyAXlT8H4\nLyVNzBu7etCy3pZnb3PC7FVOOQnIRZ1tj8BUbQYragksuaYNRgLuezUXGK4h\ntV/M\r\n=pptd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBui8l9/pzmA32AJZY9UtsscLAK0HXZdInazQfAZQOaDAiA4R6rd5nC7jUmFqxOIRFQxfka6Z0nc9Sf9KbN0NHqBDw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2201101902.0_1641904230669_0.714079181217071"},"_hasShrinkwrap":false},"1.2112231523.1":{"name":"@bentoproject/fit-text","version":"1.2112231523.1","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"1ba2e6854831868cfbd5aecf8a74b09bb0fbc2ce","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2112231523.1","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-pcoF5JsKr2bum8FVL0hY0TDn8PtBJN8/zgUX94fRwVNH1DUjgpR2Ubi6clV+VLKDMMXCepYWvaafqipSaIgnGw==","shasum":"23f24fdf4a2cfc5dec087346e182e73f45891ed6","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2112231523.1.tgz","fileCount":29,"unpackedSize":825907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3dmdCRA9TVsSAnZWagAAXeMP/iWOsu9i1ULSI/iO50SM\npWYW8UPa4TwOmmGSA7pHNOOvunkiuNgwrnfxmegEMrplO65EPudLEDop7cAe\nsLDn1BAWplfe/ef/GeXTU5c6KGfupTRZEzpX5kFxp2RH3RRh6KGA7khTvLYJ\n1K/Q4frTlQck7tfPcM4VKutFOjyBP2s3YgegxG60ZTu4IfKTYGlLfbkz1EYo\nKvW6kxW5zZXnyazZtnIR4HyXGWEdgvoRlaLp4x36B1dLGB/BP9fO8SA6a0q1\nqtLOGpsbVVHB8NClZpXhFBZEtPR/amwMnjXbK5KLITT/l4+6kmA2I3p9OG/G\nncASCmcUxYhDLFrnJzGORal6uS413FaVWHLT/TzuAvGL8jSyVKmQI1VfrsZ7\nDD8mM1wQT4xqNQM1YduvXW3pz0WxeLK6tVNaeZmdHg+ZjWVOol0xKwWDbWNI\nw3srxaZmLW8kKI8InL+FCkQHOrFMt8zHi0zemr+OwM9CuZk282wmYg8ej1u/\nYfONiUmfv/gWicAyzM1IRSpUJGleIMkhceDSHTlxzW+krntZL6Bw6qhDIl1L\nCDFQDniDLm/BfnJk2/yLCBZAWJs6VB11b0dfXR/J4OuEzs/AB/Ji66bv9aiO\nOtBaayCMT2vShV/RuuCTOAgtS8Fb/o5PtHGafr4vWnejaQLNJeZ+Obpd+/dM\nCf0s\r\n=qUzY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvhf+ua3fYyORIdyBD/zE9U3upDKridUAPbc7RsLsX8AIhAP3A0tAq5O929V4wPTIoM5gSel37jdvFzIAEgAmydMMD"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2112231523.1_1641929117672_0.3732030385565459"},"_hasShrinkwrap":false},"1.2201120015.0":{"name":"@bentoproject/fit-text","version":"1.2201120015.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"c592aa0f3999a8b6109a8a31a07cae6a83115d8e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2201120015.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-JuQw6FTYIDrVZncJCfUT621LuF8w0AFhYCGcM5F5dcddjFGxc1cJayMSSmadSDDxwG/AVU/xtYGpP2DuUePYlQ==","shasum":"1d3c5588cca0b133c44b65f31c5a58c698797679","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2201120015.0.tgz","fileCount":29,"unpackedSize":809539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3snZCRA9TVsSAnZWagAACT4P/1IU9carha925IEecHON\nVPeaMLuDgEQOkkBwxyJwMy2b9l398JurXWyOA/lug2hMyTMouh+2I/90ztnQ\nors5sQsxvE+7IQ4pXlskQQFMGs+TkYEKmn5TKlNzn9Dx2OJhau1I27FfQB3R\nxR/ejnNfzVuwiHAvORX8Yfneyf8CAALC/Vr7w5JMQYUDtlb8ZoZyI5oGZx3G\n0YwFO49K491HM/aXMF/QlBJz221V58V5xgXrev3cJFkrbFo8ziFkJAW3WONm\nqIQZZqHOIePLVnzQ0e+Yc6nl12FxKkoNiY56jA51m8lW8h1X3z1Ws/kn8zJ5\nP+YUS8F5C1eJpEN5CmBsYQ0MmITuCNpAkdweprr3xaDJcIlwGjiWUJ49xsT5\nTvbzqh1XJ7IuXnz/rszFbNNwUv3F5inKqtmXBEgjiEunqtHgY1r+0D7pe8kG\nuAETbTRJcZA3dKom8AhsqLrVx5nKibYYAyl7nePAGuscI7RMxl2VDDiJEDUe\n2g23NMWd0AqlBNczt74WQF0R8TdPYYcSyZf/CphRRe/yhlIRxR293JMxCncT\njqP9trdddpYI1f7Vz2Sv1xBC5WsupDetmoSpcuvNw4C2iBYmJcSP09XzGcm4\n3QfyZYdz9czAcsuVUcxtmeRShLyCO7mGqefW5/Crk4woNMO1HW5IG/SShaCN\njjj6\r\n=houq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBKx1b7uxWsjrfzwU9Jn7Ab3xFh4K2TTTb83i9fzBkx2AiEAvunRzwgCGPKDaYKkdcTKkhfoF0l33f9u8050hxF3h7k="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2201120015.0_1641990617321_0.9838027323112553"},"_hasShrinkwrap":false},"1.2112231523.2":{"name":"@bentoproject/fit-text","version":"1.2112231523.2","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"036fd40f8ecb160f2d6c65688c6ff4765a670bf8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2112231523.2","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-J+utx0/q5Hkl8f9uEswxYAeMzs9jYqXdy/QuTbLw+LE7RNY3NSogfdjGlW0fSlbiw4xmBMJ/i3HkFLv1fEriUQ==","shasum":"d900365d659980d368a019532e8e7cd06d4b2527","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2112231523.2.tgz","fileCount":29,"unpackedSize":796816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh31h2CRA9TVsSAnZWagAAa0UP/3YcNtlPT5/AeaQq6kOj\nmYk5paEUjS7od9xr/5TmboOqjMXOZOiw9HNfKN7ioMFgWLJ7t6fj2x77ijYG\nCWusUVSp4wdbQbS5/rr3LFaM4mke5BaqT/U7Hp5Ze67Yv7pMvzffd77jJ4Uv\nwRChZby17iFVEAqJVLT7cW/uLnrKl+GAMg7g8mOWf5H+iDz9L9g+WimDkrll\nl/Sd5lnOHPp1TzNRd2ZbX9yGzrjPdLFZn5UcSceZ5KYrIVFWuYD2yXiz/Q27\nKFNlOC8sFNlU8XkwQ2Cf948yBqqzguj1ir34lzX/tz+e2SFkErmlEAr9tzlS\nLLAJ4WZtXgdDmbTGGWhM4SHlGbqwcr1Flq/C76j+BKl1gwizMcY9Z1mZAaCE\nqJeJrDWuuHiR4eL5WUAilJ69fwq6DCCSkXc9O+3JtF3TxlheoPRghKyiepFK\nkZSRF3Pv48ozxLb+PEaRTfM64uxm0/fFSxBqByf0vBf2rEsU9p9XG7hyN0Ke\n4YOrxUzlo9fSfbz+X2Gqpsqr1modzBesJJkw1buOUUVN9MbxFMIGCSSfH7tQ\nonOIu/JSzPOA4WsZngGqHgAMWSzwJLZJQh54f2LnC3RRSPzvBDRpS98HXYco\nkDGlASDOdvBISyyZfe4UT5ZofnkMXTm5DbY6VPWEoevx1WEbyPwPnuJIYxPV\ncV+9\r\n=n1kg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDPBG9GWEOvghIeBofFSrRgDVYaWz6tfmRlYRK56k9S1AiB3SysF5rP240DhAcVNzld3bw9UCYexvawXTe/XvGQ3mw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2112231523.2_1642027126712_0.16567676928033048"},"_hasShrinkwrap":false},"1.2201122239.0":{"name":"@bentoproject/fit-text","version":"1.2201122239.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"c04895bc1c2e1d0b7b874427b9bf1cec2b4b9f72","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2201122239.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-0111Nu2kMkc7AoGpf73tKFPNA8aPdt30wCrA9r5WJx8VreeOxdo2cbLOPYLGOUU5rqhEqeirB66+6hOSu/RK/g==","shasum":"4e069d1ab832eca742b8c499cb9067883695e374","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2201122239.0.tgz","fileCount":29,"unpackedSize":796816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4CJVCRA9TVsSAnZWagAA4ewQAJfSuAblLPY+/f8BaV23\ntrkps/qWmjjwhsGWoP0Bynr2kZCBW3+7YLT8ccP8A7aHaHjq2Qn+9jOO0R22\nGSqyk3jTpaQGS9h+DeVApXCQ74zz+DVoICzFedhsATTXGBKMPRUxn56edSAj\nykHbrofxy9s1rQ3eBBSmMuIOQuC6is1VwI8XZgcVILKlFJRtWrrmzlu6tJrA\nMGa91cK95ExyOxrYjFvbjqwPoCPFSblSXGy2DXxuUfo9M3037m9lCBxcLuHH\nekYjzGOOIfrvo7MswByFwpGFMTWZ7cEbkgOcSq+/QbihidXArNDJLBUWOwDp\nnhgeqLDuN6TNV/o8nERT+e8SXhoXoISLd+Df2+24XdJ56MuCzfLVqGngeMZJ\nmWnNVjyT4L4+Gu2ZGi3zyJi7VCekia5TTHNlfzXdfqkUZ9ENgwXTOptjW4ep\nsH3yVp/T1MpKWITRGcOotyDNIBtU7sWu0O7RZCR0jzSA2ztDau3afc/ogBgg\n+6E9v4pnKAipCF637HV2DJx6GAq5ELfHQwm4LNaXuiuNZU7f1NSGvPvA9pNf\npz+ODc71Yjctbxa53+nIsH1fbdZOW12rsjRmeKZ8Xi1QvD1/3MPLDl9ZjpSj\n+lFSAY3wo5LR6EsETateixlmRFNRDY6oTpDrEJg5+4jen/SX2HNvLEY3cfFE\ncoe9\r\n=NsJ4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBLu2Fy5RQKZ5gQBhb3VN3wJSoyEQ4y1uW/0qZxBDlhZAiEA75yxOP9PWxFq2dwYlVliCw3N9zklaectcumG/Q1Gt6g="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2201122239.0_1642078805343_0.9851761125786347"},"_hasShrinkwrap":false},"1.2201131702.0":{"name":"@bentoproject/fit-text","version":"1.2201131702.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"e9b16ad7a5cee398ceaabf6ba7990488624e098b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2201131702.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-I/3cGkv1xeqruQFZajB06vCQc257YIIMRzlttEGwJaKwB7QD2rvSg0D8w1ZHPBmTImPWO4jNTfZZvzfcEYQs0Q==","shasum":"9c1489a8210a6ebabf7e4831c16bcff02ffbeba8","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2201131702.0.tgz","fileCount":29,"unpackedSize":799657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4XS6CRA9TVsSAnZWagAAMWIQAIng52ozmzwtSG+Br2+P\n2OBoX2FyBO6Roup23rSPiz0BXek9ugMccnIN3t+mQaGqiGMfuaQuA7DegZlq\n6uG8SfGwGnTSBtqINJPOGQ97c1DTKUc44IOqKDbZHPGZK7OW+IYnaFvFX2O+\nCin4Bsayy3oGodwSIivxD4VikuNSI2xs6orq0AOMocKnORtpYqBaTJ1pnljH\naGw+QBqT9ohXvZBI2Y4s3wuh3xyTMNMaes9UawCk3wujAaolOcPg5tCOgbIM\nqHFKGu3jVWFXvdQkad93N143+LG9KL+Ku6QL7PQhfPZ5WpxSy/YgBo/bgk1G\nBAatoqn60w5C5pGStsPW7ZNCkldlk6vxGKlkL1j2SJNICDA9mLp4Q/QYE22g\nYFwB4V4sHScrlKTrw38cmqb+eS9N3VVBb0Vo7EJo0SmTfIJ9YR6Gbfza4W6w\ncNpOg7dYDgoXLk8p3V1+uDTcTDVNFgp0ByyeJE+0RD+tlOY2SLLZfXjjz+HR\n/WSpyQm6Hs1mDi6P2PjABGqk3lUVHPC9eSHPtShOcoLKJebU+9r7FGJv2HSA\nkE5JqH2sDqJ8kNZZUX+RXL5vHttYG7UOPe8hC23FVkluUkvzMPzMAiQgl7RT\np28d0TKpE8TY0+HAXzS8+ZHKSFMMpfpphm3C3E3HddxRj7NiryCISbCap7Fm\nM/cV\r\n=q1yD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkPaOv3YMBwWHgTxjcg2ZcJXseaHDi36yy6uzNM+pDVAIgOABW2ApuP4Xv0IZ2jIi7o5DvIRKJZgSMHOum98UdHFM="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2201131702.0_1642165434071_0.8728145219234544"},"_hasShrinkwrap":false},"1.2201141909.0":{"name":"@bentoproject/fit-text","version":"1.2201141909.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"96bebbc98d1f79b185c5ff6c58442ddc2092547d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2201141909.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-dMNz6iw3Bi0hR4uhVZ/RgwtG3co/OAsv8YvRHmCLbHQPSTreixV42c5R9Bu/5h6Tu4FnqVT8XliKVyGPNJ8MaA==","shasum":"939cef2b51ff494817e47e3efdf96efecf184093","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2201141909.0.tgz","fileCount":29,"unpackedSize":799039,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4rwSCRA9TVsSAnZWagAAGycP/1pupOxkNRteN6WsC3dr\nXerMwBIDAgyEtv43uCb1feanBJuHk+YvSrKmX8JAi53SftenNNWG2McWEpuV\nzCuTr2kGIge7DiAfzo2fx34W7lf0rKWSKN9eBscpgDUxo8T8nj/Syq9g3GfC\nqL86lrzJFve0H1x45tUiuXqVo1JJsikuawZBRWlgTPtb+LkHFAg0EphH+DmC\nrlk/xpuqqkniNOVh8CVIbLLeWYVYuMhXli65hLIYRsY9hj477RsZcyNYtrsR\nFMFUQvq97MIJ7fhs/L5vpf5PpBK2WtlaYKOPDfEal3XLKOzDXRKGV1QVZD1w\n6LoNwJprQciMZr1crDLeiUyOuYbyRWWZ8OKo8n329ClPmZp1DZ3tCjPBGTP7\nVg07Eg8O8TUMhL8jMFr/faWJLMfJGjmGVp660o8RfNRDczkOBNeTn1zHgxVF\nJbHFlUEpNfbhjNQqjaPJG9hHfta4qNzRha3BQKkGGWZXG2i0KVixfjGpeRt/\nH/EFo9B2zhWN5Y0Qsc/12LVQ/E+TW+LWYGzdbNDVI8VhcmyPh/8PXxBPUT88\nCgHmw9WV0N5o0zk3YRHaC5lMjX4pEY3GenEqgBVmdLw2SgPemdNi67mSYOEU\nqGYsruyCl59gTgi1XQKeBUZQtLj8F4PghoCprjCg+oHtH39++wutWwuO5S2Z\nrWLL\r\n=SMSL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGUWhaJo3xaenyUk5RoUhy73yHejeDNVZMdmDnE3IIspAiAA+gF8c7aPEx/iwTw0kvPXQMjn43L2augnNyDYu6kagw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2201141909.0_1642249234226_0.0034889026851947502"},"_hasShrinkwrap":false},"1.2201141909.1":{"name":"@bentoproject/fit-text","version":"1.2201141909.1","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6474ad58b0a7e1997cf1472b09ba21af402b09fd","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2201141909.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-7WMowRfwLQeOE5pXgCODWpfNGrURjU4GxEzKqnBPW5OC6ul5q3Ts0fRAb5Kx0VpU6OSbYgPSV1BLn0Of5ta1kA==","shasum":"31ac4f78d46c786f0000a51b1de81cd453181262","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2201141909.1.tgz","fileCount":29,"unpackedSize":788362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8FSKCRA9TVsSAnZWagAAKssP/2kbNNXe0UTWE70zhbaW\nVPfJxyZ35Q+LJCKt7ssxF0ZOfRrgSzZ/UjoRDBadRaz8bF+IJXn+RssorPnB\nrQnDcq5UD20qHNwF1yuXPvVHpdMusNVl6sOYVtfYda9u3QqRye00g2uAM/6y\ngpSzLWf815ftgTHY1bb53tt2jIw+ZR3oTz7373OwJ3/cUmjDrAz5np5QiQF0\nu9Q/gHz2QCNIAvtn9eO5X/091uU6YLyg0kv6+hYQDIxiioR53EHLMQV0J/jN\nQ6f8ANDz3C0GkSHpRgS37+MgfHwLFUBo2yOtCHDJtudG2z7nfP65JwKcsxe9\nm8Slt3n0+/QOtv+RuFza3LkNpFU8jyACLqFA5QKYYvlVrce3qOu4W7A5r2Of\n8GgJ7INVwGOdZz2FCnM56FZB20DhhXo1s0tgi7fliKZAGW6Dgglmn8KmT0up\nwf7LuHb833xYbFC+Rdwzx13Wc6fYCZT5TbJfJFjoPg+w8j9D8Gqo2a5e+XHb\n65SKr98VLHd9bOghp2UthapvI13YEj9bcabPQ7hRwIGPD6CZQahk2D7HxsRg\nLJ/ZcAxsNjaHv1gHlCAd+cTAMfbxEd+g0ToDOoobrXNfbl2HrmBneOmxLPRU\nlCGPDZvEWWajxEQh+JxPTSONl5A/vOS7EfaItG9Z/dTqE7+pE+ninEZvuWa5\naxnI\r\n=dZ8v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeQR2AgFvpncoWn6anjkrS41EDSUXoIp2HUP1PB6c03AIhAJy3hUGy8sa4Wn5gArryh4axsk598wgPUEYd5BwgWiSc"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2201141909.1_1643140234463_0.40427800063198216"},"_hasShrinkwrap":false},"1.2201141909.3":{"name":"@bentoproject/fit-text","version":"1.2201141909.3","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"1edf4ae1e7a533868a19fad5b3b4da9917432bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2201141909.3","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-xJiyL3it3efHQwIc+ICRnNFS+tRIkFf1yo1DrwHhyb1piaXpaNDWPIBp/KEjJbwtD9UuctVmBRuZZbX15c7d/A==","shasum":"268ea9b6ac5da525f01163766039fc3930bd653e","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2201141909.3.tgz","fileCount":29,"unpackedSize":790770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8bX8CRA9TVsSAnZWagAADw4P/0GaLKmAarjMY+AhGMjx\ni2PVwGo8ArpZ998iVDGr3UwbgEXgL0AV0M2joB+6zq+jynvAHnlgHbYD5926\n7U5VskjMt8Gc2pZIESDFaFlicfHSWwHkjLTCEh97FuXgcvf2zZQjpWZs7qY9\n2MTsImW7bVxPMuA6QCm7IBUKiv90fEckm6iBQD1/ej/z9b0gbZ9QkxqMYaOj\nRlYguD2ERuFu0Ti+0lDfultFZItrAw+GkSgLs/H2cJdAzCf3PyHIhmmsQd45\niJLxFWDATN5b/bhXc+rdQcnzDB/LAW1zIZ5VKVJRE5z19w3pnRR+7GYVhlMt\npTBqMLRcKtIJa5TUMbpALZAUahJg5TsMGl9GbWTBbV5alQwSwuemobSZUjR7\nJlWPCNStHTPHAIq5Llg8300hfNTaLNUqq/Vj7Lc5SXQqPWXyynorHYWxhROV\nyNEk5jwVeaEKQgwzz8nqCqpnoZEppVoT18jlD1W/lgvotGssX5loEZ678frB\nqzPVw2a66uLdDC5niANIrGSCXLcXBWs30F5fGczcVbzMyO6jRu6Q8G9iNqwE\np2yCMVxXit2Ani8+rbnTNWu0E7McXwTuG3b/yhWa9C/hwLPWIBxwYVA3lLRi\nvOGUeqpZWtYRXzMV72BASHnIi40HZ4F6df72Iy5UdZAaLVxYbfRhLMVW+eRN\nPofa\r\n=uXnV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUw00IM1jBB4H76/gWCvps5EEl2/is+EjjaQlZgmYmNQIgKMKBZJYPhzoQBrLGYK1F8LsG3J7LbazawtXfxBAF8EU="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2201141909.3_1643230716579_0.5783068275007948"},"_hasShrinkwrap":false},"1.2201141909.4":{"name":"@bentoproject/fit-text","version":"1.2201141909.4","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6e60d79b180fd0983c9644d325b45bd569c6da2d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2201141909.4","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-2Jc2KCQVHn0K3Fge5bSd1TrUSxzPeS+o5OhLNxv9ayg2qESXi+1/cjhPmzDIXkKBQb66AyKHtEY1Odm7jvoEUg==","shasum":"1dc3d23c277034307dfcf27f17e3bdf8ae0b3d1d","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2201141909.4.tgz","fileCount":29,"unpackedSize":791474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+agbCRA9TVsSAnZWagAAycMP/RBOe7F6AophMfhKfpXS\nQEY53ObsYkGrJufW7f5BMA6F/MtZ5vRW4ooGd5Ri9uQ+r4y2Z4/bhP7ga38G\ncOE8HFTfYCM2czjnnUOBzXavawse6sCXmzD+dPrPPZyD/8W9GgvHhEgUzDdU\nGiUFuRqQwRFgH9Vn1AVdnxYyZnPoxXkij0xZmV/BbkQEj/Zl8GzBcTOezJm3\njhU+E5Kh8DhDoEeYR9OnSXGZWHInW+LRqWmnqGcJb/G/ktYhev2e8Iix5Z6q\nYhQ6zj6O1yupQguaT/QsloRCxE/ulcslR6HhyWGdGwQjw30oNPMyupSwi++5\nXyYk2NibeVWCL3L06eCla5tMv0igccfy0zWf7l/SadZEezwEk6MnlEjehX1I\nbXvZeOzD4XPlkWxEsxC8Q+UlV0IUPMJ/BuumwE49/ytTcul5AWQJdqtzzbQX\nrVPLHE3DXsmoqTz950ujQjdKgrg2MhRxkYjtYdmzXlBsqHA+5DjH4+Igq71L\nHHAClR+liZbjD0ZN6iUqsKWt7CgZZuQN3lANzLJLogpudSfinDzCeD4O1KJx\nQwvRVdzqRPUeu+FGvjhc+vpcp4w8I98MFD12APceZbq+zuCOFoqssxSNxleu\nChcTCQsws7e8dzTY8jm3nC41dT7BuU/n+4W9Pwn2P/2HivoTk/kyLocnLEyO\nb5aq\r\n=mUe6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDe3e1sOxMijbSaSchAn1Vn5yDpE3f8/ZBFJgTCp9CvWAIhAO6q0FaaA8yX991qHxiteqWmBw/0Y3Lzhiql3I4u7tiE"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2201141909.4_1643751451586_0.47801647974639305"},"_hasShrinkwrap":false},"1.2201212122.3":{"name":"@bentoproject/fit-text","version":"1.2201212122.3","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"ca1c7d4b4b4a72f4913d7c304b5368187458574a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2201212122.3","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-Oxvy7xSxQC/dlLdpoBrMRq3ref/8ZW5Wee7qi9KqS03Iklv9pBgR6p3pNULCTZSIJPcgxoBSY+GeWMskYwTt5A==","shasum":"ecc6634288abe03c49aea8a58e304f1d9ec43aae","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2201212122.3.tgz","fileCount":29,"unpackedSize":791474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+sYxCRA9TVsSAnZWagAAyrwP/3XsN5dMVHgWEzN/TmDc\nbDLbi0zh505SbSQ51YYbbVskSpvs+X821UCYtaZFgG/6Yk8PSiIeAywW3JPs\nzVaVmP/3hyS/xPvyHaSH0sSsm4p5fqip1v1ZJQJmyJDOicm0oYXvXnxgAQUL\nIY9c2r9FiwLNi0sy1+nMy+qqw98d0JpOKHYqLT0T4mc+v84oOqRuL5alOLBo\nc43bZ27jIGbs+JXTLe/lwV51+otadDIId1H9Gk3bQtbxn+aIX9GBgDowdTFG\nChRutnYChZdlVAvcKfV1GdYP8GKUSl7pjeMfhVEpFI2iVix/76Jxj1om4yvs\nze7VUxifOnx7+vvnWmaBFrfajLQLtcZSa1eTGeneTNDY9M+wVqkPAlPwrp7b\nnn6JinQHfUwr92YZzBlhNLWuBAswutsWU0VQZNAOED3YBc+B6wp0wbG3zA5e\nVHS9TSzY3bDX5I2st7hAACvk04u9eHubAIWIxPXYDljVwvOVWe/p2znnNREn\nYgBTUN1sTTgPlTLFY89TtIXhHts0avef5GoDADPIf2g5QQX0K5S88sRTSoGZ\nO4MdgdmC7uQbbDPBrEsDD9/FCtkPXj7KgcZ3LLt/kC5+MlkAnXNWF6nG8VMC\nk1WdjhYws7kfJIYTxr8CA14/1pxe+PqT0uyAlC5rNeNyVIWmDZnTP39Zyc4M\nbu+G\r\n=1HBb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnBkn0Gj8DLIIwpgTxF3cvwOCT3jOHrPAhzKwdg6s21QIgCQDvEitpRdiZCDOgiBja9i+hOBFlYRDddp+8V6I0gxE="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2201212122.3_1643824689151_0.4941916998876146"},"_hasShrinkwrap":false},"1.2202012258.0":{"name":"@bentoproject/fit-text","version":"1.2202012258.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"fb0c4a54446b5abfcc53d1d446f24370c05507c2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2202012258.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-pIy3SJdqinNJ4viv6s6L7FZ5idTlxPgHhLhlp94/9UyznNF6o9Edq51Ct5UiWvZA3kiFdV14kXULiKu6niBf8g==","shasum":"9528542022fb8bff74ded2d4131c4ba95c28124a","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2202012258.0.tgz","fileCount":29,"unpackedSize":791474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+tewCRA9TVsSAnZWagAAfHcP/ipoFd5FSIrgHK6yBmPs\nazTPcRc5OHXOKjO2dHME3ufYzh/vwy+ahLqIdjxLifwa1GcoPvmKgu3+2g9D\ni392mYi7zIRvkY0WAAc/c9BDVYeVnMjS36s4LVY54Hkr14Xjw6KcMksJYU99\nUqs7YTtPK4lln1hXlT7Ui0NLJr5Xz/Ax0Bd4oS7o0UR1PAiG9g5EgRr3HG57\nlYifHl9+/hQhz6QLDJvHFhsHhHdrJJaMYIU6GPo58wVNHLMtDITgshwyHBJ5\nxv8sAORsaToxkRG0Ggu90UzEA+h7AMY6zYRev9RDZ4u53eYwLNOi1AUTwmWf\nmyGZ6M5vbLP9WGjm7Bg9i5kivmW7EzVsxQQ/0Zvlsl8HD0kK7NompTlyf00y\ntK+A/56ZVJsDeQBM5yKiPYuuvIOmCCk6sUvcHm/4qxWzS7eQiROl8ShAnGwb\ng8CZF4p4x70OvkQZWwGxDlgmEgGJgY0MbGjI3G29ZfhiT93gZ4T5gwiLDuvr\n2V4IcTTzCSfZtFTGClNIEZcbcJXJjZNiItJw/abDusTbxtY1W9UAC8/rbZGR\ndpdmTLDgYUR2mX2gQHG55CiDXkHkRDOvIruBpVjlpwA56QYolxnQEeuBf0ev\nB/Fk+0yopmzWNpjdjK6nFfjNGbtlTMwTdHHQDD6Z7MUz5tO122Jj/lTRgVom\nVKo6\r\n=gzj1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDUrQ/InWNWKKBS8SZJ9XLIGy/hdtFW/9x9rkaao3G/mAiEAs4IgA0f/qbasuAyRKOOyBvp/yc3fnMpZKM/NkDqr2zI="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2202012258.0_1643829168313_0.9855861731273756"},"_hasShrinkwrap":false},"1.2202022130.0":{"name":"@bentoproject/fit-text","version":"1.2202022130.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"76b8fbdfc923fb90c4ecf4dededfbae0a5978ff5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2202022130.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-k5GcAHlKo0nqPjXcG+TQdNo4ZftliCwCLEJteESF/XMp6ECElGlZSjtvKBHsKAAwSNJdmDFZLfIjx+LmXI9llw==","shasum":"52dfdeeccd0c52017c2ea42bdc1b0198c40ab60f","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2202022130.0.tgz","fileCount":29,"unpackedSize":791474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/AkeCRA9TVsSAnZWagAAI0EP/RN72xrTmVtWNDHPlxGR\nhyY7nmrQFn8m9TDGWlr2Lemfi0eh3+5GYW1x8Q1lkD0xyKLf2/3V7QCssDJC\n4LVd6pfu/btsD4hCWNxXRVCJTJ/jd0N/hPYhEFxLag3KMFlDGBLZ+1XeePB0\nvh6qL8uiJXjvKoxEWzF0KbuwG1VHTe10ok54SjngyqyQu2hMUi9xuZtomVxJ\nKWn/9g/qNPZJ6qjExsP4zbRbKyKwkFtnUWjRMMRdFsKmR48v1m1mraGl6QR7\n/G2YD2ELGBuKoON7wYjfLzM5RDCBBUC18qj7gDMEwpL9KHqI3y+7B/ctuddh\nc1mixEZeosZcK43IYa0DWFWgL43b2h3hIhI+DDFnBFHKiqe3yTLMtc1YYeci\n1pV9IPZbpJzE3CzXdNBAamWX8V0O1Ucx4VuMTBYxIlfPKzfpamBqOYPJe1TP\nSLZyRM4Y6dAw/dUnQrcydXjaN/vpvun8zh1iRMgBZSk+phlYacEB4K/3sVJP\nNo4NAbGLFbw/etZdlKsgKqbcd8OMQPgYZvICMg2VJWor4mE+8gyVA7zhfekT\nv1CIAfmiNPphrpTypBpDXA93fxo5huyUzFUoaHXfLjVH8dgNl8RcXsDYpy77\nrUoFDWPXD8IY6hh5situ2sxroQvmPY6wnLlUIpFm8vry5P/nPvhkXC9k/7sx\n1Lm6\r\n=EEPk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICplQym6NgWA+/2zoR1iHo8Qb936MnoR7wuOM9O269K6AiBIbtAznH/4vP4s1JBWVQGz+44SCNv3LmDojGpTTYYn2g=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2202022130.0_1643907358094_0.6620174115872044"},"_hasShrinkwrap":false},"1.2202031816.0":{"name":"@bentoproject/fit-text","version":"1.2202031816.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"b29dbd478c93a5298a18f8df14e6c1f5184879e3","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2202031816.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-yZKGofowPHavjyQSYQpuu3Jl4fNeS0/b4k6a0E2s65HClOXwWnLkYtKNHsN5Z0eDsRMqhnpzwb5tWzPb3ExTdA==","shasum":"52aca655e51b569cf00115ebf9eac98cbd42b28a","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2202031816.0.tgz","fileCount":29,"unpackedSize":791474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/UqQCRA9TVsSAnZWagAAvdEP/RsyE9DHoqgtbLM3uIOk\niqmZ3VXCrxF9+5KvvqhBDFQHedhVnmu1LrJeRMn51yFmS4yMOF2Uu6WQUy98\nxnAmPy9bwWYVi4dDr4Hovs2yQAtNaoQuHzNGOBYhXNCoFF2y95bSALvS29/a\n4HixqSrHCaJzZ7f0o0HUp3X+VRhC3rlrcTSGlMMKadhQdyKuPpX1CEoZpaC1\nsd7SlZeX2wX51Q+zQ94wEvbgL/o3BiMTBlJgvmybdmKeTJ8SAVvJx0RiF7Uj\n7okL5fFXI4brSCH164YSYQcEtUq+c+lwKiWQYDI39UoU5T74uplUfF+V9a9b\nihwW9o0TXaocJuCiBgcOrmWCx+gOkQtzaEHTcEW6X6hOKP5n1Aegwr9bTdIW\nW28Om8m4l1NNkAlKr1HAeqGuf9LAxCrYCgsmayV6B372sIikHjVUN7xIg0Tm\ng6u3jjuafdL4BahujgIxZWWKwLscPo4xxCtubLEa0b4p0VEfHm77+TpG5C9H\nCovkVHrpqgdnaPCMQmwvfzU+k2612gPDo8dNdP5Az9Q0tm1azRs0A1jqNoAs\n1DkaYS/mS7qGiAHqhnQUuw1QJ2JvUz5PxodHcthyYwDThjNwv8XSo1Sg/RRy\nrSSjntDnX5DdVuJIklk+Gygi/TNpriHL+WP+ITZpG/VtqFDwzIkv84AwHNjj\ntPs0\r\n=pSWk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJR4dxWaGtKwIvrrTWu7IkX3Tl13RLwQ7f//hZslRh1gIhANfsDVBhoZ9sRNemRebD5PYrWMm1SLM+5C4ZqB1HwDRL"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2202031816.0_1643989648241_0.9536215358453166"},"_hasShrinkwrap":false},"1.2202042210.0":{"name":"@bentoproject/fit-text","version":"1.2202042210.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"04d031e10759f2ab3f4a10cacd2b776e3de93812","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2202042210.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-0rcdTi4u4YtIMvaUvY394k7O5/Jow+loixj4RwGZZlf3fDX7832Y0O9ff01vWeGPP9b9mDpnLUK3aFoVxPMdnA==","shasum":"adaf0e9a3a243739f74950aef33b7dd10bdb7c40","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2202042210.0.tgz","fileCount":29,"unpackedSize":792074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/kDJCRA9TVsSAnZWagAA/poP/3glF5draw1lRyAMqTeJ\nyUWy+6NPd+hl/fk/Ua/HEN9slcZNVgDYHJVEkOAgVYg0QRhnx5OgwhItcrO3\nlwM2WQgN369g52YNVM78rjA4Pnvs0vDsTLtgG9KoON57zZ94PokKqAw1ZZ8E\nT0Pq7OJtyna08U31UsGs3+hJaWJF8sArw545mtEADkz2pGY03FrMWHCpXM9u\nugBxwWkiJ+oCE2NvEm/4lGAHIa5kTF1FWRfvZAPkSUQQVw4/frS35c/IKmnJ\nOYVd9x4MoTwiZqCMDm2I1odb+VMPchbz4gr7H/IndL2lBIEYnXqLTEFHQRHz\nxwCUwIFGAFUfOYgHi5rBuKHgXQTM0IGtiCHhYkGZusq37ZCG6R0or7JYVVzZ\nGKu1i9cqkpW5xXotUN5EHZvqmaLeYNQcGE/VhWwEKLsTOjR4tAfCcDWzl94a\nVFRDf/DK+qvVsvD5JHObhb3C9yHxBW5/srfYCx7Bpo0aklUk+LjV47k7zhpe\nLLFW98HSLSi9/pkTID24HwgC/KIHUc43VD1T9dm6pQPjyKfln2zfnIkXxk23\nuuRM+DQrZUyWS7ZYn1DEDdzJVNdshgRAJZBqEMhcsArpj6PkRE4QS0LqCyIN\nNf+5ELh3v9ygVSzDIiblH1ypdxVzsCb38xUKnQVx1SARrToiM1/r6GyNcjjJ\n9Rv5\r\n=6nuj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClFnD8tcllh8N/ua/C+uTagUsXQCXZHVFtg/hcqoB3CQIgbmK5CC+gs4vqXDhNVAXdeDH1J9FSSEiwSjH3yaxC+Lk="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2202042210.0_1644052681290_0.35463591438173414"},"_hasShrinkwrap":false},"1.2202072236.0":{"name":"@bentoproject/fit-text","version":"1.2202072236.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"1d8443e81e44defe1ab915032668da75884187d8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2202072236.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-VF8CHfmkUIUV6RfU6eCedUdMRSIiP6iBZ0Bb5aYO0zJF6pQ5X5mFGF2QqZFsZKmq1cB4ejsNpTNQt3Kxviz6bg==","shasum":"5e9d5c488a33431b21087b5eef3e8cae6b4af106","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2202072236.0.tgz","fileCount":29,"unpackedSize":792074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAjXHCRA9TVsSAnZWagAA6u4P/1UIOqbJqxVyTT/KFk0X\naVxtdhl50lxrKQE6cr3YC42HZ0WvbzEIklp1umgSO+6x/iWALYmXpqFDtBLa\nBYBO7WX6brN+Fyeu2WqDmS8GiWClB2UOnq+n+Nf0t1aEDvjLuDBmj62vnc1l\nFOngMUt4GEFtX8IujZQpGmhB4Fs6LFkK7Mtz6w/AmfyJaeL77JjBE3JMnWs1\n+gW08W7VjvUM28/7IGr/MGp3CU32hSFhgQefKBE14WhbCW+Gc+3odDIxlZcN\n+bihxu2O6ppuS9eFDhTiDdntczMTsLPc2FkJiiuy3zfetXwBuLk9eWd1E72y\nC1yXjuZMT/mi/svi4tFwLxA/6HIGFOqr+NWojHt3Ci1dy/z6JOOErW3qOVEN\nlp32g42wOm7a7OGkWcjRzhbL4kZoaIjbTvDXdBoI/xpScf7K8nyehChQ0xJ0\nHNCiyTbr3N5N0nX/dR/RCfEjvXOHmCuaJyVqhcDi+ibCwFJX1VkVguC+EL5S\nP4H0a9EfVVAvJkCtUtM2ohLwkAGouGRr6wuEcuEPHGDS/0cXlNMXC5Ns03b9\nW+dpyzBsWBDb0iIDwGGwHJaeS9n0xQsbfSeyB1I1BRSJCFm1HTe5Qh3yatCu\nL7Fi/HbQ9S+40Ewiw6BtKjf8QF/BMWskOEd53PQYrJY3LySwBmu+ygTT+oCA\ntAG9\r\n=ntN5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC81nLCqQw+ALzbx326iIW+FI8WYCCNxezV6I/K2TG/1AiEA0T0OUa68JYSu/+FKjKp2VL3aQR1NyKCQ/PmU3u1qVgI="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2202072236.0_1644312006920_0.7468044762101187"},"_hasShrinkwrap":false},"1.2201262038.1":{"name":"@bentoproject/fit-text","version":"1.2201262038.1","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"cb2af7d382510037805d85242e3f21a88654a20b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2201262038.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-dP0ieJMIIZDCX6U708wfB9COASH7OQ0aFrks58H/GRoROwJLgNpYNVaWz6N0n4LlNWuNZcOvF3l1fadG9agymQ==","shasum":"f5d5051b0b859079172254c41033ada14c3ae2d1","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2201262038.1.tgz","fileCount":30,"unpackedSize":798807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAty5CRA9TVsSAnZWagAAKCoP/ju9De+YbxdJ0oAYar3N\n5VJ5sDkoUn5wc+gS7VcBlSPr55Y6O8f9lLf/lmsYiJOLKz/VjJLAOazoLUQ5\nwteUUZwtBIKoTix9+G2biOhZxdBAWegVcuteR2gjwUeyXzhMEFw3MfNLJdNi\nl2kDeN8mFMyXjZhu8TPMITHOq+gshvJBUxffWWtilQUODtLtnBVqgmryJNuO\nRtK1Ozotwj7rhLm2JXCMfci/CtgKuH8RQp3EXVgaDTk2OgFdlh82Ab4SzsKF\n0AYz9VvQO1+jBdtrlJMPNexBJxODRAPm46jzSjaxHsFMfwZ4qxVYObbBiUF2\n+v9wVyWsSD88O+X3sZlT0bOQox402oBikJZGsNzXDhMk4Krf1KmkFz/VgAgQ\n9pHhCvwIoPJmyCnoPDoLJIWRHBHT/bJibHHwEpd/Wh1ruzoTDvahu43c2Y2j\nT/y7VC9Ghf2Z5Saektay7YXRHeukET6y1uf7mrJTRBZ+pDgFg8O+rraB6iQz\njIHCzcm2wzOCnsZRmq/YcJb2v1qAH2TpZ5ch67PyDIP6mFuBmISd6CAwIYbY\nnfMDk8JozKVVUEF1Y4NL1K4wXVcwU2IthDH0Q1kEwBlHK5aJYTGxg4ok0a7K\nBNIP7Megl8zmdzoIbUgGn61EE+O9TMi6X3Pm5D0LQflGYgETbDSglhVnylnQ\nerwb\r\n=5Gwv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC54JUA1zYDFI1sMJqBn4zV8VUa09N6ZeYxYemTZyrLMAiEAl6AbHvXfedYj9oZqth3EacgRdv1vP1JwC7WQW5sLnX4="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2201262038.1_1644354745138_0.3023058227409523"},"_hasShrinkwrap":false},"1.2202082004.0":{"name":"@bentoproject/fit-text","version":"1.2202082004.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"572ca92abd38a7a42e381c556e12e2d929f26802","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2202082004.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-q8bjeC2DwDMvKHRwJTLN68zaer4Ebamg6Mvii1xGPfBNZMV3rQq0NOmf8qv54LueiPNAc6Vn/udeSgV0eBqBOw==","shasum":"f3c569c23e9b46695ee1db074fdb16cd4c3ed01b","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2202082004.0.tgz","fileCount":30,"unpackedSize":798807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBD1DCRA9TVsSAnZWagAAGRcP/RhonPL2vDKb108o5KgL\nbqEUWvDUvtvKpVvdrIMMxNqj1s14NZvcIQdgAFgdqiVJkwddGpv1JAxq4EGe\nltXp13AV0Jbp/9+uXGi/EDZ7MTz03AHJo3s4djBDQsLLrSufxNnfMcbOgiA4\nx/GYKZ/HH34lePEeq/Bj48v3TIgXJPEVcmNsNT/30NQhRCyfhHPs+Y7TmXfF\nlm17DNZQCR7stVLxaeNYuThGTREzocTt+nMP7ODrZ3gpYl3MRQoMmzq15qlE\nBvorskJxZ55GU8XM71XNQsP12tuspNktqzSzkOUJ3aalbp9Axp1s5KbKoDk7\nJM/48ae9482I5fnA+tNIEu5Gh6LdW+qunsXBSP8tMNs62B5Ebu5sJiSGIJWB\n9q6HdhzdCJLBgfDdJrLJYk73/Sde7IV1sDgBClArAGg6YuTX176bwChkQKt0\n2u/6XxR14CmvQ+OX0wMnL+G/fl08cEatk1uCkcIDGOKU65YUpUcIDxnSTyEB\noAeMNumBgazZ4oGAdbcmfs8vOzOO/ThRzuXESXwECTpDipL7VnNbfK0htthc\nVPa+of0eFMp69eKzZTeUO3JnVyrK5RQ1wvaedG78/80REtLvkLL/jZg5ecui\n5fwD2yStXPM1+4RAxUvH2FO004TigVhkCA4gTv8w+ImRZgQKrxTucXC+g3Vg\niMCj\r\n=6SqH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEBV1N46Blr1uwjTHYNak3y9pBKP2mfSaQuB2EzO93e9AiEAiCd4DKP7mh839SbYWMcZpl8J6UhEVPRK/Hr/zTGME9M="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2202082004.0_1644444995343_0.29953322179262387"},"_hasShrinkwrap":false},"1.2202092050.0":{"name":"@bentoproject/fit-text","version":"1.2202092050.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"37b830a030b935fcd922e108d5afe28be61d68c7","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2202092050.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-q8ZnNNi56jV9srbPWIY7S7Ro7mi/MlmqkIwr3FfDI5sDQU9LFaAFYo9p+n4uB3qVhPMtM87W8+c36QXKkahA7Q==","shasum":"d62f6c5885c63f0c3c2abc497c97c978ffe2b1c7","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2202092050.0.tgz","fileCount":30,"unpackedSize":798807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBVHjCRA9TVsSAnZWagAAvUoP/3XwYdi3nj9dKRS+1Y5T\nWwPntHqWlq1FYyozN7/skYMaOpy5nUrWlalrcTFYbcEzDI1SwaMA9AQtyaaE\nsyAbbU2KW0T5UJ6HBF5Ojw1oF3fqff/vCawS0jayeHrHTtXYFHSl+nYdcO6M\naPMu3XNvggR91XRjcgyXMUW9kgheYHoXov2eml9/dbACMI/9ghN+zEHrvWaY\noB3Ok9KHr0eB3v/9hpnmB9/XJlPlezbBMzV+a7I1mfoT13lISufOs6BoOWhK\ne/DpBtWqhebcN0I3GYJhHgKEX3sjmeW2bS5L96+55IPO0mHcTpOHOj0iYw0Y\nzLtR6D6YUnuAQNooWsWrP3rmCD38u6O6xLBzVD3zmiJK7lqR4S5r1GsE/k5R\nwx3+SOf48+88R6elDUJeO1Sspymz0Dd/71Fv8kmWCGmECb8haEDTIEje4bQE\nXfpHoLznp2u8ru7mvFK1fmDZuD+TEWLOqhhlM8sMGD+nnqh8m4ortLAJldmf\nq8y+OtZop3PQVCMUhPDXQ7AU1ZguhtSG/ZsLVg89H3ODUaZbYRmt4OtiBkUH\n2BBIp7Y3CCl4tgVHUfLkD8pQypcmhgXp21RHd6U+zigg8FultOGfr3P9ZRyd\n1tHZARxAi4W7ZrS14tbD81MG9C/V8PdIZxPBobQcckmba7BOMgn1+fmm+fD+\nf5Gt\r\n=bB5Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVTm8YiAgqEQS+/Fn9fEo7o/MqGlzfTQASPaq4733JfAIhAPmf+TQoRm2dIqop0e+sIEdFGZ++8loaC0hCIPpNPw7G"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2202092050.0_1644515811191_0.22438833039674222"},"_hasShrinkwrap":false},"1.2202112230.0":{"name":"@bentoproject/fit-text","version":"1.2202112230.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"42cc51fbf53c86e33b0a12004dfe9c35b8f5d0fa","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2202112230.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-FJT/8tPOcpWuFV0/fuM/XaMuUAScpYp36WciTpYU/Dtfo836D5XuNeJAKdGNae3h+hK6Q6WngrHneRZpVpNVaw==","shasum":"403367fe61d289ea6215153d960ec2a4a748b3b2","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2202112230.0.tgz","fileCount":30,"unpackedSize":794850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCsQ6CRA9TVsSAnZWagAAR3cP/2Fb4LiTDdXnTpJJyovR\nTtIfjemWyLpy0DFBEjLwpHOfZBnAUFZEVLZ7tDIWIvuoyuQ/P0KnLuaOTmkF\nSiAq9IhxH1j6fE6h+m63rye7NK3KAtqF56mIi+7OCLDu8aVnsNfHW46aNdIb\n21O/9aKBakpwGOvtwkomXjbqtx6zGouzoWkyqQsNnLLSVlyVru3JwiYsQGh5\nffyLYHNTslEei/AcU9yRH2MEFztZTLSnn++Fgr8l2jb9oGJT2m95s1Qj923F\nWPo5uYO0QMrkM8p/5Nq/ScUY5oPbudqkA8NPPf/IdywsI3PXEbTFM+m2c5C4\n0imOE+v1/rsrdBBYReFcBczflNUXGHL8QKp5Ka75EAsId5vN0u4fAgUtsQzt\nWvbN4KmAu3pPQjRtVvHy19Ut0IUMJwZIO3JgFcfC93nPEe9M+YPnDeYus73L\nqWALhZXAtFUisuWhfYAbDhQTaFVIMroD+gFputGk+imS6mQLopaqm7pqefZR\ncAGpW0QseLYd6d9QEB5jKZf5L9/xNJsZJQwaBJ83MWBvfeSexEQly7WcAj8U\ntivGdRpf1GYUY+cA8xuLZMZuyF8OdtN+U7QHi1AjTr9xDZC2uDHYCyFJooal\nLVIwqgRtNNwD0p+LJmhkipCzw1wIrx9alE/3D1wuMs8Dr+2iJsg+d211ZZ8y\nUF3G\r\n=MUzV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0bnJD4usOqvOl1rquOfXnjzy/5c17CHoQ97MlMjjl3wIgOXhIk+RZ30uHYPNVHTqvgpQ2u0Zpl4A4Syd/YVOqjiQ="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2202112230.0_1644872762737_0.3460319420832576"},"_hasShrinkwrap":false},"1.2202142035.0":{"name":"@bentoproject/fit-text","version":"1.2202142035.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"4bb5570c3d04ec8e2a88418e8ed8b420e5b31ce2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2202142035.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-7cJBPXZGjAKRpT1hPDkt905ja2uxPiJOuJH0oZgmM81Ib7nMwJLPrSU7GfIfScHVng9gR9DN9qdXpJm6Aa1+dQ==","shasum":"9c65c349bf65d2eafabc4f1704b2369dd152bdf4","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2202142035.0.tgz","fileCount":30,"unpackedSize":794850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC3GKCRA9TVsSAnZWagAA+f0P/110SloMdYNjEW1O0BB+\nr2nEPmkaSdLyICt7Qh/D3Lcvp29u46DjJnCphdACWKGX3gyEr62rR4nL3/Ng\nfT1Un5d2bqEPCeA4jMRpswS08OqCPRATxFel/sYCk0ID6RHhzoNj891owDDT\n8dOID3Qogp5aK64G1q5uIM6AUOZ0kixcYj2mwJpyDnIo54mZVexYQDvC8Chf\ngMmswFrhlAW8CQkbGyBv0FzV43jcUVwELNNMbdxP8Fq18kl2SOQuXDTSmle1\nfAa1ELS7UhAVEv+X/TTid1GfWUqgJDKvzJttCMkEEugaPbv1upJAths0Teww\n0k2ZBWAyQWb4IVbapfHWF4aPm30Jfi+3dBmxordONvt0YVJu6T0Fex8IWFiy\n8OeMXOlsfLoOpDT1vXye0Mavv4ZEgpoejkqBGfifNISkJLfO1/W6mcBy9Bg8\njRpfI5DkkQkhKwyEP+ipV3vlgP5gNZWo/KE0ZPOhp/AIjaHGpm57VjFAb6q4\n2riMcUL6Z3SkLzY/KIQ2gbPxRUNr4tIM8qqLGJk4H42Fb2LQCfErqifywN1L\nxclAW16DchibeuxGTVLnsR0eGFURRr9BUnWtqd+gyPqKxpB+KsahoNqVgsU/\nr4f++2h6EFnTexgwRdAmigroeC973k6NAzAc112DgJxx6PoKQPmOls45Nak9\nYmeU\r\n=eaRC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFYTWxTaYG69zsY4fCxIwo/C8tdarL0cE9sw9TQ1C/zMAiBJl+39cBa8hQOPN+tyZpHFdmh9DvrlsDyFBIcgTfP0Nw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2202142035.0_1644917130123_0.6652580835038402"},"_hasShrinkwrap":false},"1.2202042210.1":{"name":"@bentoproject/fit-text","version":"1.2202042210.1","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"a656b221ffc7e0c9f092bede5668a546628e9512","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2202042210.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-wtdmz8rGyeL/+a4PweACnzKBu6C/0+dm6Qrr4wq2heeyEfN4tYX5E8TZfymdBIVMpGKYiqU+uI67AG+EsI7JLA==","shasum":"c14692c0cc536af54b751b9e53d3958bcf87185a","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2202042210.1.tgz","fileCount":30,"unpackedSize":797241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC++NCRA9TVsSAnZWagAALQIQAJQPVNtQy/v6OPHfH7bD\n93tBwAlYLpdEJ3vHw4ABWVLE9rYTRX/KBNqEhLxzcAioZbw5RGh0oCxun0hT\nJyrMLL1MsrYd+ccuaXAJzr0qXIhvN0wZ46NlAKIlimhAOmYmrM2YUwHsKjT5\n9CsBwJ3IpYNGMhBrHj5DEfXxDcMpOd5sLKOZdvH4QfObcF3CZaaJVp9C1F/X\njMU2qMisICItJn7vxjSp8rQKOw0Y1SJ8XAZgbB2VHc0OyjG70za+hUIBOb0O\npz/ObeD1+PN3ENrEnMrrhyQZJI54G5SvmAuAFvLcEKh8Nzpi+FTxVPZDakxI\nW9DDV6gV2+7K9Nqby2Y4vfu2NVLC3WtBPyCPf3J7jWpTbXlTYYkw3iN8y7iX\ni+cBz17RpeCzIoy2TEsPQDGnS7zYfbZvUnKYJvNHCi/7+Sd5c6QVgkCrbZd3\nckwteBl2/XkRq7nW+VekZHMdpMBVGHqg3zvFd8J9k3zUiU//MpeiW7XVW47j\n+h6TTtFsdpH7TBuxZeAVAge2Fs5zAzTyIytIrHgQ3+ZGbhDjEgWCLYQtOR91\n+LN0L7+6sGvssK7585eObP1QKLtSVzzk4STzbvcnwp7AvHjdAQduYG4ezQdH\nxjsk+vmA0JD8DVW1ttSMbVHIWuqPcSlUiVcbYUNuigs3O5/oiff9KxjnC4JG\nLXq3\r\n=gh0/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICTKZYnCITrtShMX3X+2LWrK6lmb50xpxqOmgIGvhiKeAiA3bnvDdjNEHKjW4ZywDmhXTPij7pmIev4oDOakeHcRmg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2202042210.1_1644949389265_0.9173223103344639"},"_hasShrinkwrap":false},"1.2202152253.0":{"name":"@bentoproject/fit-text","version":"1.2202152253.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"a50f1711cb8aecae95387e7f6b1fd1862206166b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2202152253.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-eE3Yy5P4wpSudvdUw0j8GxNWGeKUXsXORqPPT+6uV/2w82/OWvd0fu3QqISbRQUjYThCLbZNrXExufto/LVogw==","shasum":"e280783c07a4921959307e60a4a12aef98ab4154","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2202152253.0.tgz","fileCount":30,"unpackedSize":798659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDL8ECRA9TVsSAnZWagAA6BIP/1IzgumQjKAkevyDvtl+\nqBmL5XPTeOnhYJBPwChZjDO+3zYQIqQUDVfA1ZQZr1qqMFXFzsdf0DCXN47x\nxjHk0Nl1SWjju1ErkvD1QrfyLq4ksuGtJ98e6tZso65kTspEKhTex6ACT4g9\n4bbiEMZStbAvfBeORWWXsF21bn2dlky+rySzYsAvKW14v3zBe8u1i86psEO5\nM6lAMmYgDg9WsxJ8BEWQB4JuQQjHwjB6OBfV0KdkDNOx3vysFny4uQGZAvkS\n/jkD+K+oK7ttu1M5G06nwXZk09z22Zzxr4CF1SxNqzdhbpbMBsPSydJMntbO\nsgsMdl3ahlTCLJQq4oTNud9xx33B+9+oj6eL4xOQpqRN3121UyGeLzX/ZP3H\nmxwHTN2Mru077qOxc6A2c3JKWRJkG/JWMkfLZqEMSqaimiCwZXLhzw2rnqCB\n3T3d8pMXq50fB0PQhCa+QWJgPGd2TEdqgKh9MKEU9wdakoIQfM5EfcIAKBwJ\nnqTmf4mFHgqc9Q6wOsEjBrfsS37r8zO3YW02A7M4Wn7kawaka2ofmyZ8c5Hz\nWGgkiqg+Ib+LtIbESvzn6IN2gimDbSmf9x5lF2s4fIqCrcAWQfRMzv4a+ltW\n5ZlwZgAoBhNI/bHCZGemq/Xi7VpVw2yIFOgtWRC8tRbhMNGDMoEHE/s1lduT\nDOsO\r\n=DHCj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC60rd6If9E1lL1TVLl+iiLp8l6b58ij95rMF53esXT1wIhAMuXghFWsvc6DTYxSsLyPtmtvWxpp2Mr25W0oY+Ws72o"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2202152253.0_1645002500402_0.28846818015154674"},"_hasShrinkwrap":false},"1.2202162256.0":{"name":"@bentoproject/fit-text","version":"1.2202162256.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"7548b64f77fe070829e46481b6fa247b8813958a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2202162256.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-8nhnBXiNj+VL3S/9b6l/WuK+dlcC+9PC8DxD0QMwpFU2ZvV/+FToHFNX0abFTSzjtsD6BVFtTPTe5T+b72d6lg==","shasum":"c54f791824fae1376b3466bad5ed2fce5e0e55ee","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2202162256.0.tgz","fileCount":30,"unpackedSize":798659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDhWWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXmA//RUxlcdA//+suJBqbzUTuPiqMJKZKnS5Wl93t7EaYo9UrSI5t\r\n7epAqhzXCuttdAiTsNls5OZ8mjLB+DAsMd6O26xlXmrdV3KZA7z+5aTWOmIi\r\n+5BOP5eA8ZjhEzgBNvvRnkirhAhoZ0EPOOHszcD4xDc0ttmLA4os3oZDEueq\r\np6sqrdSlXSSRitSgcYVbaKKX17It8OZggT8uBsHLxb7XZp90nVcCst1rDswp\r\niZYEYLq12Dbp9Se2RGkx8tH9RsA/E4gYHzKBnqKogN13urQAvNFO/SQ9QGfR\r\nRrrVfdvGCEswFXqpYN5+7cXN/abbeaHFd+utf7plS6ppb4elFufTUgHRW4n8\r\nFbJLQYV0XCN0RyFotChXxM2ZjTMRsvdGEBE9oAkL76s1UR4+i1mcv3KjtNlU\r\nKcfMR9Tya42o5cxhinQWN/Po4XIqAgYC5xuVP8U8vMx30IEBpnhdahfGprjl\r\nQc2Iy1M1d6CT0eaF/R7QnIsiPpNQ/W4VTehwr4QKb0wJOtnTf76m9xGS/vpd\r\n0x/i8Te5AmO93JOuMabJQ7Gbwk5dtL6CG6J/EY/CGTjeQ8BfEkAiYV4tTX3T\r\nRWvUCM3Bw015V00u0cwHUbY8N6Gsgm3FW7HxClcANl/i0oYlvM6OoUmkHfYy\r\ngXl8/Rb6gMuNT/jOB5kxN1S2se/ED5VijaI=\r\n=CGPd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID/yssilt6tmSy6tF5cQUZ3f5/XJI/ZB+wfXUWLDukURAiEAhgSjeUlprnsCz0/R3EChFVo1eD1F0Gt1MSd0wwIT8MI="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2202162256.0_1645090198386_0.012252946657207664"},"_hasShrinkwrap":false},"1.2202180255.0":{"name":"@bentoproject/fit-text","version":"1.2202180255.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"8708c2591965df37c54fa25ae829421f10de58aa","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2202180255.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-1E0hInt6F8/THF1nfJ25oi93wNM8LNY+Le7xqXdixX71sGPQ6S6uID8d/Kzxjec3ofcBBcbdfAEECiRFM/57OA==","shasum":"642a81bf64db6c1a3ad79da09c3940631a08616b","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2202180255.0.tgz","fileCount":30,"unpackedSize":1515923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD2qJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoj8w//RIDpFh5I5joxIKPOh/8AvjozYBgaAx61JadRIMZ1yww717uJ\r\nCfhsnsg/H7Ao/W3ogk0ARn12ixOuYEYPKyzKI8Vu9fvGSetsYArpTcnJ5knk\r\nvMzxlmY5ui3N1YIRpwIJFepWgz5iKrMm+Y7Xe7h4xd5QgcLjoqN1LnCHi3lU\r\npZUrK9Edvo1bVENpaMLld374FJMYrPMHSru79skdJShu5EGvd8ev5oKbEFj4\r\n0BJZVvXMte21sYYaXaKiYSMTz5pCXatBWtzBtZ/Y2Q9F2tSlpjFpM5ahrkLk\r\nf54DoweyO0ce4Sjzw/l3aq9xBOfOHEKfUGjIatJi3RlahyHG55g/stLQIJmU\r\nBxldDOyygRBn3U/GOHS3DjCh5WxIWEOn1uhThvcJ531tVJPeu4GQglWPcCi1\r\nro3YdshkaC1xM9Oh9wg66HJEoPuOnwntRzYMqtamgeLaLHWhEAuSMFRiw6vI\r\nQ7XlVCQ8/rv3t0oUD26Ia2oYlYhjeT3oMMtzuaqZGTkkNKybddVNfZoychEI\r\nFlf8jTaGZUtkUfd9TPNwKIjljKyHTIf39Qkht4TvccoKWqU4G5rkwMckj0zK\r\nUPZCXU0n2RTBTVyCSPj08ypCgAt0k7kqa9cC31nSq/WxtQFIaWrYAQegyd9b\r\nllYFeC3pVHtSmaa8zp8cGzCoZwPF9TIBwt0=\r\n=QwPf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3KsT0ZXJgeiEJ6VCrMh4dzuyg5B7asD9BOoVWGbSyawIgQm9zymt/MtpOz/T6BESzgEHE9nK/5qizm6ZcA78l4ac="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2202180255.0_1645177481497_0.11739866301361057"},"_hasShrinkwrap":false},"1.2202230359.0":{"name":"@bentoproject/fit-text","version":"1.2202230359.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"02e5f5f51d0375b35a2a20b27815ab79d9767e51","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2202230359.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-3QgdCjEau5IwmF144wbGcnSngMiyKae3FFuuZ8FvaTVw85pn5+Y7/78S5SQxAKlz18byvewHzjD18jnJksnwYw==","shasum":"52b40aa312f894b9b7fcd6680f8ecdb7df2928da","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2202230359.0.tgz","fileCount":30,"unpackedSize":1516451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFf6HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsOQ/7BAGvhxuzUDj8rOzo/vYvYM3xFS9zR3ciFlZPgeokJEXcoHZ/\r\nHQXQZx1aMDayI95/EhkOdSLP5+Nt02ocFjpQ7I79PrusOzYQ9PFsAm/p87o9\r\n+vGIHO8zGAM7jWDktQh+o7DifM4lVsxbpBfigE1P2g8U/A8h+ZB7PtrlRIR/\r\nS/LGxItL01xl71JmAFPWIauvnYqkSLaIvcN38MsGJzHvoTBquUNRlPWK2leM\r\n4Ia3XFkU6hj8ThSKFEyx+xziVtET5cilQGzcY1Hj7M58eCacoS88FMgXrgA0\r\neXIHxKOzSUIYeIHOkMKhLvZp2T6dWAsdItG7p+CjWoejQIQAZTDcW5LEQE8k\r\nUnids3RV1rKFUmpm6VJam6sYRv6fRbfVp05dcgzt0DSCoKxAdaYdj7SWFBpA\r\np7n2hwwc6aT2zg//zTJxKX/hJ1At+1EMckjIe/lIUtH6wNeJQbqhQkVLgrKI\r\ni77/oTuUefXZYYD+rUIRTVYEiaKnmlU1/Mbg0wulMmReiqRvGwmKVgICT4s5\r\nb6iQLZX4DEak9jMTwfJemYRS7k12RKR6mVZxz9tkTniYuBlddF+zr924j8is\r\n2lmsUvin+TgSQMKIElvEFf30sAZ3RkCTGUaiUj2+7YL8B89uhZDUQSvwkGBe\r\neaUZBZPtbWhyt480iSA2rvNnjb9FhNH/QOU=\r\n=Is4u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSfBdYwXwrtrIfqs7CmhPPXBqF8azgAM5dZbphAPhNlwIgCFGslDJH6zqHRuTdbRLV0B8px+7uAnYJgexzL3QJxOM="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2202230359.0_1645608582950_0.9606261966414931"},"_hasShrinkwrap":false},"1.2202232232.0":{"name":"@bentoproject/fit-text","version":"1.2202232232.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"66c8923bb334f4cf267bf8feebf822629a9129ac","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2202232232.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-iwUsMg4rFSlaJytbcTuo+GHDKcSzq58NiikgFgxRw9Phjk7J3EQqFfrdMkzhbxZ6oPRnDT/Olu2RKdNulFVTdg==","shasum":"bb33614d016eb3568e5ea4b463482ef210cddd40","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2202232232.0.tgz","fileCount":30,"unpackedSize":1516659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF6LWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoF2w/+MOu26v9pJYF1ltoO666IK6hqwmg0Jwj5SW90W1ttSQK6NbSS\r\nw+WkCtLERy/THEc1UknM9jin8qoaIz6WowRFAGe7l71Ws0zjzpsOriKsKBk2\r\nKtAQTOTCNxqeYhFgwTzxRDMiFbwX6pvvnn3LT0ic7c3Vbn/WMFjsm47yfT5F\r\nsREnIzQl4JHEmI1jzHk03kDrPSj+Nuy4UWtbKEaFyStBC203VxRalWyvKL/9\r\n7+jiBY/rM09nsKQe76RiLOYq3A7Byl3ldPmNjsa/eO6j/o6gr7gfa7JC8RHv\r\nM61V5/ar9htvYdSrJnKKJwkmYsH5F01qBSF8kVDdyYGZaNLFCxgdAZ3JsOZo\r\nhWlizZKzIfI/vnJp6dNlW7bBMVhlZPy5CKHZy9nVGDDHzBHcUzoNv3R3zQ9g\r\nIJP59ZHIWH1+GnAHDFTwJQ//qkMM0zHWLS7BBJxe96TMmB6k3uKlrWQ1qn8n\r\nNexB1nCbKkCsHUl8Ae4U7hrek34efU9Tp6pyfYFkuFTsEY4v8b+zxosXIAq/\r\nVI+ySVuWqeMvLMoCUUrugyJ8xAkgj4qcAfugAUZWzrCPRp5Gx/UhRRXObHJg\r\nwQ13ziuUfVPZlABg5lUEdpNmm7qpXHZXsXNm8D9tE7PxqYIvIBJw4X/nwWim\r\ntv/kuaGQaHGHfsGoX4DKPVeBcmmeCPtzoA0=\r\n=BxVs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRVRUGnMChTw557w8CvPdG9MXpvcnxq3kCvPXBk8VsJgIgJAq4Ceo17l0ggO5koY3kM2OJeMGDY7Q6ukNeD42IXIM="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2202232232.0_1645716182697_0.6279520742399571"},"_hasShrinkwrap":false},"1.2202241911.0":{"name":"@bentoproject/fit-text","version":"1.2202241911.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"d0f22f13b53d3b67847e18749e07ae4640258f87","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2202241911.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-FW0gaJkDAH+47qSiJjcy59dHlUQI33GzOuWR1dLvt3zLV+jIkXWwjQuTfl29zMeXLvDVC73EG/iVifRoKxkVcg==","shasum":"4eb226dc494db10b764c6fa258cb07850957463a","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2202241911.0.tgz","fileCount":30,"unpackedSize":1516659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiGPMdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAeg//T7/gcN+qUOScAsMxHRI8tPm0VEZXASj/OF+3d3z6jJsq5Qtp\r\nnQlyBtX5kdxzk3z2CHHbg41OATDTERygBIRVwbdOc9N91xBMR+enVmqTUBzo\r\nQ3tUSfGiOO1M6DFv/T6Gwn92A9ZaLlxbocppdnsFLMKaa/SyhmY62Cfdhy9v\r\nz0YMoMGhCbiwMD3SSu9R5UElVaPdGrGvMGDGBZUy+ddoW2beBlrUwON+ASmb\r\ndAvqKwCGyyKeCUCHaa1J8AwmD5ZCajecE8QL5P9DUB0ahxOFntYKVpGBofFx\r\nRYL5POnNz6jIiPLOojCM8KyjMXhD15Q9VyyVdZiRW9SAeiO/110DjdrOUSn2\r\nHpL7bEZHX7Lgod+TdtEI2M4aa62vNobyFJHK6hgAKpKloALnTy5dcDZo9oOZ\r\nrr0XNsqK8saTWY6PrYcDH947+lQdBABGk+SPeLUh1TLUZCUBc+BEi78Iql4f\r\nIVZEdt3YXKAAMiheLYGEC6AhpMn2kQf1mRMaHdKzg68Js73lDgrsbbBPY8pw\r\ndvv0ACf1UZHSjEmGaOelaBUg1ZXYrnt+XnNg+Y5iDcKAUjskYADATCbYrc0D\r\nMDCSmsTbte+Caf0pRhpv8iYtUzsYST9dTeXOpJFer9G345lhzQUOppYFINXe\r\nEYZHvoH0knnhGR+Hi0uU6opiHLMJea7beHE=\r\n=dl0H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7Rl5BkKd/jlOBd4A6fOSePeTuGFMOaneXtbG8AUaJ1QIgKz/deqPK50iiIAaXRcgldvk66lePmDZkhCghVqAz2/A="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2202241911.0_1645802269453_0.9399631041167837"},"_hasShrinkwrap":false},"1.2202252101.0":{"name":"@bentoproject/fit-text","version":"1.2202252101.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"fa0da0bef1bacbbaabdd17ebdc31b018e6450c58","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2202252101.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-SSeeeP66TVacIv3d6H1LIpZBE0yw97lWXEEsu3pMgIxWh9sMzzYMw5SVoq7zpxMP3CyU1F7ouKp2dqyVxHDOtA==","shasum":"87af76244876ac9e298611ba1586d8461b8370c6","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2202252101.0.tgz","fileCount":30,"unpackedSize":1516659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHPxqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0HA//ekqIigogRIiM7jtFmIRyQkny8O4H/bKpfP6HnbbzpjieF9/D\r\nJEpIazzolUP6hjUUDOZJzT6mb7VHzde0Nz95s65CsAJ6fCboyyVHjbt2TvlN\r\n7cV33462t++R6PdJGnmpA5NQ898VndCY3WImtFxaq09EUuhy8QvVrYSHghki\r\nHS2LL1LW0R1RvpRqYlDE/237GmQHVCvgWNJgwqcrm1u5E+YR3ut1rre2wWXh\r\n5PSSsyObk5DzEPEwY4Pe89B+9tuZ0KOwnuHZhqowXqlW+nlZHgZDFNK4bkLM\r\nWjH9BH+/TXfkk++IjKtEjkRZ6+jUnznsC0XtRlEdK9fLrcuoxaGgG3+E7qEe\r\nfDCT/CivcS064H9ZLsnFq0sscDO0tsQB4yOVie3/jTvByEqPqkqzXbrIjau9\r\nd9IX8AHWRAIsNxOJk06BBAxHU6+tece1xrV2fVXjC+6A003MlCCNzOunAkiI\r\nACrbFRzAlmtwYDgypNg7VUK1fuSiy+7hPFb464FQMy89+fQfkUUOO2dDT7Rf\r\nsRSsRfW0tqa/a//7N8hFjtiTuUIPKZARw4Q2c/V3EIA8alGEl9MA8MdODXtz\r\nebEcpJ5UWU9Kh4jJs5wk2S8jbfWQhbStlohZ9HoNkLrddMDyXiv2qQEJ6fax\r\nLG6T2Uaug5bD1+6rxSzKgK77PmYsZEWWE7c=\r\n=mWdr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsYT1BOsN2ns+LdX8p/mFNZghji6E/nCvgGEgpOppqYwIgd8VlOP76oHiX8F8SynwSGOrm29jAmJZA3u87uDgJCcc="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2202252101.0_1646066794449_0.33158146337745076"},"_hasShrinkwrap":false},"1.2202230359.1":{"name":"@bentoproject/fit-text","version":"1.2202230359.1","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"f459124bb58e0a0d2076f658b8fbe3c9db13a04e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2202230359.1","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-p2OrhXUDjYo/NGcShaWbeSYZbAPxVaP+GSQolun7fWb9g6mS9IAoN4IDrzM/kaIB2w0nsL9gUSblzu+ATrq+8Q==","shasum":"2d3827095612b78137cde972a752914ee20cb75d","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2202230359.1.tgz","fileCount":30,"unpackedSize":1516659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHpilACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq75BAAmHJ5RYD0cbWLE8aXdT3Xp1rVFUzah479YY3//V1apyuWtjpZ\r\nyx1T3VxykvhVKVlo8n6OHHD/E8ttnBoIED6331iDqJxByqmPiBuEX+IjF4gh\r\nROW75Bp8ddKYJ5LJbhXzwldstc0HgbDP4zFgbs1gqyQSU+9Uhd3T4+DJa5Lr\r\nPbmWplQnJwp2ckXq9UUIbDv/YpAKsLXhqDqxRdNJUT6hb0Lg7iRihPG3dka4\r\nYNbUcgZDf/pcL3ookTGx3arVr/uaJgwMZEm9UgMJ2ZpCoQ4QaqOZAoOVOugX\r\nlpLNf4qxWhntBlgQgEnhV6DYuN4Aq8T4TzDWVmczDH8jl2QO9tVUI6OGzaWq\r\nyalYW4IuMybNkAGH58TbIbkhdOM5b74bRlE3ntICvsN53H+aiaEWFJ7yOfc0\r\n+zXxDACjOhkzYIC4x7yYucUhjf7lS44vs8IKkuxkM4aP5PWDCKFHBYQ7pJY2\r\nJinRcmrrWIQ7NhMYM6C+FEzqgKVLdF7/LtE4RqspZHGZHF/fMbw4JfiVWCTc\r\nN1mwEgRd7lmHzXomeAsxiU9uvHVMBDGuGxPe9VZFIFefGyZfk7mFeMki3Qs+\r\nWTVUNV8GIAob4nOnbExqKYr8ZH9YyjqCnZzWF31tNTndwZIJVAeADlpmQRss\r\nyi1aVGgS1DDeyz6vHBEXVTJdxxGyRTh5VTg=\r\n=bHns\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFBGrQbFbngo5VPGC5WsrE38ttKZntScLa4s6cGk1M2PAiBhe2lj0Jn7PAMII+4jcCgYkfXz2ga21cf+v98O8+1MrA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2202230359.1_1646172325633_0.23246097615922556"},"_hasShrinkwrap":false},"1.2203041950.0":{"name":"@bentoproject/fit-text","version":"1.2203041950.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2203041950.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-NJaIcay2wezS9R8UZ8zXJwh6/OXWZzn3X89Cd1RUW2EXhzgvfDATQBTqbaF7qILSMFsCPraZ5XrhbvbW5+6pnA==","shasum":"2aa21eff4aacaf6e01d7ae35e6a2319682f798fe","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2203041950.0.tgz","fileCount":30,"unpackedSize":296874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMNyVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpslw//bmGjpni7vzhk9emyujawn+hhIL44/n6xki/NNvkDrsy9RdVb\r\nbeUQdCB/uHFVRBbjNexyEdaI4AI63AOXpQjTWIUXqO0S7/7NnK8QbXO8K6dv\r\nHXoeZRXihl8IkLZQiU7qx5i7rPJNVu4jfkwO2dAVOzfArO/UzG+93yjdv1si\r\njm1Ygg0l5NNtHpQ1RXeuwQQuyBstrxzTN8DnomGqiQWVodw23He7PX67BNMC\r\nuR7cNy0XD6FqkY+J0SSIxM9ZqPwckJoF5xR7/ZbNW91te5PiIF1rSCO0TieU\r\nP6eO9bqRdbP+ujbuC7qsDSlkqCE5i/+SRQAhzpPNU55Q5DUzYDJ/sueL1lx7\r\nJUXfi2PHtrcNZxERYN3PLX3YJ50VBAa5BKsmcwFwr7vZV3q3SgYrupClU5B+\r\nzslXIrTcOot19E2B3h6Xw1j4JKfnvWwA5q1zS9pmW/u91yQXG8/p5yU9A9VQ\r\nXysWiwUnutPvZCyeZ44zICzmJ+onYONrldoLjp1mrRl6zrGjMikW082WG8dV\r\nRij8swrCZ9igqbWUbbtImPQSVBFDHfZyiy4j/Q12IrcVKw/U9QttSKjAbe4V\r\nccIAXr9X90JdmvbvRSVR4j6fNzJxRdm817UQmD40uyKcoYUuvMtboqLxQIs0\r\njF+NUWUaZorGB5e2NBpM8sV3uHS+YoUbrK0=\r\n=ks7k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE98qwQQQzleTdnHMrwYf82gv7tnokjjgMO9YKKrme16AiAqjpMgFHuB6ate1p+g+en71QcwB1efcSo+P13vbK/71w=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2203041950.0_1647369365091_0.11727686211624078"},"_hasShrinkwrap":false},"1.2203151539.0":{"name":"@bentoproject/fit-text","version":"1.2203151539.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203151539.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"fc739c0d339dbae236fa53a87188f5f7ca58f25c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2203151539.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-JS4ZZh1A5Amq4VGP+1v9y2KmI754PpmvmVW20r6TBYPhCXXiceKGD3eDYPAwBLguSFrioIYzleLeOn3vZiUUzA==","shasum":"c77a0da1591a4685a08b229eaf2e226134d7b601","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2203151539.0.tgz","fileCount":30,"unpackedSize":296874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMZ4eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqeMQ//dN4N3lu9nU/ZHQzUOTx58W6Ot8P3ftBDEQid2WL91SzQNr0C\r\n+CgII7wtEnwmn9tF5Ek1nfEjpwEYY9xV4VOUieMOIu9i6DIHLU8qPEYJ0+lW\r\nL89nKUuUQbG/Qbn4rG+egkCjeof/cvFIyOZsKgYUBO7A7l18udkJCWyUg68a\r\n2O1Orwb5MXOe4em/uAbMNMrCDS+AIjRWJ55pRgtOXXOMuRPFLZ8kT13IkAI9\r\nbYeXSs+Z5PgfOCEoe87xhfWlwF9rzfnq2J90o3pHY7UCx5k3jBgTDNxZEKEW\r\n53m5qg2Iiw39GrUAazndNHOFyYRIiz3HWz9hV9l1Kb2SCAU5dV7Pn+tT5k6A\r\n1arJyMTj2MB6Mgt/kAGxirNyWNH9kMy/oOkqy6yF/y7xQurkMO4K0zGUttc0\r\nSkO9v+d3pRVGTk3RIWm/QCRRC03AY9oyPcmDCZy11Wggc+etNyD777YCUqBO\r\nqV5URF/m0bmx6fX78tmf+qICj5ag2JbaoMFCBvOKRkNJSXPgcrnaGC30VSbj\r\n72FuocFCjIpQRI2mkX4kJgKI90Ch1/zMKokWGsWEYjHZY+plDB9slBVEUBYH\r\n3pvkkJ182bc3UOhTYhG1s8MASTfSNW61P2miSAzeb7hWKnfljZBWi+NqFeLB\r\n6a6WGGWHxIwuBZST9+QMKmopLskPdH0FEOU=\r\n=mxUy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEXrL+r/X3PacWEzzfeNR84H9a/9t+5eT19zKEOPFeVFAiEAn4/H4DO4LBIMkMXCQln5ejfp02BhztvCBGYVRyCxdN0="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2203151539.0_1647418910124_0.6770714032371958"},"_hasShrinkwrap":false},"1.2203172113.0":{"name":"@bentoproject/fit-text","version":"1.2203172113.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2203172113.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-k1bgHJzUeEfiIH0BZybVXROPvgqGqx6U4JssUTwpogwWroBjUqHRo1QWQx7UJqBwN3WmDpef8HO4PbCiXw3Zpw==","shasum":"e5de4ccf322be8e491fbb4c1c3da3506053806ab","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2203172113.0.tgz","fileCount":30,"unpackedSize":296874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNEFqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoV8Q/9Gqbd0AZOcm+KX/rLMlNJs2EWXI4nA84rtnEeIixELGVhwwwL\r\nTmp83if4SvRHtNihThm/nvW5IgiBJq8/Ol7FGcspP5q05fh+LMLaT6/ENZ2O\r\nCj8LtQ9qZkjo5i8u1xHvLmrBsx7BF8vhHN4kBQQofD29HUnga79Pe+SbV9zP\r\n3ENN7pSeAEkrPTeJygs9XMtouG2MOjTGIQbhNSKO3uYUwVKhAS7WBf4nVTTH\r\n96RWUMdwxy2qlWljRPT3mEjsf0XT1Y4fVWryBiIaT2Zbaq+h/48s6RsE45UP\r\nXayRaDyj+Q+28ITrpluyjHngxRj77xAU/zhGksOGPLNjfqZ31k4e26ahyENk\r\ntxoLh/9sMGAkg2mbbBuOeindCYblMFK1kv3jAqI9116iS5DfeVkq3UcpRJfF\r\nROdtzDUa5L/aDfqeLHF+sOrdNTdFaPGtT7TmqYVO394MxcPOuyPtAG6SrLGt\r\nqPw5oGFPgZvdqC8Zy64Ybf/MvGaZrIbEHj/fMWs4IWo3Zsa63XO0znyJrE+/\r\n0oQRJOy8j/D0/yIjk6YZXZyTe4ACIhAGPjtnXd6K5cwqX0GgZUz7RAgKtKQV\r\ncabgpVSXGkkB02BgkLZ64oGaPpYTjkzF0RS2eBA7lzBy97ChI4N8pJQlaYNL\r\nQLNs3e5Le/fdU7zLWC8NvSx9ikQLTx474os=\r\n=q3FM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZP6nrdw+JyMN9ilgnYRs3u1/pfR+83AyJibxD+gOu8QIhAK5IITd1I5DhxUFEJlh0ge7CSbt+nc7laty+P2M0Kyp/"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2203172113.0_1647591786772_0.9518771909885593"},"_hasShrinkwrap":false},"1.2203221937.0":{"name":"@bentoproject/fit-text","version":"1.2203221937.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203221937.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"11fb2607ccf78c526a38e31bc141dbd3ac75d326","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2203221937.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-FLXeIVHdx9ScPAagsk9zjeG3u85b3kvxHi/rhe4ZtVfcZxh1RWAaFevptu3dWYZjM4mzZ5+8qa83u099FBysAQ==","shasum":"f98694601eea6b9279a35854a9e80dbdbdaa4de0","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2203221937.0.tgz","fileCount":30,"unpackedSize":296874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOtlcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOgxAAgaf/n87Ljmi/xVs2ZdmuQJupWjqub6tgRDEC61y/t78W25d3\r\nZ+NuNL8HeAgcdhOsD78PxYmoxIDTT1jN0sdgRajZMbrnYXbNcZnTVAdPjv1E\r\nQ9UTMGcp90eYDahHnHA2yUT+WcbHV6aUoZcjRXPerOUNDf6xOz+Y81hzwf1M\r\nLFDh1fbSrXtZnOOWAw7qdmTvgF92TdHMXZmVMIrYrDj45by/p3vaUfCIZL9y\r\nYuqtdo4ZLr1HPdGCKt1cOQdcg3gZshnLLWvLv6O07mvFXRrlmNLN3dLvev/e\r\no77mFx51zMD/aocKQCVGMWkMK4mPbCLMU8EmH9uTZYstnZIEUj7JVGmABfie\r\n78AcIYMdBPJFh++Ypxp5RVGl5w/kMzK8fC1ZzynPLfLIdGefklFyEZbgsXlv\r\nP+1mCVDeNMqNKIqeg2FjL5AdE6gFn52tu7G2T8NT3l6d5MlHqLRyQS7p6XvB\r\nha2VeLbGTUrUckY1bxYlhSJZV/nIeFY9E0mVyzpZcLjJcnxSKVMy64HVrIyp\r\n3711cbwrVB5dT5mS6RTg0HaX4KFWTG799SW5jROQNxwGUIiJSdSYEJRCvyrt\r\nLfldXVX7ImsHg9IxSoSZ0k1WRaazFubEpCtppEz+TvP9Hh54pTlH4KL8LSGR\r\nTwvlLqk9hHvvwPjtpw7+5gK/fAwlRZUmS3c=\r\n=5O32\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGvRMs7PJ0A48gnvW6cs0J4FRXwTlHgnSwz3FapeQML2AiEA5BaDqtGHsx8kTilgDVbZ9cECEU76jU+OE+1eGhaSfrQ="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2203221937.0_1648023900821_0.17935564585417874"},"_hasShrinkwrap":false},"1.2203231914.0":{"name":"@bentoproject/fit-text","version":"1.2203231914.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203231914.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"9bf7cbdf0dbb4de2bc6b81fe042e52c990576b61","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2203231914.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-iDP5FXxlX53ZBK4yOCB0hRNSWVL3P1XXhsyRKYHwPwXYziRQHAMa2MRUJX9YelI9fpR+IM37icetzDQhwhzW6Q==","shasum":"395ef84386ab74699f476c3b0b521ee5cd1fac2c","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2203231914.0.tgz","fileCount":30,"unpackedSize":296975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPCp3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSCQ//SswTPJYnyN9rX7YsgGWii5sa8oh5GeuQCVFXFiiAEpJAqoxa\r\nIn6qaZSzyHcF2yL45/H6vEguGXSkwTYW7KBiB3jsuENqEqDlUsxkOfsQVJRD\r\n8vu80Awwb5xBzv48nHStZmiM3B3aXSirskMJ0C2BN1hwncek0WX7TwhIStd1\r\n6Q2Z6hPZed1A63WaLBrtWEgFysxOgkzjd7nTFp2FDKsAKyL+bZGmXZOyO6aR\r\nN19XQAUxGhYLpM+u2AcyrU8LnL5uDoZOZoRrnOFDdas/sFdQvWBHNQT869ec\r\nTZ2nC63rnV13YijMSXrNFpFBwjlFWV4cS4GAkGsgTPJVDgiKnJAhEULj3DfQ\r\nPgWUnWqWVrk+Oxmyp+UoNyG2H/Xnv28izzdRIM3bLL7pipm+4UVx+KRJ4TMv\r\nCCCmomMJB7xL4a22OydJAKoyJ+gSxhpKVZl7ee4K0B3VXioKR0X36YOnTVgt\r\np34MXw4HYw3+99x1DBn1wR8Vp3a40TKt4G0WL3JFmYBkYLOwSnu8vTWmYo+9\r\nwPOVDoQ6GkmRwF7RnHPKUJUNIwO+xDLPl+5TqEG3nkMB5jA5tVNSEAW0LF4d\r\nthXVeST6KDlmKAzGp6w/j5r2z0GyYOs7nE6I7ndbxvt7CZHfywZZnFnV6d4q\r\nf9c2AV84vcV6OYCOmtPJ6oGrb56/4XiqRQw=\r\n=0uzx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQvoP/ffc/bJbVAK5E0c2jCtMoTav5I+yIe1g87qMpnwIhANN3Q3iA4HxA3ZQjbUbymaNktJqIbO4VY+d/aNZH03mj"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2203231914.0_1648110199735_0.3068749945619518"},"_hasShrinkwrap":false},"1.2203101844.0":{"name":"@bentoproject/fit-text","version":"1.2203101844.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2203101844.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-Q57sY5B5+YGPi5TVHJWpeztWRzOGNI/+bfIOGDbvGJz9Jj0Lkp3VwIOqE+QTALDjWMIYZo3LbyefUTxF6JyW3g==","shasum":"56a4f7e6c4e8799ec6598b6a2671399f8ec3a6cb","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2203101844.0.tgz","fileCount":30,"unpackedSize":296975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPM/zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGqw/+Pg7MdaFSZLCM6hQwB9XpAbQK7xsAw8++41BQuWoqm9bTpM+C\r\ni0T7JplkqZUGOBnKlDweyk9KcUtlDnd3j2RFWNoi5R0K/XpyBTsd6aEjiVRE\r\nx2AOfVcu9qDeLQqelBVeBP+V9SlJvAyJvIDBUCT0ZeOaVnXqZSGVvaCW3KrI\r\nMCpdu/cw118KSjTl04/kwC5RU2htJCUlNrS8yeBn3Bz+ZnAQ8HYypYQB/VhO\r\njzq+ahXwIrJ4hTyNDd2SnFr8h9wQ4dw6J2THhdPv29FpPtd/nZ4w3ufr89qT\r\nwpwI9Gi9b90WjiprMpbER1Ei4PspmmwnTA7tq6dsC7mZhrEyyCzvu52qmYLR\r\no+XtTKMU4gwziBrRA+7ljZsJKL2blTrMhFiroN5n/M+ce2mYI8lEnW8gMInl\r\n5CAlAXoZRzxQn1mlm807Kv5sHAYX//WqIsXXzosb2lzAzlOC0zmXg2XLEOBj\r\nMFPJYtzmDr88iduHA45Hm6wRKAapmAF4lVUEEEMhGvslugulI7dZRg/u7H3R\r\niWFvFwaT6GSdGJzMeX1cGErweinpNtaVoSb8Sesyp0Kp2S4tcX3evqC9z45A\r\nVcwi5y9AmyNCpP6N2jRKh6mzQtEzXa0KOT+zE76iPU4+UVStoe06XgvqGrT5\r\ni4BCqkcDqRylW87PMrFbuE3do1NCchcqrRY=\r\n=4N8x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCObxGbO8lg2aHIY7P9FERYQYxLjPiHNRMmwHY+SyYWEgIhAIltF7G7iPDJi447enmQAAAhxA0LWdmjXw+/hyedjxyd"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2203101844.0_1648152563183_0.20163471296648394"},"_hasShrinkwrap":false},"1.2203281422.0":{"name":"@bentoproject/fit-text","version":"1.2203281422.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2203281422.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-0PvSjUuE6HYcNSolU1KaA2ltTt+XdrVGsoAVopc5NHDmY8msjfU4c3cyLWAeEhyLaaG9pesxFYPM5Kgy6/oJBQ==","shasum":"651a22257171248eaaf0ed425e62ec649cc6c177","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2203281422.0.tgz","fileCount":30,"unpackedSize":296975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQsMRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEOw/+IsHI0JKL+X908PTrmleOupqtiCejzZzyvT2/8WPmcpPmu5Wn\r\nKzFbuOia2/XQF3jawem3poinEGhZluNAUGOc7PJPnqHaT2J6kj/YHzeR3Qim\r\nq/Q6EgfndDqYDFw12FKIp4hUXiNbG9coQDRg6tZIHO31rWN2n/u9aq2o9nTM\r\n6O778wOgfuPHX96mwkwJb22NmStmtfQUUn8/T5cTtf8xJBLLCa17O1Rier2n\r\nW9fgrk0dSjveJ852xVPrCeAOxMsrrr4UBIjIyh7GWYGWNd2yW8e7pHK9s70y\r\nx+UhrfdZno2kjP6ArBbFn07orzVasm45qb+wSDHzJZVB89kClPlIz8u2XYFe\r\n8igUKWnlxh53or0T5b9Tli+zk6KvQ1GwlX9UMKJzEgqGJo4iMLFfVpEi1Dh9\r\nHu4c/Vuo00s7t7av/NkpBECzSm1I9oaNr1k1kJrUt062VNMBzmF+QPXAoxoo\r\n05uwTZ7oKwvI6sHoJ54Gb/ke4x8zvuiiC2Dna8ahGvCRLtcplPDDjUHwjq5I\r\ncr0q8DeqWHdWtXR5i9kxWNXrjpfG2z2AHgLVmtiDfJyhoNgZ0DoPJsV8gYpS\r\nZbtrTISSsuC0D/ae6q+wRGquwiRS1eCzQtxklg9IpnaYCAP/1/1+WpyYRwLG\r\nJszZteLuVAL1v2s8ls7LtiyBKg6gJCgAR90=\r\n=Ns/e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF1wR0MEUSaFvXHgLT+Fu3R3T8Up76UlQFgWZa2GvPznAiBhZ/y0wAqbd1RmotEqfzpCA5TIEcMnwNFo0ku0pgNwtA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2203281422.0_1648542480513_0.3977550123648781"},"_hasShrinkwrap":false},"1.2204121632.0":{"name":"@bentoproject/fit-text","version":"1.2204121632.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204121632.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"dce11ee1542a2d10e47b8e9875dae137f4cc1b0a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2204121632.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-Or7FsBeGCYsm/IDP/Wn1hgddtOwXiQerJfyiU4kfcFkFzziJvScH6Arb99lbbHJFB0BTdWiEfwzpoxw7LsKqTg==","shasum":"5f731f418855e8450b2ec7d24a7db8961d1eeb85","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2204121632.0.tgz","fileCount":30,"unpackedSize":297063,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYfZbNdaDjat2lN8exbwKLY0GVgO0I9fRSYWwoEqSfrQIgAKMaQmw3kL06JkpgVnlkO8rdrE4hGM3yKCDmnSurevk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVcGdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpi3A//bdhvxN6SNPU2pc+oGrztdWPrv24wGimP46G9We+WDsdtlvyH\r\nBfgPWjqZifFi9JcnlFUG6h34AcjvbXXPyFg9AGYr7XrtSn5qbt08KeaV4Ass\r\nTKvHnyAFwNAgXM8AeV/plmC7bNvYZHm0tv5xxfSE80k42GXQ3jb5GsAT2iZb\r\nZKY2DYq8r5GX5Hx5RHrHnCj0Nau3MmQcPvw0VjFlgtdrbhNmsrOnZ5loY6Zo\r\nZquYhk0/hRAP/Ryx5MvsRhNDQSRkjZ83FPxTKcmY+gPXokyo/9G7kOnrzt+B\r\nvE0VxpOm+aSBiBa+X/VCbFd437i41g6g/PgPjA1ESE/1ontpE3hYH6UUKdY2\r\n2wWxX3Ece6PsCUvo3jbq7O+n4YP6ZutQ+6iftEX62uQrhJAoLnJdWo/fQ5XW\r\nhoJMoT1E4sxn9k/sni7Mki6iFGwYxpFOuwPiW80mItCd6edPahpyw+c7Nm9Q\r\nOdnRqstnLGqWq7UjT+9X3P3pRf2VlKg4BBuld1DAJyo6ZTeac4VY327yPkey\r\nSVOXx1Qj2V+kvnPbxE9bbxMWdZ+1V0dxFntlpY6HZuUWC99G+FPEKf8HTyIH\r\nKZ7RWJ6ksEDrvPX25wfKXoPPvsnNL3/ETXksP4zSsGEqJto1yQfhuGgveHFE\r\nW7i5b8IpstFuB6Bv42K1LdmzG/nkmMVFxuM=\r\n=d8go\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2204121632.0_1649787293061_0.09440044736191777"},"_hasShrinkwrap":false},"1.2204122000.0":{"name":"@bentoproject/fit-text","version":"1.2204122000.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204122000.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"9d10200b5a9784c35ca9fa16b1a4b3078aab3180","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2204122000.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-l1SOsmxitewqvBTi9+eu3i4L4s9um/04RTaTo7z2UEp68sh4by8DD7UD+ZAQcpS3eC0/rnWeDrhaxaluj4heuA==","shasum":"35fff9222509f99c76b5872106c1931468ea749c","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2204122000.0.tgz","fileCount":30,"unpackedSize":296975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBMKKpEpLw7OeDAlTiwuqvYOmAotUtf0ezVOqJBlmFTHAiAiER/7iG/Yueb++EtKtFfzYaQ+ufPGvr+XVQ6XM+FALw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVoo5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphCA//coyc8e7AqQCqGbpC7JU7f0wB+OcmhwgoeZ9OBR8RWss77qo3\r\nfbgSukmpH1LCYEHC1CbBClFSlKu5Q/xjD9xk+np5eYa3PnqLtVdD9Pe1rl6K\r\nU9lt78YtHX1wDB3SJThC/qmAcCWlW7NPc2wO8mgoNqBv8GdAjLcERFJ4hTau\r\np985W25XqGRfEh0DE7sTr6Ry685sVj18J+GkIVljgtD0NsQ37qW75QJwpt3j\r\nE5kynU4cYcmXt1U9jAlKP9zJre17WtEtnFHKrxMwWRutF2uS25OIYaC8lcFt\r\nMLfSDG2MJ2TkZUz3BoXGdPS9FYb+aJTYCbK1GkA61RhRH+AfkwZA9YxOacsN\r\nCCK3eWKjWrlJbOPywWG8J2C0BvIt5kQcHbUEf3l+hyMa15DTkbo2PcGNoQiA\r\nzFaUmsMet9XpHLHAJnQQDzV+bjjnsF/HV2axxTisKAJZWRNZiIrMHsm7ESjS\r\ngSEFz03iwPKrszhEe32hO4b66KL43EMQexZjGR7R+wXQKb8OI4gnhfZDw5jK\r\n6bfwkQKcyCpRAgcXWN1mKAwI4CLSfJBSwcTSIhz1X6hRJd6+jgqLcK2Zq804\r\n7RXwao84MpvHqWuVwLQx+85HxeeZFavvnw7biyIrNNtL1Wtg42WEKWQY89rY\r\n1ioqZ38BYdgKD4/jvW7etl1weXKbzGveriM=\r\n=Kske\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2204122000.0_1649838648872_0.7728716876961077"},"_hasShrinkwrap":false},"1.2204132005.0":{"name":"@bentoproject/fit-text","version":"1.2204132005.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204132005.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"26ab90e1d3f7c29ac76e3fe33cdbeec9e828eff1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2204132005.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-EzZKNwm92XG8683KsVJkwMe0kVUjr7Dzmp7MFNd7Kua7hBLf0+tnp7dfP2rgNxX4ddp5129umXHvvKw3X28seQ==","shasum":"2eb015f0d2054382c5625c1ae22bfc5684c54698","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2204132005.0.tgz","fileCount":30,"unpackedSize":296975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGjFfJga7uE+vsfOH2F6EahwhjASzmHkXTp0lAdStE3+AiAXtaYgTJ21zQjU81l88FG4Yqq2Ow0tVjLoUS7VROGsxQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV9v5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6WhAAnwKQWtt8/Z86HWJr3xIvr41xGTPGTeK2DtVYR8KcqJekGGjs\r\ncKf69gozUs7lqpyhYyOS9UY/Tt/TVPEbck334QiSGXxYM1JxWNLMaBvyeVCL\r\n8AIGJFHU/vGxCzkFYnLF+GbcsY0gRNhFTMMFBoUeexEgG6Ulo4Oz8jniuU9r\r\nPbq4Z9xb99y5E6yGL6ef05JgE9uEUQPUWX5hWEOHuCRzUs2Yj7sQNZD/msiN\r\ncfRoDTDInFtwk7Byxbv8o/g+cwiPQDC9FL/VZm1BOk2inR5QHbW4Ccu2XxES\r\n5AiRTJkNrEIhALf9F5yymiqEzo/MaeBdZBLUU60Gv8U4jLnIhZgJ56Fxfhxq\r\nGjSvbW5FGM+LD4COSknViYmBLeiSfNN+U2so5H/CT5ByfA72zkhhKU5MJMfZ\r\nRu3qWy+GqgdX/1NLrn0T3EW0iTKr2697LFtvW+LXpgAzmOSoXspL+oMLx0uv\r\nVCITOwoSaoCL4Gqz4Pxk4GiBEwt2XmxFj3SGn+wEjJmytDf8ZZL2iTFslGNN\r\nqwUH/i4HHssAgFfRTVyVO0woNP6mlpwnO7a93UGFHHwk7/ThB8dTCeL48zMg\r\nN5ojIoLRdfDiWni4y3fCmfA/jvC2SJ6HvJ9uZErasjNzwEaQn75Mbt2gbQ42\r\nTguHbxoqrz+l9Yo/a5ceNNFzOO7a+Po6X90=\r\n=JlSN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2204132005.0_1649925112987_0.056948337406315996"},"_hasShrinkwrap":false},"1.2204142048.0":{"name":"@bentoproject/fit-text","version":"1.2204142048.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204142048.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"32d29a09afd66bca55e024a4f21b1cdf6690cfdb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2204142048.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-Au1J9eotZRk4bdo8awRIk6SYEfJoEz5te0A/oSW54s6q2AIUlJj4IxfN28yvHftvHcsJEh4fW/7iCkWX6S3NRQ==","shasum":"67196480fa519ec2d1ab0e762a9e2605429b8410","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2204142048.0.tgz","fileCount":30,"unpackedSize":296975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFaBuxxu0xBfPlqV4LixeWHGuTLhhgK1VVOiFLvbTcjgAiEAn+UEPWd7a4JI6QBi2CDoCmyOPNp0bv9JOkDXlpbPmSA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWSwsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbpQ/+OET8+gdm9fVRVxMHc7zxaiAOCvMvlg8t8DiP7T3DTdd6LCNj\r\n7gjHUDUPtvaJE3MXZJ1fyiWggWLC3DStHp2C0GRyK/yZ3tWmTY+GSb2g5vaO\r\nM/KtcTC5eGyhK94DaUNcWXCetd+1KENN9dIV+fg4nP12/7gU53hET8WGfNrN\r\nKhenTrgSCmAstpQHuxj9Z5a8Ygw9Evw+dnXhCcDPgJHcacsJQSl6psOcMEBn\r\nPOaDjZkeTa4AyjPLy3zdmoGb3JCTjPC418tG5QmhxufYYoYcU/uF0VZMSJMI\r\nsH1U9pPtX2QjrE9tUD7ud6z6Cg3P1XKq0JQ03zMEsLKOdfHRFNDGXpestkYL\r\nuOfnrZUd/066aEUmQ49Z3LPzVAnSJZqNKuNX7eHrY+7gXdpJ7g9dldtoDL3h\r\n/jJXEUlOmEacq3TGrZXvLKNlh77nx7gJaKiidTNBtHkjQbW8vfFrk/IDlnGi\r\no2M5nTtMhIPNHM95ioQcewl5QrnIGdAsfBqzZ+qkM8ZutHhhGbcSxC/8a+Uq\r\nCJLV2TKtTGzdgvydlZLe0+sN7sS4GLoEHHfXFltFsjgUMcykbnKAFQq2Ot98\r\norltqrTTaUwWOUlNMcqBt8Go5zNuYMlWowN7Ovkiyo6+YJdUIoCG9ZoGNvOu\r\nXX6ieY8ahNXm90ler3tD1Hcq/MypnSQiQJo=\r\n=9KoV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2204142048.0_1650011180298_0.06966223837667118"},"_hasShrinkwrap":false},"1.2204160405.0":{"name":"@bentoproject/fit-text","version":"1.2204160405.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2204160405.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-q3b8sY74y4KEcMYJF+F5d7PVS3zV+GBvhzRYLzn6PmkeMqY4apSTxQPVKzb7hCBG3IvsF/bRhb+bbp7K1zorZA==","shasum":"a6930a3ec9814c9a20ab19bc478ccdf3474ea50a","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2204160405.0.tgz","fileCount":30,"unpackedSize":296975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGwC0FxwqvMJrdzQ/uzGKkaTUSk9/81BC5gZ0KOMP0yoAiEAw21bgirdvVglCX66CMvafEnDNhv4do0rbUc8QeYdKxY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWn0mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3dhAApPBujTZ9MYTZ/Q6kYzoFKBOZVZG6epdEFhv5qKfARZNYM4mr\r\nv4UiVoSV3hqmTumnFKgvRhBkkcusuETNTl3ex+gYxhJe/tnQm4a1Z3lvfk8w\r\nQR7QyvWPWn9CStrSgUWa9wJZYTpVZxm2dE4klwF8yaz4Uh9Hm9yhOR2qyIrG\r\nt0HpglstuhhZLc4ehBiV8OAh5PTJPEKc0BCJPmSLiloeEODrLYlHkG4vwog9\r\n0yarhF3+6NQ21N426Yq1+qtVRsj6j+7Ri4DhTf1Y7drLzAWM/LJq0xtsuU3t\r\nAfRAMCDNR74Coce9bX6Q9Ein5wH1FhQLwsoN5yjjLjtg5yHbvgTAKG9WUiQY\r\nengU1jdm8rri1QI9J07HLaGeKXtg1iqR5LgLzjaCObdqNppOP31NkEuZam11\r\nOhezSiBB1mVEm3bN7zgMOeOO7wRRRnIPKRhpZ/Vc+lu4A4LnjAKlVgAy4dv1\r\n/Zei3YDXf/e2CExXCI7M6K7rLXWQ5NIfAwo5V/OQwMRkm53RW0hI/hk3sLOt\r\nf1kLTS69u+jhJoTuhICGi9e33pwqrwYu1eyGkMpci5LMjzQzbv37noVPj4ge\r\nvmiX/xPL7U1AjY+P0FwRQaDk6HV9yS6YRr7LYF8iup0hP+96R0YakD+Kx/03\r\nkMGw2oF+GxRgLFDvWIOE6U8EdfpAdSYBNUY=\r\n=pRrN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2204160405.0_1650097446502_0.5028657934382947"},"_hasShrinkwrap":false},"1.2204182206.0":{"name":"@bentoproject/fit-text","version":"1.2204182206.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204182206.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"83e7c80d7406923369ada8c1a7a5dc660ebdcad6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2204182206.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-dS+MSa2h9j83LFcybLsITz1VlwtltRtFgdFrF2OtvbXTQSoLrPqVVUgY4e+TmdVftEUDmJq46le2Ww4ftBDCkw==","shasum":"14bbbdc65267c5d7320d5074c7074141b91dbc01","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2204182206.0.tgz","fileCount":31,"unpackedSize":297723,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2wPSNM31Nsp2K4E3PFEuXxlSB8YKxiROtjizzLVVHqAIhAJ5UDtBAlw9CwazFzFHEhKH6vSO8Dfxf0Zbxf+1qqdje"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXnLmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqg4Q//SOhJ1AI2+JfjgJDSgerMuYgH3tjAHsakE4w2bxGRmxQhrkut\r\nuBluYQ1cOTRjaq4WRBhBCVkKwru9wbTxMcXpUKGlv1VCRUFWwHS4WspePtox\r\nxJ6Va1zE6LnMA8UfYGaiQz2jkhT4DJ6tQ3jGbw8pAXrN8mIf05Poz1EbQ9l0\r\nKaceiv0JWV8bXhvn9vY4V7ipuQkKOMyG257Ork73fZEfgkMcL44/dKImaarl\r\nf969pEQeVGCi0wgqsLjmZWLCZIb+VzIHya7u1G0bGqZ0/TQIpKMhAZtXffEL\r\nuMJ6NMLGONBbmJ05hROhzR2pegJECeb1eRYj3iCWjTldbmcw6OLhpWpJaSsq\r\nG4gRcGBDcViFO6HNo+zu1GUaE2KYHi5vPW3PygCZS6JrFEbSjDpYTbffIhBh\r\nNb3Kni6KLtlzvN16sjPaf93IiT2dnPs1rL/ZrIbWwx0ollksIlzQlIu494Ws\r\n66pBX5D6NwoC3iB7fI2BTBw9zAaaaB3te/EINQDWXlNp/NM55+b6dg2Gt9Wm\r\nL2blzBIYMX8AMCmY5XNID4FFjuGyi+HEuIejm4YLI4nhwIrALG0SXmiUeUBH\r\n/8Jn47lcfSZ48k+tyQFKAOCYpdWAY7siutisQg9AGXTuclvu24dAM2O4eMPi\r\nrgStX1QHK22vlvsbHpGUj+qFzhKxNdGrsO0=\r\n=2TOy\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2204182206.0_1650356966237_0.9401781720811351"},"_hasShrinkwrap":false},"1.2204191429.0":{"name":"@bentoproject/fit-text","version":"1.2204191429.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204191429.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"2ef2d96efb4624b0ef0313b60134c9e35a4e8429","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2204191429.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-ez8Iwat+UIW+85RN6wSwRe6exDlkCZZ0FRzqYb/CPgdEH7Qjz+uALEPRemvA+ofr4xgpEgGblFwOurBzCFPvgg==","shasum":"a98a7c707644260c2f632052868c8d4cb55ef83b","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2204191429.0.tgz","fileCount":31,"unpackedSize":297723,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID6oAnJy24JLNwtHOvdOPNuh1VCDgZM4myrleB/pBKm/AiB3wkhwnkrmHxY8ste6R9B8w6/NR1qufcv6+J8QU9bvMQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiX8TRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmondBAAi2RXMNuoohVCVkJpPIAjS6DLOD3AAwSFRR5YkWeDaaRUD5ZC\r\nezgUvcDZImu/gsP+oIsQzpczG8wzEI5kXXuezOlkCwSPMO5p+tOi5ATKc5fK\r\ntvWUjpKuVFAF/VhLPZF+8iTF1uoavSjat0nI4qXmnL6VmnYh6aFxvXQzRJKN\r\nmHxXdzEpvDLJ4oVnCH+IdnwmAqePgAfcki+sVUgKcnBN4rZkhWy3rtIKtIF3\r\nTzjw7zAL1+y7o95hVWYAANvj6uqEMl+qZiCMAyDlrt00Q5NXrftkrbi6L4xJ\r\nKB3A/ZF4A23e2n8aHGhG0WqyBtyOUe3l9FoFatpJYQ0oY8E4w4+XYC8Wsrjz\r\nM4yN5WXyQJcTcq9XqAMtj4ylxn/co0wnbjVNRoT8sCgV0iUsTeYpYQCMCMpP\r\nbhADw2kbccaPBLzcEjM/csNgIXgsE0nXtDrGeofmI14xRM5SB0cqbk6P0iMK\r\nODPCh8t06fWtbCJgQTUIgoWacEIMkCLZDDiDeqBouhJbxtHKOwL5eFNd9wVZ\r\nCKoWMsruymqGBXMvgb0RUW8gnu2ryhUIvKwkje688iXh9X0R8p5dn1IQzLf8\r\nGDImK6UjU3u2fWv70YfgLw5ZW/EkVVZXQWazXHAvNDoO392Y94ZQQYPK1Y6y\r\nZCiGqT9h6ElWx/FnMbaI+X8CTxCg6s6K0cI=\r\n=ObpP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2204191429.0_1650443472861_0.7618682844659623"},"_hasShrinkwrap":false},"1.2204211736.0":{"name":"@bentoproject/fit-text","version":"1.2204211736.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204211736.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"01dad70364e4b2b9707441c2c8ec973e1547b195","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2204211736.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-HOKpiynpeP/k0zgc3EWNJOU6lMx2FJRPHwLTto0DaOMhLHAIg8zVZ6T/81i2L4yphbHuHMbOKcTeQaFElolx/Q==","shasum":"04b3a548fb484b16289951d58e30745891ea06a6","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2204211736.0.tgz","fileCount":31,"unpackedSize":297723,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEjNpY3KA9KO+ro9shEdEPYUZMs47NGUrCkUXgM/pQM1AiEAkgBdG0BkcKdsEwuZuaI6KXM+HUIsEWC1Vz8I/tAAYyQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYmaIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBBA/9GxBeXM86h1Om++xshAutYQGTY4ru5+45+RkmTjeucNrt8FEo\r\nHiJlYakksn5J07Gkrc8N82TMQFfszTK/6vN3nBKjQBHrKm2PZCWh2k9OJx2H\r\no2peYtyTYzYPr2NobH5GhtBMDs6YVNs7yFYNA1SWJ9TSmUCuhtey68ghm6Pm\r\nnL+WeW1Bri9Tba3x9Uy/nsF2P7B0x8ROt5LfatTxhmkQxFN8/m6DT4blFB3/\r\nYjMZCqVYtPwJCPQdUZvemGrfieMcOXnBTUFRpnbXy+4KHdsUFtvd1GYnuXgi\r\nIuYlcti+p6Vff5F726r28kHxW/9z2mgnwQva7FDYSTBeyeHWibFbrjG/IAd+\r\n1oPViakpTNxab/48AALMN8EuVCfXAorGufQTR+fGuYVK3MzxDDLM3RuVCAAT\r\nGtH595vhcMcBETG4TWu/pSTicjofd/5YkMIZnWeA95NcHeDNZsfwAsvFJNTg\r\nNWQE89DPkRm8RDl4nX3LhMv/ZiRliOP9R0G7nAH008GebZHrsSATgSn47YGl\r\ntBbHrjAQCNQ3tYmbVOXycQ7Qyd0/WCepzZE3i4maSfuXiKGStKunh4TPrYbN\r\nN4A0rz8tJkt523xo4w/uxQtBWbnWxFoXM73wk0yr73C3KPbleHXsAKb/9boh\r\nREeFq9ngP06u4I5Wu7FAfT7iJQpWGlA0v28=\r\n=Zs0t\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2204211736.0_1650615944594_0.5484526454681913"},"_hasShrinkwrap":false},"1.2204221712.0":{"name":"@bentoproject/fit-text","version":"1.2204221712.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2204221712.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-fXVxGNVVGx3PIUshd8F2oA6rnCVJFt+ivjOOQPeIjPFVmtbYIqlqXBxMdh8vQw+/jo0qKc4Ecr3UxyczZZTKNg==","shasum":"ec1d96ba9a3fda24fef54917bec8de5983011a40","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2204221712.0.tgz","fileCount":31,"unpackedSize":297723,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnG8nmfJV7BSZSuEjz6ZwOEMPLd05RjHFTlES87V49SQIgT9fsBq2eHASzgi51crEcR0saQ1no/dUZFRAQmo+gd6Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiY7eqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWUxAAoW6SmvLXqq8VnHhUSMDsp5eGQK6SWKIVOeEbqSwu0Wr3jfSl\r\n/pb/AXwAVZvMaqqpTgSM6/oyjzquJ02/tU4OqjjDA8afPVZHaJEkpcD/X16c\r\n234A3VKKYQZGYdSKSEjCrSTV/cxdHZzzwfIxmmC7lv7E1e/ENHTo4WK6wr3F\r\nu1hke27iVPLkX4CBbtgl/UfZcqr2UX23lZfse1DxoxFuudy2/sr7m5l6yshL\r\nsVBvBGmaYOKPCiM44XpHRIeMlUKCp6cweLBhZnFfffZTdhhmyuzCwjJePzLs\r\nnjTpM+QRV4wRg63iJdPa5xDNEKr5C49QrD8ipxIy58NFzoVq6l4nJFj0qfRe\r\nfvyP5rbe6gLmf4NEXc6HcbX5quXw0uYlgr9IyL0ueph+tPK46D6JaxE+5Pgo\r\nwVX7XWcFyPhNfibjM489R3nCD7X3WoZO6qf2r2KZx/nN8VzMwFPbkFUoTrxo\r\nd7r5+YNYJ0QyJiBdG2/KLEo5oGWXUTPdKrl9zltFT2cDBYoosMYlzGuRb5oB\r\nvOymkAZYMvnjzI3opdusT2mG+GPXGTEmnSga6N5Zh19OYsP0oqHHeXaL8hBs\r\nU7Hu/JIRXZGmNmu0zTID+DPCt+TsxyxTCKhXBUnPBuK7qsbQFOUEXCnsidZh\r\ne17eAbefsuKsOeDofL6iQV9qEBA/aLzYx2E=\r\n=RLf+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2204221712.0_1650702249822_0.9285801089275523"},"_hasShrinkwrap":false},"1.2204252045.0":{"name":"@bentoproject/fit-text","version":"1.2204252045.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204252045.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"9dcb73514b52c635b732b72b56561ac680ea344e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2204252045.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-1RjlXSXffGrfAZRuJtbxJD/MjaLpdfvkbS82/aMC3KDHFevaQ0Xt2I/Z+ce7uJS/2FMYGORdMRD2QGGnxg1hgw==","shasum":"f5421dfc4b0bb3062dd42fa55c59363a43ededfb","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2204252045.0.tgz","fileCount":31,"unpackedSize":297723,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGhKuejeqXlb/IRCkpN26uQH1VkwBtWiQsS0cK1FNDbRAiEAi+X5IKZ3bY4A7K6ctYb5EG6zyo60lt68gTSqt3kdAT8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZ63iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSYg//c012A+bysE7e3VCL37XuarJuaGqQFs5LRG+kLypyoNLPofUJ\r\nA6PE8yuvXfnj+SOAC0daj+X7Tzw8TqjWYIfbq3BsctfYWc/6DsM3fmAo8Q04\r\nHIdE2UBz5CAeAJtKBmI2oWKRVQB1rtdLnFpOU5Td1iaTdJjozSqEmGRMRURf\r\nrIIPwPEvlzG8xsBjqVWM0qLn0n5jOqxfTLu049TfIFRRkU9w5Mf1JKXJXuId\r\n6YTz6Cd+glPCGV8mnx71FHFGf/u1fRQ566FynxLSVJo2on2Jxtr0AaCICJBz\r\nnG9jwVTtSt2QvSwHP4BH/cRaQlAvyEmbUKWPla0ZjSYmNI53L0hbWPA1D0KQ\r\n2lUGP22b6PdtaSShVsMmAybpWEydZOSE1hChSikoh+Bn9ehB0boWNHuo4Gnu\r\nuh9fLWmo+uB8oYNUdeqCiMWkK5U4Oal0T+hHsDisByeCoHxc7xbKDLJeHptA\r\nGKdHdID+6ntLdkD0WizAghrEbQrotrPfWQoopKDEk1VUh1tWRAuRrVFYqrCD\r\nc0nhxAEl4mFZyBV7tLtdCFFzFSJ2N0KykYjRBpSGvWuAh1n+lpyGyhxyoqN0\r\n6uTcv2I0baevN+GjHVp/AKkjN1ZEKm+4H0dV1neVhUkNnecg7nY5wr1iI1fv\r\nD4botRfYy/3RY3RVK5SzAKNk9Sp7rHfWAUU=\r\n=JzLt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2204252045.0_1650961890105_0.0006055736889367669"},"_hasShrinkwrap":false},"1.2204272205.0":{"name":"@bentoproject/fit-text","version":"1.2204272205.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204272205.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"c2397d28837191a7d145806840ca6ca9a73823d4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2204272205.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-8F/lBqViCA9Cnpfy3ja7wO1O3pkBtoctrQeS1pAHqpCdcfeWPewEo2qdpgHufEP4sVlvUTUumzYm41SFmhxq/g==","shasum":"f3409bfffde22e3a42d4ad2dd7ce3e9ef6d1c642","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2204272205.0.tgz","fileCount":31,"unpackedSize":297723,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbecBST4q/eW8NPG0O+aYrAP9CXw7BMxb/XfuEBEv4TgIhAORhEgXqNDPV8bUgV60k3chsQay05Iuw1jc6L+mcX21V"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJialDEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqb8A/8Cus5cG2ZbH/m1DJPdxc+GiK9QvhmgPwjhZdUMlotB+nU6kNL\r\nz39SfEPXGl06rlmpERnULLqJAv66duScWZ0PaPiVF4THYRsXv9WLLWasTV3U\r\nmTLIna5isWVbh9+qlBps+vEWp7qgK865oRyXd3yHk9p/+osrIoB+tdvaU5wU\r\n/D4c+2QI+Mv9uErzkGtl4l9HS7FR2s2aca3z4hf5DaPZNRQHWLatEcHFv13E\r\nNihzwWUOJNE/bevdKJawesg8zN4+5kgIP1AUx7j2kj+DvDpqZB55Ax3aysrD\r\nP+PvVCwCemRoDyLojNftg17cVtDIFAF/0UbxjACh+IU/7IiZM84z26jovcdM\r\nBOTKGYmbVsT0HpCqyYlbpRW6BtcUj04h+zqXEnWmeVlDw15dJDaHAMP1Dn+7\r\nZ77jI1ESs1tOtCpF0DL6ED6h+xny0DmB32hXrapUcLJhqZ7EGxOKirc5EEt9\r\nEb3EoGHOkw+i5OMgAnaU+5L5d5H+9Fa+YTMx2D4iYLu2YkUIM6A93SIbe4fG\r\n5NU1DhmJlYts0rVhgP+4PBhi/OQGXp95pPxNPOaK5Sv1dWNlE7gf2/dCw9rQ\r\nODo5DHOflHMj0KxlsXUeKARzRiiGvUZm0YremwQ4KjpUPS5yEB2wOcCcqgKt\r\n/lKUdLTyZ3rodj1V0lO7YTTX9AJrCiLv6gM=\r\n=r04/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2204272205.0_1651134660715_0.7348398548639341"},"_hasShrinkwrap":false},"1.2204281949.0":{"name":"@bentoproject/fit-text","version":"1.2204281949.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204281949.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"8bd4749759e81fea16cc216637d7a185eea3402e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2204281949.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-P5845WflCdVPqAQ9H15KcARQE+y8uUN2LJYLD2B882xjkBNgrYwrB/Ttm+2mvXklmcG3Jcsqa58RhcxI7yuObg==","shasum":"da491eff83d424ee1af7b50e6646ff9905cd8545","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2204281949.0.tgz","fileCount":31,"unpackedSize":297723,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAcm2IiBV58pcvTB10sH3sqnv9TlxAtZbXBPPUwMhs0OAiEAyJHSLaT/nVWGzrdYHiNNBkHuVuq+T5HZEbR8OiQJndk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia6EpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqn6RAAn87TXt9Q+FBCKd704lpLQMsPznop7USbCy04R688C12CsCrs\r\ncgj0m55LRLU3yeydWGdEOqnaXhp4LZQhGD+oN4vVj+a2/lKxZquzP96dnx7K\r\nI4uZMXGmIEMSmVaF2Ar1HyoZtfMkLVBXdiMEiFKbTGX1jFdf6WDgLWtjIZlq\r\naFTRPfw4yPKmIX20f0/WgLosj7Er20K0vU4taErya1FAh0csoKERapck87Fk\r\nZzlmeKncELVtnCI2ZqncmtHOiS0qyNLpYQKx0tIKbMav9MGw2TrJ3BZEqeqi\r\nt5sk5CybM8lLccEHglHMZ/rY8olG2e3a2fHhhevWyuFuZIQAoXVuExTlkkIu\r\nRssPr4VgI5MyhaEuKidoSTvF6GgpznVJnvLfCYQzUqCdb6OEcknx4DrmS6zm\r\nII4Aip0OZvrAOxeTAV3STdOuqThjcTKeOOJR8DaeunHjKEtR/ZMs9jqxTEJH\r\nTiqownNGrTQm39NyXe24qhL7nDtfWX00SE4Fw+APpTTIkBg7ru0xoysmwFEM\r\nTGLewsY2PipVv9XOJYLvYhuImp0SvKFEaeuqc8xY4QaFvBPG9PFG+ybGdsQe\r\nJAIolMQUZMqxKjmXVaADmczkXsKHgDLUjywJ2XD0zkTDyKnL0fy7ifbk7NGj\r\nIaGagpytEKWdl2oPu9u4wYr28nU/X0wi0vg=\r\n=9li8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2204281949.0_1651220777758_0.8126837314162128"},"_hasShrinkwrap":false},"1.2204292129.0":{"name":"@bentoproject/fit-text","version":"1.2204292129.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2204292129.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-52vTY2ErSLjqDzdXQTSrEHUMOopgLiyyesNMFXA4kz5KvCOOIfzLEclhmav7KTbZikovxTwMcKvFwAWFybPN/g==","shasum":"f961d8efb19d74c7a01f48f5f73bdd8b6db75e47","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2204292129.0.tgz","fileCount":31,"unpackedSize":297723,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGjhwdxZAc9jtMH9889UA88gf8QUAOY4SPar8tueiVfNAiA6O5N/XlZY6HYG68ibkhW0aHlC4c6B7zvAn/wkqixoTg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJibPI5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpg7w//YomWSr4iemHhusKi1MMCvDGQ7g57I0OJln5ErhIap+WBhqy5\r\nCBKsV/eZf2Nmw0GGLRN3Vjjcgdoe0uwF+Bz7JjeZksWkM53wGs58J/qegzct\r\nn1pFHFRl1ghoHzXOsJRXHTggNAWw4KaUNtLo9xW3dY8qlPqQQPlyrfWPa5XC\r\nzGCDmlod2JuLdFyn+0RshuHS1ar5v0Gk4UEH+EDoRljsmhFs/qdUECK2jLqw\r\nV8RdqdSAsJISA9RA52VjaP2H3vpoWo5hElXKysNK9dgwIMPDvHGd1uRtO3al\r\nA8VIYot0xL8REQ6656+NlR1F1v74vpmkqBRURIdTHYCRjQ5D0g0FGmFl6Hvc\r\nsYErDKQDRo6EVqTDzXbaYY9sVznY6f0ujldoxicwWgtHkz2gY+nH+UGtBqd5\r\ny7uyn+i+ZoYh+Mt6kjaLFGKNo9ve1TQGdhZvAzf2/K6zKLBu/xikxA2AttZc\r\noO9ud7EYSf15nSVkigGeQwh3Cwvw5iIlOcHGKpKIBG7aHurBU0ooCgLD+8O7\r\n+/Ah59TlWSmPRBaHn+7U6u1zTV19PqP+8XuOM2vD6KtgrJK4xGv3Hs+ouzjk\r\nMBLvluOTyoo+koFDfQ/A3QByNyIUzMZ7wt6ezb7gJOR2yUX7sx90m0KgKJYn\r\nLl3bUn0RVAqBzVNOyuy5RREmgzFmX60OMrQ=\r\n=gd2K\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2204292129.0_1651307065538_0.3436758484477236"},"_hasShrinkwrap":false},"1.2205031420.0":{"name":"@bentoproject/fit-text","version":"1.2205031420.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205031420.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"d3652194dae7f17865db127c7135ec194907b7fb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2205031420.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-lSWTCrCt3nK4FFY6KDb7iNIRNe9lEPrQXOMh0wRPz4Mk3KDbvtFSbB01u1XeMvo5yKrgdHSnB9OTuV0Ao3Vq4g==","shasum":"c6eb6c77e6f4a30d57fd1b857073f68392beb8fd","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2205031420.0.tgz","fileCount":31,"unpackedSize":297723,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3LkgC1QOxGluq67YF3C7bHDveWkzX1ZoHzUWih5DAhQIgH40DgDvVhn5p5FSH/S6SO6HiaTNfk/nS5l6pWJcb9fo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicjifACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr78w//WawDl2w2ElUkDYJIpEvOkuGGTLNU/CIm3Z5m+TFZDnT8uP5X\r\ntQtbahi7BdrQmY3+48KWj4ibPYXcDRfv+UrAv4WdURi+WcFRD6EPVrHiDt0z\r\nZsh9kZLqOafUMXFo47f284K4j1dJav4OifEqeuGDYj8vxTNX25DiwYQWPkJf\r\noruDVlxTWc6iglWi1fYsmMx4rssPoEsJ9SRQGLdHAGhMAUwqdFmWAXIujwug\r\ntZS9yUMHrI4njB5w9pEFAHKYoObq6vkCaqIgMqcyYRxgFd9nM6dq8FAw2I+C\r\nav7BtAxmURd/xobeRszwa2ANQ6nCwpVCAzINKiOmsDWyI1co2MFB4pTCrgjq\r\nQsWMkJoGeYeeKk3Rxnl/7YCKU2U3EUyiBXYAdm+hqwo9QzbS75H+6tO1n4sW\r\no6dbAySprS3YmD1AqpS4JtZTXcvQEbVejWIj9XXm+RgZOasNAc0afy9/o7ZD\r\ntJh1R+R5T5lxqJKctvjjlSDvJHgVpTSiTTHK60KWqTVX9jRTGYIkUD8utjYN\r\nJEdtSiGKgttg/o8QIJGcvDo1aWNmqzrPeGh8I9BkYI65Ez4466JaObpibupn\r\n4FqBGcY+5ikgZbg/mrKuAxDnhNKc2lwu8tCOWRxsvVoIGEuqvzgmSI0KscZT\r\nVZ0P0+zYtMfn1xiLt2HKiCyAUz89mIusQAM=\r\n=FHzi\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2205031420.0_1651652766836_0.8954247097050945"},"_hasShrinkwrap":false},"1.2205041533.0":{"name":"@bentoproject/fit-text","version":"1.2205041533.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205041533.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"8c9c66c7b1ace99b28d77b82807f84e9e8cb305b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2205041533.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-3s75bNcQ65VaWGY7R7yrvpbxkS3q2M3cvlXv5BEM31CRLp2261wXP12VtSUb9yqJJafG2Xkqm30mBCL3hKhUxA==","shasum":"9029fdaa9e59f6e766df7c57a87cdb0022f332b8","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2205041533.0.tgz","fileCount":31,"unpackedSize":297723,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAvoBTo/tXTJQmb0DxlF4UAwSGlrGpsOuwSEilj33KzcAiEAlXs2YKcFLyAUtKgovdljfdwXD6q5IzO54Sng0k7NrYI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic4nzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAqw/+PNND4KrlhKyxkg64Wt8HJL7YvS95elNWkl7X+xDxAxB9j/GD\r\nQ+XDyEcG2mZChJXJ39XTddeNuKcshSpdjzaGuhgbIzyJ1GRBtrLTOj9S/uVt\r\nBlANrdseM74f8L2mPkjxmpCcbcSN0mlevBBfux+KJ3YnEjZN3FStLBt3nM07\r\nF731ZalYmH+TtvUi23hdd9Ka2pMnKwGsrZCo7ag6pb7AKrxEyO3GJ23NNA7o\r\nnf6bc4YM0fqcmG3TT4nZ6fOlcapRkL2a50vwC/FBA785yYtk9Nwc9OzWrJzZ\r\nSm0g+PBPE5yGUEgW2FVxjpi9jqR4AMc1+YwtugAmtlxxGM3ak+BkHUA1crjN\r\nYspE9Z3PYfiDEmkAumBLglQdpjICEXxth/d/6Olz3Vm4fIKUsIDoxUvQnh6F\r\n+tRyubKg+kJikZEojneq/RU69QKlsMpeJjbQSGNMszM+4n3koyxtJS0jZS+B\r\nP3BXKQemasZj5Z4eMs+OsmgIfz26Xqr0XQh9U36LnqHvt+DatBUXv/8zGTnX\r\nejQs9tqWPvS4Y+NILgifdnHj//fxYV+MuGmKhcOS3isonBUgEMBe8vYQzlPN\r\noWRFeJj/XMdSEvpmqFR+Uiy8e+9jheuc6KNKHXk6GFQ0cT7gQpkRTmbTdEZk\r\n3WctL0HoncP8IhO0ANwXPHVAEfNQR5sfUnI=\r\n=k8Gf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2205041533.0_1651739122817_0.007302425735152607"},"_hasShrinkwrap":false},"1.2205051832.0":{"name":"@bentoproject/fit-text","version":"1.2205051832.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2205051832.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-KPvMjmuz0IlP4Z6mtIsJLpZfZHQPzgurFFOv92PEGLNg4XJ8/gFVX/qrTlxVNU5K/IZAm/0puQwh7OrDDN3/Gw==","shasum":"06907d41fba0fbe8aa0c9b4bb7a74c759196dfdd","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2205051832.0.tgz","fileCount":31,"unpackedSize":297723,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAts7PD2MJF26HTodEJvIWHhy0Ivb5008zhJLZ1pWQSRAiBWTKzQjkvfPgLBOPR1TD2vQ3aI+AMbWSi413xlK3C4PA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidNtmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpg8w/+P+o6djc2kUY5obWavm3UxjGkYW0TbeTydiVHUYbWn7u6MSmK\r\ns7e1CKtbPzySkDxa9NumMPb27H8uVKHBqJR3KZCVAZkQ6TPciww23yMfXCuG\r\nfxTnS9ifzogPf+fl8hiuwZJ83eIOzxrNCj1Ji7qx7sTeWKO++fvLgkAZKdbS\r\nDqlyS9bmuA4Zs/Ub+SOOv1jf2QpGSs7jxe5nZXlujO1LFT3RD0Ih566vMfAH\r\nTT3y/KxCj/nKp6GBa1UgvA6UHceg/2elqHSiqXcHk2Sjts8hJnOi2vLywiHY\r\n+1MtIe50MOmL74p6bEagT4Se8EB4s77R1mkQ9e4A1Bn8rS6tVVKoJpySITVC\r\nXceCUHaekcrdeo7XjUxoP8NvU/V5OhhdwA6MSh+rbNJAKAjLACpZV/cBun16\r\n1gfy50srY9KpGB+ow0aZbNOxNzuxXNyjwN5fCAQEEB4b+y1Wj2PZQAR6y1mO\r\nl5YK53tZA1/okZcDKSEAtJsqRGivkF2BPONZKr9sBvF/Hz2HdNMyqd4Oj2z/\r\nzmUFFEUQX0sKg8E7bCj5VK9Qn039NRxd12BmPtEqp5K2QpkCeQB8EI/GFFSv\r\nUEyMZc2h/ke9RX3ON1rdDEHqUo6EJgD2ROTKu3Yp/kklvXoRvPLpXF/Tu6mi\r\nl9MA7mZ/2OC5MokxwhqcjDYADN37cI7eNoQ=\r\n=1jTi\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2205051832.0_1651825510027_0.11412689686424193"},"_hasShrinkwrap":false},"1.2205090810.0":{"name":"@bentoproject/fit-text","version":"1.2205090810.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205090810.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"3fe2ae4108e8ce4355c90640458d13cf81af160c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2205090810.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-oDaJZ9EQgATkoTICaC//zGmDmckGL/Nhe18Oeqwo2UncpHqkcVoKHflDph2aP76yL2xdRt9AB1E5UDz8gIVrtg==","shasum":"ec5b33e2be96bcf4ba61388cf81c915213608ed3","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2205090810.0.tgz","fileCount":31,"unpackedSize":297723,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF+NM3hh589/9GRcz62OeeZalZC621hr98JuqyfCPBwvAiEA34dcd6VHO2s++qZlc+BPhl2aXrq9UGX/PU8l46sAMaE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieiLOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoU9g//bzUkuriC2mbpHLM87+SYwmSAFzQPYCqoK8/sV7sQLIMKAzbP\r\ngpidnwhe3wD4dWe2FbSc9Po9zzG+sdxVX4dZRsblMFZkWmMt4H8y9w8Mo5a8\r\njsH1ibXn81jMqye3TBVzsA7sdjjdZU8b6Suf8uyZu1YTDb5x6YeJeQYJW76t\r\naJxjIMKQy3i+X9rvMs2B7twHUETY2ZAg5hSmSlWxPEWs1hA0qrGQrgmEwKmh\r\nRH7KhRqgAUNfCscAMRck3BuXwbURowQTFtYECe1w8h7Nj9pfsmMpLQBjKR7g\r\nVHGQoI9SdPu94kxHJHCrsW3PdF8cmPF0PDaLTyMQg4BHfPf9HsHEW/k1S5M7\r\noYfzI6gJNRCLNgv+ybop5cFlGF11nQSzGZ3QMXsF11WcqnAyRXUqnoIuOcF8\r\nfAwedwhKTrqainq7879KqbBP6jhqYt8+JH7Fxf2RvLmSZRovRiBkUPKpcpYk\r\nVJS1zea7eHnrIMavYRdoQCqeGgeD3+jyO9XquQG+rl/6kRCqsePsLNY3LnlC\r\nWHEwwDTFlKgjsksfUpDx8NFgJBWMVHxNXHEkeJkRLPG5uQnvKdwGHaM6oA4A\r\nXCBvJ/u7MhncYAAPKxzr5KHDmYEyxUuI+ceTqySUGpFQ/6aeHempB2bGSV6V\r\nihzb4735EETRI2lhQHFg5WNHvkNh1LepoMQ=\r\n=Im0R\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2205090810.0_1652171470502_0.9626465970001259"},"_hasShrinkwrap":false},"1.2205101904.0":{"name":"@bentoproject/fit-text","version":"1.2205101904.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205101904.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"43d879755f765aee2d0eab657533b493a025713f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2205101904.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-AP+iYq4SIkNK5VPXr/vyvKpEZlk6rMfbn+I3zkvdH3Osyjql/drFIj3SQgyYvXabSvaIKVeXmpOuRA/VHwRaOg==","shasum":"ce9c7ad51143eb9c0bf88e7700d355c3ebfcc638","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2205101904.0.tgz","fileCount":31,"unpackedSize":297723,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDwnQtlgPkmSg5O8Ak3zL9Dc30hNqBa8HqBIn54oPK/wIgNUcIc8SbY/N/4KFRO+HcGu+LRpMUB/7nn4qdP8SDaNQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie3RHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoN4A//cCyJ02XlisvUiNTkdVVWyGc7uUKfcKd3WZppmJjos0C7dNpm\r\n3z1pFZtqJ87q/LCiv5n5Txt4T83WuBdaijl/Z2/lWboo4AqjVufe/NIrjYHv\r\neUqbODIF6HogwvtVPcnNTKfWj3Z/GrVGCglBNAnJSPy7aNIfs7DAfR6vVkuc\r\n56gFwWajE5lFOI2y1OKEdPPmEY88lkLSbNHGajfXY5EuNwybdW/lX/ry51yF\r\nzT98LBPNmQEncb2BVzrNJ3LFA9JMzUWxh7QgQQLlByNV+jenkSRRqQp26eEs\r\n0nebCgkGP5KF44cho1uMqDAHzFMrU9GJqUcpyXfFIYTCD6R58wFbkCXpaEJt\r\noOrtLuPahYP7ZSqOu8K2m5XXuNLxHUBsVl1BsYJeZtSS5SHbV0I6FsqU4C8R\r\n0+Xw+bLAPzy4gDg8xHMESubeJO3AeR+Y5XLihmhPjKACCSo5gENkkLpOYh4R\r\nZz4J+NdJKJBKJ6VQGiXodAg8IfNkQZ49eULxIVTXcrb6wR8zZRipwHHE05nl\r\nUllqOMy4r/BAEp7HGGhi3UVkeqWfEaKu/YsxKJKZ2hld0xfGR/W9FtMgo9eY\r\nXWiVMGXtPi3ZGwPHVULB/33i1AtfwMdWgjNYhUiQp+gkspfUXLRpIT6i3iFH\r\nZwmBHNPNCAvHQXrJStAJddNhpy/dA4BLzEg=\r\n=si1P\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2205101904.0_1652257863338_0.6202645279183179"},"_hasShrinkwrap":false},"1.2205120110.0":{"name":"@bentoproject/fit-text","version":"1.2205120110.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205120110.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"46f34860b9f501caf0eda81977d1ae3aef4a947c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2205120110.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-v7BcHFhNb8O8+zya1a3A0nPOQV84bn+KJMNpcbh/Fqjd1U+f5MDvuMfJRPy+glqQCKl3E6wowuaVXYJ7TGGdLQ==","shasum":"759c849ab0f151d59fb60801357296cf52c550ee","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2205120110.0.tgz","fileCount":31,"unpackedSize":297723,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEb2xa0caSKXLqTD4wBLmfISP8P3TbGm8l5LdxPGTgwYAiEA4nyQcARWqfpJkMUWg4XYLOqEEZy06edlBibGLlZDCIs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifMWaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrz3g//bHIWrTOk7dvGKFOUyhORWKQnjO+W/fbdc3Z9/eDX1cprE+IX\r\nhcQzeZHUvQXszpp6qsfrnWmXkZf5qipnE1lhMaGTBM8QudDV7GeYktqOgsuR\r\nadNw684LEKbzPtZeaN2eQhzuMNZaFFRab21j6e4IH+ZcUIUL1PN+3i39MQB0\r\n/D7hT+VmfwV3C+tufWmFw/2rzugesqJ9RWky11piJ01rU4E6+k7YzDKbd4Ar\r\nvgh1E6Q2AVBwSunAftG4zqjb85NtDgBOaMYYPwaFyd+u0XAiOlrO6x4+F5r5\r\n5cU+3azZE9ygWIF8X/g9imUO/i0FQ3k+PO6HcW7DzrTnBVoQ5cKOpq1STXiH\r\nKdENMVcxAhTlA/Wr/km3KW4W+lwV8SeCIT/N2M2D2lOaXXmmjUj1m8VW0sVC\r\nmSE/ydBkR0mwoaVCKJVREbRBlGnRNdDv1R4c6rZM1XSeaV1aR931MtC8xTWu\r\nw141rREjK5WMxetTbJmztgK4gmCCQm3sEzGWLmu/Q2VbFl54UUa5njXkVbKO\r\nzAfuZAnn7XYluEPoS8h3s69kz7GHy87XpV+1a4jLsnsRoyYOkxiIAX2ATU1u\r\nUtw28sfY2IvbykX7mIr9A1s5qj5RihwMbMCGgEUPoJoR1/VU+olnxwXXzaDQ\r\neeOAZn7ulsVtByGv1rEO/fst8b0chEuYlqY=\r\n=FBvl\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2205120110.0_1652344218165_0.0737588431161178"},"_hasShrinkwrap":false},"1.2205161914.0":{"name":"@bentoproject/fit-text","version":"1.2205161914.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205161914.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"2fb4e151488ba4d856b33f836151d66b45ca457e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2205161914.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-bBYia/pgaOmc30mn+af1wzq28cjYxdn/3p+BMfegUt78ASZBCWJzF6+53rX4smH60D1aW2W64pye/ng+HVnJJA==","shasum":"798dd6ca3278f38cb9d8db38e68f013b6b39152a","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2205161914.0.tgz","fileCount":31,"unpackedSize":297723,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdUjq7gt5D2RHM31psgPNvRMj+3ZZbhoaliL9aoP6ZKQIgelOnv8Et8EGxYSMlzELsXXX9FDg5rivu6Pa+Fqqpg3s="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig1vyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrT+w/+MWGxiIXFktcZYLbCn6ONr50X0MsHkgLQM1yXYuSJRrcKNUiv\r\naasB5JcZ0LTtinQSPH9XHjRiA5QB6qHq9R0+KqFbeGoSdlBpbuL30VQCdfoa\r\nD0yrbSKPVsTkjQ3NZbHGRaWljehMPVj9hKNPPVRXoDOVwZsl9od1WJYlVstk\r\nTx5aBq1dCkrOYL8LhAcyw9kbR0s7lXQt8Aun8Clhdtg9ot08th1i4J1L2Oem\r\neFtKv+44lB1mkPhvkts/rUYDr1yzU8JLm1P9++zBSlcZWZbBm/vYs/dL7Bxz\r\nfgNOM6lziX/K5cPpgWV2FscpnkpMJFhe7WIIH5dE3+jg7fI/1rpoSvgY/xfY\r\nqmnL93E0+rmMTPbpnTrl4yLqOjOdumcCshox6NvvAbt3qopSiX68HdoYwDGW\r\nJWDVmkoO3qSgdhxtlGhCZ978EJwGsYH4UGTfLIL4tPFZHj62Xxcg2M/bMISF\r\nJMR2k76ZLURtkUmTO1gakWYjG9evopIcGKd5ZyRU/eiB4QNTjDJ/n6rO2C9m\r\nhBnNozFfYTkZLuXlr9GMyIXXRMOaRo5bkhAlYCYnvwzJWAyRNEqVmUOk0DXe\r\nw3m9+jox3QY+VU+Xk9oc3RCzX+eg52fyJgeEbmRrDMCkdUoz2akxZqXZkkad\r\nJmablGCXP/bMmFD5dZaXv4AGVj8S9RsU6d0=\r\n=A2pa\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2205161914.0_1652775922377_0.4190720603124243"},"_hasShrinkwrap":false},"1.2205181800.0":{"name":"@bentoproject/fit-text","version":"1.2205181800.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205181800.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"fb3f61c46e2221f0f2e1dd836127cce386c7bbda","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2205181800.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-UxnZF1lMKAxgK7g5ySN3VHvHaa8gBHiKs6nqLMJguH6UbVLW3F0EMlnpRUTH9HhKW57RcsRDTEdtsEnSDjcjEg==","shasum":"fd829db8d0aaf931a243e3b2d1bfcd6bd04f45aa","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2205181800.0.tgz","fileCount":31,"unpackedSize":297723,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHR1YrcB7rcUXvdQ+1cg2jx/HvzCJvYRFy7MTKxywu+rAiBMnkbBw2FtjHQt3CcyyDFxHRQzCj/r089FDxLeyHw5fA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihf8QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQIQ/+NAOHHROHTotK3pLQ2xeKZgG0QJRp2PG/k9tcktVDq6lUY5eN\r\nwqvFnrknOcz2SQaGby8Ly2NP/l7OflF6hXIgg2huOHPrN0KxzjbLk+tuS9xC\r\njXf/3AQN3pmi3odmLQa4Slgq5X6DJ+V91vZKAOgJM+sLGwCI6AJ+YHdjFid/\r\nuEgr5nHCTuU9LLgYG+LSrz7iADNF1h4Q7WdxhJ1JuIJs8UVKtqpNpIS8qPTN\r\nl0YEw/b5z+Hfqvjtzmk0odY8GlQWfqAPQyivhobKH0EYu55PcS9Y3NTuPNaZ\r\nP1khGuXP8aENZtqF3s+u/zOCewF9hTOHgQUpF0nmArQXzmjjB1agIw+X9PNk\r\n0obz8N/31PfMlgJrVBjwIVky4Nb+7MrfGGxqoMYl0eMSkGOnK+5HHACF6Con\r\nxJF8dhneUPvD0cVREOnD5r9somw2e2Oo4uVGxX1yLcTYWlQiY+g0jxvOz7Wl\r\nfaFfZYmZi7o6Wi4LgEe3Xe1bdLXZh7XJLSls2T2gdrOXWLFzmYHSzSnW31Es\r\nuwmKkSQ+baMwAElXYRnfuhLcSZHvky3y4KuDIMRW9S+41OA1vtUo33oP+rsK\r\nQ2jTdJENfeKRVzGp5edHkEQHDH4JgL4kQqu2zpMwh6nv8qSFH3ZWnfZbO8NI\r\nG6E02QQeg6lp5EdSws1VKUNSmzuihibiSzU=\r\n=M6zx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2205181800.0_1652948752111_0.9371258419813835"},"_hasShrinkwrap":false},"1.2205191749.0":{"name":"@bentoproject/fit-text","version":"1.2205191749.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205191749.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"83c369066eb9c7dfccb12aea936f29a84bad30fc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2205191749.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-Pb1fljLWbFlvUeN2X2q5CJoiQWreUXiTlBWzM+nLt7VPfJTkPNBIQKZu+g6LTmdsCwX3U+Um4C5e2ab2uk4Eog==","shasum":"35ffec21b1c81091749eb4ac4584b7a039527796","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2205191749.0.tgz","fileCount":31,"unpackedSize":297723,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5tO8JxRoW8AUPTsf7EHZ8Kk2Jz2MDsxECV9yqYlgMfAIhAMa+ddtXQLr8GBbVADTIm/zGnRE6j3x0P+fFuVhNk+N1"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih1CuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+HhAAgn1rYlaktVqzXNmT3WSpHtUuMXWnKOiLuPRwZmMtkH3oAj18\r\nSQbVQjLWgor9RTyxE0AdPRUCmYnmvMDiQMg9FBtfeKo6dndeR392O3QYlK12\r\nC1gQOPV/iQZfp27+aDRPFetc2Zj7uq7/ppRGzDf/OBi1yMs4PQH0IPKknQ5K\r\nH64yqrhC2acaXgg5EYYq6yBdKmGF7O2EWTU6wRZRRfhKmxu5914ldfw1KOYF\r\nxAa/jHLLucj1dNlCXzwO3rH4Umm5AI2DsA5Wysgiydlk5hICpZaC4g/c63y9\r\n2iZpo0gEcvZMzbSeqVAS+L8tqHoi101TUVi/R49RVcIufPLJ5XVY87ZU+1gQ\r\njq3u995GKTt/6Xeh6EcF9b8eKDJrqDNc4cD0e14sVZgJ1zYS9fTVdNLzdiZw\r\nN1eDjdBJMbmbzyKmzE/bdOcZC+78aqb0lwzwTth4fTYf3ErAzzFphjdA1iaq\r\ns4LP1SYPggHZde5M+S6JnqO1KfhTuH8UjhgozBIHKwlibOtLuzryJRlbaz9r\r\n8F3eWQGlx2kVKE8NJbvx5vxBdX0/hYaAB/3mVe8dvXV3GPX57dWGvR+FwEax\r\ngFFatk909eRVj+dUeUHtiVxsh6bOe4l5Py+3ly93BIofyfmJG9OoRZ/lsO9G\r\nzBNlkzpT525E+LrN/sNIvNCnokVjXmCE4jM=\r\n=7cDP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2205191749.0_1653035182685_0.25457937648509876"},"_hasShrinkwrap":false},"1.2205232225.0":{"name":"@bentoproject/fit-text","version":"1.2205232225.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205232225.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"ed0c674bfc87fac47bc1360a13f5d69611a1228f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2205232225.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-fmWA0ApJLii/CUYhbTKgsozGkSQ92Z/vVijP6z/5vH0BiglYq02cmbaH+lSb7qi9KUicHVdJ99o7GYYsfO+XjA==","shasum":"0a3c83dd5c612eadd152ae80b6d981e1ddbdd2a0","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2205232225.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/BXjGk+XUXUBQLKGnnpTcXfAvUvbra7Ay5Ox6eVkRwAIhAI7ata9gd1AOZal+WzwG/6H5nG5zKzP+zs6WVU7Nhs3K"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijJZ/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqqQ//eqtpNLA+ZxTmSL/hseCPZmwDxAPjrxlO2+FSc8et5wQsfR8m\r\nsBy6u5lVUdT5dsgFyDeIJJhydlIg3DeUv5MwSjH1zIlxqeR3WHR3c3hBUkbo\r\nUrX7/9fcNpbo5dJdF+ZLVo7VqjnYifxFTy6iCNjheIBwY4iJXYFra7f49pQQ\r\nDV04ZhM34NCqJVTRNUoG4u/cToIbtGGAo0uLNl9cllYSp2KArUWCVqdNn9ci\r\n+2qYi362DDxC6GDIEZRLd7KR5RROhTkt3wAoGwngcbf/2urhNurT1fz0ZNEm\r\nC36mOe0e7d3UVIoUXtx0oSZO+3Y82Ffc/yZj4aHAEUgFTjt9AKfwPB5xs1u+\r\nK0lcHpd4bkGvtcOzYZr85qLbt4uvA19oEhCCabgs2+ezDyZkww+cpmW3za7Q\r\nwlbjWakbjnPzt+IG2o/BcJAuQCu51w9VxGm/CIoeXB78fZnBS9rLxA4UlWAK\r\n8rCZWEA0AndYqVYOqgiwXy0tEResT+UETlP2790yv4NblPS9Jkoo8fG5In1Y\r\nFoHfxBWN2+ZCI6mF6/x1eGoDeq5CcpSD3AQQSfaILnEKE2HJrAkNLC42h82q\r\nj1wHn7RXrmSq716Vj8qAscSZinZrsk5qvleb5zWyR006zZ7mULBe4t6oYyvG\r\nlKZy5WFqvr1U2/UbxZvaPTp1JM6Tg9m4Q9Y=\r\n=oYth\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2205232225.0_1653380735638_0.788214605019115"},"_hasShrinkwrap":false},"1.2205120110.1":{"name":"@bentoproject/fit-text","version":"1.2205120110.1","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2205120110.1","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-UPPqgk2cEa/fJ/RGzdB4ta8ycq6A83RngWWIyul51/odRMoTykAB85Ggzny7FYyJZbPtRFvi+z3DI9tf8K2vuQ==","shasum":"e9de205d0921207f9b897e0a7536123dc00fef17","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2205120110.1.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCs7YhA6RhCMjwbPpaJX73vWGR6Si5SV5dfriI4LeEWoQIgBRs76/IoOlwrArFliiSK5Ix10ENd5kkWQq+ocKAPcI0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijS38ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEjA/+KkLlfuJrre0EIRWtzGHRPPiwAWP5u4uP+n6SYwXpPexRw0j4\r\n4QBwbg6DTT6WkXRGzTS+3/FuG7ywZAUsiZ/bKiQwr0zk2YEK4a3kz8neQdrE\r\nRB4vrWwjAfYLLbvYGzRYlwIQXEVSO8eLeAHopL0o0Beqda13ZkKppiXIXDrg\r\n7lct/NzZcUMiG/pEaKJN0JLN7H9f36sF2sqG2Ef0bew9hYwmA1W5O1ZYMxZd\r\n6Q+1shWjfe96B+hOzKcuAX5lRQLluTzXykt6dJ10R4Vf+AevI9UlaOQgIsOA\r\n+sQjNrBGcNYxKzP3GMF7aBzzXDwF9fzkyR3tT0344t+QNeqRIAZsiXcgc+7i\r\nmq41VOl40qYQsvWx4veH9fvSLN7GbOAy31lqQFV0pfS/RhltzXw3cHa+gB1G\r\nLp8H5CFMZ46hpQVxxvyxEvtWcYDgIuofMwTeu+bk1jdzqPtE6jM2QshpXQWV\r\n85cz68r2Wznyigvy/REVL/gyWfz7JTpPtX3RJC3HQMXUoVY2nqqvx8PxWKKC\r\nat++d/yzQmGp9fKXFCGmVEq0la5JgOx/VCpv/dEcWmBzVUrhrqay3PQ2cvNu\r\nNTcYIveXe6XhuyGFOP7ErsFUiwF1lJISS94/qKh0C7AajSMDb2cymQ7TLGh1\r\nIGc0dpthe+oFYyafm0T9wBdFbsvP2K8Aswg=\r\n=EOms\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2205120110.1_1653419516048_0.3760077127695993"},"_hasShrinkwrap":false},"1.2205251942.0":{"name":"@bentoproject/fit-text","version":"1.2205251942.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205251942.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"e2f9546e2689785f0d9b4ba72e61759323c45bef","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2205251942.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-Wx7pcLbFGnRwRrnddu6hKsj83+FSZ3ABEabFIYmGu7yAg0Gkn+EPlX4n+i98x+uC2ShT0zjeu/KkiPiCZ6f9nQ==","shasum":"96519645dd08cbc28fbf3d21fe9044ca430c0fc5","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2205251942.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOedHKQ368u5BAgv9ULNLmWcCcLDHYYdc2qAIEoCqxigIhALpRaWddqkPNhsYp4avOuoLTAD+Rl3tLzUpVxRsGPCZR"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijzmmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkUA/8CwdifQfwWQqdJ95NWCFn45AHyK817axEHwQQBSmOwUQcEuRf\r\nnjXS6kyiZG5vnusW1CqC3SAo7RqCQNlXUl/Mg524r0rvMUARWkFa1OqavmYv\r\n6rDmNjpFCqWfFuQO6vJiMrjiF4J7Y7g6WpSYzQi+N5Y7jtwbW6l+P2fCbHMW\r\nmoUsXEcbe9Bh0DIMXxoo2xwM01VUHWAg9QEIcGomZd3gg0NiafM85XbivXPR\r\nS47ClCKL1DkVIGYL7iNKMjT/Fjg8BVHYz37xb24Okudt0Xv/PYcw0WgDNwhb\r\nKDtTL/owFp1YmqgeHagphLHznW6WmHwHqMB5eAuPuQ2Kv90yEEn7pnI7KBWW\r\nr1QUDyUfmnv7u3fXJR6X9Rp0aXvXXCXwhl5JrP6IOuC38TTtQ6g3aysssWrU\r\nE80E3Ygn+J2UF76mWkhg0nr9TB2/GIe2hNUtbVeLMx/TYIudKQSR+IxUfy8c\r\nwYH9OjjxQov6wsygL6azccvORR9kFi9ncH5NTSFklU4EWP7t6CSy4LJ8I7KC\r\nt7BesjK4X+eIZ6FAz5wHhnj50X152Pbhz5N3Y6NpD3eN8koL5lfncjCocP2u\r\nn+1MxkaqPmE6FzqbpxMoTkUqXcu6nb0CQYiBk3nW1iIXNY7eNCkEQKP1LU97\r\nzGotlUhlrXaHssibGZQNtUNVvExgVOoO5z0=\r\n=lzy+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2205251942.0_1653553574663_0.9696094046631889"},"_hasShrinkwrap":false},"1.2205270638.0":{"name":"@bentoproject/fit-text","version":"1.2205270638.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2205270638.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-7t1H0ZduLEcV+2Vnwlw3tZeUncoykOUuHbW+tytCODP8D/fog91fNhHecqNHQupikI6B8iyIb9Du1fPeGH4LoQ==","shasum":"23af2afb17418ee8b2779c769249abbe27a535fe","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2205270638.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEl2zgr9N9voEhkyXkk9CPeG3TS0L6cH5PYTF0vrQBE9AiAXrhttZEJPjw5r9xdxPwvJGCTUpiZge/1fO5sKsTayDA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJikIr7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpr5g//RnTs/5AIzuCexjn733iaegk6CvuHcWnxNjNBb4mCHGRuu6PG\r\nvgICIoLvHmWK4MAE3J2Mv2mJ9ai5IYBZZvisPQjhe8P71FVb8xjKH2sWE/G4\r\ncio2tgyAqFIJQlVZaPWqhAEzpYYrd7HabodDF4NZl+W4xUeMCeP4IRwixyoQ\r\n6SyxnaJnhvhXrvSQBNmqVCjmgE6kkEl0PPrbnNw27wVeqC1TexJnruiX2ffL\r\n8JjtskAcZsCNSABkGgBrNw40wuB5HWpzJuQSnpMDW8Ji/TSzeX133Wx0dnth\r\nqRhwvyF/cHJA9dXr1zth8pKrCt/Aedf1n5k+oWvcuRBRtAVaQAFcGAPidv+g\r\nHc21juZhJMS1OP0Zb83Pr6VO2jVY2DrGMyuUMzPnSvFW0hOS3klCr9C736nH\r\n13QhCFt1Zzo3BOiZTqljGW7DTTWnOklygnCKat+LG/9Jj5Dt6wV5i5D8vI+N\r\np20TmsDj8hh1O0MldAl3fpkj4rjlOO7GvIXq6Hryg+6CtL3ELENLWrnnJMLZ\r\n2IMbWtr51Zff/dde/Y/CJ1r3DVaVZZvuSE979LuKPa3FuSUUxPyDZXzObe6r\r\noN4f2yO56yCGocUVC/tZ2EyDzawcS5+S1ufW/3o/fZiFhnBCsTWLTDUxTkHv\r\nRi17wRVh1gEWFN/C4VKTTRoj93KBPVkuC3I=\r\n=kCzH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2205270638.0_1653639930854_0.09641670640847777"},"_hasShrinkwrap":false},"1.2206071918.0":{"name":"@bentoproject/fit-text","version":"1.2206071918.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206071918.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"f200c815cb7bd0e1495bd9c338425aed1887a459","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2206071918.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-ZI2mZA01lz8YjxjrxCXfpZoJgKE4L5B7mhW9gZUV7EtWp92wFaY5/XT/sYhdDyZNecpW8/5WwENH2qIIA4Xg9g==","shasum":"6e9acdf2b3dbcf5bad7c7cbbf33569f8acf6cbe0","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2206071918.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBXOH1GdzlqcJ3wMbxpiPpD9tB1p6M9QIEY+TgCXVx91AiB5fYxU+J1vqXlWkOSZDPrK2AadaS/QQ8o/evT85TPMZQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin9CQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOxw//TEu6H3TfWRcblMFZJVorhMeWzHcad+2tZx3FZwMTFFU1a9od\r\nCpJ4azxHqC0Si075jSij2o3ellwnwKRKrjaNUmko8IqfwQzTaqAWPgam29a7\r\nYBmncafSnpn5dXEZDJJHWLRqO31+lNLDtLnhWbYiTXmQ28zWFnTTYtIyEzc0\r\n/lGm138BP/JL+cr1xA/83ivblrfE69a0pPPDH9f7rgbOr3pqZUUol4nZaXN/\r\nU9hUkMrLnIjGDHWoHLbhPUy5ljhi/k4yDNYWSQ3q+CqxPGHFJFYm/AsRKSpn\r\nErZ1t59MN3AayAsLgN26qZ+Qi5DIZVOGb5MuGFjGI5MXKBbefJvSFCEK7Yc2\r\np+8O9O0+9bP47W5fMEo1pSbkdq98XPvtUq2ExTfW7Mw9zjCh9mNXHoioHi44\r\ny2KwHj5jUOQyOLLTTpPVGGI+1Ny25iFMI2Mop0idVzg9K+BJxSl2Wp5z3hmt\r\nUs6m+iIg+tuYI7MBnrSTIbxkZ0vE/7MCUnFRdrUxFXwVk8i5S3fm6AmaspOR\r\nBez75hw77XqR38Emya2me3bcepHNn6o8z2APsmt5F8HKJ+WqNEBX7268L+7s\r\nSICrjY3z8cgR8TW0edSStYfu1hUO3tUxba0ZJvqNpwZCUVeHVAvoL/41bn9L\r\nwXvwO6lHqq3qy5zPgbJZqxlzODY64koOAYw=\r\n=TS1n\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2206071918.0_1654640783905_0.5762333093715888"},"_hasShrinkwrap":false},"1.2206072228.0":{"name":"@bentoproject/fit-text","version":"1.2206072228.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206072228.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"9cfa89fc95b4eedfeb00b4eec539909f0b0c0f6e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2206072228.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-tkVXimng5+RAtw/vEDfUG4jMNxCxvdl3A/O/E1CTqcuR7eCGMahEWv1GDcN+PMxQ3yEDFA1BlRDo+BtSaHGotg==","shasum":"00ab794ac09e91926df52698f9a7caf8977caa48","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2206072228.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIc4jcvfQLAUccnU/EjTo2TDsfUnxfy6A0vpafXknTTgIgNipl/0srfXULVHURj/psWYnhE8OVkTY9fMJ4jhN/b6w="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioF0LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2EA/+NQwH+AcPzdJ8N7fntO5wsrnURz+ninGeKzDpkvss2RZC7cWN\r\nZkoIN6wQHQCgOA8kle35gwL42YNmL8uHPkU6qphqa+i0sY87NC7GGyTOAJ8q\r\nf6GF3gpANj/DIzZC5wUtKF9K2H8yVR/k7OcBQnTMl+PVQ+0pPc4hw8gTECe7\r\nRuVreJRO+fDgyHppODpoQxaovTl7SnTYqcLTthrvdN+QrPWQte9MfZKlRtOG\r\nZ/DZeNEOxu30Ot1sRaEDObpBT19RdEkM5hj/y05boRSLfIf9I38LQmBhwN24\r\nIqurSEKIt0TJPgT8bm/Tl0ID+7/DhViKa5MHQOmRngfSg5iFdefIpiI+V3fj\r\n27Y6CotdbNE/sYJvLKz3OWeEf1CnMmshMMebKmvf30DMvcIY9lS+mq0aCGGs\r\nqUckxkEfYM8VEX6ltm9e5zOmClG8jicsymbD6YbM/agyLzcoe1vYd8agBzS+\r\nF3XEqqO5VkU5ChjWSf0mHWNiL8ijKyuRErZBPcD8VY0WPy/dG+KPud6RWr2e\r\nRoMQxp5UD209CUn1JTC2bQpc/TJI2edAJi9ZQ89JDiBHWjP87EgHKBjarhqp\r\nlQJw2Icc6GYHuZaGhNNwzz30ds1L4joRFZZjCJUHvKPvE5GKeesQJC6DLqPT\r\nShwBo8UPBSkJ8wWGyJfNscbYoI0bCB0QrJ0=\r\n=fUC8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2206072228.0_1654676747392_0.4220812053103047"},"_hasShrinkwrap":false},"1.2206082301.0":{"name":"@bentoproject/fit-text","version":"1.2206082301.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206082301.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"32e83d3790f33da4840247d996ed3f6b256a796d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2206082301.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-tLBHB/rmAR7/l061hDrdEnBC+Oi81kLESOBlYx+dhOmunM12CS/7aRIqrMHmwUbYmZZ81bOxwKL1iNjz5uw4Mg==","shasum":"de4ae8ac9c717030f2b12cde301b44ee1e19cc58","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2206082301.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFGkWmWRVfvSUB0ymqbgneG2I4qSDxngs+Dd92I2m6uiAiBA5467UOSh6E86Z/WsY6WMEDiyfVzS+IDaVnud2ZW3cQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioa92ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrsag/8DVQ3HltEklSO4swN/LpGOVymJEds+jV/hmhg0nyr2cLpqLYk\r\nv/LcRcQ7CrRyNTXZEVLN3SLzDCnl6hQWY/Ta75eRqUNR9m9PYU21+Hp7rO4t\r\noL/Pk7QMkQq9+b8bq38huGz68+DqY6aNc1GxD/q5BFO/MsW6a5H65yHIh1Co\r\n5epuKrL4uhHUN2HvEpvyEkwMn9EVxGKC8Rx9UOHxCzkDV+icVpGnQc+TqGg5\r\nUX8PhQIXIujNxhW3inDx/vVe5EUzM6YDwgrDHj7fOOAW4ImjR+aeTI7sJ4Sf\r\nIcn63JX6Uwhp7UFArNQB0MkGJil4psnOqkrzG8gObRMgxsy45dOdIJPOAZdU\r\nMshv85SvkUiHcaapoFP+y/DRToXgNZKb1Q9kKNSlYJxhuPQkLVY5XpgAFXDf\r\nSgBlh8817iSxw0W5Hi3SGIVamdZsStaZZnGuS2wttUGAzIFiuWUdKP5gSkwQ\r\nQ8z+tgCCxWfefN+CkAwdfqWN570TUs92BQ8B7tVJWq7TBbanfOqTG0dQbjSJ\r\n3X0VASvlQc2uozEGHIrJFgSnJxHCDvmu6/NMxVtN/qxrDXiGbvJeCiqumXcX\r\nNJKZpPpXeJwUQCIn2gVMo4o4mKQn8dCkcf+MSv5Ck1ZR6eW5AnEIK7TXQK4e\r\ncqXQo94HssWnOKy/JlgbYOK2d1cQKBmnXXc=\r\n=ITmQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2206082301.0_1654763382627_0.0003626909162677272"},"_hasShrinkwrap":false},"1.2205270638.4":{"name":"@bentoproject/fit-text","version":"1.2205270638.4","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2205270638.4","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-hlqJ5iydzIL0P/9NsUfcIOjdbGdFIJZZNubLQdshJ3bAtQdmD3l87MKEcGK8o5NVnKOfI4+iu2CBa6KnYaWHWg==","shasum":"e2e87d8581cc6a820f8d5b185191f656a4a93ae8","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2205270638.4.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD86WbtjWTFBkDki3Swqm/RJBd06xFw2RqyBV2/wc3KhQIhAJxIo8/42bb0cv2YSxta4FGpIJHmcWbpOWhAT8tehoII"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJio7i8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrb/w//e7vLLMfvOPlzaMUNedz/MKiidZAzFvPQQZKvP/S84a9U+N/j\r\nBkih8iiMJTfbtkQwTN2s7UosZb78gGzV7FHECKqk9O88W1tYJCM6wZStXF9Z\r\nGOQjQl8un3YyHHWEOZe6ixn/IWk8Xwt/h7fyrQ/sXIT5iIQ6QhShImpwQk6W\r\nBK7AjJ8MaAbHtvOztgt2e9HIlfUsLVWtmSbgS/v92vCF1dEiQx3Ha6+L+xnS\r\nAF7ak6a8yQzAdKmCEPXV5pJemu2riqagoHFxfv1ghqpKVFzasCT15HbHMF1I\r\nLAmdKMspVqtmMwi37sI8MVTMO5Sxpk/b+Q70KBrhPcnvZwqlq45JpokOkv7K\r\n8gCl50zqXGbrGSZRIdRbNZchD0gyvj6C3grp75hKHLq3Jf1b+v90wkRhmKs5\r\nXFqu7nmzTS8RJahNio9yKd4GAvSSuqPDVLIFCfNZt9miYNtqYX8WEgf5usBR\r\nJ9SvYnu1tcbylftDQuoxE8kSDh+HS0rVFOMCtpLWaWW2LzXEIDeHZkEK+nGz\r\nKsEh13RyHBVPYdCqVdIOq3RClA/qWQGC21TTg0gDrgNUmoIyxheC14FE+s6d\r\nqpdc+TFkvXZa0cZLqBNmqnoHrnxpumtuL+zwFb21j0xDad3mkqrpWNv0Ji3l\r\nHOkTSCJoDrtmR8qcpm5xJMNIPAOjGF9rdQY=\r\n=0qHR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2205270638.4_1654896827759_0.4899032688430416"},"_hasShrinkwrap":false},"1.2206101637.0":{"name":"@bentoproject/fit-text","version":"1.2206101637.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2206101637.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-T9i2YOv/xpkM04nYsR8DE2hH6r05F4M5aWHr1zocL0ZG/JAZwzckQvUOlCBKF7pqzFeU3mXlRonxFigeOIO4Iw==","shasum":"63621ffd629972a71ff0ebfb7c0468ff7349fe9e","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2206101637.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIASVmZiAmY+1YQz/PFxic+YcZCOhzQ53ZBt+Q993Th84AiEA8R0f7ICwew+JnGoaALtEp5xTGfkym7w8OlYg8At8Zhg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJipFFzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMVA//ZKoXn2KYRCvuMHlk7zKAOTiloQs84+oGC7K/b9R0nV+549SR\r\n61kB+//388iY9YBDxjcfNKpZI6I+FNQdIpKPKNZtzYDnY04hfny96XC2TjbY\r\n7sHeXaGMLZTfXZ1oS8b4o+D6AlCkIDG5zF1+rxzjwqFPNexD0iHO4srZUtkp\r\njO+8wNTQDob0Zat+Kujb6PgPGH4duZSKSu5fzjHvUu3G7LYGTSlY3/kfdw3S\r\nCNnSaepPMNgeYtuEfKJ6GsWINQ+xnVUO4IxSbtYJfBC8Fxkjasso6T0nnnVO\r\nNXvV3Zr5Rv5vxT2tJJ7vOJQirn2toiOk2RoLOt7IlzGDsANdH/7Let8RcRSi\r\n5c8FyQ4uua7g1lomGFxA0bEvTKWrRhgUDqyITqnXZX3zzKoyoZlWpBMqSmhX\r\n/8Xs+uM+RCsyPDuJeKoaYOCQ6xgZ592Of2+ka1iu2QaUZhX/fYw93nQdaZ62\r\n2rmG/hTyJzKymGllgm/XkoPw4Pwot+HKywLMR1LdPc37Dz4AYRx/dAsqdFKr\r\nku8khz350Xq8bXIi/bCrkKX53MpPJMLvxO/kAqX260Nv/RQTstXguqedWVDH\r\nKds5ZsAk+ss5tDQ8If+Xdc6PEpbuX6gzQF3uhnHKcPpKH4yDi17WsxHLI9ZA\r\ndFqfxoKbB3G7wiyQB54djXqETTrwM41oTTA=\r\n=06zH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2206101637.0_1654935923744_0.9086452563363427"},"_hasShrinkwrap":false},"1.2206131450.0":{"name":"@bentoproject/fit-text","version":"1.2206131450.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206131450.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"f8fbcf58e78ea43df73b529ed4a25e79ac758981","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2206131450.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-Unr/3WR7sOMAtB58vYaUYj6ZRx5FLFwz8TNxJ8t9NfjtJKpMUufTo4RxF9hPUlq98KeWpVKDmdZNP9PfRNi5RQ==","shasum":"3f08931a3f14da38b496d9ae0f4842ef64bbd859","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2206131450.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIERWhtCGthdj/3DF6Ez75dfLmADlrNlidalV3VQkRlkqAiEA4ryaDjLjzk7op2XefcFQnvirow9iDd+hlGzIaTZH9VM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqEZQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdQBAAiG6P/fVy0otrBXW6R1eG8+RpnYro/ou2pPc5gPy9D4roNKFt\r\n+NNrIYncqL8SU9Sk8ISI/BknkLqPmsqCxbESUxGQbJgznqQIVMGsIWy0/ExX\r\nlCGx7aZN/qBJFFoTS9Fskr7jtMIBsL7XtNKrwZxlbMQbW6zrfx7qjFqoHZzt\r\n8z0/XcXuIqrcdZXHAcRb7Pe00Y1pPfjNe16XFRc/APqmIG9Xs6dUHrXjzdRj\r\nER2ED8Ceq/TU2Q1RnqDV3BVPZ+kNGmGYJZoe8+YF4SVrvH4RVFkAEgtdqT91\r\nm+Y+FlL6Ltw6ttoK9N0ISzgHwgRc5+y7skFAVpL6jr7WUhKF/hWK0MUOamkE\r\n4Pu5m9Nd1vVJLcXGv14536ekNILW4SN+GK28/BHwlk5yjbxft7YGFnRBnlxe\r\nX/FnifdGXY5GH2wTBCmdjhJY4rQnPMQC36NiZNMe98dK5LUSYfeJXkK2uFlU\r\nPC3WoZBEi04W6aysGUECW5ODF0poj9qP6dSUwn01n0dUK39cvVWSSPPBkX/L\r\n5LoXdyMbTFs4yfXYxYACU3SLA9bvsl5GR+HS2UrpBUi9ZzcPysjJ/mJUp8DN\r\nkQ0ECO+3GMIklyEitl+8lpwlw1bc+z9ymhMNUqLAxHlZFgr4hoLafTsgcIjX\r\nYehwqGn9BG9F1jmaIjxtB9FDmI9LiBkuz+8=\r\n=uw3m\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2206131450.0_1655195216633_0.40707372473197934"},"_hasShrinkwrap":false},"1.2206071918.1":{"name":"@bentoproject/fit-text","version":"1.2206071918.1","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2206071918.1","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-yfD8xDPItGs/BRyD4FEx+O8+quwHy60Vw5Kr8C2k0x2YN/ErA4oUqb0ijo3/u4B1eXKVAOlkjHUTzLAcBfZn9w==","shasum":"dd94854954ff94dd5d6070cdcc147910de03fbd0","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2206071918.1.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfcoBVQR2bVltNKZbu6ZsOBm3jabeEGPGKpc7nIPk02QIhANRaFmqzXxeJBfVoKwYjxUJf7+IWIpIHtJk+GxasrdRz"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqPzeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvcQ/6AqqLMa8Maq5C2wUqAhq1P+tLg54Dv9RtfP68/psZ2dIBI334\r\nGxHWqtecbK3XmWQYBP7JKPpANxHl3AkzW6bXVGotbyHZCx0VC7gHhEO99YJN\r\njYxCWmDimaIUm/8moZUYuMpd6WApw+uBHWlOU0B8I9bvTGyEj7gXbn4I1yzD\r\nc4XG0b68zRhxxDhDjHPNCJBPwhCz1OLXdyod0weCYjD1LnKjqf6WVRMytyeT\r\ngRso/wn9In6+3K229G5/zriqeockWhVmPA3K626IVtBfVLoTscwzgYP+34t8\r\nSn/znI06tEFx3Jvs7KF00oy9zMMDYnJe7vDdQKKqiofyLgEvfenCsHI9cWTJ\r\nI/FU30aGrfSQRGPt4zlucnpKMdD3WlrV+BZxzsTsBzbGZ+x6/K2o2T5QI5SG\r\n44IQ/wtEBWpSBOOob9QfGmrY6vlKe1nKI79MIAmT62MgPvL43Vq1wT4yhQKO\r\nn8m5J7JHLYNhMSSDgRcoI9qSDDpTRe5oAqxETdxOBJJJSqYdXjpeF4Bf1pzb\r\nAuhmI4qbjl3PVLVqnFGljsLCiFYFZvMqscIIFxnxK0uBPKfWzbo7uXLgbUZb\r\nGO2b0+9/zoS53jPxQ5iZJgl7HyRxTxDT6fQG30fbsOOCuniEChGMszxC989A\r\nWMirWFmJl9TjEdGEeHe+2o9PGh86Jz5actw=\r\n=3TZI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2206071918.1_1655241950208_0.13411820294667431"},"_hasShrinkwrap":false},"1.2206162023.0":{"name":"@bentoproject/fit-text","version":"1.2206162023.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206162023.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"15781b541aae254d04a1cc777016aa40759100cb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2206162023.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-0nrDlCFEzacXbGkYrDJMy6WTxxURwVIkcEFfJKNTh2Kn3/xeuK/LRYaiqOmV1BfnBz4Onz/TRf6aUJxrQTPcGg==","shasum":"7ab04f2e129254ec5ab0ce45bd4811cd633bfcc0","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2206162023.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQVktgLz9G5sL3W1TEYM1rs7izv61NFA40iWmNL57brAIgeysrM6s4OVwbG96n4UxqWt2NdOeFEzRbB/4N1daLico="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirDqpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogFg/8DhlYFy1GdPwKfr7aXrWT9JQXxeVFP+aqCH4fhCPeEgkajYMI\r\nb58LJ+K32uHFNpgiT667d2yIxH9znyjRUvmpfmchvSZ+gE4B1wDfRzlq4GDA\r\nL357SaJCWttJT0PPpIJ7em1+/ERMGF3XH8/KKs7EzO5b5uMzrhjhHpQUpRDt\r\nFyrM9+DWNH70+JndUm1Mspc9tmxDZwMMMsd5hCngfbJdcKbT0jH0RL//OvUG\r\nGAOIhD7pygivrOX6W3NuVnDgBa6hqctPjPAl4GmtsLChYxHwye46ufPhSJnK\r\nbw4PRzFzpJekQaov6AVctLQKNcteFNg8VX7hSyLOIkQaKkzw8SsYmvmoCPuy\r\ngMyPPwRGAZIQcfA0VOrdPAk8Z32hkKiuS0vMXry4KxsMQpdbBb8j9JcziENL\r\nbc9njURsUN4NwWyU4c+NUFhANEZJdeodUiOw28LQfq7ZhT0kcKkmqw2asqnp\r\neyPlKMw42aJ/TtW5U7YFJHQqeYGux9Ym4zjSZsdh7rulz5Ima+Xx8JAJjgMN\r\nOnNnG500Lje0OWNOMbliNA10MeWzmR8CaqZWsBoR+Ot3s4zfEocqaI95gFBJ\r\nP6tHlmZ8FhE6+ht1GQ6W+5ma9z3W4HgprAwNh4W9BumgYGxamwesg/iMDkmn\r\n0UaxXY3RQSP5d9oFD9jL2SUyZ2STsofVU+0=\r\n=tU9A\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2206162023.0_1655454377073_0.9329174594501748"},"_hasShrinkwrap":false},"1.2206221455.0":{"name":"@bentoproject/fit-text","version":"1.2206221455.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2206221455.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-/pu2/1ZLQwkOloyCJbHGQlvHGcZDMAzO2f2OtNkaGH0w/p1YVRC6TdssXF2X2sDjH2yo4V9g83T/1RyJWrjlUQ==","shasum":"626967a9867f847307baf844c8be4c9ac8d6dc56","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2206221455.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHX55KFGseYgR8ujYZL4iI1j1nc+HCgoty8ZZbJdRkHgIhAMvKAorR7EmZS0qn8s/ZrDE4v5s1e2ZlAbOr7ohVib1D"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJitCOxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6UhAAn7YeKlY7B82s+2sA8MVk2qBvFF7vgjTV7C93XhHTbI2Jrs/t\r\nIBZlDhPkbVl+uQWHCnzZNLBvB0X6+zhuGfwADRCzmOva4z/aMMufod2CSgWO\r\nFT6U/PYspgIZZ4ig3Qjiehfzpa91BtYnjozsyIh6uWgRwwYcyGrvmXl+4EA6\r\nyrVz15NK9QrR5LcafnDs2w2TIqhMFBRPXrs9S2WDu0PSugkR7ZLqLguw+gT/\r\nS6M4894s56fkLAA0PIW/OL21lu3LJ76ZnfYX6/sVpOp7TSGIbI0GSANFRpOr\r\nC1y3n37fsG3y59izwfcTJsqeznsnJYCF5P4hCSDrtlRBh0+ivh0lPJzcYApQ\r\nl6RLMtzSANtNURb1w/87bfNewBleskQ9wr+hhPDQPum97paDyB2aF8sm9Wpl\r\n8ARDvQClCsS1tUPHTwTzMTmsaSkIBHNAeOKME4EHu7lm2morQqnMBfdhBeip\r\nXpDLAubkKni+ih/UBC4BVtOndZoFyjL3Dtq93QExxcBb9FHe1pcQSrLVvP+B\r\nAF9QUNvknp0ai7aEG4rfzFC5Iw0uawgy1K7fse+qHYVELeYpdLQTG6rSxPwI\r\n3UEEmz7eY8EQ0AocxRXnvhu020JvnkefArAbuGHAzLs9N1dXNETmVdF/IO2e\r\nOiGUAJg6NFA4Lv5n9a1pJemOyir8M2kaDxI=\r\n=r/tp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2206221455.0_1655972785322_0.24694058976659927"},"_hasShrinkwrap":false},"1.2206291614.0":{"name":"@bentoproject/fit-text","version":"1.2206291614.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206291614.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"34fbeda57c3cc9d01ab3c39cf9618342ec840187","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2206291614.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-HeqC2uEGnOqNxCkSQSRnSI5Fwc2Of3ZueNZ1qTas422Gjv11VETRhF4yudHeLtDeTqpGg/OlMR5ELKnpeoiY8Q==","shasum":"8f4b3a97ca591e92c9ad98400595fb96af42e79d","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2206291614.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEU3n09giuGQ7q0TbXRt4b5AT+8rd/YVfLL4Hgh4WufOAiEA3uh8oHvifHkz+7kbelGYl1gTU1gK2uYBZdbLuYV0CZo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivcowACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpQQ//R5WbFvd8SBm88g2OH8+dDDO/QZ8x7MzMsWwMcIKpqU5dfx4S\r\nRlQOnXvbWARvgQKMHRLSYYH2s+m+OTRoXuYy1THPPGwlF+62BteAVG/ui3B1\r\ny0tneE7qeUBFxauGvaUETx3/zxYeYL5b2nR8/0oos26dke26boLKbD+ZDuzX\r\nfwr2oEB6Uk9Hq0R7TgNFBz/OITrdGR4Sw2jo6ftkLFTHG8UQaVHCD5/nBwl0\r\nCSWwjiI34WJYumTE4rkS3mRwEy3Gg0J9sAMe93Otpvq7Pxc2CVm3Mo4pJtOx\r\na8qnqdbqbDn60BNq7R8Q12RYy/MxPPwvuYlKyE3ScHHiTJsWyKQ9cW5HEHDm\r\nD3+gXKU1uUc3GfDYsvMUY8KvxvuwFXKVTf1ZJ5rde2dp8o6PYnxOHHYnau+I\r\nXc47yjh+CjqmDRMJKVaTHOeErvpiHZTJ6ofpaEsvaufu7w2lhaMS9779p7uz\r\nBb7kOklzNAdJx2tOSI6edQqEIYaiE+/NpL0bd3A4b640IOFcRtrbHCuNfgHq\r\nyTSTPL2M8WvUCs6KChBiBnQmdTkXuoKulZhAb1Qtd7I05p9HQPPUzCx2G5eN\r\nOwa3hcUzvdjazqJTbkGsg/f2ypqL4N4Cdz0ePpIgcFX/O59/eHwZduh2hV64\r\nHRA2x3nwmL4/AMKu5rqSzwGR9AlsekMCC88=\r\n=ZKl5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2206291614.0_1656605232281_0.049921614163388695"},"_hasShrinkwrap":false},"1.2207071723.0":{"name":"@bentoproject/fit-text","version":"1.2207071723.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2207071723.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-FnzNdvLTqvzvUAR6MW00c+Lm6tDm4lv0KjH9lRGbu8USlUXwIhyLXdvBMHUDOlNX9uamLBmUF8KYfzv4w/jIqw==","shasum":"f1a4308b0b16b6e7812b03fd175ad6d764c617df","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2207071723.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEG9kqub7XTH4LTDK1BY3xrP9yhehiWEmxcm5gMgGBZ0AiEA1dcJDgn/Wyum60J/IA2CVAql2eo24ISy3OY3ZjoHF7A="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix+vCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjtQ/9EPv0swfLRozcjGRZY5wjRspI14zMA7Q4XOw2n+VAKpSEBRa9\r\nk3UiJurZ52gaIhIG+kkJ/ZXDBoGgEWzRawwzHLbkmblaCh3pyQUwroRE/z3Y\r\nHnoE1sX9japUUmmN/vdcXhLq3fPj/M/yH/bfrQ0JZX9OrhujbuhSRvB6F3nd\r\n6n/loZM45WS5Imbg0fklgKwS80vYVmR2uiDvpOLGpS9wQir/Fk0neNOunhlC\r\noZRJpr17ICJEsZf/fTqfVFWRrsNJ7VGJDjBwJ/QwXbQPfjVBaDolPrnfz2TM\r\nzsFsFXve5d2DJPZi0Iyxx3WLxEFAQGyITL1vCJyeq8zxZG8YcAC0jDIR5UBm\r\nvLXQBdpZA3DjQ4D3ZaFFmhTkbNyN9kuyAwLPc9VAXlzGUFqjZIAiG6ReV4Ql\r\nJkIF2zO347UXDqoWbiJVmeIugWgmxZm4O8LgFaCq/u9gH1wf54TeLzCC1Xpb\r\nl8hXy8OMhyPw6GqUVX73/FTKC48idSfSbdrqLx8kugap99q89cKf6MOupr0k\r\nbd/+llPsDBX7vs8Hmwsp5q1DuE70LcFzwzSIkpSOTNBsPfIFgSiVMJ+TJngo\r\n52nIvFvc81SUYrF6ZNa6/2kxE5cocIgzi2orBt3lPJhhH6t0fK5VXSkZYTb8\r\nRqFJW4NV1U/TiBjFz2XuYMNOEfeSfCd02sw=\r\n=x3gn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2207071723.0_1657269186128_0.6737311907817543"},"_hasShrinkwrap":false},"1.2207181727.0":{"name":"@bentoproject/fit-text","version":"1.2207181727.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2207181727.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-6uvEe067Ib/NgkbVRHZQu6KjNDKUohYMK9p2JtqhHleLHwN8g3hYAzpqQUPQ/qVYO5gi6pGgkvje9ZEyCGcZLg==","shasum":"09395ec96162fd756ce0f7c6e1b5dd90fb8b7d79","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2207181727.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBTHGksfr8wjCzLHOoQH6aV8gVYblYcvA0TKlE5g6pqAIhALT+AaipXIWLcqWvPf/WIH4tq2C7CnE6VZvsilR6Vuos"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1mptACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmotlg/+NovtKNCWhGFSjHQ1s0I3d3CwLUeuiaQ9zVgyVSAAm5OEs+VS\r\ntFy923WHrcKDb/rDy7/H2NxbKBGSEE50Fh1Z2VBVWILSlEhWUcP4HEcD+ALZ\r\nCdadKFoESXhjMShx8BOOHHGsfi5p02BUI6/cZuMt3y+kW+dPPrhyDOcJWTu5\r\n0dxnRjM4QSSke5JRIE1KExlSW0piv2CzmNRGY5w2lBi/plL+toKhnZbtAISd\r\nzajPtZs0bJHmLvn0DYWz4kfg97VHcoIms0LFslFoUKdWGds63gSl2vXHStRy\r\nrS+wDji4KarWkOmnPy4E8HRt1vvIYRZkgCuFTwCGzemLZkvh1CFagfz/NeUG\r\nQxkyCt3Kp86bAFuc+nCGYCZaYgEH95RzmeFzin3ytenYxEc2tTQrFExTYizV\r\nE2gJcm4LFd53ljwhAQ6GyytXA9z8Tu7qjJMuY+05g8WS+IfVT0Dg7gyn3+sX\r\nPNaDny9zypmhicwrXI47+oTR75k8tIx/fyTOamaDdyJMtuoDVIJUVNFBkGND\r\n5d1xOjZEvZlPh4QJ2UnAeJZUhfkSm+IY0Fb//xOVoEQBmqIsgBjNtNpUEkYI\r\n0we/sL5rAOPM7rQu3YswoWa2Yu5m5zPd4oVG61+dcXWHwo/WI4rLkcw5jrMI\r\naH2hYbUO2AYlmx0LdjWxfBZp6kDm6pqVA8M=\r\n=vY8E\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2207181727.0_1658219117709_0.12725014343471575"},"_hasShrinkwrap":false},"1.2207201724.0":{"name":"@bentoproject/fit-text","version":"1.2207201724.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207201724.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"62d86212e783d34fd2dfa8bd02ffb0e447c0538b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2207201724.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-DxuWL+9hTp7Tv2cLO8xf6IqU5H5UW1AaEndQB4ySMaOGzmMNKDptpAhpC2uVQtoVVzBLBrY2uiNfVQZcfeXt0Q==","shasum":"5c0107dbd4d168cc4bef9953735f42fc670b30b2","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2207201724.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF9ZbNG4tX+h7bzkOUuO+ih9f8PB2UFxVyqReYoiwp1dAiEA06P/ji42JvpGn26NX8H9DCraVD86zz8ZryvrF0OfAVk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2Q2IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrklg//QwhV7ixz+8PNBZiICPjkNzAIRDKCp0kNQsNKeMqKB/YdFAfd\r\n4fpqR4H5L+frZ3hOqZCixK1YN/2pU05XPtoEWFVJiXpMrkxycfZFBaGygDl9\r\nBG3fOStK00CgXmwidx0uPaNv4VBFSsYZ7H2t0e693v7iTVaeEqAnm0IpAJdN\r\nJya1ajehChWs13htGwR3Yyagt5xLmppd03E++6PKV/WOsC2EZp4Ix3cyAhmz\r\nwAv3lawWn3wwGMejPizB/Xr15mwy7p/L2mO16BXTzPFvNVnmxST4X/jwv4Yc\r\nI1cNJsd9cfD+C51dU6sw57hQiWeCNbkXNLrJiluSIgP/khNPpdp0EQ6wDH8Z\r\nBX5cmiE8UQTv7y7Kv5biaAkyg2/IC46GBq6X9wYpA+jaB3lLn3QzduaqWJy3\r\n+onFDH9Uf9+nM+Sr3jnkhW+ctdeI25mNBoCWB82HeQwCuoA3TQA1VDLYIDSK\r\nsMxhBR7tzH/l2CdU14CLJapvleBSjPJ7CGi7nlUKyZDGlg53eKLFg+geP61i\r\n9f84VITilfPAw1EUsYHtlAds2gV3KQKceHPXwkS6jQdTdi+WolmAAlo3cAgC\r\ng5AP6Gaungg72Xdo73lWqp8gPxy1+NTXG4FIi6lR1iQWmAV/7HnHulAUyTPA\r\nwrzHavUY5cODEBP2EtJP3x7L0PjmtprF4Mo=\r\n=9bC/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2207201724.0_1658391944448_0.06592429781951026"},"_hasShrinkwrap":false},"1.2207221643.0":{"name":"@bentoproject/fit-text","version":"1.2207221643.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2207221643.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-RvNUzoyFNqR+7WGFHclt2ZKaDGLoHJ/yGxUCQ1M+XUgqt96I+wGjKEWPgJKxmdIjUIwwhIp3/oshKojOx+00Hw==","shasum":"789c3fa42cc0051711ee557936a90daff3b2a2ae","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2207221643.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAcpgOT56I8jWSm/4SHev0601dpWERplhtayw8XOzywyAiEA84VeASf1AV1nn2dzBING6PQurK60UU2Hm3W9Ybdczeg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi27CuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqX0Q/7BpSB6JYaHwg3KwS5sT5z0XY3Kj7IgmwVRVqmUzqQpDWkpf9n\r\n97wzfu8nPlxHtTPiFQp+kTmdrhI7IAGZD7IBA/jR6PL5A5W8l3c/2dOSvdIT\r\nLMCjrepVzHB5Lvu1rOJFpSbNNgYkXQmDWb//NehQSFzzomDlsBOb2hrfeGki\r\nuoAqqO1LI6s21Cvoe/kIgPp/4IULrmAjWLGa/nGtW1hiuw28oJjMiKWZe1iq\r\nsu7mZxo3khTtosjZLGm+bWdgy0MuzgCZh1R9zGccax1wRnen78vJQHqGsMiM\r\nuy5uzGvYj+nWD4y8xrUDhtLyAG9QIWolSNDemqqzdNxzFH/OXXxLn7eKrcDP\r\noWHhdXQjAJyaLfCpJdwieK9mr8RFTQAz2TV/VaP8nklukB6hNLtjIm/3NV/K\r\n30Qw9cxJbexDAepzHbZtDu5bohqrYicFEC2wKWfZ4s1QQiFpKj/xBVzOW2da\r\nIgAs9YRlLvCwG7UFhc+Oavk2biJqf98pBO8FzKSszXgAr8esSbN6IdARrghx\r\nf3us28n9tBQdEAARJaskvPQ1PyujCkFcI+88VWOWmnuHatYlghLRlHzFUFiA\r\nHYxU53piRvnskn3aXGx2IaWSdMmHLEk38jXfmMhcLdB9xDq8L7lK1C9ydC9r\r\n+CDi293tvswadZJe9/4plplFEV+eC/o8yu8=\r\n=hbMH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2207221643.0_1658564781765_0.4209444096671089"},"_hasShrinkwrap":false},"1.2207261725.0":{"name":"@bentoproject/fit-text","version":"1.2207261725.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207261725.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"b73520d61dc1a279ec10d2a27f58891e2e2d5d93","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2207261725.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-5/IpSnn72ktwtQrUQWMp4RPVfePbL94hKG2r/3BicEcEhTJXjjzB/hYmNNhqPsu60yRg5Jkjs92ecyDLZ/EMKA==","shasum":"996e87a1ca2b876f15b353a905fd9b747a28aadf","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2207261725.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAvDo/Run/LhcDVPbgqMMAB+KbzlrinF9442Hw3l9MydAiEAwZULQuofy8eXPoZnbPeg4+vFNFWeBe45G4nY+nGyMEE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi4PZuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLthAAiIDSiXvZMbypeE/ArcEYBkstjXf7RI0m+3abWvZtGVWee4Lc\r\nX+/Z1BMAuevs6vWgMXNuRXJ+GvookW6QmXWQA9edvrwox+23buctwxJl9uw2\r\nOMnQGTFZ+3NezjzwQbX93WxwPhoq18ptBi03SAsusxMV3MeW7tui+E3SPsZx\r\n1d37+v/x3gWiiLMOILCnN8Hib4MtLeEuE+681upkT5y0+OUbgiIyFnIIPnli\r\nBV6shSxR0ZctIZVPxb5n1JA03pyF5Zxy/mBINhm9KrMFJl5z00N4axypn2yV\r\n2ySkToT0xXYOQx3KTl4YSQlczUmpadOYFuwiQqbIKtSR+B52RTZ2QdUTcdtg\r\nQNEQ4spfTDhrhTITBZ6Kg6JUX5PZgvybBO6FB4UDLEY+ypd7MOnyM4JUb73P\r\n3+sn80Rw75qcb/gpgF1Qv2UzHIE7YYxQYIVCc4H3r8oHTZjsCgU/f/Vn0s7+\r\nvthxI92spZ6ec0dGc+0cCHfp70nF+2JIo+JeTNcN/3ZANI4GZUA8RLMqTcJN\r\nPCI0QCIVaArxaVQFzgpbU26HdkP0xn0RzW9B+jKpAniVkniOAE4s3LOB7c5l\r\nJ7C+aIVYwO1lWopD2ZIZH0034+5KyeGCQkYAdkSBlBihaJwNybjhar5Z5zyf\r\n0W0z0iSz5zCKrh6sEkqFRXq0jDU7g29oMHY=\r\n=ZUHC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2207261725.0_1658910318587_0.5681515444480769"},"_hasShrinkwrap":false},"1.2207281718.0":{"name":"@bentoproject/fit-text","version":"1.2207281718.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207281718.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"5e3f3eee6148e0ebb57aabc48ef987e9b5528611","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2207281718.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-z195yXWd1uwwsOBLceGK9b7G7Qu6y5Pf78gCMhXzaEg2+1nEYTqO/881AD5ndh9tGvqHOc/r8bZOuRmVQvUjVg==","shasum":"0e0015a6353af02c16bed10dc7accddfc4f6c30b","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2207281718.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRgJOQFEG3afi4ugAOWBsZkmx2kn/1/PsTwGN2ecjJOAIhANQYvNXkYTkAfyZBIoDEPc9Urn9ldRDpk+A68MjyrWvR"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi45oqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqYg//bvvCLY43zrJlN3eBvFD/qiLgIvbPcBdxOTssoTR/EHr42UwN\r\nzrLeWCSiI7orkeQcfK0gy+YJfqDPNojjoNY096NbiWmNq0AH8HHuGJ3coZQX\r\nSn7pwwdWJyNo9npfLJPSIg9Oierd3glyXTZviTVaP+btBFnEyBW+96nU6B04\r\n0+3Z4H0sumzeFPI7J+uYRjg3H2wp6sgsRw+H/GKDvq3E7dnH+H1Y9so9UQJA\r\nRcCdtlRYmtF2U2RaOpXXOWarCZyNGwY6yUHm+Eu6P/9NgvDYvThs9T+Y7BaD\r\n/x6anpcIXq7F6CxOrbVa9UOV0EXg7k2GOG3c0EgTL9YGZood5uZLV1mpAg/v\r\n4ppFhk3dltaI/dJn2GhN2W75tbQs5ybLovxU3tuXpBi3y0Uk9BUe6oPhNtca\r\ndWGRgIS1YhB/xc4cUGKVpbaRo/wipHv8WjvAixAf/BNDxLxQ3HNa6UYZ+1gX\r\nHCWhQF2tt/R5DFKd3zhCJF2nr9nsvn/CwQ+zqw+iSuEzRAf4v/Ye1OBtfwep\r\ndIU7LjxW4J9Nl98R0rrQUHRbNH4ni9LTKOm45DG7zAVLJu6jQ0pee4LfWOm8\r\ndfIAsPMBynPpGYfISrQhL7kdEcnNB7Sv8U2L6hS3KGl3nF4rjTGL6y2vAlyK\r\n3b2CRvg8XPzRyIf5ttoup4tGE83Ml6TEeaE=\r\n=B91P\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2207281718.0_1659083306743_0.14174996957561947"},"_hasShrinkwrap":false},"1.2208021808.0":{"name":"@bentoproject/fit-text","version":"1.2208021808.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208021808.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"b82b832cae23ff854449af280f1b02f4dfeb99f4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2208021808.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-EYU+pqGk3KDhAlrYviHjJFe08vWEi1kRkQOaVNI1gzDJCD7nf5mmpAXUiuEiUe3M9zZd1o17jDJUHZjnXt9nGQ==","shasum":"0ebbe6e9a6f43ae448388e679da8b406d313a4c3","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2208021808.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICfdPIrxS+dCLNWviLjc3UVfK0Hm9NTv5NHYb5QcsVfLAiAoZ4lP63PcSvW80tm3801gTRaryc6TMjFZM1pyxXz7/Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6jEuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdKxAApQrO/biWvb0VC/KgpwTN10LmKZ599ojKCWzc4XszU8uPyifI\r\nAocCQdehjHy4awMPQawQof/3+aoBbp44NJqbu2dSeJWNtioY/2OcqhGC1PnH\r\nIRD1SFljuENL987FLSqtn4AJ34lY+DWiJ3OGKmXVDuF7N04gutWdIdBLOpCn\r\nQznqpbVJKc6YkqaWn4hPn65TJBEbpCsgJue2bOeGybPEAl+yhepqf9EIoAB+\r\nPnKY9H7E0E4bFgDZiq/PSu+iDE5S24mvQBx574eVJ75yAj1elYMQgtlqoAXF\r\n6dqFYz+1zhxFpsy60GPpILZYl7ILh8ibM/cbwOEqx4t0n2xH2C5QF+uJL7gX\r\nUcKfjwiQBMquaUCKN5eghY3h4iz9Rp0k01orubxfUjR11vrFgUlzOa/wCjO6\r\nI9HBtiAQjjphHwCVkk6axL5KalRjLitqs70iUGr9Nh4vgzAn5J5Nka97H8NF\r\n4BvcjGxbOB64BAEZ5Q5pcokwaLfedW63ptBlH1xJiHI1G1aj/w83G4SEI/O0\r\nnj9tTKowxcmL7qek4IBCARQ6nwIOVNVZK4CypA5TVW1T7L7HWbz5vvyjmlFq\r\n/ZCYZtzuIpq97ocufiT0BJ6bBZEKsqpR+NxE/T7Cd5sgMZTCQSyAKvb/wGZt\r\n44bULlxRa8c/i9tQj/jiGjXn6YztDN06qFQ=\r\n=TaSo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2208021808.0_1659515182264_0.9263512140915255"},"_hasShrinkwrap":false},"1.2208042017.0":{"name":"@bentoproject/fit-text","version":"1.2208042017.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208042017.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"598aa15d3922507a106666aca29a90334c7b2c05","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2208042017.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-cReAXUguXvpD/LXeLnRK3QtfUgoXsw+ogR4q1QX739IXHhuGq7dOhAjPj/y3++vcgzgnplvvHKwh399qbwPkMw==","shasum":"b2d87b925901cf4484432c658a4276fbd989e9f6","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2208042017.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJeUnVvYFra1m2z0d/D0h6ezVP2PBZ3tEGHnc7ttenjgIgGplIkXp2kV0SOg/kPWSWDkMsaqmiKJm4HCzbjd7aDfI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7NSUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrxrw//UICb9wzVx+DmwWlVCHG8Mm5lWbLz2DwjwAFqPxS0NpU4WPdV\r\ngMhHyvrL1XYRWHErFoX2t+FvXe+5MF0S+T/B6xw1jJ20rq7CF7eyMPe0SXyu\r\n35AtrA87Gm4LMfiyYxNbxZlZGxEiWqVG8eOqGArV7ZRzC7cXmvhEudj4VCmy\r\nYJ13/ZVbTol0NJTUQ4iipBWTNfm/0Xp/M5wgQXVKjZ6zIVlbY+gvQVREK24x\r\nRWJWPN/JLwXSSppB0QLjvRA9NgS6fYfPvTIc/ibERF9K672Cf1anqcTmK8/5\r\nxoUX4TB39oW9DcHf7z6vn3ErEcr33ulXJqwbclTTOzXXP2VRattg4ecEMIJo\r\ncuwiSED97CyFR9vL2TjAxTFF0i0BzgbzxE76NS0bw/8SulmeZNRvLLbdPPCl\r\nGbDBN5y68RohYDF6WmI2h22S4sUFBE+OSROT92Hmd6dSEC6bJagQgnT0CH2O\r\nsV8C/wRrJuKwaCuswQKFWrWvWxtvoIi6FE39PdasMbM6GnXB0f7b3scni8W4\r\nEHPqnBgiUdtcivUTGOGU4ei04gFn+QBVXp1DmoGPcBeMSptfR2TP/5frYxkk\r\nuq8flk0jUVn2fbOUb4AsOCca2n9MVKvE08am49hh+Rldo7easSpJp0GTHNSJ\r\nxplsJsRer9lucyh5EAqrkel32G6Khtw9ycQ=\r\n=5jD6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2208042017.0_1659688083986_0.3044735404100103"},"_hasShrinkwrap":false},"1.2208051912.0":{"name":"@bentoproject/fit-text","version":"1.2208051912.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208051912.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"5f50e49dee3435f3a242126437de7cc8263c2ea8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2208051912.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-Gw8hGknjAsQLLPHgef+ecnHpUEOM6ZBvF9idpL+8hU8ML5ltHDRZE1QvaGWQZji7Uy9zc6mRfsVqFfu4o2MBzA==","shasum":"510a871556de26b9662d4ad67b7f3ed0a275ca77","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2208051912.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHmXKCKCs6sMKU83ZQDmoxQwZMdHTw7+M1f4hWI6I2zzAiAX+8PvcdTMDyw/YOErZ2MKSegtBUp4FnJkFacl+BU0vQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7iXZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgVBAAgGib08j1iIUAym7DZkbojZgAELi+SEQpUiDkTB+qOajMK/01\r\nVtls3yHuhgMUTKBU2rIWksyMtcvOMvJza8AxZDnKxa0oBb1p+7ijgM0la2iy\r\ntjWvw6wVgWaV0xfN1BoYYtaWUqu5GJLpHdXGn9oVtgPFvsZjUc1Vpu9bbHM+\r\nvH3YqVwFyEk+QiwxYs2KGIjpAJAP5Xanfay77JREokhb6ElqGMgR1TzVqirw\r\nGK4alG7HG8dnNa8NEtxo+3xGKadGtI3K5zg8M+9thMqAsLZ1ATSked6Eta+p\r\n2sNwsoLqZUFQbw75rn533BWRGqLLhcNcJVXVkJE1qS9mSuA4l3Uznh3c4eUe\r\nKze0tzeAjxbcjAeDaI2uHbZMidm6Iv3uk5FWE0nEnWKfN5OrTLflDEmKjC28\r\nAkdJiBV81DzNVPjunNCkjd7uNSnB01IPBr5YMXecbaggOtsbQfAA3YkPrZIv\r\nGJgNGJy8L3GXiH6cVMDQ+9JcYZ6WEYdzQy7BHOLLMKoSPw+JmTlDcqyGJnDp\r\ni032DzslXHeiRUMCqZVpIKVrlQObIwX3jslcDp/k3l7TGQLZOWFLJjnWOfkn\r\nyKBQocmSuC5Embk+EnziZ2tv2k/TE6DAkV6VZ00yjLR3KSB8RQotAsizYQHR\r\nmETnq5fbPj1Umdmwr4KGZvdv2PuA7qEKBis=\r\n=qAo5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2208051912.0_1659774424743_0.5341429013215104"},"_hasShrinkwrap":false},"1.2208081650.0":{"name":"@bentoproject/fit-text","version":"1.2208081650.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208081650.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"beb9a33429ef933995a664a1aa534cf7ac0984f5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2208081650.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-VKFKutZkQA2CWv4cHiFqjuMQ1NRBLN9UPPjmV96/3tVvRD+7eGkiQvrw7RTXOi+fdLqSNpHtwHvIdaLOJTMg/Q==","shasum":"a9d7ad6936751c63b88b224c22d1f5d367dcca02","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2208081650.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHVyzeEUaIuJNu3hRfgnIoplb7+CKYSkOOSLvGYCv2bAIhAJeHxsWRY66UjoiAAwxseE5Fz9A86zYuRDOgHSXf18pp"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8hpsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq61RAAhMbLh2J8soolwkyfVkolc1kTWUcTwNTIkI6ghCN9jIotpJeV\r\nkJwnwyiWfJdlgpnoQWsbITtWvV2eY5iKVcUiL1dE8m+UEihbezFXxpOBcFW3\r\nmk5hJVgfEjJ6QNqb2NfLaIgtohXEmwAZqrJSHC2mGtqyw1/Fpk87SJXriGqX\r\nqIy2MzLMrcym1QYHEZniLlluQ43VfiT4ztpoaejDef2siEhrL7k270j8fPlp\r\n1ZTKyCxcrBkxI/r1Mh7chhXjFfcNBB8E2xpdglbaFkLmlv6WYO9gGIEltgfF\r\n74Rwt7ZVBs1t1Xtwot8FPK2ZjU8AygDdPtsL8U+EnRdvYPxa4r/d5Qv4u0b5\r\niPsn5eu27ygdcF3OEt4+njfxdVTJ3gOqPZ9fbgrEW0vBJ3aLDh1U/ybrQYTx\r\nviEsDVUP7PMq5ikKaFb0I91850ZfJJbTxm+YV8O0nLPUBRr3caFf6qtlzwsW\r\n2CL6Rl139IxzrQxzeYAUWDjeL/9e82/4DuVSIlKbNoV2Zd/SIzmP+pejv3Iy\r\n5tEwe+DPVbhvZGnpYArEKD6k5N98bD0kQyhrMyNf0FkFlgY4TqWtCUgs4EbL\r\n073r38uZW82oOv+WA6LBSq3pIxkGtns+bg5/5ChA74Zrs34WklKNVY4D7AHf\r\nmbM0Ei/rzcYQrRRz72AEEY2zGVGMOqE2D/8=\r\n=u5W8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2208081650.0_1660033644385_0.8803949390929511"},"_hasShrinkwrap":false},"1.2208092047.0":{"name":"@bentoproject/fit-text","version":"1.2208092047.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208092047.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"5147b5f8b54805bbea52be75a64d125a06f88aea","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2208092047.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-MUPHJ87Pe/MIom0c0+z2pP7W1EG7ldrjt4mr6lOyyt4IPaCEHIYWAMbp9YHXGrLrtmWKPlgncMnCjcMbfuONWA==","shasum":"7e97f2af73d898e87e1107d424110188b05fd002","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2208092047.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEczccTPjaBE3IUCX44T/iqevGd9FZdbGWnbTkbjse8XAiAQnIIVUNwEdrplGWmgFAEJ/epJOsvjELoxr6sRiW8INw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi82u+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaYxAAnpfzMv0Z1fj9aJKSN1LkbWslZfOyfXMjkDtXxF1WrV/e81NQ\r\n3MZR5viBC6Yrffu4nHFH0IueVlRLR++kMhA7CVYoCKyHR7vYHyIKmc/P2wDj\r\nmti37X1CCXDLxIfoIXTMQ0umf7sxwEOPppuiiF9bxWxbo9hTOdHa7vJYD8PY\r\ngo/jVMXukN2sqYUPSgprQHYW1npas/8D/j7iF2CzNZTYcjet3t6twNo92MCE\r\nFmeVA+Ki7vAXWblJdnUP9p3HgN1PMgw8dWik8qlh4uToeRRxk5IvyfpYh11U\r\nFAVVeIwrfwg2Ivbmogim4L46EAh3Kk1KodBPSTRn7aVXR3knX5zWwXf1OdzP\r\noPx+aTcqVj4mKFdTHY+0pi97MhOIJyfByU+oOn0i7/EoNLdzicU8qOxRMqXI\r\nqQ4yO0775uUNZbShFrNPirzL62IBRKc4HKXtfNL9ite3bdBVy591+B5MgKDb\r\n43IauHM0IxWNRoTZ24u5s6f1KYvM/f2s0XNQc89Me75j88AiHPS9awlZBTaW\r\niViL4dSJ3j5iRcFXpTGMTDw3rwu+YZ9Trgjl8XfZ0AkqAL+pZ6ThvaYLmOez\r\n5BfaJmJGWM/osraXbjkaXn0MA8pbHs5OwSk3WAkx9xytsPUz/32VFLx7KwII\r\nhD9WTpRDrgHwn5RBux4peTKJNmrU1xvW1TU=\r\n=XM/4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2208092047.0_1660119998159_0.04855246415964465"},"_hasShrinkwrap":false},"1.2207281718.1":{"name":"@bentoproject/fit-text","version":"1.2207281718.1","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2207281718.1","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-2inV97qxxTnpusk2TEry0pJ5zGsRX+CgY/9EXJjVpwgDUQGy37sUbSza4l3m9GCdRYfxcbutPSIoJod9G9fXpQ==","shasum":"eaecc0724ead03837c82c7b4b26ba9f8912069ef","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2207281718.1.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHHC0R+8oIzm+Zx7e3MMqpbPupAy7BUx4lpSvEyximbAAiAMZZek4vrWm52LDz7s5kHS9IJim8DDjZkqtNA7S1MgaQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8+M9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlGhAAk+P7eD/F3Zsrf7bx7V7vQXdQwmxJ76YVdIXGsNP00q03U0eV\r\n+0KrLTbsabsf+86wMC1WbR11al3LbIUUdldfjfzw0nwHSHaXpOwlm9apCQ/A\r\nZx1pzXuvwykhfg0QU0CP7/hKaUCPDjg92aEhvSXrfMF73R5p3wPPCz79VCoP\r\nNbp631A4Neot5MuFnqEFHEXupEnQ2AuIY7S93/3m+OEBXK9IPvxBjZ+LTHba\r\n5WhXY59/2aLkHhkicxNSpcSJC4TvZTxJONGdGH9SsFkCEotIwGCHLVvEZV+Q\r\n7GVNn1VVm8Cr2JKY1z4qKMovfcLK2tNhrjG+UpTXikZDwDEWmgV0Hqs3QkfL\r\nQGDrHWmwLfzf2U3HnBPYfiYeh6zAJxmX1Wb0b9rhrgv786T0kZWGybgcl2M0\r\nFnSGPQv5snoD2lsXELktC1g5kqI6bsJ98N2pvECcyGL60yjWQobRWmqAeq0i\r\nLaVW92AtIvUO2eFWN8HlVvp9rYKo9eyZLC9dPuxbXR803eODTfL0aTVN//MU\r\nAExDI59fN9Jw/3eQNtWyNqpHGnnOodnhIdg8EPjIMPBQtNHLaG4JXQ6Ws9Ca\r\nUr4X3gyChbPfuG35oHKhJllAbsHqKKjhcMv9pINcGEYmIebOcSNvPfJ+O5Vw\r\nNQbH7TryFpog22DW1r1eiToRJaysTvu5siU=\r\n=Uuwd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2207281718.1_1660150589604_0.9152017582213194"},"_hasShrinkwrap":false},"1.2207281718.2":{"name":"@bentoproject/fit-text","version":"1.2207281718.2","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2207281718.2","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-ZBjguCP8QEg2rhxb+/AS33n/nx6+Tt+7BWXPQELS9Go1PMfAWXV9eZ4G2HYeC2JRF2ojTxB9WRwEURF81g+0ww==","shasum":"5aa6593454f6cacc3d755332c420b3e3994912f9","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2207281718.2.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAQzgYYZRjTPg9XSnyOVSPcGRhHpzXWXlQUjLMyXiqB0AiBpGI9lvIm3AWPsI9EWRO0JzdWvR5W1f8QCqVivXyOvTg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8/XMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKOBAAoHfcMxm5nzj5LKH0ohSVuM6pMWTmaP8pg66wPhBETxkbxfX2\r\neKupH/Jn/IJofmVVPshB8OelIFvbgh3nqaErYceXPjgERko3XYBuBrYSiDB8\r\nZ46hgO99BKOM7btK2HOlvyLAnSnyicn5h6yzCLne5ThwrzflZ21GwObeOkgL\r\nqsArXRgsCP9Hsd2F+A0eNogMuOBAzCWgqQEwjM2f/anzwRks5/ftjv+MLWzX\r\nEttuLQ/KHkvTgVGZs1s4KE30Cntl3yihwy++nAxmces60WaT0QS8lUf2BzzD\r\nk1vKZqRVHC9nLCoeuEZilShJODhH1pOFr1cnCoAPBYiAYIP1S3mgf/3Cr5jj\r\ni/V0eF0nwb48xWBZOuOgoOviWxLiF8MPsPZ7B+5XkAoEMeWFq7ErPRQqTRi2\r\nWOgJ5cNKawC+b3YALd70uLvfBfufcK7JTAToMBgtn0nr39bj40g5+qCyQGis\r\nHIPpX7L3a5G3RenxktImxaulrav6Yf269i7SRqteSaZZvg5SyzxYB3nQtPDr\r\nGxobxrJkCZhZe5wOi/7qc0TgUS4vDwTGXu3FGyYXEGHQRVhNx+gpp58xUdWm\r\nk93tqfrcUeXZUwllrmTZ3BoFwR+KLP+/TXabfq/PXL1e9NRPWqTXBiElwTa4\r\n/2eC/ns/F3qqL0o4oTqkO8mnJCUiSdIdafI=\r\n=Z0gl\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2207281718.2_1660155339801_0.7614754439295026"},"_hasShrinkwrap":false},"1.2208112015.0":{"name":"@bentoproject/fit-text","version":"1.2208112015.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208112015.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"83d345ea27d61c78ced5f68848c4f342e947fab2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2208112015.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-UZfj7Z74QAJtpa6i9ZkQYbey3LhW4RW5Wm/Ao5r5SCpeTd/T9umkSjYyotNNOETVDes1etzhivIPLQeSamNqqw==","shasum":"989ff953740dc833f64abf78b2b59b4521d6cc73","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2208112015.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH7YnTd/Pvk4Y/Zse9ef2hwtTTlGFo0osO1qVHwSA5dSAiA/8lcziHuFqIC0a6YxdOsXv8PpFtP2Sn4/77IdCPletQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9g7eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbwA/9F4FPN5VkTWvN5ySvlZ3k50BJkafoEAABTrg+fRy0hsxrjRSl\r\nhFhxNj79ySLrojNXB/hA4EGMxATOmAAne3IPCUKA9H7inrKSGcJXunhBo3tV\r\n+DCYFIWMzuiZ7qziK14EMRVdv3ag5Swm3hfz26RerUFx6OzbrThTHOuqFaOW\r\nZ6xttjcSBhIgbH0JvqyYM+YqZtMnPxN25xHPPk6Vo+B79/P/1F7rssnY7EQl\r\nWyGTS+OjC5yl+7wLS+l6G/lCazEaOEEFEjlFs9mIIcHcFddn+cLBThJqxnzf\r\nZRcgdGhXke2ruUdtR/bihvcyMmYl0lTxsKh5WHcho7Lhl54V4f1BhJ9R7th4\r\n/uzyfjNm5mweDIBbWbj1gNsEzfYBPLWFEj16cHna6kNwHb3dP/wj+pB8qi3X\r\nHbRpoAnOkh77AWp84R7exIOb3SWjTukV3CoLHsIn0XtHpaK9S1isQUMDmoeI\r\nd7V2LWPTYswwxP9N/n0EUVo09yaUHKnXe6S6sgpRcEYKGga+u0lqIpFkWbD8\r\nNlGzfkSuvzAN21ZkDETVPXckzrZYnAjxwMeLrI7W/p/bypghb7g0+94wauPm\r\nBTpHf1I9F/7OXtAx6zuLgENFeNZeiWc/9xyVrUoL++dA3qUPOcZrzT1U0gSj\r\n7fHQHWngGqpL9oLIjnRboB7OgKbqXLlcP3o=\r\n=UEU3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2208112015.0_1660292830149_0.07296111466613753"},"_hasShrinkwrap":false},"1.2208121708.0":{"name":"@bentoproject/fit-text","version":"1.2208121708.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2208121708.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-nkd0tgffLMfr0/puUwAFe3s/T8MqhN0KG5N4mFBRQdpRKo16pXjzgCVp4FuFNCqpAJ0vBIEFpG/16kBkFwdzeQ==","shasum":"7533301b0b37a2436622fcc0865982a3dfaa1687","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2208121708.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH95c2rBGKoZyocJGSH92SqInOjB+uf/NFKiI/W7S1W6AiB1Q9hNFG7U5LU2J4BXwcQU8IVytOCepYJs10I21MIj3A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi92AIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo93Q//XLSLWxJVxRqoYcqDrj6grs10FMyesnkVrJN0ip212enYUidJ\r\nMSktqHl2epKKOi2G5P5VZbw/5IVQo0StD/5EDqE5TJ6jkdqUSyfwflcmGjbi\r\nhVfxfHnPCod7Rhdeh7zAQD9+afA3MLkBxHME8ueVDGkTlKxVqsqNVSkUtJSr\r\nVBTrCUBngeLKUhilVYGN+tnmBNBcYcWwwhebyOVcjp7JN2QubHEjlbm7JkDf\r\nYghOyIPVtB4b8RJoGAeyj4GtX93QiQn+Ag21DwlTVwCv1WQWLmGbvOVXiNje\r\nnh67J+Za4KOP1GbO/9G8e/cWb23Cac9fP4nWMHXALVbLZysIerCb2CGqMU54\r\nCtk4OhwSvbQzOMZshxEiEKWcbuz/Q+DPkl7Pfb+UjA9kbx/8fs0m6JGRga0k\r\nOKfjfWJQWZUovprUgVh61ocGdZ2aEy7WL8AP63Pv3tHSRNGKdhfglbb/CCez\r\nz9zpj3OOuX5EdBD8nwGRWJ+vDtRqNEgZxjeSVsVIZChsm+vgDENcsPJlHIu5\r\ngCMMQ8JW/BxlJCEeEeqPpvVa6yjovCeniTtGDTzhFgYvg1P5v23Zu6yhCvsn\r\n29caPkKdtWHWH9TV+XHLH/y/f7wJaWAARg4Vo32YRuzXZRXYEEDmbdZaZtBc\r\nAFxAejHvyBv9z7s6Xqkv7RsyDRJLfdDXMkk=\r\n=AvJd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2208121708.0_1660379144078_0.44442879188596063"},"_hasShrinkwrap":false},"1.2208051912.1":{"name":"@bentoproject/fit-text","version":"1.2208051912.1","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2208051912.1","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-ePx3hQrSJ7xyNDPJC8lSsVtm44nJfsuF2DU7hlrNAJGD5yn7sCUJEBORFxZ74gwVYtVE11M5wEQ8flWUxRui2Q==","shasum":"3845b65df759c25d1cbebc16ce040e5f1ae31a8d","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2208051912.1.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7bBduUO+Kkvxqsqj6jof8DqBC6vYoC+XfhWjb4K/UowIhAMdQwh1+m2D0SS6e4hfwJahuvZXAhhWlb6Fg0u9EyA0c"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/CKrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrghQ/+M6lel9RnNEveivsdAorHQOnydtGcYuUVuhFrZdNyKS4Li+Ja\r\nKZFRev+3nGqSGWBlcbH/OmX+DVP7COEbDrrYx7x4CwBOso5xw903ekE4jqjG\r\na1Qf0mllvI5pjQT35wjmkvx5f84YmY4T+eFEFBz/VmWxHioo8hHHXdcqYtGD\r\nc8XzTrdQOBtOuLjUyDh+oHaOMYaYLKBOeB1/8j1HNoP2zI78ymFvoFrLT4/P\r\ncOLcynm5lIBVIbE/rsbx4BX6TXKQEb456c93X+Og+Hsgm9SzHK/D3Ryxx22M\r\nStEkHC4OdGrhjHx/TKkkpi40FD2zl88/fY8/pyermpvEh2thIEKp2becVlru\r\nfC179HqQqYfO6AKmReenAq+cYOV/h13nxIwMQrxFTVE9Wr+mLVmrZ67zDMNL\r\n01btJHp+S4XTul3ocM6KENXpyIJXU2AU3gED6/fNby7WAg0OpmX+/rUw7xfj\r\nGneZOjZ/3SzFWMxTh5DDYFhSJoXLPpOLbthNMW4eiS3ukufJqWrSPEX2Aosy\r\n6WKH1v1MsiwGTX91eLazx8ZJxhWk4zjJWkKSj1AaMHVjAZunG1ZUbdyas7ae\r\nT4VzWJf+Ajrkyd8wTT64W881LmbSCCzwUcZ3h7aSCsmMocbinSX4/GNHGWSR\r\nqZu3NczUVmQwgX4xEXNxuTSNpwQ9A2KdEn4=\r\n=lAnR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2208051912.1_1660691114995_0.5999608225100048"},"_hasShrinkwrap":false},"1.2208172101.0":{"name":"@bentoproject/fit-text","version":"1.2208172101.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208172101.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"372d5623dc25138bb97bd48cd5f97f3be8008658","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2208172101.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-Oy44bsz4V/+YiX4AmKdH4DJt/4l4P0/2xizO0Z5RGbeQA8hIdF/4c23lWzqRWqfbWkCDZPMOAOO7d0to40Ry0g==","shasum":"290eef0bc83dfa0a03fd75c7192afa319117688c","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2208172101.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/RJrxiY7h9kNRy1/+Z+XbfUOqjpbIqkldw9SIrKwZrAIhAKOoxM+atGJIQcskwzOIsOx3LNprAm+RUTLmhnH+FpXc"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBpAXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWqw//Sx+I9HwlQy8eGJ0lQLxiDMqwdHRBveBti8z+vOfB20a8R8Sj\r\nV5Uz1gDQPxxa/SAN2Gvkg+vigPRY5txIoR29gJK4X3USyJKJy/v6x7SAoDtY\r\nbncJUhN8UzsGCMXVX7kcq23/XKAGyzaCZgnmfCGsV9R3epioyk+LFv3q5I/e\r\n3oQwPzacu5Z08kL7BekiQxjA3losWCAaF5DTyKojjpehnmXJmlJm9HNboyy6\r\nwoxXgrnotmvgx3OWCU3aA7x21clqPfZButkMU80Yntm8QjVWf8hoX97Cw8uh\r\nbHILvGw6Xi6ZbmtKEMAxW5c4cwFTPuJEXLKXK9KY/TEyP3ceo4/o8ggyRscJ\r\nOXSjzkg0uFQEooKoM44I94dILVZoSZQdc6yjoyWfOuYWHqDlP3GYO/zuk+p9\r\n3q04JBwZ2Z+LGFrNsfQ3b5+Csp0hLgDI/tiB6y9mpZ9UPJvtU7q0qOccU92J\r\n0s6fphESZVo6NoWcv2paB01SCRmYtoavMBGnqqJDw8xm25JS8O+st066WWAy\r\nFkRsC+tevYLxAuTvBvnH4f09/qoTZxDE5yEiIGoS+iZE/OnOCyGCn77xUmHT\r\nX/XpiK8zMmigrav/tU+YFKl4b1TuBT4lOMUNQwBjYHGlwJ7IUkTb3GMm/n+X\r\n8xrkZBbvfNdtaaPzAzpbvjautjvrKrvdMSY=\r\n=q6s9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2208172101.0_1661374485718_0.69635450302861"},"_hasShrinkwrap":false},"1.2208242209.0":{"name":"@bentoproject/fit-text","version":"1.2208242209.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2208242209.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-4KFDd/vcNztIIATBx0oBWgRdqYxUZdh4IXCgH1wKbFg9syS6CDKjzgWV3hYBeYlGXlgirqwqwXNR4vd9lPeSeA==","shasum":"ed234555057d663a29a6adbca138927deca967ae","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2208242209.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFHrlyOcqW6k4p1eEKLWcFTgPNaDuKGbGDTYCUdFjEAYAiAguDNTpLA5RBJbiQ42oPBJuR1V3t7zQVjyyeY1cjy/+A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBzIWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRyRAAgrZla+4Y4tX+lPa1yb3UNss9OAv6fIcd1ZK0KGN5StXpARtw\r\n8ZLp7sJnSnGhSHHVpUyua7Uk5dbvfeVOCLBKzlSw4nbGSUKxW8L0iy6ths9N\r\nObBI+vjNgcQWCwZ/G/QkGFeFOJba4nJtLPyTxqvs5HCigOCi8Y9DfPQKewwp\r\nGSZ3iHT6p0kZwAxNk1tUkhhJdYVUOHBJU/UiuiUd5iyF4cznSqwJ65fwl4ZU\r\nWDPM1IK/F0S0ni0fz8ghDM52x0wYqDXpqQZ+Rpeq9Fw2OCERzBFby4XFYwal\r\nsbJ0h/YXxRgCMONJF7bBk3T3Q7CLpNPu+fScCHr0YZxBVwX4Fq4uNhOINrkP\r\nclJ5slxNTATNuwNrPApl2rpMallXlj2t7gqEJDg8jWWoM8FxJqVtFyty8i3/\r\nNrw6KqPfstHbfCRZ78N5B6VQj5FD7QJkbszC1UDuVpqUlnX0yG0cYPCZF1Km\r\noJHlH3WZeppmr7XB6AhDhqdbUIj+0SUQGWi0uWnZRTMFtxGq7MEd+jLA7L+r\r\nzcUTlyNcR7jALoMpdTD2rrHvpYlV/2J8k3zyj0JdiFm2A3z+0xv9T+/82mmn\r\nle5e4ORvzWBHzamH0HiYDcXgW0Tpb0fOc0rD1Qw93drvnCRYP7JJbfQd0vlz\r\nLY282jX0uvOH64hZ2S5NFR4fySjQt4o+cPo=\r\n=Kumz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2208242209.0_1661415957856_0.8622256216087405"},"_hasShrinkwrap":false},"1.2209072154.0":{"name":"@bentoproject/fit-text","version":"1.2209072154.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2209072154.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-pY+h/AvQDhaZ+Vpy3j4l2H9k8J9cX7NmGYdqwBH8MQvlwmc+i/Y8omVAy611n2G4CcWHuM597qpIk7ZVWnxyCA==","shasum":"d254e324681ec7dfb942c3b7d55e7405b2a86700","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2209072154.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA2EAkU5ppr6A1dYhzqhs7p9s45kh5hcBBkXZbFGSaHiAiEAvKxAI6fe88Cualpbs3/+gwV/xUaIA9v2VnJJ812vWk8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGaazACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6VQ/8D8aeS5TY0Ci32xk91EX/14Ry5VTrB/E2r5FjuMQO64X25E3o\r\nQIJ5OQ37DUsqoi5AgM+BXkz3G8qK61Cmo4jHj7El52H2oiHtDofwH7DN8bmY\r\ndjL86XfevaCyhEvNDea7WvZcy4xHGjx57N1SkO+WspDec7bhthgXzRpd1GNv\r\nzL3pTNR6cj3x49WrwvWw4uxtAiif0hPiqaJEFvYG37ORJvoHD38uysH+l+Rv\r\n5IMQuPwA6osVmFOFgHUgte63Spe8q8KCpCV8+SgusL7fnRCvDESLV1t4978D\r\nhj6JmFTqhHClNGGL346ITkOvvVv9Jev2U1mfpOLECQcfLDwe2+YGiGtQbINE\r\nYz+Chr6LJTq3ETIRYqgaIbOBJygH5jc0sebk+j8h3DIJgNw1G405hLBjayHo\r\nwh1znhij7bswEjXqfB/ewo98df04FypckYi6tPcRIAOtMQ4jnn+tpU4tNT4R\r\nMEP+uQtiLuNVG0UbraCEn0jhg1zbHU8uZMCT7GyNV45+MZ+n0sgbzuNJKWty\r\nyfME1/VSZpTU7KQ9ZidUrHKteqGGzElgMGoI6rCl6zHXt93UhUvP8LQQWf69\r\npDfabrhjydDNa4MshwsbEErC8UefEsO35sFmkDmtBPUVDnFo85h+tXt/yuBx\r\npnEOlR/7wuf4VHf1+q5heaUHMnd0hGWWTgE=\r\n=u/ky\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2209072154.0_1662625459512_0.033437625487046985"},"_hasShrinkwrap":false},"1.2209131909.0":{"name":"@bentoproject/fit-text","version":"1.2209131909.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2209131909.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"b912a3976adc47e6a81ae645cb98e51d1e778150","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2209131909.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-kf92xabClpJsgRIPbvYtWaZh5HZt7rLkSn/iuVP3cwsilvc83qIza14Mjurwm8HEr+44jQRQUdklm+BSWxc6VQ==","shasum":"fc8b7116ded79d82094539071d449e109edd0381","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2209131909.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwV5CCvxjEoNX8dwZ8iRi1hJ4st09nGB9R4CYuWPRzEQIhAIFmza+AbsAdjPz74X/mIsswOY6LGvOIClPaAwQy9qFv"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIZQtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqr+xAAg5LvuRbJnSsp447hN69g18vHnd1Oz+BQFeNPmz/vP4+u2tan\r\nriguHywdiARnY1SD782lJ/OA9VwlYR/TYXI+PRzaOADzm3w2i2/tu1uhj/18\r\nbMMWjchy48L9vTFsznizowVgyFZZ7Wv76DmFRbLzoAFSp6z6CUaD3llaSmk3\r\nzQ+I52gIy33y9mBO3ZZrLEgVCbmz+TOM2p/Pmmbb81ht7Ai5cYbQn6THixlR\r\n2w0JVmNhJ17X85dUoRNyywVc3wlvePgOEIfudH5tq5ceX1AYMOy6KeLcvExe\r\nWZ7SUzG+xbyJ5INAuMUhcN3z2fMQpTaprMSVu80gb1H8uHyEuHhfZbZ8vn4V\r\nN2AotqTmT8g6qrCz/32Q+cglrHk2I9ACwtcGIAI/1qk+a2Ezp279fLaopbjG\r\ncZSZcer4vamyTAm3YzabHTTiUn/u4seS2F//aTiJjRn08tDSISoKzuPVYP84\r\nSRbLbZkODasKXAWIUL7GpzHpMAuw3TCHcffFW2cbcfcuzHvPHkDe1faqa8+B\r\n0vUkzPRmZN9Kz42d2fP+x8v5P9l9f9d74WdXOr/QbdEn9c6mc6tQLTQhz7n8\r\nFbTgG/2WjAVGzsqMPXQi3LkON17KOoN0/vUX5YHvCRWs2MY5i+XjCFTuM1RL\r\noe47Il0I1U3k+AFrrSnJ4KA5rKWZWjlscSw=\r\n=3J8c\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2209131909.0_1663145005117_0.3840422483293129"},"_hasShrinkwrap":false},"1.2208242209.1":{"name":"@bentoproject/fit-text","version":"1.2208242209.1","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2208242209.1","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-URQBglSch2AhK1ifRdAedjqFxKrmZBsCbtbw1PHL4x3dc7zscJLoybNjwbDL/NQWkpHMAKyG8gsXNpsixY5GIg==","shasum":"76088f5ef245334cbbd7134bddc4addab1ed234e","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2208242209.1.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDw7XhkNDuPGxFAZcqPKklnAQURd22KSFekmOM1psOzlwIgCUY6CLMIo/2OYx5WJJzyO1b2VplGeDi6mlbZCEOv37I="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjI1XyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAgA/8CW9h66DG4+PbaOATtbQK5jv6VxvVNAlZBHTpdTRHQqS2I41r\r\nxdSH7SkfhHFD2okiriLLqjE3y2nL8AlkQe6j4N0HUxcD+icc2uneo1+zwcie\r\ndMqf2roZ4cecrtP7/J4tyA27iJ3JxVY2XsB2uvJeRmLREojCz3B0CBf5Kb40\r\ncR0+Hoe1aUeHX9jhnl7MGPGOMZxtMGfopf1pTDvsgpDR1DTxoNtqoR49YXV6\r\nc8fIzGVy+eKAjJaA09+dk56sx4H26Cc3vX/rrbM7aV/XolpREGgOyzm38fiv\r\n+vW6h6mzQOClbzfqPllYPqT1P+E8u9OK9y2jik7SDaURfcY+5o5NQFXIIxMj\r\nhLt/H5uYU7xJtKI3gpmIa5kkG0act2cgNgn77nBNRKILsCeY0dQz5J+qCIPB\r\nd3GghTQdMddmBeyUI6WmTUYmgT8VXi6LkZ9v+vbWlY6BsJZipq9b2JtJVoFt\r\nx+MatRloFB+wygL3TxfiNtDLmaJ/TpJL+NNI7QCtuieUgRW3hpGlwU2ayIUe\r\nCBkWoJdS/Ss2bi8WTycCx9CZcPTse3GrrrwIzONp/YhRAdJjXw7eeXh0Az5l\r\nmhUucDvolzstLnCkF7JEbDpa+FWKeM8a31iVmzvruFFU0yqOt1AXwE5liBqZ\r\ng+OIfly9yT6bFnqrhLZbkQjPlVdZSG8bo1w=\r\n=8JIe\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2208242209.1_1663260146137_0.27182271766118604"},"_hasShrinkwrap":false},"1.2209142312.0":{"name":"@bentoproject/fit-text","version":"1.2209142312.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2209142312.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-pL7nDXXwAHnyDxFiK+iSlE+MBfcR13c/0sQzfIkdfzufSf2zNicgoYN3EsET0gWY46FQ8dWsRSauiQh9ayTsew==","shasum":"c78e382f5967162bf6cf512a8e3ac08979c2f496","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2209142312.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAu8g6jw1m83oSuXiQr2I21SyVT0ucryQfdJgW2LaLTIAiBsWkhGMelGMa/LmTayKU7ZB7frHh1tb4s7VyB2JkQppQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKjmWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2Xw/7B4aGfRlmcVE4CHUha3BhIbX4vACDVDaYFJwuJ7pUV527aj9c\r\nwH2B8CVAh8BxxWBtdPWoHAsAeh2X1C72tIeyzDqnuS/wjh8lf56EyqeKqL0c\r\n4fzyA+ZdYghnGdc7lcolTZSl3IAt2seocaDp/jSTjwXWzoezSOxSyy0YvxFQ\r\ny7G2HMiYeFVT4pJR6YnRS4TdVbrqmpsaM1OAZp3YZk+7wj+GjUFoeh0CdJiQ\r\nKAnRAEpxJt2I/9QhDHtLuVujgKHbTmqGiY6oNW5knzQUjOOTN9dTvS3YGyAV\r\n3PbEYaLYHSotkIGjYw0zRXVWh0IaGZJwEfSdwvcEsztHlOUzlUvVwFsA6vhR\r\nbM62PI7E03f9ZDSpvl4ywbBPE5JxcGzcA7VbSS4MNmqfnCAuvMw1WSAafqUe\r\n+EHNx3MhsQ+br9CziGriJctEd+qeVHFD011UHBOgyBQ1GKdPpJW4K6fKScyq\r\nIX4fiX+WNeqfIQ7rq+BlytwD/u8DPgcPCPs4FR0AwkGlQodtsflRbXr8FZIs\r\nt+qRE4ZxcTD2bknJV944/4Mtc3G8IEZYgaEI4A1qnlzw73BKfMtKnJDJ54yA\r\nqeHHSJNg9Z6bas6JgymxRy1Wj9vVtrpUeFX4ins7XjojCbGRfD5Bi9lBKFy2\r\nz3wc/sxZf+HoOeQU1IeLINy/AzArLeUb4IE=\r\n=xQQx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2209142312.0_1663711638013_0.2425791425086936"},"_hasShrinkwrap":false},"1.2210010655.0":{"name":"@bentoproject/fit-text","version":"1.2210010655.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2210010655.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-noCl1lQeMEiSjIe07ezVc3Z9MQqDH8a5EFfi9LeXQsECCWLkE8FWB/4ouz3Xd+JugNR3C3h32tD+JLtGwkWGGQ==","shasum":"8b7e4935972214fac408940e0c5f94aeb6e405d9","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2210010655.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnW3e7p+pHBGHgkMKS6+fmEIEpMfsKISWRtJPHNzhhBgIgPW1J2za3Hsd2IDKirTwLJo5EzbST0UUPYBxpujxtI1k="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGQUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocuxAAkwBJfzbOW9Ije43+BtJWHqWF9t0DrTjzFN61QknHI+87de3V\r\nTPHC7jynTEY0YCB7WoaFXjEcCsnZuCI9i1BBIBd9KPdzT6tztZvSP6fmrD6t\r\nho1tIK7ukoOeop7ifuptLOgvXjz/T4MPCyUdcDcyZWsdT6SXnoT93I36mL+x\r\n8SAsVm5FTvHbC2EU5aqVtqGgRgNRAu565MaFP0Jd3NBSH5ftNLLaPo/e1gEw\r\nwzXV6NlOQaNCR41jY6lF0Gg7DQyCnRbL5vhDOpBZG/2wqmO78ezwxbt5KstI\r\nnm06hqiQ7B454bH+aFGZenPxreuaDfz2a294q00wJGYlshfPFgUQTOuffeEn\r\nBRFOLhyHypb9/ViutymuZtoa6idjIT+5/8amthvEJUysf6ud5HJRSTuTQJNp\r\nhPYnCiykTEoNSAbsSoP/kQEe2uyVBxVW6yvDw1YC0uo1wCN3k8Q+l2j/MnvV\r\n1IH+DaiY3x2U0DGPZ9SFCKXH7+jL1O4Vd7WUN8rMxO4+F5uK6FIOgiEA2jnj\r\nWm9c8kPrdsHSjIU7pqcPyPT3cAtrh01JvSVwIm/fditMNitmMKroW9lfXGgb\r\nkkFSDnVZSQyYlodlHRYNWelGqkzMFnNvWeaJITp8t9vWpcsJ6vE9r1YxeD5l\r\ns+E/yHJ9Wix2GT4F8WoPfQXIGilzRXv0uxM=\r\n=ufTO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2210010655.0_1664902164637_0.7544424075041467"},"_hasShrinkwrap":false},"1.2210041838.0":{"name":"@bentoproject/fit-text","version":"1.2210041838.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210041838.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"e79aecc1c4639b06a7f2843d961bb14f293a53ce","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2210041838.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-wnQmhMTtJjpduX/iZkuUjrWbBfjqjGamcJEsisa/s7Vzz1m6qhnkjW6FA1Qx1sgCmrk/ce0MOvQn1JJwyH6wpw==","shasum":"8bcafa31fb74e1c942219b7cfc8196a29e627c96","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2210041838.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlZXtrHkhmz3vgRoA4Z7AmoqkFx6dUKQD8sQSgPj38bwIgefbSZvE0bA0qbVAsHMDg1ymj1VPFbyk+jK/Ph7Ckp5o="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPUBXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTJRAAhLgjy11ZfiH6tDeu2stQzvfZmMHtiEZTHvFeNVpNAK5l8KR+\r\nyQ/z8T8SxQRSDt7OO5EIsSioHvEKxzyw/ZhPlOMTGqz9MZJvpLaNYJxjM9AR\r\nO5/9Ptr4AgnftsUbVDyz7Nj3J9bGkGbnMR5Vxa4abhhFQS/Ef5nvKeEqrqtY\r\nVlZfyvAVaqVIZg+M0HB2FTP63L+gzfvz/tv8fFqqpLiXHP9h/yuRSkYboSl6\r\n8v3vBuGSLWcsett3rOAZXU3lrPF1wJNVaj7NOzbhaFe55XflBc9JjWP3m9cU\r\njQf4vQeaaD5EJrgX2t6GRebHEdC6g8c+DNRpFoQt1EIq4sttQlbYztFp5hE9\r\nM9tZe53SQxBN5dAlPpmSPgPOIhnHWkX1Xwzolqv1hkJfDR+AItZzUtes1Dhd\r\ncliLi0cvPs0RF6u8V7lxXw6ch2fa7dZzfVzoz61yEYxla/4vkOGMX0mbAnFV\r\na9jO8h17tnmgQz0uFE7z4TNrFgnM6VZvT7N3iBPDVfp5T0IoWSym6rbqQbff\r\nqjK4rT00j49zKrAWK8BzeSQxtoaKGTK8m37Ru8twuYFPKYwrsI9O+drOvWId\r\n0Nv1Oj2WfC/hxyi+T+VwI5P1htXOiW/lKLGc2DghP5bB8RXWmJ89QMRkLcw+\r\n2fStx7f+NJW1ZTc4Hk6RPCDKpJcgaZtqkjQ=\r\n=b0+O\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2210041838.0_1664958551422_0.09528681093423019"},"_hasShrinkwrap":false},"1.2210052034.0":{"name":"@bentoproject/fit-text","version":"1.2210052034.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210052034.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"8a0a0067f57f89d0566ee1db3d4bfeea072d3c56","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2210052034.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-QxxymYyD7tTj88qzfmd619tllI/tVRPOMxX/QW9TQ7a/Fls6NjVb87ZeP+pdZ1YhMTDxqwjpFwX0KBGurAT/SQ==","shasum":"86acf9de2f2e9421a33c01aa0dbc74a7ad74dc19","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2210052034.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDraFVejSwpdit6vyQQWGp1g75iIbQwk7B7bazO5fwiPAiEAtek0zInCz5co7mfG9XKwLHpEK92HI/Ga9o59gCJEN28="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPpDyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDQQ/9H2zre7gACSHMT/jsZ0K4BGL7MYFcFpUi3N4jLyiwgvyybFV2\r\nOnJ75dgxINGVO7ESZYZGkJbXrtleDHrRtA048z1b3PoBq0hCmVqsQ5pj1XqB\r\nKeIUCEEeAg07NbQqdaW6xDutWwRtt9h5TwXlaTKT6y7FflJ4wmVvoahA54OB\r\n/79YSIMpAw3ujk71oicuvt4rogJH8AB5QXFa/6CT5hHgHjjx3wRNtie9wgjT\r\nO5J0jXko63F9Rm5o147TuSz8BzlGdqM6bzmWuDqya948TXDLWS82u6n7ghBK\r\nlHn4XBTkxYMJ/nvEZrNcc0AxgObIV40I+sy+ygLPBGaM2ftYCdc59P/fxBex\r\neqitGc8OMTHWDLA3maQfdI64ZmoXrz4QH/teV5N4dbuSM6AOUhHwpcVaSG+/\r\nuRNTcj8JLxJFQP9tO0iaq+2Tkt1j410CuL4sjySJS+86rqs/Hb/8/OcCh4C1\r\nElpIwsKIjqTAhqeFNQmOE/n5LUcYAwHNq0WpdhtD8ZnJ8DLIyA+Y0XUpqD5W\r\n2+SJg08dM3SvkYmnlf0a5bp41iREMgd313QsFdZgRVhEwhobIGhGBSOwBR4V\r\nyzr9MBFzt2zYkmKupsmaD81z+GQaOccfWAm2ZThonugi2wNz4e2Ho1AaqtDc\r\nrcdTYNh1Y7gyBNg+s8nuem5cmJrCNJfqnO8=\r\n=RhQQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2210052034.0_1665044722578_0.41627778324225173"},"_hasShrinkwrap":false},"1.2210071758.0":{"name":"@bentoproject/fit-text","version":"1.2210071758.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210071758.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"7c969ff5fd5406304f6a9867fa0db59b74e94524","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2210071758.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-2XlqgpxPZzSl2xc3iZJIJku96fy/6JnsG627i3YZYMw46hgi1iosTlJtxuaYkGvasomSnE9zpD0hmG5JZ9U2nA==","shasum":"a7898eec6cd14be4208e7a9d37ff19e6e827e046","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2210071758.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoUKunk1d5vqnsryRR7YfL+vfZax7hDLPEP2OnM7jgLQIhAL6axdOFtIvoxj6huyvN78hLywuwVXh2wzBLlL5g9k9Z"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQTPyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8VQ//TqxLB1hdWvwGewmPOZ21QxGfKAaFNB6RKDRv7/z8az41Hb36\r\nr4IpkHcw0NoAISnvsTJeeLu8aXYpmwXdDTLxNNMJoGEmXhax39pDRAkuwdFa\r\nq1C/SV5+Xp3EI7p4ssk/XJ2DWt+HyFV9gqViO8QedKrNw04SGyMray9fxewr\r\nDU0hTRfHcVxjp6UOHEoc1UPZFiWQlXSWxgeK6yFeRC1kWZAkVY5cfAq1VHT2\r\nMumL9MrjbiGrv4hlwRpwayUfxiXQUyrf4T/VNP10aJLiJmWoDx1s6nZr8a9i\r\nQ9+u5o8ewRWb3SyzuNkxDeXsMJrsfTB2UX0XYyLIKOTs4i6YzB4VGiNqysLL\r\nt3C9nOke/8TSnNQ+pto8GJqZ8yK1FOW7lCHt3/mUiYOhro0/sJ3H+pE0CHvC\r\nUTQPXF2aPEC8TTaP/OMslol2awPbykBS9dzSouh+xg9UTgfZUbOoAl5K6Rva\r\nXR5GyvGRZ7S1pIwaI2sNbMXLagMYz5U6RtRRE1ke2xVSq8NtcwH1uYWZWK8W\r\nFGMievVoz5POAYZCAdrTSyAkVS5LKuOyL4Y8DU9CzpLgJp33kvIbyVpj16nl\r\ncUxlkcDiuWJ+7hjBLfanDBlbtkw1nz3K6SrgOSM53RUV1sAhx4Sg3pwADoYw\r\nxzns+IFlT7ts+UubQctrOWKaTKiizDAM7aI=\r\n=NSQe\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2210071758.0_1665217521969_0.6675740466352456"},"_hasShrinkwrap":false},"1.2210112333.0":{"name":"@bentoproject/fit-text","version":"1.2210112333.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210112333.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"1d82bae06844d5413aeb632cfb2f3ef443548ad0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2210112333.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-AcJhkv2AVy+rroRnl7fyPc0Q7TKpb9Q99TZ4xTWTdmbJa+ql7V3/v3QO/0fKX9tvwgZbshO8+PiUXsfO9f+HXg==","shasum":"13c74534425ecab532c6d1712b26c4b95db470c0","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2210112333.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2BP7VWoKYouXoe1ekAMjqazRlMeIpw+bhO3z0nYxgEQIhAKMid2alNbMTbcVD5MCnt7g+3cd7k8zUNEQ6BLxTtiNF"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRnnIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbSw/+NZqVKuIZUGs8aefKt0h4FWsmfj11wbA5R0u/iGno4alM9qJL\r\n+qEPeQfi3+g27zBALHd9hI3KOJfXFyNIqnO2EXMwUZhuFNqvkSAXHTEigV1x\r\nPqduFvXR7ALPJRtWhQUijMiYlKsJL/Cp3X5NAWwQ4J4f08cXNuZcj3LZJw+w\r\nKVN6DtIqvR2GY0tGksvu1CHNj7U3oc6l9j0hfsxUtPm22Xh8iQ928T0WOni0\r\nCqvEQ3vdPYXVWuaKD4kRJXdT0xFBmsnvxiQGdAvzuT/DOjzhoFLoExnQrsxw\r\n5rE97vmSmjRninR2fxG2KRVyWeb1RiMjgqu0LDUixS6fBQinHNDbQxZLitwL\r\nzaP3E6gwU3arNIwfIRe+5FaDEmf7y/BTIw/FxO6IlZHa5/OjL9ONFj/0j4Uc\r\nRYTs5g8PNXvQoIjVR3+2K206aMN0eFWk8LUXWGw9mZpEp8xTwMjFrwqubvCp\r\n1PvKSIQLb/t7Hj4vTDfMzfrcTBmH7gZIajZHVN2ij/PGBMu8dpFG45MvB8HS\r\n33g7u37mN5Iu+k3bvvfjeelRRFlsOfW83fNOOH4MRHznzjX0N06CsKlfavAM\r\n8iWlu2lhQ5ZkQtDTIQAwZo3Pr9cwQWZ98cmLAlc0hqtRMRHYCdXDWXgOQE82\r\nXvZH5/nBVYZ3LComKHaRBRxwpD/pY4aPxyY=\r\n=hn5U\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2210112333.0_1665563080063_0.6917144097275563"},"_hasShrinkwrap":false},"1.2210142102.0":{"name":"@bentoproject/fit-text","version":"1.2210142102.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210142102.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"4cbbe2b23e7b0c5b0c005c94a574ea48a45f7693","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2210142102.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-bRkMd5PkugWq6EK7rwkZuyzCpBBnhTo4wTTvr6RtmvFHEVqT0itEHRzm007TICM2JHM6HbEYQkvaRJaRN4WQ1Q==","shasum":"fb683dd7a32763e0f1c491c21b524d0831af68fb","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2210142102.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEsSHob5bzIPBO6G8oKAAvNQZ1nS4g8eBNYyaiQvhWYgIgSdkm65tYrqhmUOapDPRffVj7ynJ6u04Qz1OL6OYR5uU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSm4NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmom0Q/+MASnvqq6lA9bHR4zCoTMPxbz+i8HxGc7cQmPiKvbl7kvBdKM\r\n26Twy3yzyzEfMcJ5wVa2xt2fgeuUn9ltOzDnNLDd2XFYFn3j2/htBDrJMw8U\r\nnVbUaqo7ugX1x9/zRkzvMDEJjopZ8PqdFMm4QdWdNXTGkbJYBetoEsFyqB+z\r\n24AmX3qkrGvkv8shPBbyUuMN8P3TUNBHCEJ6MZerzqPHERNZtRxUqFcMG4nA\r\nxoYInL+dUIEtkWjUkmre/wfUMFTQ58kaaxgwwtlaEc4sgVPsUpZbKPYwAZEA\r\nHD9XV9nj1cJJmLhYlz8yweQ4iLDXykCJ152dVYwV3GM2AtwG/U3jFkiPXiJH\r\nZpec1M20mcWHmbmjmEKyT58Jt2aAL4lrvVMXl7rOY1CQFX1IyuauNj5gQQdw\r\nsZX/ygeTZgZpZ1Px1OA0Lm0KY6mWdOz2l+Pie7/3Z0RcGW2VBGOUVC12ap5I\r\n8vlHZsFBrEYaVh7/v+aYq7KNoDebdAhfOFVOmDpg15obFVQyTld79p6OdQcb\r\nbQjeIe9urx7M3tOEOOWXkrKViARSbRSyPCKAxqOse2LkODSCModC2RCYh1ay\r\nzYWb2MWI5vtQcOJhRyw/aGyz64tQeeMBoBpB3V715y6NvQ+vysl0OUTFU7lD\r\n8iT5bo/5kmU0D3kY6pKusguSPs55DvEAt8E=\r\n=eup4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2210142102.0_1665822221567_0.033020646725918645"},"_hasShrinkwrap":false},"1.2210172057.0":{"name":"@bentoproject/fit-text","version":"1.2210172057.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2210172057.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-IMvENiHi6fFlLl0rBk7sWsmRFlE0fMU6HRIE4a0cO5zNcNHAfWcgPMm33F3qlgPPJi7OrHyAHjNPMRN7Y1cj7w==","shasum":"721280c04527f5aa53a58d36814a5b42e830648f","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2210172057.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoQ5a/yGfAzmL0hrdwWcOpN4Rnv1IHBnyPEupjY60riQIgUWQfV18njc0dEVOi6+RycbWlr0+qzmKbbvYDioiZA6Q="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTmNKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9JQ//eS3HNS4624r9uLAijeJxOCMcB0A3hMABV7kfaFaSrdjQBo4x\r\nbCAjnRjcBa4SXEi9IEgYrNBYI+ANF5imCq6RQwnvLdloJjrdIITlXCKv1MAi\r\nEx6wT+AcZBGWxTralNNVDRdoRJ1m8DgdgF3yL2mY8MorckGrwcW9XbC+0D6M\r\nLmxgxcehOWK6ac0gocrSpLjtbHWLvB4BpXO3xPOSxYq/XIm7xZGlmN8yjuKf\r\nst6P8fBzWt0PK1uWfFb9K/iM0mS17rN1/Bs4124hDLROTwU1xxscjLTUyByk\r\nFhBnOTe2GF4QUvtl39MhG7XPgabBRpfzE3rKUtAA4ns1TYfVj+czcyp3czKY\r\nX+xROEFTaBCNHndmYth5J4OFornu9MBc7i0EOkyIbBQ2OfHdNLVbIxN0XYds\r\n0MWZsPkpIwpLS+uW2MihvyoatieGMse5lIFeeQ3r40OzD6MSA6Cwk0mVxZxG\r\nAqd2ycM5v72Yc/VDII0mKLtVg+ofX0G/put9byiQ+hUtQk3yGpty6v84qbrB\r\nVjjcXW74L6usoASjFcogeeS/MTtCr6GjmkI/PSNeet41R1PCq5SEMinT/FKo\r\nb1rkhnVNL8Xxu2CDRjlyFTn/5w66qqHbn0WHVb9Qf56yp7ny3p6RyPGfuAUI\r\nyP2JL0LK3AJ32HOZC31FEDbp8RWmRTg/jo4=\r\n=A7Lr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2210172057.0_1666081610265_0.3132471524200082"},"_hasShrinkwrap":false},"1.2210191347.0":{"name":"@bentoproject/fit-text","version":"1.2210191347.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210191347.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"b2888af97582abcfae901ed340328b22e9caf2fc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2210191347.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-i7k5LH4IaRspynO56ZTMorGyCicd6AwD4/8G65oShpHeRhrvu4k8OsghyHVYvVP+Zxk+UD1J+7wpj8q0KyPlAQ==","shasum":"8682e1884b66671d2fead04eac5942d21da3d4ed","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2210191347.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEaovbYxOYY66h+DwWaJKK1G2f6sqoUlkMbhkPYpgbNPAiBOKH83XP6NiagGvNyNmp0i2bijcSAufyOo6dZn5L1Bog=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUQXJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpljw//flEmlRwdnJPPDDsYDdkG4GWF6dQf51mFb4Q6pCrd8u6wURT5\r\nKqhPYYIlkxNUmxTYGkZ+qVXDefgqGmfV+7t3yq6PYk1Ja+oGoXpx/q2ZrC9w\r\nDCfA72mOXP59ZrL4K/eqYKy6KJ6+ov5B3eJjPrRqIWaUIelMcEYY9A9O6/cV\r\nJUbfED4JXPctJjey4rIR8SOeav32hsFiOSFsMrrDCWbVK7v/ALXiy2WArhVM\r\njiS5aRIWpBVWNYge0s1ED501mekWlLWStd0w57fKPcXehUGns5wv/8z/csIN\r\nKF2fH2Mle+sYyKHciEsA421j3pbkMu/OdZQrekZgB8EoPcwPEMJSsvjzbT+P\r\neKyBRrPLNvDOnmP9GE6VQZE3LBjf9EqW9qxJxqBq/BJXo+lFyrRAwzhRLVyt\r\nASCuyf9eBqZS3IPBicWHhwCu7t8DQhNmc/22cy5cJ2Eo/CROiXpkq8LRaBCw\r\n7SUkxFp4G8fBlPqs65R2RHfnfQOvpXWjpHPQrIG/JAGgMeqTARqjRidQXoHS\r\nwZFBtJK/CXHv34oOHWC/qpSUYip++VKxh9a8pfWSALHyrYx/dqQraFxjO8VN\r\nXkGSenFVqPL82/dUe9g7JVkOwzTxyNxektnWVwXwleAiBI83cZ7vn1w/uLvt\r\n4zZ7J6BOdRoShcRWmrQPgeUrZ3zYSFM+YmA=\r\n=uSoe\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2210191347.0_1666254281520_0.9581318035559412"},"_hasShrinkwrap":false},"1.2210211855.0":{"name":"@bentoproject/fit-text","version":"1.2210211855.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2210211855.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-U01ZvlZL/bAwJVE8E8vyA/JtJMrhVJFXY7lfniwXVc4i01FFHdrc6yDH1BcskYn6ffih96hl4P7hbHjcMJigyg==","shasum":"39fe216a63c58a031b5efe1b702da0abca2b1e75","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2210211855.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB0nKTqJfdpohP9u0sI53ofyfVdBmkq5VgH61w+W1dVZAiEAtcBMU3nYm49VqeMMbdT4bOFxwXEAHzw/LvXYfxNFaTQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjU6huACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomfQ/9FgUyjzsrxOFqZLU++lciMz+2CeQ+n9aG45Rg6aEotGktkGeO\r\nDPb4AzgCnE2IWIcvdFMNBgGUQDI+Bny/AuzdjhlZd9GSskvHeR5yExhYI3u6\r\n5wZ0CqS9/Agkg5ZxeyhwPkic82xw1aun3xeTl0cgUxxvfPmEDNewS+wZmwdI\r\nOEB42aJEVtXe1/TciSHH+tG17Rt04KDJ0dpB0WitcquL8BfZtJ0wU0TOaOIH\r\n7mlF/HSbyArlwZVXelP2EsP1a8bJnv9opPyvAqa+KzJ/MCwZcaOx2H2Av3Ye\r\nb1IidyJu9+oI16FLHca/AgN5H2AJK3T5nyCpZlAZ5QM3eZGXLW6N+q82Acc/\r\nkG8fKtV9AGcnBjWBkvOS9cX7UGpPxnb8i8XZYz2tjlg/kRQYWCd/SUtlLwtf\r\nv+8KZmUvGL2Q2gnamK7Bvee+niEQztgX6lS1/MXleIXgiWcZt+mhCpUVHcZ/\r\nUrhXUp+QwEgC0nLdyCukxlzWxpjIqcj/d7HAfFkgjk7+slzRHsy0b1rzzwhJ\r\nLgpV/Lnx0lG9Du5b9srzbm+ZrEv0NXEfCu3zUDlzFokFJxmanYY5yWLBkTx9\r\nL9KYG/bxU/0nMYTK2T3steg9OHWhOgODp+3ojPXM5OKH+XyhWHCL+tD/1oa8\r\n1xfmfzOtwvNv+YR7GGLw1pZCUoaE0kEzDuY=\r\n=0QA9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2210211855.0_1666426990652_0.52496561610058"},"_hasShrinkwrap":false},"1.2210251605.0":{"name":"@bentoproject/fit-text","version":"1.2210251605.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210251605.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"a1f66509b5a6104dc33409f285dac1ab133942f6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2210251605.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-x18Ut2E4F0UFmKUES5R/ealmJxsuc64Z3F3+zoA9ggxAQNuDq2Gl4ZHglAlJZZ2/MiK8EVz7q7JuMnRrXtkn/A==","shasum":"6a31387af4cbe1f3ded73b6f79cce65f56fe427a","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2210251605.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEbC4j6szEuTtlPZrauuOrMIU7mEpGAbnhai220XfqDzAiEAhg6uJQdACvUQdf80WUdv7xggB4sg/Sq/y7DG7JRp5KY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWO9WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWkQ//T0IzprC6LtuTAh/jBrnCz2RPhbBnW/b5VCKiHzD2NIaWDdTf\r\n4rTiu4E5oq0P9M/v1hu3U4Nce+sPu+DNnqIdAYdmL7B2v2e55tA0HpanY0Hr\r\n9N/VnhP1n1VNqV9K24upsjZtNLASyM+ALPyBfaaNdqMJUNYKW/LAfw0l5kC8\r\np5Oe/lzsKlHTwcMT4E+k1CPo8fmKMrVe/Vc7OZ2aYuH3f2jmBaKaAnUY4b/j\r\naeeAm3nagRt6z4ZYBhGU/ofrA72ZlAPLx+NO+XGQdSTPLCXQmqwoRh2wbT12\r\nFhI0p8Qzt33+zxlTeahgMeCattsmHUqKZLynKCSw7iGdRmShoQycbcJVq0Q3\r\nQaoaQIMl5NhOBPAZ5aVPUZ6jTYQijC8ewD4niX/3+MKBJSo/93CxEGvSP/CG\r\n/TE8jt+Z1VGWbUpI9fd66l0G2/QPIOh8XMbt/3hfBzr8BTxtbRcKeR1dDEMB\r\npOyxD4ZYjaGoSVSBCxN9260tuTtS/IkXN5g1rC0KCeQdjVAc5w9h9gQzEd2x\r\nLyEkarLVE+0SwC4DSI6z5Avpv/cMIRo2/HaNQUx5k1PbDKzn5X355lVnL7rp\r\nLA+qn2epLYdr4upmWNY1uKPrrMB0IHANX5/CEithHg6cRMNXxL9NVSIH4zAf\r\nJE488iuKzP6ASWm3NPGxGEFVQUj+sQV7Ruw=\r\n=sSSp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2210251605.0_1666772822340_0.3211206963330808"},"_hasShrinkwrap":false},"1.2210272257.0":{"name":"@bentoproject/fit-text","version":"1.2210272257.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2210272257.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-vpm1pvUfRfI3UeQbGuD/hSmfmYKgHA/VPD7pNcU7ofiZe1VyV0YD3RYLP1v6MEDhDE+nO5iO9anTMgxdHYxcEA==","shasum":"e89117a9d802d417ba8100eb1379c1dbee76d640","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2210272257.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID1Ro15UaDtKlgewJWgGiBxL2ZOnT1HuOy7YYug/iE3NAiBeTo1vuf3YWeYsfbw/KDQDrG0nW1T+3zoyqr67KlSklQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjW5I/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRFg/+I9zvZzua0KTxGK/4UFHxlI0p/vzKr5JmvxocM3hDUqQaKUDZ\r\nPbBCgP26YCh7wnq0bCyq4QD0eJHlJNbmgNiekgBEgODDhoJwyROfoFygUEA8\r\njt5CkjyT7o9eFFKKEGejRrGpbc51SyxRtPn8vkJN9AKad/Jg9J/y6Vv5Wh6D\r\n8odeTKAY3Eq1vvTSiqSJ4mTYxfT7WxBJCaR76YIC7bZ7C2MeCgO5FF0eeXfw\r\n/ada5+oDjD1+6FS/03FiY3QJi+Yg/F0NwVC6v/ITWbtfOOo+CP+9nD1VbPKq\r\nA95UKaTd51pLm5iF43mEwyLt+41jKrD1xM5JmNxtwfwIsyjQ9KJxUGHbxIjs\r\nLNM+1IP3oVLLi3yNggILq7tlHAZem0o5nIdOX20RSdZnzyPVx0vaI0muEMJh\r\n3fZMB/aoVdK9OIr5da4U9Bo45n35DnfbWbzjcRmyHBOGhEns5V9HZvOlMhl+\r\nOA94Y1yFqsYk+yt9hvDSsfUznBIIZEZe2YHG3R0fqFpFpJ6AsltkyDFyR6Lq\r\nRal9IPoPqGzrkRUa1FtskDHj+Xlpu1+mhgAEHyWRFkSENtLJ1kYcaysx1PO0\r\n1Gusos1OZZwg3GNYfqfNJlZI423C8hc7wFnl3LvICnffAbga5iPbDzNhi/r4\r\n1gMr2OlzpiuSnvz55XGpiX3gYEhLnPsiZ/o=\r\n=lijh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2210272257.0_1666945599559_0.9755116719906141"},"_hasShrinkwrap":false},"1.2211042305.0":{"name":"@bentoproject/fit-text","version":"1.2211042305.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2211042305.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-zInWANmi1zXOY4Z47HN3TyhkeJ1zsj4gmQXsbH7YiPQ0WYSzZK1SYU4hsQaEK8ELDp/IJp94oP/vjEPlAOX1hw==","shasum":"6f038a19b778d43041ac034a48f645d10b5378ff","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2211042305.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA1+4OwuU5Jrwcwj3BJvIn2P9jJpxHr0JDvE+n6vZBRaAiAUNwBv27ortug3H5cwwBQHNY7K5ocPoE6THojM0hlJGg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZh2tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHzBAAlHnWZ15oO3bF6HEkMcbifHksRP1zMWY5/Ed2KW7FV8X8nBbx\r\nbM+TPXc0Fx10aiANoQ1BHbE+bi4WXw+bqg9afEsdMeLYkdFYHWU6MddnWIEe\r\nLXhcNQK3Vz7fFinXxaHkFlqJ01huUnDD7ODLMNCYvUAI2KNXSySUWcqxKlwX\r\nVaVtEEENg8xmiM2VrYFd4+msVEVSi0GYmkzTvBE7oaCbb//fBQ4V7VGqi4Vz\r\nPz9O8ADYEmrkAhzc/aO18Xq91tNKDBlN/qhhW9VOagKTdjiaVIEgP8oa+CYW\r\nJ8v3vX8toKrC/j+/tOnaSzLYfonkoRVGmMYzBnry/Epp0DzYj2iob4ZpyCMt\r\n5sbdkFCUNMo67EFvdMjh/YuBVK9zvGVLNEAJfNyuF7ITPIZQXPcruVEn0Kl5\r\nYvXKk97KOz1kNJVHxB33OVeosVB3LX0PeM/DYMd3fg26F0dNqWTc3Vnw0GVL\r\nzZeUpZZKta6TOV4Dmi+BGBPFrv+9RpFRuW1e4csnbd1yb5fJnLJ4CeWRaYkd\r\nd2hw41YV+SX/1VP+KSCHohCSvyryZIuILcz/NfVF2UtSNxWyRiRxOgCZ5YkZ\r\nQcKMP8kYDg3E+9Qi3rTbnf4+sp5AyD3/2+aOdBWQSbfMUXpJ0TmpuI/HHL8I\r\nyqLE1sVf9PDoRxQ0ZpQuursZzm0GfkxuEbg=\r\n=B53Y\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2211042305.0_1667636653267_0.8273628164142381"},"_hasShrinkwrap":false},"1.2211060024.0":{"name":"@bentoproject/fit-text","version":"1.2211060024.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211060024.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"f6dce0a3fbdbc90de3eb1773dbfc31ff1e476460","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2211060024.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-DlzuUcInX0FH4NwJ5lr2L92onwBYgW0IuruGhoQG1I/mPRMmXqssNkZe6SrJWvl3WyDADqIN6VJhmCTaUEEsmA==","shasum":"d9dddbec34ebe56523c43c2ac8d33daae8308a2f","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2211060024.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAEpC4g2K6/Mt0sr2MnVjwKQqtleNSVc3trDdovsgwSwAiADw2bf3admNrb7bSeBdDKg8mfS+PP2tDKTvAr1ALTbBA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjahJZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkAxAAie4MJa3eLmGZ5DW5fKg80fnMeWK4D+X9A+s3qeUYmKxfV5f1\r\nle6qXP0cgexm0i82ErWmI1FTCqcj0jjHqqf598L4e813W9WwewqqWCb7kNjZ\r\nJkYs80Bfobv076bVXPCThCaK05UcZzPO9Db3IQ5bro4IhJX+Nf/G5P0Om8vQ\r\nIOfR+BtHfAv770yLZ56Fq0y02kDnwtnKMPl7fQOOVY8lQfld/OiP1v8A+5dA\r\nXDsro8wthj8+wymDD2h+eTayEJDL/7FezO4T++TtgOV5Wz+5hY8dU7pc7HiJ\r\ncGqvewnON9z39BAEDs8qxeSXEamF5xgpmQcrJoJVrCRRoQZG4G4NaOr+0mM1\r\n8yyoVg8y262txI6PRZb2GrL6MXs+ddymdzRl0oXRSn7SSNV4ALSSDgfKJObr\r\nEl9exK9T9G6shNo055OpyObucJ9fKerW5TkhXr2iYOAvYn0Luz/BhN8X9/oU\r\nOeZ4f93HmzdBJiiBORxuuCRLadZu7KKnWeWuCRRsoYk7LxWdxg9avST526SI\r\ndw6syKoToeLJtzfp57YhCxS3fn7GiyNP8MjYBhlQprr+XqyvTfzCYIunMox3\r\niMO4c2Mq85e3wC7ruVJzJPviuUqUwrgHs7JFBkSvRpy6Fuv5B++6KhnDjzSB\r\nmRBRizXyHvF5+7scG+4ii9KGj4mDRtNHKK4=\r\n=VkXq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2211060024.0_1667895897085_0.9580634721979042"},"_hasShrinkwrap":false},"1.2211111611.0":{"name":"@bentoproject/fit-text","version":"1.2211111611.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211111611.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"f9c1138144838b5c4612a779bf407d2b2413d105","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2211111611.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-UCIUxQGNPS1s0ByUFZcaim5T1RrCtzC4tgNamkv6INrqqrZPdb1Z3LXtJMLYRLIE49xQY7Biwgw3zekKRR0TXw==","shasum":"bc04b358c38050bfdddec53032fb1caa0bdb28aa","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2211111611.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgjwLqdpMr6qSl9PdRVrB084GCNWhfLl+FVeHW2CGmbgIgbhPOv6OL2obXSM1/6xuBqhEMkMiwcz8TaG/jIzhkplg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjb1ghACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqU6Q/5Ad4fbH6dlz8ZUwl8snhNSliWhhocfZAtTcXJy4JW8gYnM3+g\r\n9iMXEPRd2oeDKsH6EmeWC6pThR45xgICX0cPtGDSAGplU01yRQnnOnqHobC8\r\nk7YQHFBLBh7sJkdKIx8/mwnos0WknwLBkQS/21p5p53SsL2214R4rW/9dgdq\r\nxyMHiJ7P4G/AioXxqadXxd57W+uqU5f9LNAjR/G8UdZz/l2D4MnUALMrzqAk\r\nEAzpWjpc093s73hxwtIVG76HPvW42esLK5Sz7IdW9lEQPmbfbtq3y936eDsw\r\nlx0FdrsNsziT9eEPhxW+4yLQPescWR7W9szNSsXwI80/IXikNXZPiovMMxLI\r\nxnnIFkSqHNvgYlxR+WAgnpYZizR/35Z4tac0xa2D6rkT14mesnd5K9aQHEQi\r\n7uSaWFmoo8D8QBJn+v72XEMUjLU80XCUfXZDnGsZymF2/E3ZhQyH7pyqU9Zc\r\nhhCR349eaJ4SZpC0h53MS9BJ/swUcAoJ7kNhl1GX8IOEC3L6N4S5/uCPmlY0\r\nNhAh7ouvmAMWLPsvVYxgSPVoDnmFtxu3aDBJweILmgdwuVMkUB5SCVWKv5dI\r\nIFIzZRlnVVq9+nE6YtMYH2+PlQAawkOrd3HZSI/szsIoWt3Oh2Xm5cCwuuaP\r\n8+qXTSih3Xl9uY4++dRwwi/eto8fnatyBHs=\r\n=0CHg\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2211111611.0_1668241441454_0.9083727345871973"},"_hasShrinkwrap":false},"1.2211151402.0":{"name":"@bentoproject/fit-text","version":"1.2211151402.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211151402.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"db41c24bd071b6322e0a5188c4bd74aa94cb9d5f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2211151402.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-tbVqd3Ct9/T6gqq8Uxgqi85qlz0K8wbggrfIIMHN7jsf1TSkGEuyc7s+uHDEIfVsnMgHx6MNpvZPanv2Rbsa8g==","shasum":"e6a2ea3fc51b5a497147067fae5e3f4055f5c62b","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2211151402.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4vtlJsduUiLvg4QdKVNKsXwU/qybN4kLLt7nelvnh5AIhAM+vcVlvWGq+oZQ1YEel8cIageb2q1mSOrpOCBjMNdlU"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdS2UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJAA//S2Oq7PasHMkfIoJh65i5I7G+xAK7hR/I/zqQ1qhmcDuZJ2Ck\r\nwNvyi5PH20A6atteXoDLFvlZeTE/NIUobzhqHamws9tiSV2vFTSqQNOymt+c\r\nDrELfRrdf856Anw5o1NCPmakgoQX25i9WLy7Ttz1r+iyU+ebsB2WSsHRgQu8\r\nSVUauxcOHPhi1J2//qk+uUOzsa/myCainVRiy3zc68AGr0ngRs7hq/A7qr1o\r\nkJ4zA734Stu3OU444aKLtLz0qGiVoE7fnwTPynoiyonOb4YxCAwIl/PYQoRr\r\nfBdTJwW6ZVpfl4K3kNvBDt/aal2IrVZgvDn2x0otp6Od+MXUvYG4DT/yZ45v\r\ngkiMSLax/wL1vUT2UMpA2xcdA45fexkuIfsuANpw9zOWYaW4cEl1zWkxHOnI\r\n/BWrBLXEwlOHU0Gp3GZKbGL5N8KTF61zQo2PWcPnIs91FRdUJqUdIdWGVC39\r\nO40H2XuNAu2M6BoUnXjM4xhUkGNUR7PLcTMBTgHFkjI965p8cyt3GJ9JWcjd\r\n8k1BKvQwxzNtvd9b2ePDuP9cQS1gyNdRoj6AzBPXSm49xXIedxFyUnfUllyb\r\nBlOiK32sMh/ca+RyihMJHDw5vxNONULKJW207a0D0cc25dKpcGftRFSwinx9\r\nHG9OybVp1IhwpevIJybuxb4FpUV+Jj/m/mg=\r\n=98XC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2211151402.0_1668623764061_0.06623632543658386"},"_hasShrinkwrap":false},"1.2211182146.0":{"name":"@bentoproject/fit-text","version":"1.2211182146.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2211182146.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-FNqS1IsH14ZolnuSHaH4KW63iZ3VuoFFVgnkM5W2W7x5qMz1R7xlqnQ2OsTfgAme1WKz+0d04VRbxRh6ImoXNA==","shasum":"165f0094b3da133d801d30d56ef4b62db2cdccff","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2211182146.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6h3dBOZ8IfV0WS1IitI40XUdJHUtC4ZjkKzwrwod24gIhANEOkhp0mePZnfTOZPoM9LGCzJDBazAryqRhDv0TiloC"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJLcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqgmw/8CtR697WXHX7lMREYqbpTgInHivt7pILJzew2uh2/y51D/uRO\r\nyuGDSXxeqmgqULOG4rG9lGgDiWdA3A5yd82xA+/wfVSSzlnGUje8SAuhE/U2\r\nde1knNYm9wMgH4zM/06Dw3gJyV7McQl1GmZvVPkvuBizwNTde7oroNp01z+U\r\nOlMHPmIPggre5j4Eh6PBueR2X8QZ8XWYPD531gH6wsw60VVWv1hVTZbbgRJP\r\ngK9bTWzP/3lkmPlXIBlwwiMuF4Yt7d47NjjJgcv2Td/yKeNoSdzZYw6DlVQ1\r\n7K+Pau5Ada4I7AosORLfelTYMFd6uaF5E4eA2D6AZRr9DBvw/vJ2KLGLzdss\r\ni6aIQ5Veu0UY2N/47YyFW8z211bj1bQyVJvhIfA/oXwrqxAwzeliQPl9Fvzo\r\nSHAyKWuWUqftd8qyjDxGIZWzOZEJn/eUgXsi4fsCD0pkCw/GdnKKx4UwGGWI\r\n3Rci3OSulX00Ahf/iks9iwLBF0vCAhCwKE2shOWYduCe0qZ+bKqiwCp/G2Ir\r\nwPFRMaAPfsE8d1KGeV5ULV77CmABkEsxYY+PVoiZeOSSQJ4scPq65Mby1RpE\r\n7JsohFufcqh6WUj0sMYNfgYpyENZTn6VWIZ2/+7SVncWP8GR8iIp481jT7JD\r\nlkEsBszpoLM2BOqzS00r1s6927U9PZtzO0g=\r\n=Pztj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2211182146.0_1668846300425_0.5029326499801348"},"_hasShrinkwrap":false},"1.2211250451.0":{"name":"@bentoproject/fit-text","version":"1.2211250451.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2211250451.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-hnR7lKJ1VXgX5vkFfPhWieMzUQJs8ipZyxoPaFoN4JXgsmCDsjq3VpKn65hQOpH5lTjRywy1JkD9oTA6zuZJVA==","shasum":"0451bedd52d11b18a9909e2f8ec75e917b5a4f4e","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2211250451.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/3p0hHmNchKq7XehJywo+/r1nFfBgYksrGueei/FqrQIhAPfmCrRP9JfZ7wnesQHBsiC+0VbZNsPecvk5WljKCzhG"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjgHulACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofYg//UwG1f3eopAH/pO0108iqdp1+KnwipIy9fdyOz5/j0cAPC6RP\r\n2zCysCPYiMF7XyyOm3edgj/R/421CiYz4cLMOuJhGe4yg/7fVRmSOxxTKO8o\r\n1sCouRjYxJ9CMzmnDM9jC8OiNAhkB2R9twCo/0/FWP/sPIGSUOT5Lqixvbvt\r\n9ZxtrgUq05kpZ3VJO2Mjz/qx7uq0WzxBz3GYwOjDu678gb33UwDO0i3iTC4d\r\nScKtr3tS1ClPHH2Iy5BVpBItaHEC0zO3MQO3TQ/ArGkuTffnSzPN6Dpj68Dk\r\nyP83ouBy5cjBApvXocSHcXvyMWoLShj5IlDGYIQgilju6qW7vIBsu5aGlP/Q\r\nmj5aU6x+Ngjxb/el9jCV1q5m6VQ8N2BdVYAKcINqvbHqNNhoNf+Y694dISyQ\r\nLdE7JLIJS51IdfzWjEhOl7ERxN0xYMAHLzNtdqusaDK/RKyLwC+HwyVFoGbx\r\nFpENqcunazrd/XQhN1LNYFvrqVppZd3ibmt4U6YQVDfYO+ZO3bPnI/2igG/i\r\nE1g3qSgZ59gAXv/JAG7C1TGyZ9O/LlePIimw28vOuD8iOaSM7ETMS1+AzD7L\r\nQzZ/uxTQHuJg9BRRYBHkXnZDE4ns/rnPsrlFn8+GyteOtk5jYoRt6VS79f3u\r\nH79Iz7wDiiGTICySAsRzlljYl7Yy5ACqNzU=\r\n=xosJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2211250451.0_1669364645705_0.0025495052044846034"},"_hasShrinkwrap":false},"1.2211302304.0":{"name":"@bentoproject/fit-text","version":"1.2211302304.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211302304.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"8ec16ecf1bb95c1a6368ab455a6cfc7b1caddc46","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2211302304.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-YERsMYGvrt9G9px+19l+buYGGbtw4+MdJLULhaSUfJJ3A5F32pTMhS0rEWH5Mzbflp90lHY6dAMCRfH3Oc6FrA==","shasum":"c3262c1695d1488304508aea408c00f1852fc8c3","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2211302304.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCK7iwefZGACYYciYhSyY8TQMpaybGYxI1UHp2eyWOB8wIhAKMFtM4N+/YiAQGHsewEu1DbEJrmSwG+dIxLdr0M4T8T"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiGSOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMjg//ZzTI6iOUUIHEkVdLdkAgs8zZPRS6tbS2OQ4wzquRiuIklw/q\r\n/saLcQ5c72Bzjz7YdQHFhWim8aJN9C7AmDTRkXT7j+YXhKbijAdxQ1Sx7dkF\r\nyAbLh48Std2ECDfxcGTAYmI6BIzNUJd/3z1Ig1Anw27fSYN21IciErIHKYNJ\r\nw/U00T1K4kSvcCWiS9ItHULXvqmEX11s6UHwofJuMmjipMDXFat+XyBtDVDU\r\nCjnPZnM9Mced6WohcfO/7Z8hhgsTNSY0BnRMy80nmp8BB4pGsgZ8wx3b9tlT\r\n4DLvPdMs+7oG8wTQQkL6iRXulKhzKWWE7uvJkleDbfmXVWStUNNI7FJ1uCEL\r\nzfUvdtYGSjke/4WJz9bUSxWBw21eCHzDJhFCU4iOhSu1zogLEK1PKxQKYdo7\r\nH6xOxU+lv6jmIbfWYsmPNOv255XXu++awcMaDKuygv2T+4IpeQLUqStv79R5\r\nWe3qHvF6HxRAOpQdbEB3rCtNx6gAbJvxnIqggMI+9MGQ0Dzo/+wuBPc/g3fk\r\ntEO7wzH4IqNXJB4/jO6L6ouS9df/1xG0XignJ/JRCIR61GFj7woAiUO4XGBb\r\ngGHp3Di3738IUNXb2MfXr1dNrIdSZhRFTqUJB2wE9cL474gp99g/7NA2r/Vt\r\nnPWnHsj4Z+O43gczhHxMQZY0ee97ySK/8FA=\r\n=mGco\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2211302304.0_1669883022533_0.5494335207070029"},"_hasShrinkwrap":false},"1.2212071834.0":{"name":"@bentoproject/fit-text","version":"1.2212071834.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212071834.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"9e7a659da459058028a29b649ceae3a2dda7771b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2212071834.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-+vj8RXncxxy0G/n7a12jX9ZR3Aq1EyzVysM73SnVONIvIUm6NtoFJXv3WbPh+QuDMxu63Xxt7xnT9evEcsjflQ==","shasum":"5800ff74704852a76e8e1f38b071eac30e79210e","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2212071834.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCetfkW62/rRNhDIGId3duljFYhPdui8JS58BgbvjfcBQIgSzc9E8KO+4bgaGn1AG3QIRFmWGn+lUuprViVpT1+niE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkOteACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3QRAAk7W8X51EEaEgNiEMYRK9qJIHuEw/W2oGjc7FjikXtGLl6qwB\r\njOPoX4lO8Hi5zr9Tki2DJYP7BYEZIZuLUusxiC+bvZNlN49fP6FYPw4qV51P\r\nN8bK2mNbEH1CMlMC9/hxM/+aa9c4/gYiWbhzaoCeFIhUx/mX++qm7CWU12LX\r\nnfRhChux7WRVsl3ebE86UTtNEtFO/2Q8FlfGo9nySZ5MLyhZk6Iwpoh52zlY\r\ndrHnA1WPrTEl5bX+E2J3vuSwZn+uyXs0SSwnLHbxNLjDRdHHoes+YTWNO1Uo\r\nbRiH/lCZaoMG9W0g3u9YHzRFixHc8ZUZk007zmxxW5z+0LUafl2ijQI8Cuim\r\ngBreOA+cDNI5QZew7DwxWRiuww03xil0SWSq+OqRWzV2n7e9A6+XJmDQDZLE\r\nu825Z++N04wpplWlnTU+iUpe0L0towaBvcViDT072UtWNB1IuQ8j7wBZtJbV\r\nfMynCL6ilA8x61hjTI7jIJ6LNo2Kvxl1CvzeIZ8yb/yG7m8+Oejw3br8OJ2u\r\nhwxBacTkoxQChATqh1kia7rX+wrwXfKJsCJrbkTWMzfZOt+Ugj082jvjXunx\r\n95N+cdpZ1NucClpdqXHIB39qYD5tnNOfk1f39TEQGKO0tz2NdK6I276GnBxE\r\ne2GKxJ61qZ/G80zuqyR6bcbJCo93rX8EqdU=\r\n=W51p\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2212071834.0_1670441822606_0.053976705854484"},"_hasShrinkwrap":false},"1.2212092023.0":{"name":"@bentoproject/fit-text","version":"1.2212092023.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212092023.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"16bff17f2a3e911f517c49d1fd2c74c8089e78e0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2212092023.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-4XO6eVBozpebuN/TZdrwis4jQglPJuondlLVTcaodnxxzShkl36Qov9BA9nqSF83iV0pB9RY9YmnkVk0PlnTJw==","shasum":"2ee77d0c549eb9bca9cfe1074ebd0d93ec7d58d2","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2212092023.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwgR63KlS7qnibKWLrhTH/SsRqRjEM9PdckqkgAKc/dQIhAK3/HFctORWKnQf7YDXjqIno23i5QMxvR1KkPD6fVUFw"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjlEI+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGMQ/+Pp6z8FbgqVXkrYlJ7V4vob4Fjp3SOOxJrhpdFTCsUkWt3+uw\r\nraVaI2Fj01qN2ub7gl6AS+EOVWtzSzIalJspJXEj8TLX54V9Im5VLcTTqBBQ\r\nsBZ6LsA66bsHqzxk7mWQThjve/WUJLoLtIYdWjEnuKwCe/LDD1opYMiEW5gR\r\nTu9ul0hcBKuhBUMdxvI8egvw20V7TP5m0/J0mUTWEL+bsI1OeWU/X0oXGNPQ\r\neYJ8+ZFRVgDeeuyRex9lONrAWZpyqESNb2WfzFIW4akbTlfrv12pr0+Hsvf1\r\n1PtSOaqakumIM8e1GKxVuWNb+LY/7OL5gx4zdZXQm8Sbxff8SaKMHmFd2Ynj\r\nCzSoO3S8QHqH2gYIYoWGY+rilm/X8WocmXuIKcwWJTGBhHYA7vxSUjxDJak9\r\nIVpQQH738QhE6ci0nWnCf2J5wOgqyarNJMyTIkW3B8JkIdOYE9rb1bSY5CVY\r\nfuedXQoCBVR+3oFnazZjEh/mhnb4kjG0Fg9JWzOrHvYZiP/O+AZRKYdkICAk\r\npVMQAnJeKAGQQmw7ofMeaVzDhaG9m9Rdzr0WBaiDWIH0f7byfxjM0lC726DW\r\nJvjMxLjOKstWZyOJ0DHN1QoL+AtTfExPn+GNuqwON/+JbEmZXJodQrN1U0pK\r\nf0Nb915fIKvWdFwT7EXwGVH6ogVa4Rw0jSM=\r\n=sawR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2212092023.0_1670660670215_0.007747017236067633"},"_hasShrinkwrap":false},"1.2211302304.1":{"name":"@bentoproject/fit-text","version":"1.2211302304.1","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2211302304.1","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-zl1RHs/Wbw2qxdrhpMYk6mdbqAiSZELkOHzxg+Q1cW2YNKo7q1cr5pP165giksL2BaQAeAOJegJcBZwY0C9Duw==","shasum":"561897713bb40c41d9abfdae61f023d826343b65","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2211302304.1.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA+e6jRyEONPkPYh3JadZO9Ey540eynpU0bbGtXlpmwdAiB7R+L2CSII3O9zw7MBvd57wlODuXcVxvCMngbem0j6OA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPQzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWqg/+JL46wDDADPBFmYccCpfOVEhOpZ4S8603dblqRoNd18ORL/W1\r\ngDvBVJGRwzeg75Y2+cvSA3/pwk+TNFhki82Y8Rg+4TEeBedqlqhLbVyzp7Al\r\nrbyecjJopV9bspqMTelhVI3u95yg3yHZEglZ1oPvIBfJIlmqUuTL9NBkymkc\r\nDjeFbFIQ9dnPWOxuE97EKuGpJ1kZ1DMDWqjmeMaYrr0OjDYwy5h+2cL6yCsl\r\n8z+CTsFFgb2q7Go0OpHVCLzxPA7gaZ+vvNKmk65vSzAay5lL41eq+iu6tSKJ\r\nOvZHCXwn9OFsLoD8XBCI+zU5Xbh9JaF8hdoIds0tIwtYPwfEYIXTOFdWA3t3\r\nCoWtZz4rjdyQ2mqZ4cyeL7NQ0wKhZviLSOVS9435k+4HXrlswuB4MAgz37bm\r\nyKzb2hbVGV58nKILViVVHtgJTH8HEIjIfUL6eTbhQfz1eLwph291fYLVlNW6\r\ndwKQvWDlDMHIrbSDOpAndGT7W5hH1Bc3u0kOuxO0679bVYlYTHXBZNL7AwnI\r\n7eSuCHCWoZPYYc7yya4dNsE52oCSs8+IGpqELd+Fa5xzNB3XW8Kq3AfdiBQx\r\nA1i9Bt43YZ3uz0fGxo06roGfHgd0gvHjEfSh6fXuvjyOv/j7JB3poBEQpW7J\r\nSG7WFuQEFvvSCVDeaJspjjIKoZuGc7ww46k=\r\n=0jG0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2211302304.1_1670968371634_0.962723464106336"},"_hasShrinkwrap":false},"1.2212151632.0":{"name":"@bentoproject/fit-text","version":"1.2212151632.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212151632.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"6754eb8b2feb7d6eadedb57776b91613ad5d6dcf","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2212151632.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-602u1ZYhqwKagLe9D+BwmlfjusLxiT37H+EejJawPB4/nVGCAsSxC4Hr7kSYyuLyyVzueCOlPe1f42YFVYVoEQ==","shasum":"9d94a39f765ce517b898c81c27b986df5a11b42b","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2212151632.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEr1JfaKsr5jCdZMmge/tx9T8XgThXJCmk+8Mz7KwJ7TAiBgvchPt70CzLgi5yTnI07QbzSXifeH00pppOM/anzgEQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjodolACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsMA/+Pzl/d/jhIIfRMUlO1SU/BGcSyfMDzyxoH4lOHR73PVYA2TUY\r\n+e3d/EpNbI9ccKeEk7i98a1D4w/9vN1ry9/6T5VuIYPfSnpKQ6bjVsJkRgdC\r\nwhKLvQ8W6CI8lz3N80JExeNPkLEtGhrkmukgvOXOmDpLVkwga8hyloeppg1l\r\n5OljZO4WDwP+3YOf1KzGYdAQWFme4zRQhi0W0i1WIPWBQyj9Wmk+i9E2GqWv\r\nNL8x6Xf+GBn0e18EmCGisYd0VRrNvmj65zgFctKQRvBM4HfgEBUnRXbMhS2d\r\nqeVR/xGKmsL8vZ+gMFcY4CZM3sJrRg1NO4w57R43ovQaoF2czPj9tiN6E7Z5\r\nmF1ZnVimv17tIXcimQSdeGqYiVxO0Ttymu8N3dExIuQxlRZSY5sROzYjY8pU\r\nj2yP2fRvlfvxg8npioOEgH3e1FSfOV58zvrnB+nqbEYTswYPUYMRrtblVoJI\r\nhqLlAtfRGiRvWsOFuU/EYvUWRBPV4yH5oSfIKDKhmrWbZ8Ei+1WTfFWDFB4S\r\neAvHNnW8fU9EAM3zsEDwQSPsYXBxcdwgmciVVd4xqNiDxSmEPRRD9dD1TLOs\r\nlcfPGkGnqfzIwwIlzBTfa8KX//4YaQyWQlDLOGbRhlJwOYhL8ZRHZO3iXZjl\r\nAxc9EmCS9dcpU6wpxKAw6bXVkn/yzJniJQw=\r\n=lrD/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2212151632.0_1671551525499_0.8364883324244912"},"_hasShrinkwrap":false},"1.2212151632.1":{"name":"@bentoproject/fit-text","version":"1.2212151632.1","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212151632.1"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"0daa515ff1e284cb2e31dc8fda7f29c073e60b60","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2212151632.1","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-GPZofEi+wgqPXRJSEQvBIPNMDJv6jGSCl0bvegIm2sH1Y4HoKISG80DSbPgPRJEsPu0fNeP6ny1VeWcP4Q+bvg==","shasum":"69e37e4503fb9b5fae7485946964753f02d7c2f1","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2212151632.1.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYhYvym/N9gwLzQjWMt2xUC1YTvTAS8ah8oE43oNFZjQIgC5zmpilRRp1Y1rojuY7kpWIwDHlTUQz8KlhekN8tkws="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjohZvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrwcw//el1Cn6g0xb4YKsFF0ym542L7c43YsHOAY7lYZunp96m4DQiX\r\nmrhjmndWEV41A8H7c8acPoHXXt4ZN4+0jugPwKVn1ioreqiLdzMQpj8mJwFZ\r\n4B5MRJbGWeHtZ6bCUknPTp57ipKDLOfR3Qqa+uDi5tqYh+zpmCrY4CPmBhFC\r\nparcDZhGyWsiptm0wzT+yT/Odx3/ucu1+wx3FTQl4SzJst6YLaF/rf6aXZPW\r\nBxyXr+p+qX1xOzYNnV7rZmcCVn1q9yEUSIhvsUYByl2dpjvgMyEQn8l8ktXp\r\nlyMlpmpNH6U6Xq5ZKkxT7//ixV0GmILe7fktenJh5Q9OV/GwFFvkG8F2/EL7\r\nttmvkGlc28FAMZsw9zDgGp/5r9ZjS4qcf1888sm8ffnO3jsOWuVUh6dk0+mm\r\nE2B1kePo6U0OfAt1QJDuLT/o7eLFhNzZPXOeWivInFOXHg750cb8zSCDglJm\r\njPZuIxxLDJHclwCLh4djYagOy+To28gk20VCrDi/UXwYY2dRma7I8yXGHTaT\r\nWbcNp8+rdJ6e6B0iBbJRH8gQckjF7p2rEnqgVmZ+h8Ors0wFqLgNFrIh2bsb\r\nvrket7KB5sasYUF2nhraiA0YReDHIhPBJOuK+adNtuIVbjlz9exx2toVLGb1\r\ne4AnYcwGNb+RYZDGgV6AF/q3j3eqdGb+ECM=\r\n=BI7c\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2212151632.1_1671566959492_0.6879552345909212"},"_hasShrinkwrap":false},"1.2211302304.2":{"name":"@bentoproject/fit-text","version":"1.2211302304.2","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2211302304.2","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-RL2Wtt9aimGGVCsHd+w7tDDZHWEBdliHXpLzoUFxBr4uEuUPrfH3tI2ecFH57nwJkFbzfQJYKHDzZWiKwCIGtg==","shasum":"476610a88d7e06065a06da91d424c910627cd6c7","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2211302304.2.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHTzr/F7ig6D0VpYiY5CoA5guwbUeaM5dCxumLeQxk7qAiEAwmHrqMTf201kLkiBeL5Th6eCvNVS8MBO8/NlZRNKKuw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjojfvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcKQ/+NHwGc5PHNzbe9AQKLWJ20hJ6iH5NN8BWQJidedfaHm6JgtCt\r\n4LfXmhE4SESFtHR0fLRbbAoBSr1rrHjHBNEoSdDH2e9SsRbRyJCdufVZfwoY\r\nnbeQK+w3sCv5Sl97WqiR/bLlhU1W08CZcWlvGWi3ZNqvrwFvzAfWXTuaEONJ\r\ndeMI3nRGrVMT3Tdf5+T7phfcl2UH9uJ8wMbbpnriOtXsjW2F6179JEGLPMPa\r\nFoQyBp3yX7EQhrZT3DNy1Hwq7huNpZKI13qZFgDM6HQFXt5Q+4W6qhWNxtrx\r\n316MHMtmHIcismBz0xlpELmAgn5vIpjF37IGeg0GnpngCkSSwPLxu+gwB099\r\ne4Iuot+xj9KCtUBjuTKv9m8o57qxbKF7mlJUI1V4w77fGrFNf8OIWg0mwGf0\r\n+AXOxx92M2G+2XdOKFDHQvFQnlkEczU2CFegsgs9Q+Fs11KXCy6n4q5mJONq\r\nhCEyAO/XnrdrGdwE/9OxEJNi5e7uelnpX6Z0X1WL7YgoJBdJNqYUgK41ahS8\r\nIZfa+Kqp2CfpgJOCMV0azqZIDoS531tMjXTscIv3uDVGlSD+j96gjLKPtAXf\r\npJRLIOU9+7Tto03H0hTEL5k6Ug3EXovI0H2g7f15DaJFwg6EiDdtCCSI5kOH\r\n3H8FONHAC1ZncBms3iINSoVrkA/8Cm2QD4M=\r\n=/AVX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2211302304.2_1671575535043_0.5519947161378003"},"_hasShrinkwrap":false},"1.2212151632.2":{"name":"@bentoproject/fit-text","version":"1.2212151632.2","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2212151632.2","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-7h2TmZAcUUUsFzw0jWWqYG1/I8Wtcuq1t5bgTMESYp655sn0Z5DVwkStx6f7sDxU0xXcIqTUot8eD4DRYXUHVg==","shasum":"d7fe465b0ffb59a56ebc4acb30415364aae0e615","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2212151632.2.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCySx/0rKSO8ryQ7vy4DHSWXVBZ6f5SZxuUxH6zU4ZF8wIhAIPuTv+UN6H0nCdlIK7zYIj1X69ynt0WG4usUkFSaWaq"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtG//ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIKA/9FK6+nXSXc32hwKarJqz+K62sQvsP9KasH+7jsa2Nr0rV2cz9\r\nbuJqIiGMVGL6TfKAVh0EAGS13JPzCK4kHj/LmqwOH1kUzQp0WySTk0U7W4hV\r\nyNHvck157uR7wY5Yx+3s2Y9Wh3UMrxyyByM4WxIQsBqIC1TdmBu3XY8PpKyI\r\ny3TyfOUq+HZJyYltUqSse/hh0kKnIaHeuItOQw85pF/jSYG04xeiupWptqk8\r\nYAKX77wo2wX85yhO6crFEqvJgaJcckhvRG3y49jhVoU/kLR71M3vTdJRFY/p\r\nCcRuacf0LjaB4Aq6XeFP1RCeR+diz1YljZ8w47qZt9n0FhRyrYPQG/ktAJIu\r\n8pG4DsIlotFKY7hq3HCnxcezq0Wvjn/CWUpURKDAv9opmG/pM2cfyEiMSS3k\r\nLxvPqEjs3pP/i3qXAHabQ1PqQvpMELVyM+6PGd870+UtpP79jsWPsdbmosBQ\r\nmwQW3ygGSMjLMcHHZslGHRcYh0rjdQP/1Xyb1jKmfwSrzDU1T3uW0s3z/Zh1\r\ndwx5k1qdsOlii6UpkJwy5cK5zOR4L/T4NosRVI2riDd9MuunpE/Pa48CMIGT\r\nXq8JzO7O8x6V4e2Aeuvxdc/jHSV9MxMKZ8hFf0Vfhzroih12x4QiiqCZis38\r\ndIPDYJtL9kA49zRKoubX/nXRCuA9nn+qQgw=\r\n=RHEQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2212151632.2_1672769535438_0.5594647679977807"},"_hasShrinkwrap":false},"1.2301031703.0":{"name":"@bentoproject/fit-text","version":"1.2301031703.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2301031703.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-ZSxw5CG+WYjHpuIW0u52PKJ1rpl6YLCiprzTiqwYi+Gligy2u1+xbRhYArQnJHWcNc4pMsWFIkE4fxdsEjG4nw==","shasum":"1dd6a491f2a0b74e473225df5164ab0b9510ddc6","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2301031703.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFy6sSrmw3vD6nRTnn+ynVenbfMqx4qw1Wm7hc9SoT8MAiATzbih87GMPdiDMMmBsD/Fz+t0RP+j1pMeErvItCCwMQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtJAcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNoA/6AmNjv2bO99yZACJLc8WDZREZaBIvwjGsDqGZsrUiXn8WBwEf\r\nK5Vma+BRHBpgKlz9loka+MrE0V47/07SLv2u6/oXMbZ+WLXySPTDDoParqyn\r\nKdktrvlg7idtMxVsnF72yjVByT2H0aR66DphnoUpo1tFnIhzNFDtIEULTo1J\r\nYMbB8JqqIZ1FUh3r+s7fB82DQXd4Qwd/4ZqCgeUicc7Fgp6UzifWAHxvCAf2\r\naqvgxQuh1M0YRBGcozJsGuMNHfQG6yPdJoGzsj1eBebw/Y+DK5fVFVbJCHqQ\r\niwlQPb1YxtIH2RXCr6l6CI/5kQNnOBTlldhmYawEkLt/BoetrvyiD5NTtS9b\r\nLbrEUdbvLrQGqXoKtK+65IrSQNhXbJWh+zwCm82FtAYUfLURACxrlWoCkvn/\r\nTiyIOn7Ly76rY05bKjP0fy12E1/8YJ1TrbhT9IpTQm4wQ2Gy5qqyKN11ZyGy\r\nQggeyqAP/Rbn+hU0zHRlb4STTzNZggPP15qXEyM16wjR7HPWnszyMV8rE+7N\r\nAjkd3y0p1FbhR+AvHRkT22tXUuWkQJAdMGEVS+h1Vm1Trg7uIiwuklMuLOHc\r\nK9EBcwmBRX4Z/k7V4d8plsHLwsou2Qg7rTQOXoXsgRhLhl+cegbECiekC4wI\r\nb0ZHAIfAp5Q6GguSey31B76hirLRduNrNiA=\r\n=FKBX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2301031703.0_1672777756151_0.4656196106750996"},"_hasShrinkwrap":false},"1.2301032153.0":{"name":"@bentoproject/fit-text","version":"1.2301032153.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301032153.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"418b16026c82f72bf8e885668d34a40fe043c9b7","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2301032153.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-+GPklJPvCJ/sfUrxLAYBDxxHSDfOdqQ5HHUDwF2ICuw8V9O+VzugP3BBE7a2AlNEZVVRY5/FtwRR2ddfuD6huQ==","shasum":"3529907452981863617bf1a205f5175032ad2c56","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2301032153.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDI2GRYGzHILH2JTUWqmmZOfVsL832XYBnBBWRKrQ1h9QIhAKy6LXdmSeZbPoSfDxPYkZBbLgGuM9yYUpd6Sg1hqAZ0"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtTfEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYxg//Y4dtK6PhDqW5GMQ0DlkoV34xFZRXf1SLQwsn5dvlUB26zaI9\r\nbahQIcgUFqfP7HY/Eyds48pThEBhXQaPIeacI66LEHIfqQ3VqoqGs0s1q9vJ\r\n9RHSarCh5HStdugPDIKqfz/ifucqtrqTxL+wdUBUCihqntKvNPh4o8Ku6nUQ\r\nXKSug3Y+DbPhJjIzyA859ZBVSg6zEWp9MMIiWcIWnjTg1e2bC/I9WT+L0T/r\r\nhvrdgvhD9h6VyO6eEwzG/B8FxKr/kIxb59wpVMu6eACUF6lDp6/sk8EXUGp7\r\njGzqn6yRSfWlQDG26KgsiaYlM3lgn+axekCJ3HLYMj9m5/Gd+uak3WUgg4s7\r\nkOOYX4+4hM3nPqyNI9AbHyNH+vXZl/zBg+nxutowUtWERL97GAw8FlmTXZg/\r\nsOqzYZrsQNWOAgf6DoL97eqCKISI7em4lTKWX5BJnBVu0ciTyChB0TeUWQ+/\r\nGWFe3qTfYyySvte2/IM8dD6R2h6B1un9qHqxqRl6FEwxtDClzVK/4v1pvVv7\r\nPCeMMbUg9GTwWdyI5BAjXmOBS82pVvAOFwqHSWNajmkntZHpJ79jOT5CbovG\r\nwoyqbSt+mWB2ULq8K32ROFRCYyE9lgCCMbyaGavQMEm/N6hwaf0XlvT6VJeG\r\nD8L7JdFGvF3m9CXbWHgXavweFi8CewI6qeM=\r\n=07aR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2301032153.0_1672820675891_0.9656297598964378"},"_hasShrinkwrap":false},"1.2301041800.0":{"name":"@bentoproject/fit-text","version":"1.2301041800.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2301041800.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-vzihVDpeOG+Rxo1ssVGZVqFFsiWOXY5z/vcbI96pZKAUtZJjCj6o1Exyu85o3FFPHwf1Ug/GpaTLi8VXMacrng==","shasum":"62ff83f1f996c11f48c605ace3e562746499b441","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2301041800.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDisJToinxLIiawMs2YQ0HOLzagUJAbEeatyBXU4Yi4DAIhAMy8VgWvqACTetD7USJewKd0pPFpq8cEgpHNWNEBSE3D"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtolmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr24BAAnLrNKgQ5eQJr+afBxXvs3UE/QoMCsSCErhy6hrG/+Cg+DNL5\r\nmPs++mWFjWRrXvltcuIlweyDBgzL9IYH4JeSnKCuO7uzmjpcwDwJBe4UDN0F\r\nOiz6hZYoSK0lCN0gvbNBBb+goFvmCnLbXvw8w9+2qesmYjs0/Nl8ERtbfnMq\r\nAYnaS9PwdiBar2qHoEufz4gS/bzJi7ZNYMhLMm9EfQyaNCHMBh0p1I3uVuSf\r\nldYopD9n1NrOFX+fXbT0savp3t9UpaCP2B4/S/BJXIQxMN75ZVpXaYkdcBvK\r\nt0KlMDf/3ABXnnVXhL4AJJ8aoYlRMvbPDGobf7nGxCbemhCEHZ4WZ9zePdgL\r\nF+psJyR8ZvE9qOVTvFSjl8FdkLRGchIbo4iePyoYzagmVCH2zuq5nHamgq62\r\nEBPbFRkqQMt9bFSVQ+ZD4wrNF01Sd17YXC2FzelNoeG/aFoj4j0n8v+YIq3s\r\n//EkTe/N3y36wtciF/Fd9rdmEacyA1dQ2+6S8zRy1pc0LTBSFoiyS/SJFYij\r\nXJglpKOTA5RYfnmZDY+lNusSYH2f8ZnWzM3dphNHUAq1YhMmJeY0Mfs3bklt\r\nFssLs+/xNjby7ZzDcsx837ZQurPxeGjVS8uC1AXa30x3Tpz5XLcPsPpBtewr\r\ni4DYIidFmv6vemjLsUF/1cpAWXjd1kAeAwI=\r\n=/62f\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2301041800.0_1672907109979_0.3062726451831319"},"_hasShrinkwrap":false},"1.2301100345.0":{"name":"@bentoproject/fit-text","version":"1.2301100345.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301100345.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"12a8a2eb9a3656064439da35b736023090e7c78a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2301100345.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-Piq4kSIJJqHpdY8sA/AtU8aJ5me5f4GIy/VRlobnvQmbLfE7rvUsx1pWgs9yVbiGJdmbmJ/IpZ+nU2dFv/vkwg==","shasum":"db94237344f0f608d31d19b05e7721d7f9df0d7e","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2301100345.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG0CI7hHo/3b/BvoLxHrw6o79zWYB9jhaPZqmehplrAnAiEA0muRZbuX8U5PblmCaDojBTSopQuzkhnBiT/U3jMnhOQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvSDyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3gw//VnWZhJ1xPCfULfoW8UNgL8i7flkXsKjMhDSVsbotA62kPVVr\r\nrerCzZWnUVTQFjKrEnvLJM36v2ucyen8OHPkGai10Vrx672IpLjIkiV5XVpY\r\nEEknDEhlMYKG/xcLrN293vT/ivecPpeP8Tn6UH7xkkN0tgzl9kYwc1OX/wh8\r\n61ruMOcLso/6LSyx51K3Uq4GPs/VIrakhB7HxigV0TRRYBO7hBzCoLU9Bq7Y\r\nQ4/pmltDa9qhll9F7lxTjz7hc4jve3FwK6ANHILwmsYdWOoFEfx1OraDrX7s\r\namthzL2yIEDEbevhOGC/nQofQ2CRS1IFCM6xM4kwvh8WL65aW+mZzaY5xH4f\r\nf9LszDK0GCUH3quCpgxbcDqqSNBgIAZieI9oPtWnhhOsojhIElDrx2HzGKR0\r\n7MLBQTXD5xAbj/vZUZmWExVOlNCGmUpG+Z1bIZwrPSyIytiDt8vc5/J1KGb/\r\ncijtKdhccRcVfdzHBBFskfLsPASenwm5fQLVlOBKmaPk5dzyxGW7/rjOaN/n\r\nvgiuwi97vWVmYjALy90Ee3c2pyCWbDoTQ1SfHP0V6lE5onBI1bfpBnp16C49\r\ned3oPtg9xBCZshZ5ZjhwyzQmzWYjj6eQUjBt23WnAKv8mkmr5k2A+6Djotai\r\nJhPIW9iz/3AlP5pB0uTvyIKCZ7wqPqbcMYE=\r\n=v4a6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2301100345.0_1673339122341_0.857024904884381"},"_hasShrinkwrap":false},"1.2301112346.0":{"name":"@bentoproject/fit-text","version":"1.2301112346.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2301112346.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-zy+ThYc67W1M2Z+jheW2pn3xgYZAhiRrNEbLe4weT/+vPyTJlI1e6qwCyim7a5joH0Pxg670tBxQbf28Hh2XUg==","shasum":"e4fde7f6999cd0d446c56b76353ee49bad411574","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2301112346.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFg0TrYe43pImxblsFWJL7JmhP3khcT0Xmo+UWi0j21tAiEAnpWMXy5lqBmMsxmqb7KVUdYnX5EF6Dy6k6knvJXuL+8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjv8Q5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq63A//WI0ePp4WVpthT0nPplzMYFIB/6V1O2ySJgQ0ya+1a7CvKvFw\r\nA9FrHlUgaLSX5OWSZzDLee0C14CFEh5RX3O11/EaWbYbpitZAINimztUUYNt\r\nC1IDyY3CsG0K4GpR2zORz0EMUm2/jor54zAFyXS/uCVXo2yvaKn1y/J84biN\r\nhI5c5v3aRYZvYuwT7NkqAZDN+HXLWUtQJTOOgXeTzCl3Bt6jVb+lum8gPbAP\r\n5hT8wZ+0a3+4LtQBm2rpAX4Bl2tjRLf0dvXdUsANX80W/MgyO1EcVFT6NNos\r\nJ+60r7qt7nUooYXN2ZEMg6gW5pDR4t0cvcxnmFILWA/f9xrRC32SqziY1y9r\r\nktXYNteqVrZsMHNOsJgiw4aUG3OTMTDT+v76wH8twDQBnUxOmyINaHI74hfQ\r\nKhFp1jOTNLTxeK1dE3ejctGu2RiyOjDaUOM2TblybwTK/xDyhQxyD0F0S6yN\r\nzn1iq24aDKQKwra6CIQJveu4MbKzKHIHhw1iIBq9vYB3pvXFeYhbxcEzDFFA\r\nBWtiEbNaK81JAWWVI9za94xKGDBxVCQcZd8MNlQfGl6RPL64deka4065CtRt\r\nPUR4XBFDd93BBV/ugAo74dNqMVW43wv6+BM35HMHKnRVmqxqE6P4ZHIdEzdm\r\nmLtMLIeTBIMSf1dDBaI+kbr+qNrvYY38hTQ=\r\n=57rP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2301112346.0_1673511993688_0.807576495160893"},"_hasShrinkwrap":false},"1.2301181928.0":{"name":"@bentoproject/fit-text","version":"1.2301181928.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2301181928.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-XK77XrFcgyhqWgkAYseRrryNu8hax0TBDvrTnUhgjEx7bTEcOE6iPUzGbkpvopo9p9ZYBSRt2pYq2eoLxR6b3Q==","shasum":"dd8608eba727a07ee9688b6c07957342a79e7d44","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2301181928.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClhZwGLLQdt2sGw/qwq8EmDV5RvqxWfLORNwaBBGQ6tgIgQyhPV+zNNo8PwwwvFsezCs9gDY+Ta4t3y0WzDRY8B50="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyP6JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWThAAoQCu4cFKcndFd2139ZLaBmo6oQ8PfFqlRYVh/dN+1CUx998a\r\n1msEtpl52AM3x03lMbC18h0BWEB5NryFsLX1vHQsLeJOZ44m/QzzsNt2mZU8\r\ny46FfoeEAI12o8U4LaWT+ooQcUWAOypC0VbT/nSM7/cBOAGZlOysgroVeo7e\r\nzFj8CXYW8yvlFicacZPTkfn02Da7dryfoZQyATGnOJ3fq/ArGxO2ViaJo9BG\r\nB5u3AgYDjcuhZzFT5ONrLD75EW8HGVMSH1xi6qR0JqHMbN4eQPjrT2rih3C3\r\nZTn4G0q+eKqZtv1ixwDUJttiLd2T3UkwDXgabjE0F7ujVBJyQiA/ItAMm4an\r\nx4UzEJWxiFnoP+dsXxB60HHxOcFi43x/uGuteFD2WIh3hYwv4svgsHjfalf+\r\nPTmZmkJw7Drg/AUBIup1e2vMy2suiNvLV8ivhJLFKzdlOpfou2bB3/gaGtyz\r\ntO1mWWROOaQIawXlHFeuX6KwW/AnJ3zSKomSoYqmUG+PZwVPo/hnO7/XWBMv\r\nRTR5rTw35iA+DHEzVWpqnOas1uGYxeoMnC1K+IFwtIvBGIj341YT7QLaLsi3\r\n2MPfkUpQblkUUoB/EvE72wmtXyXu2VQ94belRXLRWdNyRTw2cRTGghOnMPmE\r\nfnJnEi5bIcQmGQYaB1zFEBb3mN53rvTP6nE=\r\n=bGNh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2301181928.0_1674116745015_0.8500405736938552"},"_hasShrinkwrap":false},"1.2301261900.0":{"name":"@bentoproject/fit-text","version":"1.2301261900.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2301261900.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-mns1jK874jQVKbFIaDdzruS6xu666xQkeu8GpANFzxrLC8GhXsB3afKP2940yMhjaBtR1tN9bIQmFNlI8K2Zmw==","shasum":"f30f704267f11256fbf1dcd19ec95233da0051fc","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2301261900.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFUvjLuRn5xGHgJMmT0rF+wVjEJmBFJRXwKFKdu9KWjnAiEAwzLLIiff0dKx6GM1n9okNaitnIi+kIsk2GHztNUeOLE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj04q1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3+Q//cjRr4e3Z7tvYN74nF38PuVO9+Om9kQkyV+jkHbjlIBNgtOlg\r\nFezJJG3GPufEupLIJIOFMeHtUidtxOXHViZgiFfHj1tuCF6Ec5eikEwKitUG\r\nNJcWQAlg23cL7DGY+iaZiCipm2xj2IEcwJSeEaElleiA2BJP+jMnQM6BIUo4\r\nwFKtbQPtp1CCGHBGQ76OpERqOHKjWZv3dtbgwkkrKXQ9jSy4C9yqYSzudzL4\r\nEkRLYIP2pI1Pz8i8m7w43nZQPtRyC9l8Ida5gOm327HBuHIdm3i9vWk3UOkm\r\nGY8dM4z0y7ak6pdD+VoGHAjGUfrZKb80s0JTkImLNI1hSPbZCUozfhMVfgb1\r\noqOQvVX1QSgsixVj01PFgktzD0Zk8cNVpplOypIXXxEd0idqN/FoLowbauTX\r\nesAcV9/cIOsoPmGeG0plVjGa8nRrZrN5q038OlmOMWTBDjgZBCbjJqHObque\r\n0CymgwlpkANJMsjoss8gWwE1KNtpBNe0XhNI/rsx4dMVDECa0JEjYr4VciEB\r\n74r5xbkI8hgPt8tdKgy5ALEk5bugjYXwnxNGHP6PIX5Pgd8ODA2uCHnaQCUv\r\n1l6wnXGYUlVzpX3Gvkl9TveVlGG8dE+xo+Wm/HtR7eAxU7GMC3cCItb7lccC\r\njv/WsxM7S7P7y4KnIZmCdxO8gvP31Cs/kWc=\r\n=uT5k\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2301261900.0_1674807989016_0.6560188166180994"},"_hasShrinkwrap":false},"1.2301301810.0":{"name":"@bentoproject/fit-text","version":"1.2301301810.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301301810.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"06d7a2baddf76737d7cde110a7b4bb9351feb38d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2301301810.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-NpVvKX5qjy+VLUK3UWEm0bIHqShzVHlgPlqB4YnPyuWjAuOegDgPJpmhmie4i/FU+bOi2r6RMC6AscA1vEYEpw==","shasum":"1522033b15bf991fef85304f17db668454eb4fe0","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2301301810.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBhciZbPr9iUMAGRN0cjzrxyROerHPJUZLIrgCAuJCMeAiEAwiP1d/wLLgrbfDJaciTpJR0l55OAOqajhSHrKAwzMSw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2NCbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmondhAAie+7mnYpJVP2YUOWLyLBZxGzzUnwwaQn4mk6TTTSmm8ZQSLA\r\ne3+jQISUgQNyrJRtX+QlMGf6ndlCMh1W9QzKsGAFxdzFc0Q4WjSurekeRFgj\r\nbles6yFo+ujYf/8khJf0olNSIpdd6WwgFKaMT7/aeAFv3Xsms6NAUq63Rsl3\r\naP4ZgNUD7vtp7gr+tAuKmvGNhz7GLTjdOUh2w3y1VPJsm2VdZe9A8yv9jgl8\r\nzW8OUUL0O4bDW+8ykaHm7zf54cnRm3cYEZtnaqIB9AFhiXiaX5/HnF+zpfk7\r\n0O0GoB2wgJvY9nty3E/s0eCT/3PjPBfxgDkJkTx65ow/dJvcbNEbYSwOfpCO\r\noU4pEOi9DzqpOJmi3YyaWJstsOdHWeg/IjOvdGQ7zWzsCDUOH8954fQYi3w8\r\noT8aAT9d6HSMxVd4psCx0HgslZNfGzt7u/oj6DItXWjk4YtUUXqbwaJwxOWi\r\nCb3dcrWDm9yeVpBLXQlH6qIOb6ylPving/ZDuPbMgkIHpZQyoU/BErjp7Apg\r\ne7t8XFyb74U4yizyL57mXNwk2oSyhxU4uzKS2mQ860+mIMbx+zbqEKmVBOfv\r\nvNIYXrlyqWo0KNWPVFNnJBlCscdm8RJLGFySIW1fz7q/oRsDA5Kgw2GS4aST\r\nsVJsUJlRGYW2S88RSsTmsa7SG6uxG7NUk8Y=\r\n=f4HJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2301301810.0_1675153563122_0.40777810103237"},"_hasShrinkwrap":false},"1.2302012254.0":{"name":"@bentoproject/fit-text","version":"1.2302012254.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302012254.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"e4c14ac075b71415995f07a6bcc3ca93a8af5cc0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2302012254.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-bEDZj5pShPU9PRIzKj4aXhD6ZF62v3dr7x95bun46aH6Q6LSpn+5BTYUrKiwXW7Zk0w1A5YlLxOUM8uVzG6Tpw==","shasum":"7a1ef1ee15fcea5accf97bd54edc1e3b96e05fee","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2302012254.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcSxQJbGU/qR9RZVBhrWvfOm22aqn+HZQqPeUSpheA+gIgQQy3Q4LI9/PaQCHsz5kQcHRuPEZ2n+vOEOPfAy/+4pg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj23NFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotPg//Q0v7rVbqTc5Z/1gahYiXehr6cXSwuG/BIUrsMv5lBMw3qRrn\r\nquvK5dxhk41v1w5aeEvhg41UKxQ/RGMs+NVrO3CFfHWGL5MjR2ia8jW1PsjE\r\nkQ+pIu5yQ/kVSYxLA02zytyzj/C0gaFQu0favMfmcLqPJ4tHDrOyTeB/SbgV\r\ntYTOTcaADSmLt+Y3jjDlQrQ8OJWS1W/XtRvJ1vlmR9jeDb4p5+rGf/xgHN79\r\nbmxPoWSB3vGwfGcFTDtKym9Yimi2aekOGpFPWXrvdvAE54xQcW9XyhiAdgBK\r\nCx4dHvOLdoShXA2gX/ZeR5fI35LAOJXcgcr5eOhPbbrh0GL5BUB/QBr2dmEC\r\n/GbN1mxXoAWk/PI9AdkJPzYPmcL8YYBcLwUodROf88RJlQqg4LnNbQLlGYzG\r\naTLA+VemzFOPRt6S37DlRokGACoLBB0FGXtBLDkVkGDjTaIjfZnNFu6nOjlT\r\nu3BNltVuNKvgPb3LEXPhprY7X6xVdt9Q3RTfoPs0PNHI+hdhpKQ6Z20AEwtL\r\n6vWlgMfGgrrzhhbJdpAYBrxP5FpyAgB5924SRzKlCEwESLoluCBQqta+valP\r\nsL6mwOaxEFE0lpOkTNi1roh4IVzbafKdmyHWW1T1prF32/97eRmcyBCZC6/X\r\nB4tVuYzLj/iRCvSqSX1rbAXyk4bbl4yLtKw=\r\n=hbfp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2302012254.0_1675326276916_0.8112428711002977"},"_hasShrinkwrap":false},"1.2302021743.0":{"name":"@bentoproject/fit-text","version":"1.2302021743.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302021743.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"a27cd72c15b628053806c94efc4c96730603dbd5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2302021743.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-Kt0VHbE7ld38h9P+uRVVnBX9tHzEsSs1Eb+2qFgPb4SGatm1VLjatveFfiwIeHIqJpf/4r7eR3pdnZKhPuGU8A==","shasum":"f6153112a8315acc27acd921c2126878af5cf77f","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2302021743.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDKgiLQVIldRZY+OEI+hBGlrbWp9Ued81GfZhw+FWv9UAiEAx2TDx6itjolm5OglFKXBxjqSXyfryDJ/F2cGHqKsvqw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3MUlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDcg//TtZezr0xWh2Y9+wfccEk+ufXiXsBIoN0ssQ+2W5KtLnKsyXu\r\nYCPhvWW2RxDXZRj65yJZ/r0DwaQo91SU2E3PUS8HgJO5KWjv1pPeygb+zkbj\r\nNJ5HuIF0sSAgMy5T8NIJbzbw1XWNQN63L8AVFYSnYibWJ+Jj/Q/Hsi9MdnJ6\r\nLi1SrleGgqfYtl4DYXdF6ACV0U0yfnU+JkuN8W7eVC2620tTOF30doTqOjs+\r\nnMsTZdSJmvnL3XVFT69luwU6fBSAQIW9GjbX3Dwmx/8Oyq+i5p84xzRLY+Ab\r\n9d0y4RCZlEuOw/E5OJZW/NPiWQMzEQlAbIqdD8IrEsAa9fYBDq4X2siNbFZA\r\nUdvtWGXLGFdEtLV7wjVZ+4pizXEMmC4SA4O8iXEH4zK5bt+XLLCD5VoV8KgC\r\nHkFLkTvj/W02Yu0Lhei4XHYn2vNRWsDvL6wKYtEMmshABZjUUYj5w0mHw8M9\r\nMCY9anBETVPWJr9hu/1B2W6YWM/rGi9gW9t1abn9lrldUJnRkDaAS+0zBWMS\r\n0mSLAm5iJo/W2rBNDPy22qS6dKlF/zHb9UjnrUboPoJd0+pTB7iEzVuP3V1I\r\nwRUIkCpMtUBO3iMh5L3AcjXetFjk8Zhbttc0nGP+UAZPYmUZnZI2nkuDsbEX\r\nJw9DS0NyT+DA1spwhvXiaEV90rI+NEbi7iM=\r\n=/cVl\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2302021743.0_1675412773122_0.3801216650536261"},"_hasShrinkwrap":false},"1.2302031721.0":{"name":"@bentoproject/fit-text","version":"1.2302031721.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/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/fit-text@1.2302031721.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-JFWFsaIGkOkSjOG1CCg2Tlfl2QWGZ0+DNGHTjQI2lN2rHbsnV1+qIkv/Wg0vcifUFCqBAOOPqKtzVwP2+0DPyg==","shasum":"eaeb4411fca2836ce5bd0166d9a63fa52340e80f","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2302031721.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtSi/TnOPIMHab9ENA1pRps7n3MwvETTG5g8EJk2BCZQIgPmz56iX2YbCZ7XQOB0cJZ8V7TNMHoOa/5ymLGFl7Yzw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3hY0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9KA/+IudKimHTA8ViDfWHNWgY9kHoy1qbgQWFwdcHi4Pep9dhyE0m\r\nB6+EPWJY2EQEZRMu6L4hdbQXXuClekSma4c3tK7p1J+l/sRhLLVq/55Fk47k\r\n1vS2gyAuxlGogSRfSrXbmDbEzkVc+AH/nNI8JOLiLzNJV6TLKGM7QMQ+ceew\r\nL/7t/+1q5qoeX9447PlYVWiYy3nQ8mW5+aj1Pyy7lp28eZqF7r2rBIs4ZyuA\r\nXwpgJFEzE0BtOqT2gaYnSwf7RHRBSgt7J8/J1jrUEjKjhtVua67FlKIaVvYr\r\nGVvAmXlU4N5uj18H4fPX8zVXA6YT8TMUPYhbbGJ/Xb60hxyq9c5QbCbrb8SF\r\nM8Bhof+msGSu8wD+hhkonX4EVALFiitHnWAilYm0gXy9dxKeSNA/ghNsdBFC\r\n+0RLmt/BJW3aX7BMFB0/50dHCjn7HMpdrsRtYOS8s5sI6nvk2Ya7z3veSMqP\r\nF8trCTvb11Id0fKT0e1/9Ee+eHlxWWQeHdjfwG9QsCcrM6+cOAV7cVNMwaZ7\r\nZzbvNveS2K3c6Y2WuJNzIUDkZyrBq3C/LiibTGak8y/elFqALlWFgepU3N3X\r\nM6OJ+eekslH3eJmr2WOIFJesDjCl8xFSTI2xJA/Urg4JMN2t6V2iERLQET90\r\naiKKyRg1V5xy8NNGZzJgYZmrNaymmOOgCYY=\r\n=5k34\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2302031721.0_1675499059801_0.11966907220217071"},"_hasShrinkwrap":false},"1.2302171719.0":{"name":"@bentoproject/fit-text","version":"1.2302171719.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302171719.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"767b9ceecbb9759948c2b0db6f66c49097659f98","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2302171719.0","_nodeVersion":"18.14.0","_npmVersion":"9.3.1","dist":{"integrity":"sha512-rQz3sarKU/jqf3Pl1EQrgSK47BKhDab+XscicA4PXbRNg/uIjLxWQVQnBKuSy7C35ewwJupfAM4QFeEtV1VR3w==","shasum":"06d4a6a556222a7fc599ebf3447be7065ed38da1","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2302171719.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBuXw82K8g/1s6pes6Lt1mMlYPz7ljGV6Sprnq5ivTmkAiAPFfF+oMnsE7/I/Tm550iJRXGs1mhlLFtfl4GaDOQ7Mw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj8IrjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4Ng/9EOxNvK0PfIR5RU2/zWsqjh3yAUnRpWaTD6CsXdFNPAn8qPYr\r\nJLqJiWPfopvlLxUNiPcyU/7jaetjSVZVZ0XdUX9BTcsxih+ozzMEVOFdES3h\r\nh2P9PL+oxgspWj0btn9H0wfZxy3E6oryMVdtVWaO11L9z4GiYbSThFKg5U2w\r\n8naOWGnEptTDPH8s22jsy2qhIMS+mgPD+JL1NWQo8Qm+3zpxwjifBxcHePsq\r\nMbXQVjiejoZC9R8fuMgj70q6yGTST5f2r2NN/qzChHL2TOtDAuJATS85v471\r\ni/63qOrSxblS8T439VFgKH3qOonJH1G3qEuqlltHJbod/s76KBnb99r7FBdg\r\nmM/XPYJhinEjDLpSWR76wx9iNfkRyE0qW0Y3NBb1t/ErulnJKRsrPEePvMG5\r\n63R1+WmrYFViRNOnJYkHWLihiYe+oODwQPv1T3wP3ylDagtcL8/6bkzKVMgy\r\nL+IClxq5EKi7S5d5Sf0LM4oWX0CRFYWSjXMdi/migz+VFjoOE4CCTEZp9yS3\r\n9OF4QytiDmnIH35ry4m57Ta3Px5XQvCS7qGC0SXpezjbC72TNc8YOO0mSyo8\r\nKHOaMBvUDIrVqCvjO72AAj2F+dxtLD0M1zfCnUvBUizM9bOhJ1pLerBJmudQ\r\ncE5NvgL4Fgg4PNHttVV65OG+uG+rNKWZApA=\r\n=/caa\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2302171719.0_1676708579592_0.7046393158444197"},"_hasShrinkwrap":false},"1.2302271541.0":{"name":"@bentoproject/fit-text","version":"1.2302271541.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302271541.0"},"gitHead":"13cfe7f4354a82bebe08fd29496c4c7de848a18b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2302271541.0","_nodeVersion":"18.14.1","_npmVersion":"9.3.1","dist":{"integrity":"sha512-DImyYsQMYfwrBoGHf7D5HGeaNREoJ49QbELlWy+kORQ3y4X40IRPjfemKjM2K1HO4k2M5bQjCnjFD4cWFV/hfA==","shasum":"45a85bf997402403b43f4993087661e8380a72c8","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2302271541.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGpFjy5BS4jdqR4m9sQ2tenhDtBpEbb86jKNUmk71EGzAiBRnYFSKkucWsJzP6AnB5iTviO7vgvk2zeHTFSEEbET0g=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/ji5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcAA//YztxRx4PuAt5tLsn4cvBjef8JLL3IIWbiepggkj29E2NNnPr\r\nSkg0eGZCyYBzVnutZPJfhboUOLxfwvguv1YPh0xi2B+zv3eGPdf/s9DCbbHe\r\nM/2N7V70RDgl9vDYgtz6ojJj+iKa8vkoZZSj2DIYlEOOy+q88p4VvGVRoA8P\r\nC80fHaZYP+dQeqclL121yyO67TLAseXCfn90dXryyGo5luQnfrT4QGAnQ0gQ\r\nXnG/2dyf6oVZE9mJzjo7C34UfKf2sdmUhGeApnN6UWy+O2HY65ps/yMwqf2N\r\nR9YIJ9N6xSsPwmAQgiDxUG3tV0Mxjt5w78Wr0Q9EnxYj0WdFHPaV9j8eA+dg\r\nBqu3VzBFYDSGMUBKNc9apEr2nJKzz0ZPEAQwjYvdydwzgAndZMqCdlZg9XWf\r\n1T2gaQjXMwIF8uR3C4WTHMJ16WFQqyib3ALlJnYaVJls7H5IdVaLA6pI/aIQ\r\n4a0nW8TZ0nwYqrj0L6MrhJE6mCD5GjIAtOGz/z1c29I97FaHGTen5KXELJmX\r\n7XtSddYhBBo3GsztOYHWAudQKtHVGujYUXsCH8YnFHdcCYGLFioCEsRtBLAp\r\n2B748H9WM1CTm2pI5UPBZQACbNGVYEPRuX2/j351XNHN9hxwc/c1fb3ggcNL\r\nVDOBZuPq/eg3bQxKxIx2toJ/13iQXK1/8vU=\r\n=ytft\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2302271541.0_1677605048920_0.18696100910228197"},"_hasShrinkwrap":false},"1.2303151529.0":{"name":"@bentoproject/fit-text","version":"1.2303151529.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2303151529.0"},"gitHead":"d02f1bef730eec6d78d3f2fa5968ca88a60acf17","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2303151529.0","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-NRQs5Y2Wi3ACFI/op/LITCcHZ7qIP4B3CwcGKZQne3Gvc83n0SBYfkQ8cst+XrPV5A9z/5Hh4IGJMMXk65ynvw==","shasum":"ec5437e59bbabb89cc56e2fe38dccaccfdef8ab2","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2303151529.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGtiDrEr9jHtCbmwqEp2Lvfl7zJB7fSgAvQMNcz2+RDfAiBSQF6BWAlywyReAFZw0JTypOSIVxVtmT5Jzk8clD2XPw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEfHNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpO/BAAimzmeQ+tt0K2DPjiDI6FndOjw9jBCs1MUF89ahg1StfPnssa\r\nlZXdgHKYCJGf5boMGtqNKO0eDB3nb20YnsW0tYvkX3C1/2bna6uau1SRvplu\r\nonBlfrmBudu7ZeE2ULGwArcxo5lvzRFG00O+u4IFxdrhp6y4xl37WJUY0JwL\r\nWA2ycADQq4EqoIsZlgT3sMTVZhMujOBOEn+Q3PYHjCsr0FjuZ4nkan2lQS81\r\ncjTJwUmzP3Q4m2SKwbfiaujw92+1sIfU9ZsncZjG3a0NpzhTqSFhCivNuFiW\r\nC7K4Bc54UEBIXXF9MCuCqlbGyS/9FJynW9T6KaoGdotQ5qZBp1CSaCTsrB5u\r\nkZ0BM7F0DxdKdgZVrlPuWlGSN9DzepisgB1qe3FoQlm5dUltNvgk6oDoRAiz\r\nQVUFNenz2oFqAS2SNvlfsMpn0XrgWZFmW5GZY2b7y5Ixr9UiP62SUcjhoqnd\r\nxvDwOiI8UVvqE5wiBbCPEuf3NHU4zT5xQvDPEcYS3G/rDYCGMMVz0O1MOQX1\r\nYPHKgxP+/kXW41RjgCv9RzfUPjFuVSJFTGdAoft+N27vPXZ4pDf39ea0iDVG\r\noawqMy5cpepSZX3NLhcrn3mhKefddyU7LWrqdc/5AqgTQdpbK931NaOxfT4p\r\nogWWg8kFSOwfPENHOS+hJ7FMe1f9TtamB9w=\r\n=4w6i\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2303151529.0_1678897612967_0.7964296489506142"},"_hasShrinkwrap":false},"1.2303151621.0":{"name":"@bentoproject/fit-text","version":"1.2303151621.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2303151621.0"},"gitHead":"d02f1bef730eec6d78d3f2fa5968ca88a60acf17","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2303151621.0","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-8W9phNJzxwsIWaYcSTGlaJ+kTEWwF51RhFtVHsL89fsQULDVElAjTxdXZt+nx+XwY+4YkQqhN0a8vY3pm6AELA==","shasum":"f3e601ad62c207160298e012eeb21d0015fd0750","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2303151621.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0bwdMQMZuLjNCX1QnYGlnaVTJq8IA6eAQklWMmaXT1AIgUH6ILn9Le1luIMkmrjSn/nOXC4m+o+8MjucnsdB1pNM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGrtUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlpA//XDNbg9lbAjZSEj1X/2JJRIhf+ikEupXQ60c6INj6quJqly3x\r\nwrs6o6eHeRNI67xeiwZz6Iy2ghQjFqf73oq2SfrAU1UV6l4GYJzGtU/Qyjo0\r\nWkpg3eA2rm10RBWOvU5cfBLtbOlkjby0LTDtBbL8zQrx8Y8CoR8AEFpr3sz6\r\n5+p2hK/qBBec/rgtbEtyuT5p2n3+FplPOXl3E8gaPyNonXeYMFIqGyFIsTCD\r\nbnZIeqEkPCW4D6lmEf4sypidvTR0qZq0vqho/p5nH3I1Zpxnwd+X9WpVi38c\r\nm4KgHAb3wU1Z7iWKKE9KED1hNYe44971/DLF1oPMci9RM86ucm7LljMupheM\r\nkQZ8EQ5w/yx+7Cdt1g6JHtGB0N97QdNZlPRNNgO6J58Wi6eIi7NLHv37Kfdo\r\nB88TOkYUO1Iu1qOSm306IOWRHzTtBi0XBIKNKgrbYNGZUo9YQmG2yzhB37r2\r\noF9Y+3sC1X6wGTlzDfpOhoR10UwQZi6ortbyEfKaBWrI39RS5Yr6dRI/ag5c\r\n4pjT/eg0Pa2yrFv/Or3gcBTFsBX1tLXwTDt92p2PQ3nc7Fl/QbDXlo9vGhJb\r\nI3qTd2Yga0VxK+FA4MbYdFFMGkXB8bRcd9WFnI0Z8Xinxeaer7G6wN8X6GKo\r\n8NJLTrH4GJANqjRencuivc+ZinrW+8goQLg=\r\n=ALm8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2303151621.0_1679473492026_0.5826960149418392"},"_hasShrinkwrap":false},"1.2303231800.0":{"name":"@bentoproject/fit-text","version":"1.2303231800.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2303231800.0"},"gitHead":"bb614003484012cda74511a460e3958f01512a79","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2303231800.0","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-3GVcwKxtryLfjiaf5cFvhOEmsHQtDe2cRQgJbfYzFKiw2VpCEw6ZXQAJlpukdj0Oh1HZyKNKIiIfuYFAbBVVhQ==","shasum":"2db3e1d76bba9ac5538e42d556128500da3ec4f2","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2303231800.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEJSzhKMTVNOI1e9RLjHnLbZvQLtvxHTcTw0MWizwIfQIgOZcd+KBGYCfjEfOF589kIbHyOt4tIFsznuiescobi7E="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJArtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkqA//cxkqWULOdCthbDtU+A2tHKiQ7qUl2SZV05bXiSWI3t2OOM4I\r\nc+Ry/gXEgOPdl5xrs3/Z9PHm4ZaaiqKVsLra4Sa6yDr65XEmjFTur6fD6y9t\r\nF40H2I2mLdekXbAdscZn2NdcHM+Il+Ha6WvPakxKZvlivp61n3YdZJeM3edn\r\nCzkQjIiGotEaV973/SdNjupTzm6ArXw1U+Ic0LB/PeqCtMD+DkigmU8ALl8Z\r\nKvxZTKpUxaHIGcCSnpaO63rIgJgMiMm5uoW1B3UPZetK8laQdeQxnFJfxumD\r\ngcgqfgNIYsAbWxehJzgvzPV1XdCei9NRBhnL2D/S6Jd3N47kIkwl+ldH0Gud\r\nMqQAlZGTCWffGsEyF5jknL9+ck1QUJXuY+7/1rH8Pp6Qr7ceHahT+mV3n5bF\r\n0nYjWcIzidCPb4EShzjiAkkqWLQxSMBVAGDTM0vXydTlFMkwpRDdmh+m3GvY\r\nCjHhrtaUYA3eozMlCO4RHZhXqgatIjaRVjJlB7rJy4BUd0CWAnCRVs6MwTYd\r\numWdEWJHQe1N/NskvRzoHi1Mnkxs+A18GbyzNbrYSvRIDvYgEgW9w7l5wDcb\r\n5f25d43rFPeVIic/E15BzmzxOflxRALS7qwzKhrXaNGY68lOG9QGHmjW/ib9\r\nLZawDvTOOvAIYcLmgCGOPAHcH7E+qs7hMIo=\r\n=fpe/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2303231800.0_1680083693669_0.6420026624227779"},"_hasShrinkwrap":false},"1.2304040531.0":{"name":"@bentoproject/fit-text","version":"1.2304040531.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2304040531.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"201864e5a81ca3bd8ba23d3a14d9ac4f88d7a66d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2304040531.0","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-735n3W8rOwxmZCaX21etpfeDPhJwdwFVQ/oTHapwyGgLjIkVJF7SbNlM7rNBj8olk0QzEL9RHEggwS63qSUH2g==","shasum":"7cb92e2af03f5bc81d8a24a3d34377b07235ffaa","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2304040531.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHyKUlLHNwFDSx07akkoot14UptCDj5RCv5DHZ5k2SWgAiBpKnciN5829GDb8HyZny5orCKKYR/OGf2N718ZXl3Zcw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkK97/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmreBA/9GhZruRnj2la8S3AZFRz1GtQTkQG29t+QUwVdjlK9e0EdJbsm\r\ntj0v5tsFZBCVAGoqCw/sm7lIoBm1iqK5wDXTit+9cU3Cnl6qaGqpZRnfxPa5\r\nxoO7IOvOecsDcXvyJaemA7CdavhM/UlNKZxlrHzZ37twL6VucQHJgL28RbXS\r\n3ZRAHeRyL5CEQQvIM29xgq6ran8k7yQUZ7tvfDetrZq0ji3ZV1rDw9Ju4og7\r\nGIz0vGl7fLrU86wpGI5wd3gUMUjIEOwQPelo/bgyWssIP6W33Q/VQF86+Wh6\r\nV19rO0nMAFgGi8pQx6LyU0hd9/R9j4BggshjLyscgLUFhJ5r/Mj75KUbFhmS\r\nkf+DnT7RPNGn0VbzX85+wRiItWNgPbEpnfnvgVTLSaRHQ473uz24m04d6r7T\r\np13ug47ME4NAn/l4RgxE1Y5FBxanSsqH2V85mSYt+ALXt4827SafcyrpZR4X\r\n0ESba1YCqBveLSiWedkS01EcPc3c0hqxtqk3+kSETEbQfzU/pJn697QrD7yq\r\nwJAjGslpE1ytTd9j390Jqp8sxlg3qoXliR/PqG43lU5qpXZqQhwdyy7pi4Ov\r\nHAjTeDSTec5mq7t+jkHdZMq+Hpqez1GXciQkBZpwhH8iAntMbllGsmLrHhVR\r\ns7NhgZIN8aTv3oke6uAlxmZ71pOWJF7fwFE=\r\n=Whsp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2304040531.0_1680596735216_0.02978953258881578"},"_hasShrinkwrap":false},"1.2304062309.0":{"name":"@bentoproject/fit-text","version":"1.2304062309.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2304062309.0"},"gitHead":"988ca302278a65b8d468409a444b029bc633cd01","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2304062309.0","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-ele1zo7yfk5v0wYb5RUKBvVMnWZzvywwsVh/LVI6MBizLFvZxZOkLQvFT7lozHmVrLQU1s/OrQDPEZy0fKkl2w==","shasum":"5fe08fb8a22c3ef021c4ecdab92c7b69e0737e09","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2304062309.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZctrDkYwNdbNotZknh9XAEZn/UrVmlUiowftAHAVSkAIhALDh+Uy94701/V/OAYUVsQdM0NhLX19yt2+nV5gCb28v"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL9MkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBNxAAkGCXyFhE1SJWF/qgecyfuWF/zpi0vuTmrArFqI8gbw1I/TWE\r\nbACjnXf4jnLJKGhQgXFZsY46PZjPKvXpXVg1S9X3W5g7nTDR20Fg3N8kNh7x\r\nIi2BQgyTxlcyxFflxSlLYRzMyE6KuZxjp9kO7qFRxNsCGZxRlLhQaugAe31b\r\nujc3CUGM0prl88Zq0zJTGaWpKwfdrk1QOLyNtsGJNKGcpcwnmLP2P7Rq0K9X\r\nt0z8ZaTi1pCikHuH4qdRGpgc5uwYgHgWbzPYzHD4yQe7MLpy5iDAiC2iFaFJ\r\nkHIHMdH11YfJRj1ji5jG1ujLtxblKyqYdiFz7+iMFmyYLJCFvhCkccaMIZYW\r\nI9N+41JDfNwHVzw9Iq9DI3etUPkDtUmUesAFGvB4Fueq6OgPV/dKCFRqtZ60\r\nUhElvMfHU3NTJeewxmwNH5EvRT2U/9gWzGsjHWxmIuCwXWD3R07iav+eonWy\r\nmNbCRz4GH5DZSagvpZK+VLzlEB8S9IAN4JmnzBpcAPV2JeFoi2Fy5FWNd9P/\r\ndcJU5bXlieJiPSPtWpntyeOWrAkv2KkirhgZ/4XMHVJPprohJz6CinM/0gF1\r\n3saxuJFA3nqvt8UtQVLqo0jYhU0+xpip7IgAcF7HdJlbf4YsWOcncw7ZiDW7\r\nSUoa7K1eMhDgv7UfofPM50MUPKldJcyHrN8=\r\n=uw5j\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2304062309.0_1680855844645_0.9424380165648765"},"_hasShrinkwrap":false},"1.2304122229.0":{"name":"@bentoproject/fit-text","version":"1.2304122229.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2304122229.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"a622b88bef291701e9f95f448f46d014e6e12d5b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2304122229.0","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-6fRTXzFEcIZgqLnu5v7wSf2Wgxp+1fR+8DBgaYXVR5aPrhKPYhtULS0ZiHlWgKUM/r6ipKV33To0Qk63THZ+fA==","shasum":"0e933a40a56490a292f725db363e33bc2172e90b","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2304122229.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMS+BLDpMbSzv/03PQA8wuWdkX+Fp+8iPP5HlLiXR6EQIgPPMxvjrNdzQUNgJZuxVodm3uG/v1M3m0Z7CeoeUuzxE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkN7xQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppHA//U3THnAHumqGgEefLW64MoJQe27a6clzQLoD7lvWIvDBT3vYT\r\ndF1ZoLdt/zNJ2JXOQsWtpO8UsqMYDioOzy00foJLSWd2PfDbfFTRrxEhVudD\r\nWVT3vxpIcfwwvu7ijJSnNMVbdtobWtjiBHOLtaVlha3FYonCEFWPjhwljGot\r\nMALWh26Mp2uRcXVlCu0Dqvcxr1dNNP8gfB2uKfNChEvFRfn4vnZYNGoJkD1l\r\nsTi8owowms/qghL2/8dNVRMusFSTbAQSd7JTH9eHl0fG9hDAA7W5/Slh2I4x\r\n7idxirlO1EX62OwBNLoZDhGs7jyEXunfl6te8oeOMocUcLSsleLjQswJMYky\r\nz2OV1TJmfBbMZ2iXj5MYyD1nVYzzdSEPr4fO2FwJOq8X4ZBtJZKZIKM4TPX8\r\nZSy7YcsN6L6tFpzSc14hiA5PW9Ep5NzlCJ1iEHBKNcJtJOR3c4yrXWRWDCrb\r\n75f61a8x4wYuwtCzkhX0YBZehYCI3iIawQ9lNCpMFEtjvQmphF2KvNHJSTPl\r\nmFpHkTi+z8DP+QHiZ08o5JI3EIbt4RwDcQb4qGWmQxlh6JjIPMTlBJwdIDF9\r\nq926B4Jjr/ASkqCsE+n1Qw48Puo+7WaQ1d33inFcjF3r2q0orheP4td3OLTj\r\nykKvgtVlTJWZBxPoTzabEI7lJF0H3TSN/4E=\r\n=QCQ5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2304122229.0_1681374287987_0.6432957998420545"},"_hasShrinkwrap":false},"1.2304132133.0":{"name":"@bentoproject/fit-text","version":"1.2304132133.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2304132133.0"},"gitHead":"453223019920559443567aa4d698b7ca016b28d7","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2304132133.0","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-BDGYHntUb1vux1in6S5HekF8MR30Yb4KCFc1UXhHvxFlXtXwiumbwU2caVs0MqfxeN+NSodxOp7vV06Bl1ORkg==","shasum":"c138adfb73a636bc2817c546ac2a94b7272ac068","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2304132133.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBEP3VoVzXmtlGOY31BG6phxp/Tq2hEkfbftENdlaooxAiEAhUsOzJeXdnvwvT4aA8l8TMsm/3OHuphLro9cDYuwv1Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOQ38ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGUw/+JkKptnw00ATFGfKgJK2C2/VgbticF7ZmwCW0rPwK97DX54VH\r\nFK69i1x2MCIYlx2lEikOpsp5JWr3Zm8vWjPw8gC9ROYUy5w5r0sHXzBEB2y7\r\nBlDkt8ruzPbB/5f0Lzt3VrSEVuN2ha5A1OiV4AbvcQAkc2CfV7mDnM90Pw84\r\n/iffsIRPZNx7L8e5BKueUzkm/DAfosbJlG+ruOBTuNnfbsizszd0ZOXmY5UB\r\nZqcn+Asx9+l5oWUjdyU1MIrw9cBDqJFYtHYmyxLhIbK6y/7XGH0zXxUwsc4d\r\ndRrsIQLn+0PrAzhOZIyGw76GjOOI4j0XhUy87weF9r0EgoGVlQ64ajxRT5cU\r\nr/zpgwVzJYMvpLcLpPKjJNlEZu+gVqpKNmunac89IVH0dzYrwp9GuoijcRV+\r\n6qXEGuWY5PqxjlM0Y3tm/fz3loPtd0WO4sSixs6FfstmyHIWCALHN7u40OW1\r\nLRufcI+K+w6JpHmEBodWw0xwH1xUZR1sweCl7c+8hh59pCBHVSufANscQtb7\r\nVR3KqugRh7VDLG+WhCv5ZCj14R51tVCwM0pb440NAnF+20PXaLfD02g1Mmze\r\n6YuwUziQDWSxqJl+wt1V9ntaDlrBYP3xQcL3Z76Kek5diS63YjbmpLS5fKDs\r\nUTrzI+AJOIsbeWRpxumTMqU2+WOK3x0w7Yc=\r\n=0l6r\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2304132133.0_1681460732139_0.20987020075136154"},"_hasShrinkwrap":false},"1.2304212144.0":{"name":"@bentoproject/fit-text","version":"1.2304212144.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2304212144.0"},"gitHead":"74060fa076cb05cd0859ed848acd32302f1e46dc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2304212144.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-OHQbDH31QHarfhV5XXAW7vh8s8ZngvtYymlA3t1QLpgYCDgjXVrN/uq44/YFQMmlSwtWeeqTkbSiEcQIWbdxqA==","shasum":"4c0f98eb4e8e468d45ec75ba17146d4bd5c819bb","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2304212144.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxLDBvWP++QpBNqFgPODHG725ioXP/T/BelmKjH2FE9wIgXLuspYSUPasJ3flfC5mzF4v+/Wl+se3oHiwLAT9S8Ck="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQ5ojACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHWw//aVG0rR0EQB8RCQJuB0pPJRDb7mXL6ybUVsW/dCyZq3MWzFpG\r\ntiInVEwZgXHpxSdiXVkmFpzX23XoA8tVr4f4ZrUqDDMZDvVnkDIgDHPoE08l\r\nfZXHy/gil67P4Kbbhjemw0S75cwl6FfniyP389Afu1rYXFJS3/ps6kDHvzIc\r\nwrkno9xiYRN6weGTpEkmE81J6BVFom3JUxrPXPEvq3pzvDni1YP54s0s5u2A\r\n/M5fGxGvnASVPUPMpM69/iIvryCdyjob/a4U3K8pDdbbsCFe9bheoLDEcEsl\r\nVpmBWE2TVFpwMm3HTiFlwaVPkQYdjlvBvcviIKZdQz/aV5ZNUJ3Gg7cSIN3g\r\nSLXm7UV+9ax0PfPwTI+nwcNyUO0EV6pMqx0+ABVdJl4JdEl9bopSCOJ8QRzx\r\nj+f/fLONSYsFiTziVJCx/h2uPGF4vQooEnSisU4kvfd2DZblAxcWGD16xRN8\r\nO508U09MvVGaibuu9TMObF/2+PQsWbDKuvua3M6WI8BWoOf42TK+aUKaGmO5\r\nRlOY7imO6qYwFv80jRrx26smBwS7MACOki+zwLsgSqxWvR7f7ZRI4P5AMAmD\r\nofyLM1WK8stHb8C/XMk/cyFwo/XGS9ufNeqIRy8wcArZXnICc5ghYunFxFyS\r\n6XrNbH75gdZoPbMnRsApBYtMni2f0h9HSow=\r\n=PU+4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2304212144.0_1682151971600_0.6462440703164996"},"_hasShrinkwrap":false},"1.2304241924.0":{"name":"@bentoproject/fit-text","version":"1.2304241924.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2304241924.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"f962c0db0e4934715d4bbce41c2220e6cc8bc1ec","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2304241924.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-gkVnFWw1Ba3HS9dM0Qlmu3KeO1Khz7Ac8I/66FSGlBHyQlaHE/IJhr3NJ4XN9jHdiKzYD4FBptgCEeqj9gi1mg==","shasum":"d1d46b4d745f0d87fe38ce1fa5099cdd73ab38e6","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2304241924.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFtRjX/gAbHHTOSz6TCLOkSNVddH1AFtrJam1KCxblVvAiEAkDByKhmiBrbCFPNbtuoXAnEnuEv4Vleoq2VnYc5urHk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkR46fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAjg/+PMKEELLms1ieX+e6BC5PGUB9L5Q8UEVNI2zwRBu0ajlyh7Iq\r\nxApsCIX2XHDW9ZtWNT0J9407/YdRuj210JIlp83gEBa6+eJg1X+37xKRgMiP\r\nreRVbGYY8eL2w/mAwkJKgC9ZyURoJ3jjUU9ueWFiFPl3QNwLrl2ioK+yzK+D\r\nulVqj0muhSi732DXxIymaAeec/Tk5WKtbXN62YLk4QlNv8JQInIejVJdFv2b\r\nCUbU6w1Y0RKBgusYYCOwA5ERR0GPy+Xdm33yObFCzBsyn/3At8tt5pZ5hag3\r\nOruenvggoCgwY9mmwmQlvaYYlhJLuWLEJIa5DvlIeV7S/+/CQqx5WohCfmxi\r\nX982xhiJNX9SbxsLY2rIcbjDauJV71Eb4v8g3d1H5pECbmeEcrQRxR7wZxUH\r\nRzeDVf3dE0ul67zm4rxUlzuz/Xo+ulZx80mXfhnz5aRBmYIKUoCpvTrcsOwf\r\nQb+vGnE37jyHu2gGcbkNU6jbSPLYB72S4YRr8fS3ZramgPd7oFi29FhV78ZQ\r\nreZT4Kf2VCjLiVFsWebKAy7dPNDYn49PuXIqi4sjA3Wpm5J8qlk6VzwFxRjf\r\nzPL8JbFcwZb7nG94PGM+Rq6DO9OElhsWCKbzRwuuY8zzhgQe8GzYjka7V6Kn\r\nAxQldXxpttOF3e4gC8rKDKGA3EhGBXH8/CQ=\r\n=rQTJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2304241924.0_1682411167610_0.3310113923586835"},"_hasShrinkwrap":false},"1.2304262219.0":{"name":"@bentoproject/fit-text","version":"1.2304262219.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2304262219.0"},"gitHead":"1e6e00ef42b6ca33dcb23d56bce6506f0b5b81b2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2304262219.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-ZFB77egXlcC10Qvquwaja5BsGl6dZxZfXq339x9zhaiEFTKeOPjw/YcuY5yE7OUEHxrLs4ly8unGZxP4EYg+CQ==","shasum":"c85a8e6a4cce3e0c450a208f6267e5ef57110a21","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2304262219.0.tgz","fileCount":31,"unpackedSize":302685,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDRBBGg+TfRfF2U2NSpidv3TmoC2/tSw10yAlCVL7IJ5AiEAo7a194PF0Uyh8cInD3+XaismmD0QhYW7x3Br5rbq/5I="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSjIHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWTg/+Is7JmVEVpdKd2DWaXylg/d2H6pWNv9+QzUAPgf+m+e6z2GEB\r\nGhuW34ghWThg+WUk3V8aL4Nb5p1FC50VNT2UsTzvmqoHpL0K8CN1YMehdIej\r\n+uqYCkygTNc4/xaCJ4Bts5xJa8FscWHw/K1B4e+MApM4/4yXZjFawwrbplOD\r\ndRWpqEsIYHsnZujK/7SgT4ukSd743ffAhK8i1Xx4RqvmQb2W5u6vYAm6a9uH\r\ntGYqwPqZFRDbevMfSOXq3N2qylcI8YStJZIDxmDLWIaNvlpPDmXoR5wL7zt3\r\nSHT9CVp5+Sf47hMVMFrPEPic3b1zJT4Q+j/+xyhwqqqnanOOGzxaG9Ljo5Xi\r\n45A2CC/ylGJRmDx2Yv6eF1nU5vru8b5cTwtL7TEugehaJPzhs9VpIU9z4380\r\nPPheBLrmpJ2//71QL/X24ubF9GXmVpVba+Q21O4jQFOlrj9CFWiqIKyy98PQ\r\nvTGZWVSAcm1lmM/RpWO3Eo048CAdswOIECPadYlKXKBtm6d+v5mqPxNalvnZ\r\nskQ8Q/fW/+7IQeALu9c5SLHikW2P/WwUn1zS45KphAlph1A1Gury2TGgMNSd\r\n6hBybvK0zVQe3Gg83BILs2Q5x8xb3lmNwBYFi59SL7NK5etWbRsja8Ab6ml2\r\nzHNI8pv3qOYNUFVcaKELNEl3xpZd22asxyc=\r\n=ypZ/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2304262219.0_1682584071434_0.44275573286512304"},"_hasShrinkwrap":false},"1.2305022024.0":{"name":"@bentoproject/fit-text","version":"1.2305022024.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305022024.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"275d6cbfacfdba2a626c1c3d191df16325439dc2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2305022024.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-3uz/8QUPvQ2VWH3GzHoRY/ow7p1q/vy3n9JJNyd1+0Gq5wPyj19JO2z7v79LMP6tVg7tI48X8waUe4wSrhXwHg==","shasum":"87988f8208a386620a7ee2af096cf4bab382a34c","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2305022024.0.tgz","fileCount":31,"unpackedSize":304629,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAUgwxBPzOfv7q2X52z/0O4BT+IbxkoKoYUGtJ+Q5XGAIgeXDkJwgZB7bUoCQQupX6Cmr8rynOFgCIWous/BXXxK8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUhsDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqj0A//elbXQVJibM+yG27qpDKfRxONIcr9Ss4hRTy3NxCl47subXBY\r\n8cE3h74kSMiTs93dnsEHTgbLgrcOlXlzy20t4TFoDV5SAZnxHdSbg/JGXw7o\r\nVxWRvo0eK4HsTHmFL6qULuWrSph82bVp7EHaoc41JHsZ8nYyQoOszLuagbtM\r\n+NsbqnszmDLqI1E+jUQlTMqmse/dxKpTHMV/euv/J3QpPfULWRp+zJYHKTZC\r\nyEywzmzl/0ritpll4edQ5Nbn4fk7OM0qoCZvQEYdySVlJ6UiJNGyjWKGYW0m\r\nsOZkgBvw/xkNNh3Rhy6nemuiQev/36PoG//i+dAJ3Lzbs0u7vBRXI9ZlgqJy\r\nTGh7Ey99KYqBuA7UEj/v2oOH6aX8tGizzHHHNA35BDL1YbT/nBHxXju7+H1F\r\nsZlGeHYstcCnP8OGh+Nb5/FY21LuoiQPJoXhN/GSZJz79RbeTTgBz59QWmVH\r\nsUh4d0nQ/byyul6clER4Kuss/l8AFTiULZWIKGa5W4315TIzEsUqM1KJumvz\r\nXC50EPpzz2Ef96jU/RrBCmqCzX5xkZpfgjjQpJpTq42ArBU3Kmu6abN/i1HV\r\nyD+TtKI2oVTFShCWXE2f0WI4bQV3loL4gYhGyHaHu3o3cFoKupZvvl0E+U8t\r\nTvXde29LcMVeKuYLegi8niXhiyeP3VH6ipU=\r\n=dkGm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2305022024.0_1683102467346_0.9457008316456046"},"_hasShrinkwrap":false},"1.2305051745.0":{"name":"@bentoproject/fit-text","version":"1.2305051745.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305051745.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"a6aa8f04998e5f74539b892e6fde8143851f1ef6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2305051745.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-nCbgA34s9K6tUQb19TWST3fOoZctTpefTFfJFcWNmrF4KWnpX7+6naQA4zusxXDfoMiah9TiH65BqkfV/RLELw==","shasum":"0b72daf11f5a3edc9c3f0a5604426545e7f89f84","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2305051745.0.tgz","fileCount":31,"unpackedSize":304629,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGK4rNzc+tgdpCYVoJ1GZ8NjKnR7SR5xMvOcLLb9fU0PAiAaZpncgvif8JSLob354iTYNzbDnKOW436laQknUx/+aw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2305051745.0_1683361489361_0.9572180066297014"},"_hasShrinkwrap":false},"1.2305152039.0":{"name":"@bentoproject/fit-text","version":"1.2305152039.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305152039.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"4130d5e4016e588172d11ef0a84dea019bf08e0f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2305152039.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-8KkxbSnrkagLnziZGeDuV6OkrFdXELSlP4QtRVf8GDmXnO4efiO8eap9/9Y5ADq2XrNrkS6KuTbWD5mL33eXGA==","shasum":"130dc7d904979a7447a37c9fa1bbd102c4fa3fd9","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2305152039.0.tgz","fileCount":31,"unpackedSize":304629,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCejpi7ks5mFifAEpPxiIUpfurk27GQCTh0iWx/5A4dZgIgRU6APJjXmBHBLloYT3eCLgpPjQdb7GAbsP1h+qf14kU="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2305152039.0_1684225602970_0.009970505617863612"},"_hasShrinkwrap":false},"1.2305182038.0":{"name":"@bentoproject/fit-text","version":"1.2305182038.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305182038.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"885f40954f2783f7451ec4e195b909ce170466fc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2305182038.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-c1dGE3DwsHWGzjGJ2ouO7Eh4QAiMiJuqpg6IsflwjF5NsWmIdmAnk1Jct09ZZd2P4MYDg2G5C4v1ofmGbN+dVw==","shasum":"3fe05cff775911102a8da8208e444d04193f63fe","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2305182038.0.tgz","fileCount":31,"unpackedSize":304629,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHGA8GqQT2zJHY4hxANoOij6yCteiRbiJ+GRm45/56TqAiAf2Za3Ve8I6bTbJRbHKJxVmPD/ox77W7sBcLFxkfxhbA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2305182038.0_1684484867093_0.2171559254031319"},"_hasShrinkwrap":false},"1.2305221508.0":{"name":"@bentoproject/fit-text","version":"1.2305221508.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305221508.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"f6a823a49114a57cdbf351ab983baaf0bdf4bd1d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2305221508.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-qYMxHCzDQ64oTKUwP6IDjl38Z+veHjDkUVzT8YY3mkXoTH8SdT5lq714ZvOd3Ghok8H+023GSPCmwAh+DbzBDA==","shasum":"5430c1228bfccc71a8802c5465c4b29169450bf3","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2305221508.0.tgz","fileCount":31,"unpackedSize":304629,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1c7XYGMKaxTYB5O/JxA44V+B8F27gkbO6XtCBjWZ5SAIgHLWsYC/0A+42/DZDd+ivMPQeQvmx/biqypo6cKB0xBU="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2305221508.0_1684830379338_0.319932270444621"},"_hasShrinkwrap":false},"1.2305051745.1":{"name":"@bentoproject/fit-text","version":"1.2305051745.1","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305051745.1"},"gitHead":"c7c16e5e6f51fa01e6e31b5edddf60feacb1ebb1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2305051745.1","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-W10awtFSbPcFRJYQOkJ3cDPOoLklmH7wuHNj1b0JzOWHfx0WlrmhRlv9F55x41EwXARoReUz1cjy+ql/5jLDTg==","shasum":"c67ac2cedb6f02189767acd6a614f83aded5ca53","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2305051745.1.tgz","fileCount":31,"unpackedSize":304629,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCny4YBnQgCaSzO/GOjCUeHao/yp9ZkaCbvrlEGjMKn/gIgUVIQPk6nnDFCFNhgFKVSBn2ngWAiTZXevBczo6sHiZo="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2305051745.1_1684883033798_0.10883847129970348"},"_hasShrinkwrap":false},"1.2305232041.0":{"name":"@bentoproject/fit-text","version":"1.2305232041.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305232041.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"c7c16e5e6f51fa01e6e31b5edddf60feacb1ebb1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2305232041.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-FTOaJFJDvAr64i/7JC5zkpxVjSdGN5+qp7buaHsxKBZPnTt8NlgRd4osn4lTlpXP/Q/7yW4JxdQ5wTabzuwfuw==","shasum":"3e90eed2bdbcc6284349f58edd2ad9527f4c95f7","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2305232041.0.tgz","fileCount":31,"unpackedSize":304629,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHRGwU80UzfE9G27rWvUc1RMVEGeucWAEJeWsJV1WwtFAiAPRjFRy+D+wPlVbCrB5xjRRnRftLmxQIj+XcYzV0KAUg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2305232041.0_1684916809850_0.9238969734842224"},"_hasShrinkwrap":false},"1.2305241828.0":{"name":"@bentoproject/fit-text","version":"1.2305241828.0","description":"Determines the best font size to fit all of a given text content within the available space.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305241828.0"},"readme":"# Bento Fit Text\n\nDetermines the best font size to fit all of a given text content within the available space.\n\nThe expected content for Bento Fit Text is text or other inline content, but it can also contain non-inline content.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport {defineElement as defineBentoFitText} from '@bentoproject/fit-text';\ndefineBentoFitText();\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-fit-text-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-fit-text-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-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n  </body>\n</html>\n```\n\n### Overflowing content\n\nIf the content of the `bento-fit-text` overflows the available space, even with a `min-font-size` specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.\n\nIn the following example, we specified a `min-font-size` of `40`, and added more content inside the `bento-fit-text` element. This causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.\n\n```html\n<div style=\"width: 300px; height: 300px; background: #005af0; color: #fff\">\n  <bento-fit-text min-font-size=\"40\">\n    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire\n    et, vim at aeque inermis reprehendunt\n  </bento-fit-text>\n</div>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://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-fit-text-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-fit-text {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-fit-text` component has 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-fit-text {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Accessibility considerations of overflowing content\n\nWhile overflowing content is _visually_ truncated to fit the container, note that it's still present in the document. Do not rely on the overflow behaviour to simply \"stuff\" large amounts of content in your pages - while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.\n\n### Attributes\n\n#### Media Queries\n\nThe attributes for `<bento-fit-text>` can be configured to use different options based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n#### `min-font-size`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `max-font-size`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### API Example\n\nProgrammatically changing an attribute value will automatically update the element.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-fit-text-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-fit-text id=\"my-fit-text\">\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </bento-fit-text>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"font-button\">Change max-font-size</button>\n      <button id=\"content-button\">Change content</button>\n    </div>\n\n    <script>\n      (async () => {\n        const fitText = document.querySelector('#my-fit-text');\n        await customElements.whenDefined('bento-fit-text');\n\n        // set up button actions\n        document.querySelector('#font-button').onclick = () =>\n          fitText.setAttribute('max-font-size', '40');\n        document.querySelector('#content-button').onclick = () =>\n          (fitText.textContent = 'new content');\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/fit-text\n```\n\n```javascript\nimport React from 'react';\nimport {BentoFitText} from '@bentoproject/fit-text/react';\nimport '@bentoproject/fit-text/styles.css';\n\nfunction App() {\n  return (\n    <BentoFitText>\n      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque\n      inermis reprehendunt.\n    </BentoFitText>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoFitText` component has 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<BentoFitText style={{width: 300, height: 100}}>\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\nOr via `className`:\n\n```jsx\n<BentoFitText className=\"custom-styles\">\n  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis\n  reprehendunt.\n</BentoFitText>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `minFontSize`\n\nSpecifies the minimum font size in pixels as an integer that the `bento-fit-text` can use.\n\n#### `maxFontSize`\n\nSpecifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.\n","readmeFilename":"README.md","gitHead":"fcd19c6354383946b2d66b95efec56661b06e5b6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/fit-text@1.2305241828.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-WsYskon1Hsq6CdXqBXOJibIe0oaGi+w7pkULre6OJesLP9ajQmGcYihpTftMWAoj+3FdTgb8o0olmcBuoBbUYg==","shasum":"3ad91aaae37bae4d3eae27f81216697f9f39e647","tarball":"https://registry.npmjs.org/@bentoproject/fit-text/-/fit-text-1.2305241828.0.tgz","fileCount":31,"unpackedSize":304629,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtQa6qfOmmViQeH5kHaQlLV0wV2aUTcYZvnc7okIns/gIgQg7iGL9D5DkDWbbtKMMx6SSr/y3UXmokiM2ZcJHjRw4="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fit-text_1.2305241828.0_1685003193105_0.8095389044128318"},"_hasShrinkwrap":false}},"time":{"created":"2021-10-28T18:31:29.363Z","1.2110261518.0":"2021-10-28T18:31:29.598Z","modified":"2023-05-25T08:26:33.469Z","1.2110252343.0":"2021-10-28T21:47:07.703Z","1.2110281959.0":"2021-10-29T11:52:09.123Z","1.2110290545.0":"2021-10-30T11:21:12.005Z","1.2111011823.0":"2021-11-02T11:24:59.483Z","1.2110152252.3":"2021-11-02T22:03:47.351Z","1.2110212130.2":"2021-11-02T22:15:02.781Z","1.2111022043.0":"2021-11-03T11:21:28.795Z","1.2111180040.0":"2021-11-18T21:26:58.195Z","1.2111060251.3":"2021-11-18T21:42:12.501Z","1.2111182332.0":"2021-11-19T12:24:16.035Z","1.2111060251.9":"2021-11-19T16:31:02.523Z","1.2111191951.0":"2021-11-20T12:23:55.052Z","1.2111230244.0":"2021-11-23T12:24:39.173Z","1.2111230636.0":"2021-11-24T12:22:22.464Z","1.2111242025.0":"2021-11-25T12:42:09.407Z","1.2111292120.0":"2021-11-30T12:40:58.259Z","1.2111152338.2":"2021-11-30T17:54:03.198Z","1.2112010058.0":"2021-12-01T12:18:42.908Z","1.2112012300.0":"2021-12-02T12:30:43.820Z","1.2112021656.0":"2021-12-03T12:21:54.759Z","1.2112032204.0":"2021-12-04T12:20:11.507Z","1.2112062322.0":"2021-12-07T12:27:02.551Z","1.2112062322.1":"2021-12-07T21:38:25.446Z","1.2112062322.2":"2021-12-07T22:29:41.218Z","1.2112080230.0":"2021-12-08T13:21:32.047Z","1.2112080230.1":"2021-12-08T15:57:01.214Z","1.2112082232.0":"2021-12-09T12:45:15.475Z","1.2111242025.1":"2021-12-10T00:11:29.753Z","1.2112091956.0":"2021-12-10T12:46:05.236Z","1.2112102136.0":"2021-12-11T12:31:06.863Z","1.2112132331.0":"2021-12-14T12:59:44.461Z","1.2112160003.0":"2021-12-16T12:19:16.147Z","1.2112162055.0":"2021-12-17T12:17:25.557Z","1.2112170012.0":"2021-12-18T12:18:02.979Z","1.2112201724.0":"2021-12-21T12:21:08.615Z","1.2112212349.0":"2021-12-22T12:23:34.126Z","1.2112221739.0":"2021-12-23T12:18:50.292Z","1.2112231523.0":"2021-12-24T12:20:25.739Z","1.2201042109.0":"2022-01-05T12:31:12.036Z","1.2201052144.0":"2022-01-06T12:40:32.663Z","1.2201061922.0":"2022-01-07T12:31:37.467Z","1.2201071715.0":"2022-01-08T12:21:33.932Z","1.2201101902.0":"2022-01-11T12:30:30.920Z","1.2112231523.1":"2022-01-11T19:25:17.896Z","1.2201120015.0":"2022-01-12T12:30:17.599Z","1.2112231523.2":"2022-01-12T22:38:46.962Z","1.2201122239.0":"2022-01-13T13:00:05.538Z","1.2201131702.0":"2022-01-14T13:03:54.225Z","1.2201141909.0":"2022-01-15T12:20:34.467Z","1.2201141909.1":"2022-01-25T19:50:34.940Z","1.2201141909.3":"2022-01-26T20:58:36.797Z","1.2201141909.4":"2022-02-01T21:37:31.945Z","1.2201212122.3":"2022-02-02T17:58:09.367Z","1.2202012258.0":"2022-02-02T19:12:48.508Z","1.2202022130.0":"2022-02-03T16:55:58.296Z","1.2202031816.0":"2022-02-04T15:47:28.469Z","1.2202042210.0":"2022-02-05T09:18:01.679Z","1.2202072236.0":"2022-02-08T09:20:07.056Z","1.2201262038.1":"2022-02-08T21:12:25.322Z","1.2202082004.0":"2022-02-09T22:16:35.695Z","1.2202092050.0":"2022-02-10T17:56:51.436Z","1.2202112230.0":"2022-02-14T21:06:02.992Z","1.2202142035.0":"2022-02-15T09:25:30.331Z","1.2202042210.1":"2022-02-15T18:23:09.590Z","1.2202152253.0":"2022-02-16T09:08:20.594Z","1.2202162256.0":"2022-02-17T09:29:58.557Z","1.2202180255.0":"2022-02-18T09:44:41.683Z","1.2202230359.0":"2022-02-23T09:29:43.229Z","1.2202232232.0":"2022-02-24T15:23:02.888Z","1.2202241911.0":"2022-02-25T15:17:49.693Z","1.2202252101.0":"2022-02-28T16:46:34.692Z","1.2202230359.1":"2022-03-01T22:05:25.831Z","1.2203041950.0":"2022-03-15T18:36:05.248Z","1.2203151539.0":"2022-03-16T08:21:50.279Z","1.2203172113.0":"2022-03-18T08:23:06.951Z","1.2203221937.0":"2022-03-23T08:25:00.958Z","1.2203231914.0":"2022-03-24T08:23:19.962Z","1.2203101844.0":"2022-03-24T20:09:23.333Z","1.2203281422.0":"2022-03-29T08:28:01.169Z","1.2204121632.0":"2022-04-12T18:14:53.396Z","1.2204122000.0":"2022-04-13T08:30:49.039Z","1.2204132005.0":"2022-04-14T08:31:53.191Z","1.2204142048.0":"2022-04-15T08:26:20.452Z","1.2204160405.0":"2022-04-16T08:24:06.662Z","1.2204182206.0":"2022-04-19T08:29:26.402Z","1.2204191429.0":"2022-04-20T08:31:13.021Z","1.2204211736.0":"2022-04-22T08:25:44.753Z","1.2204221712.0":"2022-04-23T08:24:10.105Z","1.2204252045.0":"2022-04-26T08:31:30.263Z","1.2204272205.0":"2022-04-28T08:31:00.916Z","1.2204281949.0":"2022-04-29T08:26:17.930Z","1.2204292129.0":"2022-04-30T08:24:25.715Z","1.2205031420.0":"2022-05-04T08:26:07.047Z","1.2205041533.0":"2022-05-05T08:25:23.033Z","1.2205051832.0":"2022-05-06T08:25:10.286Z","1.2205090810.0":"2022-05-10T08:31:10.695Z","1.2205101904.0":"2022-05-11T08:31:03.526Z","1.2205120110.0":"2022-05-12T08:30:18.345Z","1.2205161914.0":"2022-05-17T08:25:22.588Z","1.2205181800.0":"2022-05-19T08:25:52.277Z","1.2205191749.0":"2022-05-20T08:26:22.845Z","1.2205232225.0":"2022-05-24T08:25:35.794Z","1.2205120110.1":"2022-05-24T19:11:56.214Z","1.2205251942.0":"2022-05-26T08:26:14.860Z","1.2205270638.0":"2022-05-27T08:25:30.969Z","1.2206071918.0":"2022-06-07T22:26:24.106Z","1.2206072228.0":"2022-06-08T08:25:47.600Z","1.2206082301.0":"2022-06-09T08:29:42.822Z","1.2205270638.4":"2022-06-10T21:33:48.600Z","1.2206101637.0":"2022-06-11T08:25:23.907Z","1.2206131450.0":"2022-06-14T08:26:56.831Z","1.2206071918.1":"2022-06-14T21:25:50.406Z","1.2206162023.0":"2022-06-17T08:26:17.278Z","1.2206221455.0":"2022-06-23T08:26:25.509Z","1.2206291614.0":"2022-06-30T16:07:12.482Z","1.2207071723.0":"2022-07-08T08:33:06.328Z","1.2207181727.0":"2022-07-19T08:25:17.922Z","1.2207201724.0":"2022-07-21T08:25:44.630Z","1.2207221643.0":"2022-07-23T08:26:22.002Z","1.2207261725.0":"2022-07-27T08:25:18.878Z","1.2207281718.0":"2022-07-29T08:28:26.872Z","1.2208021808.0":"2022-08-03T08:26:22.429Z","1.2208042017.0":"2022-08-05T08:28:04.168Z","1.2208051912.0":"2022-08-06T08:27:05.053Z","1.2208081650.0":"2022-08-09T08:27:24.647Z","1.2208092047.0":"2022-08-10T08:26:38.334Z","1.2207281718.1":"2022-08-10T16:56:29.796Z","1.2207281718.2":"2022-08-10T18:15:40.049Z","1.2208112015.0":"2022-08-12T08:27:10.350Z","1.2208121708.0":"2022-08-13T08:25:44.284Z","1.2208051912.1":"2022-08-16T23:05:15.163Z","1.2208172101.0":"2022-08-24T20:54:47.035Z","1.2208242209.0":"2022-08-25T08:25:58.010Z","1.2209072154.0":"2022-09-08T08:24:19.722Z","1.2209131909.0":"2022-09-14T08:43:25.291Z","1.2208242209.1":"2022-09-15T16:42:26.362Z","1.2209142312.0":"2022-09-20T22:07:18.207Z","1.2210010655.0":"2022-10-04T16:49:24.772Z","1.2210041838.0":"2022-10-05T08:29:11.581Z","1.2210052034.0":"2022-10-06T08:25:22.839Z","1.2210071758.0":"2022-10-08T08:25:22.162Z","1.2210112333.0":"2022-10-12T08:24:40.315Z","1.2210142102.0":"2022-10-15T08:23:41.820Z","1.2210172057.0":"2022-10-18T08:26:50.473Z","1.2210191347.0":"2022-10-20T08:24:41.713Z","1.2210211855.0":"2022-10-22T08:23:10.874Z","1.2210251605.0":"2022-10-26T08:27:02.622Z","1.2210272257.0":"2022-10-28T08:26:39.793Z","1.2211042305.0":"2022-11-05T08:24:13.437Z","1.2211060024.0":"2022-11-08T08:24:57.287Z","1.2211111611.0":"2022-11-12T08:24:01.669Z","1.2211151402.0":"2022-11-16T18:36:04.286Z","1.2211182146.0":"2022-11-19T08:25:00.580Z","1.2211250451.0":"2022-11-25T08:24:05.912Z","1.2211302304.0":"2022-12-01T08:23:42.689Z","1.2212071834.0":"2022-12-07T19:37:02.810Z","1.2212092023.0":"2022-12-10T08:24:30.363Z","1.2211302304.1":"2022-12-13T21:52:51.749Z","1.2212151632.0":"2022-12-20T15:52:05.662Z","1.2212151632.1":"2022-12-20T20:09:19.685Z","1.2211302304.2":"2022-12-20T22:32:15.247Z","1.2212151632.2":"2023-01-03T18:12:15.709Z","1.2301031703.0":"2023-01-03T20:29:16.295Z","1.2301032153.0":"2023-01-04T08:24:36.033Z","1.2301041800.0":"2023-01-05T08:25:10.181Z","1.2301100345.0":"2023-01-10T08:25:22.598Z","1.2301112346.0":"2023-01-12T08:26:33.920Z","1.2301181928.0":"2023-01-19T08:25:45.178Z","1.2301261900.0":"2023-01-27T08:26:29.147Z","1.2301301810.0":"2023-01-31T08:26:03.379Z","1.2302012254.0":"2023-02-02T08:24:37.202Z","1.2302021743.0":"2023-02-03T08:26:13.377Z","1.2302031721.0":"2023-02-04T08:24:19.994Z","1.2302171719.0":"2023-02-18T08:22:59.765Z","1.2302271541.0":"2023-02-28T17:24:09.127Z","1.2303151529.0":"2023-03-15T16:26:53.172Z","1.2303151621.0":"2023-03-22T08:24:52.230Z","1.2303231800.0":"2023-03-29T09:54:53.875Z","1.2304040531.0":"2023-04-04T08:25:35.373Z","1.2304062309.0":"2023-04-07T08:24:04.821Z","1.2304122229.0":"2023-04-13T08:24:48.174Z","1.2304132133.0":"2023-04-14T08:25:32.340Z","1.2304212144.0":"2023-04-22T08:26:11.727Z","1.2304241924.0":"2023-04-25T08:26:07.782Z","1.2304262219.0":"2023-04-27T08:27:51.694Z","1.2305022024.0":"2023-05-03T08:27:47.577Z","1.2305051745.0":"2023-05-06T08:24:49.522Z","1.2305152039.0":"2023-05-16T08:26:43.250Z","1.2305182038.0":"2023-05-19T08:27:47.269Z","1.2305221508.0":"2023-05-23T08:26:19.539Z","1.2305051745.1":"2023-05-23T23:03:53.997Z","1.2305232041.0":"2023-05-24T08:26:50.039Z","1.2305241828.0":"2023-05-25T08:26:33.343Z"},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"description":"Determines the best font size to fit all of a given text content within the available space.","homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-fit-text/1.0","repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-fit-text/1.0"},"author":{"name":"Bento Authors"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"license":"Apache-2.0","readme":"","readmeFilename":""}