Skip to content

0.13.0

Choose a tag to compare

@github-actions github-actions released this 06 Oct 18:48
· 70 commits to master since this release

Breaking changes

  • --cluster-justify, --cluster-align and --cluster-wrap no longer inherit into nested .cluster rows; set them on the row itself or select nested rows.
  • --grid-columns and --grid-min no longer inherit into a nested .grid.
  • .avatar-stack no longer infers its size from child .avatar.sm/.lg; set .sm/.lg on the stack and omit size classes on its avatars.
  • --focus-outline has no default value: it is a fallback-only hook that replaces the generic focus line; read var(--focus-ring-width) solid var(--focus-outline-color) instead.
  • data-enhance="tabs" needs role="tablist" on the same element; without it the runtime warns and wires nothing.
  • .nav-link shows its current state only for aria-current="page" or "location", and a.list-item only for "page" or "true"; any other value, "false" included, is inert.

Added

  • actual-css/js/full now exposes enhance, applyEnhancement, and registerEnhancement from the same runtime that registers the built-ins.
  • --tab-flex on .tabs sets each tab's flex; 1 1 0 gives equal-width tabs.
  • In supporting browsers, an overflowing link .tabs strip or .steps-horizontal row starts scrolled to its aria-current item, with no runtime (scroll-initial-target).
  • --border-control sets the resting edge of fields, choices, switches, OTP cells, choice cards, .join-addon and the color and file inputs; it defaults to --border, which keeps separating surfaces.

Changed

  • .steps-horizontal fits short labels on a phone, wraps (and hyphenates) long names, and aligns its outer stacked steps with the row's edges at every width.
  • .steps-horizontal --step-min defaults to the marker width and only sets a wider budget; --step-gap also separates adjacent steps.
  • forms/form-actions no longer has to load after layout/cluster: .form-actions relays its hooks into the row's --cluster-*.
  • An overflowing horizontal .tabs strip shows its selected tab in full, at connect and whenever selection changes, scrolling the strip only.
  • .floating-field accepts its .field-label before or after the control; state is read through :has() on the cell.
  • .list-item regions center on the row by default; add .items-start to the row or the .list for rows with long supporting text.
  • A horizontal .tabs strip never wraps, nor do its labels: a strip that does not fit scrolls horizontally.
  • .breadcrumb never wraps: a trail that does not fit truncates its labels with an ellipsis, ancestors before the current page.
  • A navigation flyout .tab shows the current state with aria-current="true" while its panel holds the current page.
  • .breadcrumb ancestor labels truncate on their <a> or <span>; the current page also truncates as bare text in an <li aria-current="page">.
  • The current .nav-list link trait sits inside the row's inline padding with rounded ends, instead of flush on its rounded edge.
  • A horizontal .tabs strip hides its scrollbar; selecting or focusing the clipped tab scrolls it into view.
  • An overflowing horizontal .tabs strip fades the edges it can still scroll toward, where scroll-driven animations are supported.
  • .scroller no longer styles the scrollbar on touch screens, where the native overlay scrollbar, hidden at rest, stays.

Fixed

  • actual-css contrast --theme FILE and actual-css design --theme FILE accept a theme written on :root and measure its own values, not the default palette.
  • A default .btn.outline in a field .join takes --border-control like the field, not --border.
  • The scrolling body of a dialog.modal.scrollable and a dialog.drawer keeps the focus line of its first and last controls inside its clip.
  • actual-css contrast and actual-css design detect a theme written [data-theme = "brand"] or [data-theme=brand], and ignore selectors quoted in comments.
  • actual-css contrast measures a theme whose name contains & or < under its own name, instead of an island the name had broken.
  • actual-css contrast and actual-css design reject a --name the theme file does not declare as [data-theme], instead of measuring the framework defaults.
  • A bare heading in a dialog.modal > header drops its block margins, so the band no longer grows and the title centers on the close.
  • A <nav> around .breadcrumb or .tabs shrinks inside a flex or grid row, so the trail truncates or the strip scrolls instead of the page.
  • An enhanced tablist no longer operates the tabs of a nested role="tablist" that has no data-enhance="tabs".
  • A tablist with data-enhance="tabs" sets its roving tabindex when a classic script in <head> connects it before its tabs are parsed.
  • The generic focus line of links, summary and nav items follows a --focus-ring-width set on a [data-theme] island or any region, like the .btn ring beside it.
  • The focus reserve of a scrolling dialog or drawer body is --focus-outline-offset + --focus-ring-width, no longer widened by 2 × --border-width.