twbs / bootstrap / 31460643836

94%

main: 96%

push

github

Make nav overflow a wrapper around the nav (#42814)

* Make nav overflow a wrapper around the nav

The component measured and observed the same .nav that it collapsed, so each
pass changed the width that produced it. Where the nav width tracked its
content, the two states straddled the collapseBelow threshold and the
ResizeObserver ran hundreds of times a second. That read as items that never
collapse, plus flicker on load.

The nav now lives inside a .nav-overflow wrapper that carries the data
attribute. The component measures and observes the wrapper, which its own output
cannot change. Inline-size containment on the wrapper closes the last path back
in: the min-content width of the items otherwise leaks through a flex ancestor
and widens the wrapper whenever the items are visible.

Items no longer shrink, so the measured widths are the widths the nav really
needs, and the nav gap is counted instead of a 10px fudge.

Fixes #42639

* Let moreText be false for an icon-only overflow toggle

An empty string already hid the label, but it left an empty element behind and
took the accessible name of the button with it. false says the intent, writes no
text element, and falls back to aria-label="More" so the button keeps a name.
An empty string now behaves the same way.

Closes #42639

* Use an English label in the custom toggle example

* Fix sanitizer specs for the wrapper API and bump JS budgets

The #42805 XSS specs still put data-bs-toggle on the nav itself. Point
them at the wrapper markup. Raise the minified JS caps by a quarter
kilobyte for the wrapper path growth.

* Document the nav overflow wrapper in the migration guide

1758 of 1979 branches covered (88.83%)

Branch coverage included in aggregate %.

47 of 47 new or added lines in 1 file covered. (100.0%)

3620 of 3759 relevant lines covered (96.3%)

120.21 hits per line