actual-css 0.7.0 → 0.9.0

package/CHANGELOG.md

@@ -3,6 +3,223 @@
 ## [Unreleased]
 
 
+## [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
+and density, simpler surface behavior, stronger progressive enhancement, and a
+more polished JavaScript runtime.
+
+### Breaking changes
+
+- The JavaScript browser floor is now Safari 17+, Firefox 125+, and Chromium
+  116+. Older browsers still receive the CSS degradation covered by the
+  Degraded tier, but no longer receive the supported JavaScript runtime.
+- The Intermediate browser tier is removed; Minimal now covers the supported
+  JavaScript baseline.
+- `.gap-sm`, `.gap-md`, and `.gap-lg` are removed. They changed the `gap`
+  property without updating Actual's inherited `--gap` rhythm, which could also
+  diverge from `.grid-N` track sizing. Use `gap: var(--space-*)` for a local
+  one-off gap, and `--gap` only when intentionally rebinding the rhythm inherited
+  by nested layout primitives.
+- `.alert.callout` is now purely a leading-flag treatment. It no longer forces a
+  neutral surface, so intents and surface variants compose with it normally.
+- `--font-weight` is renamed to `--font-weight-normal`,
+  `--font-weight-strong` to `--font-weight-semibold`, and
+  `.font-weight-strong` to `.font-weight-semibold`. Semibold is now 600.
+- Badge sizing is independent from density. `--density-compact-size` is removed;
+  use the badge size hooks and `.sm` / `.lg` instead.
+- Flyouts and context menus no longer turn into mobile sheets. They remain
+  anchored non-modal popovers at every viewport size.
+  `data-flyout-mobile`, `data-flyout-breakpoint`, the responsive sheet
+  presentation, and its generated backdrop are removed.
+- `disconnectSurface(menu, { restore })` no longer accepts options; surface
+  reparenting is gone.
+- `EVENTS.reposition`, `EVENTS.hide`, and `EVENTS.outOfView` are removed from
+  `actual-css/js/events`. No runtime path dispatched them.
+
+### Added
+
+- `applyEnhancement(name, selector, root?)` lets applications apply
+  `data-enhance` behavior tokens programmatically while preserving existing
+  tokens and refreshing registered behaviors.
+- Accordion now supports `.flush` and `.separated` container treatments.
+- `.list` rows can freely combine leading, content, and trailing regions.
+- `--hr-space` customizes an `hr`'s block spacing when used in normal document
+  flow.
+- Global `pre` elements now use `overflow-x: auto`, preventing long
+  unbreakable lines from widening the page.
+- Badge status dots use `currentColor`, so they compose naturally with badge
+  intent and text color.
+- New demos and references:
+  - visual guide for spacing, layout primitives, density, and size;
+  - color guide for theme islands, intent colors, gradients, and interaction
+    colors;
+  - popover transport, adaptive filter surface, and settings modal examples;
+  - expanded kitchen sink coverage for steps, aura, inverted contexts, density,
+    and nested intents.
+- New tooling:
+  - `bun run serve` for opening demos from another device;
+  - `report:dead-css` for unused demo CSS;
+  - `report:neutral-ramp` for preset neutral-ramp analysis;
+  - `report:theme-contrast` for soft-state contrast reporting.
+
+### Changed
+
+- Updated `@lekoala/floating` to 0.2.0.
+- `.sm` and `.lg` now scale participating component families locally.
+  `.compact` and `.spacious` remain inherited density contexts.
+- Text controls now use the shared `--control-pad-x` geometry. Horizontal
+  padding scales with the control size, and select/input-icon geometry follows
+  the same control frame.
+- Badge size now scales its label, icons, dots, and geometry proportionally.
+  Badge inline padding is derived from `--badge-size`, and badges no longer
+  shrink inside flex layouts.
+- Badge and button typography now both use the medium font weight.
+- Accordion summaries use the medium font weight and keep hover feedback in the
+  current text color instead of switching to the primary color.
+- `.soft` interactions now use one consistent fill change. Soft foreground
+  colors resolve per intent through `--intent-soft-fg`, with theme hooks tuned
+  for readable hovered states.
+- Surface behavior is simpler:
+  - interactive surfaces use `popover="manual"` instead of DOM reparenting;
+  - `.is-open` is the only state written by `surface.js`;
+  - `prepareSurface()` removes `[hidden]` and normalizes the popover transport;
+  - Actual surfaces remain mutually exclusive per document; nested surfaces are
+    unsupported.
+- Tooltips now choose their coordinate space based on their trigger:
+  scrolling page content uses absolute/document coordinates, while fixed,
+  sticky, popover, and modal contexts stay viewport-relative.
+- Tooltips that temporarily leave their positioning boundary are hidden and
+  restored rather than torn down.
+- Modal dialogs use the small viewport height (`svh`) for their block-size cap,
+  avoiding panel reflow while mobile browser chrome expands or collapses.
+- RTL fallbacks now use `[dir="rtl"]` for the Degraded tier and `:dir()` for
+  nested direction changes. Redundant `@supports selector(:dir(...))` wrappers
+  were removed.
+- Form controls include `-webkit-appearance` alongside `appearance` where
+  needed for older WebKit.
+- `.scroll-snap` now uses `proximity` by default.
+  `data-snap="mandatory"` opts into strict snapping and
+  `data-snap-align="center"` controls item alignment.
+- Print styles focus on structural repair and preserve semantic component
+  content.
+- `reserved-classes.json` now lives at the package root while keeping the same
+  public package export.
+- Compatibility checks now explicitly audit against the Degraded CSS floor,
+  including structural selectors such as `:has()` and selector lists in
+  `:not()`.
+
+### Fixed
+
+- `applyEnhancement(name, selector, document)` now refreshes registrations owned
+  by either `document` or `document.documentElement`.
+- `enhance()` no longer starts an idle `MutationObserver` when no valid enhancer
+  record exists.
+- Context-menu button triggers now use the same opening path as pointer and
+  keyboard triggers, including `data-context-menu-scope`.
+- Tooltips shown from touch/focus recover correctly after leaving and re-entering
+  their positioning boundary.
+- Reusing one explicit tooltip from another trigger correctly restarts position
+  tracking.
+- Tabs skip hidden items during keyboard navigation.
+- Vertical tab focus rings use the correct inline edge.
+- `.tabs` keeps `aria-orientation` inside `:where()`, allowing application
+  classes to override layout without fighting framework specificity.
+- An unchecked `.switch` keeps the correct hover treatment without the hover
+  selector overriding the checked state.
+- `.input-icon` supports leading and trailing icons at the same time and keeps
+  their inset tied to the control frame even when the icon has its own font
+  size.
+- `.list-item` correctly lays out rows with no leading region.
+- `.card.subtle` now propagates its subtle surface to contextual aliases and
+  busy overlays.
+- `.card`, `.navbar`, and `.app-nav` reset inherited intent state at their
+  component boundary, preventing unrelated ancestor intents from tinting their
+  variants.
+- `.app-nav` uses the system Highlight colors for its current item in forced
+  colors mode.
+- `.background-surface`, `.background-raised`, and `.background-subtle` restore
+  their matching text color and heading context, including inside `.inverted`
+  sections.
+- All paired themes provide their own `--hover-overlay` and `--shadow-color`
+  baseline values instead of inheriting the core tint.
+- `.prose` resets the browser's default inline blockquote margin.
+- `hr` no longer collapses to zero width inside `.stack`.
+- Select styling and modal body scrolling remain functional in Degraded
+  Firefox 78–83.
+- Badge dismiss buttons keep a 24px pointer-target floor and empty dismiss
+  buttons render their built-in close icon correctly.
+- `.menu-separator` documentation now uses plain `<hr>` without a redundant
+  separator role.
+- `--modal-size` can once again be overridden directly on a dialog.
+- Theme, density, inverted, and application custom properties now inherit
+  correctly into anchored surfaces.
+
+### Documentation and tooling
+
+- Updated the progressive-enhancement, surface, sizing, theme, layout, alert,
+  badge, joined-control, and browser-support documentation to match the 0.8
+  behavior.
+- Added clearer guidance around `--gap`: setting the custom property changes an
+  inherited rhythm, while `.gap-context` applies that rhythm to containers that
+  do not already consume it.
+- Updated Biome guidance for known false positives around `<menu role="menu">`
+  and `role="group"`.
+- Documentation examples and the examples index were cleaned up to remove stale
+  framework classes and retired surface/sheet behavior.
+- Package export tests now cover the documented `applyEnhancement()` and
+  `ACTUAL_EVENT_PREFIX` exports.
+
 ## [0.7.0] - 2026-09-04
 
 ### Added

