Skip to content

v0.16.0

Choose a tag to compare

@github-actions github-actions released this 25 Sep 14:45
· 226 commits to master since this release
4ba060f

Cirth v0.16.0

Cirth 0.16.0 makes the framework easier to compose with an existing design
system and with third-party content. It adds an explicit cascade boundary, a
subtree opt-out, portable design-token exports and two native-first UI
patterns, and fixes three visible regressions: shadows, overflow
containment, and presets inside a scoped build.

Breaking changes

Every stylesheet now emits its rules inside the single cascade layer cirth.
Unlayered application CSS therefore wins over Cirth regardless of specificity
or load order. This makes overrides simpler, but it also means CSS that used to
load before Cirth and lose may now win; in scoped builds, unlayered host-page
rules also win inside .cirth. Importing a Cirth file with
@import … layer(cirth) nests its own layer as cirth.cirth, and this release
does not define sublayers. Review the Upgrading guide before adopting this
version.

New APIs

  • Add .no-cirth to an element to suppress Cirth's component declarations on
    that element and its descendants. This is a cascade opt-out, not full CSS
    isolation: the global reset, theme, inherited values, layout, accessibility,
    reduced-motion and print rules still apply. Selectors outside the subtree can
    also continue to react to it through relationships such as :has() or
    sibling selectors.
  • Class-based builds gain fieldset.segmented, a joined radio-group treatment
    that preserves native selection, keyboard behaviour, submission, focus and
    forced-colors support.
  • Class-based builds gain table.controls, which lets form controls sit
    directly in table cells without the usual doubled padding and stacking
    margin.
  • Source builds accept npm run build -- --prefix "--acme-" to replace the
    --cirth- custom-property namespace. The prefix must start with -- and end
    with -; the published package, its default prefix and the .cirth scoping
    class are unchanged.
  • The package exports W3C Design Tokens JSON for both colour schemes through
    @cirthcss/cirth/tokens/light and @cirthcss/cirth/tokens/dark. Direct
    relationships are preserved as aliases, derived colours include their
    resolved value and unsupported CSS values are listed rather than discarded.

Fixes

  • Dropdown and popover shadows render again: each shadow layer now resolves its
    own scheme-aware colour instead of placing complete shadow lists in
    light-dark().
  • .overflow-auto now contains absolutely positioned helpers such as
    .sr-only, preventing hidden table headers from widening narrow pages.
  • Preset tokens now apply inside the .cirth wrapper of scoped builds.

What's Changed

Full Changelog: v0.15.0...v0.16.0