ngwr 14.3.1 → 14.5.0

package/select/styles/_index.scss

@@ -100,6 +100,9 @@
     }
   }
 
+  // color-ok: opening attaches the panel and flips the chevron 180deg, so the
+  // state is a thing appearing and a glyph rotating; this only tints the edge
+  // underneath both.
   &--open &__trigger {
     border-color: var(--wr-color-primary);
     box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.15);
@@ -454,12 +457,28 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    // Positioning context for the `--active` cursor bar below.
+    position: relative;
   }
 
   // Keyboard cursor highlight — the virtualized list is navigated by
-  // aria-activedescendant, so the active row needs a visible marker.
+  // aria-activedescendant, so real focus never lands on the row and the tint
+  // is all there was. `--wr-color-hover` is translucent and lands within about
+  // 1.1:1 of the panel behind it, which is the same grey to a reader who
+  // cannot separate hue — and it is the declaration `:hover` uses, so the row
+  // the arrows reached and a row under the mouse were indistinguishable. The
+  // bar is the channel; the tint stays as reinforcement.
   .wr-option--active {
     background: var(--wr-color-hover);
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: 0;
+      width: 2px;
+      background: var(--wr-color-primary);
+    }
   }
 }
 

package/skills/ngwr/SKILL.md

@@ -5,7 +5,7 @@ description: Build Angular UIs with the ngwr component library (standalone, sign
 
 # ngwr
 
-An Angular 22 UI library: 225 tree-shakable entry points, 112 of them shipping a selector.
+An Angular 22 UI library: 227 tree-shakable entry points, 113 of them shipping a selector.
 Standalone, signals-first, zoneless, `ViewEncapsulation.None`. One runtime
 dependency (`tslib`).
 

package/skills/ngwr/references/catalog.md

@@ -89,6 +89,8 @@ root barrel for components.
 | `ngwr/glitch-text/testing` | `import { WrGlitchTextHarness } from 'ngwr/glitch-text/testing'` | — |
 | `ngwr/gradient-text` | `import { WrGradientText } from 'ngwr/gradient-text'` | `wr-gradient-text` |
 | `ngwr/gradient-text/testing` | `import { WrGradientTextHarness } from 'ngwr/gradient-text/testing'` | — |
+| `ngwr/graph` | `import { WrGraph } from 'ngwr/graph'` | `ng-template[wrGraphNode]` `wr-graph` |
+| `ngwr/graph/testing` | `import { WrGraphHarness } from 'ngwr/graph/testing'` | — |
 | `ngwr/hotkey` | `import { WrHotkey } from 'ngwr/hotkey'` | `[wrHotkey]` |
 | `ngwr/i18n` | `import { WrI18n } from 'ngwr/i18n'` | `[wrT]` |
 | `ngwr/i18n/ar` | `import { wrAr } from 'ngwr/i18n/ar'` | — |

package/statistic/styles/_index.scss

@@ -39,10 +39,14 @@
     font-weight: var(--wr-font-weight-semibold);
     font-variant-numeric: tabular-nums;
 
+    // color-ok: direction is DRAWN — statistic.html gives up and down two
+    // different triangle paths (apex up `M5 1 L9 8 L1 8 Z`, apex down
+    // `M5 9 L9 2 L1 2 Z`), and the value reads +12.4% against -0.4%.
     &--up {
       color: var(--wr-color-success-ink);
     }
 
+    // color-ok: see `--up` above — the two triangles point opposite ways.
     &--down {
       color: var(--wr-color-danger-ink);
     }

package/stepper/styles/_index.scss

@@ -136,12 +136,43 @@ $header-padding-block: 0.25rem;
       color var(--wr-transition-base);
   }
 
+  // The current step is the one state here with no glyph of its own: completed
+  // swaps the numeral for a tick, pending and unreachable keep the numeral, and
+  // active kept the numeral too — so it was a tinted circle beside a white one,
+  // 1.17:1, which is the same circle to a reader who cannot separate hue. The
+  // ring DOUBLES against the base rule's 1.5px, which is a weight rather than a
+  // colour and survives both greyscale and forced-colors.
   &__header--active &__indicator {
+    border-width: 3px;
     border-color: var(--wr-color-primary);
     color: var(--wr-color-primary-ink);
     background: var(--wr-color-primary-soft);
   }
 
