@codenhub/styles 0.8.0 → 0.9.0

package/tw/aesthetics/chunky-tile.css

@@ -194,6 +194,9 @@
   --_tile-bar: color-mix(in oklab, var(--_solo-ink) 72%, rgb(0 0 0));
   --_solo-depth: calc(var(--_tile-lift) * var(--ui-elevation, 1));
 
+  /* Printed as drawn; see `.glass-solo`. */
+  print-color-adjust: exact;
+
   border: 2px solid var(--_solo-edge);
   border-radius: var(--tile-radius, 0.75rem);
   box-shadow:
@@ -282,7 +285,7 @@
     input[type="button"],
     input[type="submit"],
     input[type="reset"]
-  ):active:not(:disabled, [aria-disabled="true"]) {
+  ):active:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]) {
   box-shadow:
     0 0 0 0 var(--_tile-bar),
     inset 0 0 0 100vmax var(--_solo-fill);

package/tw/aesthetics/cyber.css

@@ -179,6 +179,9 @@
   );
   --_solo-edge: color-mix(in oklab, var(--_solo-ink) var(--ui-border, 100%), var(--_solo-fill));
 
+  /* Printed as drawn; see `.glass-solo`. */
+  print-color-adjust: exact;
+
   border: 1px solid var(--_solo-edge);
   /* The surface shape: the element this exists for is usually a pane. An action
      takes the control shape below. */
@@ -275,6 +278,6 @@
     input[type="button"],
     input[type="submit"],
     input[type="reset"]
-  ):active:not(:disabled, [aria-disabled="true"]) {
+  ):active:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]) {
   scale: 0.97;
 }

package/tw/aesthetics/glass.css

@@ -445,6 +445,11 @@
      does, rather than to the fill. */
   --_solo-edge: color-mix(in oklab, var(--_solo-ink) var(--ui-border, 100%), transparent);
 
+  /* Printed as drawn, as `box` is: a browser leaves backgrounds off paper
+     and greys a contrast label, so a solid element printed its label on
+     no plate. Inherited, so what it holds keeps its paint too. */
+  print-color-adjust: exact;
+
   background-color: color-mix(in oklab, var(--_solo-color) var(--_solo-capped), var(--_solo-ground));
   border: 1px solid var(--_solo-edge);
   /* The surface corner: the element this exists for is a pane. */

package/tw/aesthetics/neobrutalism.css

@@ -187,6 +187,9 @@
      and `.floating` doubles it, and the press travels the same distance. */
   --_solo-depth: calc(var(--_neo-offset) * var(--ui-elevation, 1));
 
+  /* Printed as drawn; see `.glass-solo`. */
+  print-color-adjust: exact;
+
   border: 2px solid var(--_solo-edge);
   border-radius: 0;
   box-shadow:
@@ -260,7 +263,7 @@
     input[type="button"],
     input[type="submit"],
     input[type="reset"]
