@hanzo/ui 8.1.20 → 8.1.21

package/dist/gallery.html

@@ -1,4 +1,4 @@
-<!doctype html><html lang="en" class="t_dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>@hanzo/ui 8.1.20</title><style>/* @hanzo/ui — generated by scripts/gen-css.mjs. Do not edit. */
+<!doctype html><html lang="en" class="t_dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>@hanzo/ui 8.1.21</title><style>/* @hanzo/ui — generated by scripts/gen-css.mjs. Do not edit. */
 :root { --hanzo-ui-styles: 1; }
 /* Hanzo Design System — the entry point. Import THIS one file.
  *
@@ -1957,24 +1957,34 @@
 /* ─────────────────────────────────────────────────────────────────────────────
    Scrollbars, on the surfaces this package scrolls.
 
-   A scroll region is a component decision, so its scrollbar is one too. Left to
-   the platform it is not neutral: on Linux/GTK Chrome draws a wide track with
-   STEPPER ARROWS at both ends, and a dark product grows two grey buttons per
-   scroll region — visible in chat's thread, its source strip and the composer at
-   the same time. Windows draws a wide light track. macOS overlays a thin one and
-   hides it, which is the behaviour the other two should have had.
-
-   So the package states it, and states it ONCE, for the five slots that actually
-   scroll (measured, not guessed: textarea, fill, thread, sources-strip,
-   composer-field). Scoping to our own slots is the point — a component library
-   restyling the HOST's page scrollbars is taking a decision that is not its own.
-
-   `::-webkit-scrollbar-button { display: none }` is the line that removes the
-   steppers; without it the arrows survive every other rule here. The thumb sits
-   on the same alpha ladder as every other edge, so it lifts with its surface
-   instead of being a fixed grey that only suits one theme.
+   Left to the platform this is not neutral: Linux/GTK Chrome draws a wide track
+   with STEPPER ARROWS at both ends, so a dark product grows two grey buttons per
+   scroll region. Windows draws a wide light track. macOS overlays a thin one,
+   which is the behaviour the other two should have had.
+
+   THE TWO HALVES MUST NOT BE DECLARED TOGETHER, and that is the whole subtlety.
+   Chromium supports both the standard properties and the `::-webkit-scrollbar`
+   pseudo-elements — but the moment `scrollbar-width` or `scrollbar-color` is
+   anything other than `auto`, it takes the standard path and DISCARDS the entire
+   webkit block. Shipping both is how 8.1.19 removed nothing: measured headed on
+   Linux, as-shipped gave a 10px gutter with arrows, while the authored webkit
+   rule alone gives 8px with none. Isolated: webkit-only 8px no arrows;
+   standard-only 10px arrows; both together 10px arrows.
+
+   Neither half is redundant, so neither can simply be deleted — Firefox
+   implements ONLY the standard properties, Safari ONLY the webkit ones. They are
+   separated by engine instead: the webkit block applies wherever the selector is
+   understood, and the standard properties apply only where it is not.
+
+   And it is invisible headless. Chromium's headless shell paints OVERLAY
+   scrollbars, so nothing is drawn, `offsetWidth - clientWidth` is 0 on a blank
+   page, and `getComputedStyle(el, '::-webkit-scrollbar-button').display` happily
+   reports `none` for a rule that never ran. This must be checked headed.
    ───────────────────────────────────────────────────────────────────────────── */
