@codenhub/styles 0.3.0 → 0.5.0

package/dist/tw/aesthetics/cyber.css

@@ -0,0 +1,227 @@
+/* Cyber: bevelled corners, a thin bright edge, and a glow in the component's own
+   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. */
+
+/* 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 {
+    /* 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. It
+       used to be capped at a quarter of the element's box, a percentage, which
+       ran shallower than 45 degrees on a small wide button; the step retired
+       the cap. 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;
+    --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);
+
+    /* The control ink glass and chunky tile name, cleared so a region nested
+       inside either draws its controls in this aesthetic's own ink. */
+    --ui-control-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;
+  }
+
+  /* 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/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. */
+.cyber-solo {
+  --_cyber-ink: var(
+    --cyber-ink,
+    light-dark(var(--color-neutral-950, oklch(14.5% 0 0)), var(--color-neutral-50, oklch(98.5% 0 0)))
+  );
+
+  border: 1px solid var(--_cyber-ink);
+  /* The surface shape: the element this exists for is usually a pane. An action
+     takes the control shape below. */
+  border-radius: var(
+    --cyber-shape-surface,
+    0 min(var(--cyber-cut, 0.625rem), 25%) / 0 min(var(--cyber-cut, 0.625rem), 25%)
+  );
+  corner-shape: bevel;
+  /* Always lit: the elevation gate the aesthetic class answers to is `box`'s,
+     and a solo element is one the consumer chose to light up. */
+  box-shadow: 0 0 var(--cyber-glow, 8px) 0 color-mix(in oklab, var(--_cyber-ink) 40%, transparent);
+  font-family: var(--font-cyber, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  transition: transform var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
+}
+
+/* An action takes the control shape, on the opposite diagonal to a pane's. */
+.cyber-solo:is(
+  button,
+  a[href],
+  [role="button"],
+  summary,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+) {
+  border-radius: var(--cyber-shape, min(var(--cyber-cut, 0.625rem), 25%) 0 / min(var(--cyber-cut, 0.625rem), 25%) 0);
+}
+
+@supports not (corner-shape: bevel) {
+  .cyber-solo,
+  .cyber-solo:is(
+    button,
+    a[href],
+    [role="button"],
+    summary,
+    input[type="button"],
+    input[type="submit"],
+    input[type="reset"]
+  ) {
+    border-radius: 0;
+  }
+}
+
+/* The press, only on something pressed: an action, not disabled. A solo
+   container stays put, the way only `.btn` and an opted-in card press under
+   the aesthetic class. */
+.cyber-solo:is(
+  button,
+  a[href],
+  [role="button"],
+  summary,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+):active:not(:disabled, [aria-disabled="true"]) {
+  transform: scale(0.97);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cyber-solo:is(
+    button,
+    a[href],
+    [role="button"],
+    summary,
+    input[type="button"],
+    input[type="submit"],
+    input[type="reset"]
+  ):active:not(:disabled, [aria-disabled="true"]) {
+    transform: none;
+  }
+}

package/dist/tw/aesthetics/glass.css

@@ -7,60 +7,147 @@
    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));
+/* 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;
 
-  --ui-bg-alpha: 0.8;
-  --ui-backdrop: blur(14px) saturate(1.6);
+@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));
+
+    --ui-bg-alpha: 0.8;
+    --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-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);
+    /* 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;
+    /* 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);
+    /* 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;
+    --ui-hover-transform: none;
+    --ui-active-transform: none;
+    --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;
+  }
 
-  --ui-clip: none;
-  --ui-clip-tight: none;
-  /* 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;
+  /* 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-bg-alpha: 1;
+      --ui-backdrop: none;
+      --ui-surface-ground: var(--color-background);
+    }
+  }
+}
+
+/* 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/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-*`,
+   or `--elevation-color` token: those belong to whichever aesthetic an ancestor
+   carries, and a solo element has to look the same inside any of them.
+   Unlayered and one class deep, so it beats a foreign component's
+   zero-specificity rules wherever they load. Not for this package's own
+   components, which take the aesthetic class instead. */
+.glass-solo {
+  background-color: color-mix(
+    in srgb,
+    var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0))) 45%,
+    transparent
+  );
+  border: 1px solid light-dark(rgb(255 255 255 / 0.65), rgb(255 255 255 / 0.22));
+  /* The surface corner: the element this exists for is a pane. */
+  border-radius: var(--glass-radius-surface, 1rem);
+  /* The theme's depth colour as a literal, for the reason above: inside a
+     `.chunky-tile` region the token is black. */
+  box-shadow:
+    0 1px 2px -1px light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55)),
+    0 18px 40px -16px light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55));
+  /* Prefixed first, for the reason `surface` gives: written second, the
+     minifier folds the pair into the prefixed one and Firefox loses the blur. */
+  -webkit-backdrop-filter: blur(14px) saturate(1.6);
+  backdrop-filter: blur(14px) saturate(1.6);
 }
 
