@hanzo/ui 8.27.2 → 8.27.4

package/dist/styles.css

@@ -1368,7 +1368,7 @@
 .hz-prose > h1, .hz-prose > h2, .hz-prose > h3,
 .hz-prose > h4, .hz-prose > h5, .hz-prose > h6 {
   font-family: var(--font-display, var(--font-sans)), sans-serif;
-  font-weight: 600;
+  font-weight: 606;
   line-height: var(--leading-tight);
   letter-spacing: var(--tracking-tight);
   margin: 0;
@@ -1384,7 +1384,7 @@
    stack. */
 .hz-prose > h6 {
   font-size: var(--text-base);
-  font-weight: 400;
+  font-weight: 497;
   color: var(--muted-foreground);
 }
 
@@ -1432,7 +1432,7 @@
   font-size: 0.9em;
 }
 .hz-prose a { color: inherit; text-decoration: underline }
-.hz-prose strong { font-weight: 600 }
+.hz-prose strong { font-weight: 606 }
 .hz-prose :where(img, video) { max-width: 100%; height: auto }
 
 /* The named rungs. `responsive` is the default and is the only one that moves
@@ -1997,6 +1997,37 @@
   }
 }
 
+/* FOCUS RINGS THE CONTROL A PERSON SEES, WHICH IS THE WHOLE COMPOSER.
+
+   `Composer` is a bordered box holding a field above a toolbar row, so it reads
+   as one control the way a chat composer everywhere does. The field inside it is
+   an ordinary textarea, so the indicator was drawn round the field alone: a
+   second rounded rectangle nested inside the box, stopping above the mic and the
+   send button, which reads as the top half being selected. WCAG 2.4.11 asks the
+   indicator to enclose the control, and the control here is the composer.
+
+   THE FIELD DOES NOT ABSTAIN, and control.ts is right that it must not: gui
+   compiles `focusVisibleStyle` to `:root:root:root:root … !important`, past any
+   sheet, so a field that says `outlineWidth: 0` deletes the indicator on every
+   surface at once. What gui declares is `outline-color: var(--outlineColor)` —
+   a VARIABLE — so the colour is re-pointed for this one field instead, in the
+   same breath as the host taking the ring up. The declaration gui emits is
+   untouched and `focus.test.tsx` still reads it.
+
+   Both rules turn on the SAME condition, which is what makes it safe: where
+   `:has` is unsupported neither applies and the field keeps drawing its own
+   ring, so no browser reaches a state with a focused composer and no indicator
+   anywhere. */
+[data-slot='composer']:has([data-slot='composer-field']:focus-visible) {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+[data-slot='composer']:has([data-slot='composer-field']:focus-visible)
+  [data-slot='composer-field'] {
+  --outlineColor: transparent;
+}
+
 [stylesheet-group="0"]{}
 body{margin:0;}
 button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}

package/dist/theme.css

@@ -1366,7 +1366,7 @@
 .hz-prose > h1, .hz-prose > h2, .hz-prose > h3,
 .hz-prose > h4, .hz-prose > h5, .hz-prose > h6 {
   font-family: var(--font-display, var(--font-sans)), sans-serif;
-  font-weight: 600;
+  font-weight: 606;
   line-height: var(--leading-tight);
   letter-spacing: var(--tracking-tight);
   margin: 0;
@@ -1382,7 +1382,7 @@
    stack. */
 .hz-prose > h6 {
   font-size: var(--text-base);
-  font-weight: 400;
+  font-weight: 497;
   color: var(--muted-foreground);
 }
 
@@ -1430,7 +1430,7 @@
   font-size: 0.9em;
 }
 .hz-prose a { color: inherit; text-decoration: underline }
-.hz-prose strong { font-weight: 600 }
+.hz-prose strong { font-weight: 606 }
 .hz-prose :where(img, video) { max-width: 100%; height: auto }
 
 /* The named rungs. `responsive` is the default and is the only one that moves
@@ -1994,3 +1994,34 @@
     animation: none;
   }
 }
+
+/* FOCUS RINGS THE CONTROL A PERSON SEES, WHICH IS THE WHOLE COMPOSER.
+
+   `Composer` is a bordered box holding a field above a toolbar row, so it reads
+   as one control the way a chat composer everywhere does. The field inside it is
+   an ordinary textarea, so the indicator was drawn round the field alone: a
+   second rounded rectangle nested inside the box, stopping above the mic and the
+   send button, which reads as the top half being selected. WCAG 2.4.11 asks the
+   indicator to enclose the control, and the control here is the composer.
+
+   THE FIELD DOES NOT ABSTAIN, and control.ts is right that it must not: gui
+   compiles `focusVisibleStyle` to `:root:root:root:root … !important`, past any
+   sheet, so a field that says `outlineWidth: 0` deletes the indicator on every
+   surface at once. What gui declares is `outline-color: var(--outlineColor)` —
+   a VARIABLE — so the colour is re-pointed for this one field instead, in the
+   same breath as the host taking the ring up. The declaration gui emits is
+   untouched and `focus.test.tsx` still reads it.
+
+   Both rules turn on the SAME condition, which is what makes it safe: where
+   `:has` is unsupported neither applies and the field keeps drawing its own
+   ring, so no browser reaches a state with a focused composer and no indicator
+   anywhere. */
+[data-slot='composer']:has([data-slot='composer-field']:focus-visible) {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+[data-slot='composer']:has([data-slot='composer-field']:focus-visible)
+  [data-slot='composer-field'] {
+  --outlineColor: transparent;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.27.2",
+  "version": "8.27.4",
   "type": "module",
   "description": "Hanzo UI — the one canonical Hanzo component library, on @hanzo/gui + @hanzo/design. ONE substrate: every component renders through @hanzo/gui primitives, so the same import works on web, native (expo) and desktop (Tauri). Self-contained (theme.css), presentational, host-agnostic, clean-room.",
   "exports": {
@@ -39,6 +39,12 @@
       "require": "./dist/chat/index.cjs",
       "default": "./dist/chat/index.js"
     },
+    "./backdrop": {
+      "types": "./dist/backdrop/index.d.ts",
+      "import": "./dist/backdrop/index.js",
+      "require": "./dist/backdrop/index.cjs",
+      "default": "./dist/backdrop/index.js"
+    },
     "./chat/pure": {
       "types": "./dist/chat/pure.d.ts",
       "import": "./dist/chat/pure.js",