stitch2 0.22.11 → 0.22.12

package/dist/audit.js

@@ -145,15 +145,13 @@ export async function audit(opts) {
             (c.display.includes('flex') && c.flexDirection.startsWith('column')) ||
             (c.display.includes('grid') && c.gridTemplateColumns.split(/\s+/).length === 1);
     };
-    const disclosureTextFits = (el) => {
-        if (!el.matches('button[aria-expanded]:not([aria-haspopup])'))
-            return false;
+    const contentTextFits = (el) => {
         const c = getComputedStyle(el);
-        if (!['left', 'start'].includes(c.textAlign))
-            return false;
         const r = el.getBoundingClientRect();
         const top = r.top + parseFloat(c.borderTopWidth) + parseFloat(c.paddingTop);
         const bottom = r.bottom - parseFloat(c.borderBottomWidth) - parseFloat(c.paddingBottom);
+        const left = r.left + parseFloat(c.borderLeftWidth) + parseFloat(c.paddingLeft);
+        const right = r.right - parseFloat(c.borderRightWidth) - parseFloat(c.paddingRight);
         const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
         let found = false;
         for (let n = walker.nextNode(); n; n = walker.nextNode()) {
@@ -163,12 +161,23 @@ export async function audit(opts) {
             range.selectNodeContents(n);
             for (const q of range.getClientRects()) {
                 found = true;
-                if (q.top < top - 1 || q.bottom > bottom + 1)
+                if (q.top < top - 1 || q.bottom > bottom + 1 || q.left < left - 1 || q.right > right + 1)
                     return false;
             }
         }
         return found;
     };
+    const disclosureTextFits = (el) => el.matches('button[aria-expanded]:not([aria-haspopup])') &&
+        ['left', 'start'].includes(getComputedStyle(el).textAlign) && contentTextFits(el);
+    const readableContentControl = (el) => {
+        if (el.closest('nav, [role=navigation], [role=menu], [role=tablist], [role=toolbar]'))
+            return false;
+        const c = getComputedStyle(el);
+        // Pretty/balanced wrapping explicitly authors a content title, not a
+        // compact action label. It still has to fit without clipping or crowding.
+        return ['pretty', 'balance'].includes(c.textWrapStyle) &&
+            parseFloat(c.lineHeight) >= parseFloat(c.fontSize) * 1.3 && contentTextFits(el);
+    };
     // 1. Nothing past the screen edge, except inside deliberate horizontal scrollers (chip rows).
     if (document.documentElement.scrollWidth > W + 1)
         push('error', 'page-overflow', document.body, `The page scrolls sideways (${document.documentElement.scrollWidth}px wide)`);
@@ -177,6 +186,10 @@ export async function audit(opts) {
         const r = el.getBoundingClientRect();
         if (r.right <= W + 1 && r.left >= -1)
             continue;
+        // A nested clip (for example a title's ellipsis) must not hide the fact
+        // that its whole card belongs to a deliberate horizontal scroller.
+        if (visibleRects(el).every((q) => q.right <= 0 || q.left >= W))
+            continue;
         let clip = null;
         for (let p = el.parentElement; p && p !== document.body; p = p.parentElement) {
             const ox = getComputedStyle(p).overflowX;
@@ -227,26 +240,29 @@ export async function audit(opts) {
     const isLabel = (el) => el.matches('button, a, label, [role=tab], [role=button], [role=switch], th') ||
         /(^|\s)(chip|badge|pill|tag)|rounded-full/.test(String(el.className ?? ''));
     for (const el of all) {
-        if (!isLabel(el) || text(el).length > 40 || el.querySelector('p, div, li, ul, br'))
+        if (!isLabel(el) || el.querySelector('p, div, li, ul, br'))
+            continue;
+        // A tooltip describes its trigger but is not its painted control label,
+        // even when hovered. Hidden hints cannot create a wrap or conceal a real
+        // wrapped label by pushing its text beyond the short-label length limit.
+        const labelNodes = [];
+        const textWalker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+        for (let n = textWalker.nextNode(); n; n = textWalker.nextNode())
+            if (n.textContent.trim() && n.parentElement && shown(n.parentElement) && !n.parentElement.closest('[role=tooltip]'))
+                labelNodes.push(n);
+        if (!labelNodes.length || labelNodes.map((n) => n.textContent).join(' ').trim().length > 40)
             continue;
         // Prose links flow with their sentence; vertical contents titles and fitted disclosure headings can
         // also wrap. Horizontal navigation, tabs and ordinary button labels retain their one-line rule.
-        if (proseLink(el) || verticalNavigationLink(el) || disclosureTextFits(el))
+        if (proseLink(el) || verticalNavigationLink(el) || disclosureTextFits(el) || readableContentControl(el))
             continue;
         // A control whose text sits in two or more elements (a list row's title and its meta line) is a composite
         // control, not a label: its lines are laid out on purpose.
-        const holders = new Set();
-        const textWalker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
-        for (let n = textWalker.nextNode(); n; n = textWalker.nextNode())
-            if (n.textContent.trim() && n.parentElement)
-                holders.add(n.parentElement);
+        const holders = new Set(labelNodes.map((n) => n.parentElement));
         if (holders.size > 1)
             continue;
         // A wrap is one text node breaking across lines; an icon above its label is layout, not a wrap.
-        const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
-        for (let n = walker.nextNode(); n; n = walker.nextNode()) {
-            if (!n.textContent.trim())
-                continue;
+        for (const n of labelNodes) {
             // A label allowed two lines on purpose (line-clamp-2: a navigation rail's, under its icon) may wrap.
             if ((parseInt(getComputedStyle(n.parentElement).getPropertyValue('-webkit-line-clamp')) || 0) > 1)
                 continue;
@@ -338,7 +354,7 @@ export async function audit(opts) {
             const atEdge = edge === 'bottom' ? b.bottom >= H - 4 && b.top > H / 2 : b.top <= 4 && b.bottom < H / 2;
             if (!atEdge)
                 continue;
-            const drawn = paintedParts(bar).flatMap(visibleRects);
+            const drawn = paintedParts(bar).flatMap((part) => visibleRects(part));
             for (const el of content) {
                 if (el.contains(bar))
                     continue;
@@ -354,7 +370,7 @@ export async function audit(opts) {
     // 3b. Fixed bars never overlap one another, including what sticks out of them (a raised tab-bar button
     // reaching into a docked timer). Compares the painted parts: backgrounds, borders, text, icons, controls.
     const fixedBars = outer.filter((b) => getComputedStyle(b).position === 'fixed' && b.getBoundingClientRect().height < window.innerHeight * 0.8);
-    const parts = (bar) => paintedParts(bar).flatMap(visibleRects);
+    const parts = (bar) => paintedParts(bar).flatMap((part) => visibleRects(part));
     for (const [i, a] of fixedBars.entries())
         for (const b of fixedBars.slice(i + 1)) {
             const hit = parts(a).some((r) => parts(b).some((q) => Math.min(r.right, q.right) - Math.max(r.left, q.left) > 2 && Math.min(r.bottom, q.bottom) - Math.max(r.top, q.top) > 2));
@@ -385,12 +401,58 @@ export async function audit(opts) {
                 return e;
         return null;
     };
+    const tapRect = (el) => {
+        if (el instanceof HTMLInputElement && /^(checkbox|radio)$/.test(el.type))
+            for (const label of el.labels ?? []) {
+                if (!shown(label) || label.control !== el || getComputedStyle(label).pointerEvents === 'none')
+                    continue;
+                const sized = (box) => box.right - box.left >= opts.comfortable && box.bottom - box.top >= opts.comfortable;
+                let r = visibleRects(label).find(sized);
+                // A row at a scrollport edge can be fully revealed even inside an
+                // overflow-hidden dialog frame. Prove that by scrolling, measuring the
+                // actually exposed area, then restoring every scroll position.
+                if (!r) {
+                    const original = label.getBoundingClientRect();
+                    const scrolls = [];
+                    for (let p = label.parentElement; p; p = p.parentElement) {
+                        const c = getComputedStyle(p);
+                        if ((/auto|scroll/.test(c.overflowX) && p.scrollWidth > p.clientWidth) || (/auto|scroll/.test(c.overflowY) && p.scrollHeight > p.clientHeight))
+                            scrolls.push({ el: p, left: p.scrollLeft, top: p.scrollTop });
+                    }
+                    if (scrolls.length && original.width >= opts.comfortable && original.height >= opts.comfortable) {
+                        const before = { x: scrollX, y: scrollY };
+                        try {
+                            label.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'instant' });
+                            const revealed = visibleRects(label).find(sized);
+                            if (revealed)
+                                r = { left: original.left, top: original.top, right: original.left + revealed.right - revealed.left, bottom: original.top + revealed.bottom - revealed.top };
+                        }
+                        finally {
+                            for (const s of scrolls) {
+                                s.el.scrollLeft = s.left;
+                                s.el.scrollTop = s.top;
+                            }
+                            window.scrollTo({ left: before.x, top: before.y, behavior: 'instant' });
+                        }
+                    }
+                }
+                // Associated native labels are part of the hit area, not checkbox artwork.
+                if (r)
+                    return { left: r.left, top: r.top, right: r.right, bottom: r.bottom, width: r.right - r.left, height: r.bottom - r.top };
+            }
+        return el.getBoundingClientRect();
+    };
     for (const el of interactive) {
         if (interactive.some((o) => o !== el && o.contains(el)))
             continue;
         if (proseLink(el))
             continue;
-        const r = el.getBoundingClientRect();
+        // Scrolling containers can fully clip an otherwise laid-out control. It
+        // has no current hit area to measure; being below the window alone does
+        // not clip it, and the control is checked after scrolling it into view.
+        if (!visibleRects(el).length)
+            continue;
+        const r = tapRect(el);
         const min = Math.min(r.width, r.height);
         // WCAG 2.2 spacing exception: a smaller target passes when a 24px circle on it touches no other target.
         const cx = r.left + r.width / 2;
@@ -398,7 +460,7 @@ export async function audit(opts) {
         const crowded = interactive.some((o) => {
             if (o === el || o.contains(el) || el.contains(o) || layerOf(o) !== layerOf(el))
                 return false;
-            const q = o.getBoundingClientRect();
+            const q = tapRect(o);
             const dx = Math.max(q.left - cx, 0, cx - q.right);
             const dy = Math.max(q.top - cy, 0, cy - q.bottom);
             return Math.hypot(dx, dy) < 12;
@@ -478,7 +540,7 @@ export async function audit(opts) {
         return q.right <= left + 1 || q.left >= right - 1;
     };
     // Behind an open modal (found above) only the modal's own controls count.
-    const solid = interactive.filter((el) => opacity(el) > 0.05 && (!modal || modal.contains(el)));
+    const solid = interactive.filter((el) => opacity(el) > 0.05 && visibleRects(el).length > 0 && (!modal || modal.contains(el)));
     const emptyOverlays = new Set(solid.filter(isEmptyOverlay));
     const controlRects = new Map(solid.map((el) => [el, visibleRects(el)]));
     for (const [i, a] of solid.entries())
@@ -640,9 +702,16 @@ export async function audit(opts) {
     // 6. Google's guidelines (Material 3, Android's app quality guidelines, web.dev, Lighthouse). Warnings: each names
     // the rule it comes from, so a screen can break one on purpose (see skills/stitch2/references/google.md).
     const textRects = (el) => {
-        const range = document.createRange();
-        range.selectNodeContents(el);
-        return [...range.getClientRects()].filter((r) => r.width > 1 && r.height > 1);
+        const rects = [];
+        const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+        for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+            if (!node.textContent.trim() || !node.parentElement || !shown(node.parentElement) || opacity(node.parentElement) < 0.1)
+                continue;
+            const range = document.createRange();
+            range.selectNodeContents(node);
+            rects.push(...range.getClientRects());
+        }
+        return rects.filter((r) => r.width > 1 && r.height > 1);
     };
     const scrollsSideways = (el) => {
         for (let e = el.parentElement; e && e !== document.body; e = e.parentElement) {
@@ -682,7 +751,9 @@ export async function audit(opts) {
             continue;
         const lineChars = [];
         const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
-        for (let t = walker.nextNode(); t; t = walker.nextNode())
+        for (let t = walker.nextNode(); t; t = walker.nextNode()) {
+            if (!t.parentElement || !shown(t.parentElement) || opacity(t.parentElement) < 0.1)
+                continue;
             for (const m of t.textContent.matchAll(/\S+\s*/g)) {
                 const range = document.createRange();
                 range.setStart(t, m.index);
@@ -694,6 +765,7 @@ export async function audit(opts) {
                 else
                     lineChars.push({ top, n: m[0].replace(/\s+/g, ' ').length });
             }
+        }
         if (lineChars.length < 2)
             continue;
         const longest = Math.max(...lineChars.sort((a, b) => a.top - b.top).slice(0, -1).map((l) => l.n));
@@ -708,7 +780,7 @@ export async function audit(opts) {
         for (const el of solid) {
             if (solid.some((o) => o !== el && o.contains(el)) || proseLink(el))
                 continue;
-            const r = el.getBoundingClientRect();
+            const r = tapRect(el);
             if (r.width >= 48 && r.height >= 48)
                 continue;
             if (out.some((i) => i.type === 'tap-target' && i.selector === sel(el)))
@@ -718,7 +790,12 @@ export async function audit(opts) {
             const hit = solid.find((o) => {
                 if (o === el || o.contains(el) || el.contains(o) || layer(o) !== layer(el))
                     return false;
-                const q = o.getBoundingClientRect();
+                // A compound input's clear/reveal/list button occupies reserved padding,
+                // not a neighbouring target. The same geometry as overlap checks keeps
+                // insufficient padding and unrelated adjacent controls checked.
+                if (reservedInputAction(el, o) || reservedInputAction(o, el) || emptyOverlay(el, o) || emptyOverlay(o, el))
+                    return false;
+                const q = tapRect(o);
                 const ox = Math.max(0, Math.min(cx + 24, q.right) - Math.max(cx - 24, q.left));
                 const oy = Math.max(0, Math.min(cy + 24, q.bottom) - Math.max(cy - 24, q.top));
                 return ox * oy > 48;

package/dist/colours.js

@@ -9,15 +9,31 @@ import { existsSync, readFileSync } from 'node:fs';
 import { join } from 'node:path';
 import { config } from './config.js';
 import { familyOf } from './consistency.js';
-import { ROOT } from './screens.js';
+import { ROOT, meta, tag } from './screens.js';
 const LITERAL = /(?<![\w&/=-])#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3,4})\b|(?<![a-zA-Z])(?:rgba?|hsla?)\(\s*[\d.][^)]*\)/g;
 /** Lines with a literal colour, comments blanked out (keeping line numbers). */
 function literals(source, js) {
     let s = source.replace(/<!--[\s\S]*?-->/g, (m) => m.replace(/[^\n]/g, ' '));
     if (js)
         s = s.replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, ' ')).replace(/^\s*\/\/.*$/gm, '');
-    else
+    else {
         s = s.replace(/<head[\s>][\s\S]*?<\/head>/i, (m) => m.replace(/[^\n]/g, ' '));
+        // Code examples and syntax highlighting are content. Keep the outer tag's
+        // styles so an actual code-container background still follows the theme.
+        s = s.replace(/(<(pre|code)\b[^>]*>)([\s\S]*?)(<\/\2\s*>)/gi, (_, open, _tag, body, close) => open + body.replace(/[^\n]/g, ' ') + close);
+        // SVG drawing colours belong to an asset; the outer SVG's class/style
+        // still follows UI tokens (for example a muted search icon).
+        s = s.replace(/(<svg\b[^>]*>)([\s\S]*?)(<\/svg\s*>)/gi, (_, open, body, close) => open + body.replace(/[^\n]/g, ' ') + close);
+        // Documentation can describe a literal colour without painting it. Only
+        // markup attributes are authored styling, not prose or example values.
+        const tags = [...s.matchAll(/<(?:[^>"']|"[^"]*"|'[^']*')*>/g)];
+        let styled = s.replace(/[^\n]/g, ' ');
+        for (const match of tags) {
+            const tag = match[0].replace(/\s(?:data-[\w-]+|on[\w]+)\s*=\s*("[^"]*"|'[^']*')/gi, (attribute) => attribute.replace(/[^\n]/g, ' '));
+            styled = styled.slice(0, match.index) + tag + styled.slice(match.index + match[0].length);
+        }
+        s = styled;
+    }
     const out = [];
     s.split('\n').forEach((text, i) => {
         for (const m of text.matchAll(LITERAL)) {
@@ -34,6 +50,9 @@ export function colourIssues(path) {
     if (familyOf(path) !== 'screens')
         return [];
     const html = readFileSync(join(ROOT, path), 'utf8');
+    // Imported captures document the app as it is, not an editable token source.
+    if (meta(html, tag('source')) === 'app')
+        return [];
     const found = literals(html, false).map((l) => ({ ...l, file: `${config.designDir}/${path}` }));
     if (path.startsWith(`${config.catalogDir}/`))
         for (const [, src] of html.matchAll(/<script[^>]*\bsrc="\/([^"]+\.js)"/g)) {

package/dist/consistency.js

@@ -201,9 +201,11 @@ export function collectComponents(opts) {
         const variant = el.getAttribute('data-variant');
         const kind = g === 'button'
             ? `button:${variant ?? 'primary'}:${el.getAttribute('data-size') ?? 'md'}`
-            : variant
-                ? `${g}:${variant}`
-                : g;
+            : g === 'card'
+                ? `card:${variant ?? 'default'}:${el.getAttribute('data-layout') ?? 'default'}:${el.getAttribute('data-size') ?? 'default'}`
+                : variant
+                    ? `${g}:${variant}`
+                    : g;
         if (!(g === 'button' && el.hasAttribute('disabled')))
             add(kind, el);
     }
@@ -293,6 +295,11 @@ const NAMES = {
 };
 export const nameOf = (kind) => NAMES[kind]?.[0] ?? kind.replace(/:/g, ' ');
 const key = (s) => JSON.stringify(s.fields);
+// An icon/thumb-only control has no painted typography to compare with a
+// labelled example. Its geometry still matches, and two actual fonts must match.
+const differences = (a, b) => Object.keys({ ...a.fields, ...b.fields })
+    .filter((f) => !(f === 'font' && (!a.fields.font || !b.fields.font)) && a.fields[f] !== b.fields[f]);
+const matches = (a, b) => differences(a, b).length === 0;
 /** Issues for the screens in `paths`, comparing with every screen whose components are known. */
 export function consistencyIssues(known, paths) {
     const out = {};
@@ -306,7 +313,7 @@ export function consistencyIssues(known, paths) {
         const peers = (families.get(familyOf(path)) ?? []).filter((p) => p !== path);
         for (const [kind, sigs] of Object.entries(known[path] ?? {})) {
             // The catalog shows every variant of a component side by side; a screen shows one.
-            if (sigs.length > 1 && MEASURED.has(kind.split(':')[0]) && !catalogs.includes(path))
+            if (sigs.some((a, i) => sigs.slice(i + 1).some((b) => !matches(a, b))) && MEASURED.has(kind.split(':')[0]) && !catalogs.includes(path))
                 issues.push({
                     severity: 'warning',
                     type: 'consistency',
@@ -322,11 +329,10 @@ export function consistencyIssues(known, paths) {
                 continue;
             if (reference.length) {
                 const mine = sigs[0];
-                if (reference.some((r) => key(r) === key(mine)))
+                if (reference.some((r) => matches(r, mine)))
                     continue;
                 const ref = reference[0];
-                const diffs = Object.keys({ ...mine.fields, ...ref.fields })
-                    .filter((f) => mine.fields[f] !== ref.fields[f])
+                const diffs = differences(mine, ref)
                     .map((f) => `${f} ${mine.fields[f] ?? '–'} (catalog ${ref.fields[f] ?? '–'})`);
                 issues.push({
                     severity: 'warning',
@@ -354,7 +360,7 @@ export function consistencyIssues(known, paths) {
                 continue;
             // No majority: report when this screen matches none of its peers either.
             if (top.n < 2 || ranked[1]?.n === top.n) {
-                if (!votes.has(key(mine)) && peers.filter((p) => known[p]?.[kind]).length >= 2)
+                if (![...votes.values()].some((v) => matches(mine, v.sig)) && peers.filter((p) => known[p]?.[kind]).length >= 2)
                     issues.push({
                         severity: 'warning',
                         type: 'consistency',
@@ -364,10 +370,9 @@ export function consistencyIssues(known, paths) {
                     });
                 continue;
             }
-            if (key(mine) === key(top.sig))
+            if (matches(mine, top.sig))
                 continue;
-            const diffs = Object.keys({ ...mine.fields, ...top.sig.fields })
-                .filter((f) => mine.fields[f] !== top.sig.fields[f])
+            const diffs = differences(mine, top.sig)
                 .map((f) => `${f} ${mine.fields[f] ?? '–'} (others ${top.sig.fields[f] ?? '–'})`);
             issues.push({
                 severity: 'warning',

package/dist/states.js

@@ -140,7 +140,7 @@ export async function catalogStates(page, path, opts) {
         const noHover = looks.hover?.look === looks.rest?.look;
         // Pressed is forced on top of hover: a press that adds nothing to hover shows nothing on a touch screen.
         const noPress = looks.pressed?.look === looks.hover?.look;
-        if (!c.field && !c.chosen) {
+        if (c.clickable && !c.field && !c.chosen) {
             if (noHover && noPress)
                 add('state-feedback', who + ': neither hovering nor pressing changes it, so a pointer or a tap gives no feedback (DESIGN.md, hover and pressed)');
             else if (noHover)
@@ -148,6 +148,8 @@ export async function catalogStates(page, path, opts) {
             else if (noPress)
                 add('state-pressed', who + ': pressing adds nothing to hover, so a tap gives no feedback (DESIGN.md, pressed)');
         }
+        if (!c.clickable && !c.field && looks.focus?.look === looks.rest?.look)
+            add('state-focus', who + ': this keyboard-focusable region needs a visible focus indicator, not hover or pressed feedback');
         // The hand says "this does something" before the click; the arrow over a button reads as plain text.
         const cursor = looks.hover?.cursor;
         if (c.clickable && cursor && cursor !== 'pointer')

package/dist/typecheck.d.ts

@@ -31,6 +31,8 @@ export interface TextItem {
     upper: boolean;
     numeric: boolean;
     lines: number;
+    /** Literal code uses its language's case and monospace conventions, not UI labels. */
+    code?: boolean;
 }
 /** Runs in the page. Plain JS on purpose: Playwright sends its source to the browser. */
 export declare function collectText(): TextItem[];

package/dist/typecheck.js

@@ -66,9 +66,10 @@ export function collectText() {
             color: `#${hex(m[0])}${hex(m[1])}${hex(m[2])}${alpha < 0.99 ? ` ${Math.round(alpha * 100)}%` : ''}`,
             // Set in capitals: uppercased by CSS, or typed in capitals (6+ letters, so "RPE" and "PR" don't count).
             upper: cs.textTransform === 'uppercase' ||
-                (own === own.toUpperCase() && own.replace(/[^A-Z]/g, '').length >= 6),
+                (!el.closest('td, dd, output') && own === own.toUpperCase() && own.replace(/[^A-Z]/g, '').length >= 6),
             numeric: /^[\d\s.,:×x+\-−–/%]+[a-z]{0,4}$/i.test(own) && /\d/.test(own),
             lines,
+            code: Boolean(el.closest('pre, code')),
         });
     }
     return out;
@@ -97,7 +98,7 @@ export function typeIssues(levels, items) {
         out.push({ severity, type, message, selector: t.selector, text: t.text });
     };
     for (const t of items) {
-        if (levels.length && !matchLevel(levels, t)) {
+        if (!t.code && levels.length && !matchLevel(levels, t)) {
             const key = describe(t);
             if (!seen.has(key)) {
                 seen.add(key);
@@ -106,9 +107,9 @@ export function typeIssues(levels, items) {
         }
         if (t.lines > 1 && t.lineHeight < t.size * 1.15)
             push('error', 'type-leading', t, `Wrapped text with cramped line height (${Math.round(t.lineHeight)}px for ${t.size}px type)`);
-        if (t.upper && t.text.length > 2 && t.tracking < 0.03 * t.size)
+        if (!t.code && t.upper && t.text.length > 2 && t.tracking < 0.03 * t.size)
             push('warning', 'type-caps', t, 'Capitals without letter-spacing (use label-caps, +0.06em)');
-        if (t.mono && t.size >= 18 && /\d[.,:]\d/.test(t.text))
+        if (!t.code && t.mono && t.size >= 18 && /\d[.,:]\d/.test(t.text))
             push('warning', 'type-mono-number', t, 'Large number in a monospace font: its point, comma or colon gets a full-width gap; use Geist with tabular figures');
     }
     return out;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stitch2",
-  "version": "0.22.11",
+  "version": "0.22.12",
   "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/SKILL.md

@@ -57,6 +57,14 @@ References, read before the first screen:
    fixed bars, fixed bars overlapping each other, tap targets, contrast, cramped text), a hand-built copy of a
    catalog component (`reuse`: use the component or extend it, never rebuild it), and every warning about type
    (`type-*`), components that differ from the catalog (`consistency`) and colour values (`color`).
+   Native checkbox and radio targets include their visible, associated label; the glyph need not be 44px.
+   Hidden or noninteractive labels do not enlarge a hit area. Offscreen content in a deliberate horizontal
+   rail is not viewport clipping, while a partially visible cut label still needs correction.
+   Literal `<pre>`/`<code>` content keeps its language's case and syntax colours, not UI-label typography.
+   Native table-data, definition values and output values keep their supplied case too. Explicit CSS uppercase
+   and column headings still receive the caps-label tracking check.
+   The code container's own authored colours still follow DESIGN.md. Unchanged `source=app` captures are
+   not token-migration targets.
    Text running into other text (`text-overlap`) or out of its card (`overflow`) is an error; a short label cut
    short with an ellipsis (`truncated`) is a warning to fix with room, not a smaller size. Google's rules are
    warnings too (`text-small`, `edge-margin`, `measure`, `tap-spacing`, `placeholder-label`, `unnamed-control`,
@@ -78,11 +86,24 @@ References, read before the first screen:
    An empty, transparent stretched row/card action may sit under a secondary link; painted controls or
    partially colliding neighbours still fail. Do not silence an overlap by hiding content or removing its
    accessible label: inspect the visible state and fix actual collisions in the shared component.
+   Content-title controls may explicitly use `text-wrap: pretty` or `balance` when their full text fits
+   inside the control with readable line height. This does not exempt navigation, menus, tabs or toolbars,
+   clipped titles, or ordinary compact action labels. Do not shrink or truncate content to force one line.
    Inline links within a prose sentence may wrap and receive WCAG's inline-target exception, including
    sentences inside list items; standalone links do not. Titles in vertical contents/menu lists may wrap,
    unlike horizontal navigation labels. An in-page disclosure (`aria-expanded`, without `aria-haspopup`)
    may have a multiline heading when its height and padding fit the complete text. A text input's clear,
    reveal or list-toggle button may overlap only padding reserved for it, never the editable text area.
+   Such a geometrically contained action is one compound input, not a close neighbour for `tap-spacing`;
+   a button intruding into editable text or an unrelated adjacent control still fails the checks.
+   A transparent stretched row action below its own secondary link is not a competing touch target when
+   browser hit-testing proves that link is reachable; painted, blocking or merely adjacent controls still fail.
+   Fully clipped controls inside scrolling containers have no painted hit area until scrolled into view;
+   this does not exempt visible small controls or content merely below the window.
+   A partly scroll-clipped native choice label retains its full hit-area size only when the scrollport can
+   reveal the minimum target. Permanent clipping and scrollports too small to reveal it still fail.
+   Tooltip copy is reading text, not its trigger's compact label: it may wrap when visible and does not
+   create or hide a `label-wraps` issue on the trigger. The actual painted control label is still checked.
    Cached checks are invalidated when shared components, the catalog or the checker change. A filtered
    rerun refreshes only those screens; it must not make unrelated screens' older checks appear current.
    Motion warnings: `motion-token` (a transition length DESIGN.md doesn't name) and `reduced-motion` (something

package/skills/stitch2/references/components.md

@@ -45,7 +45,9 @@ clickable element that is not a button or a link gets `role="button"` (and a key
 it the hand. Override the cursor only with a reason (`cursor-grab` on a drag handle).
 
 The catalog shows each component in each of its **data states** (selected, done, active, disabled, error, with
-and without an icon). Hover, focus and pressed are not drawn by hand: `stitch2 check` on the catalog forces them on
+and without an icon). Keyboard-focusable reading or scrolling regions are not click actions and need no hover
+or pressed feedback, but must show a visible focus indicator (`state-focus`). Actual actions retain those checks.
+Hover, focus and pressed are not drawn by hand: `stitch2 check` on the catalog forces them on
 every control and writes the **States** sheet (canvas sidebar), each control at rest, hovered, focused and
 pressed side by side. It reports a control that gives no feedback (**state-feedback**, **state-hover**,
 **state-pressed**: pressing adds nothing to hover, so a tap shows nothing) and text that loses contrast in a state

package/skills/stitch2-consistency/SKILL.md

@@ -6,6 +6,8 @@ description: Verify that shared elements (tab bar, header, buttons, chips, icon
 # Verifying design consistency with stitch2
 
 A shared element must be the same everywhere: same size, radius, type, colour, icon set, icons and states.
+Declared card layout and size variants are compared separately: a horizontal row and a media showcase
+have different geometry by design. Each variant still has to match its own catalog reference or peers.
 stitch2 measures this; your job is to read the evidence, decide what is wrong, and fix it at the source. The
 reference is the **component catalog** (the screen in the config's `catalogDir`); without a catalog, the
 majority of screens in the same family.
@@ -28,6 +30,8 @@ majority of screens in the same family.
    - `reuse`: a lab screen built a catalog component by hand instead of using it.
 4. Look at the crops yourself. Numbers say what differs; the images say whether it matters. A 1 px height
    difference from a border is noise; another icon set, label size or button shape is not.
+   Font comparisons apply when both controls paint a label. An icon/thumb-only control has no label font;
+   its geometry remains checked, and genuine font differences between labelled controls still fail.
 
 ## 2. Decide, per difference