@hanzo/ui 8.0.47 → 8.0.49

package/dist/styles.css

@@ -229,7 +229,7 @@
    So EVERY token whose dark value is a --white-* rung must be restated below,
    and check-tokens.mjs fails the build if one is missed — that class of bug is
    silent (the border simply stops existing) and has shipped before. */
-.light{
+.light, :root.t_light{
   color-scheme:light;
   --background:#ffffff;
   --foreground:#0a0a0a;
@@ -608,7 +608,7 @@
    obvious spelling would invalidate the whole declaration and take the drop
    shadow down with it. A zero-size transparent shadow composes to nothing and
    costs nothing. */
-.light{
+.light, :root.t_light{
   --shadow-floating:0 24px 60px -16px rgb(0 0 0 / .18);
   --shadow-inset-hairline:inset 0 0 0 1px rgb(0 0 0 / .10);
   --edge-highlight:inset 0 0 0 0 transparent;
@@ -895,7 +895,7 @@
      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{scrollbar-color:rgb(0 0 0 / .18) transparent}
+  .light, :root.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)}
@@ -1064,24 +1064,159 @@
 [data-touch-y="23"]::after { top: -23px; bottom: -23px; }
 [data-touch-y="24"]::after { top: -24px; bottom: -24px; }
 
-/* Elevation ladder — the shadow steps components name by class. */
-.elevation-1 { box-shadow: var(--hz-elevation-1, 0 1px 2px rgba(0, 0, 0, 0.16)); }
-.elevation-2 { box-shadow: var(--hz-elevation-2, 0 4px 12px rgba(0, 0, 0, 0.24)); }
-.elevation-3 { box-shadow: var(--hz-elevation-3, 0 8px 24px rgba(0, 0, 0, 0.36)); }
-.elevation-4 { box-shadow: var(--hz-elevation-4, 0 16px 48px rgba(0, 0, 0, 0.44)); }
+/* The material, the elevation ladder, the scrim and the row separators live in
+   src/glass.css and are inlined here by scripts/compose-theme.mjs — one home,
+   two entry points (`@hanzo/ui/theme.css` and `@hanzo/ui/glass.css`), so a host
+   that wants only the chrome material does not have to take the token layer
+   with it.
 
-/* Glass — the ONE frosted material (see backends/gui/glass.tsx). The component
-   stands as a solid raised panel; only a browser that can actually blur the
-   backdrop trades it for the translucent material, so content never sits on
-   see-through ground without the blur. !important beats the compiled bg atom. */
+   They used to be four `.elevation-*` rules reading `var(--hz-elevation-N, …)`.
+   Nothing in this repo, in @hanzo/design or in any consumer ever DEFINED an
+   `--hz-elevation-*` variable, so every one of those resolved to its fallback:
+   an indirection through a name that does not exist, with a hardcoded shadow
+   behind it, next to a design system that publishes real ones. */
+
+/* Glass — the material floating chrome is made of, and the ladder it stands on.
+ *
+ *   import '@hanzo/ui/glass.css'      // this slice alone
+ *   import '@hanzo/ui/theme.css'      // the whole sheet; this is inlined in it
+ *
+ * Menus, dialogs, popovers, toasts, sticky bars: things with page UNDER them.
+ * That last clause is the whole rule. Vibrancy is a lens — translucent ground
+ * plus a backdrop blur — so it shows a softened version of whatever it covers,
+ * and covering nothing but the flat canvas it has nothing to soften. An in-flow
+ * card wearing this is not glass; it is the page with extra steps. So: over
+ * content -> glass, in the flow -> the surface ladder. There is no third case.
+ *
+ * ── Values come from @hanzo/design ──────────────────────────────────────────
+ * Every colour, shadow and light below is a design token. The fallbacks are
+ * design's OWN published values, present so a host that imports this file
+ * without design's sheet still gets a ladder instead of a silently-dropped
+ * declaration (an undefined var() invalidates the whole property). They are a
+ * mirror, not a second opinion — glass.test.ts reads @hanzo/design/styles.css
+ * and fails if any of them stops matching, so the copy cannot drift.
+ */
+
+/* ── The material ───────────────────────────────────────────────────────────
+   Applied BY SLOT, not by call site. Every surface below is floating chrome by
+   construction — a popover is over the page or it is nothing — so which of them
+   is glass was never a decision a call site should get to make. It was making
+   it anyway: in the console, of 135 floating surfaces exactly ONE had reached
+   for the material by hand and a dozen dialogs had gone the other way and
+   pinned an opaque fill. Reaching them one by one is 134 edits that agree today
+   and drift apart on the next one somebody adds. A new dialog is glass because
+   it is a dialog.
+
+   `.glass` is here for the same reason `glass()` exists in the recipes module:
+   a hand-rolled bar or a custom menu is floating chrome that no slot names.
+
+   The ground is derived from --background rather than fixed, so the material
+   follows the theme instead of assuming a dark one.
+
+   The opaque `background-color` outside the @supports block is load-bearing
+   rather than belt-and-braces: a browser that cannot blur gets no rule at all
+   from inside it, and a menu with no background is a menu you read the page
+   through. !important beats the compiled atomic background class, which lands
+   in an inline <style> a bundler orders after this sheet, and it beats the call
+   sites that pin a fill by hand — those become no-ops instead of holes. */
 @supports (backdrop-filter: blur(8px)) {
-  [data-slot="glass"] {
+  .glass,
+  [data-slot="glass"],
+  [data-slot="dialog-content"],
+  [data-slot="popover-content"],
+  [data-slot="select-content"],
+  [data-slot="dropdown-menu-content"],
+  [data-slot="dropdown-menu-sub-content"],
+  [data-slot="tooltip-content"] {
     background-color: color-mix(in oklab, var(--background) 72%, transparent) !important;
     -webkit-backdrop-filter: blur(20px) saturate(1.8);
     backdrop-filter: blur(20px) saturate(1.8);
   }
 }
 
+/* ── Depth — three rungs, and the lit edge is the load-bearing half ──────────
+   A cast shadow is how a light page shows lift. On a near-black canvas it is
+   nearly free of information: black on near-black moves no pixels, so a raised
+   panel wearing only a shadow reads exactly as flat as one wearing none. What
+   says "this surface is above that one" in a dark UI is the LIT EDGE — the top
+   lip catching light, which is why every macOS/iOS glass panel has one. Design
+   spends the same two tokens for the same reason and zeroes --edge-highlight in
+   `.light`, where a white line on a white card is nothing and the drop does all
+   the work: one composition, both themes, no branch here.
+
+   Levels are a LADDER, not a palette — 1 rests in the flow, 2 lifts off it, 3
+   floats over the page. Nothing needs a fourth; if something seems to, it is
+   sitting at the wrong level.
+
+   Anchored chrome — a menu pinned to the control that opened it, a tooltip to
+   its target — is rung 2. A modal has no anchor and a scrim of its own, so it
+   floats free at 3. Those slots share the rung's rule rather than restating its
+   value, so the ladder cannot come apart from the surfaces standing on it.
+
+   Glass over glass (a select opened inside a dialog) is deliberately left to
+   stack: two 72% grounds land near 92%, so the nested surface reads as MORE
+   solid than its parent, which is the right answer and the one macOS gives. */
+.elevation-1 {
+  box-shadow:
+    var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
+    var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .40)) !important;
+}
+
+.elevation-2,
+[data-slot="popover-content"],
+[data-slot="select-content"],
+[data-slot="dropdown-menu-content"],
+[data-slot="dropdown-menu-sub-content"],
+[data-slot="tooltip-content"] {
+  box-shadow:
+    var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
+    var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55)) !important;
+}
+
+.elevation-3,
+[data-slot="dialog-content"] {
+  box-shadow:
+    var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
+    var(--shadow-floating, 0 24px 60px -16px rgb(0 0 0 / .75)) !important;
+}
+
+/* ── The scrim ──────────────────────────────────────────────────────────────
+   The dim that makes a floating panel read as floating rather than as more
+   page. gui's overlay dims TWICE — a translucent ground under a further
+   `opacity` — landing at about a quarter black. Opaque chrome gets away with
+   it; glass does not, because the blur behind a translucent panel only reads as
+   depth when the ground behind it is genuinely darker.
+
+   One value, in one place: the recipes module reads the same token, so the dim
+   behind a component dialog and the dim behind a hand-rolled one are the same
+   dim by construction rather than by two people remembering a number. */
+[data-slot="dialog-overlay"] {
+  opacity: 1;
+  background-color: var(--surface-scrim, rgb(0 0 0 / .8));
+}
+
+/* ── Grouped rows ───────────────────────────────────────────────────────────
+   One card, hairlines between its rows — the macOS settings group. Four
+   separate cards for four toggles reads as four unrelated decisions, each with
+   its own four edges; the same four inside one card reads as one set and drops
+   twelve edges of noise.
+
+   The separator is drawn by the PARENT, because only the parent knows which
+   child is last. Every by-hand version either left a trailing hairline sitting
+   against the card's own bottom border (two parallel lines, 1px apart) or made
+   each row take a `first` flag it should never have needed. `> * + *` has
+   neither failure mode and needs nothing from the call site.
+
+   Pair with `overflow: hidden` on the card (the `rows` recipe does) so the
+   separators stop at the radius instead of poking through the rounded corner.
+
+   --borderColor first: that is the variable the gui theme scope re-bases, and
+   it is what a card's own edge is drawn with. Falling through to --border keeps
+   a host that has design's tokens but no gui scope from losing the line. */
+[data-slot="rows"] > * + * {
+  border-top: 1px solid var(--borderColor, var(--border));
+}
+
 /* @hanzo/ui motion primitives — the calm, restrained animation vocabulary the
    Hanzo surfaces share. One place defines the easing; components apply the class.
    `className` forwards to the underlying DOM node on web, so the browser
@@ -1241,10 +1376,17 @@
   letter-spacing: -0.01em;
 }
 
+/* Paper — a ringed sheet: the ladder's lit edge and drop, plus a hairline all
+   the way round. The three values are @hanzo/design's, reached by their real
+   names. They used to be `--hz-ring` / `--hz-paper-highlight` /
+   `--hz-elevation-3`, none of which is defined in this repo, in @hanzo/design
+   or in any consumer — so all three resolved to hardcoded fallbacks, and the
+   comment above promising that "a host that defines its own --hz-* tokens still
+   wins" described a hook nobody could reach. */
 .paper {
-  box-shadow: var(--hz-ring, inset 0 0 0 1px rgba(255, 255, 255, 0.08)),
-    var(--hz-paper-highlight, inset 0 1px 0 0 rgba(255, 255, 255, 0.05)),
-    var(--hz-elevation-3, 0 8px 24px rgba(0, 0, 0, 0.36));
+  box-shadow: var(--shadow-inset-hairline, inset 0 0 0 1px rgb(255 255 255 / .10)),
+    var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
+    var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55));
 }
 
 @keyframes menu-in {
@@ -1323,10 +1465,10 @@
 :root .font_mono, :root .t_lang-mono-default .font_mono { --f-family:'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --f-lineHeight-1:16px; --f-lineHeight-2:18px; --f-lineHeight-3:20px; --f-lineHeight-4:22px; --f-lineHeight-5:22px; --f-lineHeight-6:24px; --f-lineHeight-7:28px; --f-lineHeight-8:32px; --f-lineHeight-9:32px; --f-lineHeight-10:38px; --f-lineHeight-11:46px; --f-lineHeight-12:54px; --f-lineHeight-13:62px; --f-lineHeight-14:70px; --f-lineHeight-15:86px; --f-lineHeight-16:102px; --f-lineHeight-true:20px; --f-weight-1:400; --f-weight-2:400; --f-weight-3:400; --f-weight-4:400; --f-weight-5:400; --f-weight-6:400; --f-weight-7:400; --f-weight-8:400; --f-weight-9:400; --f-weight-10:400; --f-weight-11:400; --f-weight-12:400; --f-weight-13:400; --f-weight-14:400; --f-weight-15:400; --f-weight-16:400; --f-weight-true:400; --f-letterSpacing-1:0px; --f-letterSpacing-2:0px; --f-letterSpacing-3:0px; --f-letterSpacing-4:0px; --f-letterSpacing-5:0px; --f-letterSpacing-6:0px; --f-letterSpacing-7:0px; --f-letterSpacing-8:0px; --f-letterSpacing-9:0px; --f-letterSpacing-10:0px; --f-letterSpacing-11:0px; --f-letterSpacing-12:0px; --f-letterSpacing-13:0px; --f-letterSpacing-14:0px; --f-letterSpacing-15:0px; --f-letterSpacing-16:0px; --f-letterSpacing-true:0px; --f-size-1:11px; --f-size-2:13px; --f-size-3:14px; --f-size-4:15px; --f-size-5:15px; --f-size-6:17px; --f-size-7:21px; --f-size-8:26px; --f-size-9:26px; --f-size-10:32px; --f-size-11:40px; --f-size-12:48px; --f-size-13:56px; --f-size-14:64px; --f-size-15:80px; --f-size-16:96px; --f-size-true:14px
 }
 .font_body, .font_heading, .font_mono, .is_View {font-family: var(--f-family); letter-spacing: var(--f-letterSpacing-true); line-height: var(--f-lineHeight-true); font-weight: var(--f-weight-true)}
-:root.t_dark, :root.t_dark , :root.t_light .t_dark , .tm_xxt {--accentBackground:var(--t0);--accentColor:var(--t1);--background0:var(--t2);--background02:var(--t3);--background04:var(--t4);--background06:var(--t5);--background08:var(--t6);--color1:var(--t7);--color2:var(--t8);--color3:var(--t9);--color4:var(--t10);--color5:var(--t0);--color6:var(--t11);--color7:var(--t12);--color8:var(--t13);--color9:var(--t14);--color10:var(--t15);--color11:var(--t16);--color12:var(--t17);--color0:var(--t18);--color02:var(--t19);--color04:var(--t20);--color06:var(--t21);--color08:var(--t22);--color:var(--t17);--colorHover:var(--t22);--colorPress:var(--t17);--colorFocus:var(--t16);--background:var(--t8);--backgroundHover:var(--t9);--backgroundPress:var(--t7);--backgroundFocus:var(--t9);--backgroundActive:var(--t8);--borderColor:var(--t10);--borderColorHover:var(--t0);--borderColorFocus:var(--t10);--borderColorPress:var(--t9);--placeholderColor:var(--t14);--colorTransparent:var(--t18);--black1:var(--t23);--black2:var(--t24);--black3:var(--t25);--black4:var(--t26);--black5:var(--t27);--black6:var(--t28);--black7:var(--t29);--black8:var(--t30);--black9:var(--t31);--black10:var(--t32);--black11:var(--t33);--black12:var(--t34);--white1:var(--t35);--white2:var(--t36);--white3:var(--t37);--white4:var(--t38);--white5:var(--t39);--white6:var(--t40);--white7:var(--t41);--white8:var(--t42);--white9:var(--t43);--white10:var(--t44);--white11:var(--t45);--white12:var(--t46);--white:var(--t47);--white0:var(--t48);--white02:var(--t49);--white04:var(--t50);--white06:var(--t51);--white08:var(--t52);--black:var(--t53);--black0:var(--t54);--black02:var(--t55);--black04:var(--t56);--black06:var(--t57);--black08:var(--t58);--shadow1:var(--t59);--shadow2:var(--t60);--shadow3:var(--t61);--shadow4:var(--t62);--shadow5:var(--t63);--shadow6:var(--t58);--shadow7:var(--t64);--shadow8:var(--t53);--highlight1:var(--t65);--highlight2:var(--t49);--highlight3:var(--t66);--highlight4:var(--t67);--highlight5:var(--t68);--highlight6:var(--t69);--highlight7:var(--t70);--highlight8:var(--t47);--shadowColor:var(--t61);--gray1:var(--t71);--gray2:var(--t25);--gray3:var(--t72);--gray4:var(--t73);--gray5:var(--t74);--gray6:var(--t75);--gray7:var(--t76);--gray8:var(--t77);--gray9:var(--t78);--gray10:var(--t79);--gray11:var(--t80);--gray12:var(--t81);--blue1:var(--t82);--blue2:var(--t83);--blue3:var(--t84);--blue4:var(--t85);--blue5:var(--t86);--blue6:var(--t87);--blue7:var(--t88);--blue8:var(--t89);--blue9:var(--t90);--blue10:var(--t91);--blue11:var(--t92);--blue12:var(--t93);--red1:var(--t94);--red2:var(--t95);--red3:var(--t96);--red4:var(--t97);--red5:var(--t98);--red6:var(--t99);--red7:var(--t100);--red8:var(--t101);--red9:var(--t102);--red10:var(--t103);--red11:var(--t104);--red12:var(--t105);--yellow1:var(--t106);--yellow2:var(--t107);--yellow3:var(--t108);--yellow4:var(--t109);--yellow5:var(--t110);--yellow6:var(--t111);--yellow7:var(--t112);--yellow8:var(--t113);--yellow9:var(--t114);--yellow10:var(--t115);--yellow11:var(--t116);--yellow12:var(--t117);--green1:var(--t118);--green2:var(--t119);--green3:var(--t120);--green4:var(--t121);--green5:var(--t122);--green6:var(--t123);--green7:var(--t124);--green8:var(--t125);--green9:var(--t126);--green10:var(--t127);--green11:var(--t128);--green12:var(--t129);--orange1:var(--t130);--orange2:var(--t131);--orange3:var(--t132);--orange4:var(--t133);--orange5:var(--t134);--orange6:var(--t135);--orange7:var(--t136);--orange8:var(--t137);--orange9:var(--t138);--orange10:var(--t139);--orange11:var(--t140);--orange12:var(--t141);--pink1:var(--t142);--pink2:var(--t143);--pink3:var(--t144);--pink4:var(--t145);--pink5:var(--t146);--pink6:var(--t147);--pink7:var(--t148);--pink8:var(--t149);--pink9:var(--t150);--pink10:var(--t151);--pink11:var(--t152);--pink12:var(--t153);--purple1:var(--t154);--purple2:var(--t155);--purple3:var(--t156);--purple4:var(--t157);--purple5:var(--t158);--purple6:var(--t159);--purple7:var(--t160);--purple8:var(--t161);--purple9:var(--t162);--purple10:var(--t163);--purple11:var(--t164);--purple12:var(--t165);--teal1:var(--t166);--teal2:var(--t167);--teal3:var(--t168);--teal4:var(--t169);--teal5:var(--t170);--teal6:var(--t171);--teal7:var(--t172);--teal8:var(--t173);--teal9:var(--t174);--teal10:var(--t175);--teal11:var(--t176);--teal12:var(--t177);--neutral1:var(--t178);--neutral2:var(--t179);--neutral3:var(--t180);--neutral4:var(--t41);--neutral5:var(--t181);--neutral6:var(--t182);--neutral7:var(--t183);--neutral8:var(--t184);--neutral9:var(--t185);--neutral10:var(--t186);--neutral11:var(--t187);--neutral12:var(--t188);--accent1:var(--t17);--accent2:var(--t189);--accent3:var(--t1);--accent4:var(--t190);--accent5:var(--t16);--accent6:var(--t191);--accent7:var(--t192);--accent8:var(--t193);--accent9:var(--t194);--accent10:var(--t0);--accent11:var(--t10);--accent12:var(--t195);--color01:var(--t196);--color0075:var(--t197);--color005:var(--t198);--color0025:var(--t199);--color002:var(--t200);--color001:var(--t201);--background01:var(--t202);--background0075:var(--t203);--background005:var(--t204);--background0025:var(--t205);--background002:var(--t206);--background001:var(--t207);--outlineColor:var(--t208);}
+:root.t_dark, :root.t_dark , :root.t_light .t_dark , .tm_xxt {--accentBackground:var(--t0);--accentColor:var(--t1);--background0:var(--t2);--background02:var(--t3);--background04:var(--t4);--background06:var(--t5);--background08:var(--t6);--color1:var(--t7);--color2:var(--t8);--color3:var(--t9);--color4:var(--t10);--color5:var(--t0);--color6:var(--t11);--color7:var(--t12);--color8:var(--t13);--color9:var(--t14);--color10:var(--t15);--color11:var(--t16);--color12:var(--t17);--color0:var(--t18);--color02:var(--t19);--color04:var(--t20);--color06:var(--t21);--color08:var(--t22);--color:var(--t17);--colorHover:var(--t22);--colorPress:var(--t17);--colorFocus:var(--t16);--backgroundHover:var(--t9);--backgroundPress:var(--t7);--backgroundFocus:var(--t9);--backgroundActive:var(--t8);--borderColor:var(--t10);--borderColorHover:var(--t0);--borderColorFocus:var(--t10);--borderColorPress:var(--t9);--placeholderColor:var(--t14);--colorTransparent:var(--t18);--black1:var(--t23);--black2:var(--t24);--black3:var(--t25);--black4:var(--t26);--black5:var(--t27);--black6:var(--t28);--black7:var(--t29);--black8:var(--t30);--black9:var(--t31);--black10:var(--t32);--black11:var(--t33);--black12:var(--t34);--white1:var(--t35);--white2:var(--t36);--white3:var(--t37);--white4:var(--t38);--white5:var(--t39);--white6:var(--t40);--white7:var(--t41);--white8:var(--t42);--white9:var(--t43);--white10:var(--t44);--white11:var(--t45);--white12:var(--t46);--white0:var(--t48);--white02:var(--t49);--white04:var(--t50);--white06:var(--t51);--white08:var(--t52);--black0:var(--t54);--black02:var(--t55);--black04:var(--t56);--black06:var(--t57);--black08:var(--t58);--shadow1:var(--t59);--shadow2:var(--t60);--shadow3:var(--t61);--shadow4:var(--t62);--shadow5:var(--t63);--shadow6:var(--t58);--shadow7:var(--t64);--shadow8:var(--t53);--highlight1:var(--t65);--highlight2:var(--t49);--highlight3:var(--t66);--highlight4:var(--t67);--highlight5:var(--t68);--highlight6:var(--t69);--highlight7:var(--t70);--highlight8:var(--t47);--shadowColor:var(--t61);--gray1:var(--t71);--gray2:var(--t25);--gray3:var(--t72);--gray4:var(--t73);--gray5:var(--t74);--gray6:var(--t75);--gray7:var(--t76);--gray8:var(--t77);--gray9:var(--t78);--gray10:var(--t79);--gray11:var(--t80);--gray12:var(--t81);--blue1:var(--t82);--blue2:var(--t83);--blue3:var(--t84);--blue4:var(--t85);--blue5:var(--t86);--blue6:var(--t87);--blue7:var(--t88);--blue8:var(--t89);--blue9:var(--t90);--blue10:var(--t91);--blue11:var(--t92);--blue12:var(--t93);--red1:var(--t94);--red2:var(--t95);--red3:var(--t96);--red4:var(--t97);--red5:var(--t98);--red6:var(--t99);--red7:var(--t100);--red8:var(--t101);--red9:var(--t102);--red10:var(--t103);--red11:var(--t104);--red12:var(--t105);--yellow1:var(--t106);--yellow2:var(--t107);--yellow3:var(--t108);--yellow4:var(--t109);--yellow5:var(--t110);--yellow6:var(--t111);--yellow7:var(--t112);--yellow8:var(--t113);--yellow9:var(--t114);--yellow10:var(--t115);--yellow11:var(--t116);--yellow12:var(--t117);--green1:var(--t118);--green2:var(--t119);--green3:var(--t120);--green4:var(--t121);--green5:var(--t122);--green6:var(--t123);--green7:var(--t124);--green8:var(--t125);--green9:var(--t126);--green10:var(--t127);--green11:var(--t128);--green12:var(--t129);--orange1:var(--t130);--orange2:var(--t131);--orange3:var(--t132);--orange4:var(--t133);--orange5:var(--t134);--orange6:var(--t135);--orange7:var(--t136);--orange8:var(--t137);--orange9:var(--t138);--orange10:var(--t139);--orange11:var(--t140);--orange12:var(--t141);--pink1:var(--t142);--pink2:var(--t143);--pink3:var(--t144);--pink4:var(--t145);--pink5:var(--t146);--pink6:var(--t147);--pink7:var(--t148);--pink8:var(--t149);--pink9:var(--t150);--pink10:var(--t151);--pink11:var(--t152);--pink12:var(--t153);--purple1:var(--t154);--purple2:var(--t155);--purple3:var(--t156);--purple4:var(--t157);--purple5:var(--t158);--purple6:var(--t159);--purple7:var(--t160);--purple8:var(--t161);--purple9:var(--t162);--purple10:var(--t163);--purple11:var(--t164);--purple12:var(--t165);--teal1:var(--t166);--teal2:var(--t167);--teal3:var(--t168);--teal4:var(--t169);--teal5:var(--t170);--teal6:var(--t171);--teal7:var(--t172);--teal8:var(--t173);--teal9:var(--t174);--teal10:var(--t175);--teal11:var(--t176);--teal12:var(--t177);--neutral1:var(--t178);--neutral2:var(--t179);--neutral3:var(--t180);--neutral4:var(--t41);--neutral5:var(--t181);--neutral6:var(--t182);--neutral7:var(--t183);--neutral8:var(--t184);--neutral9:var(--t185);--neutral10:var(--t186);--neutral11:var(--t187);--neutral12:var(--t188);--accent1:var(--t17);--accent2:var(--t189);--accent3:var(--t1);--accent4:var(--t190);--accent5:var(--t16);--accent6:var(--t191);--accent7:var(--t192);--accent8:var(--t193);--accent9:var(--t194);--accent10:var(--t0);--accent11:var(--t10);--accent12:var(--t195);--color01:var(--t196);--color0075:var(--t197);--color005:var(--t198);--color0025:var(--t199);--color002:var(--t200);--color001:var(--t201);--background01:var(--t202);--background0075:var(--t203);--background005:var(--t204);--background0025:var(--t205);--background002:var(--t206);--background001:var(--t207);--outlineColor:var(--t208);}
 @media(prefers-color-scheme:dark){
     body{background:var(--background);color:var(--color)}
-    :root {--accentBackground:var(--t0);--accentColor:var(--t1);--background0:var(--t2);--background02:var(--t3);--background04:var(--t4);--background06:var(--t5);--background08:var(--t6);--color1:var(--t7);--color2:var(--t8);--color3:var(--t9);--color4:var(--t10);--color5:var(--t0);--color6:var(--t11);--color7:var(--t12);--color8:var(--t13);--color9:var(--t14);--color10:var(--t15);--color11:var(--t16);--color12:var(--t17);--color0:var(--t18);--color02:var(--t19);--color04:var(--t20);--color06:var(--t21);--color08:var(--t22);--color:var(--t17);--colorHover:var(--t22);--colorPress:var(--t17);--colorFocus:var(--t16);--background:var(--t8);--backgroundHover:var(--t9);--backgroundPress:var(--t7);--backgroundFocus:var(--t9);--backgroundActive:var(--t8);--borderColor:var(--t10);--borderColorHover:var(--t0);--borderColorFocus:var(--t10);--borderColorPress:var(--t9);--placeholderColor:var(--t14);--colorTransparent:var(--t18);--black1:var(--t23);--black2:var(--t24);--black3:var(--t25);--black4:var(--t26);--black5:var(--t27);--black6:var(--t28);--black7:var(--t29);--black8:var(--t30);--black9:var(--t31);--black10:var(--t32);--black11:var(--t33);--black12:var(--t34);--white1:var(--t35);--white2:var(--t36);--white3:var(--t37);--white4:var(--t38);--white5:var(--t39);--white6:var(--t40);--white7:var(--t41);--white8:var(--t42);--white9:var(--t43);--white10:var(--t44);--white11:var(--t45);--white12:var(--t46);--white:var(--t47);--white0:var(--t48);--white02:var(--t49);--white04:var(--t50);--white06:var(--t51);--white08:var(--t52);--black:var(--t53);--black0:var(--t54);--black02:var(--t55);--black04:var(--t56);--black06:var(--t57);--black08:var(--t58);--shadow1:var(--t59);--shadow2:var(--t60);--shadow3:var(--t61);--shadow4:var(--t62);--shadow5:var(--t63);--shadow6:var(--t58);--shadow7:var(--t64);--shadow8:var(--t53);--highlight1:var(--t65);--highlight2:var(--t49);--highlight3:var(--t66);--highlight4:var(--t67);--highlight5:var(--t68);--highlight6:var(--t69);--highlight7:var(--t70);--highlight8:var(--t47);--shadowColor:var(--t61);--gray1:var(--t71);--gray2:var(--t25);--gray3:var(--t72);--gray4:var(--t73);--gray5:var(--t74);--gray6:var(--t75);--gray7:var(--t76);--gray8:var(--t77);--gray9:var(--t78);--gray10:var(--t79);--gray11:var(--t80);--gray12:var(--t81);--blue1:var(--t82);--blue2:var(--t83);--blue3:var(--t84);--blue4:var(--t85);--blue5:var(--t86);--blue6:var(--t87);--blue7:var(--t88);--blue8:var(--t89);--blue9:var(--t90);--blue10:var(--t91);--blue11:var(--t92);--blue12:var(--t93);--red1:var(--t94);--red2:var(--t95);--red3:var(--t96);--red4:var(--t97);--red5:var(--t98);--red6:var(--t99);--red7:var(--t100);--red8:var(--t101);--red9:var(--t102);--red10:var(--t103);--red11:var(--t104);--red12:var(--t105);--yellow1:var(--t106);--yellow2:var(--t107);--yellow3:var(--t108);--yellow4:var(--t109);--yellow5:var(--t110);--yellow6:var(--t111);--yellow7:var(--t112);--yellow8:var(--t113);--yellow9:var(--t114);--yellow10:var(--t115);--yellow11:var(--t116);--yellow12:var(--t117);--green1:var(--t118);--green2:var(--t119);--green3:var(--t120);--green4:var(--t121);--green5:var(--t122);--green6:var(--t123);--green7:var(--t124);--green8:var(--t125);--green9:var(--t126);--green10:var(--t127);--green11:var(--t128);--green12:var(--t129);--orange1:var(--t130);--orange2:var(--t131);--orange3:var(--t132);--orange4:var(--t133);--orange5:var(--t134);--orange6:var(--t135);--orange7:var(--t136);--orange8:var(--t137);--orange9:var(--t138);--orange10:var(--t139);--orange11:var(--t140);--orange12:var(--t141);--pink1:var(--t142);--pink2:var(--t143);--pink3:var(--t144);--pink4:var(--t145);--pink5:var(--t146);--pink6:var(--t147);--pink7:var(--t148);--pink8:var(--t149);--pink9:var(--t150);--pink10:var(--t151);--pink11:var(--t152);--pink12:var(--t153);--purple1:var(--t154);--purple2:var(--t155);--purple3:var(--t156);--purple4:var(--t157);--purple5:var(--t158);--purple6:var(--t159);--purple7:var(--t160);--purple8:var(--t161);--purple9:var(--t162);--purple10:var(--t163);--purple11:var(--t164);--purple12:var(--t165);--teal1:var(--t166);--teal2:var(--t167);--teal3:var(--t168);--teal4:var(--t169);--teal5:var(--t170);--teal6:var(--t171);--teal7:var(--t172);--teal8:var(--t173);--teal9:var(--t174);--teal10:var(--t175);--teal11:var(--t176);--teal12:var(--t177);--neutral1:var(--t178);--neutral2:var(--t179);--neutral3:var(--t180);--neutral4:var(--t41);--neutral5:var(--t181);--neutral6:var(--t182);--neutral7:var(--t183);--neutral8:var(--t184);--neutral9:var(--t185);--neutral10:var(--t186);--neutral11:var(--t187);--neutral12:var(--t188);--accent1:var(--t17);--accent2:var(--t189);--accent3:var(--t1);--accent4:var(--t190);--accent5:var(--t16);--accent6:var(--t191);--accent7:var(--t192);--accent8:var(--t193);--accent9:var(--t194);--accent10:var(--t0);--accent11:var(--t10);--accent12:var(--t195);--color01:var(--t196);--color0075:var(--t197);--color005:var(--t198);--color0025:var(--t199);--color002:var(--t200);--color001:var(--t201);--background01:var(--t202);--background0075:var(--t203);--background005:var(--t204);--background0025:var(--t205);--background002:var(--t206);--background001:var(--t207);--outlineColor:var(--t208);}
+    :root {--accentBackground:var(--t0);--accentColor:var(--t1);--background0:var(--t2);--background02:var(--t3);--background04:var(--t4);--background06:var(--t5);--background08:var(--t6);--color1:var(--t7);--color2:var(--t8);--color3:var(--t9);--color4:var(--t10);--color5:var(--t0);--color6:var(--t11);--color7:var(--t12);--color8:var(--t13);--color9:var(--t14);--color10:var(--t15);--color11:var(--t16);--color12:var(--t17);--color0:var(--t18);--color02:var(--t19);--color04:var(--t20);--color06:var(--t21);--color08:var(--t22);--color:var(--t17);--colorHover:var(--t22);--colorPress:var(--t17);--colorFocus:var(--t16);--backgroundHover:var(--t9);--backgroundPress:var(--t7);--backgroundFocus:var(--t9);--backgroundActive:var(--t8);--borderColor:var(--t10);--borderColorHover:var(--t0);--borderColorFocus:var(--t10);--borderColorPress:var(--t9);--placeholderColor:var(--t14);--colorTransparent:var(--t18);--black1:var(--t23);--black2:var(--t24);--black3:var(--t25);--black4:var(--t26);--black5:var(--t27);--black6:var(--t28);--black7:var(--t29);--black8:var(--t30);--black9:var(--t31);--black10:var(--t32);--black11:var(--t33);--black12:var(--t34);--white1:var(--t35);--white2:var(--t36);--white3:var(--t37);--white4:var(--t38);--white5:var(--t39);--white6:var(--t40);--white7:var(--t41);--white8:var(--t42);--white9:var(--t43);--white10:var(--t44);--white11:var(--t45);--white12:var(--t46);--white0:var(--t48);--white02:var(--t49);--white04:var(--t50);--white06:var(--t51);--white08:var(--t52);--black0:var(--t54);--black02:var(--t55);--black04:var(--t56);--black06:var(--t57);--black08:var(--t58);--shadow1:var(--t59);--shadow2:var(--t60);--shadow3:var(--t61);--shadow4:var(--t62);--shadow5:var(--t63);--shadow6:var(--t58);--shadow7:var(--t64);--shadow8:var(--t53);--highlight1:var(--t65);--highlight2:var(--t49);--highlight3:var(--t66);--highlight4:var(--t67);--highlight5:var(--t68);--highlight6:var(--t69);--highlight7:var(--t70);--highlight8:var(--t47);--shadowColor:var(--t61);--gray1:var(--t71);--gray2:var(--t25);--gray3:var(--t72);--gray4:var(--t73);--gray5:var(--t74);--gray6:var(--t75);--gray7:var(--t76);--gray8:var(--t77);--gray9:var(--t78);--gray10:var(--t79);--gray11:var(--t80);--gray12:var(--t81);--blue1:var(--t82);--blue2:var(--t83);--blue3:var(--t84);--blue4:var(--t85);--blue5:var(--t86);--blue6:var(--t87);--blue7:var(--t88);--blue8:var(--t89);--blue9:var(--t90);--blue10:var(--t91);--blue11:var(--t92);--blue12:var(--t93);--red1:var(--t94);--red2:var(--t95);--red3:var(--t96);--red4:var(--t97);--red5:var(--t98);--red6:var(--t99);--red7:var(--t100);--red8:var(--t101);--red9:var(--t102);--red10:var(--t103);--red11:var(--t104);--red12:var(--t105);--yellow1:var(--t106);--yellow2:var(--t107);--yellow3:var(--t108);--yellow4:var(--t109);--yellow5:var(--t110);--yellow6:var(--t111);--yellow7:var(--t112);--yellow8:var(--t113);--yellow9:var(--t114);--yellow10:var(--t115);--yellow11:var(--t116);--yellow12:var(--t117);--green1:var(--t118);--green2:var(--t119);--green3:var(--t120);--green4:var(--t121);--green5:var(--t122);--green6:var(--t123);--green7:var(--t124);--green8:var(--t125);--green9:var(--t126);--green10:var(--t127);--green11:var(--t128);--green12:var(--t129);--orange1:var(--t130);--orange2:var(--t131);--orange3:var(--t132);--orange4:var(--t133);--orange5:var(--t134);--orange6:var(--t135);--orange7:var(--t136);--orange8:var(--t137);--orange9:var(--t138);--orange10:var(--t139);--orange11:var(--t140);--orange12:var(--t141);--pink1:var(--t142);--pink2:var(--t143);--pink3:var(--t144);--pink4:var(--t145);--pink5:var(--t146);--pink6:var(--t147);--pink7:var(--t148);--pink8:var(--t149);--pink9:var(--t150);--pink10:var(--t151);--pink11:var(--t152);--pink12:var(--t153);--purple1:var(--t154);--purple2:var(--t155);--purple3:var(--t156);--purple4:var(--t157);--purple5:var(--t158);--purple6:var(--t159);--purple7:var(--t160);--purple8:var(--t161);--purple9:var(--t162);--purple10:var(--t163);--purple11:var(--t164);--purple12:var(--t165);--teal1:var(--t166);--teal2:var(--t167);--teal3:var(--t168);--teal4:var(--t169);--teal5:var(--t170);--teal6:var(--t171);--teal7:var(--t172);--teal8:var(--t173);--teal9:var(--t174);--teal10:var(--t175);--teal11:var(--t176);--teal12:var(--t177);--neutral1:var(--t178);--neutral2:var(--t179);--neutral3:var(--t180);--neutral4:var(--t41);--neutral5:var(--t181);--neutral6:var(--t182);--neutral7:var(--t183);--neutral8:var(--t184);--neutral9:var(--t185);--neutral10:var(--t186);--neutral11:var(--t187);--neutral12:var(--t188);--accent1:var(--t17);--accent2:var(--t189);--accent3:var(--t1);--accent4:var(--t190);--accent5:var(--t16);--accent6:var(--t191);--accent7:var(--t192);--accent8:var(--t193);--accent9:var(--t194);--accent10:var(--t0);--accent11:var(--t10);--accent12:var(--t195);--color01:var(--t196);--color0075:var(--t197);--color005:var(--t198);--color0025:var(--t199);--color002:var(--t200);--color001:var(--t201);--background01:var(--t202);--background0075:var(--t203);--background005:var(--t204);--background0025:var(--t205);--background002:var(--t206);--background001:var(--t207);--outlineColor:var(--t208);}
   }
 .t_dark ::selection{background:var(--color5);color:var(--color11)}
 :root.t_dark .t_Button, :root.t_dark .t_SliderThumb, :root.t_dark .t_Switch, :root.t_dark .t_black_Button, :root.t_dark .t_black_SliderThumb, :root.t_dark .t_black_Switch, :root.t_dark .t_black_surface2, :root.t_dark .t_surface2, :root.t_light .t_dark .t_Button, :root.t_light .t_dark .t_SliderThumb, :root.t_light .t_dark .t_Switch, :root.t_light .t_dark .t_black_Button, :root.t_light .t_dark .t_black_SliderThumb, :root.t_light .t_dark .t_black_Switch, :root.t_light .t_dark .t_black_surface2, :root.t_light .t_dark .t_surface2, .tm_xxt {--color:var(--t16);--colorHover:var(--t17);--colorPress:var(--t16);--colorFocus:var(--t15);--background:var(--t10);--backgroundHover:var(--t0);--backgroundPress:var(--t9);--backgroundFocus:var(--t12);--backgroundActive:var(--t10);--borderColor:var(--t11);--borderColorHover:var(--t12);--borderColorFocus:var(--t11);--borderColorPress:var(--t0);--color01:var(--t196);--color0075:var(--t197);--color005:var(--t198);--color0025:var(--t199);--color002:var(--t200);--color001:var(--t201);--background01:var(--t202);--background0075:var(--t203);--background005:var(--t204);--background0025:var(--t205);--background002:var(--t206);--background001:var(--t207);--background02:var(--t3);--background04:var(--t4);--background06:var(--t5);--background08:var(--t6);--outlineColor:var(--t208);}
@@ -1598,10 +1740,10 @@
     .t_yellow_SwitchThumb, .t_yellow_Tooltip, .t_yellow_accent {--accentBackground:var(--t1);--accentColor:var(--t0);--background0:var(--t598);--background02:var(--t582);--background04:var(--t583);--background06:var(--t584);--background08:var(--t585);--color1:var(--t597);--color2:var(--t596);--color3:var(--t595);--color4:var(--t594);--color5:var(--t593);--color6:var(--t592);--color7:var(--t591);--color8:var(--t590);--color9:var(--t589);--color10:var(--t588);--color11:var(--t587);--color12:var(--t586);--color0:var(--t581);--color02:var(--t616);--color04:var(--t617);--color06:var(--t618);--color08:var(--t619);--color:var(--t586);--colorHover:var(--t619);--colorPress:var(--t586);--colorFocus:var(--t587);--background:var(--t596);--backgroundHover:var(--t595);--backgroundPress:var(--t597);--backgroundFocus:var(--t595);--backgroundActive:var(--t596);--borderColor:var(--t594);--borderColorHover:var(--t593);--borderColorFocus:var(--t594);--borderColorPress:var(--t595);--placeholderColor:var(--t589);--colorTransparent:var(--t581);--color01:var(--t603);--color0075:var(--t604);--color005:var(--t605);--color0025:var(--t606);--color002:var(--t607);--color001:var(--t608);--background01:var(--t609);--background0075:var(--t610);--background005:var(--t611);--background0025:var(--t612);--background002:var(--t613);--background001:var(--t614);--outlineColor:var(--t615);}
   }
 .t_dark_yellow_SwitchThumb ::selection, .t_dark_yellow_Tooltip ::selection, .t_dark_yellow_accent ::selection{background:var(--color5);color:var(--color11)}
