Tools
What's new
Release history for BlastCSS — every feature, fix, and breaking change.
Interaction and cascade correctness. No class names or token names were removed or renamed.
Fixed
- The cascade layer order was never actually declared. Layer order fell out of first-appearance, so importing the subset bundles in a different order silently changed which one won — loading
blastcss/utilitiesbeforeblastcss/componentsmade components beat utilities. A bare@layerstatement now ships at the top of every bundle from the newsrc/layers.css. blast.a11yandblast.motionwere ordered beforeblast.components, which meant.b-sr-only,.b-focus-ring, and the.b-anim-*utilities all lost to component rules. Both layers now come afterblast.components. The documented order in the cascade-layers guide described neither the old nor the intended arrangement and has been corrected.- Open modals and drawers no longer scroll the page behind them.
showModal()traps focus but leaves the document scrollable; wheel and touch still moved the content behind the backdrop. Locked viahtml:has(.b-modal[open], .b-drawer[open], .b-command[open]), so it covers dialogs opened by application code too, withscrollbar-gutter: stableonhtmlto keep the lock from shifting layout. - Popovers could render off-screen. There was no collision handling: a trigger near the bottom of the viewport put the panel below the fold. The CSS path now uses
position-areawithposition-try-fallbacks, and the JS path flips above the trigger, clamps on the inline axis, and recomputes on scroll and resize. The resolved side is exposed asdata-b-placement. inset-areano longer parses in current Chrome — it was the working-draft name forposition-area— so the anchor-positioning block had been silently dead, and the JS fallback's offset stacked with the CSS margin for a doubled gap. Now gated onposition-area.- Combobox and command palette were silent to screen readers. Neither set
aria-activedescendant, and options had noid, so arrowing through a list announced nothing while DOM focus stayed in the input. Both now generate optionids, exposerole="combobox"/listbox/option, and track the active option. Home/End were added to both. - Dropdown had no keyboard model.
aria-expandedwas never set and arrow keys did nothing. Arrow Down on a closed trigger now opens and enters the menu, Arrow Down/Up cycle items, Home/End jump to the ends, andaria-expandedis mirrored onto the<summary>. Menu items keep their native link/button roles. - Calling
autoInit()as the README documents bound every delegated listener twice — the module also self-initialises onDOMContentLoaded— so each click was handled twice and toggles cancelled themselves out. Listener registration is now idempotent per root; per-element setup still re-runs soautoInit()after injecting markup keeps working. - A dangling selector in the docs stylesheet (
[data-theme="dark"] .t-comment,immediately before an@mediablock) made the CSS parser discard the entireprefers-color-scheme: darksyntax-highlighting block. Under system dark mode every code sample kept its light-mode token colours, down to 2.4:1 contrast on the landing page. --b-subtlefailed WCAG AA in dark mode. It carries placeholder and hint text and measured 4.36:1 on the dark surfaces; the dark leg moved from 60% to 66% lightness. The docs' comment token and swatch label scrim were corrected the same way.- Popover triggers without an
idwere assigned a fresh randomanchor-nameon every open, leaking a new one each time. Names are now assigned once and reused, andpopoverTrigger()escapes the id viaCSS.escape.
Changed
- The axe sweep now runs both colour schemes with the
color-contrastrule enabled; it previously ran light-only with contrast disabled, which is why the dark-mode regression above went unnoticed. All 46 docs pages pass in both. dist/blast.min.jsgrew from ~3.3 KB to ~4.7 KB gzip for the placement and ARIA work; the size budget moved from 4000 to 5000 bytes. CSS budgets are unchanged and all bundles remain within them.
Added
- Regression tests for the scroll lock, dropdown keyboard model, combobox and command-palette
aria-activedescendant, and popover collision handling.
Patch release: cross-platform build robustness and accessibility fixes. No public API or token changes.
Fixed
- Minified JS corruption on Windows builds. The JS minifier's line-comment stripper was anchored on
\n; with CRLF-checked-out sources (gitcore.autocrlf=true) a//comment survived and collapsed the rest ofdist/blast.min.jsinto a single comment, producing an invalid bundle (SyntaxError: Unexpected end of input). The minifier now normalizes line endings first. - Docs content unrendered on Windows builds. The Markdown parser's heading/list/blockquote regexes failed on CRLF lines (JS
$and.do not match before\r), so headings rendered as literal# Headingtext. The parser now normalizes line endings before parsing. - Dev server 404s on Windows.
scripts/serve.mjsusedpath.normalize, converting URL forward-slashes to backslashes and breaking the root/path resolution. It now uses POSIX normalization for URL paths. - Accessibility: added accessible names to the progress-bar demos (
aria-label) and completed the pill-tabs demo with itstabpanels soaria-controlsreferences resolve. All 46 docs pages now pass axe with zero violations.
Docs
- API tables rendered. The docs Markdown parser had no GFM table support, so the
| Class | … |API reference tables on 32 component/guide/utility pages rendered as raw pipe text. Added table parsing (with column alignment), reusing the responsive API-table styling. - Card & layout demos no longer collapse.
.b-card/.b-navbarusecontainer-type: inline-size, which made them (and the.b-stack/.b-grid/.b-splitwrappers around them, and the indeterminate.b-progresstrack) shrink to a sliver as centered flex items — those demos rendered empty. The preview now gives such elements an intrinsic width so children lay out normally. - Overlay demos no longer clipped. Opened dropdown and combobox menus (which open downward) and tooltips (which open upward) were cut off by the demo frame's
overflow. The build now tags overlay demos so the preview reserves head-room in the correct direction; command palette and popover use the top layer and are unaffected. - Modernized component preview blocks. Refreshed the demo preview with a soft dotted backdrop and primary glow. The canvas uses the plain page background (not a surface tint) so surface-coloured components — skeleton shimmer, progress tracks, dividers — keep contrast in both light and dark themes; elevated surfaces (cards, inputs) instead stand out via border + boosted shadow.
Added
.gitattributesenforcing LF for text sources so builds are deterministic across platforms.- Comprehensive
tests/browser/a11y-all.spec.jsaxe sweep covering every generated docs page (wired intotest:browser/ CI).
The first stable release. The public API surface is now committed:
- Class names with the
b-prefix (components) and unprefixed utilities are stable. - All
--b-*design tokens are stable. - Module exports (
.,./core,./components,./components-extra,./utilities,./motion,./reset,./js,./tokens.json,./tokens.css,./tokens.ts) are stable. - The optional JS helper API —
autoInit,initDialogs,initCollapse,initTabs,initDropdowns,initToasts,initPopovers,initSegmented,initCombobox,initTagInput,initCommand,initTheme,showToast,viewTransition,trapDialogFocus— is stable.
Breaking changes will go through major version bumps from here.
Foundations modernized
- Migrated the entire color system to OKLCH with
light-dark()so dark mode works without redefining variables. - Added
color-scheme: light darkby default, with[data-theme="dark"]/[data-theme="light"]overriding. - Added
@supports not (color: light-dark(...))fallback for older browsers. - Added fluid type scale (
--b-fluid-h1,--b-fluid-h2,--b-fluid-h3,--b-fluid-lead). - Added fluid spacing (
--b-fluid-1…--b-fluid-5) and expanded spacing scale (--b-7,--b-14,--b-20,--b-24,--b-px). - Added motion tokens (
--b-duration-instant/fast/slow/slower,--b-ease-in/out/spring). - Added z-index scale (
--b-z-dropdown/sticky/popover/toast/modal/max). - Added shadow tokens (
--b-shadow-xs/xl/ring/glow).
Reset & base
- Added
interpolate-size: allow-keywordsfor animating to/fromauto. - Added
text-wrap: balanceon headings andtext-wrap: prettyon paragraphs. - Added blockquote, mark, kbd, abbr, figure styling.
- Added
:where()-scoped resets to lower specificity. - Modernized scrollbar styling.
Layout
- All
.b-container*now havecontainer-type: inline-sizeenabling container queries. - Added
.b-center,.b-cover,.b-switcher,.b-prose,.b-spacer,.b-subgrid,.b-sidebar-end. - Added container-aware breakpoint variants via
@sm:,@md:,@lg:.
Forms
- Textareas now use
field-sizing: contentto grow with input. - Added
.b-input-sm/.b-input-lg,.b-search(with icon),.b-error,.b-fieldset,[data-required]label. - Improved validation focus rings.
Components — modernized
- Modals and drawers now use
@starting-style+transition-behavior: allow-discretefor native open/close animations. - Popovers support the native
popoverattribute and CSSanchor-name/position-anchorwhere supported, with JS fallback. - Buttons gained
.b-btn-soft,.b-btn-outline,.b-btn-success,.b-btn-warning, plus loading state viaaria-busy="true". - Cards now have
.b-card-interactiveand use container queries. - Tabs gained
.b-tabs-pillvariant. - Tables gained
.b-table-stripedand.b-table-hover. - Toasts entry-animate via
@starting-style. - Navbar gained backdrop blur and
.b-navbar-sticky. - Avatars gained sizes (
-sm/-lg/-xl) and.b-avatar-statusindicator. - Stat gained
.b-stat-trend(and-downvariant). - Progress gained
.b-progress-indeterminate. - Added
.b-kbdand.b-divider. - Added
.b-badge-info,.b-badge-neutral,.b-badge-dot.
New components
- Segmented control (
.b-segmented) — radio-based, accessible. - Combobox (
.b-combobox) — searchable input with arrow-key navigation. - Command palette (
.b-command) — Spotlight-style with global ⌘K shortcut. - Tag input (
.b-tag-input) — multi-value entry with chips. - Stepper (
.b-stepper,.b-stepper-horizontal) — auto-numbered via CSS counters. - Code block (
.b-code) with header, language label, and copy button. - Hero (
.b-hero,.b-hero-grid) for landing pages.
Motion layer (new)
@view-transitionenabled by default for cross-document SPA-style navigation.- Reusable named transitions:
.b-vt-namewith--b-vt. - Scroll-driven
b-revealanimation whereanimation-timelineis supported. - Animation utilities:
.b-anim-fade-in,-slide-up,-scale-in,-pulse. - Reduced-motion guard at the layer level.
Utilities
- Container-query variants:
@sm:,@md:,@lg:(e.g.,@md:grid-2). - New utilities:
truncate,text-pretty,aspect-portrait,font-display,font-semi,tracking-,bg-soft-,bg-gradient-primary,border-strong,border-primary,border-t/-b,rounded-2xl,rounded-md,rounded-full,shadow-xs/-xl/-glow,scroll-snap-x/-y,snap-,content-auto,isolate,scheme-,motion-safe:,motion-reduce:, expandedgap-,col-span-,row-span-*,h-screen,min-h-screen,max-w-prose,w-fit.
JavaScript (new helpers)
showToast({ title, body, variant, duration })— programmatic toast API.viewTransition(callback)— wrap DOM mutations in a View Transition.initSegmented,initCombobox,initTagInput,initCommand,initTheme— auto-included inautoInit().- Theme toggle (
data-b-toggle="theme") withlocalStoragepersistence andb:theme:changeevent. - Popover anchor wiring via
anchor-namewhere supported.
Documentation site (rewritten)
- Brand-new generated docs site at
docs/with sidebar nav, sticky header, command-palette search (⌘K), copy-to-clipboard on code blocks, scrollspy on each page, and live theme toggle. - New theme playground at
docs/playground.html— interactive sliders for hue, chroma, radius, density, and weight; live CSS export. - New showcase at
docs/showcase.html— three realistic interfaces (dashboard, marketing, settings form). - 33 markdown content files in
docs-src/(guides + components + utilities) authored from scratch. - Zero-dependency static generator at
scripts/build-docs.mjs.
Build & tooling
- Build script now emits
blast.components-extra.min.cssandblast.motion.min.cssbundles. - Token export rewritten to parse
light-dark()calls and emit accurate light/dark JSON, CSS, and TypeScript. - Updated
npm run test:staticto also build docs. - Added
npm run build:docsandnpm run build:all. - Updated
serve.mjswith smart fallback todocs/for arbitrary paths.
Browser support
- Floor raised to evergreen (Chrome/Edge 125+, Safari 17.4+, Firefox 128+) for
light-dark(),@starting-style, container queries, popover API. - Older browsers fall back to a static hex palette via
@supports.
- Added optional JavaScript helpers for dialogs, collapse, tabs, dropdown close behavior, toasts, and popovers.
- Added spinner, drawer, collapse, popover, close button, input group, switch, range, and file input styling.
- Added static docs site, theme playground, kitchen-sink example, benchmark fixtures, and starter templates.
- Added generated token exports for CSS, JSON, and TypeScript.
- Added package export checks, HTML fixture checks, visual manifest checks, and benchmark generation.
- Added Playwright browser tests, axe scans, visual screenshot tests, and browser matrix CI.
- Added Bootstrap migration guide, 1.0 readiness checklist, and release process docs.
- Added release workflow with npm provenance publishing and package dry-run validation.
- Expanded component coverage with dropdown, accordion, toast, tooltip, pagination, breadcrumb, avatars, chips, lists, stats, empty states, icon buttons, and button groups.
- Expanded utility coverage for layout, sizing, aspect ratio, object fit, opacity, pointer events, positioning, and responsive grids.
- Added quality checks for bundled exports and required selectors.
- Tightened gzip size budgets.
- Added architecture, components, frameworks, and quality docs.
- Added the first CSS-only framework foundation.
- Added tokens, reset, base styles, layout primitives, forms, accessibility helpers, components, and utilities.
- Added dependency-free build script and gzip size checks.
- Added static demo and README.