stitch2 0.24.1 → 0.24.2

package/dist/audit.js

@@ -842,8 +842,17 @@ export async function audit(opts) {
         if (!el.matches('nav, [role=navigation], [role=tablist]') && !el.querySelector('nav, [role=navigation], [role=tablist]'))
             continue;
         const items = [...el.querySelectorAll('a[href], button, [role=tab]')].filter((i) => shown(i) && !i.parentElement?.closest('a[href], button, [role=tab]'));
-        if (items.length > 5)
-            push('warning', 'nav-destinations', el, items.length + " destinations in the bottom navigation: Material's navigation bar holds 3–5");
+        // The destinations stand in one row. A panel above them (a workout that is running, a player) belongs to the bar
+        // but is not a destination: the widest row counts.
+        const tops = items.map((i) => i.getBoundingClientRect().top).sort((a, b) => a - b);
+        let widest = 0;
+        for (let from = 0, row = 0; row < tops.length; row++) {
+            if (tops[row] - tops[from] > 12)
+                from = row;
+            widest = Math.max(widest, row - from + 1);
+        }
+        if (widest > 5)
+            push('warning', 'nav-destinations', el, widest + " destinations in the bottom navigation: Material's navigation bar holds 3–5");
     }
     // 6h. Keyboard focus is visible (Material's focus state, web.dev, WCAG 2.4.7): focusing a control changes how
     // it or its frame looks. Transitions are paused so a ring that fades in still counts.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stitch2",
-  "version": "0.24.1",
+  "version": "0.24.2",
   "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",

package/skills/stitch2/references/google.md

@@ -71,7 +71,8 @@ the rest are judged from the render. Where Google and DESIGN.md disagree, DESIGN
 ## Components
 
 - **Navigation bar:** three to five destinations, each an icon with a one-line label; more destinations go to a
-  rail, a drawer or a page **(check: nav-destinations; label-wraps)**.
+  rail, a drawer or a page **(check: nav-destinations; label-wraps)**. The check counts the destinations in one row:
+  a panel stacked above them in the same bar (a running workout's Resume and Discard, a player) is not a destination.
 - **Button emphasis:** filled for the one main action, tonal or outlined for secondary, text buttons for
   low-emphasis; one floating action button at most.
 - **Icon-only controls have a name** that says what they do ("Share", not "Share button"); repeated items in a