@hanzo/ui 8.0.76 → 8.0.81

package/dist/styles.css

@@ -590,6 +590,51 @@
   --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55);
   --shadow-xl:0 20px 25px -5px rgb(0 0 0 / .60), 0 8px 10px -6px rgb(0 0 0 / .60);
   --shadow-2xl:var(--shadow-floating);
+
+  /* ——— the paper ——— */
+  /* Depth carries STATE, not decoration: which sheet is the workspace, which is
+     the tool in use, which one opened. Reach for a level before a border — if
+     two surfaces need separating, RAISE one rather than outline both, and a
+     surface that is already raised does not also need a box drawn round it.
+
+     A level is a tint AND the light on it, published as a pair, because the
+     alternative — every component composing its own `--edge-highlight,
+     --shadow-*` — is how two panels on one screen end up lit from two
+     directions. Every rung here is pure vertical: a 1px inset line along the
+     top edge, a drop straight down. One origin, above and slightly in front.
+
+     The tints are the surface recipes rather than new values, so sheets stack
+     the way paper does: each is an alpha-white wash, one laid on another lands
+     a step lighter, and the stack converges on #262626 instead of blowing out.
+
+     Nothing here is restated in `.light`, deliberately: every part defers to a
+     token that already flips, so the ramp inverts with the theme for free. */
+  --sheet-0:var(--surface-page);            /* the workspace ground             */
+  --sheet-1:var(--surface-card);            /* an active tool                   */
+  --sheet-2:var(--surface-card-emphasis);   /* what opened, or what is inside   */
+  /* The drops are spelled out rather than read from the t-shirt ramp above, and
+     that is the whole reason this ladder can be shared. `--shadow-sm` is a name
+     this package does not own — @hanzo/brand declares the same names at :root
+     with white-canvas alphas, and load order decides who wins — so a rung built
+     on one is a rung somebody else can flatten. `--shadow-sheet-*` is ours
+     alone, which is what lets @hanzo/ui's `.elevation-*` read it instead of
+     keeping a private copy. The numbers ARE rung 1 and rung 2 of the ramp; if
+     one moves, move both. `--edge-highlight` stays deferred: it is role-named,
+     uncollided, and its `.light` zeroing is what makes one value work on both
+     canvases. */
+  --shadow-sheet-1:var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40);
+  --shadow-sheet-2:var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55);
+
+  /* The fold — a corner turned back, and the one mark that means THIS OPENS.
+     Ornament nowhere: a sheet that does not expand does not wear one.
+     It is a background-image, so it costs no element and no pseudo-element —
+     paint it on the sheet itself and square that corner
+     (`border-bottom-right-radius:0`), because a folded corner is not round.
+     The flap catches the light like every other surface; the crease is the
+     hairline; both defer, so both invert. */
+  --fold:12px;
+  --fold-face:linear-gradient(315deg,var(--glass-strong) 0,var(--glass-strong) calc(var(--fold) - 1px),var(--border-strong) calc(var(--fold) - 1px),var(--border-strong) var(--fold),transparent var(--fold)); /* @kind color */
+
   /* Ambient hero glow — a single white radial, blurred 120px, low opacity. */
   --glow-hero:radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%); /* @kind color */
   --glow-hero-blur:120px;
@@ -622,6 +667,11 @@
    costs nothing. */
 .light, :root.t_light, .t_light{
   --shadow-floating:0 24px 60px -16px rgb(0 0 0 / .18);
+  /* On white the drop does all of it, so the paper rungs are restated here even
+     though check 4 does not demand it — their white is inside --edge-highlight,
+     which flips underneath. Rung 1 and rung 2 of the light ramp, same as dark. */
+  --shadow-sheet-1:var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .06);
+  --shadow-sheet-2:var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .09),0 4px 6px -4px rgb(0 0 0 / .07);
   --shadow-inset-hairline:inset 0 0 0 1px rgb(0 0 0 / .10);
   --edge-highlight:inset 0 0 0 0 transparent;
   --bloom:0 6px 20px -4px rgb(0 0 0 / .18);
@@ -1162,19 +1212,66 @@
    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. */