-  ):active:not(:disabled, [aria-disabled="true"]) {
+  ):active:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]) {
   box-shadow:
     0 0 0 0 var(--_solo-ink),
     inset 0 0 0 100vmax var(--_solo-fill);

package/tw/aesthetics/pixel.css

@@ -182,6 +182,9 @@
 
   /* The clip removes a border at the straight sides, so the ring draws the
      edge and the element's own border goes. */
+  /* Printed as drawn; see `.glass-solo`. */
+  print-color-adjust: exact;
+
   border: 0;
   border-radius: 0;
   box-shadow:

package/tw/aesthetics/sketch.css

@@ -159,6 +159,14 @@
        with the token, so a position never reads a value inherited from an
        ancestor's. */
     &:is(.btn, .ipt, .textarea, .select, .input-group, .pre, .tooltip-bubble) {
+      /* The first position draws the region's own outline, declared here too
+         so a knob set between the region and the element reaches it. */
+      &:nth-child(4n + 1) {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius, 255px 15px 225px 15px / 15px 225px 15px 255px);
+        --_sketch-r: var(--_sketch-rounded) var(--sketch-radius-rounded, 26px 10px 24px 11px / 12px 23px 11px 20px);
+        --ui-radius: var(--_sketch-pass-radius, var(--_sketch-r, var(--_sketch-p)));
+      }
+
       &:nth-child(4n + 2) {
         --_sketch-p: var(--_sketch-pointed) var(--sketch-radius, 18px 240px 15px 255px / 240px 15px 255px 18px);
         --_sketch-r: var(--_sketch-rounded) var(--sketch-radius-rounded, 11px 25px 12px 24px / 23px 11px 22px 12px);
@@ -205,6 +213,13 @@
     }
 
     &:is(.card, .panel, .alert, .data-table) {
+      &:nth-child(4n + 1) {
+        --_sketch-p: var(--_sketch-pointed) var(--sketch-radius-surface, 80px 4px 75px 5px / 3px 70px 4px 80px);
+        --_sketch-r: var(--_sketch-rounded)
+          var(--sketch-radius-surface-rounded, 38px 16px 36px 17px / 16px 34px 17px 32px);
+        --ui-radius-surface: var(--_sketch-pass-radius-surface, var(--_sketch-r, var(--_sketch-p)));
+      }
+
       &:nth-child(4n + 2) {
         --_sketch-p: var(--_sketch-pointed) var(--sketch-radius-surface, 4px 75px 5px 80px / 75px 3px 80px 4px);
         --_sketch-r: var(--_sketch-rounded)
@@ -335,6 +350,9 @@
   --_solo-edge: color-mix(in oklab, var(--_solo-ink) var(--ui-border, 100%), var(--_solo-fill));
   --_solo-depth: calc(2px * var(--ui-elevation, 1));
 
+  /* Printed as drawn; see `.glass-solo`. */
+  print-color-adjust: exact;
+
   border: 1px solid var(--_solo-edge);
   /* The surface shape: the element this exists for is usually a pane. An action
      takes the control shape below. */

package/tw/box.css

@@ -203,8 +203,8 @@
      with no aesthetic. The order lets a raised card under `.neobrutalism` keep
      the slab. Nothing declares the last slot until something asks for depth, so
      a plain unmodified page has no shadow anywhere. */
-  --_sy: calc(var(--ui-shadow-y, var(--_d-shadow-y, var(--elevation-y, 0px))) * var(--_depth));
-  --_sb: calc(var(--ui-shadow-blur, var(--_d-shadow-blur, var(--elevation-blur, 0px))) * var(--_depth));
+  --_sy: calc(var(--ui-shadow-y, var(--_d-shadow-y, var(--_elevation-y, 0px))) * var(--_depth));
+  --_sb: calc(var(--ui-shadow-blur, var(--_d-shadow-blur, var(--_elevation-blur, 0px))) * var(--_depth));
   /* Spread is deliberately not scaled. An aesthetic that draws its edge as an
      inset ring spends spread on it, and scaling that by elevation would erase
      the edge of every component the registry rests at zero. Elevation is depth:
@@ -363,20 +363,26 @@
    full and darkens because the colour changed.
 
    Separate from `box` because tinting on hover is right for something you press
-   and wrong for something you type into, so a component opts in. */
+   and wrong for something you type into, so a component opts in.
+
+   Only where the primary pointer can hover, as Tailwind's `hover:` variant:
+   a touch screen leaves a tapped element in `:hover` until something else is
+   tapped, so without the query a button kept its hover tint after the tap. */
 @utility box-hover {
-  &:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]):hover {
-    --_bg: color-mix(in oklab, var(--intent-hover) var(--_hover-fill), var(--_ground));
-    /* P3 again, against the hover tone: the line still fades as the fill fills
-       in, but toward the hover ink. Without this the edge keeps the resting ink
-       -- a ring of the colour the box just left. */
-    --_line: color-mix(in oklab, transparent var(--ui-fill, var(--_d-fill)), var(--intent-hover));
-    --_sx: calc(var(--ui-hover-shadow-x, var(--ui-shadow-x, var(--_d-shadow-x, 0px))) * var(--_depth));
-    --_sy: calc(
-      var(--ui-hover-shadow-y, var(--ui-shadow-y, var(--_d-shadow-y, var(--elevation-y, 0px)))) * var(--_depth)
-    );
+  @media (hover: hover) {
+    &:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]):hover {
+      --_bg: color-mix(in oklab, var(--intent-hover) var(--_hover-fill), var(--_ground));
+      /* P3 again, against the hover tone: the line still fades as the fill fills
+         in, but toward the hover ink. Without this the edge keeps the resting ink
+         -- a ring of the colour the box just left. */
+      --_line: color-mix(in oklab, transparent var(--ui-fill, var(--_d-fill)), var(--intent-hover));
+      --_sx: calc(var(--ui-hover-shadow-x, var(--ui-shadow-x, var(--_d-shadow-x, 0px))) * var(--_depth));
+      --_sy: calc(
+        var(--ui-hover-shadow-y, var(--ui-shadow-y, var(--_d-shadow-y, var(--_elevation-y, 0px)))) * var(--_depth)
+      );
 
-    transform: var(--ui-hover-transform, none);
+      transform: var(--ui-hover-transform, none);
+    }
   }
 }
 
