@codenhub/styles 0.3.0 → 0.4.0

package/dist/tw/aesthetics/chunky-tile.css

@@ -73,6 +73,12 @@
      `.btn`. */
   --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;
   --ui-shadow-inset: ;
   --ui-shadow-edge: initial;
   --ui-backdrop: none;
@@ -123,3 +129,68 @@
 .chunky-tile .btn.icon.p-xs {
   --ui-shadow-y: 2px;
 }
+
+/* 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
+   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. */
+.chunky-tile-solo {
+  --_tile-lift: var(--tile-lift, 4px);
+  --_tile-ink: light-dark(var(--color-neutral-400, oklch(70.8% 0 0)), var(--color-neutral-600, oklch(43.9% 0 0)));
+  /* With no fill to shade, the bar shades the edge: the colour an unfilled
+     tile's bar already is under the aesthetic class. */
+  --_tile-bar: color-mix(in oklab, var(--_tile-ink) 72%, rgb(0 0 0));
+
+  border: 2px solid var(--_tile-ink);
+  border-radius: var(--tile-radius, 0.75rem);
+  box-shadow: 0 var(--_tile-lift) 0 0 var(--_tile-bar);
+  font-family: var(--font-rounded, var(--font-default, ui-sans-serif, system-ui, sans-serif));
+  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 heavier, tracked label is an action's, as under the aesthetic class. */
+.chunky-tile-solo:is(
+  button,
+  a[href],
+  [role="button"],
+  summary,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"]
+) {
+  font-weight: 800;
+  letter-spacing: 0.04em;
+}
+
+/* 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. */
+.chunky-tile-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(--_tile-bar);
+  transform: translateY(var(--_tile-lift));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chunky-tile-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/cyber.css

@@ -0,0 +1,190 @@
+/* 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.
+
+   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);
+}
+
+/* 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-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
+   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

@@ -48,6 +48,12 @@
 
   --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;
@@ -64,3 +70,43 @@
     --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/solo-utilities.md.
+
+   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);
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .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,4 @@
 @import "./glass.css";
 @import "./pixel.css";
 @import "./chunky-tile.css";
+@import "./cyber.css";

package/dist/tw/aesthetics/neobrutalism.css

@@ -43,6 +43,12 @@
      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-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;
   --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
@@ -61,3 +67,50 @@
 .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/solo-utilities.md 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;
+  }
+}

package/dist/tw/aesthetics/pixel.css

@@ -78,6 +78,14 @@
      a grid, and a square is on it. */
   --ui-clip-tight: none;
 
+  /* Square corners already, but a radius of zero draws no shape; it is
+     restated, and the pill and chip corners cleared back to `--ui-radius`, so
+     a region nested inside `.cyber` does not inherit its bevel onto anything
+     that sets a radius of its own. */
+  --ui-corner-shape: round;
+  --ui-radius-pill: initial;
+  --ui-radius-tight: initial;
+
   --ui-hover-transform: none;
   --ui-active-transform: none;
   --ui-backdrop: none;
@@ -86,3 +94,43 @@
      font to fall back to but a monospace stack. */
   font-family: var(--font-pixel, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
 }
+
+/* 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
+   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. */
+.pixel-solo {
+  --_pixel-unit: var(--pixel-unit, 4px);
+  --_pixel-ink: light-dark(var(--color-neutral-950, oklch(14.5% 0 0)), var(--color-neutral-50, oklch(98.5% 0 0)));
+
+  /* The clip removes a border at the straight sides, so the ring draws the
+     edge and the element's own border goes. */
+  border: 0;
+  border-radius: 0;
+  box-shadow: inset 0 0 0 var(--_pixel-unit) var(--_pixel-ink);
+  clip-path: polygon(
+    0 var(--_pixel-unit),
+    var(--_pixel-unit) var(--_pixel-unit),
+    var(--_pixel-unit) 0,
+    calc(100% - var(--_pixel-unit)) 0,
+    calc(100% - var(--_pixel-unit)) var(--_pixel-unit),
+    100% var(--_pixel-unit),
+    100% calc(100% - var(--_pixel-unit)),
+    calc(100% - var(--_pixel-unit)) calc(100% - var(--_pixel-unit)),
+    calc(100% - var(--_pixel-unit)) 100%,
+    var(--_pixel-unit) 100%,
+    var(--_pixel-unit) calc(100% - var(--_pixel-unit)),
+    0 calc(100% - var(--_pixel-unit))
+  );
+  font-family: var(--font-pixel, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+}
+
+/* The clip takes the focus outline too, so focus is a second inset layer under
+   the ring, wider than it so it shows -- shadows paint first-on-top. */
+.pixel-solo:focus-visible {
+  box-shadow:
+    inset 0 0 0 var(--_pixel-unit) var(--_pixel-ink),
+    inset 0 0 0 calc(var(--_pixel-unit) + var(--focus-ring-width, 3px))
+      var(--focus-ring, color-mix(in srgb, var(--_pixel-ink) 64%, transparent));
+}

package/dist/tw/box.css

@@ -153,6 +153,13 @@
   color: var(--_fg);
   border: var(--_width) solid var(--_edge);
   border-radius: var(--ui-radius, var(--radius-control));
+  /* What the radius draws: a round arc by default, a straight cut under an
+     aesthetic that bevels (`.cyber`). `round` is the property's initial value,
+     so with no aesthetic in scope this is a no-op, and an engine without
+     `corner-shape` drops the line at parse time. A component that overrides the
+     radius after `@apply box` keeps this, so it bevels by the same amount it
+     rounds. See model.md#material-tokens. */
+  corner-shape: var(--ui-corner-shape, round);
   box-shadow: var(--_shadow);
   clip-path: var(--ui-clip, none);
   transition:

package/dist/tw/components/button.css

@@ -91,6 +91,9 @@
     }
   }
 