+  // A step `linear` has not opened yet renders a DISABLED button that looked
+  // exactly like an available one. `--reachable` was bound in the template,
+  // asserted by a spec and read by the harness, and styled by nothing at all,
+  // so the only cue was `cursor: not-allowed` — which needs a pointer, and a
+  // touch device has none.
+  //
+  // The cue is the border STYLE, deliberately: `linear` refuses rather than
+  // greys, so dimming would contradict the contract, and a tint would be
+  // invisible to a reader who cannot separate hue.
+  //
+  // `--completed` is excluded because a completed circle is FILLED with
+  // `--wr-color-primary` and rings itself in the same colour, so dashes there
+  // would be dashes against their own fill — invisible, and pointless besides,
+  // since a step already carrying a tick does not need to be told it is shut.
+  // The rule does cover a step its own `disabled` input closed, in a stepper
+  // that is not `linear` at all: `isReachable` fails on `disabled` first
+  // (stepper.ts:126), and "you cannot go here" is the same news either way.
+  &__header:not(.wr-stepper__header--reachable):not(.wr-stepper__header--completed) &__indicator {
+    border-style: dashed;
+  }
+
+  // color-ok: a completed step swaps its numeral for a TICK (stepper.html:19),
+  // so the glyph already differs from every other state; this only fills the
+  // disc behind it.
   &__header--completed &__indicator {
     background: var(--wr-color-primary);
     border-color: var(--wr-color-primary);
@@ -173,6 +204,8 @@ $header-padding-block: 0.25rem;
     margin-block-start: calc((var(--wr-stepper-indicator-size) - #{$label-line-height}) / 2);
   }
 
+  // color-ok: the label follows the indicator beside it, which carries the
+  // state in its doubled ring — this is the same news, re-inked.
   &__header--active &__label {
     color: var(--wr-color-primary-ink);
   }
@@ -225,6 +258,9 @@ $header-padding-block: 0.25rem;
     flex: 0 0 auto;
   }
 
+  // color-ok: filled against unfilled is 3.29:1 in LIGHTNESS — primary #3969e2
+  // against the connector's default `--wr-color-outline` #cbd5e1 — so the trail
+  // of finished steps reads as a darker line, not merely a bluer one.
   &__header--completed + &__header &__connector,
   &__header--completed &__connector {
     background: var(--wr-color-primary);

package/styles.scss

@@ -61,6 +61,7 @@
 @forward './gauge/styles';
 @forward './glitch-text/styles';
 @forward './gradient-text/styles';
+@forward './graph/styles';
 @forward './icon/styles';
 @forward './image-cropper/styles';
 @forward './input/styles';

package/switch/styles/_index.scss

@@ -84,6 +84,9 @@
     --wr-switch-line-height: var(--wr-control-line-height-lg);
   }
 
+  // color-ok: the knob TRAVELS — the nested `.wr-switch__thumb` rule moves
+  // `inset-inline-start` from one end of the track to the other. Position is
+  // the channel; the track colour follows it.
   &--checked {
     --wr-switch-bg: var(--wr-switch-bg-checked);
 

package/table/styles/_index.scss

@@ -213,6 +213,9 @@
     vertical-align: middle;
   }
 
+  // color-ok: the tick is the channel — a selected row's own `__td--select`
+  // cell holds a `<wr-checkbox>` bound to the same predicate as this class,
+  // and its mark appears. The tint is the reinforcement, not the signal.
   &__tr--selected,
   &__tr--selected:hover {
     background: var(--wr-color-primary-soft);
@@ -220,6 +223,9 @@
 
   // Pinned cells paint their own opaque background, so re-apply the selection
   // tint over it (same technique as the row-hover rule above).
+  // color-ok: the pinned cells repaint the row tint they sit in, and the row
+  // itself is marked by the selection checkbox in its `__td--select` cell —
+  // these follow that, they do not carry the state.
   &__tr--selected &__td--pin-left,
   &__tr--selected &__td--pin-right,
   &__tr--selected:hover &__td--pin-left,
@@ -758,6 +764,9 @@
   display: inline-flex;
   color: var(--wr-color-on-surface-muted);
 
+  // color-ok: the same `selectedCount() > 0` renders the `__count` numeral
+  // pill beside the funnel (table-filter.html:17) — a number appears where
+  // there was none.
   &--active {
     color: var(--wr-color-primary);
   }
@@ -850,6 +859,9 @@
     transition: var(--wr-transition-base);
   }
 
+  // color-ok: the tick APPEARS. The base `&__check` holds the same SVG at
+  // `color: transparent` (line 851), so this is a glyph arriving rather than
+  // a hue swapped.
   &__item--selected &__check {
     background: var(--wr-color-primary);
     border-color: var(--wr-color-primary);

package/tabs/styles/_index.scss

@@ -106,7 +106,10 @@
       color: var(--wr-tabs-color-hover);
     }
 
-    &--active {
+    // color-ok: the base tab already reserves `border-bottom: 2px solid
+  // transparent` (line 98), so colouring it paints an underline that no
+  // inactive tab carries — a mark appearing, not a hue swapped.
+  &--active {
       color: var(--wr-tabs-color-active);
       border-bottom-color: var(--wr-tabs-indicator);
     }

package/textarea/styles/_index.scss

@@ -103,7 +103,12 @@
     inset-inline-end: 0.25rem;
     bottom: 0.25rem;
     display: inline-flex;
-    color: var(--wr-color-text-faint);
+    // NOT `--wr-color-text-faint`, which is where this sat and measured 2.43:1
+    // in light. A resize grip is an interactive affordance, so WCAG 1.4.11 asks
+    // 3:1 of it — the faint tier is documented as "decorative by design", and
+    // this is not decorative. The full-strength role is 5.35:1 light and 7.64:1
+    // dark. No gate reports this: axe ships no non-text-contrast rule.
+    color: var(--wr-color-on-surface-muted);
     touch-action: none;
     transition: color var(--wr-transition-base);
 

package/theme/styles/_colors.scss

@@ -221,6 +221,17 @@ $contrast-light: #ffffff !default;
   // 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);
+  // unused-ok: the library paints with nothing at this strength any more, and
+  // that is the finding rather than an oversight. It had exactly three
+  // consumers — the OTP placeholder, the textarea resize grip and the avatar
+  // spinner — and all three were FAILING: 2.43:1 in light, against 4.5:1 for
+  // placeholder text and 3:1 for an interactive affordance and a status
+  // indicator. "Decorative by design" was true of the token and not of any of
+  // the three, so they moved to `-text-muted` and `-on-surface-muted`. The tier
+  // stays published because a custom property is public API and a consumer may
+  // have genuinely decorative text; the library, it turns out, has none. Note
+  // that no gate reports the shortfall: axe has no non-text-contrast rule, and
+  // `check:contrast` gates on route counts.
   --wr-color-text-faint: rgba(var(--wr-color-muted-text-rgb), 0.6);
 
   // Semantic role aliases over the flipping neutrals — prefer these in new code

package/theme/styles/_contrast.scss

@@ -0,0 +1,136 @@
+// `prefers-contrast: more` for the whole token layer.
+//
+// Why this lives in one file, next to `_motion.scss` and for the same reason:
+// the thing being answered is a request the USER made of the operating system,
+// about the page as a whole, and a component cannot answer it on its own. Every
+// declaration below is a token, so a component that reads the tokens — which is
+// all of them — comes along without being edited.
+//
+// What "more contrast" is being read to mean here, since the media query says
+// nothing about how much: **AAA where the role is text (7:1), and the WCAG
+// 1.4.11 bar where the role is a boundary (3:1)**. Those are the two numbers
+// the default palette deliberately does not meet, each for a recorded reason.
+//
+// THE DE-EMPHASIS TIER IS WHAT HIGH CONTRAST SPENDS. `--wr-color-text-faint`
+// and `--wr-color-text-muted` are the muted ink at 0.6 and 0.95 alpha, and
+// under this query both go to 1.0 and collapse onto the deepened role. That is
+// not a shortcut: 7:1 is UNREACHABLE at any alpha in the light theme, because
+// the base itself only reaches 5.35:1 — the alpha is not the lever, the base
+// is. Keeping a visibly fainter tier at 7:1 would need a base of `#353c46`,
+// which measures 11.13:1 on its own and is no longer a muted role at all. A
+// reader who asked for more contrast is asking for the tiers to close up.
+//
+// A LIVE DEFECT THIS EXPOSED, and it is not fixed here. At the default 0.6,
+// `text-faint` measures **2.43:1** in light and 3.46:1 in dark, and its three
+// consumers are an `input-otp` `::placeholder` (text, 1.4.3) plus the textarea
+// resize grip and the avatar spinner (graphics, 1.4.11 → 3:1). All three fail
+// today, in the DEFAULT theme, where `_colors.scss` calls them "decorative by
+// design" — a resize affordance and a loading indicator are not decorative.
+// High contrast repairs them incidentally; the default still needs a decision.
+//
+// TWO BLOCKS, NOT ONE, and this is the part that would silently half-work. A
+// `@media { :root { … } }` resolves its `var()` references against the element
+// it declares on, so a single `:root` block freezes LIGHT values into any
+// subtree-scoped `[data-theme='dark']`. The dark half has to be declared on the
+// dark selector itself.
+//
+// Every figure in the comments below is WCAG relative-luminance arithmetic on
+// solid colours, which reproduces what axe measures. Figures involving an alpha
+// composite are marked as such — those carry ±0.05 and the browser is the
+// authority. `pnpm check:contrast --contrast=more` is that authority.
+
+@use 'sass:map';
+@use 'colors';
+@use 'dark';
+
+/// The `-ink` shares under high contrast.
+///
+/// `-ink` is text by definition, so the target moves from the default 5.0:1 to
+/// AAA 7:1 — measured, as the default shares are, against the intent's own
+/// `-soft` tint rather than the plain canvas, because the tint is the darker of
+/// the two backgrounds `-ink` is documented for and therefore the binding one.
+///
+/// Each share is the MOST saturated value that still reaches 7:1 in BOTH
+/// themes, so the binding theme decides it. Dark binds for six of the seven;
+/// `warning` is the exception and binds on light, where white cannot reach it
+/// at any tone worth shipping.
+$ink-mix-more: (
+  primary: 53%,
+  secondary: 47%,
+  success: 55%,
+  warning: 36%,
+  danger: 53%,
+  info: 54%,
+  medium: 57%,
+) !default;
+
+@media (prefers-contrast: more) {
+  :root {
+    // 8.16:1 on the page, 7.07:1 on `#ebeff4` — the lightest surface the
+    // library paints, and the reference the rest of the theme layer solves
+    // against. The default `#5f6c7d` reaches 5.35 and 4.63 respectively.
+    --wr-color-muted-text: #47505d;
+    --wr-color-muted-text-rgb: 71, 80, 93;
+
+    // The de-emphasis tier closes up — see the note at the top of this file.
+    --wr-color-text-muted: rgba(var(--wr-color-muted-text-rgb), 1);
+    // unused-ok: the library paints with nothing at the faint strength any
+    // more — see the note at its declaration in `_colors.scss`. The override
+    // stays so a CONSUMER using the tier is carried into high contrast too.
+    --wr-color-text-faint: rgba(var(--wr-color-muted-text-rgb), 1);
+
+    // 3.47:1 on the page and 3.00:1 on `#ebeff4`, against the default
+    // `#cbd5e1`'s 1.48:1. This is the value AGENTS.md already records as the
+    // honest one, and the reason it is not the default is recorded there too:
+    // the token carries 103 declarations, only 15 of which are control
+    // boundaries that 1.4.11 reaches, and darkening all 103 was refused on how
+    // it looks. Under an explicit request for more contrast that trade flips —
+    // the reader has said which side they want.
+    --wr-color-outline: #718cad;
+    --wr-color-outline-rgb: 113, 140, 173;
+
+    @each $name, $share in $ink-mix-more {
+      --wr-color-#{$name}-ink: color-mix(in srgb, var(--wr-color-#{$name}) #{$share}, var(--wr-color-dark));
+    }
+  }
+
+  #{dark.dark-selector()} {
+    // 8.30:1 on the dark canvas. Dark needed far less than light — the default
+    // `#9aa6b8` already reaches 7.64 there and only misses on `fill-strong`,
+    // the harshest surface the library paints, which this closes.
+    --wr-color-muted-text: #a2adbe;
+    --wr-color-muted-text-rgb: 162, 173, 190;
+
+    --wr-color-text-muted: rgba(var(--wr-color-muted-text-rgb), 1);
+    // unused-ok: the library paints with nothing at the faint strength any
+    // more — see the note at its declaration in `_colors.scss`. The override
+    // stays so a CONSUMER using the tier is carried into high contrast too.
+    --wr-color-text-faint: rgba(var(--wr-color-muted-text-rgb), 1);
+
+    // 3.56:1 on the dark canvas, against the default `#262f44`'s 1.41:1.
+    --wr-color-outline: #566b9b;
+    --wr-color-outline-rgb: 86, 107, 155;
+
+    @each $name, $share in $ink-mix-more {
+      --wr-color-#{$name}-ink: color-mix(in srgb, var(--wr-color-#{$name}) #{$share}, var(--wr-color-dark));
+    }
+  }
+}
+
+// Adding a tenth intent to `$base-colors` without a share here would leave it
+// on its default ink under high contrast — a silent hole rather than a build
+// error, which is the failure this repo keeps finding in its own claims. So the
+// two lists are held together at COMPILE time.
+//
+// `light` and `dark` are excluded on both sides for the reason `_colors.scss`
+// records: `light` is a surface tone with no darkening that stays recognisable
+// AND readable, and `dark` already IS the ink.
+@each $name, $seed in colors.$base-colors {
+  @if $name != 'light' and $name != 'dark' {
+    @if not map.has-key($ink-mix-more, $name) {
+      @error 'No high-contrast ink share for intent `#{$name}`. Add one to ' +
+        '`$ink-mix-more` in theme/styles/_contrast.scss, derived at 7:1 against ' +
+        'that intent\'s own `-soft` tint in whichever theme binds.';
+    }
+  }
+}

package/theme/styles/_focus.scss

@@ -164,3 +164,10 @@
 .wr-alert__close:focus-visible {
   @include focus-ring;
 }
+
+// Graph viewport — the scroller is the graph's one tab stop, so a keyboard user
+// scrolling it needs to see where focus is. Safe as an OUTSET ring: the outline
+// sits outside the scroller's own box, and `.wr-graph` sets no `overflow`.
+.wr-graph__viewport:focus-visible {
+  @include focus-ring;
+}

package/theme/styles/_index.scss

@@ -2,6 +2,7 @@
 @forward 'colors';
 @forward 'variables';
 @forward 'dark';
+@forward 'contrast';
 @forward 'focus';
 @forward 'mixins';
 @forward 'motion';

package/theme/styles/_mixins.scss

@@ -5,15 +5,22 @@
 //   .thing { @include wr.smooth-br(0.625rem); }
 
 /// Smooth border-radius — opts into the native `corner-shape: squircle`
-/// CSS spec (Chrome 145+) when the browser supports it, otherwise
-/// falls back to a plain `border-radius`.
+/// when the browser supports it, and falls back to a plain
+/// `border-radius` when it does not.
 ///
-/// **Experimental.** `corner-shape` is a draft CSS specification; the
-/// property name, value space, and metrics may change before it
-/// stabilises. Components are free to swap this mixin out for plain
-/// `border-radius` at any time. For a deterministic squircle that
-/// works across browsers, prefer the `[wrSquircle]` directive — it
-/// uses a `clip-path` superellipse instead of relying on `corner-shape`.
+/// **This is the one place that describes the support picture, on
+/// purpose.** Six files used to name a Chrome version in a comment, all
+/// six naming the wrong one — the property shipped four releases before
+/// the number they quoted. A version in a comment is a claim nobody
+/// re-checks, so the comments elsewhere now say "where supported" and
+/// point here.
+///
+/// Where it stands: Chromium has shipped it since 139, WebKit has it in
+/// Technology Preview, Gecko does not have it yet. That is why the
+/// `@supports` guard below is the contract rather than a courtesy — a
+/// browser without the property gets the rounded corner it would have
+/// had anyway, and nothing an app relies on changes. There is no state
+/// in which a consumer has to do something about this.
 ///
 /// `corner-shape: squircle` renders a continuous-curvature corner (iOS /
 /// macOS style) instead of a circular arc. The squircle reads as

package/timeline/styles/_index.scss

@@ -40,21 +40,48 @@
     z-index: 1;
   }
 