@@ -407,7 +413,7 @@
     /* The same three slots as the resting offset, `.raised`'s plain step last,
        so with no aesthetic a pressed button keeps the depth it rests on. */
     --_sy: calc(
-      var(--ui-active-shadow-y, var(--ui-shadow-y, var(--_d-shadow-y, var(--elevation-y, 0px)))) * var(--_depth)
+      var(--ui-active-shadow-y, var(--ui-shadow-y, var(--_d-shadow-y, var(--_elevation-y, 0px)))) * var(--_depth)
     );
 
     --_press: calc(var(--ui-active-translate-x, 0px) * var(--_depth))

package/tw/components/button.rules.css

@@ -102,7 +102,7 @@
   --_lg-py: var(--_size-lg) 0.625rem;
   --_sm-text: var(--_size-sm) var(--text-sm);
   --_lg-text: var(--_size-lg) 1.0625rem;
-  --_sm-leading: var(--_size-sm) var(--tw-leading, var(--text-sm--line-height));
+  --_sm-leading: var(--_size-sm) var(--text-sm--line-height);
   --_sm-scale: var(--_size-sm) 0.75;
   --_lg-scale: var(--_size-lg) 1.25;
   --_scale-size: var(--_sm-scale, var(--_lg-scale));

package/tw/components/feedback.rules.css

@@ -137,13 +137,15 @@
     }
   }
 
-  --skeleton-base: color-mix(in oklab, var(--intent-color) 6%, var(--intent-subtle));
-  --skeleton-sheen: color-mix(in oklab, var(--intent-color) 10%, var(--color-foreground));
+  /* Public, read with their defaults, so a value set on any ancestor reaches
+     the placeholder. */
+  --_skeleton-base: var(--skeleton-base, color-mix(in oklab, var(--intent-color) 6%, var(--intent-subtle)));
+  --_skeleton-sheen: var(--skeleton-sheen, color-mix(in oklab, var(--intent-color) 10%, var(--color-foreground)));
 
   @apply min-h-4 w-full;
 
   animation: anim-skeleton calc(var(--motion-duration-slow) * 4) linear infinite;
-  background: linear-gradient(90deg, var(--skeleton-base), var(--skeleton-sheen), var(--skeleton-base));
+  background: linear-gradient(90deg, var(--_skeleton-base), var(--_skeleton-sheen), var(--_skeleton-base));
   background-size: 200% 100%;
   /* Not a box, so it draws the control corner and its pattern itself, the way
      `box` does at scale 1, and reads the corner shape beside it. */
@@ -306,6 +308,23 @@
       animation: none;
     }
   }
