@hanzo/design 0.5.15 → 0.5.16

package/dist/tokens.gen.d.ts

@@ -304,7 +304,9 @@ export declare const fonts: {
     readonly 'font-feature-settings': "\"ss01\",\"ss02\",\"cv01\",\"cv02\",\"cv03\"";
 };
 /** base tokens (from tokens/base.css). Values are raw CSS. */
-export declare const base: {};
+export declare const base: {
+    readonly 'ring-offset': "-2px";
+};
 /** Every token, keyed by its literal CSS custom-property name ('--background', …). */
 export declare const cssVars: {
     readonly '--neutral-50': "#FAFAFA";
@@ -585,6 +587,7 @@ export declare const cssVars: {
     readonly '--font-mono': "\"Geist Mono\",ui-monospace,SFMono-Regular,monospace";
     readonly '--font-serif': "Georgia,serif";
     readonly '--font-feature-settings': "\"ss01\",\"ss02\",\"cv01\",\"cv02\",\"cv03\"";
+    readonly '--ring-offset': "-2px";
 };
 export type CssVarName = keyof typeof cssVars;
 //# sourceMappingURL=tokens.gen.d.ts.map

package/dist/tokens.gen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.gen.d.ts","sourceRoot":"","sources":["../src/tokens.gen.ts"],"names":[],"mappings":"AAIA,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FT,CAAA;AAEV,0EAA0E;AAC1E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEb,CAAA;AAEV,oEAAoE;AACpE,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CV,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYP,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAA;AAEV,wEAAwE;AACxE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BZ,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAA;AAEV,6DAA6D;AAC7D,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYT,CAAA;AAEV,gEAAgE;AAChE,eAAO,MAAM,KAAK;;;;;;CAMR,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI,IAEP,CAAA;AAEV,sFAAsF;AACtF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuRV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAA"}
+{"version":3,"file":"tokens.gen.d.ts","sourceRoot":"","sources":["../src/tokens.gen.ts"],"names":[],"mappings":"AAIA,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FT,CAAA;AAEV,0EAA0E;AAC1E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEb,CAAA;AAEV,oEAAoE;AACpE,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CV,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYP,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAA;AAEV,wEAAwE;AACxE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BZ,CAAA;AAEV,kEAAkE;AAClE,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAA;AAEV,6DAA6D;AAC7D,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYT,CAAA;AAEV,gEAAgE;AAChE,eAAO,MAAM,KAAK;;;;;;CAMR,CAAA;AAEV,8DAA8D;AAC9D,eAAO,MAAM,IAAI;;CAEP,CAAA;AAEV,sFAAsF;AACtF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwRV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAA"}

package/dist/tokens.gen.js

@@ -307,7 +307,9 @@ export const fonts = {
     'font-feature-settings': '"ss01","ss02","cv01","cv02","cv03"',
 };
 /** base tokens (from tokens/base.css). Values are raw CSS. */
-export const base = {};
+export const base = {
+    'ring-offset': '-2px',
+};
 /** Every token, keyed by its literal CSS custom-property name ('--background', …). */
 export const cssVars = {
     '--neutral-50': '#FAFAFA',
@@ -588,4 +590,5 @@ export const cssVars = {
     '--font-mono': '"Geist Mono",ui-monospace,SFMono-Regular,monospace',
     '--font-serif': 'Georgia,serif',
     '--font-feature-settings': '"ss01","ss02","cv01","cv02","cv03"',
+    '--ring-offset': '-2px',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/design",
-  "version": "0.5.15",
+  "version": "0.5.16",
   "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/src/tokens.gen.ts

@@ -318,7 +318,7 @@ export const fonts = {
 
 /** base tokens (from tokens/base.css). Values are raw CSS. */
 export const base = {
-
+  'ring-offset': '-2px',
 } as const
 
 /** Every token, keyed by its literal CSS custom-property name ('--background', …). */
@@ -601,6 +601,7 @@ export const cssVars = {
   '--font-mono': '"Geist Mono",ui-monospace,SFMono-Regular,monospace',
   '--font-serif': 'Georgia,serif',
   '--font-feature-settings': '"ss01","ss02","cv01","cv02","cv03"',
+  '--ring-offset': '-2px',
 } as const
 
 export type CssVarName = keyof typeof cssVars

package/styles.css

@@ -979,6 +979,22 @@
        its buttons at 8-10px and nothing at 6px except 22px chips. */
     border-radius:var(--radius-md);
     padding:0 var(--space-3);
+    /* A field's ring is drawn INSIDE its own box. The one focus rule below
+       reads this; nothing else about the indicator changes.
+
+       A field lives in containers a button does not — composers, palettes and
+       panels that round their corners with `overflow:hidden`. An outline at a
+       POSITIVE offset is painted outside the border box, so any such ancestor
+       clips it, and the computed style still says `2px solid` while nothing is
+       drawn: a chat composer measured byte-identical screenshots focused and
+       unfocused, and a search pill kept only its left and right edges. A
+       negative offset cannot be clipped by anything, so a field needs to know
+       nothing about what contains it.
+
+       -2 against a 2px ring lays the outline over the outermost 2px of the box,
+       so it REPLACES the 1px edge for as long as focus is there rather than
+       drawing a second line a pixel inside the first. */
+    --ring-offset:-2px;
   }
   :where(textarea){padding:var(--space-2) var(--space-3);resize:vertical}
   /* A field has NO focus rule of its own — see the ring at the bottom of this
@@ -1045,6 +1061,11 @@
      canvas and clears the 2px perimeter WCAG 2.4.13 asks for; the gate in
      check-tokens holds --ring to that and nothing else here may weaken it.
 
+     WHERE the ring sits is the one thing that varies, and it varies as a VALUE
+     the element carries, never as a second rule: `--ring-offset` defaults to 2
+     and a field sets it to -2 (see the field block above). Two rules is what
+     0.4.9 removed, and a second one here would be the same defect again.
+
      There were two rules until 0.4.9, and they collided invisibly. Both computed
      to (0,1,0) — :where() zeroes whatever it wraps, leaving one pseudo-class on
      each side — so the cascade fell through to SOURCE ORDER inside this layer,
@@ -1053,7 +1074,7 @@
      drew BOTH the ring and the edge+halo. Each rule read as correct alone, which
      is why it survived review in both files; the defect existed only in their
      order. One rule cannot disagree with itself. */
-  :focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+  :focus-visible{outline:2px solid var(--ring);outline-offset:var(--ring-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

@@ -1002,6 +1002,22 @@
        its buttons at 8-10px and nothing at 6px except 22px chips. */
     border-radius:var(--radius-md);
     padding:0 var(--space-3);
+    /* A field's ring is drawn INSIDE its own box. The one focus rule below
+       reads this; nothing else about the indicator changes.
+
+       A field lives in containers a button does not — composers, palettes and
+       panels that round their corners with `overflow:hidden`. An outline at a
+       POSITIVE offset is painted outside the border box, so any such ancestor
+       clips it, and the computed style still says `2px solid` while nothing is
+       drawn: a chat composer measured byte-identical screenshots focused and
+       unfocused, and a search pill kept only its left and right edges. A
+       negative offset cannot be clipped by anything, so a field needs to know
+       nothing about what contains it.
+
+       -2 against a 2px ring lays the outline over the outermost 2px of the box,
+       so it REPLACES the 1px edge for as long as focus is there rather than
+       drawing a second line a pixel inside the first. */
+    --ring-offset:-2px;
   }
   :where(textarea){padding:var(--space-2) var(--space-3);resize:vertical}
   /* A field has NO focus rule of its own — see the ring at the bottom of this
@@ -1068,6 +1084,11 @@
      canvas and clears the 2px perimeter WCAG 2.4.13 asks for; the gate in
      check-tokens holds --ring to that and nothing else here may weaken it.
 
+     WHERE the ring sits is the one thing that varies, and it varies as a VALUE
+     the element carries, never as a second rule: `--ring-offset` defaults to 2
+     and a field sets it to -2 (see the field block above). Two rules is what
+     0.4.9 removed, and a second one here would be the same defect again.
+
      There were two rules until 0.4.9, and they collided invisibly. Both computed
      to (0,1,0) — :where() zeroes whatever it wraps, leaving one pseudo-class on
      each side — so the cascade fell through to SOURCE ORDER inside this layer,
@@ -1076,7 +1097,7 @@
      drew BOTH the ring and the edge+halo. Each rule read as correct alone, which
      is why it survived review in both files; the defect existed only in their
      order. One rule cannot disagree with itself. */
-  :focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+  :focus-visible{outline:2px solid var(--ring);outline-offset:var(--ring-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

@@ -97,6 +97,22 @@
        its buttons at 8-10px and nothing at 6px except 22px chips. */
     border-radius:var(--radius-md);
     padding:0 var(--space-3);
+    /* A field's ring is drawn INSIDE its own box. The one focus rule below
+       reads this; nothing else about the indicator changes.
+
+       A field lives in containers a button does not — composers, palettes and
+       panels that round their corners with `overflow:hidden`. An outline at a
+       POSITIVE offset is painted outside the border box, so any such ancestor
+       clips it, and the computed style still says `2px solid` while nothing is
+       drawn: a chat composer measured byte-identical screenshots focused and
+       unfocused, and a search pill kept only its left and right edges. A
+       negative offset cannot be clipped by anything, so a field needs to know
+       nothing about what contains it.
+
+       -2 against a 2px ring lays the outline over the outermost 2px of the box,
+       so it REPLACES the 1px edge for as long as focus is there rather than
+       drawing a second line a pixel inside the first. */
+    --ring-offset:-2px;
   }
   :where(textarea){padding:var(--space-2) var(--space-3);resize:vertical}
   /* A field has NO focus rule of its own — see the ring at the bottom of this
@@ -163,6 +179,11 @@
      canvas and clears the 2px perimeter WCAG 2.4.13 asks for; the gate in
      check-tokens holds --ring to that and nothing else here may weaken it.
 
+     WHERE the ring sits is the one thing that varies, and it varies as a VALUE
+     the element carries, never as a second rule: `--ring-offset` defaults to 2
+     and a field sets it to -2 (see the field block above). Two rules is what
+     0.4.9 removed, and a second one here would be the same defect again.
+
      There were two rules until 0.4.9, and they collided invisibly. Both computed
      to (0,1,0) — :where() zeroes whatever it wraps, leaving one pseudo-class on
      each side — so the cascade fell through to SOURCE ORDER inside this layer,
@@ -171,7 +192,7 @@
      drew BOTH the ring and the edge+halo. Each rule read as correct alone, which
      is why it survived review in both files; the defect existed only in their
      order. One rule cannot disagree with itself. */
-  :focus-visible{outline:2px solid var(--ring);outline-offset:2px}
+  :focus-visible{outline:2px solid var(--ring);outline-offset:var(--ring-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)}