Skip to content

0.12.0

Choose a tag to compare

View all tags
@github-actions github-actions released this 02 Oct 13:11
· 160 commits to master since this release
0.12.0
d62b14c

Breaking changes

  • .actions is removed; compose a <menu> (or <ul>) with cluster for a row, or stack list-reset for a vertical list.
  • .navbar-nav is removed; the horizontal link list is a .cluster with the framework --gap.
  • .dialog-confirmation is removed; compose .media with .dialog-icon, then <footer class="bleed background-subtle cluster justify-content-space-between"> (recipe in docs/pages/components/dialog.md).
  • The dialog.modal body <footer> has no layout of its own; compose its row as <footer class="cluster justify-content-end">, as in the drawer.
  • --modal-header-bg is removed; put a .background-* utility on the dialog.modal > header band.
  • .form-actions no longer lays out its row; write class="cluster form-actions" (--form-actions-justify and --form-actions-align still apply).
  • .form-actions drops its top margin and --form-actions-margin-block-start; space it from the fields with .stack on the form.
  • .justify-content-* no longer sets --cluster-justify, so it aligns only its own element, never a nested .cluster.
  • .card header and footer rows drop to zero specificity: .media, .cluster, .form-actions and .justify-content-* on a slot now take over its layout.
  • --font-width-dense is removed; set font-stretch on an element that should render condensed.
  • A theme sets --control-pad-x-sm / -md / -lg instead of --control-pad-x, which .sm/.lg and .compact/.spacious now select from.
  • A theme that sets its own control steps re-selects them in its block to work as a nested island (recipe in docs/pages/foundations/tokens.md).

Added

  • actual-css contrast [--theme FILE] (Bun) measures a theme's soft, focus, invalid-focus and inverse pairs in each declared scheme, and exits 1 on a miss.
  • .tight and .loose set the inherited --gap to --space-20 / --space-50 alone, without the padding or control size of .compact / .spacious.
  • docs/pages/guides/upgrading.md lists the edits a 0.11 project needs for 0.12.
  • .items-baseline aligns children on their first text baseline and sets --items-align, completing the .items-* series.

Changed

  • An action row composed from .cluster inherits the framework --gap (0.75rem); the removed .actions set 0.5rem. Use .tight for the tighter rhythm.
  • .cluster removes the native list chrome (margin, padding, list-style) from a ul, ol or menu it is applied to; the element stays a list in the DOM.
  • A heading that is the first child beside a leading .dialog-icon in a .media row centers on the icon anywhere, not only in a dialog.
  • A dialog.modal or .drawer header gives back its corner-close room when the dialog contains no .close; without :has() the room stays.
  • .compact and .spacious no longer set font-stretch: density changes rhythm and geometry, never typography.
  • .compact and .spacious select --control-pad-x-sm / -lg, so density controls get narrower or wider, not only shorter or taller.
  • .sm controls use the shared --control-pad-x-sm step: 13px of inline padding instead of 14px.
  • .card.compact lowers --card-gap to --space-20 along with --card-pad.
  • .nav-list rows sit --space-10 apart instead of --space-20, so a vertical nav reads as one list.
  • .topbar lays out its default row at zero specificity, so topbar cluster hands the row to .cluster.
  • The WCAG and OKLCH color math moves from scripts/utils/color.js to src/tooling/color.js.
  • report:theme-contrast labels a dark-only preset (dim, glass, indigo, neon) as dark instead of light.

Fixed

  • actual-css contrast counts a resting soft pair under 4.5:1 as a miss; it only gated the hovered pair.
  • The design and contrast examples run bunx --bun actual-css: plain bunx honors the CLI's Node shebang and stops on "needs Bun".
  • dialog.modal.scrollable lays the body wrapper out as a flex column: a structural header or footer keeps its size and every other region scrolls, so a modal with an external dialog > header no longer collapses its footer to zero.
  • --dialog-icon-size and --dialog-icon-glyph-size are read, not declared, on .dialog-icon, so an override on the icon's media row or the dialog moves the circle and the heading beside it together.
  • An .avatar-stack avatar layers its fill over --surface-opaque, so a translucent fill no longer shows the neighbour it overlaps.
  • prefers-reduced-motion also resets ::backdrop, so a modal or drawer scrim no longer fades when the user reduces motion.
Assets 5
Loading