ngwr 9.1.0 → 10.1.0

package/table/styles/_index.scss

@@ -1,12 +1,27 @@
 @use '../../theme/styles' as theme;
 
 .wr-table {
+  --wr-table-bg: var(--wr-color-surface);
   --wr-table-border: var(--wr-color-outline);
   --wr-table-head-bg: rgba(var(--wr-color-outline-rgb), 0.25);
   --wr-table-row-hover: rgba(var(--wr-color-outline-rgb), 0.15);
+  // Head casing. The library renders column titles as the author wrote them —
+  // forcing `uppercase` mutates their content, and a header written "ID" or
+  // "created at" is the consumer's decision to make, not ours. Both halves stay
+  // tokens, so opting back into the old treatment is one rule:
+  //   .wr-table { --wr-table-head-transform: uppercase;
+  //               --wr-table-head-letter-spacing: 0.04em; }
+  // The tracking moves with the casing on purpose — 0.04em is there to open up
+  // capitals and looks wrong on sentence case.
+  --wr-table-head-transform: none;
+  --wr-table-head-letter-spacing: var(--wr-tracking-normal);
 
   display: block;
   position: relative;
+  // The table paints its own surface. Sticky pinned cells already fill with
+  // --wr-color-surface, so leaving the table transparent let a page background
+  // show through the normal rows while the pinned ones stayed opaque.
+  background: var(--wr-table-bg);
   // Own stacking context so the loading overlay reliably outranks the sticky
   // pinned cells regardless of the surrounding page z-index.
   isolation: isolate;
@@ -50,8 +65,8 @@
     color: var(--wr-color-on-surface-muted);
     font-weight: 600;
     font-size: var(--wr-text-xs);
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
+    letter-spacing: var(--wr-table-head-letter-spacing);
+    text-transform: var(--wr-table-head-transform);
     white-space: nowrap;
   }
 
@@ -111,8 +126,67 @@
     opacity: 0.35;
   }
 
-  .cdk-drag-animating {
-    transition: transform 0.18s cubic-bezier(0, 0, 0.2, 1);
+  // NOTE: `.cdk-drag-animating` is NOT here. CDK puts it on the preview clone,
+  // which lives in `<body>` — see the rule at the end of this file.
+
+
+  // --- Tree rows ------------------------------------------------------------
+  // Depth lives on the `<tr>` as `--wr-table-depth` and is spent inside the tree
+  // column's cell, not as a lead column: a new column would break `columnOrder`
+  // indexes and the pin measurements, and a child would stop being an ordinary
+  // `<tr>` going through the same cell loop.
+  &__tree-lead {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+    margin-inline-end: 0.25rem;
+    padding-inline-start: calc(var(--wr-table-depth, 0) * var(--wr-table-indent, 1.25rem));
+  }
+
+  &__tree-toggle {
+    appearance: none;
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: var(--wr-border-radius-sm);
+    color: var(--wr-color-on-surface-muted);
+    cursor: pointer;
+
+    &:hover {
+      background: var(--wr-color-hover);
+      color: var(--wr-color-on-surface);
+    }
+
+    // A leaf keeps the slot so labels line up down a column, but is not a
+    // button and is hidden from assistive tech.
+    &--leaf {
+      cursor: default;
+      visibility: hidden;
+    }
+  }
+
+  &__tree-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+    transition: transform var(--wr-transition-base);
+  }
+
+  &__tree-toggle--open &__tree-icon,
+  &__tree-toggle--open .wr-table__tree-icon {
+    transform: rotate(90deg);
+  }
+
+  // Card mode stacks label / value with `justify-content: space-between`, so an
+  // extra inline child would strand the chevron mid-row. Fold the lead into the
+  // value side instead.
+  &--responsive &__tree-lead {
+    margin-inline-end: 0.375rem;
   }
 
   // --- Row selection --------------------------------------------------------
@@ -191,6 +265,9 @@
   }
 
   // --- Summary / footer row -------------------------------------------------