-:where(
+
+/* Firefox and anything else with no webkit pseudo-elements. */
+@supports not selector(::-webkit-scrollbar) {
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -1983,12 +1993,44 @@
   [data-slot='textarea'],
   [data-slot='composer-field']
 ) {
-  /* Firefox — no pseudo-elements, two properties, same intent. */
-  scrollbar-width: thin;
-  scrollbar-color: rgb(255 255 255 / 0.18) transparent;
-}
+    scrollbar-width: thin;
+    scrollbar-color: rgb(255 255 255 / 0.18) transparent;
+  }
+  .t_light :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+) { scrollbar-color: rgb(0 0 0 / 0.20) transparent; }
+}
+
+/* Chromium and Safari.
+   The first rule is the load-bearing one and it is a RESET, not a style.
+   @hanzo/design sets `scrollbar-color` and `scrollbar-width` on `:where(html)`
+   (theme.css), and both INHERIT — so every element in the document already
+   carries a non-`auto` value, Chromium takes the standard path, and the whole
+   webkit block below is discarded before it is read. Nothing declared here can
+   win until the inherited value is put back to `auto` on the element itself.
+   That is why the arrows survived 8.1.19: the competing declaration was one
+   level up and inherited, not a rule anyone would find in this file. */
+@supports selector(::-webkit-scrollbar) {
+  :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+) {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
 
-:where(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -1996,13 +2038,11 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
+)::-webkit-scrollbar { width: 8px; height: 8px; }
 
-/* The steppers. This is the rule that removes the arrows. */
-:where(
+  /* The steppers. This is the rule that removes the arrows, and the reason the
+     two halves had to be separated at all. */
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2010,13 +2050,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar-button {
-  display: none;
-  width: 0;
-  height: 0;
-}
+)::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
 
-:where(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2024,11 +2060,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar-track {
-  background: transparent;
-}
+)::-webkit-scrollbar-track { background: transparent; }
 
-:where(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2037,16 +2071,15 @@
   [data-slot='textarea'],
   [data-slot='composer-field']
 )::-webkit-scrollbar-thumb {
-  background: rgb(255 255 255 / 0.18);
-  border-radius: 999px;
-  /* A transparent border with background-clip keeps the thumb off the very edge
-     without a track colour doing it, which is what makes it read as an overlay
-     rather than a channel. */
-  border: 2px solid transparent;
-  background-clip: content-box;
-}
-
-:where(
+    background: rgb(255 255 255 / 0.18);
+    border-radius: 999px;
+    /* A transparent border with background-clip keeps the thumb off the very
+       edge without a track colour doing it, so it reads as an overlay rather
+       than a channel. */
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2055,12 +2088,10 @@
   [data-slot='textarea'],
   [data-slot='composer-field']
 )::-webkit-scrollbar-thumb:hover {
-  background: rgb(255 255 255 / 0.30);
-  background-clip: content-box;
-}
-
-/* The light theme reads the same ladder from the other side. */
-.t_light :where(
+    background: rgb(255 255 255 / 0.30);
+    background-clip: content-box;
+  }
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2068,11 +2099,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-) {
-  scrollbar-color: rgb(0 0 0 / 0.20) transparent;
-}
+)::-webkit-scrollbar-corner { background: transparent; }
 
-.t_light :where(
+  .t_light :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2081,17 +2110,15 @@
   [data-slot='textarea'],
   [data-slot='composer-field']
 )::-webkit-scrollbar-thumb {
-  background: rgb(0 0 0 / 0.20);
-  background-clip: content-box;
+    background: rgb(0 0 0 / 0.20);
+    background-clip: content-box;
+  }
 }
 
 /* The textarea's resize grip is the other platform artefact in the same family:
-   a diagonal hatch in the corner of every Textarea and composer, drawn by the UA
-   and matching nothing. A composer that grows with its content does not need a
-   drag handle, and one that does not grow should not offer a broken one. */
-:where([data-slot='textarea'], [data-slot='composer-field']) {
-  resize: none;
-}
+   a diagonal hatch drawn by the UA that matches nothing. A composer that grows
+   with its content does not need one. */
+:where([data-slot='textarea'], [data-slot='composer-field']) { resize: none; }
 
 ._ovs-contain {overscroll-behavior:contain;}
 .t_unmounted .is_View, .t_unmounted .is_Text { transition: none !important; }

package/dist/styles/motion.css