-:root.t_dark .t_light , :root.t_light, :root.t_light , .tm_xxt {--accentBackground:var(--t9);--accentColor:var(--t15);--background0:var(--t18);--background02:var(--t213);--background04:var(--t214);--background06:var(--t215);--background08:var(--t216);--color1:var(--t17);--color2:var(--t189);--color3:var(--t1);--color4:var(--t190);--color5:var(--t16);--color6:var(--t191);--color7:var(--t192);--color8:var(--t193);--color9:var(--t194);--color10:var(--t0);--color11:var(--t10);--color12:var(--t195);--color0:var(--t217);--color02:var(--t218);--color04:var(--t219);--color06:var(--t220);--color08:var(--t221);--color:var(--t195);--colorHover:var(--t195);--colorPress:var(--t195);--colorFocus:var(--t221);--background:var(--t189);--backgroundHover:var(--t17);--backgroundPress:var(--t1);--backgroundFocus:var(--t1);--backgroundActive:var(--t189);--borderColor:var(--t190);--borderColorHover:var(--t1);--borderColorFocus:var(--t190);--borderColorPress:var(--t16);--placeholderColor:var(--t194);--colorTransparent:var(--t217);--black1:var(--t23);--black2:var(--t24);--black3:var(--t25);--black4:var(--t26);--black5:var(--t27);--black6:var(--t28);--black7:var(--t29);--black8:var(--t30);--black9:var(--t31);--black10:var(--t32);--black11:var(--t33);--black12:var(--t34);--white1:var(--t35);--white2:var(--t36);--white3:var(--t37);--white4:var(--t38);--white5:var(--t39);--white6:var(--t40);--white7:var(--t41);--white8:var(--t42);--white9:var(--t43);--white10:var(--t44);--white11:var(--t45);--white12:var(--t46);--white:var(--t47);--white0:var(--t48);--white02:var(--t49);--white04:var(--t50);--white06:var(--t51);--white08:var(--t52);--black:var(--t53);--black0:var(--t54);--black02:var(--t55);--black04:var(--t56);--black06:var(--t57);--black08:var(--t58);--shadow1:var(--t620);--shadow2:var(--t621);--shadow3:var(--t622);--shadow4:var(--t623);--shadow5:var(--t61);--shadow6:var(--t624);--shadow7:var(--t57);--shadow8:var(--t625);--highlight1:var(--t626);--highlight2:var(--t65);--highlight3:var(--t627);--highlight4:var(--t66);--highlight5:var(--t50);--highlight6:var(--t628);--highlight7:var(--t629);--highlight8:var(--t69);--shadowColor:var(--t622);--gray1:var(--t630);--gray2:var(--t631);--gray3:var(--t632);--gray4:var(--t633);--gray5:var(--t634);--gray6:var(--t635);--gray7:var(--t636);--gray8:var(--t637);--gray9:var(--t638);--gray10:var(--t639);--gray11:var(--t640);--gray12:var(--t641);--blue1:var(--t642);--blue2:var(--t643);--blue3:var(--t644);--blue4:var(--t645);--blue5:var(--t646);--blue6:var(--t647);--blue7:var(--t648);--blue8:var(--t649);--blue9:var(--t90);--blue10:var(--t650);--blue11:var(--t651);--blue12:var(--t652);--red1:var(--t653);--red2:var(--t654);--red3:var(--t655);--red4:var(--t656);--red5:var(--t657);--red6:var(--t658);--red7:var(--t659);--red8:var(--t660);--red9:var(--t102);--red10:var(--t661);--red11:var(--t662);--red12:var(--t663);--yellow1:var(--t664);--yellow2:var(--t665);--yellow3:var(--t666);--yellow4:var(--t667);--yellow5:var(--t668);--yellow6:var(--t669);--yellow7:var(--t670);--yellow8:var(--t671);--yellow9:var(--t114);--yellow10:var(--t672);--yellow11:var(--t673);--yellow12:var(--t674);--green1:var(--t675);--green2:var(--t676);--green3:var(--t677);--green4:var(--t678);--green5:var(--t679);--green6:var(--t680);--green7:var(--t681);--green8:var(--t682);--green9:var(--t126);--green10:var(--t683);--green11:var(--t684);--green12:var(--t685);--orange1:var(--t686);--orange2:var(--t687);--orange3:var(--t688);--orange4:var(--t689);--orange5:var(--t690);--orange6:var(--t691);--orange7:var(--t692);--orange8:var(--t693);--orange9:var(--t138);--orange10:var(--t694);--orange11:var(--t695);--orange12:var(--t696);--pink1:var(--t697);--pink2:var(--t698);--pink3:var(--t699);--pink4:var(--t700);--pink5:var(--t701);--pink6:var(--t702);--pink7:var(--t703);--pink8:var(--t704);--pink9:var(--t150);--pink10:var(--t705);--pink11:var(--t706);--pink12:var(--t707);--purple1:var(--t708);--purple2:var(--t709);--purple3:var(--t710);--purple4:var(--t711);--purple5:var(--t712);--purple6:var(--t713);--purple7:var(--t714);--purple8:var(--t715);--purple9:var(--t162);--purple10:var(--t716);--purple11:var(--t717);--purple12:var(--t718);--teal1:var(--t719);--teal2:var(--t720);--teal3:var(--t721);--teal4:var(--t722);--teal5:var(--t723);--teal6:var(--t724);--teal7:var(--t725);--teal8:var(--t726);--teal9:var(--t174);--teal10:var(--t727);--teal11:var(--t728);--teal12:var(--t729);--neutral1:var(--t178);--neutral2:var(--t179);--neutral3:var(--t180);--neutral4:var(--t41);--neutral5:var(--t181);--neutral6:var(--t182);--neutral7:var(--t183);--neutral8:var(--t184);--neutral9:var(--t185);--neutral10:var(--t186);--neutral11:var(--t187);--neutral12:var(--t188);--accent1:var(--t7);--accent2:var(--t8);--accent3:var(--t9);--accent4:var(--t10);--accent5:var(--t0);--accent6:var(--t11);--accent7:var(--t12);--accent8:var(--t13);--accent9:var(--t14);--accent10:var(--t15);--accent11:var(--t16);--accent12:var(--t17);--color01:var(--t222);--color0075:var(--t223);--color005:var(--t224);--color0025:var(--t225);--color002:var(--t226);--color001:var(--t227);--background01:var(--t228);--background0075:var(--t229);--background005:var(--t230);--background0025:var(--t231);--background002:var(--t232);--background001:var(--t233);--outlineColor:var(--t234);}
+:root.t_dark .t_light , :root.t_light, :root.t_light , .tm_xxt {--accentBackground:var(--t9);--accentColor:var(--t15);--background0:var(--t18);--background02:var(--t213);--background04:var(--t214);--background06:var(--t215);--background08:var(--t216);--color1:var(--t17);--color2:var(--t189);--color3:var(--t1);--color4:var(--t190);--color5:var(--t16);--color6:var(--t191);--color7:var(--t192);--color8:var(--t193);--color9:var(--t194);--color10:var(--t0);--color11:var(--t10);--color12:var(--t195);--color0:var(--t217);--color02:var(--t218);--color04:var(--t219);--color06:var(--t220);--color08:var(--t221);--color:var(--t195);--colorHover:var(--t195);--colorPress:var(--t195);--colorFocus:var(--t221);--backgroundHover:var(--t17);--backgroundPress:var(--t1);--backgroundFocus:var(--t1);--backgroundActive:var(--t189);--borderColor:var(--t190);--borderColorHover:var(--t1);--borderColorFocus:var(--t190);--borderColorPress:var(--t16);--placeholderColor:var(--t194);--colorTransparent:var(--t217);--black1:var(--t23);--black2:var(--t24);--black3:var(--t25);--black4:var(--t26);--black5:var(--t27);--black6:var(--t28);--black7:var(--t29);--black8:var(--t30);--black9:var(--t31);--black10:var(--t32);--black11:var(--t33);--black12:var(--t34);--white1:var(--t35);--white2:var(--t36);--white3:var(--t37);--white4:var(--t38);--white5:var(--t39);--white6:var(--t40);--white7:var(--t41);--white8:var(--t42);--white9:var(--t43);--white10:var(--t44);--white11:var(--t45);--white12:var(--t46);--white0:var(--t48);--white02:var(--t49);--white04:var(--t50);--white06:var(--t51);--white08:var(--t52);--black0:var(--t54);--black02:var(--t55);--black04:var(--t56);--black06:var(--t57);--black08:var(--t58);--shadow1:var(--t620);--shadow2:var(--t621);--shadow3:var(--t622);--shadow4:var(--t623);--shadow5:var(--t61);--shadow6:var(--t624);--shadow7:var(--t57);--shadow8:var(--t625);--highlight1:var(--t626);--highlight2:var(--t65);--highlight3:var(--t627);--highlight4:var(--t66);--highlight5:var(--t50);--highlight6:var(--t628);--highlight7:var(--t629);--highlight8:var(--t69);--shadowColor:var(--t622);--gray1:var(--t630);--gray2:var(--t631);--gray3:var(--t632);--gray4:var(--t633);--gray5:var(--t634);--gray6:var(--t635);--gray7:var(--t636);--gray8:var(--t637);--gray9:var(--t638);--gray10:var(--t639);--gray11:var(--t640);--gray12:var(--t641);--blue1:var(--t642);--blue2:var(--t643);--blue3:var(--t644);--blue4:var(--t645);--blue5:var(--t646);--blue6:var(--t647);--blue7:var(--t648);--blue8:var(--t649);--blue9:var(--t90);--blue10:var(--t650);--blue11:var(--t651);--blue12:var(--t652);--red1:var(--t653);--red2:var(--t654);--red3:var(--t655);--red4:var(--t656);--red5:var(--t657);--red6:var(--t658);--red7:var(--t659);--red8:var(--t660);--red9:var(--t102);--red10:var(--t661);--red11:var(--t662);--red12:var(--t663);--yellow1:var(--t664);--yellow2:var(--t665);--yellow3:var(--t666);--yellow4:var(--t667);--yellow5:var(--t668);--yellow6:var(--t669);--yellow7:var(--t670);--yellow8:var(--t671);--yellow9:var(--t114);--yellow10:var(--t672);--yellow11:var(--t673);--yellow12:var(--t674);--green1:var(--t675);--green2:var(--t676);--green3:var(--t677);--green4:var(--t678);--green5:var(--t679);--green6:var(--t680);--green7:var(--t681);--green8:var(--t682);--green9:var(--t126);--green10:var(--t683);--green11:var(--t684);--green12:var(--t685);--orange1:var(--t686);--orange2:var(--t687);--orange3:var(--t688);--orange4:var(--t689);--orange5:var(--t690);--orange6:var(--t691);--orange7:var(--t692);--orange8:var(--t693);--orange9:var(--t138);--orange10:var(--t694);--orange11:var(--t695);--orange12:var(--t696);--pink1:var(--t697);--pink2:var(--t698);--pink3:var(--t699);--pink4:var(--t700);--pink5:var(--t701);--pink6:var(--t702);--pink7:var(--t703);--pink8:var(--t704);--pink9:var(--t150);--pink10:var(--t705);--pink11:var(--t706);--pink12:var(--t707);--purple1:var(--t708);--purple2:var(--t709);--purple3:var(--t710);--purple4:var(--t711);--purple5:var(--t712);--purple6:var(--t713);--purple7:var(--t714);--purple8:var(--t715);--purple9:var(--t162);--purple10:var(--t716);--purple11:var(--t717);--purple12:var(--t718);--teal1:var(--t719);--teal2:var(--t720);--teal3:var(--t721);--teal4:var(--t722);--teal5:var(--t723);--teal6:var(--t724);--teal7:var(--t725);--teal8:var(--t726);--teal9:var(--t174);--teal10:var(--t727);--teal11:var(--t728);--teal12:var(--t729);--neutral1:var(--t178);--neutral2:var(--t179);--neutral3:var(--t180);--neutral4:var(--t41);--neutral5:var(--t181);--neutral6:var(--t182);--neutral7:var(--t183);--neutral8:var(--t184);--neutral9:var(--t185);--neutral10:var(--t186);--neutral11:var(--t187);--neutral12:var(--t188);--accent1:var(--t7);--accent2:var(--t8);--accent3:var(--t9);--accent4:var(--t10);--accent5:var(--t0);--accent6:var(--t11);--accent7:var(--t12);--accent8:var(--t13);--accent9:var(--t14);--accent10:var(--t15);--accent11:var(--t16);--accent12:var(--t17);--color01:var(--t222);--color0075:var(--t223);--color005:var(--t224);--color0025:var(--t225);--color002:var(--t226);--color001:var(--t227);--background01:var(--t228);--background0075:var(--t229);--background005:var(--t230);--background0025:var(--t231);--background002:var(--t232);--background001:var(--t233);--outlineColor:var(--t234);}
 @media(prefers-color-scheme:light){
     body{background:var(--background);color:var(--color)}
-    :root {--accentBackground:var(--t9);--accentColor:var(--t15);--background0:var(--t18);--background02:var(--t213);--background04:var(--t214);--background06:var(--t215);--background08:var(--t216);--color1:var(--t17);--color2:var(--t189);--color3:var(--t1);--color4:var(--t190);--color5:var(--t16);--color6:var(--t191);--color7:var(--t192);--color8:var(--t193);--color9:var(--t194);--color10:var(--t0);--color11:var(--t10);--color12:var(--t195);--color0:var(--t217);--color02:var(--t218);--color04:var(--t219);--color06:var(--t220);--color08:var(--t221);--color:var(--t195);--colorHover:var(--t195);--colorPress:var(--t195);--colorFocus:var(--t221);--background:var(--t189);--backgroundHover:var(--t17);--backgroundPress:var(--t1);--backgroundFocus:var(--t1);--backgroundActive:var(--t189);--borderColor:var(--t190);--borderColorHover:var(--t1);--borderColorFocus:var(--t190);--borderColorPress:var(--t16);--placeholderColor:var(--t194);--colorTransparent:var(--t217);--black1:var(--t23);--black2:var(--t24);--black3:var(--t25);--black4:var(--t26);--black5:var(--t27);--black6:var(--t28);--black7:var(--t29);--black8:var(--t30);--black9:var(--t31);--black10:var(--t32);--black11:var(--t33);--black12:var(--t34);--white1:var(--t35);--white2:var(--t36);--white3:var(--t37);--white4:var(--t38);--white5:var(--t39);--white6:var(--t40);--white7:var(--t41);--white8:var(--t42);--white9:var(--t43);--white10:var(--t44);--white11:var(--t45);--white12:var(--t46);--white:var(--t47);--white0:var(--t48);--white02:var(--t49);--white04:var(--t50);--white06:var(--t51);--white08:var(--t52);--black:var(--t53);--black0:var(--t54);--black02:var(--t55);--black04:var(--t56);--black06:var(--t57);--black08:var(--t58);--shadow1:var(--t620);--shadow2:var(--t621);--shadow3:var(--t622);--shadow4:var(--t623);--shadow5:var(--t61);--shadow6:var(--t624);--shadow7:var(--t57);--shadow8:var(--t625);--highlight1:var(--t626);--highlight2:var(--t65);--highlight3:var(--t627);--highlight4:var(--t66);--highlight5:var(--t50);--highlight6:var(--t628);--highlight7:var(--t629);--highlight8:var(--t69);--shadowColor:var(--t622);--gray1:var(--t630);--gray2:var(--t631);--gray3:var(--t632);--gray4:var(--t633);--gray5:var(--t634);--gray6:var(--t635);--gray7:var(--t636);--gray8:var(--t637);--gray9:var(--t638);--gray10:var(--t639);--gray11:var(--t640);--gray12:var(--t641);--blue1:var(--t642);--blue2:var(--t643);--blue3:var(--t644);--blue4:var(--t645);--blue5:var(--t646);--blue6:var(--t647);--blue7:var(--t648);--blue8:var(--t649);--blue9:var(--t90);--blue10:var(--t650);--blue11:var(--t651);--blue12:var(--t652);--red1:var(--t653);--red2:var(--t654);--red3:var(--t655);--red4:var(--t656);--red5:var(--t657);--red6:var(--t658);--red7:var(--t659);--red8:var(--t660);--red9:var(--t102);--red10:var(--t661);--red11:var(--t662);--red12:var(--t663);--yellow1:var(--t664);--yellow2:var(--t665);--yellow3:var(--t666);--yellow4:var(--t667);--yellow5:var(--t668);--yellow6:var(--t669);--yellow7:var(--t670);--yellow8:var(--t671);--yellow9:var(--t114);--yellow10:var(--t672);--yellow11:var(--t673);--yellow12:var(--t674);--green1:var(--t675);--green2:var(--t676);--green3:var(--t677);--green4:var(--t678);--green5:var(--t679);--green6:var(--t680);--green7:var(--t681);--green8:var(--t682);--green9:var(--t126);--green10:var(--t683);--green11:var(--t684);--green12:var(--t685);--orange1:var(--t686);--orange2:var(--t687);--orange3:var(--t688);--orange4:var(--t689);--orange5:var(--t690);--orange6:var(--t691);--orange7:var(--t692);--orange8:var(--t693);--orange9:var(--t138);--orange10:var(--t694);--orange11:var(--t695);--orange12:var(--t696);--pink1:var(--t697);--pink2:var(--t698);--pink3:var(--t699);--pink4:var(--t700);--pink5:var(--t701);--pink6:var(--t702);--pink7:var(--t703);--pink8:var(--t704);--pink9:var(--t150);--pink10:var(--t705);--pink11:var(--t706);--pink12:var(--t707);--purple1:var(--t708);--purple2:var(--t709);--purple3:var(--t710);--purple4:var(--t711);--purple5:var(--t712);--purple6:var(--t713);--purple7:var(--t714);--purple8:var(--t715);--purple9:var(--t162);--purple10:var(--t716);--purple11:var(--t717);--purple12:var(--t718);--teal1:var(--t719);--teal2:var(--t720);--teal3:var(--t721);--teal4:var(--t722);--teal5:var(--t723);--teal6:var(--t724);--teal7:var(--t725);--teal8:var(--t726);--teal9:var(--t174);--teal10:var(--t727);--teal11:var(--t728);--teal12:var(--t729);--neutral1:var(--t178);--neutral2:var(--t179);--neutral3:var(--t180);--neutral4:var(--t41);--neutral5:var(--t181);--neutral6:var(--t182);--neutral7:var(--t183);--neutral8:var(--t184);--neutral9:var(--t185);--neutral10:var(--t186);--neutral11:var(--t187);--neutral12:var(--t188);--accent1:var(--t7);--accent2:var(--t8);--accent3:var(--t9);--accent4:var(--t10);--accent5:var(--t0);--accent6:var(--t11);--accent7:var(--t12);--accent8:var(--t13);--accent9:var(--t14);--accent10:var(--t15);--accent11:var(--t16);--accent12:var(--t17);--color01:var(--t222);--color0075:var(--t223);--color005:var(--t224);--color0025:var(--t225);--color002:var(--t226);--color001:var(--t227);--background01:var(--t228);--background0075:var(--t229);--background005:var(--t230);--background0025:var(--t231);--background002:var(--t232);--background001:var(--t233);--outlineColor:var(--t234);}
+    :root {--accentBackground:var(--t9);--accentColor:var(--t15);--background0:var(--t18);--background02:var(--t213);--background04:var(--t214);--background06:var(--t215);--background08:var(--t216);--color1:var(--t17);--color2:var(--t189);--color3:var(--t1);--color4:var(--t190);--color5:var(--t16);--color6:var(--t191);--color7:var(--t192);--color8:var(--t193);--color9:var(--t194);--color10:var(--t0);--color11:var(--t10);--color12:var(--t195);--color0:var(--t217);--color02:var(--t218);--color04:var(--t219);--color06:var(--t220);--color08:var(--t221);--color:var(--t195);--colorHover:var(--t195);--colorPress:var(--t195);--colorFocus:var(--t221);--backgroundHover:var(--t17);--backgroundPress:var(--t1);--backgroundFocus:var(--t1);--backgroundActive:var(--t189);--borderColor:var(--t190);--borderColorHover:var(--t1);--borderColorFocus:var(--t190);--borderColorPress:var(--t16);--placeholderColor:var(--t194);--colorTransparent:var(--t217);--black1:var(--t23);--black2:var(--t24);--black3:var(--t25);--black4:var(--t26);--black5:var(--t27);--black6:var(--t28);--black7:var(--t29);--black8:var(--t30);--black9:var(--t31);--black10:var(--t32);--black11:var(--t33);--black12:var(--t34);--white1:var(--t35);--white2:var(--t36);--white3:var(--t37);--white4:var(--t38);--white5:var(--t39);--white6:var(--t40);--white7:var(--t41);--white8:var(--t42);--white9:var(--t43);--white10:var(--t44);--white11:var(--t45);--white12:var(--t46);--white0:var(--t48);--white02:var(--t49);--white04:var(--t50);--white06:var(--t51);--white08:var(--t52);--black0:var(--t54);--black02:var(--t55);--black04:var(--t56);--black06:var(--t57);--black08:var(--t58);--shadow1:var(--t620);--shadow2:var(--t621);--shadow3:var(--t622);--shadow4:var(--t623);--shadow5:var(--t61);--shadow6:var(--t624);--shadow7:var(--t57);--shadow8:var(--t625);--highlight1:var(--t626);--highlight2:var(--t65);--highlight3:var(--t627);--highlight4:var(--t66);--highlight5:var(--t50);--highlight6:var(--t628);--highlight7:var(--t629);--highlight8:var(--t69);--shadowColor:var(--t622);--gray1:var(--t630);--gray2:var(--t631);--gray3:var(--t632);--gray4:var(--t633);--gray5:var(--t634);--gray6:var(--t635);--gray7:var(--t636);--gray8:var(--t637);--gray9:var(--t638);--gray10:var(--t639);--gray11:var(--t640);--gray12:var(--t641);--blue1:var(--t642);--blue2:var(--t643);--blue3:var(--t644);--blue4:var(--t645);--blue5:var(--t646);--blue6:var(--t647);--blue7:var(--t648);--blue8:var(--t649);--blue9:var(--t90);--blue10:var(--t650);--blue11:var(--t651);--blue12:var(--t652);--red1:var(--t653);--red2:var(--t654);--red3:var(--t655);--red4:var(--t656);--red5:var(--t657);--red6:var(--t658);--red7:var(--t659);--red8:var(--t660);--red9:var(--t102);--red10:var(--t661);--red11:var(--t662);--red12:var(--t663);--yellow1:var(--t664);--yellow2:var(--t665);--yellow3:var(--t666);--yellow4:var(--t667);--yellow5:var(--t668);--yellow6:var(--t669);--yellow7:var(--t670);--yellow8:var(--t671);--yellow9:var(--t114);--yellow10:var(--t672);--yellow11:var(--t673);--yellow12:var(--t674);--green1:var(--t675);--green2:var(--t676);--green3:var(--t677);--green4:var(--t678);--green5:var(--t679);--green6:var(--t680);--green7:var(--t681);--green8:var(--t682);--green9:var(--t126);--green10:var(--t683);--green11:var(--t684);--green12:var(--t685);--orange1:var(--t686);--orange2:var(--t687);--orange3:var(--t688);--orange4:var(--t689);--orange5:var(--t690);--orange6:var(--t691);--orange7:var(--t692);--orange8:var(--t693);--orange9:var(--t138);--orange10:var(--t694);--orange11:var(--t695);--orange12:var(--t696);--pink1:var(--t697);--pink2:var(--t698);--pink3:var(--t699);--pink4:var(--t700);--pink5:var(--t701);--pink6:var(--t702);--pink7:var(--t703);--pink8:var(--t704);--pink9:var(--t150);--pink10:var(--t705);--pink11:var(--t706);--pink12:var(--t707);--purple1:var(--t708);--purple2:var(--t709);--purple3:var(--t710);--purple4:var(--t711);--purple5:var(--t712);--purple6:var(--t713);--purple7:var(--t714);--purple8:var(--t715);--purple9:var(--t162);--purple10:var(--t716);--purple11:var(--t717);--purple12:var(--t718);--teal1:var(--t719);--teal2:var(--t720);--teal3:var(--t721);--teal4:var(--t722);--teal5:var(--t723);--teal6:var(--t724);--teal7:var(--t725);--teal8:var(--t726);--teal9:var(--t174);--teal10:var(--t727);--teal11:var(--t728);--teal12:var(--t729);--neutral1:var(--t178);--neutral2:var(--t179);--neutral3:var(--t180);--neutral4:var(--t41);--neutral5:var(--t181);--neutral6:var(--t182);--neutral7:var(--t183);--neutral8:var(--t184);--neutral9:var(--t185);--neutral10:var(--t186);--neutral11:var(--t187);--neutral12:var(--t188);--accent1:var(--t7);--accent2:var(--t8);--accent3:var(--t9);--accent4:var(--t10);--accent5:var(--t0);--accent6:var(--t11);--accent7:var(--t12);--accent8:var(--t13);--accent9:var(--t14);--accent10:var(--t15);--accent11:var(--t16);--accent12:var(--t17);--color01:var(--t222);--color0075:var(--t223);--color005:var(--t224);--color0025:var(--t225);--color002:var(--t226);--color001:var(--t227);--background01:var(--t228);--background0075:var(--t229);--background005:var(--t230);--background0025:var(--t231);--background002:var(--t232);--background001:var(--t233);--outlineColor:var(--t234);}
   }
 .t_light ::selection{background:var(--color5);color:var(--color11)}
 :root.t_dark .t_light .t_Button, :root.t_dark .t_light .t_SliderThumb, :root.t_dark .t_light .t_Switch, :root.t_dark .t_light .t_surface2, :root.t_dark .t_light .t_white_Button, :root.t_dark .t_light .t_white_SliderThumb, :root.t_dark .t_light .t_white_Switch, :root.t_dark .t_light .t_white_surface2, :root.t_light .t_Button, :root.t_light .t_SliderThumb, :root.t_light .t_Switch, :root.t_light .t_surface2, :root.t_light .t_white_Button, :root.t_light .t_white_SliderThumb, :root.t_light .t_white_Switch, :root.t_light .t_white_surface2, .tm_xxt {--color:var(--t10);--colorHover:var(--t10);--colorPress:var(--t10);--colorFocus:var(--t195);--background:var(--t190);--backgroundHover:var(--t1);--backgroundPress:var(--t16);--backgroundFocus:var(--t192);--backgroundActive:var(--t190);--borderColor:var(--t191);--borderColorHover:var(--t16);--borderColorFocus:var(--t191);--borderColorPress:var(--t192);--color01:var(--t222);--color0075:var(--t223);--color005:var(--t224);--color0025:var(--t225);--color002:var(--t226);--color001:var(--t227);--background01:var(--t228);--background0075:var(--t229);--background005:var(--t230);--background0025:var(--t231);--background002:var(--t232);--background001:var(--t233);--background02:var(--t213);--background04:var(--t214);--background06:var(--t215);--background08:var(--t216);--outlineColor:var(--t234);}

