Add Range plugin for track fill, value bubble, and tick marks (#42525)
* Add Range plugin for track fill, value bubble, and tick marks
Adds an opt-in JavaScript plugin (`data-bs-range`) that enhances
`<input type="range">`. A consistent cross-browser fill can't be done
with pseudo-elements alone (only Firefox has `::-moz-range-progress`),
so the plugin publishes the current value as a `--bs-range-value`
custom property that the track gradient consumes.
- Fill: colored track up to the thumb, themeable via `--range-fill-bg`
- Value bubble (`data-bs-bubble`): floating value that tracks the thumb
- Tick marks (`data-bs-ticks`): generated from a linked `<datalist>`
The bubble and ticks are siblings of the input, so they don't inherit
the input's `--range-fill-bg`; the plugin copies the resolved value onto
them and the CSS falls back to `--primary-base` so they're never blank.
Plain `.form-range` inputs are untouched. Includes unit tests and docs.
* Range: anchor positioning on .form-range and rename track fill token
- Make `.form-range` the positioning context (`position: relative`) and
drop the JS-added `.range-anchored` class; the bubble and ticks are
siblings of the input, so they already share its offset parent.
- Rename `--range-fill-bg` to `--range-track-fill-bg` for accuracy.
- Keep SCSS custom properties unprefixed (the build adds `--bs-`) and
have the plugin read/write the prefixed names, matching the codebase.
- Trim obvious comments.
* Bump bundlewatch JS size limits for the Range plugin
* Range: make it a JS component with a wrapper, consolidate the CSS
Restructure range as an always-JS component so the fill, value bubble,
and tick marks are driven by a single `--bs-range-fill` ratio in CSS.
- `.form-range` is now a wrapper that owns the tokens; the input takes
`.form-range-input`. Children inherit the tokens, so the old JS color
copying and px positioning are gone.
- The plugin only sets `--bs-range-fill` (0–1) and the bubble text; the
track gradient, bubble position, and tick positions are pure CSS calc.
Drops `_thumbWidth`, `_inheritFillColor`, the resize listener, and the
`.range-anchored` class.
- Value bubble reuses the tooltip markup/styles instead of duplicating a
pill and arrow. Tick marks are generated from the linked `<datalist>`
and positioned per-value (handles uneven values); tick coloring dropped.
- Auto-inits every `.form-range`; rename fill token to
`--range-track-fill-bg`.
- Validation moves to `.form-range-input` with a `:has()` feedback toggle.
- Add the "New" badge to the Range sidebar item and document the breaking
changes in the migration guide.
* Range: lay out tick marks with CSS grid instead of absolute positioning
Build `grid-template-columns` from the gaps between the datalist values
so each tick lands on a grid line — this handles unevenly-spaced values
just like the old per-tick calc did, but keeps the ticks and their labels
in normal flow (the container sizes to fit the labels instead of them
overflowing an absolutely-positioned box). Inset by half the thumb so the
end ticks align with the thumb travel.
Also wraps the token map in the `custom-property-no-missing-var-function`
stylelint disable (matching _strength.scss). Includes the disabled-track
fill styling.
* Nudge bundlewatch JS limits after rebasing onto v6-dev