@@ -269,24 +269,34 @@
 /* ─────────────────────────────────────────────────────────────────────────────
    Scrollbars, on the surfaces this package scrolls.
 
-   A scroll region is a component decision, so its scrollbar is one too. Left to
-   the platform it is not neutral: on Linux/GTK Chrome draws a wide track with
-   STEPPER ARROWS at both ends, and a dark product grows two grey buttons per
-   scroll region — visible in chat's thread, its source strip and the composer at
-   the same time. Windows draws a wide light track. macOS overlays a thin one and
-   hides it, which is the behaviour the other two should have had.
-
-   So the package states it, and states it ONCE, for the five slots that actually
-   scroll (measured, not guessed: textarea, fill, thread, sources-strip,
-   composer-field). Scoping to our own slots is the point — a component library
-   restyling the HOST's page scrollbars is taking a decision that is not its own.
-
-   `::-webkit-scrollbar-button { display: none }` is the line that removes the
-   steppers; without it the arrows survive every other rule here. The thumb sits
-   on the same alpha ladder as every other edge, so it lifts with its surface
-   instead of being a fixed grey that only suits one theme.
+   Left to the platform this is not neutral: Linux/GTK Chrome draws a wide track
+   with STEPPER ARROWS at both ends, so a dark product grows two grey buttons per
+   scroll region. Windows draws a wide light track. macOS overlays a thin one,
+   which is the behaviour the other two should have had.
+
+   THE TWO HALVES MUST NOT BE DECLARED TOGETHER, and that is the whole subtlety.
+   Chromium supports both the standard properties and the `::-webkit-scrollbar`
+   pseudo-elements — but the moment `scrollbar-width` or `scrollbar-color` is
+   anything other than `auto`, it takes the standard path and DISCARDS the entire
+   webkit block. Shipping both is how 8.1.19 removed nothing: measured headed on
+   Linux, as-shipped gave a 10px gutter with arrows, while the authored webkit
+   rule alone gives 8px with none. Isolated: webkit-only 8px no arrows;
+   standard-only 10px arrows; both together 10px arrows.
+
+   Neither half is redundant, so neither can simply be deleted — Firefox
+   implements ONLY the standard properties, Safari ONLY the webkit ones. They are
+   separated by engine instead: the webkit block applies wherever the selector is
+   understood, and the standard properties apply only where it is not.
+
+   And it is invisible headless. Chromium's headless shell paints OVERLAY
+   scrollbars, so nothing is drawn, `offsetWidth - clientWidth` is 0 on a blank
+   page, and `getComputedStyle(el, '::-webkit-scrollbar-button').display` happily
+   reports `none` for a rule that never ran. This must be checked headed.
    ───────────────────────────────────────────────────────────────────────────── */
-:where(
+
+/* Firefox and anything else with no webkit pseudo-elements. */
+@supports not selector(::-webkit-scrollbar) {
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -295,12 +305,44 @@
   [data-slot='textarea'],
   [data-slot='composer-field']
 ) {
-  /* Firefox — no pseudo-elements, two properties, same intent. */
-  scrollbar-width: thin;
-  scrollbar-color: rgb(255 255 255 / 0.18) transparent;
-}
+    scrollbar-width: thin;
+    scrollbar-color: rgb(255 255 255 / 0.18) transparent;
+  }
+  .t_light :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+) { scrollbar-color: rgb(0 0 0 / 0.20) transparent; }
+}
+
+/* Chromium and Safari.
+   The first rule is the load-bearing one and it is a RESET, not a style.
+   @hanzo/design sets `scrollbar-color` and `scrollbar-width` on `:where(html)`
+   (theme.css), and both INHERIT — so every element in the document already
+   carries a non-`auto` value, Chromium takes the standard path, and the whole
+   webkit block below is discarded before it is read. Nothing declared here can
+   win until the inherited value is put back to `auto` on the element itself.
+   That is why the arrows survived 8.1.19: the competing declaration was one
+   level up and inherited, not a rule anyone would find in this file. */
+@supports selector(::-webkit-scrollbar) {
+  :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+) {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
 
-:where(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -308,13 +350,11 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
+)::-webkit-scrollbar { width: 8px; height: 8px; }
 
-/* The steppers. This is the rule that removes the arrows. */
-:where(
+  /* The steppers. This is the rule that removes the arrows, and the reason the
+     two halves had to be separated at all. */
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -322,13 +362,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar-button {
-  display: none;
-  width: 0;
-  height: 0;
-}
+)::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
 
-:where(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -336,11 +372,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar-track {
-  background: transparent;
-}
+)::-webkit-scrollbar-track { background: transparent; }
 
-:where(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -349,16 +383,15 @@
   [data-slot='textarea'],
   [data-slot='composer-field']
 )::-webkit-scrollbar-thumb {
-  background: rgb(255 255 255 / 0.18);
-  border-radius: 999px;
-  /* A transparent border with background-clip keeps the thumb off the very edge
-     without a track colour doing it, which is what makes it read as an overlay
-     rather than a channel. */
-  border: 2px solid transparent;
-  background-clip: content-box;
-}
-
-:where(
+    background: rgb(255 255 255 / 0.18);
+    border-radius: 999px;
+    /* A transparent border with background-clip keeps the thumb off the very
+       edge without a track colour doing it, so it reads as an overlay rather
+       than a channel. */
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -367,12 +400,10 @@
   [data-slot='textarea'],
   [data-slot='composer-field']
 )::-webkit-scrollbar-thumb:hover {
-  background: rgb(255 255 255 / 0.30);
-  background-clip: content-box;
-}
-
-/* The light theme reads the same ladder from the other side. */
-.t_light :where(
+    background: rgb(255 255 255 / 0.30);
+    background-clip: content-box;
+  }
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -380,11 +411,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-) {
-  scrollbar-color: rgb(0 0 0 / 0.20) transparent;
-}
+)::-webkit-scrollbar-corner { background: transparent; }
 
