@hanzo/design 0.4.7 → 0.4.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/design",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "packageManager": "pnpm@11.17.0",
   "description": "Hanzo Design System \u2014 monochrome, dark-default tokens + components + brand assets, the single source of truth for every Hanzo surface. CSS + typed programmatic tokens.",
   "license": "MIT OR Apache-2.0",

package/scripts/check-tokens.mjs

@@ -140,6 +140,32 @@ const pass = (msg) => console.log(`  ok    ${msg}`)
     : fail('base.css is UNLAYERED — its element rules outrank every utility an app writes')
 }
 
+// ── 1d. a focused element gets exactly ONE indicator ─────────────────────
+// The field rule and the generic ring rule both compute to (0,1,0) — :where()
+// zeroes its contents and each side keeps one pseudo-class — so the cascade
+// falls through to SOURCE ORDER inside @layer base. The generic rule was
+// written later, so it overrode the `outline:none` that the field rule states
+// expressly to prevent it, and every focused input on every consumer drew the
+// 2px ring AND the edge+halo. Both rules read as correct in isolation; only
+// their order was wrong, which is why nobody saw it in either file.
+//
+// Order is not testable as intent, so this tests the property instead: a rule
+// that paints an outline on focus must not be able to land on a field.
+{
+  const base = strip(read(join(tokensDir, 'base.css')))
+  const FIELDS = 'input,select,textarea'
+  // `outline:none` disarms; anything else paints. `outline-offset` is a
+  // different property and never matches — the colon must follow `outline`.
+  const paints = (body) => /(?:^|[;{\s])outline\s*:\s*(?!none\b)[^;}]+/.test(body)
+  const scoped = (sel) => sel.includes(`:where(${FIELDS})`) || sel.includes(`:not(${FIELDS})`)
+  const doubled = [...base.matchAll(/([^{}]+)\{([^{}]*)\}/g)]
+    .map(([, sel, body]) => ({ sel: sel.trim().replace(/\s+/g, ' '), body }))
+    .filter(({ sel, body }) => sel.includes(':focus-visible') && paints(body) && !scoped(sel))
+  doubled.length
+    ? doubled.forEach(({ sel }) => fail(`\`${sel}\` paints an outline on a field that already draws its own edge + halo — two focus indicators`))
+    : pass('one focus indicator per element: fields brighten their edge, everything else rings')
+}
+
 // ── 2. every var() used inside the token layer must resolve ──────────────
 {
   const declared = new Set()

package/styles.css

@@ -838,8 +838,9 @@
      Not the generic ring. A field already HAS an edge, so focus brightens that
      edge (.15 -> .22) and adds a soft halo just outside it — which is what the
      reference does (.composer-box:focus-within) and what separates a focused
-     field from a browser default. The generic `outline` is suppressed here
-     precisely because it would draw a second, harder box around this one. */
+     field from a browser default. `outline:none` drops the UA's own focus ring,
+     which would otherwise draw a second, harder box around this one; the
+     generic ring below excludes fields for the same reason. */
   :where(input,select,textarea):focus-visible{
     outline:none;
     border-color:var(--border-focus);
@@ -886,7 +887,17 @@
     }
   }
 
-  :focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+  /* The generic ring — for everything that is NOT a field. The exclusion is
+     load-bearing, not tidiness. This rule and the control rule above both
+     compute to (0,1,0): :where() zeroes whatever it wraps, leaving one
+     pseudo-class on each side. Equal specificity inside one layer falls through
+     to source order, this rule sits 46 lines LATER, so it overrode the
+     `outline:none` written above to prevent precisely this — and every focused
+     input, select and textarea on every consumer drew BOTH the 2px ring and the
+     edge+halo. Two indicators, from the two rules that each say there is one.
+     Stating the exclusion in the selector fixes it by MEANING rather than by
+     position, so reordering either rule cannot bring it back. */
+  :where(:not(input,select,textarea)):focus-visible{outline:2px solid var(--ring);outline-offset:2px}
   /* --white-20 is white-on-white in the light theme, so selection reads through
      --selection, which BOTH themes define. */
   ::selection{background:var(--selection);color:var(--text-primary)}

package/tailwind.css

@@ -861,8 +861,9 @@
      Not the generic ring. A field already HAS an edge, so focus brightens that
      edge (.15 -> .22) and adds a soft halo just outside it — which is what the
      reference does (.composer-box:focus-within) and what separates a focused
-     field from a browser default. The generic `outline` is suppressed here
-     precisely because it would draw a second, harder box around this one. */
+     field from a browser default. `outline:none` drops the UA's own focus ring,
+     which would otherwise draw a second, harder box around this one; the
+     generic ring below excludes fields for the same reason. */
   :where(input,select,textarea):focus-visible{
     outline:none;
     border-color:var(--border-focus);
@@ -909,7 +910,17 @@
     }
   }
 
-  :focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+  /* The generic ring — for everything that is NOT a field. The exclusion is
+     load-bearing, not tidiness. This rule and the control rule above both
+     compute to (0,1,0): :where() zeroes whatever it wraps, leaving one
+     pseudo-class on each side. Equal specificity inside one layer falls through
+     to source order, this rule sits 46 lines LATER, so it overrode the
+     `outline:none` written above to prevent precisely this — and every focused
+     input, select and textarea on every consumer drew BOTH the 2px ring and the
+     edge+halo. Two indicators, from the two rules that each say there is one.
+     Stating the exclusion in the selector fixes it by MEANING rather than by
+     position, so reordering either rule cannot bring it back. */
+  :where(:not(input,select,textarea)):focus-visible{outline:2px solid var(--ring);outline-offset:2px}
   /* --white-20 is white-on-white in the light theme, so selection reads through
      --selection, which BOTH themes define. */
   ::selection{background:var(--selection);color:var(--text-primary)}

package/tokens/base.css

@@ -103,8 +103,9 @@
      Not the generic ring. A field already HAS an edge, so focus brightens that
      edge (.15 -> .22) and adds a soft halo just outside it — which is what the
      reference does (.composer-box:focus-within) and what separates a focused
-     field from a browser default. The generic `outline` is suppressed here
-     precisely because it would draw a second, harder box around this one. */
+     field from a browser default. `outline:none` drops the UA's own focus ring,
+     which would otherwise draw a second, harder box around this one; the
+     generic ring below excludes fields for the same reason. */
   :where(input,select,textarea):focus-visible{
     outline:none;
     border-color:var(--border-focus);
@@ -151,7 +152,17 @@
     }
   }
 
-  :focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+  /* The generic ring — for everything that is NOT a field. The exclusion is
+     load-bearing, not tidiness. This rule and the control rule above both
+     compute to (0,1,0): :where() zeroes whatever it wraps, leaving one
+     pseudo-class on each side. Equal specificity inside one layer falls through
+     to source order, this rule sits 46 lines LATER, so it overrode the
+     `outline:none` written above to prevent precisely this — and every focused
+     input, select and textarea on every consumer drew BOTH the 2px ring and the
+     edge+halo. Two indicators, from the two rules that each say there is one.
+     Stating the exclusion in the selector fixes it by MEANING rather than by
+     position, so reordering either rule cannot bring it back. */
+  :where(:not(input,select,textarea)):focus-visible{outline:2px solid var(--ring);outline-offset:2px}
   /* --white-20 is white-on-white in the light theme, so selection reads through
      --selection, which BOTH themes define. */
   ::selection{background:var(--selection);color:var(--text-primary)}