-/* 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-bg-alpha: 1;
-    --ui-backdrop: none;
-    --ui-surface-ground: var(--color-background);
+  .glass-solo {
+    background-color: var(--color-background, light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0)));
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
   }
 }

package/dist/tw/aesthetics/index.css

@@ -7,3 +7,5 @@
 @import "./glass.css";
 @import "./pixel.css";
 @import "./chunky-tile.css";
+@import "./cyber.css";
+@import "./sketch.css";

package/dist/tw/aesthetics/neobrutalism.css

@@ -3,53 +3,100 @@
    named -- the ink reaches everything through the intent reset, the shadow is
    colourless geometry each component colours against its own intent. Load after
    the base stylesheet; source order decides against the zero-specificity reset. */
-.neobrutalism {
-  /* Read with a fallback, not declared, so an ancestor (`:root`, where an app
-     themes) can set `--neo-offset`; the private carries the resolved value to
-     the six places below. See model.md#rules-for-aesthetics (R8). */
-  --_neo-offset: var(--neo-offset, 4px);
 
-  /* Pure black reads as ink on a light page and disappears on a dark one, so the
-     ink follows the theme rather than the palette. A thick border in the neutral
-     border grey is a thick grey box, not a brutalist one. */
-  --ui-ink: light-dark(var(--color-neutral-950), var(--color-neutral-50));
-
-  --ui-radius: 0;
-  --ui-radius-surface: 0;
-  --ui-border-width: 2px;
-  --ui-border-max: 100px;
-
-  /* Hard, unblurred, and offset. Scaled by each component's own elevation, so
-     the registry decides which components sit on a slab and `.flat` takes one
-     off without this file knowing which component it landed on. */
-  /* The slab is ink, not shade: a hard offset of the element's own line colour
-     is the whole look, so this aesthetic asks for the intent instead of the
-     neutral depth colour every other shadow uses. */
-  --ui-shadow-ink: 100%;
-  --ui-shadow-x: var(--_neo-offset);
-  --ui-shadow-y: var(--_neo-offset);
-  --ui-shadow-blur: 0px;
-  --ui-shadow-spread: 0px;
-
-  /* The press: travel the offset, shrink the shadow to nothing, so the element
-     lands flat where its slab was. Hover keeps the slab still under the pointer;
-     `box-hover`'s derived fill tint is the whole hover response. One token pair,
-     no `:hover` list, R3 intact. */
-  --ui-active-shadow-x: 0px;
-  --ui-active-shadow-y: 0px;
-  --ui-active-transform: translate(var(--_neo-offset), var(--_neo-offset));
-
-  /* Nothing here clips or blurs, and an aesthetic nested inside another has to
-     say so rather than inherit it. */
-  --ui-clip: none;
-  --ui-clip-tight: none;
-  --ui-shadow-inset: ;
-  /* The slab is depth cast in ink, not this element's line, so an `.edgeless`
-     button keeps it. Cleared rather than omitted, because a neobrutalist region
-     nested inside a pixel one would otherwise inherit pixel's answer and lose the
-     slab on everything the edge axis rests at zero. */
-  --ui-shadow-edge: initial;
-  --ui-backdrop: none;
+/* 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 {
+  .neobrutalism {
+    /* Read with a fallback, not declared, so an ancestor (`:root`, where an app
+       themes) can set `--neo-offset`; the private carries the resolved value to
+       the six places below. See model.md#rules-for-aesthetics (R8). */
+    --_neo-offset: var(--neo-offset, 4px);
+
+    /* Pure black reads as ink on a light page and disappears on a dark one, so the
+       ink follows the theme rather than the palette. A thick border in the neutral
+       border grey is a thick grey box, not a brutalist one. */
+    --ui-ink: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+
+    --ui-corner: 0;
+    --ui-corner-surface: 0;
+    --ui-border-width: 2px;
+    --ui-border-max: 100px;
+    --ui-line-style: initial;
+    --ui-rule-style: initial;
+
+    /* Hard, unblurred, and offset. Scaled by each component's own elevation, so
+       the registry decides which components sit on a slab and `.flat` takes one
+       off without this file knowing which component it landed on. */
+    /* The slab is ink, not shade: a hard offset of the element's own line colour
+       is the whole look, so this aesthetic asks for the intent instead of the
+       neutral depth colour every other shadow uses. */
+    --ui-shadow-ink: 100%;
+    --ui-shadow-x: var(--_neo-offset);
+    --ui-shadow-y: var(--_neo-offset);
+    --ui-shadow-blur: 0px;
+    --ui-shadow-spread: 0px;
+    /* 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;
+
+    /* The press: travel the offset, shrink the shadow to nothing, so the element
+       lands flat where its slab was. A translation `box` scales with the slab, so
+       the two stay the same length at every size and elevation. Hover keeps the slab still under the pointer;
+       `box-hover`'s derived fill tint is the whole hover response. One token pair,
+       no `:hover` list, R3 intact. */
+    --ui-active-shadow-x: 0px;
+    --ui-active-shadow-y: 0px;
+    --ui-active-transform: none;
+    --ui-active-translate-x: var(--_neo-offset);
+    --ui-active-translate-y: var(--_neo-offset);
+
+    /* Nothing here clips or blurs, and an aesthetic nested inside another has to
+       say so rather than inherit it. */
+    --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;
+    --ui-shadow-inset: ;
+    /* The slab is depth cast in ink, not this element's line, so an `.edgeless`
+       button keeps it. Cleared rather than omitted, because a neobrutalist region
+       nested inside a pixel one would otherwise inherit pixel's answer and lose the
+       slab on everything the edge axis rests at zero. */
+    --ui-shadow-edge: initial;
+    --ui-backdrop: none;
+    --ui-surface-ground: initial;
+    --ui-surface-shadow: initial;
+    --ui-bg-alpha: 1;
+    --ui-surface-image: initial;
+
+    /* The control ink glass and chunky tile name, cleared so a region nested
+       inside either draws its controls in this aesthetic's own ink. */
+    --ui-control-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;
+  }
 }
 
 /* The one R3 exception, recorded in the registry as `selectors`. The slab here
@@ -57,7 +104,60 @@
    registry rests flat -- looks unfinished without it. It writes the component's
    resting default rather than the modifier, so `.flat`/`.raised`/`.floating`
    still win on the element; a token would name the component through a longer
-   route. `--_d-elevation` inheriting is inert -- it equals `box`'s own fallback. */
-.neobrutalism .alert {
-  --_d-elevation: 1;
+   route. `--_d-elevation` inheriting is inert -- it equals `box`'s own fallback.
+
+   In `utilities`, not with the token class: it has to beat `@utility alert`'s
+   own `--_d-elevation: 0`, which it does there at 0-2-0, and it writes only a
+   private nothing a consumer sets. */
+@layer utilities {
+  .neobrutalism .alert {
+    --_d-elevation: 1;
+  }
+}
+
+/* Solo: the same look painted onto the one element carrying the class, for an
+   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. */
+.neobrutalism-solo {
+  --_neo-offset: var(--neo-offset, 4px);
+  --_neo-ink: light-dark(var(--color-neutral-950, oklch(14.5% 0 0)), var(--color-neutral-50, oklch(98.5% 0 0)));
+
+  border: 2px solid var(--_neo-ink);
+  border-radius: 0;
+  box-shadow: var(--_neo-offset) var(--_neo-offset) 0 0 var(--_neo-ink);
+  transition:
+    box-shadow var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
+    transform var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
+}
+
+/* The press, only on something pressed: an action, not disabled. A solo
+   container -- a toast clicked to dismiss -- stays put, the way only `.btn` and
+   an opted-in card press under the aesthetic class. */
+.neobrutalism-solo:is(
+  button,
+  a[href],
+  [role="button"],
+  summary,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+):active:not(:disabled, [aria-disabled="true"]) {
+  box-shadow: 0 0 0 0 var(--_neo-ink);
+  transform: translate(var(--_neo-offset), var(--_neo-offset));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .neobrutalism-solo:is(
+    button,
+    a[href],
+    [role="button"],
+    summary,
+    input[type="button"],
+    input[type="submit"],
+    input[type="reset"]
+  ):active:not(:disabled, [aria-disabled="true"]) {
+    transform: none;
+  }
 }