+  /* A pill is a shape the author asked for, so it outranks the aesthetic's
+     radius. It still takes the corner shape from `box`, so under a bevelling
+     aesthetic the full radius cuts to points at both ends. */
   &.pill {
     @apply rounded-full;
   }

package/dist/tw/components/feedback.css

@@ -94,8 +94,10 @@
   @apply box inline-flex min-h-6 w-fit items-center gap-1 px-2.5 text-xs font-bold;
 
   /* Pill by default, but an aesthetic that declares no radius has to mean it, so
-     the round corner is this component's fallback rather than a hardcoded value. */
-  border-radius: var(--ui-radius, calc(infinity * 1px));
+     the round corner is this component's fallback rather than a hardcoded value.
+     An aesthetic that keeps pills distinct from its control corner says so
+     through `--ui-radius-pill` first. */
+  border-radius: var(--ui-radius-pill, var(--ui-radius, calc(infinity * 1px)));
   clip-path: var(--ui-clip-tight, var(--ui-clip, none));
 }
 
@@ -115,6 +117,8 @@
   background: linear-gradient(90deg, var(--skeleton-base), var(--skeleton-sheen), var(--skeleton-base));
   background-size: 200% 100%;
   border-radius: var(--ui-radius, var(--radius-control));
+  /* Not a box, so it reads the corner shape itself, beside the radius. */
+  corner-shape: var(--ui-corner-shape, round);
 }
 
 /* The track is a box, the fill is not: `box.css`'s formula composes the frame,
@@ -160,14 +164,18 @@
   background-color: var(--progress-surface, var(--_progress-surface));
   border: var(--ui-border-width, var(--border-width)) solid var(--progress-edge, var(--_progress-edge));
   /* Round by default; an aesthetic that declares no radius squares the track and
-     its fill together. */
-  border-radius: var(--ui-radius, calc(infinity * 1px));
+     its fill together, and a pill corner reaches both first. */
+  border-radius: var(--ui-radius-pill, var(--ui-radius, calc(infinity * 1px)));
+  /* Not a box either, and the fill below restates it, so a bevelled track
+     carries a bevelled fill rather than a pill inside a cut frame. */
+  corner-shape: var(--ui-corner-shape, round);
 
   &::after {
     content: "";
     @apply absolute start-0 top-0 bottom-0 block h-full transition-[width] duration-(--motion-duration-slow) ease-(--motion-ease);
 
-    border-radius: var(--ui-radius, calc(infinity * 1px));
+    border-radius: var(--ui-radius-pill, var(--ui-radius, calc(infinity * 1px)));
+    corner-shape: var(--ui-corner-shape, round);
     background-color: var(--progress-color, var(--intent-color));
     width: var(--progress-value, 0%);
     z-index: 2;

package/dist/tw/components/form.css

@@ -487,8 +487,10 @@
 
   /* Capped at its own radius: a control radius is sized for a 40px control, and
      14px of it on a 16px box renders as a circle, which is the one shape a
-     checkbox must not be. A squaring aesthetic still reaches it. */
-  border-radius: min(var(--ui-radius, var(--radius-small)), var(--radius-small));
+     checkbox must not be. A squaring aesthetic still reaches it, through the
+     chip corner first -- `.cyber` squares chips outright, which is also what
+     tells its checkbox from its diamond radio. */
+  border-radius: min(var(--ui-radius-tight, var(--ui-radius, var(--radius-small))), var(--radius-small));
 
   /* Chip geometry: the tight silhouette, and an inset edge no thicker than the
      line the aesthetic draws elsewhere. A 16px box cannot spend four pixels a
@@ -554,6 +556,10 @@
   &::after {
     @apply block size-2 scale-0 rounded-full opacity-0 transition-[transform,opacity] duration-(--motion-duration-normal) ease-(--motion-ease);
 
+    /* The dot is the ring's shape at a smaller size: a diamond inside a diamond
+       under a bevelling aesthetic, a circle inside a circle otherwise. */
+    corner-shape: var(--ui-corner-shape, round);
+
     background-color: currentcolor;
     content: "";
   }