+  // `&__foot-cell--lead` is emitted on the selection / expand footer cells and
+  // carries no styles of its own — it exists as a public hook so consumers can
+  // target those two cells without matching on position.
   &__foot-cell {
     padding: calc(0.625rem * var(--wr-density-y, 1)) calc(0.875rem * var(--wr-density-x, 1));
     background: var(--wr-table-head-bg);
@@ -203,7 +280,7 @@
   // Pinned footer cells need an opaque base (over the head tint) to stay sticky.
   &__foot-cell#{&}__td--pin-left,
   &__foot-cell#{&}__td--pin-right {
-    background-color: var(--wr-color-surface);
+    background-color: var(--wr-table-bg);
     background-image: linear-gradient(var(--wr-table-head-bg), var(--wr-table-head-bg));
   }
 
@@ -221,14 +298,14 @@
   &__td--pin-left,
   &__td--pin-right {
     z-index: 1;
-    background-color: var(--wr-color-surface);
+    background-color: var(--wr-table-bg);
   }
 
   // Header cells lay the head tint over the opaque base so the row stays seamless.
   &__th--pin-left,
   &__th--pin-right {
     z-index: 2;
-    background-color: var(--wr-color-surface);
+    background-color: var(--wr-table-bg);
     background-image: linear-gradient(var(--wr-table-head-bg), var(--wr-table-head-bg));
   }
 
@@ -392,7 +469,7 @@
   &__group-foot-row > &__foot-cell {
     border-top: 0;
     border-bottom: 1px solid var(--wr-table-border);
-    background-color: var(--wr-color-surface);
+    background-color: var(--wr-table-bg);
     background-image: linear-gradient(var(--wr-table-group-bg), var(--wr-table-group-bg));
   }
 
@@ -424,7 +501,7 @@
   }
 
   thead th:not(.wr-table__th--pin-left):not(.wr-table__th--pin-right) {
-    background-color: var(--wr-color-surface);
+    background-color: var(--wr-table-bg);
     background-image: linear-gradient(var(--wr-table-head-bg), var(--wr-table-head-bg));
   }
 
@@ -456,7 +533,7 @@
   }
 
   tfoot .wr-table__foot-cell:not(.wr-table__td--pin-left):not(.wr-table__td--pin-right) {
-    background-color: var(--wr-color-surface);
+    background-color: var(--wr-table-bg);
     background-image: linear-gradient(var(--wr-table-head-bg), var(--wr-table-head-bg));
   }
 
@@ -518,8 +595,11 @@
     color: var(--wr-color-on-surface-muted);
     font-size: var(--wr-text-xs);
     font-weight: 600;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
+    // Route through the same tokens as `&__th` instead of re-hard-coding the
+    // treatment — card mode used to ignore `--wr-table-head-transform` entirely,
+    // so a consumer who opted out still got capitals on mobile.
+    letter-spacing: var(--wr-table-head-letter-spacing);
+    text-transform: var(--wr-table-head-transform);
     text-align: left;
     white-space: nowrap;
   }
@@ -744,3 +824,39 @@
     }
   }
 }
+
+// The dragged header's preview is a clone CDK moves to `document.body`, so it
+// leaves `.wr-table` behind and no ancestor selector reaches it — the clone's
+// own `wr-table__th` class does. Declared here rather than inherited: until the
+// drag-drop entry point's rules were scoped, this preview silently wore
+// `wr-sortable-list`'s lift shadow, and scoping them without this would have
+// left the column preview with no chrome at all.
+.cdk-drag-preview.wr-table__th {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  // Every value has to resolve in `<body>`: the `--wr-table-*` tokens are
+  // declared on `.wr-table`, which the preview has left, so they are passed with
+  // the same defaults that block sets. `--wr-density-*` and `--wr-color-*` are
+  // root-level and resolve as-is.
+  padding: calc(0.625rem * var(--wr-density-y, 1)) calc(0.875rem * var(--wr-density-x, 1));
+  background: var(--wr-table-head-bg, rgba(var(--wr-color-outline-rgb), 0.25));
+  color: var(--wr-color-on-surface-muted);
+  font-family: var(--wr-font-family-base);
+  font-weight: 600;
+  font-size: var(--wr-text-xs);
+  letter-spacing: var(--wr-table-head-letter-spacing, var(--wr-tracking-normal));
+  text-transform: var(--wr-table-head-transform, none);
+  white-space: nowrap;
+  border-radius: var(--wr-border-radius-sm);
+  box-shadow: 0 8px 12px rgba(var(--wr-color-backdrop-rgb), 0.24);
+  // The preview must track the cursor 1:1 — never animate its transform.
+  transition: none;
+}
+
+// The settle animation after a drop. Same element as the rule above — CDK adds
+// `cdk-drag-animating` to the preview while it flies back to the drop slot — so
+// it must come after it to beat that `transition: none` at equal specificity.
+.cdk-drag-animating.wr-table__th {
+  transition: transform 0.18s var(--wr-ease-out);
+}

