What actually changed in Stratos UI

Why a major version

older UI frameworks shipped in 2021, and the platform moved a long way underneath it. Cascade layers landed. color-mix() and oklch() became broadly usable. <dialog> grew a real top layer, a focus trap and a backdrop. Stratos UI is largely the framework catching up to all of it — and deleting the JavaScript it no longer needs.

The upgrade is not a rename pass. Grid classes, colour utilities, three component names and the entire JavaScript entry point all change. Budget for a rewrite of your markup, not a find-and-replace.

Responsive prefixes move to the front

The infix is gone. Breakpoints and pseudo-states are now prefixes with a colon, which reads much closer to Tailwind:

• .d-md-none becomes .md:d-none
• .col-md-6 becomes .md:col-6
• .opacity-50-hover becomes .hover:opacity-50
• xxl is renamed 2xl

Breakpoint values moved too — lg from 992px to 1024px, xl from 1200px to 1280px, and 2xl to 1536px. If your layout was tuned to the old numbers, it will shift.

Per-colour classes become theme tokens

This is the change with the widest blast radius. Every .btn-primary, .alert-success and .bg-danger variant collapses into a composition:

A component picks its shape, and a .theme-* class supplies the colour. .btn-primary is now .btn-solid .theme-primary.

Adding .theme-primary sets --theme-bg, --theme-fg, --theme-border and friends, which the component reads. The upside is that one token works across buttons, badges, alerts, tables, cards and accordions — and your own components can read the same variables.

Three components became native elements

Modal is now Dialog, built on <dialog>. Offcanvas is now Drawer, also a <dialog>. Accordion is now <details>/<summary>, with the name attribute replacing data-bs-parent.

The practical effect is that Stratos UI deleted util/backdrop, util/focustrap and util/scrollbar outright. The browser does that work now, and it does it better — find-in-page can open a closed <details>, which no div-based accordion ever managed.

The JavaScript is ESM-only

No more UMD bundle, and therefore no more window.bootstrap. Script tags need type="module", and global calls become imports:

import { Tooltip } from 'bootstrap'

const tip = Tooltip.getOrCreateInstance(el)

Data attributes are untouched. If you only ever wrote data-bs-toggle="modal", the migration is renaming that to dialog and adding type="module".

Should you upgrade yet

Not for production. There is no npm release, the branch is taking several commits a day, and the alpha still has rough edges — a closed .dialog currently keeps its layout space, and Combobox logs a console error on every instance.

It is worth building something now, though. The component set is genuinely ahead of v5 — Combobox, Datepicker, OTP, password strength and nav overflow have no v5 equivalent — and the markup changes are large enough that you want the learning done before the real alpha lands.