+   sites that pin a fill by hand — those become no-ops instead of holes.
+
+   EVERY floating slot the package emits is here. It was seven, and the three it
+   left out were not obscure: AlertDialog is a MODAL — the one surface that
+   cannot be anything but floating — and it was opaque beside a glass Dialog.
+   ContextMenu and HoverCard are anchored menus beside glass DropdownMenu and
+   glass Popover. That is precisely the drift this file exists to stop, still
+   present in the file that stops it, which is worth stating plainly: a rule
+   that attaches the material to the slot only holds if every slot is named.
+   The list is checked against what the components actually emit, so the next
+   floating slot somebody adds fails the test rather than the eye. */
 @supports (backdrop-filter: blur(8px)) {
   .glass,
   [data-slot="glass"],
   [data-slot="dialog-content"],
+  [data-slot="alert-dialog-content"],
   [data-slot="popover-content"],
   [data-slot="select-content"],
   [data-slot="dropdown-menu-content"],
   [data-slot="dropdown-menu-sub-content"],
+  [data-slot="context-menu-content"],
+  [data-slot="context-menu-sub-content"],
+  [data-slot="hover-card-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);
+    /* ── The dispersion ──────────────────────────────────────────────────────
+       Glass splits light at the EDGE. That is the whole of the physics and the
+       whole of the rule: the body of a pane shows you what is behind it, and the
+       rim is where the angle is steep enough to spread the spectrum. So the fill
+       stays monochrome — the brand is monochrome and text has to sit on it — and
+       the colour lives in one pixel at the top lip.
+
+       LINEAR, ACROSS THE LIP — never conic around the box. The composer's note
+       below records what conic costs on a rectangle: the long edges take a wide
+       angular slice and the short sides almost none, so one side wears blue and
+       the opposite burnt orange, and the ring reads as off-centre. Swept along
+       one edge instead, the stops are evenly spaced at any aspect ratio, so a
+       1000px dialog and a 90px tooltip disperse alike.
+
+       Peak alpha .16, on a band two pixels tall, one pixel DOWN. Both numbers
+       were measured rather than chosen. The lit edge is an inset box-shadow, and
+       a box-shadow paints over the background — so the first version put the
+       spectrum in the same pixel the white lip occupies and the lip won: at ×6
+       the rim was a neutral hairline with no colour in it at all. Sitting the
+       band one pixel inside puts it where a real pane disperses anyway, just
+       behind the specular line, and it is legible there at half the alpha a
+       collision would have needed. Three pixels at .22 was tried too and reads
+       as a coloured stroke somebody drew, which is a different thing entirely.
+
+       That is also the difference between this and the full-wheel rainbow that
+       was tried and reverted: not a different palette, a different AREA. Colour
+       over a whole surface makes that surface the only coloured thing in the
+       product; colour along its rim reads as the material catching light, which
+       is the one thing chrome is allowed to say. */
+    background-image: var(--glass-prism) !important;
+    background-repeat: no-repeat !important;
+    background-size: 100% 2px !important;
+    background-position: 0 1px !important;
   }
 }
 
@@ -1228,6 +1325,24 @@
   --glass-shadow-1: 0 1px 2px 0 rgb(0 0 0 / .40);
   --glass-shadow-2: 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55);
   --glass-shadow-3: 0 24px 60px -16px rgb(0 0 0 / .75);