package/theme/styles/_box-model.scss

@@ -0,0 +1,29 @@
+// Box model baseline for ngwr's own elements.
+//
+// `ngwr/reset` (which does set `box-sizing: border-box` globally) is opt-in by
+// design, and the umbrella `@use 'ngwr'` deliberately leaves it out — so a
+// consumer following the documented "import once, everything works" path lands
+// in a `content-box` world. Components can't assume otherwise, and several of
+// them did: any `.wr-*` element that pairs `width: 100%` with padding or a
+// border overflowed its container by exactly padding + border. Measured in a
+// stock Angular app on `@use 'ngwr'`:
+//
+//   .wr-btn--block                → 30px over (14+14 padding, 1+1 border)
+//   .wr-input (sm / md / lg)      → 18 / 26 / 34px over
+//   .wr-textarea__native          → 16 / 24 / 32px over
+//   .wr-input-group               → 2px over (border only)
+//
+// Which is where the stray horizontal scrollbars came from.
+//
+// Scoped to the `wr-` namespace so it can never change the box model of
+// consumer markup — that stays their call, via `ngwr/reset` or their own reset.
+//
+// `:where()` contributes zero specificity on purpose: this is a baseline, not an
+// override. `.wr-icon` and `.wr-spinner` declare `content-box` deliberately (the
+// declared size IS the glyph box) and keep winning without needing `!important`
+// or a particular load order.
+:where([class^='wr-'], [class*=' wr-']),
+:where([class^='wr-'], [class*=' wr-'])::before,
+:where([class^='wr-'], [class*=' wr-'])::after {
+  box-sizing: border-box;
+}

package/theme/styles/_colors.scss

@@ -21,11 +21,10 @@ $base-colors: (
   dark: #0f172a,
 ) !default;
 
-// YIQ luminosity threshold (0–255) above which a color is treated as
-// "light" and pairs with dark text. Uses the classic Bootstrap formula —
-// it weights the green channel higher than blue, which matches human
-// perception of brightness far better than HSL lightness (HSL classes
-// pure blue as 50%-lightness even though it reads as dark).
+// Deprecated: the old YIQ brightness cut-off. No longer read — `_contrast()`
+// compares real WCAG contrast ratios, which needs no threshold. Kept declared
+// so `@use 'ngwr/theme' with ($contrast-threshold: …)` in an existing app still
+// compiles instead of erroring on an unknown variable.
 $contrast-threshold: 150 !default;
 
 // Dark text used on light backgrounds.
@@ -40,20 +39,69 @@ $contrast-light: #ffffff !default;
   @return color.channel($c, 'red'), color.channel($c, 'green'), color.channel($c, 'blue');
 }
 