-.t_light :where(
+  .t_light :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -393,14 +422,12 @@
   [data-slot='textarea'],
   [data-slot='composer-field']
 )::-webkit-scrollbar-thumb {
-  background: rgb(0 0 0 / 0.20);
-  background-clip: content-box;
+    background: rgb(0 0 0 / 0.20);
+    background-clip: content-box;
+  }
 }
 
 /* The textarea's resize grip is the other platform artefact in the same family:
-   a diagonal hatch in the corner of every Textarea and composer, drawn by the UA
-   and matching nothing. A composer that grows with its content does not need a
-   drag handle, and one that does not grow should not offer a broken one. */
-:where([data-slot='textarea'], [data-slot='composer-field']) {
-  resize: none;
-}
+   a diagonal hatch drawn by the UA that matches nothing. A composer that grows
+   with its content does not need one. */
+:where([data-slot='textarea'], [data-slot='composer-field']) { resize: none; }

package/dist/styles.css

@@ -1957,24 +1957,34 @@
 /* ─────────────────────────────────────────────────────────────────────────────
    Scrollbars, on the surfaces this package scrolls.
 
-   A scroll region is a component decision, so its scrollbar is one too. Left to
-   the platform it is not neutral: on Linux/GTK Chrome draws a wide track with
-   STEPPER ARROWS at both ends, and a dark product grows two grey buttons per
-   scroll region — visible in chat's thread, its source strip and the composer at
-   the same time. Windows draws a wide light track. macOS overlays a thin one and
-   hides it, which is the behaviour the other two should have had.
-
-   So the package states it, and states it ONCE, for the five slots that actually
-   scroll (measured, not guessed: textarea, fill, thread, sources-strip,
-   composer-field). Scoping to our own slots is the point — a component library
-   restyling the HOST's page scrollbars is taking a decision that is not its own.
-
-   `::-webkit-scrollbar-button { display: none }` is the line that removes the
-   steppers; without it the arrows survive every other rule here. The thumb sits
-   on the same alpha ladder as every other edge, so it lifts with its surface
-   instead of being a fixed grey that only suits one theme.
+   Left to the platform this is not neutral: Linux/GTK Chrome draws a wide track
+   with STEPPER ARROWS at both ends, so a dark product grows two grey buttons per
+   scroll region. Windows draws a wide light track. macOS overlays a thin one,
+   which is the behaviour the other two should have had.
+
+   THE TWO HALVES MUST NOT BE DECLARED TOGETHER, and that is the whole subtlety.
+   Chromium supports both the standard properties and the `::-webkit-scrollbar`
+   pseudo-elements — but the moment `scrollbar-width` or `scrollbar-color` is
+   anything other than `auto`, it takes the standard path and DISCARDS the entire
+   webkit block. Shipping both is how 8.1.19 removed nothing: measured headed on
+   Linux, as-shipped gave a 10px gutter with arrows, while the authored webkit
+   rule alone gives 8px with none. Isolated: webkit-only 8px no arrows;
+   standard-only 10px arrows; both together 10px arrows.
+
+   Neither half is redundant, so neither can simply be deleted — Firefox
+   implements ONLY the standard properties, Safari ONLY the webkit ones. They are
+   separated by engine instead: the webkit block applies wherever the selector is
+   understood, and the standard properties apply only where it is not.
+
+   And it is invisible headless. Chromium's headless shell paints OVERLAY
+   scrollbars, so nothing is drawn, `offsetWidth - clientWidth` is 0 on a blank
+   page, and `getComputedStyle(el, '::-webkit-scrollbar-button').display` happily
+   reports `none` for a rule that never ran. This must be checked headed.
    ───────────────────────────────────────────────────────────────────────────── */