+
+  /* Forced colours, carried for an applied bar, as the toggles carry theirs.
+     The class also keeps the unlayered copy below, which beats every layered
+     rule; see there for why each part is named. */
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+    background-color: Canvas;
+    border-color: CanvasText;
+
+    &::after {
+      background-color: CanvasText;
+    }
+
+    &::before {
+      display: none;
+    }
+  }
 }
 
 /* Forced colours repaint every background as Canvas, the value fill on a

package/tw/components/form.rules.css

@@ -116,16 +116,20 @@
   /* The last exclusion is `.input-group`'s: a group whose control is disabled
      dims as a disabled field does (see `input-group`), so it does not answer
      the pointer either. The list is the group's own, so a `<select>` with a
-     disabled `<option>` is not caught by it. */
-  &:hover:not(
-      :disabled,
-      .disabled,
-      [aria-disabled="true"],
-      [data-disabled],
-      :focus-visible,
-      :has(> :is(.ipt, .textarea, .select, .text-control, input, textarea, select):disabled)
-    ) {
-    --_line-tone: var(--intent-hover);
+     disabled `<option>` is not caught by it. Under `(hover: hover)` as the
+     other hover responses are: a tapped checkbox, select, or group stays in
+     `:hover` without matching `:focus-visible`, and kept the hover line. */
+  @media (hover: hover) {
+    &:hover:not(
+        :disabled,
+        .disabled,
+        [aria-disabled="true"],
+        [data-disabled],
+        :focus-visible,
+        :has(> :is(.ipt, .textarea, .select, .text-control, input, textarea, select):disabled)
+      ) {
+      --_line-tone: var(--intent-hover);
+    }
   }
 
   /* The line moves to the intent on top of the `reset.css` `:focus-visible`
@@ -324,6 +328,22 @@
     --intent-fill-max: 100%;
   }
 
+  /* A bare toggle's "on" plate. `/native` reaches the toggles through `@apply`
+     in `base`, where their `:checked` and `:indeterminate` pins lose to
+     `.ghost` and `.soft` in `utilities`, so a checked quiet checkbox kept its
+     resting plate. The class route already wins on specificity in this layer;
+     this repeats its values for the bare element, with the neutral cap
+     `native.css`'s reset puts back, which the arm above lifts only when
+     checked. Not `radio:indeterminate`, which every radio of a group with
+     nothing chosen matches. */
+  input:is([type="checkbox"], [type="radio"]):checked,
+  input[type="checkbox"]:indeterminate {
+    --intent-fill-max: 100%;
+    --ui-fill: 100%;
+    --ui-fg-on-fill: 100%;
+    --_fill-cap: 100%;
+  }
+
   /* The three toggles read their own component cap (`--_fill-cap`, below) as the
      ceiling regardless of intent, checked or not -- not just at `:checked`, the
      way the arm above still works for a hypothetical checked text-control. A
@@ -389,7 +409,7 @@
   --_lg-py: var(--_size-lg) 0.625rem;
   --_sm-text: var(--_size-sm) var(--text-sm);
   --_lg-text: var(--_size-lg) 1.0625rem;
-  --_sm-leading: var(--_size-sm) var(--tw-leading, var(--text-sm--line-height));
+  --_sm-leading: var(--_size-sm) var(--text-sm--line-height);
   --_sm-scale: var(--_size-sm) 0.75;
   --_lg-scale: var(--_size-lg) 1.25;
   --_scale-size: var(--_sm-scale, var(--_lg-scale));
@@ -403,9 +423,10 @@
 }
 
 @utility field {
-  --field-gap: 0.35rem;
+  @apply flex w-full flex-col;
 
-  @apply flex w-full flex-col gap-(--field-gap);
+  /* Public, read with its default, so a value on a form reaches every field. */
+  gap: var(--field-gap, 0.35rem);
 }
 
 @utility label {
@@ -465,7 +486,7 @@
   --_lg-py: var(--_size-lg) 0.625rem;
   --_sm-text: var(--_size-sm) var(--text-sm);
   --_lg-text: var(--_size-lg) 1.0625rem;
-  --_sm-leading: var(--_size-sm) var(--tw-leading, var(--text-sm--line-height));
+  --_sm-leading: var(--_size-sm) var(--text-sm--line-height);
   --_sm-scale: var(--_size-sm) 0.75;
   --_lg-scale: var(--_size-lg) 1.25;
   --_scale-size: var(--_sm-scale, var(--_lg-scale));
@@ -513,7 +534,7 @@
   --_lg-py: var(--_size-lg) 0.625rem;
   --_sm-text: var(--_size-sm) var(--text-sm);
   --_lg-text: var(--_size-lg) 1.0625rem;
-  --_sm-leading: var(--_size-sm) var(--tw-leading, var(--text-sm--line-height));
+  --_sm-leading: var(--_size-sm) var(--text-sm--line-height);
   --_sm-scale: var(--_size-sm) 0.75;
   --_lg-scale: var(--_size-lg) 1.25;
   --_scale-size: var(--_sm-scale, var(--_lg-scale));
@@ -553,6 +574,14 @@
     padding-inline: 0.75rem;
     background-image: none;
   }