+
+  /* The spectrum the lip disperses. Declared here for the same reason the drops
+     above are: a name this package owns cannot be outranked by a sheet that
+     happens to load later. Nothing else ships a --glass-prism.
+
+     Five stops, blue through violet, rose, amber, to a cool green — the order
+     light actually comes apart in, so it reads as refraction rather than as a
+     palette somebody chose. Alphas .13-.16: measured at ×6 against the white lip
+     that sits a pixel above, high enough to read there and low enough that at
+     1:1 it is a tinge. A theme that wants none of it sets this to `none` and the
+     rim goes back to being the lit edge alone. */
+  --glass-prism:
+    linear-gradient(90deg,
+      rgb(120 170 255 / .16) 0%,
+      rgb(178 142 255 / .15) 24%,
+      rgb(255 146 198 / .13) 48%,
+      rgb(255 190 124 / .15) 72%,
+      rgb(138 228 208 / .16) 100%);
 }
 
 .light, :root.t_light, .t_light {
@@ -1247,6 +1362,9 @@
 [data-slot="select-content"],
 [data-slot="dropdown-menu-content"],
 [data-slot="dropdown-menu-sub-content"],
+[data-slot="context-menu-content"],
+[data-slot="context-menu-sub-content"],
+[data-slot="hover-card-content"],
 [data-slot="tooltip-content"] {
   box-shadow:
     var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
@@ -1254,12 +1372,38 @@
 }
 
 .elevation-3,
-[data-slot="dialog-content"] {
+[data-slot="dialog-content"],
+[data-slot="alert-dialog-content"] {
   box-shadow:
     var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
     var(--glass-shadow-3) !important;
 }
 
+/* ── The fold — the one mark that means an item opens ────────────────────────
+   A corner turned back, painted onto the sheet itself. It is a class and not a
+   pair of style props because gui compiles those into atomic classes and a
+   background-image is not one of the properties it maps; and because a fold has
+   exactly one spelling, so the call site should not be able to invent a second
+   one. `--fold-face` is @hanzo/design's, with the dark value inline so a host
+   that took this sheet without the token layer still gets a corner rather than
+   a silently-dropped declaration.
+
+   The corner is SQUARED, not rounded: a folded corner is a straight crease, and
+   a rounded one under a triangle reads as a rendering fault. That is also why
+   this carries !important — the radius it has to beat is a compiled style prop.
+
+   Spend it only where the thing expands. A fold on a surface that opens nothing
+   is a chevron that never turns. */
+.fold {
+  background-image: var(--fold-face,
+    linear-gradient(315deg,
+      rgb(255 255 255 / .08) 0, rgb(255 255 255 / .08) 11px,
+      rgb(255 255 255 / .16) 11px, rgb(255 255 255 / .16) 12px,
+      transparent 12px)) !important;
+  background-repeat: no-repeat !important;
+  border-bottom-right-radius: 0 !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
@@ -1279,7 +1423,8 @@
    palette: `rgba(0,0,0,.5)` under `opacity: .5` — a quarter black, exactly the
    double dim these two lines exist to end. A rule written to beat a compiled
    class has to be written with the weight to beat one. */
-[data-slot="dialog-overlay"] {
+[data-slot="dialog-overlay"],
+[data-slot="alert-dialog-overlay"] {
   opacity: 1 !important;
   background-color: var(--surface-scrim, rgb(0 0 0 / .8)) !important;
 }
@@ -2315,6 +2460,7 @@
 :root ._bg-background{background-color:var(--background);}
 :root ._bg-backgroundA94988999{background-color:var(--backgroundActive);}
 :root ._bg-borderColor{background-color:var(--borderColor);}
+:root ._bg-color1{background-color:var(--color1);}
 :root ._bg-color12{background-color:var(--color12);}
 :root ._bg-color2{background-color:var(--color2);}
 :root ._bg-color3{background-color:var(--color3);}
@@ -2322,6 +2468,8 @@
 :root ._bg-color5{background-color:var(--color5);}
 :root ._bg-color6{background-color:var(--color6);}
 :root ._bg-red9{background-color:var(--red9);}
+:root ._bg-sheet-1rgb31918056171{background-color:var(--sheet-1, rgb(38 38 38 / .5));}
+:root ._bg-sheet-2rgb3669803178{background-color:var(--sheet-2, rgb(38 38 38 / .75));}
 :root ._bg-transparent{background-color:transparent;}
 :root ._bls-solid._bls-solid{border-left-style:solid;}
 :root:root:root  ._borderBottomColor-0active-borderColor._borderBottomColor-0active-borderColor:active{border-bottom-color:var(--borderColor) !important;}
@@ -2338,6 +2486,7 @@
 @media (hover) {:root:root  ._borderBottomColor-0hover-color6._borderBottomColor-0hover-color6:hover{border-bottom-color:var(--color6) !important;}}
 @media (hover) {:root:root  ._borderBottomColor-0hover-color7._borderBottomColor-0hover-color7:hover{border-bottom-color:var(--color7) !important;}}
 @media (hover) {:root:root  ._borderBottomColor-0hover-color8._borderBottomColor-0hover-color8:hover{border-bottom-color:var(--color8) !important;}}
+@media (hover) {:root:root  ._borderBottomColor-0hover-transparent._borderBottomColor-0hover-transparent:hover{border-bottom-color:transparent !important;}}
 :root ._borderBottomColor-backgroundF3405682._borderBottomColor-backgroundF3405682{border-bottom-color:var(--backgroundFocus);}
 :root ._borderBottomColor-borderColor._borderBottomColor-borderColor{border-bottom-color:var(--borderColor);}
 :root ._borderBottomColor-color12._borderBottomColor-color12{border-bottom-color:var(--color12);}
@@ -2360,6 +2509,7 @@
 @media (hover) {:root:root  ._borderLeftColor-0hover-color6._borderLeftColor-0hover-color6:hover{border-left-color:var(--color6) !important;}}
 @media (hover) {:root:root  ._borderLeftColor-0hover-color7._borderLeftColor-0hover-color7:hover{border-left-color:var(--color7) !important;}}
 @media (hover) {:root:root  ._borderLeftColor-0hover-color8._borderLeftColor-0hover-color8:hover{border-left-color:var(--color8) !important;}}
+@media (hover) {:root:root  ._borderLeftColor-0hover-transparent._borderLeftColor-0hover-transparent:hover{border-left-color:transparent !important;}}
 :root ._borderLeftColor-backgroundF3405682._borderLeftColor-backgroundF3405682{border-left-color:var(--backgroundFocus);}
 :root ._borderLeftColor-borderColor._borderLeftColor-borderColor{border-left-color:var(--borderColor);}
 :root ._borderLeftColor-color12._borderLeftColor-color12{border-left-color:var(--color12);}
@@ -2382,6 +2532,7 @@
 @media (hover) {:root:root  ._brc-0hover-color6._brc-0hover-color6:hover{border-right-color:var(--color6) !important;}}
 @media (hover) {:root:root  ._brc-0hover-color7._brc-0hover-color7:hover{border-right-color:var(--color7) !important;}}
 @media (hover) {:root:root  ._brc-0hover-color8._brc-0hover-color8:hover{border-right-color:var(--color8) !important;}}
+@media (hover) {:root:root  ._brc-0hover-transparent._brc-0hover-transparent:hover{border-right-color:transparent !important;}}
 :root ._brc-backgroundF3405682._brc-backgroundF3405682{border-right-color:var(--backgroundFocus);}
 :root ._brc-borderColor._brc-borderColor{border-right-color:var(--borderColor);}
 :root ._brc-color12._brc-color12{border-right-color:var(--color12);}
@@ -2405,6 +2556,7 @@
 @media (hover) {:root:root  ._btc-0hover-color6._btc-0hover-color6:hover{border-top-color:var(--color6) !important;}}
 @media (hover) {:root:root  ._btc-0hover-color7._btc-0hover-color7:hover{border-top-color:var(--color7) !important;}}
 @media (hover) {:root:root  ._btc-0hover-color8._btc-0hover-color8:hover{border-top-color:var(--color8) !important;}}
+@media (hover) {:root:root  ._btc-0hover-transparent._btc-0hover-transparent:hover{border-top-color:transparent !important;}}
 :root ._btc-backgroundF3405682._btc-backgroundF3405682{border-top-color:var(--backgroundFocus);}
 :root ._btc-borderColor._btc-borderColor{border-top-color:var(--borderColor);}
 :root ._btc-color12._btc-color12{border-top-color:var(--color12);}
@@ -2432,6 +2584,7 @@
 :root ._bts-solid._bts-solid{border-top-style:solid;}
 :root ._btw-0px._btw-0px{border-top-width:0px;}
 :root ._btw-1px._btw-1px{border-top-width:1px;}
+:root ._bxsh-0px0px0pxrg933189164{box-shadow:0px 0px 0px rgba(0, 0, 0, 0);}
 :root:root:root  ._col-0active-colorPress:active{color:var(--colorPress) !important;}
 @media (hover) {:root:root  ._col-0hover-color12:hover{color:var(--color12) !important;}}
 :root ._col-color{color:var(--color);}
@@ -2445,6 +2598,7 @@
 :root ._cur-inherit{cursor:inherit;}
 :root ._cur-not-allowed{cursor:not-allowed;}
 :root ._cur-pointer{cursor:pointer;}
+:root ._cur-row-resize{cursor:row-resize;}
 :root ._direction-ltr{direction:ltr;}
 :root ._dsp-flex{display:flex;}
 :root ._dsp-inline-flex{display:inline-flex;}
@@ -2466,6 +2620,7 @@
 :root ._fwr-nowrap{flex-wrap:nowrap;}
 :root ._gap-24px{gap:24px;}
 :root ._gap-2px{gap:2px;}
+:root ._gap-6px{gap:6px;}
 :root ._gap-c-space-1{gap:var(--c-space-1);}
 :root ._gap-c-space-1--53{gap:var(--c-space-1--5);}
 :root ._gap-c-space-2{gap:var(--c-space-2);}
@@ -2476,16 +2631,19 @@
 :root ._height-10037{height:100%;}
 :root ._height-16px{height:16px;}
 :root ._height-20px{height:20px;}
+:root ._height-220px{height:220px;}
 :root ._height-32px{height:32px;}
 :root ._height-36px{height:36px;}
 :root ._height-40px{height:40px;}
 :root ._height-44px{height:44px;}
+:root ._height-5px{height:5px;}
 :root ._height-6px{height:6px;}
 :root ._height-7px{height:7px;}
 :root ._height-80px{height:80px;}
 :root ._height-8px{height:8px;}
 :root ._height-NaNpx{height:NaNpx;}
 :root ._height-auto{height:auto;}
+:root ._height-c-size-1{height:var(--c-size-1);}
 :root ._height-initial{height:initial;}
 :root ._items-center{align-items:center;}
 :root ._items-flex-start{align-items:flex-start;}
@@ -2509,12 +2667,14 @@
 :root ._maxH-16px{max-height:16px;}
 :root ._maxH-300px{max-height:300px;}
 :root ._maxH-32px{max-height:32px;}
+:root ._maxH-c-size-1{max-height:var(--c-size-1);}
 :root ._maxH-initial{max-height:initial;}
 :root ._maxW-0px{max-width:0px;}
 :root ._maxW-10037{max-width:100%;}
 :root ._maxW-16px{max-width:16px;}
 :root ._maxW-32px{max-width:32px;}
 :root ._maxW-600px{max-width:600px;}
+:root ._maxW-c-size-1{max-width:var(--c-size-1);}
 :root ._mb-0px{margin-bottom:0px;}
 :root ._minH-16px{min-height:16px;}
 :root ._minH-20px{min-height:20px;}
@@ -2524,20 +2684,24 @@
 :root ._minH-40px{min-height:40px;}
 :root ._minH-44px{min-height:44px;}
 :root ._minH-64px{min-height:64px;}
+:root ._minH-c-size-1{min-height:var(--c-size-1);}
 :root ._minW-0px{min-width:0px;}
 :root ._minW-16px{min-width:16px;}
 :root ._minW-220px{min-width:220px;}
 :root ._minW-32px{min-width:32px;}
 :root ._minW-36px{min-width:36px;}
 :root ._minW-40px{min-width:40px;}
+:root ._minW-c-size-1{min-width:var(--c-size-1);}
 :root ._ml-0px{margin-left:0px;}
 :root ._ml-auto{margin-left:auto;}
 :root ._mr-0px{margin-right:0px;}
 :root ._mt--24px{margin-top:-24px;}
 :root ._mt-0px{margin-top:0px;}
 :root ._o-0{opacity:0;}
+:root ._o-0--4{opacity:0.4;}
 :root ._o-0--5{opacity:0.5;}
 :root ._o-0--6{opacity:0.6;}
+:root ._o-0--7{opacity:0.7;}
 @media (hover) {:root:root  ._o-0hover-0--8:hover{opacity:0.8 !important;}}
 @media (hover) {:root:root  ._o-0hover-0--9:hover{opacity:0.9 !important;}}
 :root ._o-1{opacity:1;}
@@ -2644,11 +2808,15 @@
 :root ._width-10px{width:10px;}
 :root ._width-16px{width:16px;}
 :root ._width-20037{width:200%;}
+:root ._width-260px{width:260px;}
 :root ._width-32px{width:32px;}
 :root ._width-36px{width:36px;}
+:root ._width-380px{width:380px;}
 :root ._width-4px{width:4px;}
+:root ._width-5px{width:5px;}
 :root ._width-8px{width:8px;}
 :root ._width-auto{width:auto;}
+:root ._width-c-size-1{width:var(--c-size-1);}
 :root ._ws-normal{white-space:normal;}
 :root ._ws-nowrap{white-space:nowrap;}
 :root ._ws-pre-wrap{white-space:pre-wrap;}

package/dist/theme.css

@@ -588,6 +588,51 @@
   --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55);
   --shadow-xl:0 20px 25px -5px rgb(0 0 0 / .60), 0 8px 10px -6px rgb(0 0 0 / .60);
   --shadow-2xl:var(--shadow-floating);
+
+  /* ——— the paper ——— */
+  /* Depth carries STATE, not decoration: which sheet is the workspace, which is
+     the tool in use, which one opened. Reach for a level before a border — if
+     two surfaces need separating, RAISE one rather than outline both, and a
+     surface that is already raised does not also need a box drawn round it.
+
+     A level is a tint AND the light on it, published as a pair, because the
+     alternative — every component composing its own `--edge-highlight,
+     --shadow-*` — is how two panels on one screen end up lit from two
+     directions. Every rung here is pure vertical: a 1px inset line along the
+     top edge, a drop straight down. One origin, above and slightly in front.
+
+     The tints are the surface recipes rather than new values, so sheets stack
+     the way paper does: each is an alpha-white wash, one laid on another lands
+     a step lighter, and the stack converges on #262626 instead of blowing out.
+
+     Nothing here is restated in `.light`, deliberately: every part defers to a
+     token that already flips, so the ramp inverts with the theme for free. */
+  --sheet-0:var(--surface-page);            /* the workspace ground             */
+  --sheet-1:var(--surface-card);            /* an active tool                   */
+  --sheet-2:var(--surface-card-emphasis);   /* what opened, or what is inside   */
+  /* The drops are spelled out rather than read from the t-shirt ramp above, and
+     that is the whole reason this ladder can be shared. `--shadow-sm` is a name
+     this package does not own — @hanzo/brand declares the same names at :root
+     with white-canvas alphas, and load order decides who wins — so a rung built
+     on one is a rung somebody else can flatten. `--shadow-sheet-*` is ours
+     alone, which is what lets @hanzo/ui's `.elevation-*` read it instead of
+     keeping a private copy. The numbers ARE rung 1 and rung 2 of the ramp; if
+     one moves, move both. `--edge-highlight` stays deferred: it is role-named,
+     uncollided, and its `.light` zeroing is what makes one value work on both
+     canvases. */
+  --shadow-sheet-1:var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40);
+  --shadow-sheet-2:var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55);
+
+  /* The fold — a corner turned back, and the one mark that means THIS OPENS.
+     Ornament nowhere: a sheet that does not expand does not wear one.
+     It is a background-image, so it costs no element and no pseudo-element —
+     paint it on the sheet itself and square that corner
+     (`border-bottom-right-radius:0`), because a folded corner is not round.
+     The flap catches the light like every other surface; the crease is the
+     hairline; both defer, so both invert. */
+  --fold:12px;
+  --fold-face:linear-gradient(315deg,var(--glass-strong) 0,var(--glass-strong) calc(var(--fold) - 1px),var(--border-strong) calc(var(--fold) - 1px),var(--border-strong) var(--fold),transparent var(--fold)); /* @kind color */
+
   /* Ambient hero glow — a single white radial, blurred 120px, low opacity. */
   --glow-hero:radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%); /* @kind color */
   --glow-hero-blur:120px;
