@hanzo/ui 8.27.53 → 8.27.55

package/dist/theme.css

@@ -1152,34 +1152,35 @@
   ::selection{background:var(--selection);color:var(--text-primary)}
 
   /* ——— the scrollbar ———
-     The single largest piece of UNSTYLED chrome left on a dark surface: a
-     default 15px light-grey scrollbar down the side of a #0a0a0a panel is the
-     one element on the page that did not get the memo, and it is visible on
-     every scrolling surface in the product. 6px, no track, thumb on the same
-     hairline ladder as everything else. Both syntaxes ship because they are
-     disjoint — `scrollbar-*` is Firefox and the `::-webkit-*` pseudos are
-     Chromium/Safari; neither engine reads the other.
+     6px, no track, no stepper buttons, the thumb on the same hairline ladder as
+     everything else. ONE treatment per engine. Chromium 121+ reads the standard
+     `scrollbar-color`/`scrollbar-width` as well as the `::-webkit-*` pseudos,
+     and an element with either standard property set ignores its pseudos —
+     `scrollbar-color` inherits, so stated on html it gives every scroller the
+     native bar, which on Linux/GTK draws a boxed arrow at each end. So the
+     standard pair goes only to an engine without the pseudos (Firefox), and the
+     pseudos serve the rest. Check 1e holds that.
      The thumb is a --white-* rung, so it does not invert; the `.light`
      restatements sit here rather than in colors.css because a scrollbar is an
      element default and this file is where element defaults live. Everything
      stays INSIDE the layer — an unlayered rule here would outrank an app's own
      utilities, which is the defect check 1c exists to catch. */
-  :where(html){scrollbar-color:var(--white-15) transparent;scrollbar-width:thin}
-  .light, :root.t_light, .t_light{scrollbar-color:rgb(0 0 0 / .18) transparent}
+  @supports not selector(::-webkit-scrollbar){
+    :where(html){scrollbar-color:var(--white-15) transparent;scrollbar-width:thin}
+    .light, :root.t_light, .t_light{scrollbar-color:rgb(0 0 0 / .18) transparent}
+  }
   :where(*)::-webkit-scrollbar{width:6px;height:6px}
   :where(*)::-webkit-scrollbar-track{background:transparent}
   :where(*)::-webkit-scrollbar-thumb{background:var(--white-15);border-radius:var(--radius-full)}
   :where(*)::-webkit-scrollbar-thumb:hover{background:var(--white-30)}
   :where(*)::-webkit-scrollbar-corner{background:transparent}
-  /* The stepper arrows, and they are a LINUX defect specifically. Chromium on
-     macOS draws no buttons, so styling the track and thumb looks finished there
-     and ships a classic GTK scrollbar — a boxed arrow at each end of every
-     scroller, on both axes — to everyone on Ubuntu. Styling the other pseudos
-     does not suppress them; only this does. Zero width AND height because the
-     horizontal and vertical bars each read one of them. */
+  /* The steppers. Styling the other pseudos does not remove them; only this
+     does. Zero width AND height because each axis reads one of them. */
   :where(*)::-webkit-scrollbar-button{display:none;width:0;height:0}
-  .light :where(*)::-webkit-scrollbar-thumb{background:rgb(0 0 0 / .18)}
-  .light :where(*)::-webkit-scrollbar-thumb:hover{background:rgb(0 0 0 / .32)}
+  /* `.light` itself as well as its subtree: with the theme class on <html>,
+     html's own pseudos draw the page's scrollbar. */
+  .light::-webkit-scrollbar-thumb,.light :where(*)::-webkit-scrollbar-thumb{background:rgb(0 0 0 / .18)}
+  .light::-webkit-scrollbar-thumb:hover,.light :where(*)::-webkit-scrollbar-thumb:hover{background:rgb(0 0 0 / .32)}
 }
 
 /**
@@ -2040,166 +2041,8 @@
 }
 
 
-/* ─────────────────────────────────────────────────────────────────────────────
-   Scrollbars, on the surfaces this package scrolls.
-
-   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.
-   ───────────────────────────────────────────────────────────────────────────── */
-
-/* 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'],
-  [data-slot='sidebar-scroll'],
-  [data-slot='scroll-area-viewport'],
-  [data-slot='textarea'],
-  [data-slot='composer-field']
-) {
-    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(
-  [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']
-)::-webkit-scrollbar { width: 8px; height: 8px; }
-
-  /* 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'],
-  [data-slot='sidebar-scroll'],
-  [data-slot='scroll-area-viewport'],
-  [data-slot='textarea'],
-  [data-slot='composer-field']
-)::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
-
-  :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']
-)::-webkit-scrollbar-track { background: transparent; }
-
-  :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']
-)::-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, 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'],
-  [data-slot='sidebar-scroll'],
-  [data-slot='scroll-area-viewport'],
-  [data-slot='textarea'],
-  [data-slot='composer-field']
-)::-webkit-scrollbar-thumb:hover {
-    background: rgb(255 255 255 / 0.30);
-    background-clip: content-box;
-  }
-  :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']
-)::-webkit-scrollbar-corner { background: 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']
-)::-webkit-scrollbar-thumb {
-    background: rgb(0 0 0 / 0.20);
-    background-clip: content-box;
-  }
-}
+/* Scrollbars are @hanzo/design's (base.css, ≥ 0.5.34): a thin thumb on every
+   scroller and no stepper buttons, stated once for the page. */
 
 /* A carousel scrolls but shows no bar: the arrows and the snap already say it
    scrolls, and a bar appearing mid-drag shifts the slides under the pointer.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.27.53",
+  "version": "8.27.55",
   "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": {
@@ -305,7 +305,7 @@
   "dependencies": {
     "@hanzo/appearance": "0.2.7",
     "@hanzo/brand": "1.4.8",
-    "@hanzo/design": "0.5.33",
+    "@hanzo/design": "0.5.34",
     "@hanzo/font": "1.9.2",
     "@hanzo/logo": "1.0.26",
     "@hanzo/products": "0.2.6",