+  // Each intent gets a SILHOUETTE, because the dot is an empty 12px span with
+  // no glyph and nothing beside it that names the state: `title` and `time` are
+  // both optional, so an item written as `<wr-timeline-item color="danger">`
+  // may carry no text of its own at all. Colour cannot do the work here —
+  // success, danger and medium sit within 1.006:1 of each other in dark and
+  // 1.006:1 in light, and success against danger is 1.004:1.
+  //
+  // The shapes follow the vocabulary the library already uses: a triangle is a
+  // warning in `wr-alert` and `wr-result`, so it is a warning here. The base
+  // dot stays a plain circle on purpose — it means "no intent given", and the
+  // quietest shape is the right one for it.
   &--success &__dot {
+    // A filled block: finished.
+    border-radius: 2px;
     background: var(--wr-color-success);
   }
 
   &--warning &__dot {
+    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
+    border-radius: 0;
     background: var(--wr-color-warning);
   }
 
   &--danger &__dot {
+    // A diamond — the loudest silhouette at this size, and unmistakable
+    // against the square and the triangle above it.
+    rotate: 45deg;
+    border-radius: 2px;
     background: var(--wr-color-danger);
   }
 
+  // color-ok: `background: transparent` plus an inset ring makes this dot
+  // HOLLOW — a silhouette, like the three above it. Both declarations happen
+  // to be colour-valued, which is the one shape this gate cannot read.
   &--medium &__dot {
+    // Hollow, which reads as the quiet one. The second shadow keeps the 2px
+    // surface halo every dot carries, so the ring does not swallow it.
     // The `color="medium"` INTENT, not the muted-text role — keep the literal.
-    background: var(--wr-color-medium);
+    background: transparent;
+    box-shadow:
+      inset 0 0 0 2px var(--wr-color-medium),
+      0 0 0 2px var(--wr-color-surface);
   }
 
   &__body {

package/toast/styles/_index.scss

@@ -155,6 +155,17 @@ $toast-colors: (
   animation: wr-toast-in 0.18s ease-out;
   overflow: hidden;
 
+  // The status glyph. Sized off the title's line box so it reads as part of the
+  // first line rather than floating above it, and inked with the accent the
+  // type already carries — the SHAPE is the channel, the colour reinforces it.
+  &__icon {
+    flex: 0 0 auto;
+    width: 1.125rem;
+    height: 1.125rem;
+    margin-block-start: 0.0625rem;
+    color: var(--wr-toast-accent);
+  }
+
   &__body {
     flex: 1 1 auto;
     min-width: 0;

package/tree/styles/_index.scss

@@ -24,6 +24,9 @@
     cursor: pointer;
     user-select: none;
     outline: 0;
+    // Positioning context for the `--active` cursor bar below. Nothing inside
+    // a row is absolutely positioned, so this establishes one for that alone.
+    position: relative;
     transition:
       background var(--wr-transition-base),
       color var(--wr-transition-base);
@@ -32,8 +35,13 @@
       background: var(--wr-color-hover);
     }
 
+    // A selected row had nothing but the tint, and `wr-tree` — unlike its
+    // sibling data view `wr-table` — ships NO checkbox mode, so in
+    // `selectionMode="multiple"` any number of rows were marked by a 1.17:1
+    // wash and nothing else. The weight is what a reader without hue has.
     &--selected {
       background: var(--wr-color-primary-soft);
+      font-weight: var(--wr-font-weight-medium);
       // Text on the `-soft` tint: `-ink`. Bare measured 4.19:1 light / 3.63:1 dark.
       color: var(--wr-color-primary-ink);
     }
@@ -50,9 +58,24 @@
     }
 
     // Active-descendant cursor when virtualized — focus lives on the list
-    // container, so the "current" row is shown by tint rather than a focus ring.
+    // container, so the "current" row cannot use the focus ring.
+    //
+    // The tint alone was the byte-identical declaration `:hover` uses above,
+    // which made the keyboard cursor indistinguishable from a mouse resting on
+    // another row. The bar is what separates them, and it is a shape rather
+    // than a colour so a selected row (also a tint) stays distinct too.
     &--active {
       background: var(--wr-color-hover);
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset-block: 0;
+        inset-inline-start: 0;
+        width: 2px;
+        border-radius: inherit;
+        background: var(--wr-color-primary);
+      }
     }
   }
 
