@synopackageland/ui 0.25.3 → 0.25.5

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # Changelog
 
+## 0.25.5 (2026-11-10)
+
+Opening or closing the phone's navigation drawer, the aside sheet or the FAB speed dial no longer restyles the whole page. AppLayout made the page column `inert` while one was open, and Chrome restyles every element under an element whose `inert` changes. Pages look the same: a computed-style comparison of every element and property in each state, and the screenshots, differ only in Chrome's `interactivity` (the `inert` itself). No API change.
+
+Measured with `pnpm trace:restyle --phone` (a 1,173-element settings page on a 390px touch phone, Chrome at 4× CPU slowdown, median of 7; development build): opening the drawer restyles 68 elements instead of 860 (style 28 ms instead of 206 ms; next paint 90 ms instead of 298 ms), the aside sheet 88 instead of 879, the FAB speed dial 43 instead of 834. Closing each restyles 32–43 elements instead of 822–834. The DSM window theme (`--phone --window`) gives about the same: 29–86 elements instead of 819–877.
+
+### Phone layout
+
+- **The page behind an overlay is `aria-hidden`, not `inert`.** The drawer and the aside sheet keep it out of reach as an app-local dialog does: the mask takes presses, wheel and touch, Tab loops in the overlay, focus that reaches the page goes back, and Escape closes. An expanded aside, which leaves the page no width, still makes the page `inert`
+- **The FAB speed dial traps focus in an app-local AppRoot.** In `modal-scope="app"` its trap came only from the page's `inert`. Tab and Shift+Tab now loop in the dial, and focus that reaches the page goes back to it, as in document mode
+
+### Development
+
+- **Every dev server runs the patched Reka.** Vite's dependency optimizer pre-bundled reka-ui without `build/rekaPatch.ts`, so in Histoire, the gallery and the `tests/dsm-host` pages a Dialog locked the document body (`pointer-events: none`, `overflow: hidden`). The Reka patch plugin now keeps reka-ui out of `optimizeDeps` in any config that uses it, and the browser-check scripts serve through `vitest.config.ts`. `tests/dev-server-reka.test.ts` fails when a dev config or a script's dev server goes without it. The published package was not affected: its build already applied the patch
+- `pnpm trace:restyle --phone [--window]` measures the drawer, the aside sheet and the FAB speed dial (`tests/dsm-host/restyle-phone.html`)
+
+### Migration notes
+
+- A test that checked `[data-ui-layout-main]` for `inert` while the phone drawer, the aside sheet or the FAB speed dial is open should check `aria-hidden="true"` instead. With an expanded aside the page is still `inert`
+
+## 0.25.4 (2026-11-10)
+
+A local change no longer restyles the whole App. Adding a row, showing a notice or opening a dialog used to make Chrome restyle every element of the App (100–500 ms per click on a busy machine); now only what the change reaches is restyled. Pages look the same: a computed-style comparison of every element and property over the component gallery and the visual pages found no difference. No API change.
+
+Measured with `pnpm trace:restyle` (a 1,200-element settings page in a DSM window, Chrome at 4× CPU slowdown, median of 7; development build, so script time is high): opening a dialog restyles 36 elements instead of 816 (style 16 ms instead of 160 ms; first paint about 125 ms instead of 270 ms); a notice at the top of a settings page restyles 5 elements instead of 1,269 (style 3 ms instead of 185 ms); a row at the top of a form group restyles 19 elements instead of 80.
+
+### Theme
+
+- **Form groups and the rich text editor** space every child after the first with `:not(:first-child)` instead of `* + *` (same elements, same zero specificity). Adding a row to a `FormGroup` restyled the subtrees of all the rows after it
+- **Settings pages** space each visible block after the first visible one with `:nth-child(n + 2 of :not([hidden]))` instead of a `~` rule. Showing a notice at the top of a `SettingsPage` restyled the whole page
+- **The phone's aside button** hides under an open record sheet by asking the App root (`[data-ui-app]:has(…)`), not the document root
+- **The DSM window theme** (`themes/dsm7-embedded.css`) scopes each rule to the App as `:where([data-ui-app])X, :where([data-ui-app]) X` instead of `:where([data-ui-app], [data-ui-app] *)X` (same elements, same specificity). A full restyle of an App about 25 levels deep takes about a third less time. The file is larger (57 KB instead of 47 KB gzipped)
+
+### Dialogs and sheets (app-local modal)
+
+- **Opening a dialog no longer makes the App's background `inert`.** Chrome restyles every element under an element whose `inert` changes, which made a dialog's first frame wait for a restyle of the whole App. The background is `aria-hidden`; the mask still takes presses, wheel and touch, Tab still loops in the dialog, focus that reaches the background goes back to the dialog, and Escape closes it. Focus left on the background when a dialog skips autofocus is released, as `inert` would. A nested dialog still makes the one under it inert
+
+### Card grid
+
+- **Two cards across on a tablet.** `VirtualCardGrid` gained its second column at a 640px container, so a gallery beside a sidebar on a portrait iPad (about 470px) showed one card per row. `GALLERY_BREAKPOINTS` is now `[440, 720, 1024, 1280, 1536]`: two columns from 440px, three from 720px, the wider steps unchanged. A phone (390px) keeps one. No API change
+
+### Migration notes
+
+- A test that checked `[data-ui-background]` for `inert` while a dialog is open should check `aria-hidden="true"` instead
+- An App that rewrote these selectors in its own build can drop that rewrite
+
 ## 0.25.3 (2026-11-09)
 
 ### Grid