Mark Otto [Tue, 23 Jun 2026 17:27:23 +0000 (10:27 -0700)]
Floating labels: place label before control for screen readers (#42539)
Floating labels required the control to precede the `<label>` in the DOM
so the floating animation could use a sibling (`~`) selector. That order
made screen readers (e.g. NVDA) announce the label after the field's
value instead of before it.
Switch the SCSS to look forward with `:has()` so the `<label>` can come
first in the DOM while the CSS still reacts to the control's state
(focus, value, disabled, autofill). Reorder all examples, docs, and the
visual test to label-first markup to match.
Also give `.form-control-plaintext` its own copy of the control tokens so
its `var(--control-*)` references resolve, fixing phantom borders and
label misalignment.
Mark Otto [Mon, 22 Jun 2026 17:51:31 +0000 (10:51 -0700)]
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
Mark Otto [Sun, 21 Jun 2026 04:52:17 +0000 (21:52 -0700)]
feat(a11y): use list-style-type "" instead of list-style none (#42526)
In Safari, "list-style: none" removes the list semantic role, so lists are
no longer announced by screen readers. Using "list-style-type: \"\"" keeps the
same visual result while preserving the list role.
Ports twbs/bootstrap#41778 to v6, plus the new v6 list containers (stepper,
menu, docs search results). Summary marker removals (accordion header,
details summary) are intentionally left as "list-style: none".
Mark Otto [Thu, 18 Jun 2026 02:31:20 +0000 (19:31 -0700)]
Convert list group and card group to container queries (#42512)
* Convert list group and card group to container queries
Replace viewport media queries with container queries for the responsive
.*:list-group-horizontal variants and the .card-group row layout, using the
existing container-breakpoint-up mixins. Both now respond to the width of a
parent query container (e.g., .contains-inline) rather than the viewport.
Update the docs to reflect the new behavior, flip css_media to container, and
list both components under the container queries guide.
* Document container query migration for card group and list group
* Fix doubled card-group borders by overlapping adjacent cards
The v6 border model moved borders off the outer .card onto the inner
segments (.card-header, .card-body, .card-list, .card-footer) and the card
images use outlines. The card-group seam code still removed border-inline-start
from .card, which no longer has a border, so adjacent cards rendered doubled
borders at every seam (body, header, and footer).
Pull each subsequent card back by one border width with a negative inline
margin so its leading edges overlap the previous card's trailing edge,
collapsing every seam into a single line.
* Fix doubled border between card body and footer
A middle .card-body/.card-list draws a bottom border to divide itself from the
next segment, but .card-footer draws a full border including its top edge, so
the shared seam rendered as a doubled border whenever a footer followed a body
that wasn't the first child (e.g. image + body + footer, or header + body +
footer). Drop the body/list bottom border when a footer immediately follows so
the footer owns that divider.
Mark Otto [Thu, 18 Jun 2026 02:25:44 +0000 (19:25 -0700)]
Dispose existing instance when a component is re-instantiated on an element (#42509)
Re-creating a component on an element that already has one (e.g. `new
Toast(el)` twice) silently overwrote the instances registry, orphaning the
previous instance with its event listeners and timers still attached. Dispose
the existing instance before registering the new one so it is cleaned up
instead of leaking, while keeping `getInstance()` returning the latest instance.
Also guard `_queueCallback` so a transition completion callback is skipped once
the instance has been disposed, preventing the `this._element is null` error
when `dispose()` is called mid-transition.
Mark Otto [Thu, 18 Jun 2026 02:20:58 +0000 (19:20 -0700)]
Carousel: fix Safari zoom scroll overshoot with a JS-driven slide animation (#42506)
Under Safari page zoom, programmatic smooth scrolls (scrollBy/scrollTo with
behavior smooth) mis-scale and overshoot the target: a one-slide jump sails
well past it and the restored scroll-snap visibly yanks the slide back. This
happens whether or not snapping is suspended during the scroll, so no
snap-configuration tweak avoids it - native smooth scrolling driven by user
gestures is fine, but any programmatic smooth scroll is affected.
Replace the native smooth scroll + settle-watcher with a JS-driven rAF
animation (_animateScroll): step scrollLeft to the target over SCROLL_DURATION
(300ms) with an ease-in-out cubic, using instant scrolls per frame. This
sidesteps Safari's bug entirely and gives every programmatic jump (prev/next,
indicators, wrap, and the seamless loop) a consistent duration. Reduced motion
and the no-requestAnimationFrame path jump straight to target.
Removes the now-unneeded _restoreSnapWhenSettled/_afterScrollSettles
overshoot-detection machinery. Reworks the unit tests to the new seam and adds
coverage for the animator: eased stepping, frame cancellation, reduced motion,
and the no-rAF fallback.
dependabot[bot] [Tue, 16 Jun 2026 13:15:32 +0000 (15:15 +0200)]
Build(deps-dev): Bump dependencies with 3 updates (#42517)
Bumps the development-dependencies group with 3 updates in the / directory: [jasmine](https://github.com/jasmine/jasmine-npm), [prettier](https://github.com/prettier/prettier) and [rollup](https://github.com/rollup/rollup).
Updates `jasmine` from 6.2.0 to 6.3.0
- [Release notes](https://github.com/jasmine/jasmine-npm/releases)
- [Changelog](https://github.com/jasmine/jasmine-npm/blob/main/RELEASE.md)
- [Commits](https://github.com/jasmine/jasmine-npm/compare/v6.2.0...v6.3.0)
Updates `prettier` from 3.8.3 to 3.8.4
- [Release notes](https://github.com/prettier/prettier/releases)
- [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md)
- [Commits](https://github.com/prettier/prettier/compare/3.8.3...3.8.4)
Updates `rollup` from 4.61.0 to 4.61.1
- [Release notes](https://github.com/rollup/rollup/releases)
- [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md)
- [Commits](https://github.com/rollup/rollup/compare/v4.61.0...v4.61.1)
Mark Otto [Thu, 11 Jun 2026 16:56:38 +0000 (09:56 -0700)]
Rework OTP input as a single accessible input with rendered slots (#42500)
* Rework OTP input as a single accessible input with rendered slots
Rebuild the OTP component around one real <input> rendered as separate
digit slots (the input-otp/shadcn model) so assistive tech, password
managers, and SMS autofill treat it as a single field — addressing the
accessibility feedback in twbs/discussions#42486.
- Replace the six-input markup and per-digit aria-labels with one labelled input
- Add a type option (numeric/alphanumeric/alpha) and glyph-based masking
- Make length a real option (falls back to maxlength); add groups/separator
- Standardize naming on bs.otpInput; events complete.bs.otpInput /
input.bs.otpInput now expose event.value
- Move validation styling onto the rendered .otp-slot elements
- Rewrite docs and unit tests for the single-input model
* Fix bundlewatch sizes and cspell dictionary for OTP input
- Bump bundlewatch maxSize thresholds to account for the OTP component
- Add "autofilled" to the cspell dictionary used in the OTP docs
Mark Otto [Thu, 11 Jun 2026 16:48:28 +0000 (09:48 -0700)]
Fix dark mode on built site by bumping browserslist (#42471)
* Fix dark mode on built site by avoiding Lightning CSS light-dark() polyfill
Lightning CSS was lowering native light-dark() to a --lightningcss-light/dark
custom-property toggle because our browserslist floors predated native support.
That polyfill breaks data-bs-theme dark mode on the minified (production) CSS,
so dark examples rendered light on Netlify while working in dev.
- Bump browserslist floors to the first versions with native light-dark()
(Chrome/Edge 123, Safari/iOS 17.5; Firefox 121 already covered)
- Exclude Features.LightDark in css-minify as a guard against regressions
* Update .browserslistrc for browser support and comments
Removed comment about CSS light-dark polyfill and updated browser support.
Raises support floors as far as possible while keeping ~90.8% global
coverage, staying on versions with native light-dark() so Lightning CSS
does no polyfilling.
Mark Otto [Thu, 11 Jun 2026 16:46:59 +0000 (09:46 -0700)]
Carousel: scroll-snap rebuild, opt-in autoplay, play/pause, and UI redesign (#42484)
* Make carousel autoplay opt-in via boolean `autoplay` option
Replace the `ride` option with a boolean `autoplay` option (default
`false`), so carousels are static by default and only autoplay when
explicitly opted in with `data-bs-autoplay="true"`.
This removes the confusing `ride="true"` behavior that started
autoplaying only after the first user interaction, and the cryptic
`ride="carousel"` string value. Addresses the first two points of #32649.
* Stop carousel autoplay on interaction and add play/pause control
Address the WCAG 2.2.2 (Pause, Stop, Hide) concern in #32649.
Behavior: once a user takes control of an autoplaying carousel — clicking
a control or indicator, using the keyboard, or swiping — autoplay stops
for good instead of resuming, respecting their intent. A new runtime
`_playing` flag tracks autoplay intent and gates `_maybeEnableCycle()`.
Control: add a `.carousel-control-play-pause` button as the discoverable
pause/stop mechanism WCAG actually requires (a hover-only pause does not
qualify). It toggles autoplay, reflects state by swapping its icon (via
pause-fill/play-fill CSS mask icons) and `aria-label`, and can also start
autoplay on an otherwise static carousel.
Includes unit tests, SCSS tokens/styles with dark-mode support, docs, and
a migration note.
* Rebuild carousel on CSS scroll snap
Replace the float/translateX engine and custom swipe handler with a native
horizontal scroll-snap container. Sliding, touch dragging, momentum, and
keyboard scrolling now come from the browser; JavaScript only layers on
autoplay, the prev/next/indicator controls, and active-slide syncing via an
IntersectionObserver.
This unlocks features the old engine couldn't do, all via CSS custom
properties on `.carousel`:
- Multiple slides per view (`--carousel-items`) with responsive
`.carousel-items-*` utilities
- Peek of adjacent slides (`--carousel-peek`) and gaps (`--carousel-gap`)
- Variable-width slides (`.carousel-auto`) and center mode (`.carousel-center`)
`.carousel-fade` becomes a stacked-opacity mode that upgrades to a View
Transition where supported. `touch: false` now applies `touch-action: pan-y`.
The markup, public JS API, and slide/slid events are preserved; the
transitional `.carousel-item-{start,end,next,prev}` classes and the
`.carousel.pointer-event` helper are removed.
Includes a full unit-test rewrite, SCSS engine, docs with multi-item/peek/
variable-width examples, and a migration entry.
* Add carousel stacked layout and dot indicator variants
Rename the per-slide layout tokens for clarity and add new layout options:
- `--carousel-peek` -> `--carousel-items-peek`, `--carousel-gap` ->
`--carousel-items-gap` (both now carry a length unit so they're safe inside
the flex-basis `calc()`)
- New `--carousel-gap` for spacing the stacked layout's rows
- New `.carousel-stacked` layout (controls outside the inner viewport, above or
below) and `.carousel-indicators-dots` round indicator style
- Fix the `.carousel-item` flex-basis so the peek isn't subtracted twice (the
`padding-inline` already insets the content box)
* Add carousel `ends` option (stop/wrap/loop) and robust scroll navigation
Replace the `wrap` boolean with an `ends` option taking `stop`, `wrap`
(default), or `loop`:
- `stop` disables the prev/next controls at each end (moving focus to the
opposite control first, so focus is never lost)
- `wrap` jumps from the last slide back to the first (and vice versa)
- `loop` continues seamlessly into a transient clone of the destination slide,
then teleports to the real one with no visible backward jump (single-slide
scroll layouts only; otherwise falls back to `wrap`)
Rework programmatic navigation to scroll the viewport directly with `scrollBy`
instead of `scrollIntoView`, suspending scroll-snap for the duration and
restoring it once the scroll settles. This fixes multi-slide jumps (indicator
clicks, reaching the last slide) that `scroll-snap-stop: always` previously
clamped to one slide, avoids yanking the page to an off-screen carousel, and
works in RTL. Navigation steps are now measured from the live scroll position
so a stale active index can't make a control silently no-op.
Includes unit tests covering the ends modes, the loop transition, end-control
disabling, and the scroll-settle behavior.
* Document carousel end behavior, stacked layout, and indicator variants
Add docs and examples for the new stacked carousels (top, bottom, and with
dot indicators), the `ends` option (wrap/stop/loop) under a new "End behavior"
section, and refresh the options table and intro for the scroll-snap model.
* Redesign carousel controls, indicators, and layout
- `.carousel` is now a flex column by default (controls/indicators sit in the
flow above or below the slides); overlaying them on top of the slides moves
to a new `.carousel-overlay` modifier.
- Rename the control-icon classes to `.carousel-icon-{prev,next,pause,play}`,
painted with `currentcolor` so they inherit the surrounding text/button color
and work inside `.btn-*`. `.carousel-control-play-pause` is now just a
behavior hook that shows the matching glyph via `.paused`.
- Redesign indicators as pills: the active one widens, and while autoplaying it
fills like a progress bar over the slide's interval
(`carousel-indicator-progress` keyframes driven by `--carousel-interval`).
- Remove `.carousel-caption` and its `--carousel-caption-*` tokens.
* Add carousel autoplay progress, drop `touch` option and View Transitions
- While cycling, toggle a `.carousel-playing` class and expose the wait as
`--carousel-interval` so CSS can animate the active indicator's progress
fill. Schedule each tick from the slide being navigated *to*, so per-item
`data-bs-interval`s don't lag a slide behind.
- Remove the `touch` option: horizontal dragging is part of the native
scroll-snap container, so there's nothing left for JavaScript to toggle.
- Fade is now a plain CSS opacity crossfade; drop the View Transition path,
which double-animated against the CSS transition and visibly stuttered.
* Update carousel docs, examples, and fixtures for the redesign
Switch the docs examples, homepage/cheatsheet examples, and test fixtures to
`.carousel-overlay` + `.carousel-icon-*` and drop `.carousel-caption`. Document
the stacked-by-default layout, the `.carousel-overlay` modifier, the renamed
control-icon classes, the autoplay progress indicator, and the removed `touch`
option and captions in the migration guide.
* fix bundlewatch
* Fix MDX emphasis-style lint error in migration guide
* Default carousel `ends` to `loop`
Change the default end behavior from `wrap` to `loop`, so carousels scroll
seamlessly past the ends by default (falling back to `wrap` where seamless
looping doesn't apply). Tests that exercise the wrap jump now request it
explicitly.
* Clean up carousel styles and refresh docs
- Remove the legacy `--carousel-control-*` tokens and the entire
`carousel-dark-*` token map / `.carousel-dark` block and dark color-mode
rule; dark styling now rides on `light-dark()` in `.carousel-overlay`.
- Flip RTL prev/next icons with `transform: scaleX(-1)` instead of swapping
mask images, and drop the dead commented-out overlay rules.
- Drop the now-unused `colors` and `color-mode` Sass imports.
- Docs: lead the end-behavior section with `loop` (the new default), rework
the dark example onto `.carousel-overlay-controls` + `.btn-*` controls, and
round the slide corners.
* Remove unused `$enable-dark-mode` Sass flag
Its last consumer was the carousel's dark color-mode block, now removed in
favor of `light-dark()`, so the flag is no longer referenced anywhere.
* Clean up carousel autoplay timer and listeners on dispose
Clear the pending autoplay timer in `dispose()` so a queued tick can't fire
after teardown and throw on the now-null `_element`, and remove the
`pointerdown` listener bound to the viewport (`.carousel-inner`)—which
`super.dispose()` doesn't cover, since it only drops listeners on `_element`.
Adds tests for both.
* Simplify carousel active indicator tokens
Drop the `--carousel-indicator-active-width` and `--carousel-indicator-active-bg`
tokens, which only carried `null` fallbacks, and inline their values directly on
the active indicator.
* Use button controls in carousel examples, fixtures, and docs
Replace the removed `.carousel-control-prev`/`.carousel-control-next` classes
with `.btn-icon btn-sm` buttons across the docs examples, homepage and cheatsheet
examples, and JS test fixtures. Also drop the leftover `.carousel-indicators-dots`
class and the obsolete "Custom transition" docs section, and correct the
peek/gap token names (`--carousel-items-peek`/`-gap`) in the migration guide.
* Remove `$enable-dark-mode` from the customization docs
Follow-up to removing the now-unused flag: drop its row from the global options
table and the sentence about disabling dark mode via Sass.
* Bump JS bundlewatch size limits for the carousel rewrite
* Harden carousel navigation, looping, and autoplay edge cases
Audit fixes:
- Measure the "current" slide in `to()` from the live scroll position
(`_navIndex()`) rather than the async `_activeIndex`, so an indicator/control
used mid-scroll compares against where the viewport actually rests.
- Validate the `ends` option in `_configAfterMerge`, falling back to the
default (`loop`) for unknown values so navigation and end-control logic agree.
- Strip ids from the entire cloned subtree during a loop transition, not just
the clone root, to avoid duplicate ids while the clone is on screen.
- Sync the active slide and fire `slid` after a programmatic scroll settles
when no IntersectionObserver is available.
- Stop autoplay at the last slide under `ends: 'stop'` instead of re-arming a
timer that can never advance.
Adds tests for each, plus hover-pause and dispose-mid-loop coverage.
The redesigned pill indicators no longer fade via opacity, so the token has no
remaining consumers.
* Expand carousel docs, examples, and migration notes
- Document the `ends` option, the removed `.carousel-control-*` / `.carousel-dark`
classes and v5 tokens, and the removed `$enable-dark-mode` flag in the
migration guide.
- Clarify the `.active` starting-slide and indicator notes, theme the overlay
example controls (`.btn-subtle .theme-secondary`), rework the per-item
interval example with a play/pause control, and sharpen the `slid` event
description.
- Add a play/pause control to the integration fixture, and fix a corrupted
custom-property reference in the homepage carousel example CSS.
* Bump JS bundlewatch limits for carousel audit fixes
dependabot[bot] [Tue, 9 Jun 2026 20:11:51 +0000 (22:11 +0200)]
Build(deps-dev): Bump shell-quote from 1.8.3 to 1.8.4 (#42493)
Bumps [shell-quote](https://github.com/ljharb/shell-quote) from 1.8.3 to 1.8.4.
- [Changelog](https://github.com/ljharb/shell-quote/blob/main/CHANGELOG.md)
- [Commits](https://github.com/ljharb/shell-quote/compare/v1.8.3...v1.8.4)
dependabot[bot] [Tue, 9 Jun 2026 20:02:10 +0000 (22:02 +0200)]
Build(deps-dev): Bump dependencies with 2 updates (#42491)
Bumps the development-dependencies group with 2 updates in the / directory: [js-yaml](https://github.com/nodeca/js-yaml) and [rollup](https://github.com/rollup/rollup).
Updates `js-yaml` from 4.1.1 to 4.2.0
- [Changelog](https://github.com/nodeca/js-yaml/blob/master/CHANGELOG.md)
- [Commits](https://github.com/nodeca/js-yaml/commits)
Updates `rollup` from 4.60.4 to 4.61.0
- [Release notes](https://github.com/rollup/rollup/releases)
- [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md)
- [Commits](https://github.com/rollup/rollup/compare/v4.60.4...v4.61.0)
dependabot[bot] [Tue, 9 Jun 2026 19:44:32 +0000 (21:44 +0200)]
Build(deps): Bump the github-actions group with 2 updates (#42492)
Bumps the github-actions group with 2 updates: [actions/checkout](https://github.com/actions/checkout) and [github/codeql-action](https://github.com/github/codeql-action).
Updates `actions/checkout` from 6.0.2 to 6.0.3
- [Release notes](https://github.com/actions/checkout/releases)
- [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md)
- [Commits](https://github.com/actions/checkout/compare/de0fac2e4500dabe0009e67214ff5f5447ce83dd...df4cb1c069e1874edd31b4311f1884172cec0e10)
Updates `github/codeql-action` from 4.36.0 to 4.36.1
- [Release notes](https://github.com/github/codeql-action/releases)
- [Changelog](https://github.com/github/codeql-action/blob/main/CHANGELOG.md)
- [Commits](https://github.com/github/codeql-action/compare/7211b7c8077ea37d8641b6271f6a365a22a5fbfa...87557b9c84dde89fdd9b10e88954ac2f4248e463)
Updates `@astrojs/markdown-remark` from 7.1.2 to 7.2.0
- [Release notes](https://github.com/withastro/astro/releases)
- [Changelog](https://github.com/withastro/astro/blob/main/packages/markdown/remark/CHANGELOG.md)
- [Commits](https://github.com/withastro/astro/commits/@astrojs/markdown-remark@7.2.0/packages/markdown/remark)
Updates `@astrojs/sitemap` from 3.7.2 to 3.7.3
- [Release notes](https://github.com/withastro/astro/releases)
- [Changelog](https://github.com/withastro/astro/blob/main/packages/integrations/sitemap/CHANGELOG.md)
- [Commits](https://github.com/withastro/astro/commits/@astrojs/sitemap@3.7.3/packages/integrations/sitemap)
Updates `@babel/cli` from 7.28.6 to 7.29.7
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.29.7/packages/babel-cli)
Updates `@babel/core` from 7.29.0 to 7.29.7
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.29.7/packages/babel-core)
Updates `@babel/preset-env` from 7.29.5 to 7.29.7
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.29.7/packages/babel-preset-env)
Updates `@rollup/plugin-babel` from 7.0.0 to 7.1.0
- [Changelog](https://github.com/rollup/plugins/blob/master/packages/babel/CHANGELOG.md)
- [Commits](https://github.com/rollup/plugins/commits/babel-v7.1.0/packages/babel)
Updates `find-unused-sass-variables` from 6.2.0 to 6.2.1
- [Release notes](https://github.com/XhmikosR/find-unused-sass-variables/releases)
- [Commits](https://github.com/XhmikosR/find-unused-sass-variables/compare/v6.2.0...v6.2.1)
Updates `npm-run-all2` from 9.0.0 to 9.0.1
- [Release notes](https://github.com/bcomnes/npm-run-all2/releases)
- [Changelog](https://github.com/bcomnes/npm-run-all2/blob/master/CHANGELOG.md)
- [Commits](https://github.com/bcomnes/npm-run-all2/compare/v9.0.0...v9.0.1)
Updates `terser` from 5.47.1 to 5.48.0
- [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md)
- [Commits](https://github.com/terser/terser/compare/v5.47.1...v5.48.0)
dependabot[bot] [Sat, 6 Jun 2026 14:33:29 +0000 (16:33 +0200)]
Build(deps): Bump the github-actions group with 2 updates (#42464)
Bumps the github-actions group with 2 updates: [github/codeql-action](https://github.com/github/codeql-action) and [release-drafter/release-drafter](https://github.com/release-drafter/release-drafter).
Updates `github/codeql-action` from 4.35.5 to 4.36.0
- [Release notes](https://github.com/github/codeql-action/releases)
- [Changelog](https://github.com/github/codeql-action/blob/main/CHANGELOG.md)
- [Commits](https://github.com/github/codeql-action/compare/9e0d7b8d25671d64c341c19c0152d693099fb5ba...7211b7c8077ea37d8641b6271f6a365a22a5fbfa)
Mark Otto [Fri, 5 Jun 2026 03:09:03 +0000 (20:09 -0700)]
Move SVGs to CSS masks (#42465)
* Move SVGs to CSS masks
* update migration, remove unused, fix a couple things
* Format
* Bump bundlewatch
* Properly size btn-close with mask
* Apply .check class directly to checkbox input, drop wrapper
The .check wrapper existed only to host the checkmark pseudo-element.
Since appearance: none controls render pseudo-elements (as .radio already
relies on), move .check onto the <input> itself and draw the checked/
indeterminate mark via a masked ::before. Removes the grid/:has machinery
and makes checkbox and radio markup symmetric.
* Use .form-field for list group radio example, matching checkboxes
Mark Otto [Thu, 4 Jun 2026 23:19:56 +0000 (16:19 -0700)]
docs: fix menu clipping in resizable examples + configurable dev port (#42470)
* docs: prevent menus from being clipped in resizable examples
The resizable container needs overflow: hidden for the CSS resize handle to
work, which clips menus/dropdowns when they open. Render them with a fixed
positioning strategy in the live preview only so they can spill outside the
container, leaving the displayed markup untouched.
* docs: make the Astro dev server port configurable via PORT
Default to 9001 but allow PORT to override the dev/preview server port so
multiple worktrees can run side by side without colliding.
Christian Oliff [Wed, 3 Jun 2026 21:14:37 +0000 (06:14 +0900)]
docs: fix wording and responsive utility examples (#42458)
Copy edits across several docs pages: clarify .btn usage and theme classes (button.mdx); correct repeated/awkward 'drawer' phrasing and update responsive breakpoint syntax to the colon form (drawer.mdx); remove duplicated 'drawer' wording and clean navbar responsive copy (navbar.mdx); update Sass guidance from @import to @use/@forward terminology (customize/optimize.mdx); clarify 'modal' → 'modal dialog' and update form validation guidance to use data-bs-validate and :user-invalid (getting-started/approach.mdx); and revise display utility docs to show the new .{breakpoint}:d-{value} syntax with example adjustments (utilities/display.mdx).
Christian Oliff [Mon, 1 Jun 2026 17:51:58 +0000 (02:51 +0900)]
v6: docs: fix typos, examples, and utility class docs (#42430)
Minor documentation fixes across multiple site files:
- examples/sign-in: add meaningful alt text for the logo image for accessibility.
- components/dialog: add missing space in example button markup.
- components/navbar: update navbar example to use new prefix-style responsive class (`.{breakpoint}:navbar-expand`).
- forms/layout: update horizontal form docs to recommend `.{breakpoint}:col-*` usage.
- getting-started/approach: fix grammar/typos, correct docsref path, and clarify component modifier/variant naming (mention `.btn-solid` and `.theme-primary`).
- getting-started/javascript: adjust JS-required components list (add Dialog, remove Accordions/Modals lines).
- guides/migration: fix possessive "its" typos in breakpoint/container notes.
- helpers/stretched-link: correct placeholder title text.
- utilities/background: update example to use `fg-contrast-{name}` / `fg-{name}` classes instead of previous `color-*` naming.
These changes improve clarity, accessibility, and align docs with updated class naming conventions.
v6: docs: fix typos, examples, and utility class docs
text would always be white on black background
Update example code for background gradient usage
Update margin utilities docs for v6 spacers
Docs updated to reflect the v6 spacing scale: sizes now range from 0 through 9 (`.m-0`–`.m-9`) and the multiplier values for sizes 3–9 were adjusted.
Negative margin docs were changed to note that v6 only supports negative inline margins (`.ms--1`, `.me--2`) using `-1` and `-2` spacers and that the v5-style full negative utilities (e.g. `.mt-n1`) were removed.
The responsive examples were updated to list `.{breakpoint}m-0` through `.{breakpoint}m-9` and `.{breakpoint}m-auto`.
Christian Oliff [Mon, 1 Jun 2026 17:50:29 +0000 (02:50 +0900)]
Use new bg/fg utilities and data-bs-theme (#42451)
Replace legacy theme classes across examples with new utility classes and theme attributes. Changes include swapping .bg-dark/.navbar-dark/.text-bg-dark/.link-body-emphasis for bg-black, bg-90, fg-white, fg-body, adding data-bs-theme="dark" where appropriate, removing nav-pills, adjusting icon nav links to use flex-column and removing svg mb-1 spacing, and simplifying sidebar nav classes. Updated example files: album, cheatsheet, headers, navbar-static, navbars, and sidebars.
Christian Oliff [Fri, 29 May 2026 22:51:35 +0000 (07:51 +0900)]
v6: Refine examples - headings, themes, and layout (#42432)
Reduce heading sizes and remove emphasis in feature examples. Unify
dark-theme styling, improve accessibility and layout, update Chart.js,
and replace text-white/text-secondary with fg-* utilities across
example pages.
dependabot[bot] [Wed, 27 May 2026 19:21:56 +0000 (21:21 +0200)]
Build(deps): Bump tmp from 0.2.5 to 0.2.7 (#42446)
Bumps [tmp](https://github.com/raszi/node-tmp) from 0.2.5 to 0.2.7.
- [Changelog](https://github.com/raszi/node-tmp/blob/master/CHANGELOG.md)
- [Commits](https://github.com/raszi/node-tmp/compare/v0.2.5...v0.2.7)
dependabot[bot] [Sun, 24 May 2026 19:42:41 +0000 (21:42 +0200)]
Build(deps): Bump the GitHub Actions dependencies with 2 updates (#42409)
Bumps the github-actions group with 2 updates in the / directory: [github/codeql-action](https://github.com/github/codeql-action) and [release-drafter/release-drafter](https://github.com/release-drafter/release-drafter).
Updates `github/codeql-action` from 4.35.2 to 4.35.5
- [Release notes](https://github.com/github/codeql-action/releases)
- [Changelog](https://github.com/github/codeql-action/blob/main/CHANGELOG.md)
- [Commits](https://github.com/github/codeql-action/compare/95e58e9a2cdfd71adc6e0353d5c52f41a045d225...9e0d7b8d25671d64c341c19c0152d693099fb5ba)
Christian Oliff [Fri, 22 May 2026 19:28:09 +0000 (04:28 +0900)]
v6: docs - Update utility class names in docs and examples (#42418)
Replace deprecated utility classes with the updated names across site docs and examples. Changes include switching text-* classes to fg-*, text-bg-* badge classes to theme-*, and replacing clearfix with d-flow-root. Affected files: cover and drawer-navbar examples, spinner example, reboot, accessibility, columns docs, and versions page to keep examples consistent with the new utility naming.
Add btn-icon class to navbar toggler
Add the btn-icon utility class to the navbar toggler button in the navbar-fixed example to apply icon button styling. This change updates site/src/assets/examples/navbar-fixed/index.astro and keeps the existing SVG toggler markup and collapse behavior unchanged.
Suppress the native disclosure marker in WebKit by adding &::-webkit-details-marker { display: none; } to the accordion button styles. This prevents the browser's default triangle from overlapping the custom .accordion-icon and ensures consistent appearance across browsers
Issue discovered using Browserstack.
See comment: https://github.com/orgs/twbs/discussions/42398#discussion-10018925
dependabot[bot] [Tue, 5 May 2026 16:14:57 +0000 (18:14 +0200)]
Build(deps-dev): Bump the dev dependencies with 2 updates (#42395)
Bumps the development-dependencies group with 2 updates: [postcss](https://github.com/postcss/postcss) and [terser](https://github.com/terser/terser).
Updates `postcss` from 8.5.10 to 8.5.12
- [Release notes](https://github.com/postcss/postcss/releases)
- [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md)
- [Commits](https://github.com/postcss/postcss/compare/8.5.10...8.5.12)
Updates `terser` from 5.46.1 to 5.46.2
- [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md)
- [Commits](https://github.com/terser/terser/compare/v5.46.1...v5.46.2)
Christian Oliff [Mon, 4 May 2026 18:39:49 +0000 (03:39 +0900)]
v6: Update alignment examples text and widths (#42392)
Replace generic "Flex item"/"Grid item" placeholders with descriptive words (e.g. "Align", "Items", "Start/End/Center/Stretch") across align-items, justify-items, and place-items docs. Add w-5 utility to flex examples to give consistent item widths so alignment demos render more clearly. Files updated: site/src/content/docs/utilities/align-items.mdx, justify-items.mdx, place-items.mdx.
Christian Oliff [Sun, 3 May 2026 04:06:45 +0000 (13:06 +0900)]
v6: minor docs fixes (#42385)
* Adjust toast copy, placeholder, and font var
Update docs and styles: change toast example text to use "accent" wording, mark the default toast placement option as disabled to prevent it being selected as a valid value, and switch the table font variable from --bs-font-monospace to the standardized --bs-font-mono in _content.scss.
* fix typo
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---------
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>