+/** One channel, linearised per WCAG 2.x. */
+@function _linear($channel) {
+  $s: math.div($channel, 255);
+  @if $s <= 0.03928 {
+    @return math.div($s, 12.92);
+  }
+  @return math.pow(math.div($s + 0.055, 1.055), 2.4);
+}
+
+/** WCAG relative luminance of a colour. */
+@function _luminance($c) {
+  @return 0.2126 * _linear(color.channel($c, 'red')) + 0.7152 * _linear(color.channel($c, 'green')) + 0.0722 *
+    _linear(color.channel($c, 'blue'));
+}
+
+/** WCAG contrast ratio between two colours. */
+@function _ratio($a, $b) {
+  $la: _luminance($a);
+  $lb: _luminance($b);
+  $hi: math.max($la, $lb);
+  $lo: math.min($la, $lb);
+  @return math.div($hi + 0.05, $lo + 0.05);
+}
+
+/**
+ * Foreground that actually reads best on `$c` — whichever of the two candidates
+ * wins on WCAG contrast ratio.
+ *
+ * Was a YIQ brightness threshold, which is a brightness *estimate*, not the
+ * metric accessibility is judged by, and it mispicked on every mid-saturation
+ * colour: five of the nine shipped intents got white text below AA
+ * (success 3.33:1, medium 3.10:1, danger and info 3.68:1, secondary 3.99:1)
+ * where dark text would have cleared it (5.43 / 5.82 / 4.90 / 4.91 / 4.52).
+ * Comparing the real ratios needs no threshold to tune.
+ */
 @function _contrast($c) {
-  $r: color.channel($c, 'red');
-  $g: color.channel($c, 'green');
-  $b: color.channel($c, 'blue');
-  $yiq: math.div($r * 299 + $g * 587 + $b * 114, 1000);
-  @if $yiq >= $contrast-threshold {
+  @if _ratio($c, $contrast-dark) >= _ratio($c, $contrast-light) {
     @return $contrast-dark;
   }
   @return $contrast-light;
 }
 
+/**
+ * Public alias of {@link _contrast}. Any theme partial that re-tunes an intent
+ * has to re-derive its `-contrast` token too, otherwise the token stays baked
+ * from the light palette — which is how the dark theme ended up putting white
+ * text on its lightened primary at 3.36:1.
+ */
+@function contrast($c) {
+  @return _contrast($c);
+}
+
 // CSS variables
 
 :root {
+  // Declared here so the light token set also claims the light UA scheme.
+  // Without it the browser fell back to the OS preference, and an app running
+  // ngwr's LIGHT theme on a dark-mode machine got dark scrollbars and dark
+  // native controls (<textarea>, date/colour inputs) against light surfaces.
+  // `_dark.scss` still flips it to `dark` under [data-theme='dark'], which wins
+  // on specificity.
+  color-scheme: light;
+
   --wr-color-white: #ffffff;
   --wr-color-white-rgb: 255, 255, 255;
   --wr-color-black: #000000;
@@ -80,10 +128,25 @@ $contrast-light: #ffffff !default;
   // regardless of theme.
   --wr-color-overlay: rgba(var(--wr-color-backdrop-rgb), 0.45);
 
-  // De-emphasized text — `medium` dimmed to two canonical strengths so muted
+  // Muted TEXT, deliberately its own token rather than an alias of the `medium`
+  // intent. The two roles pull in opposite directions and cannot share a value:
+  // as text it needs >= 4.5:1 against the lightest surface (#ebeff4), while as a
+  // button fill it carries dark text and needs >= 4.5:1 the other way. The best
+  // candidate for either fails the other — the window closes around #6b7a8a
+  // (3.81 as text, 4.11 as fill). Aliasing them left secondary text at 2.69:1.
+  --wr-color-muted-text: #5f6c7d;
+  --wr-color-muted-text-rgb: 95, 108, 125;
+
+  // De-emphasized text — the muted ink dimmed to two canonical strengths so
   // labels / captions / placeholders read consistently. One place each.
-  --wr-color-text-muted: rgba(var(--wr-color-medium-rgb), 0.85);
-  --wr-color-text-faint: rgba(var(--wr-color-medium-rgb), 0.6);
+  // Only the full-opacity token above is AA-safe for body text; these two are
+  // decorative by design (0.85 reaches ~3.5:1, 0.6 ~2.3:1 on a light surface).
+  // 0.95, not 0.85: the role itself is 5.35:1 on the light surface, but wrapping
+  // it at 0.85 composited to #778291 — 3.90:1, under the AA bar. 0.95 is the
+  // most softening that still clears it (4.81), which leaves this token barely
+  // distinguishable from the flat role it wraps.
+  --wr-color-text-muted: rgba(var(--wr-color-muted-text-rgb), 0.95);
+  --wr-color-text-faint: rgba(var(--wr-color-muted-text-rgb), 0.6);
 
   // Neutral gray ramp — a FIXED primitive scale (slate). Each step is a stable
   // job (50 = subtlest surface tint … 950 = strongest ink) and, unlike the
@@ -121,8 +184,8 @@ $contrast-light: #ffffff !default;
   --wr-color-surface-rgb: var(--wr-color-white-rgb);
   --wr-color-on-surface: var(--wr-color-dark);
   --wr-color-on-surface-rgb: var(--wr-color-dark-rgb);
-  --wr-color-on-surface-muted: var(--wr-color-medium);
-  --wr-color-on-surface-muted-rgb: var(--wr-color-medium-rgb);
+  --wr-color-on-surface-muted: var(--wr-color-muted-text);
+  --wr-color-on-surface-muted-rgb: var(--wr-color-muted-text-rgb);
 
   // Solid hairline / divider colour. Distinct from `--wr-color-border` above,
   // which is deliberately translucent (`light` at 50%) so it reads on any
@@ -155,6 +218,44 @@ $contrast-light: #ffffff !default;
     --wr-color-#{$name}-soft-contrast: color-mix(in srgb, var(--wr-color-#{$name}) 62%, var(--wr-color-dark));
     --wr-color-#{$name}-active: rgba(var(--wr-color-#{$name}-rgb), 0.2);
   }
+
+  // `-ink`: the intent used as TEXT on `--wr-color-surface`.
+  //
+  // v10 fixed the opposite direction — `-contrast`, the label ON a filled
+  // intent. The inverse was never covered, and the light theme fails WCAG AA
+  // everywhere an outlined / bordered variant paints the hue as its own label:
+  // warning lands at 1.71:1 against a 4.5 bar, medium 3.10, success 3.33,
+  // danger and info 3.68, secondary 3.99. Dark passes on all of them, because
+  // its bases were retuned lighter for a dark canvas and that happens to be the
+  // accessible direction.
+  //
+  // Same recipe as `-soft-contrast`: mixing toward `--wr-color-dark` darkens in
+  // light and lightens in dark from ONE declaration, because that token itself
+  // flips. The share is per intent rather than uniform — warning has to travel
+  // furthest (a yellow readable on white is not yellow), and forcing every
+  // intent to warning's share would drag primary to near-navy for no reason.
+  // Each is the measured minimum that clears 4.5:1 in BOTH themes on the surface
+  // and on the tag's 6% / 10% tints, with 3pp of headroom.
+  $ink-mix: (
+    primary: 93%,
+    secondary: 80%,
+    success: 72%,
+    warning: 50%,
+    danger: 77%,
+    info: 76%,
+    medium: 69%,
+  );
+
+  @each $name, $share in $ink-mix {
+    --wr-color-#{$name}-ink: color-mix(in srgb, var(--wr-color-#{$name}) #{$share}, var(--wr-color-dark));
+  }
+
+  // `light` is a surface tone by definition — a hair off the page background in
+  // either theme — so there is no darkening that keeps it recognisable AND
+  // readable. It borrows the page's own ink; the border still carries the
+  // intent. `dark` already IS the ink.
+  --wr-color-light-ink: var(--wr-color-on-surface);
+  --wr-color-dark-ink: var(--wr-color-dark);
 }
 
 // Public SCSS list