@@ -620,6 +665,11 @@
    costs nothing. */
 .light, :root.t_light, .t_light{
   --shadow-floating:0 24px 60px -16px rgb(0 0 0 / .18);
+  /* On white the drop does all of it, so the paper rungs are restated here even
+     though check 4 does not demand it — their white is inside --edge-highlight,
+     which flips underneath. Rung 1 and rung 2 of the light ramp, same as dark. */
+  --shadow-sheet-1:var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .06);
+  --shadow-sheet-2:var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .09),0 4px 6px -4px rgb(0 0 0 / .07);
   --shadow-inset-hairline:inset 0 0 0 1px rgb(0 0 0 / .10);
   --edge-highlight:inset 0 0 0 0 transparent;
   --bloom:0 6px 20px -4px rgb(0 0 0 / .18);
@@ -1160,19 +1210,66 @@
    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. */
+   sites that pin a fill by hand — those become no-ops instead of holes.
+
+   EVERY floating slot the package emits is here. It was seven, and the three it
+   left out were not obscure: AlertDialog is a MODAL — the one surface that
+   cannot be anything but floating — and it was opaque beside a glass Dialog.
+   ContextMenu and HoverCard are anchored menus beside glass DropdownMenu and
+   glass Popover. That is precisely the drift this file exists to stop, still
+   present in the file that stops it, which is worth stating plainly: a rule
+   that attaches the material to the slot only holds if every slot is named.
+   The list is checked against what the components actually emit, so the next
+   floating slot somebody adds fails the test rather than the eye. */
 @supports (backdrop-filter: blur(8px)) {
   .glass,
   [data-slot="glass"],
   [data-slot="dialog-content"],
+  [data-slot="alert-dialog-content"],
   [data-slot="popover-content"],
   [data-slot="select-content"],
   [data-slot="dropdown-menu-content"],
   [data-slot="dropdown-menu-sub-content"],
+  [data-slot="context-menu-content"],
+  [data-slot="context-menu-sub-content"],
+  [data-slot="hover-card-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);
+    /* ── The dispersion ──────────────────────────────────────────────────────
+       Glass splits light at the EDGE. That is the whole of the physics and the
+       whole of the rule: the body of a pane shows you what is behind it, and the
+       rim is where the angle is steep enough to spread the spectrum. So the fill
+       stays monochrome — the brand is monochrome and text has to sit on it — and
+       the colour lives in one pixel at the top lip.
+
+       LINEAR, ACROSS THE LIP — never conic around the box. The composer's note
+       below records what conic costs on a rectangle: the long edges take a wide
+       angular slice and the short sides almost none, so one side wears blue and
+       the opposite burnt orange, and the ring reads as off-centre. Swept along
+       one edge instead, the stops are evenly spaced at any aspect ratio, so a
+       1000px dialog and a 90px tooltip disperse alike.
+
+       Peak alpha .16, on a band two pixels tall, one pixel DOWN. Both numbers
+       were measured rather than chosen. The lit edge is an inset box-shadow, and
+       a box-shadow paints over the background — so the first version put the
+       spectrum in the same pixel the white lip occupies and the lip won: at ×6
+       the rim was a neutral hairline with no colour in it at all. Sitting the
+       band one pixel inside puts it where a real pane disperses anyway, just
+       behind the specular line, and it is legible there at half the alpha a
+       collision would have needed. Three pixels at .22 was tried too and reads
+       as a coloured stroke somebody drew, which is a different thing entirely.
+
+       That is also the difference between this and the full-wheel rainbow that
+       was tried and reverted: not a different palette, a different AREA. Colour
+       over a whole surface makes that surface the only coloured thing in the
+       product; colour along its rim reads as the material catching light, which
+       is the one thing chrome is allowed to say. */
+    background-image: var(--glass-prism) !important;
+    background-repeat: no-repeat !important;
+    background-size: 100% 2px !important;
+    background-position: 0 1px !important;
   }
 }
 
