@synopackageland/ui 0.25.3 → 0.25.4

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 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

package/dist/index.js

@@ -3795,10 +3795,18 @@ class Lw {
       a.has(o) || (i(), this.hidden.delete(o));
     for (const o of a) {
       if (this.hidden.has(o)) continue;
-      const i = Uc(o, "inert", ""), l = Uc(o, "aria-hidden", "true");
-      this.hidden.set(o, () => {
-        i(), l();
-      });
+      const i = Uc(o, "aria-hidden", "true");
+      if (o === t)
+        this.hidden.set(o, i), Fe(() => {
+          const l = o.ownerDocument.activeElement;
+          this.hidden.has(o) && l && o.contains(l) && l.blur();
+        });
+      else {
+        const l = Uc(o, "inert", "");
+        this.hidden.set(o, () => {
+          l(), i();
+        });
+      }
     }
   }
   keydown = (n) => {
@@ -40215,7 +40223,7 @@ const bG = F3, V3 = ["aria-label", "data-ui-alignment", "data-ui-phone"], N3 = [
       _: 3
     }, 8, ["data-layout", "aria-busy"]));
   }
-}), G3 = [640, 768, 1024, 1280, 1536];
+}), G3 = [440, 720, 1024, 1280, 1536];
 function Pp(e) {
   return e > 0 ? 1 + G3.filter((n) => e >= n).length : 0;
 }