@@ -614,8 +620,10 @@
 
   height: var(--switch-height);
   width: var(--switch-width);
-  /* Pill by default; a squaring aesthetic reaches the track and the knob together. */
-  border-radius: var(--ui-radius, calc(infinity * 1px));
+  /* Pill by default; a squaring aesthetic reaches the track and the knob
+     together, and an aesthetic with a pill corner of its own reaches both
+     through that first. */
+  border-radius: var(--ui-radius-pill, var(--ui-radius, calc(infinity * 1px)));
 
   /* Chip geometry, for the reason given on `checkbox`: a 20px track has no more
      room for a thick inset edge than a 16px box does. */
@@ -636,7 +644,10 @@
        tone as the label beside it. Checked, it takes the mark colour like the
        other two toggles. */
     background-color: var(--color-text-secondary);
-    border-radius: var(--ui-radius, calc(infinity * 1px));
+    border-radius: var(--ui-radius-pill, var(--ui-radius, calc(infinity * 1px)));
+    /* A pseudo-element is not a box: the knob takes the track's corner shape
+       itself, so the two stay the same shape. */
+    corner-shape: var(--ui-corner-shape, round);
     content: "";
     height: var(--switch-knob);
     width: var(--switch-knob);

package/dist/tw/components/tooltip.css

@@ -138,6 +138,6 @@
   --_d-elevation: 0;
   --_d-ground: var(--intent-subtle);
 
-  border-radius: var(--ui-radius, calc(infinity * 1px));
+  border-radius: var(--ui-radius-pill, var(--ui-radius, calc(infinity * 1px)));
   clip-path: none;
 }

package/dist/tw/utilities/content.css

@@ -320,7 +320,7 @@
 
   /* Capped at its own radius: a control radius is sized for a control, and a key
      cap this small would read as a lozenge. A squaring aesthetic still reaches it. */
