<!-- Generated by tools/docs.php from docs/src/migrate.html - edit the source, not this file. -->

# From Bootstrap 5.3

Most of Bootstrap 5's names stay. What changes is the spacing numbers, the grid, the breakpoints, states and triggers, and the three components Bootstrap 6 renamed. The two libraries are never on one page: a project switches its stylesheet at once.

## What changes

- **Spacing:** the number is the pixels. `p-3` becomes `p-16`, `mb-2` `mb-8`, `gap-4` `gap-24` - and `p-4` exists in both with another size: Bootstrap's 24 px, REDZ.UI's 4 px. Never rename by chained replacements; rewrite each file once.
- **Grid:** `row` and `col-md-6` become the parent's `grid md:cols-2`; a column's own width is `span-N`.
- **Breakpoints:** the infix becomes a prefix - `d-md-none` is `md:d-none` - and it measures the region, not the window.
- **States:** classes become attributes - `.active` is `aria-current`, `aria-selected` or `aria-pressed`; `.disabled` is `disabled` or `aria-disabled`; `.is-invalid` is `aria-invalid="true"`.
- **Triggers:** `data-bs-toggle` becomes the browser's commands - `commandfor` + `command="show-modal"`, `"close"` or `"toggle-popover"`; `bootstrap.Modal` becomes `dialog.showModal()`.
- **Renamed:** modal → `dialog` on a `<dialog>`, dropdown → `menu` on a popover, offcanvas → `drawer`.
- **Icons:** Bootstrap Icons keep their classes; swap the font's stylesheet for `css/icons.min.css`.

## With an agent

The skill `redz-ui-from-bootstrap-5` moves a project file by file: `scripts/scan.sh` finds every Bootstrap class, attribute and call with its replacement and checks every class against the vocabulary; the agent rewrites the whole file in one pass, scans it again until nothing is left, and compares the screens before and after. Install it with `npx skills add redz-tech/REDZ.UI`.