package/dist/theme.css

@@ -227,7 +227,7 @@
    So EVERY token whose dark value is a --white-* rung must be restated below,
    and check-tokens.mjs fails the build if one is missed — that class of bug is
    silent (the border simply stops existing) and has shipped before. */
-.light{
+.light, :root.t_light{
   color-scheme:light;
   --background:#ffffff;
   --foreground:#0a0a0a;
@@ -606,7 +606,7 @@
    obvious spelling would invalidate the whole declaration and take the drop
    shadow down with it. A zero-size transparent shadow composes to nothing and
    costs nothing. */
-.light{
+.light, :root.t_light{
   --shadow-floating:0 24px 60px -16px rgb(0 0 0 / .18);
   --shadow-inset-hairline:inset 0 0 0 1px rgb(0 0 0 / .10);
   --edge-highlight:inset 0 0 0 0 transparent;
@@ -893,7 +893,7 @@
      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{scrollbar-color:rgb(0 0 0 / .18) transparent}
+  .light, :root.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)}
@@ -1062,20 +1062,155 @@
 [data-touch-y="23"]::after { top: -23px; bottom: -23px; }
 [data-touch-y="24"]::after { top: -24px; bottom: -24px; }
 
-/* Elevation ladder — the shadow steps components name by class. */
-.elevation-1 { box-shadow: var(--hz-elevation-1, 0 1px 2px rgba(0, 0, 0, 0.16)); }
-.elevation-2 { box-shadow: var(--hz-elevation-2, 0 4px 12px rgba(0, 0, 0, 0.24)); }
-.elevation-3 { box-shadow: var(--hz-elevation-3, 0 8px 24px rgba(0, 0, 0, 0.36)); }
-.elevation-4 { box-shadow: var(--hz-elevation-4, 0 16px 48px rgba(0, 0, 0, 0.44)); }
+/* The material, the elevation ladder, the scrim and the row separators live in
+   src/glass.css and are inlined here by scripts/compose-theme.mjs — one home,
+   two entry points (`@hanzo/ui/theme.css` and `@hanzo/ui/glass.css`), so a host
+   that wants only the chrome material does not have to take the token layer
+   with it.
 
-/* Glass — the ONE frosted material (see backends/gui/glass.tsx). The component
-   stands as a solid raised panel; only a browser that can actually blur the
-   backdrop trades it for the translucent material, so content never sits on
-   see-through ground without the blur. !important beats the compiled bg atom. */
+   They used to be four `.elevation-*` rules reading `var(--hz-elevation-N, …)`.
+   Nothing in this repo, in @hanzo/design or in any consumer ever DEFINED an
+   `--hz-elevation-*` variable, so every one of those resolved to its fallback:
+   an indirection through a name that does not exist, with a hardcoded shadow
+   behind it, next to a design system that publishes real ones. */
+
+/* Glass — the material floating chrome is made of, and the ladder it stands on.
+ *
+ *   import '@hanzo/ui/glass.css'      // this slice alone
+ *   import '@hanzo/ui/theme.css'      // the whole sheet; this is inlined in it
+ *
+ * Menus, dialogs, popovers, toasts, sticky bars: things with page UNDER them.
+ * That last clause is the whole rule. Vibrancy is a lens — translucent ground
+ * plus a backdrop blur — so it shows a softened version of whatever it covers,
+ * and covering nothing but the flat canvas it has nothing to soften. An in-flow
+ * card wearing this is not glass; it is the page with extra steps. So: over
+ * content -> glass, in the flow -> the surface ladder. There is no third case.
+ *
+ * ── Values come from @hanzo/design ──────────────────────────────────────────
+ * Every colour, shadow and light below is a design token. The fallbacks are
+ * design's OWN published values, present so a host that imports this file
+ * without design's sheet still gets a ladder instead of a silently-dropped
+ * declaration (an undefined var() invalidates the whole property). They are a
+ * mirror, not a second opinion — glass.test.ts reads @hanzo/design/styles.css
+ * and fails if any of them stops matching, so the copy cannot drift.
+ */
+
+/* ── The material ───────────────────────────────────────────────────────────
+   Applied BY SLOT, not by call site. Every surface below is floating chrome by
+   construction — a popover is over the page or it is nothing — so which of them
+   is glass was never a decision a call site should get to make. It was making
+   it anyway: in the console, of 135 floating surfaces exactly ONE had reached
+   for the material by hand and a dozen dialogs had gone the other way and
+   pinned an opaque fill. Reaching them one by one is 134 edits that agree today
+   and drift apart on the next one somebody adds. A new dialog is glass because
+   it is a dialog.
+
+   `.glass` is here for the same reason `glass()` exists in the recipes module:
+   a hand-rolled bar or a custom menu is floating chrome that no slot names.
+
+   The ground is derived from --background rather than fixed, so the material
+   follows the theme instead of assuming a dark one.
+
+   The opaque `background-color` outside the @supports block is load-bearing
+   rather than belt-and-braces: a browser that cannot blur gets no rule at all
+   from inside it, and a menu with no background is a menu you read the page
+   through. !important beats the compiled atomic background class, which lands
+   in an inline <style> a bundler orders after this sheet, and it beats the call
+   sites that pin a fill by hand — those become no-ops instead of holes. */
 @supports (backdrop-filter: blur(8px)) {
-  [data-slot="glass"] {
+  .glass,
+  [data-slot="glass"],
+  [data-slot="dialog-content"],
+  [data-slot="popover-content"],
+  [data-slot="select-content"],
+  [data-slot="dropdown-menu-content"],
+  [data-slot="dropdown-menu-sub-content"],
+  [data-slot="tooltip-content"] {
     background-color: color-mix(in oklab, var(--background) 72%, transparent) !important;
     -webkit-backdrop-filter: blur(20px) saturate(1.8);
     backdrop-filter: blur(20px) saturate(1.8);
   }
 }
+
+/* ── Depth — three rungs, and the lit edge is the load-bearing half ──────────
+   A cast shadow is how a light page shows lift. On a near-black canvas it is
+   nearly free of information: black on near-black moves no pixels, so a raised
+   panel wearing only a shadow reads exactly as flat as one wearing none. What
+   says "this surface is above that one" in a dark UI is the LIT EDGE — the top
+   lip catching light, which is why every macOS/iOS glass panel has one. Design
+   spends the same two tokens for the same reason and zeroes --edge-highlight in
+   `.light`, where a white line on a white card is nothing and the drop does all
+   the work: one composition, both themes, no branch here.
+
+   Levels are a LADDER, not a palette — 1 rests in the flow, 2 lifts off it, 3
+   floats over the page. Nothing needs a fourth; if something seems to, it is
+   sitting at the wrong level.
+
+   Anchored chrome — a menu pinned to the control that opened it, a tooltip to
+   its target — is rung 2. A modal has no anchor and a scrim of its own, so it
+   floats free at 3. Those slots share the rung's rule rather than restating its
+   value, so the ladder cannot come apart from the surfaces standing on it.
+
+   Glass over glass (a select opened inside a dialog) is deliberately left to
+   stack: two 72% grounds land near 92%, so the nested surface reads as MORE
+   solid than its parent, which is the right answer and the one macOS gives. */
+.elevation-1 {
+  box-shadow:
+    var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
+    var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .40)) !important;
+}
+
+.elevation-2,
+[data-slot="popover-content"],
+[data-slot="select-content"],
+[data-slot="dropdown-menu-content"],
+[data-slot="dropdown-menu-sub-content"],
+[data-slot="tooltip-content"] {
+  box-shadow:
+    var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
+    var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55)) !important;
+}
+
+.elevation-3,
+[data-slot="dialog-content"] {
+  box-shadow:
+    var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
+    var(--shadow-floating, 0 24px 60px -16px rgb(0 0 0 / .75)) !important;
+}
+
+/* ── The scrim ──────────────────────────────────────────────────────────────
+   The dim that makes a floating panel read as floating rather than as more
+   page. gui's overlay dims TWICE — a translucent ground under a further
+   `opacity` — landing at about a quarter black. Opaque chrome gets away with
+   it; glass does not, because the blur behind a translucent panel only reads as
+   depth when the ground behind it is genuinely darker.
+
+   One value, in one place: the recipes module reads the same token, so the dim
+   behind a component dialog and the dim behind a hand-rolled one are the same
+   dim by construction rather than by two people remembering a number. */
+[data-slot="dialog-overlay"] {
+  opacity: 1;
+  background-color: var(--surface-scrim, rgb(0 0 0 / .8));
+}
+
+/* ── Grouped rows ───────────────────────────────────────────────────────────
+   One card, hairlines between its rows — the macOS settings group. Four
+   separate cards for four toggles reads as four unrelated decisions, each with
+   its own four edges; the same four inside one card reads as one set and drops
+   twelve edges of noise.
+
+   The separator is drawn by the PARENT, because only the parent knows which
+   child is last. Every by-hand version either left a trailing hairline sitting
+   against the card's own bottom border (two parallel lines, 1px apart) or made
+   each row take a `first` flag it should never have needed. `> * + *` has
+   neither failure mode and needs nothing from the call site.
+
+   Pair with `overflow: hidden` on the card (the `rows` recipe does) so the
+   separators stop at the radius instead of poking through the rounded corner.
+
+   --borderColor first: that is the variable the gui theme scope re-bases, and
+   it is what a card's own edge is drawn with. Falling through to --border keeps
+   a host that has design's tokens but no gui scope from losing the line. */
+[data-slot="rows"] > * + * {
+  border-top: 1px solid var(--borderColor, var(--border));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.0.47",
+  "version": "8.0.49",
   "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": {
@@ -38,6 +38,13 @@
       "import": "./dist/core/tokens.js"
     },
     "./theme.css": "./dist/theme.css",
+    "./glass.css": "./dist/glass.css",
+    "./glass": {
+      "types": "./dist/glass.d.ts",
+      "import": "./dist/glass.js",
+      "require": "./dist/glass.cjs",
+      "default": "./dist/glass.js"
+    },
     "./product": {
       "types": "./dist/product/index.d.ts",
       "import": "./dist/product/index.js",
@@ -232,7 +239,7 @@
     "tc": "tsc --noEmit",
     "typecheck": "tsc --noEmit",
     "typecheck:ui": "tsc -p tsconfig.check.json",
-    "test": "vitest run && node scripts/consumer-test.mjs && node scripts/consumer-webpack.mjs",
+    "test": "pnpm run test:unit",
     "test:watch": "vitest",
     "test:consumer": "node scripts/consumer-test.mjs",
     "test:unit": "vitest run",