+
+  /* Forced colours, carried for an applied drop-down: the platform's arrow, for
+     the reason the unlayered copy at the foot of this file gives. */
+  @media (forced-colors: active) {
+    &:not([multiple], [size]:not([size="1"])) {
+      appearance: auto;
+    }
+  }
 }
 
 /* A wrapper that owns the field box so a control can carry adornments beside it
@@ -573,7 +602,7 @@
    breathing room a distinct glyph needs, but a text affix meant to glue onto the
    value -- a URL host, a currency symbol, a unit -- reads the same gap as a
    stray space breaking the two apart. A consumer sets `--input-group-gap: 0` on
-   their own `.input-group` for a flush affix; the default stays the icon-tuned
+   the group or an ancestor for a flush affix; the default stays the icon-tuned
    0.5rem so every existing icon composition is unchanged. */
 @utility input-group {
   @apply text-control flex w-full items-center;
@@ -597,17 +626,16 @@
   --_lg-px: var(--_size-lg) 1rem;
   --_sm-text: var(--_size-sm) var(--text-sm);
   --_lg-text: var(--_size-lg) 1.0625rem;
-  --_sm-leading: var(--_size-sm) var(--tw-leading, var(--text-sm--line-height));
+  --_sm-leading: var(--_size-sm) var(--text-sm--line-height);
   --_sm-scale: var(--_size-sm) 0.75;
   --_lg-scale: var(--_size-lg) 1.25;
   --_scale-size: var(--_sm-scale, var(--_lg-scale));
 
-  --input-group-gap: 0.5rem;
-  --input-group-pad: var(--_sm-px, var(--_lg-px, 0.75rem));
-
   min-height: var(--_sm-h, var(--_lg-h, var(--control-height)));
-  gap: var(--input-group-gap);
-  padding-inline: var(--input-group-pad);
+  /* Public, read with their defaults, so a value set on any ancestor reaches
+     the group. */
+  gap: var(--input-group-gap, 0.5rem);
+  padding-inline: var(--input-group-padding, var(--_sm-px, var(--_lg-px, 0.75rem)));
   font-size: var(--_sm-text, var(--_lg-text, inherit));
   line-height: var(--_sm-leading, inherit);
 
@@ -1053,22 +1081,24 @@
      a badge or a card stays under. */
   --_fill-cap: 40%;
 
-  --switch-height: 1.25rem;
-  --switch-width: 2.5rem;
-  --switch-gap: 1px;
+  /* The track's size is public, read with its default, so a value set on any
+     ancestor reaches the switch; the knob is derived from it. */
+  --_switch-height: var(--switch-height, 1.25rem);
+  --_switch-width: var(--switch-width, 2.5rem);
+  --_switch-gap: 1px;
   /* The edge an aesthetic draws as an inset ring rather than as a border
      (`.pixel`), present only while `--ui-shadow-edge` is declared -- the idiom
      `box` uses. That ring paints under the knob, so a knob sized from the
      border alone covered it: under pixel the border is zero, the knob met the
      edge, and an unchecked and a checked switch both read as two halves. */
   --_switch-ring: var(--ui-shadow-edge) var(--_ss);
-  --_switch-offset: calc(var(--_switch-ring, 0px) + var(--switch-gap));
-  --switch-inset: calc(var(--_width) + var(--_switch-offset));
-  --switch-knob: calc(var(--switch-height) - var(--switch-inset) * 2);
-  --switch-travel: calc(var(--switch-width) - var(--switch-inset) * 2 - var(--switch-knob));
+  --_switch-offset: calc(var(--_switch-ring, 0px) + var(--_switch-gap));
+  --_switch-inset: calc(var(--_width) + var(--_switch-offset));
+  --_switch-knob: calc(var(--_switch-height) - var(--_switch-inset) * 2);
+  --_switch-travel: calc(var(--_switch-width) - var(--_switch-inset) * 2 - var(--_switch-knob));
 
-  height: var(--switch-height);
-  width: var(--switch-width);
+  height: var(--_switch-height);
+  width: var(--_switch-width);
   /* 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. */
@@ -1100,8 +1130,8 @@
        itself, so the two stay the same shape. */
     corner-shape: var(--ui-corner-shape, round);
     content: "";
-    height: var(--switch-knob);
-    width: var(--switch-knob);
+    height: var(--_switch-knob);
+    width: var(--_switch-knob);
     top: var(--_switch-offset);
     inset-inline-start: var(--_switch-offset);
   }