Content kept in a database - page bodies an editor wrote long ago - moves once, with no hand on each body: the skill's `scripts/convert.php` (PHP 8.4 or later) rewrites a body by the map, gives a row the columns its children's spans need, follows a few rows by their context (a badge's tone, a compact table, a lead paragraph, white text on a tone) and lists what it left for a person to decide.

## The map

Every class of Bootstrap 5.3.8 that changes, with what it becomes; a class not listed keeps its name, and a breakpoint form follows its class - `mb-md-3` is `md:mb-16`. The full map, every class and form, is the skill's `assets/map.tsv`.

| Bootstrap 5.3 | REDZ.UI | Change | Note |
| --- | --- | --- | --- |
| `accordion-button` | - | remove | the summary is the button; its chevron is <i class="bi bi-chevron-down accordion-icon"> |
| `accordion-collapse` | - | remove | the body follows the summary inside the <details> |
| `accordion-header` | `accordion-header` | review | the item's <summary> with the button's words in it; no heading and no button inside |
| `accordion-item` | `accordion-item` | review | a <details>; the items of one group share a name, as data-bs-parent did |
| `active` | - | state | aria-current, aria-selected or aria-pressed: the attribute of the element's role |
| `alert-dark` | - | review | the plain alert, or a tone |
| `alert-dismissible` | - | review | a btn-close at the end, removed by your script |
| `alert-heading` | - | review | a strong title in the alert's div |
| `alert-light` | - | review | the plain alert, or a tone |
| `alert-link` | - | review | a plain link |
| `alert-secondary` | - | review | the plain alert, or a tone |
| `bg-black` | - | review | bg-body, bg-page, bg-raised or a tone |
| `bg-body-secondary` | `bg-page` | rename |  |
| `bg-body-tertiary` | `bg-raised` | rename |  |
| `bg-dark` | - | review | bg-body, bg-page, bg-raised or a tone |
| `bg-dark-subtle` | - | review | bg-page, or a tone's -subtle |
| `bg-gradient` | - | remove | no gradients |
| `bg-light` | - | review | bg-body, bg-page, bg-raised or a tone |
| `bg-light-subtle` | - | review | bg-page, or a tone's -subtle |
| `bg-opacity-10` | - | review | Bootstrap 6 dropped it too: bg-{tone}-subtle |
| `bg-opacity-100` | - | review | Bootstrap 6 dropped it too: bg-{tone}-subtle |
| `bg-opacity-25` | - | review | Bootstrap 6 dropped it too: bg-{tone}-subtle |
| `bg-opacity-50` | - | review | Bootstrap 6 dropped it too: bg-{tone}-subtle |
| `bg-opacity-75` | - | review | Bootstrap 6 dropped it too: bg-{tone}-subtle |
| `bg-white` | - | review | bg-body, bg-page, bg-raised or a tone |
| `blockquote` | - | missing |  |
| `blockquote-footer` | - | missing |  |
| `border-3` | - | review | the widths are 1, 2 and 4 px |
| `border-5` | - | review | the widths are 1, 2 and 4 px |
| `border-black` | - | review | border-strong, or a tone |
| `border-bottom-0` | - | missing | draw only the sides you need: border-top and the others |
| `border-dark` | - | review | border-strong, or a tone |
| `border-dark-subtle` | - | review | border, or border-strong |
| `border-end-0` | - | missing | draw only the sides you need: border-top and the others |
| `border-light` | - | review | border-strong, or a tone |
| `border-light-subtle` | - | review | border, or border-strong |
| `border-opacity-10` | - | missing |  |
| `border-opacity-100` | - | missing |  |
| `border-opacity-25` | - | missing |  |
| `border-opacity-50` | - | missing |  |
| `border-opacity-75` | - | missing |  |
| `border-start-0` | - | missing | draw only the sides you need: border-top and the others |
| `border-top-0` | - | missing | draw only the sides you need: border-top and the others |
| `border-white` | - | review | border-strong, or a tone |
| `bs-popover-auto` | - | remove | no arrow: anchor positioning places and flips the panel |
| `bs-popover-bottom` | - | remove | no arrow: anchor positioning places and flips the panel |
| `bs-popover-end` | - | remove | no arrow: anchor positioning places and flips the panel |
| `bs-popover-start` | - | remove | no arrow: anchor positioning places and flips the panel |
| `bs-popover-top` | - | remove | no arrow: anchor positioning places and flips the panel |
| `bs-tooltip-auto` | - | remove | the tooltip is one element |
| `bs-tooltip-bottom` | - | remove | the tooltip is one element |
| `bs-tooltip-end` | - | remove | the tooltip is one element |
| `bs-tooltip-start` | - | remove | the tooltip is one element |
| `bs-tooltip-top` | - | remove | the tooltip is one element |
| `btn-close-white` | - | remove | the close glyph takes the text color |
| `btn-dark` | - | review | no light or dark buttons: btn or btn-text |
| `btn-light` | - | review | no light or dark buttons: btn or btn-text |
| `btn-outline-dark` | - | review | btn-outline-secondary |
| `btn-outline-light` | - | review | btn-outline-secondary |
| `caption-top` | - | missing |  |
| `card-group` | - | review | grid with gap-16 |
| `card-header-pills` | - | review | a nav straight in the card |
| `card-header-tabs` | - | review | a nav straight in the card |
| `card-link` | - | review | a heading and paragraphs in card-body |
| `card-subtitle` | - | review | a heading and paragraphs in card-body |
| `card-text` | - | review | a heading and paragraphs in card-body |
| `card-title` | - | review | a heading and paragraphs in card-body |
| `carousel-caption` | - | review | the slide's own text, laid out with utilities |
| `carousel-control-next` | - | review | a btn btn-icon with command="--next" and aria-controls naming the carousel |
| `carousel-control-next-icon` | `bi bi-chevron-right` | rename | mirrored right to left |
| `carousel-control-prev` | - | review | a btn btn-icon with command="--prev" and aria-controls naming the carousel |
| `carousel-control-prev-icon` | `bi bi-chevron-left` | rename | mirrored right to left |
| `carousel-dark` | - | review | data-theme="dark" on the carousel |
| `carousel-item-end` | - | remove | the browser scrolls the row |
| `carousel-item-next` | - | remove | the browser scrolls the row |
| `carousel-item-prev` | - | remove | the browser scrolls the row |
| `carousel-item-start` | - | remove | the browser scrolls the row |
| `clearfix` | - | remove | no floats |
| `col` | - | grid | equal columns come from the parent's cols-N; the child needs no class |
| `col-1` | `span-1` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-10` | `span-10` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-11` | `span-11` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-12` | `span-12` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-2` | `span-2` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-3` | `span-3` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-4` | `span-4` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-5` | `span-5` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-6` | `span-6` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-7` | `span-7` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-8` | `span-8` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-9` | `span-9` | grid | N of 12: the parent is grid cols-12 (or md:cols-12) |
| `col-auto` | - | review | a column as wide as its content: hstack, or grid-template-columns in the module's CSS |
| `col-form-label` | `form-label` | review | a form-label in a form-field |
| `collapse` | - | state | closed: hidden="until-found" on the region; open: no hidden; its button has command="--toggle" |
| `collapse-horizontal` | - | review | not planned: a region opens downward, in its place |
| `collapsed` | - | state | aria-expanded="false" on the button, set by the browser or by --toggle |
| `collapsing` | - | remove | the region opens at once |
| `column-gap-1` | `column-gap-4` | value | the number is the pixels |
| `column-gap-2` | `column-gap-8` | value | reused: column-gap-2 means another thing in REDZ.UI; the number is the pixels |
| `column-gap-3` | `column-gap-16` | value | the number is the pixels |
| `column-gap-4` | `column-gap-24` | value | reused: column-gap-4 means another thing in REDZ.UI; the number is the pixels |
| `column-gap-5` | `column-gap-48` | value | the number is the pixels |
| `container` | - | review | the shell's app-main, or a region with max-w-* and mx-auto |
| `container-fluid` | - | review | the shell's app-main, or a region with max-w-* and mx-auto |
| `disabled` | - | state | disabled, or aria-disabled="true" to keep the focus |
| `display-1` | `fs-32` | review | the largest size here |
| `display-2` | `fs-32` | review | the largest size here |
| `display-3` | `fs-32` | review | the largest size here |
| `display-4` | `fs-32` | review | the largest size here |
| `display-5` | `fs-32` | review | the largest size here |
| `display-6` | `fs-32` | review | the largest size here |
| `dropdown` | - | remove | no wrapper: the menu flips by itself |
| `dropdown-center` | - | remove | no wrapper: the menu flips by itself |
| `dropdown-divider` | `menu-divider` | rename |  |
| `dropdown-header` | `menu-header` | rename |  |
| `dropdown-item` | `menu-item` | rename | role="menuitem" |
| `dropdown-item-text` | - | review | menu-header, or plain text |
| `dropdown-menu` | `menu` | rename | with popover and role="menu" |
| `dropdown-menu-dark` | - | remove | the theme sets it |
| `dropdown-menu-end` | - | remove | the menu meets its button's end edge by default |
| `dropdown-menu-start` | `menu-start` | rename |  |
| `dropdown-toggle` | - | review | the button: commandfor + command="toggle-popover" + aria-haspopup="menu"; a chevron is an icon |
| `dropdown-toggle-split` | - | review | a btn-group of the action and a btn-icon that opens the menu |
| `dropend` | - | remove | no wrapper: the menu flips by itself |
| `dropstart` | - | remove | no wrapper: the menu flips by itself |
| `dropup` | - | remove | no wrapper: the menu flips by itself |
| `dropup-center` | - | remove | no wrapper: the menu flips by itself |
| `fade` | - | remove | the components animate themselves, and not for people who ask for less motion |
| `figure` | - | missing |  |
| `figure-caption` | - | missing |  |
| `figure-img` | - | missing |  |
| `fixed-bottom` | - | review | position-fixed with top-0 or bottom-0, start-0 and end-0 |
| `fixed-top` | - | review | position-fixed with top-0 or bottom-0, start-0 and end-0 |
| `focus-ring` | - | remove | the focus ring is built in, 3:1 in both themes |
| `focus-ring-danger` | - | remove | the focus ring is built in, 3:1 in both themes |
| `focus-ring-dark` | - | remove | the focus ring is built in, 3:1 in both themes |
| `focus-ring-info` | - | remove | the focus ring is built in, 3:1 in both themes |
| `focus-ring-light` | - | remove | the focus ring is built in, 3:1 in both themes |
| `focus-ring-primary` | - | remove | the focus ring is built in, 3:1 in both themes |
| `focus-ring-secondary` | - | remove | the focus ring is built in, 3:1 in both themes |
| `focus-ring-success` | - | remove | the focus ring is built in, 3:1 in both themes |
| `focus-ring-warning` | - | remove | the focus ring is built in, 3:1 in both themes |
| `form-check-inline` | - | review | hstack gap-16 around the labels |
| `form-check-input` | - | review | check, radio or switch on the input, by its type |
| `form-check-label` | - | remove | the label is the form-check around the input |
| `form-check-reverse` | - | missing |  |
| `form-control-plaintext` | - | review | readonly on a form-control, or plain text |
| `form-switch` | - | review | switch on the input, with role="switch" |
| `fs-1` | `fs-32` | value | 40 px in Bootstrap; 32 is the largest here |
| `fs-2` | `fs-32` | value | 32 px |
| `fs-3` | `fs-24` | value | 28 px in Bootstrap |
| `fs-4` | `fs-24` | value | 24 px |
| `fs-5` | `fs-20` | value | 20 px |
| `fs-6` | `fs-16` | value | 16 px |
| `fw-bold` | `fw-700` | rename |  |
| `fw-bolder` | - | review | the weights are 400, 500, 600 and 700 |
| `fw-light` | - | review | the weights are 400, 500, 600 and 700 |
| `fw-lighter` | - | review | the weights are 400, 500, 600 and 700 |
| `fw-medium` | `fw-500` | rename |  |
| `fw-normal` | `fw-400` | rename |  |
| `fw-semibold` | `fw-600` | rename |  |
| `g-0` | `gap-0` | grid | on the grid parent |
| `g-1` | `gap-4` | grid | on the grid parent |
| `g-2` | `gap-8` | grid | on the grid parent |
| `g-3` | `gap-16` | grid | on the grid parent |
| `g-4` | `gap-24` | grid | on the grid parent |
| `g-5` | `gap-48` | grid | on the grid parent |
| `gap-1` | `gap-4` | value | the number is the pixels |
| `gap-2` | `gap-8` | value | reused: gap-2 means another thing in REDZ.UI; the number is the pixels |
| `gap-3` | `gap-16` | value | the number is the pixels |
| `gap-4` | `gap-24` | value | reused: gap-4 means another thing in REDZ.UI; the number is the pixels |
| `gap-5` | `gap-48` | value | the number is the pixels |
| `gx-0` | `column-gap-0` | grid | on the grid parent |
| `gx-1` | `column-gap-4` | grid | on the grid parent |
| `gx-2` | `column-gap-8` | grid | on the grid parent |
| `gx-3` | `column-gap-16` | grid | on the grid parent |
| `gx-4` | `column-gap-24` | grid | on the grid parent |
| `gx-5` | `column-gap-48` | grid | on the grid parent |
| `gy-0` | `row-gap-0` | grid | on the grid parent |
| `gy-1` | `row-gap-4` | grid | on the grid parent |
| `gy-2` | `row-gap-8` | grid | on the grid parent |
| `gy-3` | `row-gap-16` | grid | on the grid parent |
| `gy-4` | `row-gap-24` | grid | on the grid parent |
| `gy-5` | `row-gap-48` | grid | on the grid parent |
| `h1` | - | review | the h1-h4 sizes are the elements'; fs-* for another |
| `h2` | - | review | the h1-h4 sizes are the elements'; fs-* for another |
| `h3` | - | review | the h1-h4 sizes are the elements'; fs-* for another |
| `h4` | - | review | the h1-h4 sizes are the elements'; fs-* for another |
| `h5` | - | review | the h1-h4 sizes are the elements'; fs-* for another |
| `h6` | - | review | the h1-h4 sizes are the elements'; fs-* for another |
| `has-validation` | - | remove | fields have no success state |
| `hiding` | - | state | closed: no attribute |
| `icon-link-hover` | - | remove | the icon does not move on hover |
| `img-fluid` | - | review | images never overflow their box here; w-100 to fill it |
| `img-thumbnail` | - | missing |  |
| `initialism` | - | missing |  |
| `invalid-tooltip` | `invalid-feedback` | review | the error under the field |
| `is-invalid` | - | state | aria-invalid="true" on the control |
| `is-valid` | - | remove | fields have no success state |
| `lead` | `fs-16 text-muted` | review | a lead paragraph |
| `lh-1` | - | review | line heights are px here: lh-16, lh-20, lh-24, lh-28 |
| `lh-base` | - | review | line heights are px here: lh-16, lh-20, lh-24, lh-28 |
| `link-body-emphasis` | - | review | a link is the accent; text-* for a tone |
| `link-danger` | - | review | a link is the accent; text-* for a tone |
| `link-dark` | - | review | a link is the accent; text-* for a tone |
| `link-info` | - | review | a link is the accent; text-* for a tone |
| `link-light` | - | review | a link is the accent; text-* for a tone |
| `link-offset-1` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-offset-1-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-offset-2` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-offset-2-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-offset-3` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-offset-3-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-opacity-10` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-opacity-10-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-opacity-100` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-opacity-100-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-opacity-25` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-opacity-25-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-opacity-50` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-opacity-50-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-opacity-75` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-opacity-75-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-primary` | - | review | a link is the accent; text-* for a tone |
| `link-secondary` | - | review | a link is the accent; text-* for a tone |
| `link-success` | - | review | a link is the accent; text-* for a tone |
| `link-underline` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-danger` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-dark` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-info` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-light` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-0` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-0-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-10` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-10-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-100` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-100-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-25` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-25-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-50` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-50-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-75` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-75-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-primary` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-secondary` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-success` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-warning` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-warning` | - | review | a link is the accent; text-* for a tone |
| `list-group-item-danger` | - | review | no item tones: a badge or a dot in the item says it |
| `list-group-item-dark` | - | review | no item tones: a badge or a dot in the item says it |
| `list-group-item-info` | - | review | no item tones: a badge or a dot in the item says it |
| `list-group-item-light` | - | review | no item tones: a badge or a dot in the item says it |
| `list-group-item-primary` | - | review | no item tones: a badge or a dot in the item says it |
| `list-group-item-secondary` | - | review | no item tones: a badge or a dot in the item says it |
| `list-group-item-success` | - | review | no item tones: a badge or a dot in the item says it |
| `list-group-item-warning` | - | review | no item tones: a badge or a dot in the item says it |
| `list-inline` | - | review | hstack flex-wrap |
| `list-inline-item` | - | review | hstack flex-wrap |
| `m-1` | `m-4` | value | the number is the pixels |
| `m-2` | `m-8` | value | reused: m-2 means another thing in REDZ.UI; the number is the pixels |
| `m-3` | `m-16` | value | the number is the pixels |
| `m-4` | `m-24` | value | reused: m-4 means another thing in REDZ.UI; the number is the pixels |
| `m-5` | `m-48` | value | the number is the pixels |
| `mark` | - | missing |  |
| `mb-1` | `mb-4` | value | the number is the pixels |
| `mb-2` | `mb-8` | value | reused: mb-2 means another thing in REDZ.UI; the number is the pixels |
| `mb-3` | `mb-16` | value | the number is the pixels |
| `mb-4` | `mb-24` | value | reused: mb-4 means another thing in REDZ.UI; the number is the pixels |
| `mb-5` | `mb-48` | value | the number is the pixels |
| `me-1` | `me-4` | value | the number is the pixels |
| `me-2` | `me-8` | value | reused: me-2 means another thing in REDZ.UI; the number is the pixels |
| `me-3` | `me-16` | value | the number is the pixels |
| `me-4` | `me-24` | value | reused: me-4 means another thing in REDZ.UI; the number is the pixels |
| `me-5` | `me-48` | value | the number is the pixels |
| `mh-100` | - | missing |  |
| `modal` | `dialog` | rename | on a <dialog>, opened by commandfor + command="show-modal" |
| `modal-backdrop` | - | remove | the browser's ::backdrop |
| `modal-body` | `dialog-body` | rename |  |
| `modal-content` | - | remove | no wrappers: the <dialog> is the box |
| `modal-dialog` | - | remove | no wrappers: the <dialog> is the box |
| `modal-dialog-centered` | - | remove | a dialog is centered |
| `modal-dialog-scrollable` | - | remove | the dialog's body scrolls by itself |
| `modal-footer` | `dialog-footer` | rename |  |
| `modal-fullscreen` | `dialog-fullscreen` | rename |  |
| `modal-header` | `dialog-header` | rename |  |
| `modal-static` | - | remove | closedby="closerequest" |
| `modal-title` | `dialog-title` | rename |  |
| `ms-1` | `ms-4` | value | the number is the pixels |
| `ms-2` | `ms-8` | value | reused: ms-2 means another thing in REDZ.UI; the number is the pixels |
| `ms-3` | `ms-16` | value | the number is the pixels |
| `ms-4` | `ms-24` | value | reused: ms-4 means another thing in REDZ.UI; the number is the pixels |
| `ms-5` | `ms-48` | value | the number is the pixels |
| `mt-1` | `mt-4` | value | the number is the pixels |
| `mt-2` | `mt-8` | value | reused: mt-2 means another thing in REDZ.UI; the number is the pixels |
| `mt-3` | `mt-16` | value | the number is the pixels |
| `mt-4` | `mt-24` | value | reused: mt-4 means another thing in REDZ.UI; the number is the pixels |
| `mt-5` | `mt-48` | value | the number is the pixels |
| `mw-100` | - | review | max-w-* by px |
| `mx-1` | `mx-4` | value | the number is the pixels |
| `mx-2` | `mx-8` | value | reused: mx-2 means another thing in REDZ.UI; the number is the pixels |
| `mx-3` | `mx-16` | value | the number is the pixels |
| `mx-4` | `mx-24` | value | reused: mx-4 means another thing in REDZ.UI; the number is the pixels |
| `mx-5` | `mx-48` | value | the number is the pixels |
| `my-1` | `my-4` | value | the number is the pixels |
| `my-2` | `my-8` | value | reused: my-2 means another thing in REDZ.UI; the number is the pixels |
| `my-3` | `my-16` | value | the number is the pixels |
| `my-4` | `my-24` | value | reused: my-4 means another thing in REDZ.UI; the number is the pixels |
| `my-5` | `my-48` | value | the number is the pixels |
| `nav-item` | - | remove | links sit straight in the nav |
| `nav-tabs` | `nav-underline` | rename | tabs are drawn as an underline |
| `navbar-collapse` | `drawer` | review | a <nav class="drawer" popover id="ID"> after the toggler: drawer-header with its title, the links in drawer-body |
| `navbar-dark` | - | review | data-theme="dark" on the navbar, with a background such as bg-body |
| `navbar-nav-scroll` | - | remove | the panel scrolls by itself |
| `navbar-toggler-icon` | `bi bi-list` | rename | an icon in the toggler |
| `object-fit-scale` | - | review | object-fit-contain is the nearest |
| `offcanvas` | `drawer` | rename | on a <dialog>, opened by command="show-modal" |
| `offcanvas-backdrop` | - | remove | the browser's ::backdrop |
| `offcanvas-body` | `drawer-body` | rename |  |
| `offcanvas-bottom` | - | missing |  |
| `offcanvas-end` | `drawer` | rename | on a <dialog>, opened by command="show-modal" |
| `offcanvas-header` | `drawer-header` | rename |  |
| `offcanvas-start` | `drawer drawer-start` | rename |  |
| `offcanvas-title` | `drawer-title` | rename |  |
| `offcanvas-top` | - | missing |  |
| `offset-1` | - | review | no offsets: a span with an empty track before it |
| `offset-10` | - | review | no offsets: a span with an empty track before it |
| `offset-11` | - | review | no offsets: a span with an empty track before it |
| `offset-2` | - | review | no offsets: a span with an empty track before it |
| `offset-3` | - | review | no offsets: a span with an empty track before it |
| `offset-4` | - | review | no offsets: a span with an empty track before it |
| `offset-5` | - | review | no offsets: a span with an empty track before it |
| `offset-6` | - | review | no offsets: a span with an empty track before it |
| `offset-7` | - | review | no offsets: a span with an empty track before it |
| `offset-8` | - | review | no offsets: a span with an empty track before it |
| `offset-9` | - | review | no offsets: a span with an empty track before it |
| `p-1` | `p-4` | value | the number is the pixels |
| `p-2` | `p-8` | value | reused: p-2 means another thing in REDZ.UI; the number is the pixels |
| `p-3` | `p-16` | value | the number is the pixels |
| `p-4` | `p-24` | value | reused: p-4 means another thing in REDZ.UI; the number is the pixels |
| `p-5` | `p-48` | value | the number is the pixels |
| `pb-1` | `pb-4` | value | the number is the pixels |
| `pb-2` | `pb-8` | value | reused: pb-2 means another thing in REDZ.UI; the number is the pixels |
| `pb-3` | `pb-16` | value | the number is the pixels |
| `pb-4` | `pb-24` | value | reused: pb-4 means another thing in REDZ.UI; the number is the pixels |
| `pb-5` | `pb-48` | value | the number is the pixels |
| `pe-1` | `pe-4` | value | the number is the pixels |
| `pe-2` | `pe-8` | value | reused: pe-2 means another thing in REDZ.UI; the number is the pixels |
| `pe-3` | `pe-16` | value | the number is the pixels |
| `pe-4` | `pe-24` | value | reused: pe-4 means another thing in REDZ.UI; the number is the pixels |
| `pe-5` | `pe-48` | value | the number is the pixels |
| `placeholder-glow` | - | remove | placeholders pulse by themselves |
| `placeholder-wave` | - | remove | placeholders pulse by themselves |
| `placeholder-xs` | - | review | size by the height of the bar |
| `pointer-event` | - | remove | carousel only |
| `popover-arrow` | - | remove | no arrow: anchor positioning places and flips the panel |
| `progress` | `progress` | review | on a <progress value="40" max="100"> itself, not around a progress-bar with a width; a tone is progress-success and the like, not bg-* on the bar |
| `progress-bar` | - | remove | the browser draws the bar from value |
| `progress-bar-animated` | `progress-animated` | rename | it moves only while motion is allowed |
| `progress-bar-striped` | `progress-striped` | rename |  |
| `progress-stacked` | - | review | not planned: one <progress> a value |
| `ps-1` | `ps-4` | value | the number is the pixels |
| `ps-2` | `ps-8` | value | reused: ps-2 means another thing in REDZ.UI; the number is the pixels |
| `ps-3` | `ps-16` | value | the number is the pixels |
| `ps-4` | `ps-24` | value | reused: ps-4 means another thing in REDZ.UI; the number is the pixels |
| `ps-5` | `ps-48` | value | the number is the pixels |
| `pt-1` | `pt-4` | value | the number is the pixels |
| `pt-2` | `pt-8` | value | reused: pt-2 means another thing in REDZ.UI; the number is the pixels |
| `pt-3` | `pt-16` | value | the number is the pixels |
| `pt-4` | `pt-24` | value | reused: pt-4 means another thing in REDZ.UI; the number is the pixels |
| `pt-5` | `pt-48` | value | the number is the pixels |
| `px-1` | `px-4` | value | the number is the pixels |
| `px-2` | `px-8` | value | reused: px-2 means another thing in REDZ.UI; the number is the pixels |
| `px-3` | `px-16` | value | the number is the pixels |
| `px-4` | `px-24` | value | reused: px-4 means another thing in REDZ.UI; the number is the pixels |
| `px-5` | `px-48` | value | the number is the pixels |
| `py-1` | `py-4` | value | the number is the pixels |
| `py-2` | `py-8` | value | reused: py-2 means another thing in REDZ.UI; the number is the pixels |
| `py-3` | `py-16` | value | the number is the pixels |
| `py-4` | `py-24` | value | reused: py-4 means another thing in REDZ.UI; the number is the pixels |
| `py-5` | `py-48` | value | the number is the pixels |
| `ratio` | - | remove | the ratio goes on the element itself; an image inside a frame fills it with w-100 h-100 object-fit-cover |
| `rounded-1` | `rounded-4` | value | 4 px |
| `rounded-2` | `rounded-6` | value | 6 px |
| `rounded-3` | `rounded-8` | value | 8 px |
| `rounded-4` | `rounded-16` | value | reused: rounded-4 means another thing in REDZ.UI; 16 px |
| `rounded-5` | - | review | 32 px in Bootstrap: rounded-16 or rounded-full |
| `rounded-bottom-0` | `rounded-bottom` | review | a side takes the 8 px radius |
| `rounded-bottom-1` | `rounded-bottom` | review | a side takes the 8 px radius |
| `rounded-bottom-2` | `rounded-bottom` | review | a side takes the 8 px radius |
| `rounded-bottom-3` | `rounded-bottom` | review | a side takes the 8 px radius |
| `rounded-bottom-4` | `rounded-bottom` | review | a side takes the 8 px radius |
| `rounded-bottom-5` | `rounded-bottom` | review | a side takes the 8 px radius |
| `rounded-bottom-circle` | `rounded-bottom` | review | a side takes the 8 px radius |
| `rounded-bottom-pill` | `rounded-bottom` | review | a side takes the 8 px radius |
| `rounded-circle` | `rounded-full` | rename |  |
| `rounded-end-0` | `rounded-end` | review | a side takes the 8 px radius |
| `rounded-end-1` | `rounded-end` | review | a side takes the 8 px radius |
| `rounded-end-2` | `rounded-end` | review | a side takes the 8 px radius |
| `rounded-end-3` | `rounded-end` | review | a side takes the 8 px radius |
| `rounded-end-4` | `rounded-end` | review | a side takes the 8 px radius |
| `rounded-end-5` | `rounded-end` | review | a side takes the 8 px radius |
| `rounded-end-circle` | `rounded-end` | review | a side takes the 8 px radius |
| `rounded-end-pill` | `rounded-end` | review | a side takes the 8 px radius |
| `rounded-pill` | `rounded-full` | rename |  |
| `rounded-start-0` | `rounded-start` | review | a side takes the 8 px radius |
| `rounded-start-1` | `rounded-start` | review | a side takes the 8 px radius |
| `rounded-start-2` | `rounded-start` | review | a side takes the 8 px radius |
| `rounded-start-3` | `rounded-start` | review | a side takes the 8 px radius |
| `rounded-start-4` | `rounded-start` | review | a side takes the 8 px radius |
| `rounded-start-5` | `rounded-start` | review | a side takes the 8 px radius |
| `rounded-start-circle` | `rounded-start` | review | a side takes the 8 px radius |
| `rounded-start-pill` | `rounded-start` | review | a side takes the 8 px radius |
| `rounded-top-0` | `rounded-top` | review | a side takes the 8 px radius |
| `rounded-top-1` | `rounded-top` | review | a side takes the 8 px radius |
| `rounded-top-2` | `rounded-top` | review | a side takes the 8 px radius |
| `rounded-top-3` | `rounded-top` | review | a side takes the 8 px radius |
| `rounded-top-4` | `rounded-top` | review | a side takes the 8 px radius |
| `rounded-top-5` | `rounded-top` | review | a side takes the 8 px radius |
| `rounded-top-circle` | `rounded-top` | review | a side takes the 8 px radius |
| `rounded-top-pill` | `rounded-top` | review | a side takes the 8 px radius |
| `row` | `grid` | grid | on the parent, with cols-N for equal columns or cols-12 for spans; no gutters to undo |
| `row-cols-1` | `cols-1` | grid | on the same parent |
| `row-cols-2` | `cols-2` | grid | on the same parent |
| `row-cols-3` | `cols-3` | grid | on the same parent |
| `row-cols-4` | `cols-4` | grid | on the same parent |
| `row-cols-5` | `cols-5` | grid | on the same parent |
| `row-cols-6` | `cols-6` | grid | on the same parent |
| `row-cols-auto` | - | review | items as wide as their content: hstack flex-wrap |
| `row-gap-1` | `row-gap-4` | value | the number is the pixels |
| `row-gap-2` | `row-gap-8` | value | reused: row-gap-2 means another thing in REDZ.UI; the number is the pixels |
| `row-gap-3` | `row-gap-16` | value | the number is the pixels |
| `row-gap-4` | `row-gap-24` | value | reused: row-gap-4 means another thing in REDZ.UI; the number is the pixels |
| `row-gap-5` | `row-gap-48` | value | the number is the pixels |
| `shadow` | `shadow-2` | rename |  |
| `show` | - | state | the browser's [open] and :popover-open |
| `showing` | - | state | the browser's [open] and :popover-open |
| `small` | - | review | fs-12, or the <small> element |
| `sticky-bottom` | - | review | position-sticky with bottom-0 |
| `tab-content` | - | remove | panels are siblings with role="tabpanel", hidden when not selected |
| `tab-pane` | - | remove | panels are siblings with role="tabpanel", hidden when not selected |
| `table-dark` | - | review | row tones are danger, warning and secondary |
| `table-hover` | - | remove | every table lights its row under the pointer; table-static keeps one still |
| `table-info` | - | review | row tones are danger, warning and secondary |
| `table-light` | - | review | row tones are danger, warning and secondary |
| `table-primary` | - | review | row tones are danger, warning and secondary |
| `table-responsive` | `table-scroll` | rename | the wrapper scrolls sideways, table-scroll-first holds the first column; or columns hide below md: |
| `table-success` | - | review | row tones are danger, warning and secondary |
| `text-bg-danger` | `badge-danger` | review | on a badge; elsewhere bg-danger with the tone's -contrast text in the module's CSS |
| `text-bg-dark` | `badge-inverse` | review | on a badge: the text color as its background, light in the dark theme |
| `text-bg-info` | `badge-info` | review | on a badge; elsewhere bg-info with the tone's -contrast text in the module's CSS |
| `text-bg-light` | - | review | a plain badge, or a tone |
| `text-bg-primary` | `badge-primary` | review | on a badge; elsewhere bg-primary with the tone's -contrast text in the module's CSS |
| `text-bg-secondary` | `badge-secondary` | review | on a badge; elsewhere bg-secondary with the tone's -contrast text in the module's CSS |
| `text-bg-success` | `badge-success` | review | on a badge; elsewhere bg-success with the tone's -contrast text in the module's CSS |
| `text-bg-warning` | `badge-warning` | review | on a badge; elsewhere bg-warning with the tone's -contrast text in the module's CSS |
| `text-black` | - | review | no white, black, light or dark: text-body, text-muted or a tone; on bg-TONE, text-TONE-contrast |
| `text-black-50` | - | review | no white, black, light or dark: text-body, text-muted or a tone; on bg-TONE, text-TONE-contrast |
| `text-body-emphasis` | `text-body` | rename |  |
| `text-body-secondary` | `text-muted` | rename |  |
| `text-body-tertiary` | `text-faint` | rename |  |
| `text-danger-emphasis` | `text-danger` | rename | a tone's text color is already its emphasis |
| `text-dark` | - | review | no white, black, light or dark: text-body, text-muted or a tone; on bg-TONE, text-TONE-contrast |
| `text-dark-emphasis` | `text-body` | review | no light or dark: the text color |
| `text-info-emphasis` | `text-info` | rename | a tone's text color is already its emphasis |
| `text-light` | - | review | no white, black, light or dark: text-body, text-muted or a tone; on bg-TONE, text-TONE-contrast |
| `text-light-emphasis` | `text-body` | review | no light or dark: the text color |
| `text-opacity-100` | - | review | Bootstrap 6 dropped it too: text-muted or text-faint |
| `text-opacity-25` | - | review | Bootstrap 6 dropped it too: text-muted or text-faint |
| `text-opacity-50` | - | review | Bootstrap 6 dropped it too: text-muted or text-faint |
| `text-opacity-75` | - | review | Bootstrap 6 dropped it too: text-muted or text-faint |
| `text-primary-emphasis` | `text-primary` | rename | a tone's text color is already its emphasis |
| `text-secondary-emphasis` | `text-secondary` | rename | a tone's text color is already its emphasis |
| `text-success-emphasis` | `text-success` | rename | a tone's text color is already its emphasis |
| `text-warning-emphasis` | `text-warning` | rename | a tone's text color is already its emphasis |
| `text-white` | - | review | no white, black, light or dark: text-body, text-muted or a tone; on bg-TONE, text-TONE-contrast |
| `text-white-50` | - | review | no white, black, light or dark: text-body, text-muted or a tone; on bg-TONE, text-TONE-contrast |
| `toast-header` | - | review | REDZ.ui.toast builds the toast from its title, text and tone |
| `tooltip-arrow` | - | remove | the tooltip is one element |
| `tooltip-inner` | - | remove | the tooltip is one element |
| `valid-feedback` | - | remove | fields have no success state |
| `valid-tooltip` | - | remove | fields have no success state |
| `was-validated` | - | state | the browser's :user-invalid shows after the person edits |
| `--bs-accordion-active-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-accordion-active-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-accordion-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-accordion-body-padding-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-accordion-body-padding-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-accordion-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-accordion-border-radius` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-accordion-border-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-accordion-btn-active-icon` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-accordion-btn-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-accordion-btn-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-accordion-btn-focus-box-shadow` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-accordion-btn-icon` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-accordion-btn-icon-transform` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-accordion-btn-icon-transition` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-accordion-btn-icon-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-accordion-btn-padding-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-accordion-btn-padding-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-accordion-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-accordion-inner-border-radius` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-accordion-transition` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-alert-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-alert-border` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-alert-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-alert-border-radius` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-alert-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-alert-link-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-alert-margin-bottom` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-alert-padding-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-alert-padding-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-aspect-ratio` | - | review | ratio-* for the ratio; the property itself for the rest |
| `--bs-backdrop-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-backdrop-opacity` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-backdrop-zindex` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-badge-border-radius` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-badge-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-badge-font-size` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-badge-font-weight` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-badge-padding-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-badge-padding-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-bg-opacity` | - | review | a relative color or color-mix in place of the opacity |
| `--bs-black` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-black-rgb` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-blue` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-body-bg` | `--redz-bg` | rename |  |
| `--bs-body-bg-rgb` | - | review | a relative color from the matching --redz-* in place of the channels |
| `--bs-body-color` | `--redz-text` | rename |  |
| `--bs-body-color-rgb` | - | review | a relative color from the matching --redz-* in place of the channels |
| `--bs-body-font-family` | `--redz-font-sans` | rename |  |
| `--bs-body-font-size` | - | review | REDZ.UI's text is --redz-fs-14; the scale is --redz-fs-12 to --redz-fs-32 |
| `--bs-body-font-weight` | - | review | the body's own; lines are --redz-lh-16 to --redz-lh-28 |
| `--bs-body-line-height` | - | review | the body's own; lines are --redz-lh-16 to --redz-lh-28 |
| `--bs-border-color` | `--redz-border` | rename |  |
| `--bs-border-color-translucent` | `--redz-border` | review | REDZ.UI's border is solid in both themes |
| `--bs-border-opacity` | - | review | a relative color or color-mix in place of the opacity |
| `--bs-border-radius` | `--redz-radius-8` | rename |  |
| `--bs-border-radius-2xl` | `--redz-radius-16` | rename |  |
| `--bs-border-radius-pill` | - | review | 999px, as rounded-full writes it |
| `--bs-border-style` | - | review | REDZ.UI's borders are 1px solid: write the value |
| `--bs-border-width` | - | review | REDZ.UI's borders are 1px solid: write the value |
| `--bs-box-shadow` | `--redz-shadow-2` | rename |  |
| `--bs-box-shadow-inset` | - | remove | REDZ.UI draws no inset shadow |
| `--bs-breadcrumb-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-breadcrumb-border-radius` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-breadcrumb-divider-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-breadcrumb-item-active-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-breadcrumb-item-padding-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-breadcrumb-margin-bottom` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-breadcrumb-padding-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-breadcrumb-padding-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-breakpoint-xs` | - | remove | REDZ.UI's widths are the region prefixes sm: to 2xl: |
| `--bs-btn-active-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-active-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-active-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-active-shadow` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-border-radius` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-border-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-box-shadow` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-close-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-close-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-close-disabled-opacity` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-close-filter` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-close-focus-opacity` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-close-focus-shadow` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-close-hover-opacity` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-close-opacity` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-disabled-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-disabled-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-disabled-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-disabled-opacity` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-focus-box-shadow` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-focus-shadow-rgb` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-font-family` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-font-size` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-font-weight` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-hover-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-hover-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-hover-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-line-height` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-padding-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-btn-padding-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-card-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-card-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-card-border-radius` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-card-border-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-card-box-shadow` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-card-cap-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-card-cap-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-card-cap-padding-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-card-cap-padding-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-card-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-card-group-margin` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-card-height` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-card-img-overlay-padding` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-card-inner-border-radius` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-card-spacer-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-card-spacer-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-card-subtitle-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-card-title-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-card-title-spacer-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-carousel-caption-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-carousel-control-icon-filter` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-carousel-indicator-active-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-code-color` | - | review | code is the text color in --redz-font-mono |
| `--bs-cyan` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-danger` | `--redz-danger` | rename |  |
| `--bs-danger-bg-subtle` | `--redz-danger-subtle` | rename |  |
| `--bs-danger-border-subtle` | - | review | color-mix(in oklch, var(--redz-danger) 35%, var(--redz-border)), as border-danger-subtle draws it |
| `--bs-danger-rgb` | - | review | a relative color in place of the channels: rgb(from var(--redz-danger) r g b / 50%) |
| `--bs-danger-text-emphasis` | `--redz-danger` | review | the tone itself: REDZ.UI has no darker text of a tone |
| `--bs-dark` | - | review | light and dark are themes here (data-theme): --redz-bg, --redz-bg-page, --redz-text |
| `--bs-dark-bg-subtle` | - | review | light and dark are themes here (data-theme): --redz-bg, --redz-bg-page, --redz-text |
| `--bs-dark-border-subtle` | - | review | light and dark are themes here (data-theme): --redz-bg, --redz-bg-page, --redz-text |
| `--bs-dark-rgb` | - | review | light and dark are themes here (data-theme): --redz-bg, --redz-bg-page, --redz-text |
| `--bs-dark-text-emphasis` | - | review | light and dark are themes here (data-theme): --redz-bg, --redz-bg-page, --redz-text |
| `--bs-dropdown-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-border-radius` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-border-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-box-shadow` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-divider-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-divider-margin-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-font-size` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-header-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-header-padding-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-header-padding-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-inner-border-radius` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-item-padding-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-item-padding-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-link-active-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-link-active-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-link-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-link-disabled-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-link-hover-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-link-hover-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-min-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-padding-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-padding-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-spacer` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-dropdown-zindex` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-emphasis-color` | `--redz-text` | rename |  |
| `--bs-emphasis-color-rgb` | - | review | a relative color from the matching --redz-* in place of the channels |
| `--bs-focus-ring-color` | `--redz-focus` | review | REDZ.UI draws one focus ring: --redz-focus is its color |
| `--bs-focus-ring-opacity` | `--redz-focus` | review | REDZ.UI draws one focus ring: --redz-focus is its color |
| `--bs-focus-ring-width` | `--redz-focus` | review | REDZ.UI draws one focus ring: --redz-focus is its color |
| `--bs-font-monospace` | `--redz-font-mono` | rename |  |
| `--bs-font-sans-serif` | `--redz-font-sans` | rename |  |
| `--bs-form-check-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-form-check-bg-image` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-form-invalid-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-form-invalid-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-form-select-bg-icon` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-form-select-bg-img` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-form-switch-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-form-valid-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-form-valid-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-gradient` | - | remove | REDZ.UI draws no gradients |
| `--bs-gray` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-gray-100` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-gray-200` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-gray-300` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-gray-400` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-gray-500` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-gray-600` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-gray-700` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-gray-800` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-gray-900` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-gray-dark` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-green` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-gutter-x` | - | review | the grid's gap: gap-* on the grid |
| `--bs-gutter-y` | - | review | the grid's gap: gap-* on the grid |
| `--bs-heading-color` | `--redz-text` | rename |  |
| `--bs-highlight-bg` | - | review | mark is drawn by the base stylesheet |
| `--bs-highlight-color` | - | review | mark is drawn by the base stylesheet |
| `--bs-indigo` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-info` | `--redz-info` | rename |  |
| `--bs-info-bg-subtle` | `--redz-info-subtle` | rename |  |
| `--bs-info-border-subtle` | - | review | color-mix(in oklch, var(--redz-info) 35%, var(--redz-border)), as border-info-subtle draws it |
| `--bs-info-rgb` | - | review | a relative color in place of the channels: rgb(from var(--redz-info) r g b / 50%) |
| `--bs-info-text-emphasis` | `--redz-info` | review | the tone itself: REDZ.UI has no darker text of a tone |
| `--bs-light` | - | review | light and dark are themes here (data-theme): --redz-bg, --redz-bg-page, --redz-text |
| `--bs-light-bg-subtle` | - | review | light and dark are themes here (data-theme): --redz-bg, --redz-bg-page, --redz-text |
| `--bs-light-border-subtle` | - | review | light and dark are themes here (data-theme): --redz-bg, --redz-bg-page, --redz-text |
| `--bs-light-rgb` | - | review | light and dark are themes here (data-theme): --redz-bg, --redz-bg-page, --redz-text |
| `--bs-light-text-emphasis` | - | review | light and dark are themes here (data-theme): --redz-bg, --redz-bg-page, --redz-text |
| `--bs-link-color` | `--redz-link` | rename |  |
| `--bs-link-color-rgb` | - | review | a link's own color and line, written on the link |
| `--bs-link-decoration` | - | review | a link's own color and line, written on the link |
| `--bs-link-hover-color` | `--redz-link` | review | a link keeps its color on hover; the underline shows the hover |
| `--bs-link-hover-color-rgb` | - | review | a link's own color and line, written on the link |
| `--bs-link-opacity` | - | review | a link's own color and line, written on the link |
| `--bs-link-underline-opacity` | - | review | a link's own color and line, written on the link |
| `--bs-list-group-action-active-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-list-group-action-active-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-list-group-action-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-list-group-action-hover-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-list-group-action-hover-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-list-group-active-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-list-group-active-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-list-group-active-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-list-group-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-list-group-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-list-group-border-radius` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-list-group-border-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-list-group-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-list-group-disabled-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-list-group-disabled-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-list-group-item-padding-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-list-group-item-padding-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-modal-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-modal-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-modal-border-radius` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-modal-border-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-modal-box-shadow` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-modal-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-modal-footer-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-modal-footer-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-modal-footer-border-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-modal-footer-gap` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-modal-header-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-modal-header-border-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-modal-header-padding` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-modal-header-padding-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-modal-header-padding-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-modal-inner-border-radius` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-modal-margin` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-modal-padding` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-modal-title-line-height` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-modal-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-modal-zindex` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-nav-link-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-nav-link-disabled-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-nav-link-font-weight` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-nav-link-hover-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-nav-link-padding-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-nav-link-padding-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-nav-pills-border-radius` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-nav-pills-link-active-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-nav-pills-link-active-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-nav-tabs-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-nav-tabs-border-radius` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-nav-tabs-border-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-nav-tabs-link-active-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-nav-tabs-link-active-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-nav-tabs-link-active-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-nav-tabs-link-hover-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-nav-underline-border-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-nav-underline-gap` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-nav-underline-link-active-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-navbar-active-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-navbar-brand-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-navbar-brand-font-size` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-navbar-brand-hover-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-navbar-brand-margin-end` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-navbar-brand-padding-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-navbar-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-navbar-disabled-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-navbar-hover-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-navbar-nav-link-padding-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-navbar-padding-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-navbar-padding-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-navbar-toggler-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-navbar-toggler-border-radius` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-navbar-toggler-focus-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-navbar-toggler-font-size` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-navbar-toggler-icon-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-navbar-toggler-padding-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-navbar-toggler-padding-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-navbar-toggler-transition` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-offcanvas-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-offcanvas-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-offcanvas-border-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-offcanvas-box-shadow` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-offcanvas-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-offcanvas-height` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-offcanvas-padding-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-offcanvas-padding-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-offcanvas-title-line-height` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-offcanvas-transition` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-offcanvas-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-offcanvas-zindex` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-orange` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-pagination-active-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-pagination-active-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-pagination-active-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-pagination-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-pagination-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-pagination-border-radius` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-pagination-border-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-pagination-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-pagination-disabled-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-pagination-disabled-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-pagination-disabled-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-pagination-focus-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-pagination-focus-box-shadow` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-pagination-focus-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-pagination-font-size` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-pagination-hover-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-pagination-hover-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-pagination-hover-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-pagination-padding-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-pagination-padding-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-pink` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-popover-arrow-border` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-popover-arrow-height` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-popover-arrow-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-popover-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-popover-body-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-popover-body-padding-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-popover-body-padding-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-popover-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-popover-border-radius` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-popover-border-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-popover-box-shadow` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-popover-font-size` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-popover-header-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-popover-header-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-popover-header-font-size` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-popover-header-padding-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-popover-header-padding-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-popover-inner-border-radius` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-popover-max-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-popover-zindex` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-position` | - | review | ratio-* for the ratio; the property itself for the rest |
| `--bs-primary` | `--redz-primary` | rename |  |
| `--bs-primary-bg-subtle` | `--redz-primary-subtle` | rename |  |
| `--bs-primary-border-subtle` | - | review | color-mix(in oklch, var(--redz-primary) 35%, var(--redz-border)), as border-primary-subtle draws it |
| `--bs-primary-rgb` | - | review | a relative color in place of the channels: rgb(from var(--redz-primary) r g b / 50%) |
| `--bs-primary-text-emphasis` | `--redz-primary` | review | the tone itself: REDZ.UI has no darker text of a tone |
| `--bs-progress-bar-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-progress-bar-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-progress-bar-transition` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-progress-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-progress-border-radius` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-progress-box-shadow` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-progress-font-size` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-progress-height` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-purple` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-red` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-secondary` | `--redz-secondary` | rename |  |
| `--bs-secondary-bg` | `--redz-bg-hover` | rename |  |
| `--bs-secondary-bg-rgb` | - | review | a relative color from the matching --redz-* in place of the channels |
| `--bs-secondary-bg-subtle` | `--redz-secondary-subtle` | rename |  |
| `--bs-secondary-border-subtle` | - | review | color-mix(in oklch, var(--redz-secondary) 35%, var(--redz-border)), as border-secondary-subtle draws it |
| `--bs-secondary-color` | `--redz-text-muted` | rename |  |
| `--bs-secondary-color-rgb` | - | review | a relative color from the matching --redz-* in place of the channels |
| `--bs-secondary-rgb` | - | review | a relative color in place of the channels: rgb(from var(--redz-secondary) r g b / 50%) |
| `--bs-secondary-text-emphasis` | `--redz-secondary` | review | the tone itself: REDZ.UI has no darker text of a tone |
| `--bs-spinner-animation-name` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-spinner-animation-speed` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-spinner-border-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-spinner-height` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-spinner-vertical-align` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-spinner-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-success` | `--redz-success` | rename |  |
| `--bs-success-bg-subtle` | `--redz-success-subtle` | rename |  |
| `--bs-success-border-subtle` | - | review | color-mix(in oklch, var(--redz-success) 35%, var(--redz-border)), as border-success-subtle draws it |
| `--bs-success-rgb` | - | review | a relative color in place of the channels: rgb(from var(--redz-success) r g b / 50%) |
| `--bs-success-text-emphasis` | `--redz-success` | review | the tone itself: REDZ.UI has no darker text of a tone |
| `--bs-table-accent-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-table-active-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-table-active-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-table-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-table-bg-state` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-table-bg-type` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-table-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-table-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-table-color-state` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-table-color-type` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-table-hover-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-table-hover-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-table-striped-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-table-striped-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-teal` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-tertiary-bg` | `--redz-bg-page` | rename |  |
| `--bs-tertiary-bg-rgb` | - | review | a relative color from the matching --redz-* in place of the channels |
| `--bs-tertiary-color` | `--redz-text-faint` | rename |  |
| `--bs-tertiary-color-rgb` | - | review | a relative color from the matching --redz-* in place of the channels |
| `--bs-text-opacity` | - | review | a relative color or color-mix in place of the opacity |
| `--bs-toast-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-toast-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-toast-border-radius` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-toast-border-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-toast-box-shadow` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-toast-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-toast-font-size` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-toast-header-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-toast-header-border-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-toast-header-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-toast-max-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-toast-padding-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-toast-padding-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-toast-spacing` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-toast-zindex` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-tooltip-arrow-height` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-tooltip-arrow-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-tooltip-bg` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-tooltip-border-radius` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-tooltip-color` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-tooltip-font-size` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-tooltip-margin` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-tooltip-max-width` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-tooltip-opacity` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-tooltip-padding-x` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-tooltip-padding-y` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-tooltip-zindex` | - | review | REDZ.UI's components keep few custom properties: set the property itself on the part, or use a utility |
| `--bs-warning` | `--redz-warning` | rename |  |
| `--bs-warning-bg-subtle` | `--redz-warning-subtle` | rename |  |
| `--bs-warning-border-subtle` | - | review | color-mix(in oklch, var(--redz-warning) 35%, var(--redz-border)), as border-warning-subtle draws it |
| `--bs-warning-rgb` | - | review | a relative color in place of the channels: rgb(from var(--redz-warning) r g b / 50%) |
| `--bs-warning-text-emphasis` | `--redz-warning` | review | the tone itself: REDZ.UI has no darker text of a tone |
| `--bs-white` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-white-rgb` | - | review | a palette color: use the tone or the surface that means it |
| `--bs-yellow` | - | review | a palette color: use the tone or the surface that means it |
| `data-bs-toggle="modal"` | `commandfor="ID" command="show-modal"` | trigger | on the button; the dialog is a <dialog id="ID"> |
| `data-bs-toggle="offcanvas"` | `commandfor="ID" command="show-modal"` | trigger | the drawer is a <dialog id="ID"> |
| `data-bs-toggle="dropdown"` | `commandfor="ID" command="toggle-popover" aria-haspopup="menu"` | trigger | the menu gets popover and role="menu" |
| `data-bs-toggle="tab"` | `role="tab" aria-controls="ID"` | trigger | in a role="tablist"; the library selects and shows the panel |
| `data-bs-toggle="pill"` | `role="tab" aria-controls="ID"` | trigger | in a role="tablist" |
| `data-bs-toggle="button"` | `aria-pressed` | review | switch aria-pressed in your click handler |
| `data-bs-toggle="tooltip"` | `data-tooltips` | review | keep the title: data-tooltips on <html> or a container shows every title inside as a tooltip; a toggletip for longer words |
| `data-bs-title` | `title` | rename | the element's own title, inside data-tooltips |
| `data-bs-toggle="popover"` | `commandfor="ID" command="toggle-popover"` | trigger | the panel is a <div id="ID" class="popover" popover> right after the button |
| `data-bs-toggle="collapse"` | `command="--toggle" aria-controls="ID" aria-expanded="false"` | trigger | the region is hidden="until-found" while closed; in an accordion the item is a <details> |
| `data-bs-parent` | `name` | trigger | the same name on every <details> of the group |
| `data-bs-target` | `commandfor` | trigger | the id alone, without "#" |
| `data-bs-dismiss="modal"` | `commandfor="ID" command="close"` | trigger |  |
| `data-bs-dismiss="offcanvas"` | `commandfor="ID" command="close"` | trigger |  |
| `data-bs-dismiss="alert"` | - | review | remove the alert in your script |
| `data-bs-dismiss="toast"` | - | remove | REDZ.ui.toast adds its close button |
| `data-bs-backdrop="static"` | `closedby="closerequest"` | trigger | Esc closes it, a click outside does not |
| `data-bs-keyboard="false"` | `closedby="none"` | trigger | only its buttons close it |
| `data-bs-theme` | `data-theme` | rename | light or dark on <html> |
| `data-bs-placement` | - | remove | anchor positioning places and flips the menu |
| `data-bs-offset` | - | remove | anchor positioning places and flips the menu |
| `data-bs-auto-close` | - | remove | anchor positioning places and flips the menu |
| `data-bs-display` | - | remove | anchor positioning places and flips the menu |
| `data-bs-reference` | - | remove | anchor positioning places and flips the menu |
| `data-bs-boundary` | - | remove | anchor positioning places and flips the menu |
| `data-bs-popper-config` | - | remove | anchor positioning places and flips the menu |
| `data-bs-spy` | `data-scrollspy` | trigger | on the nav or list group of the links, not on the scrolled box; the link to the section in view gets aria-current="location" |
| `data-bs-slide="prev"` | `command="--prev" aria-controls="ID"` | trigger | the id of the carousel, without commandfor |
| `data-bs-slide="next"` | `command="--next" aria-controls="ID"` | trigger | the id of the carousel, without commandfor |
| `data-bs-slide-to` | - | remove | an empty carousel-indicators makes its buttons |
| `data-bs-ride` | `command="--play" aria-pressed="true"` | review | a play button pressed from the start, which a person who asks for less motion never sees play |
| `data-bs-interval` | - | remove | slides turn every 5 seconds |
| `bootstrap.Carousel` | `the --prev and --next buttons` | review | or scrollBy on carousel-inner; the row scrolls by the browser |
| `bootstrap.Modal` | `dialog.showModal() and dialog.close()` | trigger |  |
| `bootstrap.Offcanvas` | `dialog.showModal() and dialog.close()` | trigger |  |
| `bootstrap.Dropdown` | `menu.showPopover(), menu.hidePopover(), menu.togglePopover()` | trigger |  |
| `bootstrap.Tab` | `tab.click()` | review | the library selects on click and by the keys |
| `bootstrap.Toast` | `REDZ.ui.toast({title, text, tone})` | trigger |  |
| `bootstrap.Tooltip` | - | remove | data-tooltips on <html> or a container shows the titles inside |
| `bootstrap.Popover` | `panel.showPopover(), panel.hidePopover(), panel.togglePopover()` | trigger |  |
| `bootstrap.Collapse` | `region.hidden = false` | review | and setAttribute('hidden', 'until-found') to close; set aria-expanded on its buttons then: a button with command="--toggle" does both |
| `show.bs.modal` | `toggle` | review | the dialog's toggle event, or code right after showModal() |
| `shown.bs.modal` | `toggle` | review | the dialog's toggle event, or code right after showModal() |
| `hide.bs.modal` | `cancel` | review | the dialog's cancel event (Esc); your buttons close it |
| `hidden.bs.modal` | `close` | rename | the dialog's close event; dialog.returnValue holds the closing button's value |
| `show.bs.dropdown` | `toggle` | rename | the popover's toggle event; event.newState is "open" or "closed" |
| `shown.bs.dropdown` | `toggle` | rename | the popover's toggle event; event.newState is "open" or "closed" |
| `hide.bs.dropdown` | `toggle` | rename | the popover's toggle event; event.newState is "open" or "closed" |
| `hidden.bs.dropdown` | `toggle` | rename | the popover's toggle event; event.newState is "open" or "closed" |
| `shown.bs.tab` | - | review | watch aria-selected, or the tab's click |