@@ -1226,6 +1323,24 @@
   --glass-shadow-1: 0 1px 2px 0 rgb(0 0 0 / .40);
   --glass-shadow-2: 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55);
   --glass-shadow-3: 0 24px 60px -16px rgb(0 0 0 / .75);
+
+  /* The spectrum the lip disperses. Declared here for the same reason the drops
+     above are: a name this package owns cannot be outranked by a sheet that
+     happens to load later. Nothing else ships a --glass-prism.
+
+     Five stops, blue through violet, rose, amber, to a cool green — the order
+     light actually comes apart in, so it reads as refraction rather than as a
+     palette somebody chose. Alphas .13-.16: measured at ×6 against the white lip
+     that sits a pixel above, high enough to read there and low enough that at
+     1:1 it is a tinge. A theme that wants none of it sets this to `none` and the
+     rim goes back to being the lit edge alone. */
+  --glass-prism:
+    linear-gradient(90deg,
+      rgb(120 170 255 / .16) 0%,
+      rgb(178 142 255 / .15) 24%,
+      rgb(255 146 198 / .13) 48%,
+      rgb(255 190 124 / .15) 72%,
+      rgb(138 228 208 / .16) 100%);
 }
 
 .light, :root.t_light, .t_light {
@@ -1245,6 +1360,9 @@
 [data-slot="select-content"],
 [data-slot="dropdown-menu-content"],
 [data-slot="dropdown-menu-sub-content"],
+[data-slot="context-menu-content"],
+[data-slot="context-menu-sub-content"],
+[data-slot="hover-card-content"],
 [data-slot="tooltip-content"] {
   box-shadow:
     var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
@@ -1252,12 +1370,38 @@
 }
 
 .elevation-3,
-[data-slot="dialog-content"] {
+[data-slot="dialog-content"],
+[data-slot="alert-dialog-content"] {
   box-shadow:
     var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
     var(--glass-shadow-3) !important;
 }
 
+/* ── The fold — the one mark that means an item opens ────────────────────────
+   A corner turned back, painted onto the sheet itself. It is a class and not a
+   pair of style props because gui compiles those into atomic classes and a
+   background-image is not one of the properties it maps; and because a fold has
+   exactly one spelling, so the call site should not be able to invent a second
+   one. `--fold-face` is @hanzo/design's, with the dark value inline so a host
+   that took this sheet without the token layer still gets a corner rather than
+   a silently-dropped declaration.
+
+   The corner is SQUARED, not rounded: a folded corner is a straight crease, and
+   a rounded one under a triangle reads as a rendering fault. That is also why
+   this carries !important — the radius it has to beat is a compiled style prop.
+
+   Spend it only where the thing expands. A fold on a surface that opens nothing
+   is a chevron that never turns. */
+.fold {
+  background-image: var(--fold-face,
+    linear-gradient(315deg,
+      rgb(255 255 255 / .08) 0, rgb(255 255 255 / .08) 11px,
+      rgb(255 255 255 / .16) 11px, rgb(255 255 255 / .16) 12px,
+      transparent 12px)) !important;
+  background-repeat: no-repeat !important;
+  border-bottom-right-radius: 0 !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
@@ -1277,7 +1421,8 @@
    palette: `rgba(0,0,0,.5)` under `opacity: .5` — a quarter black, exactly the
    double dim these two lines exist to end. A rule written to beat a compiled
    class has to be written with the weight to beat one. */
-[data-slot="dialog-overlay"] {
+[data-slot="dialog-overlay"],
+[data-slot="alert-dialog-overlay"] {
   opacity: 1 !important;
   background-color: var(--surface-scrim, rgb(0 0 0 / .8)) !important;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.0.76",
+  "version": "8.0.81",
   "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": {
@@ -188,7 +188,7 @@
   ],
   "dependencies": {
     "@hanzo/appearance": "^0.1.4",
-    "@hanzo/design": "^0.5.1",
+    "@hanzo/design": "^0.5.3",
     "@hanzo/logo": "^1.0.13",
     "@hanzo/products": "^0.2.0",
     "@hanzogui/lucide-icons-2": "^8.1.0",