@@ -1111,14 +1141,14 @@
     /* translate has no logical form, so the checked travel is named as a
        physical x offset and mirrored under :dir(rtl) to travel toward the
        opposite edge, matching the inset-inline-start resting position. */
-    translate: var(--switch-travel);
+    translate: var(--_switch-travel);
   }
 
   /* Direction sits on the control, ahead of the pseudo-element: nested as
      `:dir(rtl) &` inside `&:checked::after`, `&` carries `::after`, which
      cannot appear inside `:is()`, and the emitted rule matched nothing. */
   &:checked:dir(rtl)::after {
-    translate: calc(-1 * var(--switch-travel));
+    translate: calc(-1 * var(--_switch-travel));
   }
 
   /* The mark appears without moving under reduced motion, for the entries

package/tw/components/surface.rules.css

@@ -86,11 +86,14 @@
 
   --_hover-ground: var(--_m-hover) color-mix(in oklab, var(--color-surface) var(--_quiet), var(--color-background));
 
-  &:hover {
-    --_d-surface-ground: var(
-      --_hover-ground,
-      color-mix(in oklab, var(--color-foreground) var(--_quiet), var(--color-background))
-    );
+  /* Behind the query `box-hover` is, so a tapped card keeps its ground. */
+  @media (hover: hover) {
+    &:hover {
+      --_d-surface-ground: var(
+        --_hover-ground,
+        color-mix(in oklab, var(--color-foreground) var(--_quiet), var(--color-background))
+      );
+    }
   }
 
   /* Opt-in, because a card is only sometimes a control. Applications still owe

package/tw/components/tooltip.rules.css

@@ -12,40 +12,45 @@
    trigger's own `aria-describedby`; wiring that association is the consumer's,
    this package only styles the bubble. See docs/usage/tooltips.md. */
 @utility tooltip {
-  --tooltip-gap: 0.5rem;
-  /* How long the bubble stays after the pointer leaves the trigger: long
-     enough to cross `--tooltip-gap` onto the bubble, which keeps it open
-     (WCAG 1.4.13). */
-  --tooltip-linger: 300ms;
-  --tooltip-top: calc(var(--tooltip-gap) * -1);
-  --tooltip-right: auto;
-  --tooltip-bottom: auto;
-  --tooltip-left: 50%;
-  --tooltip-origin: bottom;
-  --tooltip-transform: translate(-50%, -100%);
+  /* `--tooltip-gap` and `--tooltip-linger` are public, read with their
+     defaults rather than declared, so a value set on any ancestor reaches the
+     tooltip. The linger is how long the bubble stays after the pointer leaves
+     the trigger: long enough to cross the gap onto the bubble, which keeps it
+     open (WCAG 1.4.13). The default is resolved here, so a bubble outside a
+     tooltip keeps no delay unless a linger is set above it. The bubble reads
+     the public one first, so a value set on the bubble itself, as 0.8
+     allowed, still wins. */
+  --_tooltip-gap: var(--tooltip-gap, 0.5rem);
+  --_tooltip-linger: var(--tooltip-linger, 300ms);
+  --_tooltip-top: calc(var(--_tooltip-gap) * -1);
+  --_tooltip-right: auto;
+  --_tooltip-bottom: auto;
+  --_tooltip-left: 50%;
+  --_tooltip-origin: bottom;
+  --_tooltip-transform: translate(-50%, -100%);
 
   @apply relative inline-block;
 
   &[data-tooltip-position="bottom"] {
-    --tooltip-top: auto;
-    --tooltip-bottom: calc(var(--tooltip-gap) * -1);
-    --tooltip-origin: top;
-    --tooltip-transform: translate(-50%, 100%);
+    --_tooltip-top: auto;
+    --_tooltip-bottom: calc(var(--_tooltip-gap) * -1);
+    --_tooltip-origin: top;
+    --_tooltip-transform: translate(-50%, 100%);
   }
 
   &[data-tooltip-position="left"] {
-    --tooltip-top: 50%;
-    --tooltip-left: calc(var(--tooltip-gap) * -1);
-    --tooltip-origin: right;
-    --tooltip-transform: translate(-100%, -50%);
+    --_tooltip-top: 50%;
+    --_tooltip-left: calc(var(--_tooltip-gap) * -1);
+    --_tooltip-origin: right;
+    --_tooltip-transform: translate(-100%, -50%);
   }
 
   &[data-tooltip-position="right"] {
-    --tooltip-top: 50%;
-    --tooltip-left: auto;
-    --tooltip-right: calc(var(--tooltip-gap) * -1);
-    --tooltip-origin: left;
-    --tooltip-transform: translate(100%, -50%);
+    --_tooltip-top: 50%;
+    --_tooltip-left: auto;
+    --_tooltip-right: calc(var(--_tooltip-gap) * -1);
+    --_tooltip-origin: left;
+    --_tooltip-transform: translate(100%, -50%);
   }
 }
 
