stitch2 0.20.0 → 0.20.1

package/dist/audit.js

@@ -218,6 +218,14 @@ export async function audit(opts) {
     window.scrollTo(0, 0);
     // 4. Tap targets: WCAG 2.2 asks for at least 24px; smaller than the config's comfortableTarget is a warning.
     const interactive = all.filter((el) => el.matches('button, a[href], input:not([type=hidden]), select, textarea, [role=button], [role=tab], [role=switch], [role=checkbox]'));
+    // Fixed and sticky layers float over the scrolling page (a running-workout panel over cards): content slides
+    // under them while scrolling, so they never crowd in-flow targets. Tap spacing (6d) already compares layers.
+    const layerOf = (el) => {
+        for (let e = el; e; e = e.parentElement)
+            if (['fixed', 'sticky'].includes(getComputedStyle(e).position))
+                return e;
+        return null;
+    };
     for (const el of interactive) {
         if (interactive.some((o) => o !== el && o.contains(el)))
             continue;
@@ -229,7 +237,7 @@ export async function audit(opts) {
         const cx = r.left + r.width / 2;
         const cy = r.top + r.height / 2;
         const crowded = interactive.some((o) => {
-            if (o === el || o.contains(el) || el.contains(o))
+            if (o === el || o.contains(el) || el.contains(o) || layerOf(o) !== layerOf(el))
                 return false;
             const q = o.getBoundingClientRect();
             const dx = Math.max(q.left - cx, 0, cx - q.right);
@@ -250,12 +258,8 @@ export async function audit(opts) {
     // 4b. Controls never overlap one another (a button squeezed over its neighbour). Controls inside one another
     // and invisible overlays (a native picker laid over a row) are fine; fixed and sticky layers (a docked timer,
     // a sticky Save bar floating over a list) are compared apart from the scrolling page.
-    const layer = (el) => {
-        for (let e = el; e; e = e.parentElement)
-            if (['fixed', 'sticky'].includes(getComputedStyle(e).position))
-                return e;
-        return null;
-    };
+    // layerOf is defined with the tap targets above; fixed and sticky layers are compared apart here too.
+    const layer = layerOf;
     // The part of a control its scrolling or clipping ancestors show: a link scrolled out of a nav strip is not drawn
     // where its box would be.
     const visibleBox = (el) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stitch2",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "description": "A design canvas, layout and type checks, component consistency and screen versioning for agent-built UI, on Google's DESIGN.md format.",
   "license": "MIT",
   "author": "ifokeev",