package/theme/styles/_dark.scss

@@ -1,5 +1,7 @@
 @use 'sass:color';
 
+@use 'colors';
+
 // Dark theme overrides — opt-in via `[data-theme="dark"]` on <html>.
 // Drive the toggle from `WrTheme` (provided automatically with
 // `provideWrTheme(...)`).
@@ -17,6 +19,15 @@ $dark-intents: (
   danger: #ff5c5c,
 );
 
+// The surface / ink bases below are re-tuned for the dark canvas too, but they
+// live in hand-written blocks (each one documents a judgement call the loop
+// can't express). Holding the values in variables lets the `-rgb` triplets and
+// the shade derivations read from the value that actually ships, instead of
+// being re-typed next to it.
+$_light: #262f44;
+$_medium: #9aa6b8;
+$_dark: #e6ebf3;
+
 [data-theme='dark'] {
   // Canvas (was `--wr-color-white` in light mode)
   // Deeper than slate-900 so an elevated surface in slate-800 reads
@@ -26,8 +37,9 @@ $dark-intents: (
 
   // Text
   // Softer than pure-white — easier on the eyes for long reading.
-  --wr-color-dark: #e6ebf3;
-  --wr-color-dark-rgb: 230, 235, 243;
+  --wr-color-dark: #{$_dark};
+  --wr-color-dark-rgb:
+    #{color.channel($_dark, 'red')}, #{color.channel($_dark, 'green')}, #{color.channel($_dark, 'blue')};
   // `*-contrast` values are baked at SCSS compile time from the light
   // palette, so they don't auto-flip when `--wr-color-dark` /
   // `--wr-color-white` are reassigned for dark mode. Tooltip-style
@@ -35,6 +47,22 @@ $dark-intents: (
   // white-on-white without this override; re-pair them by hand here.
   --wr-color-dark-contrast: #0b1120;
   --wr-color-white-contrast: #e6ebf3;
+  // Same story as the contrast pair: the shades were baked from the light
+  // palette's near-black ink, so `.wr-btn--dark:hover` painted itself almost
+  // black while keeping the near-black `-contrast` text. `dark` is an INK token,
+  // so unlike `light` below its shades mean exactly what they say.
+  // `color.scale`, not `color.adjust`, for the two lighter steps. In dark mode
+  // `dark` IS the near-white ink (#e6ebf3, L 92.7%), so `adjust(+10%)` asks for
+  // L 102.7% — out of gamut. Sass then cannot emit rgb and falls back to legacy
+  // comma-hsl with an out-of-range lightness, which browsers clamp: the token
+  // silently became pure white instead of a controlled step. `scale` moves a
+  // percentage of the REMAINING headroom, so it approaches white without ever
+  // leaving the gamut. 70% reproduces the previous `-light` to within a rounding
+  // step; 85% is the distinct step beyond it.
+  --wr-color-dark-light: #{color.scale($_dark, $lightness: 70%)};
+  --wr-color-dark-lighter: #{color.scale($_dark, $lightness: 85%)};
+  --wr-color-dark-dark: #{color.adjust($_dark, $lightness: -5%)};
+  --wr-color-dark-darker: #{color.adjust($_dark, $lightness: -10%)};
 
   // Borders / tints (was `--wr-color-light`)
   // Used for two jobs at once: 1-px borders and translucent surface
@@ -43,8 +71,9 @@ $dark-intents: (
   // looks like glowing pencil lines). This value reads as a real
   // divider on cards / inputs without shouting — matches what Vercel
   // and shadcn ship for the same job.
-  --wr-color-light: #262f44;
-  --wr-color-light-rgb: 38, 47, 68;
+  --wr-color-light: #{$_light};
+  --wr-color-light-rgb:
+    #{color.channel($_light, 'red')}, #{color.channel($_light, 'green')}, #{color.channel($_light, 'blue')};
   // The baked contrast pairs with the LIGHT value (#cbd5e1 → dark text);
   // the dark surface above needs light text instead.
   --wr-color-light-contrast: #e6ebf3;
@@ -57,18 +86,43 @@ $dark-intents: (
   // means "stronger divider" (further from canvas, so lighter).
   --wr-color-light-lighter: #1a2236;
   --wr-color-light-darker: #3a4661;
+  // `-light` / `-dark` were the two the hand block forgot, and they are what
+  // `.wr-btn--light` uses for hover / active. Left inherited, hover swapped in
+  // the LIGHT palette's slate-300 — a near-white fill under the near-white
+  // `-contrast` text above, so the button simply disappeared under the cursor.
+  // Half-steps of the tuned pair, same inverted reading: toward the canvas for
+  // `-light`, away from it for `-dark`, which also makes hover read as a lift.
+  --wr-color-light-light: #{color.adjust($_light, $lightness: -2.5%)};
+  --wr-color-light-dark: #{color.adjust($_light, $lightness: 5%)};
 
   // Secondary text (was `--wr-color-medium`)
   // Lifted from slate-400 → slate-300-ish for better legibility on
   // the deeper canvas.
-  --wr-color-medium: #9aa6b8;
-  --wr-color-medium-rgb: 154, 166, 184;
+  --wr-color-medium: #{$_medium};
+  --wr-color-medium-rgb:
+    #{color.channel($_medium, 'red')}, #{color.channel($_medium, 'green')}, #{color.channel($_medium, 'blue')};
+  // This block shipped base + rgb only, so contrast and all four shades still
+  // came from the light palette's slate. Ink token, plain shades.
+  --wr-color-medium-contrast: #{colors.contrast($_medium)};
+  --wr-color-medium-light: #{color.adjust($_medium, $lightness: 5%)};
+  --wr-color-medium-lighter: #{color.adjust($_medium, $lightness: 10%)};
+  --wr-color-medium-dark: #{color.adjust($_medium, $lightness: -5%)};
+  --wr-color-medium-darker: #{color.adjust($_medium, $lightness: -10%)};
+
+  // Muted TEXT is its own token now (the light theme could not serve both text
+  // and fill from one value), so the dark canvas needs its own version too —
+  // otherwise it would inherit the light theme's dark ink. 7.64:1 here.
+  --wr-color-muted-text: #9aa6b8;
+  --wr-color-muted-text-rgb: 154, 166, 184;
 
   // Brand-color retune
   // The default primary (#3969e2) reads a touch dim on the deep
   // canvas. Bump the base + shade derivations so hover / focus rings
   // stay visible against slate-900.
   --wr-color-primary: #5b85ff;
+  // Same reason as the loop above — the light primary pairs with white, but the
+  // lightened dark-theme primary only reaches 3.36:1 against it.
+  --wr-color-primary-contrast: #{colors.contrast(#5b85ff)};
   --wr-color-primary-rgb: 91, 133, 255;
   --wr-color-primary-light: #7a9eff;
   --wr-color-primary-dark: #2f56c9;
@@ -79,7 +133,11 @@ $dark-intents: (
   // shade set in dark too (generated, so no intent can silently drift).
   @each $name, $base in $dark-intents {
     --wr-color-#{$name}: #{$base};
-    --wr-color-#{$name}-rgb: #{color.channel($base, 'red')}, #{color.channel($base, 'green')}, #{color.channel($base, 'blue')};
+    // Re-derived, not inherited: the light-palette token would pair the wrong
+    // foreground with a re-tuned base.
+    --wr-color-#{$name}-contrast: #{colors.contrast($base)};
+    --wr-color-#{$name}-rgb:
+      #{color.channel($base, 'red')}, #{color.channel($base, 'green')}, #{color.channel($base, 'blue')};
     --wr-color-#{$name}-light: #{color.adjust($base, $lightness: 5%)};
     --wr-color-#{$name}-lighter: #{color.adjust($base, $lightness: 10%)};
     --wr-color-#{$name}-dark: #{color.adjust($base, $lightness: -5%)};

package/theme/styles/_focus.scss

@@ -37,7 +37,7 @@
 }
 
 // Mention option rows
-.wr-mention__option:focus-visible {
+.wr-mention-panel__option:focus-visible {
   @include focus-ring;
 }
 
@@ -64,13 +64,7 @@
 }
 
 // Stepper step headers
-.wr-stepper__step:focus-visible {
-  @include focus-ring;
-}
-
-// Toast close/copy
-.wr-toast__close:focus-visible,
-.wr-toast__copy:focus-visible {
+.wr-stepper__header:focus-visible {
   @include focus-ring;
 }
 

package/theme/styles/_index.scss

@@ -1,3 +1,4 @@
+@forward 'box-model';
 @forward 'colors';
 @forward 'variables';
 @forward 'dark';

package/tilt-card/styles/_index.scss

@@ -1,3 +1,8 @@
+// Pull the whole theme so a standalone `@use 'ngwr/<name>'` brings in every
+// design token this stylesheet references. Sass deduplicates `@use` per
+// compilation, so the umbrella sheet still emits the theme only once.
+@use '../../theme/styles' as theme;
+
 // 3D mouse-tilt card. The transform is set imperatively by `[wrTilt]`,
 // so this stylesheet just covers the card chrome + the optional glare
 // overlay that the directive appends when `[glare]="true"`.

package/toast/styles/_index.scss

@@ -1,7 +1,10 @@
 @use '../../theme/styles' as theme;
 
+// `info` mapped to `primary` before the `info` intent existed; alert has used
+// the real intent since it landed, so the same toast and alert read as two
+// different colours for the same meaning.
 $toast-colors: (
-  info: primary,
+  info: info,
   success: success,
   warning: warning,
   danger: danger,
@@ -59,7 +62,7 @@ $toast-colors: (
       width: auto;
       max-width: calc(100% - 2rem);
       transition:
-        transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
+        transform 240ms var(--wr-ease-out),
         opacity 240ms ease,
         box-shadow 240ms ease;
       transform-origin: center top;
@@ -89,7 +92,7 @@ $toast-colors: (
 
   &--stack.wr-toast-host--expanded .wr-toast {
     transition:
-      transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
+      transform 240ms var(--wr-ease-out),
       opacity 240ms ease;
   }