{ "package": "bootstrap-html", "version": "0.3.0", "bootstrap": "^5.3.8", "bootstrapBundleGzipKb": 23.3, "components": [ { "id": "accordion", "name": "Accordion", "route": "/components/accordion", "docs": "/components/accordion/", "summary": "Exclusive groups with details/summary and name.", "needsScript": false, "baseline": "newly", "element": { "name": "pe-focus-group", "module": "src/behaviors/focus-group.js", "required": false, "adds": "Arrow, Home, and End keys across the summaries. Tab works without it." }, "polyfills": [], "javascript": { "bootstrap": "5.6 KB gzip", "bootstrapHtml": "0 KB" }, "platform": { "bootstrap": "Collapse plugin. Accordion is that plugin; there is no accordion.js.", "bootstrapHtml": "details and summary, with name for an exclusive group" }, "support": { "noScript": "`details` / `summary`. Exclusive `name`: Chrome 120+, Firefox 130+, Safari 17.2+.", "polyfill": "None", "noFallback": "The height transition needs `interpolate-size: allow-keywords` to animate `block-size` from `0` to `auto`. That is Chromium-only (Chrome 129+), so Firefox and Safari snap the panel open. `::details-content` itself is Chrome 131+, Firefox 143+, Safari 18.4+, and only styles the panel." }, "replaces": [ { "from": "Accordion buttons", "to": "`
` with ``" }, { "from": "`data-bs-parent`", "to": "The same `name` on every `
` in the group" } ], "avoid": [ "`.accordion-button` has to be the ``, a direct child of the `
`.", "No `data-bs-toggle`. Opening state is the `open` attribute.", "Do not put `hidden` or `hidden=\"until-found\"` on `.accordion-body`. An open item would stay hidden. Accordion panels are `
`; `hidden=\"until-found\"` is for custom regions." ], "accessibility": [ "`
` / `` is a disclosure. The browser exposes expanded and collapsed; do not add `aria-expanded` on the summary.", "Do not put a heading inside ``. Screen-reader heading lists skip that text.", "Tab reaches every summary without script. Optional `` adds Arrow, Home, and End. Enter and Space still open the item.", "Closed panels stay in the document. Find in page can match them. Do not add `display: none` on the body." ], "example": "
\n
\n Accordion Item #1\n
\n This is the first item’s accordion body. It is shown by default. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n
\n
\n
\n Accordion Item #2\n
\n This is the second item’s accordion body. It is hidden by default. Find in page can still match this panel: the token is quetzalcoatlus.\n
\n
\n
\n Accordion Item #3\n
\n This is the third item’s accordion body. It is hidden by default. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n
\n
\n
" }, { "id": "alerts", "name": "Alerts", "route": "/components/alerts", "docs": "/components/alerts/", "summary": "Static alerts are HTML. Dismiss needs pe-alert.", "needsScript": true, "baseline": "newly", "element": { "name": "pe-alert", "module": "src/behaviors/alert.js", "required": true, "adds": "Removes the alert on `command=\"--dismiss\"`. A static alert does not use the element." }, "polyfills": [ { "module": "src/polyfills/invoker-commands.js", "gzipKb": 0.8, "loadedWhen": "commandForElement is missing and the page has [commandfor]." } ], "javascript": { "bootstrap": "5.0 KB gzip", "bootstrapHtml": "0.5 KB gzip" }, "platform": { "bootstrap": "Alert plugin", "bootstrapHtml": "pe-alert. command=--dismiss and commandfor. Required to remove the node." }, "support": { "noScript": "A static `.alert` needs no script. Without `alert.js` a dismissible alert stays.", "polyfill": "[`command` / `commandfor`](/polyfills#invoker-commands) when that API is missing. `pe-alert` is still required to remove the node.", "noFallback": "No native dismiss for an inline alert." }, "replaces": [ { "from": "`data-bs-dismiss=\"alert\"`", "to": "`` with `command=\"--dismiss\"` and `commandfor` set to the alert id. Load `src/behaviors/alert.js`." } ], "avoid": [ "`commandfor` is the alert id with no `#`.", "The close button has to sit inside the ``; the `command` event does not bubble." ], "accessibility": [ "Keep `role=\"alert\"` on an important message so assistive technology announces it. A static informational banner can be a `div` without that role.", "The close button needs an accessible name (`aria-label=\"Close\"` on `.btn-close`). Removing the node is the dismiss; there is no `aria-hidden` step." ], "example": "\n\n\n
Holy guacamole! You should check in on some of those fields below.
\n \n" }, { "id": "buttons", "name": "Buttons", "route": "/components/buttons", "docs": "/components/buttons/", "summary": "Toggle buttons are checkbox or radio plus .btn-check. No button plugin.", "needsScript": false, "baseline": "newly", "element": null, "polyfills": [], "javascript": { "bootstrap": "1.4 KB gzip", "bootstrapHtml": "0 KB" }, "platform": { "bootstrap": "Button plugin. It toggles .active and aria-pressed on a button.", "bootstrapHtml": "checkbox or radio with .btn-check and a label.btn" }, "support": { "noScript": "`.btn-check` is CSS on a native checkbox or radio. Chrome, Firefox, and Safari have shipped it with Bootstrap’s stylesheet.", "polyfill": "None", "noFallback": "None. Without this stylesheet the control is still a checkbox or radio. The label just looks like a button when `.btn-check` is present." }, "replaces": [ { "from": "`data-bs-toggle=\"button\"` and `aria-pressed` set from script", "to": "`` or `type=\"radio\"` with a `