ngwr 10.2.1 → 11.1.0

package/sidebar/styles/_index.scss

@@ -49,6 +49,15 @@
       .wr-sidebar__icon {
         color: var(--wr-color-primary);
       }
+
+      // The badge measured 3.97:1 on the active row. Its own outline wash over
+      // the primary tint is what broke the pairing: `-ink` is calibrated against
+      // `-soft` ITSELF, so the fix is to let the row's tint show through and
+      // inherit the colour that was calibrated for it.
+      .wr-sidebar__badge {
+        color: inherit;
+        background: transparent;
+      }
     }
 
     &--disabled {
@@ -75,7 +84,7 @@
       border-radius: var(--wr-border-radius-sm);
       color: var(--wr-color-on-surface);
       cursor: pointer;
-      text-align: left;
+      text-align: start;
       transition: background var(--wr-transition-base);
 
       &:hover {
@@ -118,18 +127,27 @@
   }
 
   &__group--collapsed &__chevron {
+    // Disclosure affordance, and it IS reading-order: the collapsed chevron
+    // should point at the trailing edge. `rotate` has no logical form, so under
+    // RTL the chevron-down still swings to point right — into the sidebar's
+    // content rather than away from it. Flipping it needs a `[dir]` rule (or a
+    // direction-aware sign from sidebar.ts), which is beyond a property-level
+    // rewrite; same call as the segmented thumb and the button seam.
+    // rtl-ok: transform rotation has no logical equivalent — see above
     transform: rotate(-90deg);
   }
 
   // Child items (inside an expanded group)
   &__list {
     list-style: none;
-    margin: 0.125rem 0 0.375rem 0.5rem;
-    padding: 0 0 0 0.625rem;
+    margin: 0.125rem 0 0.375rem;
+    margin-inline-start: 0.5rem;
+    padding: 0;
+    padding-inline-start: 0.625rem;
     display: flex;
     flex-direction: column;
     gap: 0.0625rem;
-    border-left: 1px solid var(--wr-color-outline);
+    border-inline-start: 1px solid var(--wr-color-outline);
   }
 
   &__item {
@@ -153,7 +171,7 @@
       position: absolute;
       top: 0.125rem;
       bottom: 0.125rem;
-      left: -0.6875rem;
+      inset-inline-start: -0.6875rem;
       width: 2px;
       border-radius: 1px;
       background: transparent;
@@ -178,6 +196,13 @@
       background: var(--wr-color-primary-soft);
       pointer-events: none;
 
+      // Same reasoning as the flat entry above: `-ink` on the row's own tint is
+      // the calibrated pairing, and the badge's wash is what pushed it under.
+      .wr-sidebar__badge {
+        color: inherit;
+        background: transparent;
+      }
+
       &::before {
         background: var(--wr-color-primary);
       }

package/slider/styles/_index.scss

@@ -38,6 +38,11 @@
     top: 50%;
     width: var(--wr-slider-thumb-size);
     height: var(--wr-slider-thumb-size);
+    // The inline half of the centring pair follows the inset it centres:
+    // `slider.html` positions the thumb with `inset-inline-start`, which is the
+    // RIGHT edge under `dir="rtl"`, so a fixed `-50%` would drag the thumb — and
+    // the 44px tap area pinned to it — a whole thumb-width past its own value.
+    // The block half is symmetric and stays put.
     transform: translate(-50%, -50%);
     appearance: none;
     background: var(--wr-slider-thumb);
@@ -60,6 +65,16 @@
       cursor: grabbing;
       transform: translate(-50%, -50%) scale(1.1);
     }
+
+    // Mirrored last, and with the `:active` pair spelled out, so the RTL rules
+    // outrank the LTR ones they replace at every state.
+    [dir='rtl'] & {
+      transform: translate(50%, -50%);
+
+      &:active {
+        transform: translate(50%, -50%) scale(1.1);
+      }
+    }
   }
 
   &__label {

package/speed-dial/styles/_index.scss

@@ -19,9 +19,14 @@
     padding-top: env(safe-area-inset-top);
   }
   &--safe-area.wr-speed-dial--left {
+    // Pads toward the physical fan direction below, and
+    // `env(safe-area-inset-right)` names the device's own edge — it does not
+    // flip with direction, so it has to stay on the side it describes.
+    // rtl-ok: physical fan direction, physical `env()` inset
     padding-right: env(safe-area-inset-right);
   }
   &--safe-area.wr-speed-dial--right {
+    // rtl-ok: same pair as above — physical fan direction, physical inset.
     padding-left: env(safe-area-inset-left);
   }
 