@@ -205,6 +228,9 @@
     }
   }
 
+  // color-ok: opening attaches the panel and flips the chevron 180deg, so the
+  // state is a thing appearing and a glyph rotating; this only tints the edge
+  // underneath both.
   &--open &__trigger {
     border-color: var(--wr-color-primary);
     box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.15);

package/types/ngwr-badge.d.ts

@@ -12,7 +12,7 @@ import * as _angular_core from '@angular/core';
  * - `rounded` (default) — small radius, matches the rest of the form vocabulary.
  * - `pill` — fully rounded ends; common for count chips and status pills.
  * - `squircle` — iOS-style continuous-curvature corners via the
- *   `corner-shape: squircle` CSS spec (Chrome 145+, falls back to a
+ *   `corner-shape: squircle` CSS spec (where supported, falls back to a
  *   plain rounded corner elsewhere).
  */
 type WrBadgeShape = 'rounded' | 'pill' | 'squircle';

package/types/ngwr-bar-chart-testing.d.ts

@@ -77,7 +77,17 @@ declare class WrBarChartHarness extends ComponentHarness {
     getBarCount(): Promise<number>;
     /** Whether the values are printed above the bars (`showValues`). */
     hasValues(): Promise<boolean>;
-    /** The plot's height in pixels, as the component writes it inline. */
+    /**
+     * The plot's height in pixels, read off the `style` ATTRIBUTE.
+     *
+     * NOT `getCssValue()`, which is `getComputedStyle()` — the same rule this
+     * file's class note already states and this method alone broke. A computed
+     * read answers from the LAID-OUT box, so it agrees with the inline value in
+     * jsdom (which lays nothing out and echoes the declaration) and disagrees in a
+     * browser, where sub-pixel rounding turns a declared 240 into 239.5. A harness
+     * that answers differently in the two places it runs is worse than one that
+     * refuses.
+     */
     getPlotHeight(): Promise<number>;
 }
 

package/types/ngwr-button.d.ts

@@ -24,7 +24,7 @@ type WrButtonSize = 'sm' | 'md' | 'lg';
  * - `rounded` (default) — small radius, matches the rest of the form vocabulary.
  * - `pill` — fully rounded ends; ideal for solitary CTAs.
  * - `squircle` — iOS-style continuous-curvature corners via the
- *   `corner-shape: squircle` CSS spec (Chrome 145+, falls back to a
+ *   `corner-shape: squircle` CSS spec (where supported, falls back to a
  *   plain rounded corner elsewhere). For a deterministic
  *   clip-path-based squircle that works across browsers, wrap the
  *   button in `[wrSquircle]` instead.

package/types/ngwr-calendar-heatmap-testing.d.ts

@@ -36,9 +36,14 @@ interface WrCalendarHeatmapCell {
  *
  * **Every square is `aria-hidden`, and that is the design.** The grid is one
  * `role="img"` with a name; a year of individually announced days would be unusable
- * with a screen reader. What each square carries instead is a `title` — its ISO date
- * and value — which is the only text a spec can read, and what
- * {@link getCells} parses.
+ * with a screen reader. What each square carries instead is `data-date` and
+ * `data-value`, which is what {@link getCells} reads.
+ *
+ * NOT the `title`, which it used to parse. The tooltip is human-facing text now
+ * — the date formatted for the reader's locale, the count through
+ * `Intl.NumberFormat`, and the sentence composed in the catalog — so parsing it
+ * would have made every assertion here depend on the locale the suite happens to
+ * run under, and on wording a translator is free to change.
  *
  * **Four of the seven weekday labels are blank on purpose**: seven do not fit beside
  * a grid this dense. {@link getWeekdayLabels} returns them as they are, empties
@@ -61,8 +66,8 @@ declare class WrCalendarHeatmapHarness extends ComponentHarness {
     /**
      * Every square, from its tooltip and its grid placement.
      *
-     * The `title` is `"<iso>: <value>"`, which is the component's own format and the
-     * only text on a square — everything else about it is colour.
+     * Read from `data-date` / `data-value`, which the component writes for exactly
+     * this. Everything else about a square is colour.
      */
     getCells(): Promise<WrCalendarHeatmapCell[]>;
     /** The value a given ISO date's square reports, or `null` when that day is not drawn. */