@codenhub/styles 0.4.0 → 0.6.0

package/dist/tw/aesthetics/cyber.css

@@ -1,113 +1,155 @@
 /* Cyber: bevelled corners, a thin bright edge, and a glow in the component's own
-   colour. See docs/internal/cyber-aesthetic.md for the decision.
+   colour. See docs/internal/model.md#cyber for the decision.
 
    Tier 1 only. The bevel is `corner-shape`, not `clip-path`: a clip removes
    every outer shadow, so a clipped chamfer has nothing left to glow, and an
    inset ring cannot follow a diagonal cut the way `.pixel`'s follows its square
    one. `corner-shape` draws the corner itself, and the border, the glow, and the
-   focus outline all follow it. Load after the base stylesheet. */
-.cyber {
-  /* Knobs, read with a fallback so an ancestor can set them (R8; see
-     model.md#rules-for-aesthetics). One cut size for controls and surfaces
-     alike, so a button and the card around it read as the same material; the
-     two shapes then place that cut on opposite diagonals, so they read as
-     different things. A shape knob takes any `border-radius` value -- the
-     documented presets are a hexagon, a parallelogram, and a single notch --
-     and the cut knob scales the default pair without restating it.
-
-     The cut is a ceiling, not a size: the default pair caps it at a quarter of
-     the element's own box, so a 40px button or a card takes the full cut and a
-     19px icon button about 5px rather than having its corners eaten. Nothing in
-     the model scales a corner with a component's size -- `.sm` and `.dense`
-     change padding and height, never the radius -- and a radius percentage is
-     the one length that already knows the box. Horizontal percentages resolve
-     against the width and vertical ones against the height, so on a small wide
-     button the cut runs slightly shallower than 45 degrees; at those sizes that
-     is not visible. A shape set through the knob is taken as written. */
-  --_cyber-cut: var(--cyber-cut, 0.625rem);
-  --_cyber-glow: var(--cyber-glow, 8px);
-  --_cyber-shape: var(--cyber-shape, min(var(--_cyber-cut), 25%) 0 / min(var(--_cyber-cut), 25%) 0);
-  --_cyber-shape-surface: var(--cyber-shape-surface, 0 min(var(--_cyber-cut), 25%) / 0 min(var(--_cyber-cut), 25%));
-
-  /* The neutral line. A neon hue is the look's signature, but hue is intent's
-     (R1), so the default follows the theme the way neobrutalism's and pixel's
-     ink does, and `--cyber-ink` lets an application choose a neon neutral
-     without the aesthetic imposing one on every palette. A named intent keeps
-     its own edge colour. */
-  --ui-ink: var(--cyber-ink, light-dark(var(--color-neutral-950), var(--color-neutral-50)));
-
-  /* Controls cut top-left and bottom-right, surfaces top-right and bottom-left.
-     Anything fully round -- a badge, a switch, the progress track, the tooltip
-     icon, and through their own full radius a radio and a `.btn.pill` -- cuts
-     all the way to points: a diamond, or a hexagon on something wider than it
-     is tall. Chips square outright, which is what tells the checkbox from the
-     radio beside it. */
-  --ui-corner-shape: bevel;
-  --ui-radius: var(--_cyber-shape);
-  --ui-radius-surface: var(--_cyber-shape-surface);
-  --ui-radius-pill: calc(infinity * 1px);
-  --ui-radius-tight: 0;
-  --ui-border-width: 1px;
-  --ui-border-max: 100px;
-
-  /* The glow: the component's own ink, blurred, with no offset. `box` mixes
-     depth as `color-mix(in oklab, var(--intent-border) var(--ui-shadow-ink),
-     var(--elevation-color))`, so a transparent depth colour turns 40% ink into
-     the intent colour at 40% alpha rather than into a darker shade of it.
-     Elevation scales the blur like every shadow, so the glow lights what rests
-     above zero -- buttons and cards -- and anything raised, and leaves fields
-     and chips crisp. */
-  --elevation-color: transparent;
-  --ui-shadow-ink: 40%;
-  --ui-shadow-x: 0px;
-  --ui-shadow-y: 0px;
-  --ui-shadow-blur: var(--_cyber-glow);
-  --ui-shadow-spread: 0px;
-
-  /* The glow holds still under the pointer and under a press; the press is the
-     base scale, restated because a region nested inside another aesthetic must
-     not inherit that one's travel. Reduced motion drops it below. */
-  --ui-hover-transform: none;
-  --ui-active-shadow-x: 0px;
-  --ui-active-shadow-y: 0px;
-  --ui-active-transform: scale(0.97);
-
-  /* Nothing here clips, blurs, thins its fill, or draws its edge as a ring, and
-     an aesthetic nested inside one that does has to say so rather than inherit
-     it. */
-  --ui-clip: none;
-  --ui-clip-tight: none;
-  --ui-shadow-inset: ;
-  --ui-shadow-edge: initial;
-  --ui-backdrop: none;
-  --ui-bg-alpha: 1;
-
-  /* Consumer-supplied, the way `.pixel` reads `--font-pixel`. The package ships
-     no font binary; the monospace stack is the closest technical face every
-     platform already has. */
-  font-family: var(--font-cyber, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-}
+   focus outline all follow it. */
 
-/* Firefox and Safari do not draw `corner-shape` yet, and there the radius would
-   round the corners instead. A rounded cyber element reads as a different
-   aesthetic; a square one reads as the same aesthetic simplified. What is fully
-   round stays round rather than square: a square radio is a checkbox, and a
-   pill is the nearest a diamond gets without a bevel. */
-@supports not (corner-shape: bevel) {
+/* The layer map, stated before anything uses a layer -- see `theme.css`. The
+   aesthetic's token class sits in `components`, below every utility, so a
+   consumer's own utility or unlayered CSS beats it; the solo class stays
+   unlayered, because it has to beat a foreign component's unlayered CSS. See
+   docs/internal/model.md#cascade-layers. */
+@layer theme, base, components, utilities;
+
+@layer components {
   .cyber {
-    --ui-radius: 0;
-    --ui-radius-surface: 0;
+    /* Knobs, read with a fallback so an ancestor can set them (R8; see
+       model.md#rules-for-aesthetics). One cut size for controls and surfaces
+       alike, so a button and the card around it read as the same material; the
+       two shapes then place that cut on opposite diagonals, so they read as
+       different things. A shape knob takes any `border-radius` value -- the
+       documented presets are a hexagon, a parallelogram, and a single notch --
+       and the cut knob sizes the default pair without restating it.
+
+       The cut is the corner length at scale 1, and `box` multiplies it by the
+       size step, so a `.p-xs` icon button takes half the cut and a `.lg` button
+       a quarter more -- always a true 45 degrees, because it stays a length. A
+       shape set through a knob is taken as written, unscaled: it is read as
+       `--ui-radius`, which `box` honours over the computed corner, and left
+       unset the reference makes the token guaranteed-invalid so the computed
+       corner draws. */
+    --_cyber-cut: var(--cyber-cut, 0.625rem);
+    --_cyber-glow: var(--cyber-glow, 8px);
+
+    /* The neutral line. A neon hue is the look's signature, but hue is intent's
+       (R1), so the default follows the theme the way neobrutalism's and pixel's
+       ink does, and `--cyber-ink` lets an application choose a neon neutral
+       without the aesthetic imposing one on every palette. A named intent keeps
+       its own edge colour. */
+    --ui-ink: var(--cyber-ink, light-dark(var(--color-neutral-950), var(--color-neutral-50)));
+
+    /* Controls cut top-left and bottom-right, through the four corner switches
+       every component reads; surfaces cut top-right and bottom-left, which the
+       switches cannot say at the same time, so their shape is written whole and
+       does not scale -- a card is large enough that the full cut is right at
+       every padding. Anything fully round -- a badge, a switch, the progress
+       track, the tooltip icon, and through their own full radius a radio and a
+       `.btn.pill` -- cuts all the way to points: a diamond, or a hexagon on
+       something wider than it is tall. Chips square outright, which is what
+       tells the checkbox from the radio beside it. */
+    --ui-corner-shape: bevel;
+    --ui-corner: var(--_cyber-cut);
+    --ui-corner-surface: var(--_cyber-cut);
+    --ui-corner-tl: 1;
+    --ui-corner-tr: 0;
+    --ui-corner-br: 1;
+    --ui-corner-bl: 0;
+    --ui-radius: var(--cyber-shape);
+    --ui-radius-surface: var(--cyber-shape-surface, 0 var(--_cyber-cut) / 0 var(--_cyber-cut));
+    --ui-radius-pill: calc(infinity * 1px);
+    --ui-radius-tight: 0;
+    --ui-border-width: 1px;
+    --ui-border-max: 100px;
+    --ui-line-style: initial;
+    --ui-rule-style: initial;
+
+    /* The glow is light, not depth, so it is the halo: the component's own intent
+       colour at 40%, blurred, with no offset. Elevation does not scale it, so
+       every component glows -- fields and chips included -- and `.flat` does
+       not put it out. There is no depth, and the transparent depth colour keeps
+       `.raised` and `.floating` from drawing any. */
+    --elevation-color: transparent;
+    --ui-shadow-ink: 0%;
+    --ui-shadow-x: 0px;
+    --ui-shadow-y: 0px;
+    --ui-shadow-blur: 0px;
+    --ui-shadow-spread: 0px;
+    --ui-halo-blur: var(--_cyber-glow);
+    --ui-halo-spread: 0px;
+    --ui-halo-ink: 40%;
+
+    /* The glow holds still under the pointer and under a press; the press is the
+       base scale, restated because a region nested inside another aesthetic must
+       not inherit that one's travel. Reduced motion drops it below. */
+    --ui-hover-transform: none;
+    --ui-active-shadow-x: 0px;
+    --ui-active-shadow-y: 0px;
+    --ui-active-transform: scale(0.97);
+    --ui-active-translate-x: initial;
+    --ui-active-translate-y: initial;
+
+    /* Nothing here clips, blurs, thins its fill, or draws its edge as a ring, and
+       an aesthetic nested inside one that does has to say so rather than inherit
+       it. */
+    --ui-clip: none;
+    --ui-clip-tight: none;
+    --ui-shadow-inset: ;
+    --ui-shadow-edge: initial;
+    /* The bevel is a corner shape, not a clip, so the global focus outline
+       follows it; pixel's inset focus layer is cleared rather than inherited. */
+    --ui-focus-inset: initial;
+    --ui-backdrop: none;
+    --ui-surface-ground: initial;
+    --ui-surface-shadow: initial;
+    --ui-surface-image: initial;
+    --ui-bg-alpha: 1;
+
+    /* Consumer-supplied, the way `.pixel` reads `--font-pixel`. The package ships
+       no font binary; the monospace stack is the closest technical face every
+       platform already has. */
+    font-family: var(--font-cyber, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+
+    /* A control's neutral line is the theme's control border, not this
+       aesthetic's ink: that ink is the primary colour in both themes, so every
+       unchecked toggle and resting field drew its boundary as loudly as a
+       primary one. Named rather than cleared, so a region nested inside glass
+       or chunky tile does not inherit theirs either. */
+    --ui-control-ink: var(--color-control-border);
+    --ui-rule-ink: initial;
+
+    /* Chunky tile's heavier label, cleared so a region nested inside it keeps
+       the button's and the badge's own label. */
+    --ui-label-weight: initial;
+    --ui-label-tracking: initial;
+    --ui-label-case: initial;
+    --ui-label-shadow: initial;
   }
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .cyber {
-    --ui-active-transform: none;
+  /* Firefox and Safari do not draw `corner-shape` yet, and there the radius would
+     round the corners instead. A rounded cyber element reads as a different
+     aesthetic; a square one reads as the same aesthetic simplified. What is fully
+     round stays round rather than square: a square radio is a checkbox, and a
+     pill is the nearest a diamond gets without a bevel. */
+  @supports not (corner-shape: bevel) {
+    .cyber {
+      --ui-corner: 0;
+      --ui-radius: 0;
+      --ui-radius-surface: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cyber {
+      --ui-active-transform: none;
+    }
   }
 }
 
 /* Solo: the same look painted onto the one element carrying the class, for an
-   element the package does not style. See docs/internal/solo-utilities.md and
+   element the package does not style. See docs/internal/model.md#solo-classes and
    the note on `.glass-solo`: own knobs and foundation tokens with literal
    fallbacks, never a shared `--ui-*`, `--intent-*`, or `--elevation-color`
    token, unlayered, and not for this package's own components. */

package/dist/tw/aesthetics/glass.css

@@ -1,80 +1,290 @@
 /* Glass: translucent surfaces over a blurred backdrop with a hairline highlight
-   edge. It needs something behind it to blur -- on a flat page background it is a
-   translucent panel and nothing more.
-
-   Tier 1 only. The scope that used to take a hand-written selector list is now a
-   token: only `surface` resolves `--ui-backdrop`, so blur reaches cards,
-   panels, alerts and tooltips while controls stay solid. An active blur costs a
-   compositing layer apiece, and one under every control of a dense cluster reads
-   as noise. */
-.glass {
-  /* Knobs read with a fallback so an ancestor can set them -- declared here they
-     outrank `:root` (R8; see model.md#rules-for-aesthetics). Glass is softer
-     than the base geometry because a translucent tight corner reads as a
-     cut-out; a control/surface pair rather than one value, because they do not
-     scale together and 12/16 keeps a button looking at home inside a card. */
-  --ui-radius: var(--glass-radius, 0.75rem);
-  --ui-radius-surface: var(--glass-radius-surface, 1rem);
-  --ui-border-width: 1px;
-  --ui-border-max: 100px;
-
-  /* Glass catches light from above whatever is under it, so the edge is a light
-     hairline in both themes rather than a theme-following ink. */
-  --ui-ink: light-dark(rgb(255 255 255 / 0.65), rgb(255 255 255 / 0.22));
-
-  --ui-bg-alpha: 0.8;
-  --ui-backdrop: blur(14px) saturate(1.6);
-
-  /* R6. Controls carry no shadow of their own -- the depth in this aesthetic is
-     the blur, and a drop shadow under a translucent button reads as grime. All
-     general parts are explicitly zero so inherited or future geometry cannot
-     leak onto controls. `--ui-surface-shadow` below replaces the shadow of
-     surfaces only. */
-  --ui-shadow-x: 0px;
-  --ui-shadow-y: 0px;
-  --ui-shadow-blur: 0px;
-  --ui-shadow-spread: 0px;
-  /* `--ui-bg-alpha` multiplies the fill, and a surface's default fill is 0%:
-     without a translucent ground the blur ends up behind an opaque background
-     and nothing shows through. */
-  --ui-surface-ground: color-mix(in srgb, var(--color-background) 45%, transparent);
-
-  /* Two layers pulling in with negative spread, so the shadow tucks under the
-     surface instead of haloing onto the backdrop. It is the one shipped aesthetic
-     that cannot be described with the parts, so it takes `surface`'s
-     complete-value slot -- which is also what keeps it off buttons and chips --
-     and the registry records that `.flat` does not reach it. */
-  --ui-surface-shadow: 0 1px 2px -1px var(--elevation-color), 0 18px 40px -16px var(--elevation-color);
-
-  --ui-clip: none;
-  --ui-clip-tight: none;
-  /* Round corners, said explicitly, and the pill and chip corners cleared back
-     to `--ui-radius`: a region nested inside `.cyber` would otherwise inherit
-     its bevel, its diamond pills, and its square chips. */
-  --ui-corner-shape: round;
-  --ui-radius-pill: initial;
-  --ui-radius-tight: initial;
-  /* Nothing here draws its edge as a ring, and an aesthetic nested inside pixel
-     has to say so rather than inherit it. */
-  --ui-shadow-edge: initial;
-  --ui-hover-transform: none;
-  --ui-active-transform: none;
-}
+   edge. It needs something behind it to blur -- on a flat page background it is
+   a translucent panel and nothing more.
 
-/* Transparency is the whole aesthetic, so the honest degradation is an opaque
-   surface rather than a softer blur. */
-@media (prefers-reduced-transparency: reduce) {
+   Tier 1 only: the scope is a token. Only `surface` resolves `--ui-backdrop`,
+   so blur reaches cards, panels, alerts and tooltips while controls stay solid.
+   An active blur costs a compositing layer apiece, and one under every control
+   of a dense cluster reads as noise. */
+
+/* The layer map, stated before anything uses a layer -- see `theme.css`. The
+   aesthetic's token class sits in `components`, below every utility, so a
+   consumer's own utility or unlayered CSS beats it; the solo class stays
+   unlayered, because it has to beat a foreign component's unlayered CSS. See
+   docs/internal/model.md#cascade-layers. */
+@layer theme, base, components, utilities;
+
+@layer components {
   .glass {
+    /* Knobs read with a fallback so an ancestor can set them -- declared here they
+       outrank `:root` (R8; see model.md#rules-for-aesthetics). Glass is softer
+       than the base geometry because a translucent tight corner reads as a
+       cut-out; a control/surface pair rather than one value, because they do not
+       scale together and 12/16 keeps a button looking at home inside a card. */
+    --ui-corner: var(--glass-radius, 0.75rem);
+    --ui-corner-surface: var(--glass-radius-surface, 1rem);
+    --ui-border-width: 1px;
+    --ui-border-max: 100px;
+    --ui-line-style: initial;
+    --ui-rule-style: initial;
+
+    /* Glass catches light from above whatever is under it, so the edge is a light
+       hairline in both themes rather than a theme-following ink. */
+    --ui-ink: light-dark(rgb(255 255 255 / 0.65), rgb(255 255 255 / 0.22));
+    /* A control's boundary is not a pane's edge. The hairline erases an
+       unchecked checkbox on a light page (1.33:1 inside a glass card) and leaves
+       a field with nothing marking where typing goes, so controls take the
+       theme's ink at 55% instead: translucent, so it tints whatever is behind
+       the pane rather than drawing a flat grey, and 6.31:1 on a checkbox, 2.31:1
+       on a field's 60% resting line, in light. See
+       docs/internal/model.md#presentation. */
+    --ui-control-ink: light-dark(rgb(0 0 0 / 0.55), rgb(255 255 255 / 0.55));
+    /* Nor is a line drawn on a plate: the hairline vanishes on a table's light
+       plate, and its default, `.ruled`, and `.ruleless` forms would render as
+       one. A table's frame and rules take the theme's ink at a fifth,
+       translucent for the same reason the control line is. */
+    --ui-rule-ink: light-dark(rgb(0 0 0 / 0.2), rgb(255 255 255 / 0.2));
+
+    /* The glass is the ground, not the fill. Thinning fills with
+       `--ui-bg-alpha` would make how much colour a presentation asked for
+       depend on the aesthetic, which is presentation's question (R1): a
+       `.solid` button, a checked toggle, and a `.solid` card stay opaque.
+       Translucency lives in `--ui-surface-ground` below, the plate a partial
+       fill is painted over. */
     --ui-bg-alpha: 1;
+    --ui-backdrop: blur(14px) saturate(1.6);
+    --ui-surface-image: initial;
+
+    /* R6. Controls carry no shadow of their own -- the depth in this aesthetic is
+       the blur, and a drop shadow under a translucent button reads as grime. All
+       general parts are explicitly zero so inherited or future geometry cannot
+       leak onto controls. `--ui-surface-shadow` below replaces the shadow of
+       surfaces only. */
+    --ui-shadow-x: 0px;
+    --ui-shadow-y: 0px;
+    --ui-shadow-blur: 0px;
+    --ui-shadow-spread: 0px;
+    --ui-shadow-inset: initial;
+    --ui-shadow-ink: initial;
+    --ui-active-shadow-x: initial;
+    --ui-active-shadow-y: initial;
+    /* The theme's depth colour, restated: the surface shadow below resolves it
+       here, on the region, so inside chunky tile it inherited opaque black and
+       cast a black slab under every card, and inside cyber it inherited
+       transparent and cast none. */
+    --elevation-color: light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55));
+    /* No halo, cleared so a region nested inside another
+       aesthetic does not inherit one. */
+    --ui-halo-blur: initial;
+    --ui-halo-spread: initial;
+    --ui-halo-ink: initial;
+    /* `--ui-bg-alpha` multiplies the fill, and a surface's default fill is 0%:
+       without a translucent ground the blur ends up behind an opaque background
+       and nothing shows through. */
+    --ui-surface-ground: color-mix(in srgb, var(--color-background) 45%, transparent);
+
+    /* Two layers pulling in with negative spread, so the shadow tucks under the
+       surface instead of haloing onto the backdrop. It is the one shipped aesthetic
+       that cannot be described with the parts, so it takes `surface`'s
+       complete-value slot -- which is also what keeps it off buttons and chips --
+       and the registry records that `.flat` does not reach it. */
+    --ui-surface-shadow: 0 1px 2px -1px var(--elevation-color), 0 18px 40px -16px var(--elevation-color);
+
+    --ui-clip: none;
+    --ui-clip-tight: none;
+    /* Round corners, said explicitly, and the pill and chip corners cleared back
+       to `--ui-corner`: a region nested inside `.cyber` would otherwise inherit
+       its bevel, its diagonal, its diamond pills, and its square chips. */
+    --ui-corner-shape: round;
+    --ui-radius-pill: initial;
+    --ui-radius-tight: initial;
+    --ui-radius: initial;
+    --ui-radius-surface: initial;
+    --ui-corner-tl: initial;
+    --ui-corner-tr: initial;
+    --ui-corner-br: initial;
+    --ui-corner-bl: initial;
+    /* Nothing here draws its edge as a ring, and an aesthetic nested inside pixel
+       has to say so rather than inherit it. */
+    --ui-shadow-edge: initial;
+    /* Nothing clips, so the global focus outline shows; pixel's inset focus
+       layer is cleared rather than inherited. */
+    --ui-focus-inset: initial;
+    --ui-hover-transform: none;
+    /* The base press, stated because every token here is: the depth in this
+       aesthetic is the blur, so a control has no slab to press into, and a pane
+       that gives slightly under the pointer is the one answer a press gets. */
+    --ui-active-transform: scale(0.97);
+    --ui-active-translate-x: initial;
+    --ui-active-translate-y: initial;
+
+    /* Chunky tile's heavier label, cleared so a region nested inside it keeps
+       the button's and the badge's own label. */
+    --ui-label-weight: initial;
+    --ui-label-tracking: initial;
+    --ui-label-case: initial;
+    --ui-label-shadow: initial;
+  }
+
+  /* Transparency is the whole aesthetic, so the honest degradation is an opaque
+     surface rather than a softer blur. */
+  @media (prefers-reduced-transparency: reduce) {
+    .glass {
+      --ui-backdrop: none;
+      --ui-surface-ground: var(--color-background);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .glass {
+      --ui-active-transform: none;
+    }
+  }
+
+  /* Liquid glass: a modifier of glass, the way `.sketch-rounded` is of sketch.
+     Continuous corners, a bright rim where light catches the pane, a lighter
+     blur, and -- in engines that render an SVG filter in `backdrop-filter`,
+     Chromium today -- a lens that bends the backdrop at the edges. On the region
+     beside `.glass`, or on one surface inside a glass region.
+
+     Only the corners apply on their own. The ink, ground, and blur are glass
+     material, so they are set below only where `.glass` is in scope: a lone
+     `.glass-liquid` would otherwise make every surface translucent with nothing
+     to blur and every field's line a near-invisible hairline.
+
+     The corner knobs are glass's own, with larger defaults: a continuous corner
+     reads smaller than a round one of the same radius. Where `corner-shape` is
+     not drawn the corners stay round. */
+  .glass-liquid {
+    --ui-corner: var(--glass-radius, 1rem);
+    --ui-corner-surface: var(--glass-radius-surface, 1.5rem);
+    --ui-corner-shape: squircle;
+
+    --_glass-liquid-blur: blur(2px) saturate(1.8);
+
+    /* The lens is its own layer rather than a second function in the blur's
+       list: Firefox and WebKit accept `url()` there and draw nothing for it, and
+       a filter list with an unusable reference is dropped whole -- the blur with
+       it. Kept apart, an engine that ignores the lens still blurs.
+
+       The displacement map is built inside the filter from the box itself:
+       erode a flood of the filter region by 8px, blur it into a ramp, and take
+       the ramp's slope across x and y as the two displacement channels. Every
+       length is absolute, so the band is the same width on a tooltip and on a
+       page-wide card; no length is a percentage of the box. The blur is wider
+       than the erosion so the ramp's corners round off -- otherwise the square
+       core shows through as loops at every corner. A filter cannot read a custom
+       property, so the band and the strength are fixed, not knobs. */
+    --_glass-liquid-lens: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='lens' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feFlood flood-color='white'/><feMorphology operator='erode' radius='8'/><feGaussianBlur stdDeviation='10' result='ramp'/><feOffset in='ramp' dx='-3' result='l'/><feOffset in='ramp' dx='3' result='r'/><feComposite in='l' in2='r' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dx'/><feOffset in='ramp' dy='-3' result='u'/><feOffset in='ramp' dy='3' result='d'/><feComposite in='u' in2='d' operator='arithmetic' k2='2' k3='-2' k4='0.5' result='dy'/><feColorMatrix in='dx' values='0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1' result='x'/><feColorMatrix in='dy' values='0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 1'/><feComposite in='x' operator='arithmetic' k2='1' k3='1'/><feDisplacementMap in='SourceGraphic' scale='110' xChannelSelector='R' yChannelSelector='G'/></filter></svg>#lens");
+
+    /* The rim: light caught on the top-left edge and, fainter, the bottom-right,
+       over a soft inner glow. Drawn on the lens layer, the topmost, because a
+       rim drawn on the surface itself would sit under the layers and blur. */
+    --_glass-liquid-rim:
+      inset 1px 1px 0 light-dark(rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.35)),
+      inset -1px -1px 0 light-dark(rgb(255 255 255 / 0.35), rgb(255 255 255 / 0.12)),
+      inset 0 0 18px light-dark(rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.05));
+    --_glass-liquid-sheen: linear-gradient(
+      160deg,
+      light-dark(rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.06)),
+      transparent 45%
+    );
+  }
+
+  /* The glass material the modifier changes, where glass is in scope: on the
+     same element, or on a surface inside a glass region. The blur moves off the
+     surface onto a layer behind its content (below): a surface with a backdrop
+     filter of its own is a backdrop root, and a layer inside one sees only the
+     surface, never the page behind it. */
+  .glass.glass-liquid,
+  .glass .glass-liquid {
+    --ui-ink: light-dark(rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.16));
+    --ui-surface-ground: color-mix(in srgb, var(--color-background) 30%, transparent);
+    --ui-surface-image: initial;
     --ui-backdrop: none;
-    --ui-surface-ground: var(--color-background);
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    .glass.glass-liquid,
+    .glass .glass-liquid {
+      --ui-surface-ground: var(--color-background);
+    }
+
+    .glass-liquid {
+      --_glass-liquid-blur: none;
+      --_glass-liquid-lens: none;
+    }
+  }
+
+  /* The layers: a treatment no token reaches, so a selector list glass owns and
+     the registry records. Two pseudo-elements behind a surface's content, the
+     blur beneath and the lens with the rim and sheen above it. `isolation`
+     keeps them above the surface's own plate, which they then blur with the
+     page; `position` anchors them, and a component that positions itself --
+     the tooltip bubble -- keeps its own. A default or `.soft` table frosts
+     under glass, so it takes the layers too. Both slots are spent, so a surface
+     inside a liquid region carries no `::before` or `::after` of the
+     consumer's; the fields cannot host one, and controls stay solid as they do
+     under glass.
+
+     A region of another aesthetic nested inside, or of plain glass, keeps its
+     own material and takes no layers. This list names the other aesthetics, and
+     `registry.test.ts` fails when one is missing. */
+  :is(.glass-liquid, .glass-liquid *):is(.glass, .glass *):is(
+    .card,
+    .panel,
+    .alert,
+    .tooltip-bubble,
+    .surface,
+    .data-table:not(.solid, .ghost)
+  ):not(
+    .glass-liquid :is(.neobrutalism, .pixel, .chunky-tile, .cyber, .sketch),
+    .glass-liquid :is(.neobrutalism, .pixel, .chunky-tile, .cyber, .sketch) *,
+    .glass-liquid .glass:not(.glass-liquid),
+    .glass-liquid .glass:not(.glass-liquid) *
+  ) {
+    position: relative;
+    isolation: isolate;
+
+    &::before,
+    &::after {
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      border-radius: inherit;
+      corner-shape: inherit;
+      content: "";
+      pointer-events: none;
+    }
+
+    /* Prefixed first, for the reason `surface` gives. */
+    &::before {
+      -webkit-backdrop-filter: var(--_glass-liquid-blur);
+      backdrop-filter: var(--_glass-liquid-blur);
+    }
+
+    &::after {
+      backdrop-filter: var(--_glass-liquid-lens);
+      background-image: var(--_glass-liquid-sheen);
+      box-shadow: var(--_glass-liquid-rim);
+    }
+  }
+}
+
+/* Forced colours paint the plain surface: no layer blurs, bends, or lights it. */
+@media (forced-colors: active) {
+  .glass-liquid {
+    --_glass-liquid-blur: none;
+    --_glass-liquid-lens: none;
+    --_glass-liquid-rim: none;
+    --_glass-liquid-sheen: none;
   }
 }
 
 /* Solo: the same look painted onto the one element carrying the class, for an
    element the package does not style -- a toast from another library, a plain
    `<div>` on a page that never loaded the base stylesheet. See
-   docs/internal/solo-utilities.md.
+   docs/internal/model.md#solo-classes.
 
    It reads the aesthetic's own knobs and the theme's foundation tokens, each
    with its shipped literal as the fallback, and never a `--ui-*`, `--intent-*`,
@@ -110,3 +320,59 @@
     backdrop-filter: none;
   }
 }
+
+/* With `.glass-liquid`, the liquid pane: its corner and ground, and the same two
+   layers behind the element's content. The element's own blur goes, for the
+   backdrop-root reason the modifier gives. Both pseudo-elements are spent, so a
+   foreign element that draws its own `::before` or `::after` loses them.
+
+   The layers need a positioned element to anchor to. That one declaration is
+   layered, where the element's own `fixed` or `absolute` beats it -- a toast
+   keeps its placement, and an unpositioned element is anchored. */
+@layer components {
+  .glass-solo.glass-liquid {
+    position: relative;
+  }
+}
+
+.glass-solo.glass-liquid {
+  isolation: isolate;
+  background-color: color-mix(
+    in srgb,
+    var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0))) 30%,
+    transparent
+  );
+  border-color: light-dark(rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.16));
+  border-radius: var(--glass-radius-surface, 1.5rem);
+  corner-shape: squircle;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+
+  &::before,
+  &::after {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border-radius: inherit;
+    corner-shape: inherit;
+    content: "";
+    pointer-events: none;
+  }
+
+  &::before {
+    -webkit-backdrop-filter: var(--_glass-liquid-blur);
+    backdrop-filter: var(--_glass-liquid-blur);
+  }
+
+  &::after {
+    backdrop-filter: var(--_glass-liquid-lens);
+    background-image: var(--_glass-liquid-sheen);
+    box-shadow: var(--_glass-liquid-rim);
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .glass-solo.glass-liquid {
+    background-color: var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0)));
+  }
+}