@@ -59,13 +64,13 @@
   /* Hidden rather than merely transparent, so a closed bubble is nothing
      under the pointer, and it lingers before it goes: the host stays hovered
      once the pointer is over the bubble, so crossing the gap in
-     `--tooltip-linger` keeps it open. Visibility switches at the end of the
+     `--_tooltip-linger` keeps it open. Visibility switches at the end of the
      fade, so the bubble is there to land on for the whole of it. */
   visibility: hidden;
   transition-property: opacity, transform, visibility;
   transition-duration: var(--motion-duration-normal);
   transition-timing-function: var(--motion-ease);
-  transition-delay: var(--tooltip-linger, 0s);
+  transition-delay: var(--tooltip-linger, var(--_tooltip-linger, 0s));
 
   /* Filled, over a ground of its own. An intent floods the fill
      (`.tooltip-bubble.primary` is the primary colour); with no intent
@@ -104,12 +109,12 @@
     calc(var(--_corner) * var(--ui-corner-tl, 1)) calc(var(--_corner) * var(--ui-corner-tr, 1))
       calc(var(--_corner) * var(--ui-corner-br, 1)) calc(var(--_corner) * var(--ui-corner-bl, 1))
   );
-  left: var(--tooltip-left);
-  right: var(--tooltip-right);
-  top: var(--tooltip-top);
-  bottom: var(--tooltip-bottom);
-  transform: var(--tooltip-transform) scale(0);
-  transform-origin: var(--tooltip-origin);
+  left: var(--_tooltip-left);
+  right: var(--_tooltip-right);
+  top: var(--_tooltip-top);
+  bottom: var(--_tooltip-bottom);
+  transform: var(--_tooltip-transform) scale(0);
+  transform-origin: var(--_tooltip-origin);
 
   /* The bubble appears without growing under reduced motion, for the entries
      without the reset; see `box.css`. */