package/README.md

@@ -3,7 +3,7 @@
 Plain CSS component framework for new projects. Semantic classes, shared variants, small tokens, theme hooks, and progressive enhancement.
 
 Actual CSS claims a documented set of global class names; the package publishes
-it as [`actual-css/reserved-classes.json`](scripts/reserved-classes.json).
+it as [`actual-css/reserved-classes.json`](reserved-classes.json).
 
 For existing projects: use cascade layers, import order, or your own build-time
 prefix transform.
@@ -67,7 +67,9 @@ Intents such as `.primary`, `.secondary`, `.success`, `.warning`, and `.danger`
 
 Variants such as `.solid`, `.soft`, `.outline`, and `.surface` are shared by components like buttons, badges, alerts, and cards. `.inverted` is a shared surface modifier: it paints any block with the inverse surface. `.ghost` and `.link` are button-only variants.
 
-Size variants `.sm` and `.lg` scale controls consistently.
+Size variants `.sm` and `.lg` scale typography and participating component
+geometry consistently. Density contexts `.compact` and `.spacious` change
+spacing and geometry without changing typography or icons.
 
 ## Public Class Grammar
 
@@ -77,7 +79,7 @@ Actual CSS uses a small unprefixed class grammar:
 .component [intent] [variant] [size] [modifier]
 ```
 
-Components, layout helpers, form helpers, and utilities claim their documented class names. Intents are `.primary`, `.secondary`, `.success`, `.warning`, and `.danger`; shared variants are `.solid`, `.soft`, `.outline`, and `.surface`; `.inverted` is a shared surface modifier; button-only variants are `.ghost` and `.link`; shared sizes are `.sm` and `.lg`.
+Components, layout helpers, form helpers, and utilities claim their documented class names. Intents are `.primary`, `.secondary`, `.success`, `.warning`, and `.danger`; shared variants are `.solid`, `.soft`, `.outline`, and `.surface`; `.inverted` is a shared surface modifier; button-only variants are `.ghost` and `.link`; shared sizes are `.sm` and `.lg`; density contexts are `.compact` and `.spacious`.
 
 Undocumented `is-*` classes are runtime internals.
 
@@ -151,19 +153,19 @@ For more conservative fallbacks, import and compose the source entrypoints direc
 
 Actual CSS is built around progressive enhancement.
 
-| Tier         | Firefox |    Safari | Chromium |
-| ------------ | ------: | --------: | -------: |
-| Degraded     |     78+ |       14+ |      88+ |
-| **Minimal**  | **98+** | **15.4+** |  **99+** |
-| Intermediate |    121+ |       16+ |     106+ |
-| Recommended  |    129+ |     17.5+ |     123+ |
+| Tier        |  Firefox |  Safari | Chromium |
+| ----------- | -------: | ------: | -------: |
+| Degraded    |      78+ |     14+ |      88+ |
+| **Minimal** | **125+** | **17+** | **116+** |
+| Recommended |     129+ |   17.5+ |     123+ |
 
 **Degraded** — semantic HTML and core CSS remain usable. JavaScript
 enhancements are outside the supported contract.
 
 **Minimal** — full Actual support, including the JavaScript runtime. The
-runtime assumes modern browser APIs and does not ship legacy compatibility
-layers or polyfills.
+runtime assumes modern browser APIs — including the native manual Popover
+transport used by interactive surfaces — and does not ship legacy
+compatibility layers or polyfills.
 
 Degraded browsers may execute some enhancements successfully, but this
 behavior is not tested or preserved.