actual-css 0.8.0 → 0.9.1

package/CHANGELOG.md

@@ -2,6 +2,82 @@
 
 ## [Unreleased]
 
+### Fixed
+
+- `.modal.scrollable` and `.drawer` body scrollports reserve inline focus-ring space without changing header, body, or footer alignment, so full-width controls no longer clip their focus indicator.
+- `:where(dialog).modal` and `:where(dialog).drawer` roots now have 0-1-0 specificity like other components, allowing a later application class to override their defaults and documented hooks normally.
+- `[data-context-menu]` resolves its menu per interaction: a target declared before its `<menu>` exists and a same-id menu replacement now open correctly instead of staying dead.
+- `escape.js` ignores `Escape` presses already consumed (`defaultPrevented`) or chorded with `metaKey`.
+- `isElementVisible()` in `focus.js` passes `visibilityProperty` to `checkVisibility()`, so `visibility:hidden` content is no longer reported focusable on modern engines.
+- A flyout `<a>` trigger calls `preventDefault()` once its panel resolved — clicking it no longer navigates, while an unresolved trigger still navigates and bubbles.
+- `data-tooltip` triggers containing focusable children now hide correctly: the non-bubbling `blur` listener was replaced by `focusout` with a `relatedTarget` containment check.
+- `--dismiss` on an open surface finalizes the surface lifecycle — `.is-open`, the Escape entry, position tracking — and restores focus to the opener; the surface consumes `actual:dismiss` itself, keeping `dismiss.js` generic.
+- `.link-muted:hover` and `.link-muted:focus-visible` are separate rules, so the hover color survives browsers without `:focus-visible`.
+- `.choice-card` and `.floating-field` participate in `.sm` / `.lg` (and `.choice-card` consumes `--control-font-size`), so their documented size modifiers actually work.
+- The `.floating-field` label rests on `--control-pad-x`, the same geometry as the control's text — both now share an inline start edge at every size.
+- `.modal` header/footer resets are bounded to the dialog's structural `form` / `.stack` slots, so a header or footer inside the content keeps its own rhythm.
+- `.otp` forced-colors styling covers the `:user-invalid` route.
+- `print.css` forces `[data-theme]` islands to `color-scheme: light` with a white background and black text, so a dark-themed section no longer prints dark.
+- The 11 paired themes declare `color-scheme: light` in their fallback block and `light dark` under `@supports (color: light-dark(...))` — dark UA controls no longer appear on the light fallback palette.
+
+### Documentation and tooling
+
+- Public CSS sources carry a `Docs:` pointer to their canonical usage page, verified by `check:architecture`.
+- `check:compat` rejects selector lists mixing an above-floor pseudo with baseline selectors.
+- Docs TOC and search headings decode HTML entities, so a heading like `Linting role="menu"` no longer shows `&quot;` in the sidebar.
+- `tokens.md` describes the actual forced-colors contract; `enhancement-loader` documents that manifests are trusted application configuration.
+
+
+## [0.9.0] - 2026-09-13
+
+### Breaking changes
+
+- `--choice-control-offset` is renamed `--choice-control-nudge` and adds to the
+  derived first-line offset instead of replacing it — an old value is a whole
+  offset and will sit that far too low.
+- `--skeleton-width` is a maximum inline size, not a width: a placeholder fills
+  its container and stops there, so it no longer gives every shrink-to-fit
+  ancestor a min-content floor. A placeholder in a container sized by its own
+  content now collapses instead of forcing that container open.
+
+### Fixed
+
+- `.choice` aligns its control on the first line's cap height with the `cap`
+  unit, so a checkbox, radio or switch is level with the label text in any
+  font — the previous constant was tuned for Segoe UI and sat ~2px low on
+  Roboto.
+- `.switch` lays its knob out of flow, so the track's baseline is its own
+  border box.
+- `dialog.drawer` is `--viewport-block` tall again, so a mobile browser's
+  collapsing URL bar no longer pushes its footer below the fold.
+- `dialog.drawer` scrolls its body region, so the footer stays reachable
+  whatever the content length; the rule replaces the `nav`-only one.
+- `.table-wrap` is `position: relative`, so an `.sr-only` header inside a wide
+  table no longer escapes the scroller and gives the page a phantom horizontal
+  scrollbar on small viewports.
+
+### Documentation and tooling
+
+- `tests/browser/mobile-overflow.test.js` asserts that no component scrolls the
+  page sideways at 320px and 360px, and that wide content scrolls inside its
+  own container.
+- `bun run report:overflow` surveys demo and site pages at phone width and
+  bisects each failure down to the element that owns it.
+- `tests/browser/mega-menu.test.js` exercises three wide sibling nav panels —
+  takeover, toggle, focus handover, keyboard open, Escape, clamping at both
+  viewport edges, and no drawer mutation on a phone.
+- The flyout hooks are documented as a preferred width and a width cap, with
+  the cap's `20rem` default stated: a wide panel sets both, like `width` and
+  `max-width`.
+- The drawer and scrollable-modal pages state that a scrolling body region is
+  keyboard-focusable, takes a focus ring, and can claim a dialog's initial
+  focus — put the close control in the `header`, or use `autofocus`.
+- The kitchen-sink, blocks, blog, combobox and select-intents templates no
+  longer scroll sideways at phone widths.
+- The alert trailing-action recipe and the dashboard template add `.items-center`:
+  a trailing control makes the row taller than a line of text, which left the
+  start-aligned `.alert-icon` above the message.
+
 ## [0.8.0] - 2026-09-10
 
 Actual CSS 0.8 focuses on a cleaner component contract, more predictable sizing

package/components.json

@@ -266,6 +266,7 @@
     ],
     "internalHooks": [
       "--drawer-closed-translate",
+      "--drawer-focus-bleed",
       "--drawer-motion-duration"
     ],
     "states": [
@@ -446,6 +447,7 @@
     ],
     "internalHooks": [
       "--dialog-close-icon-size",
+      "--dialog-focus-bleed",
       "--dialog-viewport-block",
       "--dialog-viewport-gap-default",
       "--dialog-viewport-gap-2x"

package/dist/actual.css

@@ -744,9 +744,9 @@ small {
 }
 
 /* Shared control scale. Wrappers are listed when their descendants form one
-   component (field, input-icon, join, pagination, tabs, flyout). A local size
-   declaration beats inherited density because it is declared on the sized
-   component itself. */
+   component (field, choice-card, floating-field, input-icon, join, pagination,
+   tabs, flyout). A local size declaration beats inherited density because it
+   is declared on the sized component itself. */
 :where(
   .btn,
   .input,
@@ -756,7 +756,9 @@ small {
   .file,
   .field,
   .choice,
+  .choice-card,
   .input-icon,
+  .floating-field,
   .otp,
   .join,
   .pagination,
@@ -778,7 +780,9 @@ small {
   .file,
   .field,
   .choice,
+  .choice-card,
   .input-icon,
+  .floating-field,
   .otp,
   .join,
   .pagination,
@@ -838,6 +842,9 @@ small {
 
 @media print {
   :root,
+  /* The doubled attribute intentionally outranks single-attribute preset
+     islands (data-theme="dark", paired themes) loaded after the core. */
+  [data-theme][data-theme],
   body {
     /* Save some ink in dark mode */
     color-scheme: light;