@@ -90,11 +95,13 @@
   &--up {
     .wr-speed-dial__actions {
       bottom: 100%;
+      // rtl-ok: centred with a physical translateX, so the pair must stay physical
       left: 50%;
       transform: translateX(-50%);
     }
     .wr-speed-dial__action-wrap {
       bottom: 0;
+      // rtl-ok: centred with a physical translate(-50%, …), so the pair must stay physical
       left: 50%;
       transform: translate(-50%, 0.5rem);
     }
@@ -107,11 +114,13 @@
   &--down {
     .wr-speed-dial__actions {
       top: 100%;
+      // rtl-ok: centred with a physical translateX, so the pair must stay physical
       left: 50%;
       transform: translateX(-50%);
     }
     .wr-speed-dial__action-wrap {
       top: 0;
+      // rtl-ok: centred with a physical translate(-50%, …), so the pair must stay physical
       left: 50%;
       transform: translate(-50%, -0.5rem);
     }
@@ -123,11 +132,18 @@
 
   &--left {
     .wr-speed-dial__actions {
+      // The anchor and the fan offset are one pair — the actions travel on a
+      // physical `translateX` (`translate(calc(-1 * $offset), -50%)` below,
+      // which no logical property can mirror). Flip only the anchor and the
+      // dial fans back over its own trigger in RTL. A direction-aware fan is a
+      // TS/`Directionality` change, out of scope for this CSS sweep.
+      // rtl-ok: anchor paired with a physical translateX fan
       right: 100%;
       top: 50%;
       transform: translateY(-50%);
     }
     .wr-speed-dial__action-wrap {
+      // rtl-ok: same anchor/transform pair as above.
       right: 0;
       top: 50%;
       transform: translate(0.5rem, -50%);
@@ -140,11 +156,15 @@
 
   &--right {
     .wr-speed-dial__actions {
+      // Anchor paired with the physical `translate($offset, -50%)` fan below —
+      // see `--left` for why converting one half breaks the other.
+      // rtl-ok: anchor paired with a physical translateX fan
       left: 100%;
       top: 50%;
       transform: translateY(-50%);
     }
     .wr-speed-dial__action-wrap {
+      // rtl-ok: same anchor/transform pair as above.
       left: 0;
       top: 50%;
       transform: translate(-0.5rem, -50%);

package/split-text/styles/_index.scss

@@ -9,6 +9,19 @@
   overflow-wrap: break-word;
   will-change: transform, opacity;
 
+  // Same shape as `wr-rotating-text`: the animated pieces are per-character
+  // spans, which a screen reader may read out one letter at a time, so the real
+  // string is carried once here and the pieces are taken out of the tree.
+  &__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
   &__piece {
     display: inline-block;
     will-change: transform, opacity;

package/star-border/styles/_index.scss

@@ -39,11 +39,13 @@
 
     &--bottom {
       bottom: -12px;
+      // rtl-ok: the comet's off-screen start mark — `wr-star-border-bottom` sweeps it by `translate(-100%, 0%)`
       right: -250%;
     }
 
     &--top {
       top: -12px;
+      // rtl-ok: the comet's off-screen start mark — `wr-star-border-top` sweeps it by `translate(100%, 0%)`
       left: -250%;
       animation-name: wr-star-border-top;
     }

package/stepper/styles/_index.scss

@@ -45,8 +45,17 @@
     }
   }
 
+  // A column, because the connector is a SIBLING of the button inside the `<li>`:
+  // in a row it lands to the right of the label, where nothing connects. The
+  // giveaway was already in the connector's own rule — a `margin-left` of half
+  // the indicator only means anything when the line runs beneath the circle.
+  // `flex-start` rather than `stretch`: in a column that is the horizontal axis,
+  // so stretch would pull the button to full width and unstick the label from its
+  // circle. `gap: 0` because the base rule's 0.75rem would break the line.
   &--vertical &__header {
-    align-items: stretch;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0;
     flex: 0 0 auto;
   }
 
@@ -60,7 +69,7 @@
     gap: 0.625rem;
     color: var(--wr-color-on-surface);
     cursor: pointer;
-    text-align: left;
+    text-align: start;
     flex: 0 0 auto;
 
     &:disabled {
@@ -141,6 +150,10 @@
 
   &--vertical &__connector {
     width: 1.5px;
+    // The shared rule's `min-width: 1rem` is a minimum LENGTH for the horizontal
+    // line, and it outranks `width` — so without this reset the vertical connector
+    // paints as a 16px block instead of a 1.5px thread.
+    min-width: 0;
     min-height: 1.25rem;
     height: auto;
     margin: 0.25rem 0 0.25rem calc(var(--wr-stepper-indicator-size) / 2);
@@ -167,12 +180,15 @@
   }
 
   .wr-stepper--responsive:not(.wr-stepper--vertical) .wr-stepper__header {
-    align-items: stretch;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0;
     flex: 0 0 auto;
   }
 
   .wr-stepper--responsive:not(.wr-stepper--vertical) .wr-stepper__connector {
     width: 1.5px;
+    min-width: 0;
     min-height: 1.25rem;
     height: auto;
     margin: 0.25rem 0 0.25rem calc(var(--wr-stepper-indicator-size) / 2);

package/styles/_grid.scss

@@ -18,10 +18,10 @@ $gutter: var(--wr-grid-gutter);
 .container,
 .container-fluid {
   width: 100%;
-  padding-right: calc(#{$gutter} * 0.5);
-  padding-left: calc(#{$gutter} * 0.5);
-  margin-left: auto;
-  margin-right: auto;
+  padding-inline-end: calc(#{$gutter} * 0.5);
+  padding-inline-start: calc(#{$gutter} * 0.5);
+  margin-inline-start: auto;
+  margin-inline-end: auto;
 }
 
 @each $name, $max-width in bp.$container-widths {

package/styles.scss

@@ -73,6 +73,7 @@
 @forward './line-chart/styles';
 @forward './list/styles';
 @forward './loading-bar/styles';
+@forward './markdown/styles';
 @forward './marquee/styles';
 @forward './mention/styles';
 @forward './meter-group/styles';

package/switch/styles/_index.scss

@@ -55,14 +55,16 @@
   &__thumb {
     position: absolute;
     top: 50%;
-    left: calc((var(--wr-switch-track-height) - var(--wr-switch-thumb-size)) / 2);
+    inset-inline-start: calc((var(--wr-switch-track-height) - var(--wr-switch-thumb-size)) / 2);
     transform: translateY(-50%);
     width: var(--wr-switch-thumb-size);
     height: var(--wr-switch-thumb-size);
     background: var(--wr-switch-thumb);
     border-radius: 50%;
     box-shadow: var(--wr-shadow-xs);
-    transition: left var(--wr-transition-base);
+    // Follows the property above — a `transition: left` would no longer name the
+    // property that moves, and the thumb would snap instead of glide.
+    transition: inset-inline-start var(--wr-transition-base);
   }
 
   // Sizes — track, thumb, label font + line-height scale together.
@@ -86,7 +88,7 @@
     --wr-switch-bg: var(--wr-switch-bg-checked);
 
     .wr-switch__thumb {
-      left: calc(
+      inset-inline-start: calc(
         var(--wr-switch-track-width) - var(--wr-switch-thumb-size) -
           ((var(--wr-switch-track-height) - var(--wr-switch-thumb-size)) / 2)
       );

package/table/styles/_index.scss

@@ -54,7 +54,7 @@
   &__th,
   &__td {
     padding: calc(0.625rem * var(--wr-density-y, 1)) calc(0.875rem * var(--wr-density-x, 1));
-    text-align: left;
+    text-align: start;
     vertical-align: middle;
     border-bottom: 1px solid var(--wr-table-border);
   }
@@ -91,7 +91,11 @@
   &__resize-handle {
     position: absolute;
     top: 0;
-    right: 0;
+    // The grab edge is the side a growing width extends toward, and `table.ts`
+    // now signs that travel from `Directionality` (`resizeDelta()`): rightward
+    // in LTR, leftward in RTL. The two are a pair — flipping one without the
+    // other leaves the grip standing still while the column resizes.
+    inset-inline-end: 0;
     z-index: 1;
     width: 0.5rem;
     height: 100%;
@@ -103,7 +107,9 @@
       content: '';
       position: absolute;
       inset: 20% 0.1875rem;
-      left: auto;
+      // Cancels the inline-START inset so the grip bar hugs the handle's own
+      // grab edge, whichever physical side that lands on.
+      inset-inline-start: auto;
       width: 2px;
       border-radius: 1px;
       background: var(--wr-color-outline);
@@ -315,14 +321,19 @@
     background-image: linear-gradient(var(--wr-table-row-hover), var(--wr-table-row-hover));
   }
 
-  // Separating shadow on the inner edge of each pinned group.
+  // Separating shadow on the inner edge of each pinned group. `box-shadow` has
+  // no logical form — its offset is always physical — and the cell it belongs to
+  // is anchored by `[style.left.px]` / `[style.right.px]` in table.html, written
+  // from `leftPin()` / `rightPin()`. The shadow leans the way the offset pins.
   &__th--pin-edge-left,
   &__td--pin-edge-left {
+    // rtl-ok: physical offset matching the physical `left` pin set by the component
     box-shadow: 0.375rem 0 0.375rem -0.25rem rgba(0, 0, 0, 0.18);
   }
 
   &__th--pin-edge-right,
   &__td--pin-edge-right {
+    // rtl-ok: physical offset matching the physical `right` pin set by the component
     box-shadow: -0.375rem 0 0.375rem -0.25rem rgba(0, 0, 0, 0.18);
   }
 
@@ -398,10 +409,10 @@
   }
 
   // The band cell is full table width, so a sticky inline box inside it rides
-  // horizontal scroll and keeps the label at the left edge. No measurement.
+  // horizontal scroll and keeps the label at the leading edge. No measurement.
   &__group-inner {
     position: sticky;
-    left: 0;
+    inset-inline-start: 0;
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
@@ -586,7 +597,7 @@
     gap: 1rem;
     padding: 0.25rem 0.875rem;
     border-bottom: 0;
-    text-align: right;
+    text-align: end;
   }
 
   .wr-table--responsive .wr-table__td::before {
@@ -600,7 +611,7 @@
     // 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;
+    text-align: start;
     white-space: nowrap;
   }
 
@@ -653,7 +664,7 @@
 
   .wr-table--responsive .wr-table__group-toggle {
     flex: 1 1 auto;
-    text-align: left;
+    text-align: start;
   }
 
   // Per-group subtotals don't translate to cards either — hide like the grand footer.
@@ -769,7 +780,7 @@
     color: var(--wr-color-on-surface);
     font: inherit;
     font-size: var(--wr-text-sm);
-    text-align: left;
+    text-align: start;
     cursor: pointer;
 
     &:hover {
@@ -813,11 +824,13 @@
     border: 0;
     padding: 0.375rem 0.5rem;
     border-radius: var(--wr-border-radius-sm);
-    color: var(--wr-color-primary);
+    // A real "Reset" text button, so `-ink`. The sort / filter GLYPHS above keep
+    // the bare intent: graphics are held to 3:1, which they clear.
+    color: var(--wr-color-primary-ink);
     font: inherit;
     font-size: var(--wr-text-sm);
     cursor: pointer;
-    text-align: left;
+    text-align: start;
 
     &:hover {
       background: var(--wr-color-primary-soft);

package/tabs/styles/_index.scss

@@ -57,13 +57,23 @@
     --wr-tabs-fade: 1.5rem;
     --wr-tabs-fade-start: 0px;
     --wr-tabs-fade-end: 0px;
+    // A gradient has no logical direction keyword, so the axis is a variable the
+    // RTL rule below turns around. The two stops are LOGICAL — `updateFades()`
+    // measures the distance from the inline start — and the inline start is the
+    // right edge under `dir="rtl"`, so the gradient has to run the other way for
+    // the fade to land on the edge that still has tabs behind it.
+    --wr-tabs-fade-axis: to right;
     mask-image: linear-gradient(
-      to right,
+      var(--wr-tabs-fade-axis),
       transparent 0,
       #000 var(--wr-tabs-fade-start),
       #000 calc(100% - var(--wr-tabs-fade-end)),
       transparent 100%
     );
+
+    [dir='rtl'] & {
+      --wr-tabs-fade-axis: to left;
+    }
   }
 
   &--fade-start &__strip {

package/textarea/styles/_index.scss

@@ -94,6 +94,11 @@
   // cursor follow the `resize` direction.
   &__resize {
     position: absolute;
+    // `textarea.ts` starts the drag from `event.clientX` and applies
+    // `startWidth + (clientX - startX)`, so the grip has to sit on the physical
+    // side a growing width extends toward. Flip it only together with that sign,
+    // once the drag maths itself reads `Directionality`.
+    // rtl-ok: paired with the physical clientX drag maths in textarea.ts
     right: 0.25rem;
     bottom: 0.25rem;
     display: inline-flex;

package/theme/styles/_colors.scss

@@ -9,15 +9,27 @@
 //     $base-colors: (primary: #...)
 //   );
 
+// Five intents are deliberately deeper than their "brand" tone, and the reason is
+// arithmetic rather than taste. `_contrast()` picks whichever of black / white
+// scores HIGHER against the fill, and those two are equal at √21 ≈ 4.58 — so an
+// intent lighter than that gets a black label whatever anyone prefers. At the old
+// tones white measured 3.10–3.99 (below AA) and black 5.26–6.77, so black won on
+// merit and the labels read muddy on a saturated mid-tone.
+//
+// Each of the five now sits just past the flip: white 4.60–4.64, black 4.52–4.56.
+// The shift is 8–20% of the previous tone. `warning` and `light` are NOT in that
+// set and cannot be — white needs `#906900` on warning, which is brown, not a
+// warning colour; those two keep their black label, which is correct at 12.28 and
+// 14.14.
 $base-colors: (
   primary: #3969e2,
-  secondary: #f51c6a,
-  success: #00a400,
+  secondary: #e21a62,
+  success: #008800,
   warning: #ffba00,
-  danger: #fa383e,
-  info: #3b82f6,
+  danger: #dc3137,
+  info: #3472d9,
   light: #cbd5e1,
-  medium: #8594a4,
+  medium: #6a7683,
   dark: #0f172a,
 ) !default;
 
@@ -139,9 +151,10 @@ $contrast-light: #ffffff !default;
   // 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.
+  // fill it has to clear the bar the other way, against its own label. v11 pulled
+  // them further apart rather than closer — the `medium` fill went deeper
+  // (#6a7683, whose label is now white at 4.63) while this token stayed where a
+  // light canvas needs it. Aliasing them left secondary text at 2.69:1.
   --wr-color-muted-text: #5f6c7d;
   --wr-color-muted-text-rgb: 95, 108, 125;
 
@@ -230,11 +243,14 @@ $contrast-light: #ffffff !default;
   // `-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
+  // intent. The inverse was never covered: an outlined / bordered variant paints
+  // the hue as its own label, and on a TINTED surface the light theme still
+  // fails there. Measured on #ebeff4, the lightest surface, after v11 deepened
+  // five of them: medium 4.01, success 4.02, danger 4.01, info and secondary
+  // 3.99 — all under the 4.5 bar — and warning 1.48, which nothing rescues.
+  // (On pure white those five now clear it at 4.61–4.64; the tint is what makes
+  // `-ink` necessary rather than optional.) Dark passes on all of them, because
+  // its bases are 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
@@ -256,9 +272,22 @@ $contrast-light: #ffffff !default;
   // 4.42. Half a point of headroom absorbs that, for 2–7 points of share.
   //
   // Going further is not free: 5.25 costs 7–11 points and 5.5 up to 14, which
-  // on `primary` means 93% -> 79% and a visibly muddier blue.
+  // on `primary` meant 93% -> 79% and a visibly muddier blue. (That trade was
+  // priced on the PRE-v11 bases; moving a base reprices it, as `primary` below
+  // shows — 78% now buys 5.0, not 5.5.)
+  //
+  // `primary` was re-derived when the DARK base deepened to #3567ff so its label
+  // could go white: a deeper base makes the ink deeper too, which on a dark tint
+  // is the losing direction. axe measured the old 86% at 4.48:1 on the sidebar's
+  // own tint — under AA, never mind the target. 78% is the most saturated share
+  // that reaches 5.0 there (5.04), and it only helps the light theme, where a
+  // lower share means MORE `--wr-color-dark` and a deeper ink on a pale tint.
+  // Solved against the exact pair axe resolved on the page (#4e79fd on #0f1a36),
+  // because a hand-rolled composite of the tint over the canvas does not
+  // reproduce what the browser paints — this file's own numbers are arithmetic,
+  // and `pnpm check:contrast` is the authority.
   $ink-mix: (
-    primary: 86%,
+    primary: 78%,
     secondary: 75%,
     success: 67%,
     warning: 48%,

package/theme/styles/_dark.scss

@@ -13,10 +13,15 @@
 // FULL symmetric shade set — the hand blocks used to ship only base+rgb,
 // leaving -light/-dark/-lighter/-darker baked from the LIGHT palette.
 // (primary keeps its hand-tuned block; info stays its light values.)
+// `success` and `danger` are past the black/white flip point here too — see the
+// note above `$base-colors`. The dark canvas wants a LIGHTER fill, so the deepening
+// costs more here than in the light theme (33% and 21%), and that is the trade:
+// a duller green, in exchange for a label that is legible rather than muddy.
+// `warning` stays as it is — white cannot reach it at any tone worth shipping.
 $dark-intents: (
-  success: #34c759,
+  success: #23863c,
   warning: #ffcc33,
-  danger: #ff5c5c,
+  danger: #ca4949,
 );
 
 // The surface / ink bases below are re-tuned for the dark canvas too, but they
@@ -25,7 +30,10 @@ $dark-intents: (
 // the shade derivations read from the value that actually ships, instead of
 // being re-typed next to it.
 $_light: #262f44;
-$_medium: #9aa6b8;
+// The medium FILL, past the flip point. Not the muted-text role: that reads from
+// `--wr-color-muted-text` below, which stays #9aa6b8 — it is text on the canvas,
+// where lighter is what makes it legible, the opposite direction from a fill.
+$_medium: #6d7682;
 $_dark: #e6ebf3;
 
 [data-theme='dark'] {
@@ -116,18 +124,30 @@ $_dark: #e6ebf3;
   --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;
-  --wr-color-primary-lighter: #99b6ff;
-  --wr-color-primary-darker: #1f3a99;
+  // The default primary (#3969e2) reads a touch dim on the deep canvas. What
+  // carries here is SATURATION, not lightness: #3567ff is only ~7% more luminous
+  // than the light base but runs the blue channel to 255, and the shades follow it
+  // so hover / focus rings stay visible against slate-900.
+  //
+  // Deep enough for a WHITE label, and no deeper. `_contrast()` takes whichever
+  // of black / white scores higher, and the two are equal at √21 ≈ 4.58 — the
+  // previous #5b85ff sat at white 3.36 / black 6.24, so it took a BLACK label
+  // while the light theme's primary took white: one intent labelled two
+  // different ways across the themes. #3567ff reads white 4.63 / black 4.54.
+  //
+  // Saturation stays at 100%. Scaling the channels toward black reaches the same
+  // ratio at #4c6fd6, but that is S 63% — duller, which is the opposite of what
+  // this block exists for. Dropping lightness at full saturation keeps the colour
+  // vivid, and keeps it distinct from the light theme's #3969e2 rather than
+  // collapsing onto it.
+  --wr-color-primary: #3567ff;
+  --wr-color-primary-contrast: #{colors.contrast(#3567ff)};
+  --wr-color-primary-rgb: 53, 103, 255;
+  // The same lightness steps as before, taken off the new base.
+  --wr-color-primary-light: #547eff;
+  --wr-color-primary-dark: #2848aa;
+  --wr-color-primary-lighter: #7396ff;
+  --wr-color-primary-darker: #183179;
 
   // success / warning / danger — retuned bases now get the FULL symmetric
   // shade set in dark too (generated, so no intent can silently drift).

package/theme/styles/_mixins.scss

@@ -93,6 +93,9 @@
       content: '';
       position: absolute;
       top: 50%;
+      // rtl-ok: centred with a physical `translate(-50%, -50%)` below, so the
+      // pair must stay physical — mirroring only this half would shift the
+      // hit area off the control by its own width under `dir="rtl"`.
       left: 50%;
       width: 100%;
       height: 100%;