-  border-radius: min(var(--ui-radius, var(--radius-small)), var(--radius-small));
+  border-radius: min(var(--ui-radius-tight, var(--ui-radius, var(--radius-small))), var(--radius-small));
   clip-path: var(--ui-clip-tight, var(--ui-clip, none));
 
   &:not(.primary, .secondary, .success, .warning, .destructive, .danger, .error, .info, .solid) {
@@ -338,7 +338,7 @@
   --_d-elevation: 0;
   --_d-ground: var(--intent-subtle);
 
-  border-radius: min(var(--ui-radius, var(--radius-small)), var(--radius-small));
+  border-radius: min(var(--ui-radius-tight, var(--ui-radius, var(--radius-small))), var(--radius-small));
   clip-path: var(--ui-clip-tight, var(--ui-clip, none));
 
   &:not(.primary, .secondary, .success, .warning, .destructive, .danger, .error, .info, .solid) {

package/docs/changelog/0.4.0.md

@@ -0,0 +1,12 @@
+---
+title: 0.4.0
+date: 2026-09-23
+---
+
+# 0.4.0
+
+## Added
+
+- **`.cyber`**, a fifth aesthetic from `@codenhub/styles/aesthetics/cyber` (and `/tw/aesthetics/cyber`, and both aggregates): bevelled corners, a 1px edge, and a glow in each component's own colour. Controls cut top-left and bottom-right, surfaces top-right and bottom-left; what is fully round (a radio, a switch, a pill, a badge) cuts to diamonds and pointed hexagons, and chips square. Knobs: `--cyber-cut`, `--cyber-shape`, `--cyber-shape-surface`, `--cyber-glow`, `--cyber-ink`, and the consumer-supplied `--font-cyber`. The bevel is drawn with `corner-shape`, which only Chromium supports today; Firefox and Safari get square cut corners and round round ones. See [Aesthetics → Cyber](../usage/aesthetics.md#cyber).
+- **A solo class for every aesthetic**: `.glass-solo`, `.neobrutalism-solo`, `.pixel-solo`, `.chunky-tile-solo`, and `.cyber-solo` paint the aesthetic's look onto the one element carrying the class, for an element this package does not style -- a toast from another library, or a `<div>` on a page without the base stylesheet. Each ships in its aesthetic's existing entrypoint and needs nothing else loaded. See [Aesthetics → Solo classes](../usage/aesthetics.md#solo-classes).
+- **Three material tokens**: `--ui-corner-shape` (what a corner draws: `round`, or a `bevel` cut), `--ui-radius-pill` (the corner of what is fully round by default), and `--ui-radius-tight` (the corner of chips, before their `--radius-small` cap). All three default to today's look, so nothing changes unless an aesthetic or your own CSS sets them. See [Customizing → Material tokens](../usage/customizing.md#material-tokens).

package/docs/changelog/index.md

@@ -6,6 +6,7 @@ group: Changelog
 
 # Changelog
 
+- [0.4.0](0.4.0.md)
 - [0.3.0](0.3.0.md)
 - [0.2.0](0.2.0.md)
 - [0.1.1](0.1.1.md)

package/docs/concepts.md

@@ -12,11 +12,11 @@ Read this before the usage guides. It explains the mental model every component,
 
 Every component separates three independent choices, so each can change without a component-specific variant:
 
-| Axis         | Question        | Classes                                                                                   | Inheritance  |
-| ------------ | --------------- | ----------------------------------------------------------------------------------------- | ------------ |
-| Intent       | Which color?    | `.primary`, `.secondary`, `.success`, `.warning`, `.destructive`, `.info`                 | Element only |
-| Presentation | How much of it? | `.solid`, `.soft`, `.ghost`, `.edged`, `.edgeless`                                        | Cascades     |
-| Aesthetic    | Made of what?   | `.neobrutalism`, `.glass`, `.pixel`, `.chunky-tile` from an optional aesthetic stylesheet | Cascades     |
+| Axis         | Question        | Classes                                                                                             | Inheritance  |
+| ------------ | --------------- | --------------------------------------------------------------------------------------------------- | ------------ |
+| Intent       | Which color?    | `.primary`, `.secondary`, `.success`, `.warning`, `.destructive`, `.info`                           | Element only |
+| Presentation | How much of it? | `.solid`, `.soft`, `.ghost`, `.edged`, `.edgeless`                                                  | Cascades     |
+| Aesthetic    | Made of what?   | `.neobrutalism`, `.glass`, `.pixel`, `.chunky-tile`, `.cyber` from an optional aesthetic stylesheet | Cascades     |
 
 ```html
 <section class="soft pixel">

package/docs/index.md

@@ -14,7 +14,7 @@ The package ships as ready-to-import compiled CSS, or as Tailwind CSS v4 source
 - Publishes color, foundation, intent, presentation, and material design tokens as CSS custom properties, themed with `light-dark()`.
 - Provides a reset, focus-visible handling, and responsive layout/content utilities.
 - Provides composable classes for buttons, form controls and toggles, alerts, badges, loaders, progress, cards/panels, tables, quotes, code, and tooltips.
-- Provides four opt-in aesthetics that restyle the same components by setting material tokens, not by adding component variants.
+- Provides five opt-in aesthetics that restyle the same components by setting material tokens, not by adding component variants, each with a solo class that paints the look onto an element the package does not style.
 - Provides classless mappings so plain HTML elements pick up base styling without added classes, from a dedicated entrypoint.
 - Publishes Tailwind CSS v4 source entrypoints alongside the compiled output.
 
@@ -23,7 +23,7 @@ The package ships as ready-to-import compiled CSS, or as Tailwind CSS v4 source
 - No JavaScript. There is no runtime, no framework bindings, and no build-time code generation beyond the CSS itself.
 - No semantic HTML, ARIA, keyboard behavior, focus management, validation, or announcement timing. See [Accessibility](./accessibility.md) for the exact line between what the CSS provides and what an application must still add.
 - No theme-toggling logic. Theme selection is a class or attribute a consumer applies; wiring a toggle to system preference, storage, or a user setting is outside this package. The `@codenhub/theme` package covers that need for consumers who want it.
-- No shipped font binaries. `.pixel` and `.chunky-tile` accept a consumer-supplied font and fall back to a system stack when none is given.
+- No shipped font binaries. `.pixel`, `.chunky-tile`, and `.cyber` accept a consumer-supplied font and fall back to a system stack when none is given.
 - No compatibility layer for removed tokens or classes. Breaking changes are documented, not silently aliased.
 
 ## Next steps