-:where(
+
+/* Firefox and anything else with no webkit pseudo-elements. */
+@supports not selector(::-webkit-scrollbar) {
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -1983,12 +1993,44 @@
   [data-slot='textarea'],
   [data-slot='composer-field']
 ) {
-  /* Firefox — no pseudo-elements, two properties, same intent. */
-  scrollbar-width: thin;
-  scrollbar-color: rgb(255 255 255 / 0.18) transparent;
-}
+    scrollbar-width: thin;
+    scrollbar-color: rgb(255 255 255 / 0.18) transparent;
+  }
+  .t_light :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+) { scrollbar-color: rgb(0 0 0 / 0.20) transparent; }
+}
+
+/* Chromium and Safari.
+   The first rule is the load-bearing one and it is a RESET, not a style.
+   @hanzo/design sets `scrollbar-color` and `scrollbar-width` on `:where(html)`
+   (theme.css), and both INHERIT — so every element in the document already
+   carries a non-`auto` value, Chromium takes the standard path, and the whole
+   webkit block below is discarded before it is read. Nothing declared here can
+   win until the inherited value is put back to `auto` on the element itself.
+   That is why the arrows survived 8.1.19: the competing declaration was one
+   level up and inherited, not a rule anyone would find in this file. */
+@supports selector(::-webkit-scrollbar) {
+  :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+) {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
 
-:where(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -1996,13 +2038,11 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
+)::-webkit-scrollbar { width: 8px; height: 8px; }
 
-/* The steppers. This is the rule that removes the arrows. */
-:where(
+  /* The steppers. This is the rule that removes the arrows, and the reason the
+     two halves had to be separated at all. */
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2010,13 +2050,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar-button {
-  display: none;
-  width: 0;
-  height: 0;
-}
+)::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
 
-:where(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2024,11 +2060,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar-track {
-  background: transparent;
-}
+)::-webkit-scrollbar-track { background: transparent; }
 
-:where(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2037,16 +2071,15 @@
   [data-slot='textarea'],
   [data-slot='composer-field']
 )::-webkit-scrollbar-thumb {
-  background: rgb(255 255 255 / 0.18);
-  border-radius: 999px;
-  /* A transparent border with background-clip keeps the thumb off the very edge
-     without a track colour doing it, which is what makes it read as an overlay
-     rather than a channel. */
-  border: 2px solid transparent;
-  background-clip: content-box;
-}
-
-:where(
+    background: rgb(255 255 255 / 0.18);
+    border-radius: 999px;
+    /* A transparent border with background-clip keeps the thumb off the very
+       edge without a track colour doing it, so it reads as an overlay rather
+       than a channel. */
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2055,12 +2088,10 @@
   [data-slot='textarea'],
   [data-slot='composer-field']
 )::-webkit-scrollbar-thumb:hover {
-  background: rgb(255 255 255 / 0.30);
-  background-clip: content-box;
-}
-
-/* The light theme reads the same ladder from the other side. */
-.t_light :where(
+    background: rgb(255 255 255 / 0.30);
+    background-clip: content-box;
+  }
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2068,11 +2099,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-) {
-  scrollbar-color: rgb(0 0 0 / 0.20) transparent;
-}
+)::-webkit-scrollbar-corner { background: transparent; }
 
-.t_light :where(
+  .t_light :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2081,17 +2110,15 @@
   [data-slot='textarea'],
   [data-slot='composer-field']
 )::-webkit-scrollbar-thumb {
-  background: rgb(0 0 0 / 0.20);
-  background-clip: content-box;
+    background: rgb(0 0 0 / 0.20);
+    background-clip: content-box;
+  }
 }
 
 /* The textarea's resize grip is the other platform artefact in the same family:
-   a diagonal hatch in the corner of every Textarea and composer, drawn by the UA
-   and matching nothing. A composer that grows with its content does not need a
-   drag handle, and one that does not grow should not offer a broken one. */
-:where([data-slot='textarea'], [data-slot='composer-field']) {
-  resize: none;
-}
+   a diagonal hatch drawn by the UA that matches nothing. A composer that grows
+   with its content does not need one. */
+:where([data-slot='textarea'], [data-slot='composer-field']) { resize: none; }
 
 ._ovs-contain {overscroll-behavior:contain;}
 .t_unmounted .is_View, .t_unmounted .is_Text { transition: none !important; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.1.20",
+  "version": "8.1.21",
   "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": {