@@ -149,7 +154,7 @@
   .tooltip:focus-within &,
   .tooltip[data-state="open"] & {
     opacity: 1;
-    transform: var(--tooltip-transform) scale(1);
+    transform: var(--_tooltip-transform) scale(1);
     visibility: visible;
     transition-delay: 0s;
   }
@@ -161,7 +166,7 @@
      focus alike. */
   .tooltip[data-state="closed"] & {
     opacity: 0;
-    transform: var(--tooltip-transform) scale(0);
+    transform: var(--_tooltip-transform) scale(0);
     visibility: hidden;
     transition-delay: 0s;
   }

package/tw/elevation.css

@@ -10,8 +10,8 @@
    `.flat` removes a part-based slab or blur without a conditional (complete
    surface shadows like glass remain). See model.md#elevation.
 
-   `--ui-elevation`, and the plain-page fallback geometry (`--elevation-y`,
-   `--elevation-blur`) below, are registered non-inheriting: a class sets them
+   `--ui-elevation`, and the plain-page fallback geometry (`--_elevation-y`,
+   `--_elevation-blur`) below, are registered non-inheriting: a class sets them
    on the element it is written on and nothing else picks them up. Inherited, a
    `.floating` dialog's ambient x2 would reach its own unclassed buttons and
    double their shadow with nothing in the markup asking for it. Depth is not
@@ -37,12 +37,12 @@
   inherits: false;
 }
 
-@property --elevation-y {
+@property --_elevation-y {
   syntax: "*";
   inherits: false;
 }
 
-@property --elevation-blur {
+@property --_elevation-blur {
   syntax: "*";
   inherits: false;
 }
@@ -63,8 +63,8 @@
 /* The aesthetic's depth as authored, said explicitly. */
 @utility raised {
   @layer families {
-    --elevation-y: 1px;
-    --elevation-blur: 3px;
+    --_elevation-y: 1px;
+    --_elevation-blur: 3px;
     --ui-elevation: 1;
   }
 }
@@ -72,8 +72,8 @@
 /* Twice it, for menus and popovers. */
 @utility floating {
   @layer families {
-    --elevation-y: 1px;
-    --elevation-blur: 3px;
+    --_elevation-y: 1px;
+    --_elevation-blur: 3px;
     --ui-elevation: 2;
   }
 }

package/tw/native.css

@@ -60,7 +60,10 @@
     --intent-border: var(--ui-rule-ink, var(--ui-ink, var(--color-border)));
   }
 
-  :where(hr) {
+  /* A bare rule and progress bar take the color they sit in, as `.divider`
+     and `.progress` do in `intent.css`; a bar in a filled container drew the
+     page's text color over the container's own. */
+  :where(hr, progress) {
     --intent-color: currentColor;
     --intent-border: currentColor;
   }

package/tw/theme.css

@@ -271,7 +271,7 @@
    at any depth. It does not win over an explicit selector of the opposite
    theme further up: `.dark *` matches every descendant of a `.dark` element,
    including one inside a nested `.light`, so a `dark:` utility still fires
-   there although its tokens are light. `setup.md#dark-variant` documents it. */
+   there although its tokens are light. `docs/usage/theming.md#the-dark-variant` documents it. */
 @custom-variant dark {
   &:where(.dark, .dark *, .theme-dark, .theme-dark *, [data-theme="dark"], [data-theme="dark"] *) {
     @slot;