Skip to content
Tools

What's new

Release history for BlastCSS — every feature, fix, and breaking change.

1.1.0

Latest

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/utilities before blastcss/components made components beat utilities. A bare @layer statement now ships at the top of every bundle from the new src/layers.css.
  • blast.a11y and blast.motion were ordered before blast.components, which meant .b-sr-only, .b-focus-ring, and the .b-anim-* utilities all lost to component rules. Both layers now come after blast.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 via html:has(.b-modal[open], .b-drawer[open], .b-command[open]), so it covers dialogs opened by application code too, with scrollbar-gutter: stable on html to 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-area with position-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 as data-b-placement.
  • inset-area no longer parses in current Chrome — it was the working-draft name for position-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 on position-area.
  • Combobox and command palette were silent to screen readers. Neither set aria-activedescendant, and options had no id, so arrowing through a list announced nothing while DOM focus stayed in the input. Both now generate option ids, expose role="combobox" / listbox / option, and track the active option. Home/End were added to both.
  • Dropdown had no keyboard model. aria-expanded was 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, and aria-expanded is 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 on DOMContentLoaded — so each click was handled twice and toggles cancelled themselves out. Listener registration is now idempotent per root; per-element setup still re-runs so autoInit() after injecting markup keeps working.
  • A dangling selector in the docs stylesheet ([data-theme="dark"] .t-comment, immediately before an @media block) made the CSS parser discard the entire prefers-color-scheme: dark syntax-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-subtle failed 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 id were assigned a fresh random anchor-name on every open, leaking a new one each time. Names are now assigned once and reused, and popoverTrigger() escapes the id via CSS.escape.

Changed

  • The axe sweep now runs both colour schemes with the color-contrast rule 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.js grew 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 (git core.autocrlf=true) a // comment survived and collapsed the rest of dist/blast.min.js into 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 # Heading text. The parser now normalizes line endings before parsing.
  • Dev server 404s on Windows. scripts/serve.mjs used path.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 its tabpanels so aria-controls references 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-navbar use container-type: inline-size, which made them (and the .b-stack/.b-grid/.b-split wrappers around them, and the indeterminate .b-progress track) 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

  • .gitattributes enforcing LF for text sources so builds are deterministic across platforms.
  • Comprehensive tests/browser/a11y-all.spec.js axe sweep covering every generated docs page (wired into test: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 dark by 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-keywords for animating to/from auto.
  • Added text-wrap: balance on headings and text-wrap: pretty on paragraphs.
  • Added blockquote, mark, kbd, abbr, figure styling.
  • Added :where()-scoped resets to lower specificity.
  • Modernized scrollbar styling.

Layout

  • All .b-container* now have container-type: inline-size enabling 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: content to 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-discrete for native open/close animations.
  • Popovers support the native popover attribute and CSS anchor-name / position-anchor where supported, with JS fallback.
  • Buttons gained .b-btn-soft, .b-btn-outline, .b-btn-success, .b-btn-warning, plus loading state via aria-busy="true".
  • Cards now have .b-card-interactive and use container queries.
  • Tabs gained .b-tabs-pill variant.
  • Tables gained .b-table-striped and .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-status indicator.
  • Stat gained .b-stat-trend (and -down variant).
  • Progress gained .b-progress-indeterminate.
  • Added .b-kbd and .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-transition enabled by default for cross-document SPA-style navigation.
  • Reusable named transitions: .b-vt-name with --b-vt.
  • Scroll-driven b-reveal animation where animation-timeline is 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:, expanded gap-, 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 in autoInit().
  • Theme toggle (data-b-toggle="theme") with localStorage persistence and b:theme:change event.
  • Popover anchor wiring via anchor-name where 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.css and blast.motion.min.css bundles.
  • Token export rewritten to parse light-dark() calls and emit accurate light/dark JSON, CSS, and TypeScript.
  • Updated npm run test:static to also build docs.
  • Added npm run build:docs and npm run build:all.
  • Updated serve.mjs with smart fallback to docs/ 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.
Edit this page