ngwr 14.7.0 → 14.9.0

package/page-header/styles/_index.scss

@@ -62,7 +62,9 @@
   &__actions {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    // Density-aware: `touch` widens it so adjacent actions do not crowd a
+    // fingertip, `sm` tightens it. `md` resolves to the 8px it always was.
+    gap: calc(0.5rem * var(--wr-density-gap, 1));
     flex-wrap: wrap;
     flex: 0 0 auto;
 
@@ -84,6 +86,40 @@
   }
 }
 
+// The documented actions shape is ONE wrapper around the buttons —
+// `<div wrPageHeaderActions><wr-btn>…</wr-btn><wr-btn>…</wr-btn></div>` — and the
+// `gap` above spaces the region's CHILDREN, which is that wrapper alone, so the
+// buttons inside it met edge to edge (0px, measured in Chromium). A BARE wrapper
+// is laid out the way the region is, taking the region's own gap through
+// `inherit`, so both shapes — one wrapper, or the attribute on each button —
+// space the same and a density change moves them together. What BARE excludes,
+// and why:
+//
+// - A `class` or a `style`. Zero specificity alone does not keep a consumer's
+//   layout: ngwr ships unlayered CSS, and unlayered CSS beats every cascade
+//   layer whatever its specificity, so a Tailwind v4 `hidden` or `space-x-2` on
+//   the wrapper lost to this rule and a hidden wrapper came back. A wrapper with
+//   a class or a style is the consumer's, and nothing here touches it — not
+//   `display`, not `align-items`, not `flex-wrap`. An EMPTY one still counts as
+//   bare, because `class=""` / `style=""` is what a `[class.x]` / `[style.x]`
+//   binding leaves behind when it switches off, and the same state must not lay
+//   out two ways.
+// - Anything but a `div`. A button projected directly is already a child of the
+//   region and spaced by its gap, and must not become a flex container itself.
+// - `[hidden]`. An author rule outranks the user agent's
+//   `[hidden] { display: none }` at any specificity.
+//
+// The extra row is deliberately NOT given the same rule: it is where metadata
+// prose lives, and a flex row would turn the words and links of a bare `<div>`
+// into separate items. Tags go in as its children instead, through an
+// `<ng-container wrPageHeaderExtra>`, which the class JSDoc shows.
+:where(.wr-page-header__actions > div:not([hidden], [class]:not([class='']), [style]:not([style='']))) {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: inherit;
+}
+
 // Responsive headers stack the title above the actions when their own box is
 // too narrow to sit them side by side (regardless of viewport).
 @container wr-page-header (max-width: 32rem) {

package/pagination/styles/_index.scss

@@ -108,11 +108,15 @@
   &__size {
     min-width: 0;
 
-    // The 10rem floor on `.wr-select__trigger` is sized for a standalone field.
-    // Here the select only ever holds "20 / page", so the pager was reserving
-    // 160px for a ~75px label — the single widest thing in the control.
-    .wr-select__trigger {
-      min-width: 0;
+    // The select's 10rem width floor is sized for a standalone field. Here it
+    // only ever holds "20 / page", so the pager was reserving 160px for a ~75px
+    // label — the single widest thing in the control. Through the hook, since
+    // the floor lives on the select's host and a `min-width` on its trigger no
+    // longer reaches it — and compounded with `.wr-select`, which declares the
+    // default on this same element, so the override does not hang on which
+    // stylesheet loads last.
+    &.wr-select {
+      --wr-select-min-width: 0;
     }
   }
 

package/popover/styles/_index.scss

@@ -72,6 +72,46 @@
   // API, and the arrow is the pane's business rather than the chip's.
 }
 
+// The chip a chart's hover tooltip renders into (`useChartTooltip()`, used by
+// every chart but `wr-line-chart`, which draws its own). It carries `.wr-tooltip`
+// as well, so everything above is its look and the arrow below is its arrow; this
+// only lays out the inside.
+//
+// The label is told from the value by WEIGHT, not by a muted colour. The chip's
+// colours are the two `--wr-tooltip-*` hooks, and the documented way to invert
+// them makes the chip dark — a muted grey picked against the light surface would
+// be the one thing that did not follow.
+.wr-chart-tooltip {
+  display: inline-flex;
+  // Its own text's width, up to the tooltip's `max-width`, whatever room the pane has
+  // left. The CDK pushes a chip against the viewport edge by its ROUNDED width, which
+  // can leave the absolutely positioned pane a fraction of a pixel short, and the chip
+  // for the last week of a year then wrapped `Sep 19, 2026: 0` onto a second line at
+  // 375px, over two more rows of days.
+  flex-shrink: 0;
+  width: max-content;
+  align-items: center;
+  gap: 0.375rem;
+
+  &__swatch {
+    flex: 0 0 auto;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+  }
+
+  &__value {
+    font-weight: var(--wr-font-weight-semibold);
+    font-variant-numeric: tabular-nums;
+
+    // Alone, with no label or swatch beside it, the value is a whole sentence (a
+    // heatmap day's), and a sentence in semibold reads as shouting.
+    &:only-child {
+      font-weight: inherit;
+    }
+  }
+}
+
 // Arrow for both modes.
 //
 // Popover: the pane wraps whatever the author projected, so the panel selector
@@ -84,18 +124,46 @@
   $border: var(--wr-color-outline)
 );
 
-// Tooltip: a known child, and no border faces — the chip's own border colour is
-// overridable per instance through `--wr-tooltip-border`, so painting the faces
-// from the token here would desync the moment anyone retints one. The arrow
-// points AT the trigger and overlaps it, so it is the one inert piece: a
-// hittable arrow would eat clicks meant for the control the tooltip describes.
+// Tooltip: a known child, with the chip's border carried onto the arrow's outward
+// faces. Painted from the `--wr-tooltip-border` HOOK rather than the outline token:
+// the square is the chip's own pseudo-element, so a chip retinted per instance
+// retints its arrow with it. Without the faces the chip's outline stopped at the
+// arrow's base and the tip read as a notch cut out of the border. The arrow points
+// AT the trigger and overlaps it, so it is the one inert piece: a hittable arrow
+// would eat clicks meant for the control the tooltip describes.
 @include arrow.anchored-arrow(
   $pane: '.wr-tooltip-overlay',
   $panel: '.wr-tooltip',
   $background: var(--wr-tooltip-bg),
+  $border: var(--wr-tooltip-border),
   $inert: true
 );
 
+// A chart's chip keeps the edge the placement gives its arrow and moves the arrow
+// ALONG that edge, onto the section it describes. The chip is not always centred on
+// its anchor — `withPush` slides the one for a heatmap's first week along the
+// viewport edge — so `useChartTooltip()` measures where the anchor falls on the chip
+// and writes it to `--wr-chart-tooltip-arrow`, in px from the padding edge. Unset,
+// before anything is measured, it is the middle, where the rule above puts it.
+// After that rule on purpose: same specificity, so source order decides.
+.wr-tooltip-overlay--top,
+.wr-tooltip-overlay--bottom {
+  .wr-chart-tooltip::after {
+    inset-inline: auto;
+    margin-inline: 0;
+    // rtl-ok: a length measured from the chip's physical left edge in viewport pixels
+    left: calc(var(--wr-chart-tooltip-arrow, 50%) - #{arrow.$half});
+  }
+}
+
+.wr-tooltip-overlay--left,
+.wr-tooltip-overlay--right {
+  .wr-chart-tooltip::after {
+    top: calc(var(--wr-chart-tooltip-arrow, 50%) - #{arrow.$half});
+    margin-top: 0;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .wr-tooltip {
     animation: none;

package/progress/styles/_index.scss

@@ -30,6 +30,10 @@
     transition: width var(--wr-transition-base);
   }
 
+  // color-ok: the VALUE is the bar's length and its `aria-valuenow`; the intent
+  // only tints it. A host that uses `danger` to mean "failed" has to say so in
+  // words — the `ariaLabel`, the text beside the bar — because six intents
+  // share one lightness and the bar has no second channel for a status.
   @each $name in theme.$colors {
     &--#{$name} {
       --wr-progress-track: rgba(var(--wr-color-#{$name}-rgb), 0.2);

package/radio/styles/_index.scss

@@ -95,12 +95,15 @@
   }
 
   // color-ok: the cue is the glyph arriving — `.wr-radio__icon` goes from
-  // `opacity: 0` to `1` under `--checked` (line 109). This fill only backs it,
+  // `opacity: 0` to `1` in the `--checked` rule below. This fill only backs it,
   // since `--has-icon` turns the default dot off.
   &--has-icon.wr-radio--checked {
     --wr-radio-bg: var(--wr-color-primary);
   }
 
+  // color-ok: the cue is the inner dot arriving — `.wr-radio__dot::after` goes
+  // from `scale(0)` to `scale(1)` below, or the icon fades in under
+  // `--has-icon`. The ring and dot colours only back it.
   &--checked {
     --wr-radio-border: var(--wr-color-primary);
     --wr-radio-dot: var(--wr-color-primary);

package/schematics/use/symbol-map.json

@@ -79,6 +79,7 @@
   "WrDropdown": "ngwr/dropdown",
   "WrDropdownMenu": "ngwr/dropdown",
   "WrDropdownItem": "ngwr/dropdown",
+  "WrEditor": "ngwr/editor",
   "WrEmpty": "ngwr/empty",
   "WrEventCalendar": "ngwr/event-calendar",
   "WrCalendarEventTemplate": "ngwr/event-calendar",

package/select/styles/_index.scss

@@ -11,17 +11,49 @@
   --wr-select-font-size: var(--wr-control-font-size-md);
   --wr-select-line-height: var(--wr-control-line-height-md);
   // The floor that keeps a bare `<wr-select>` from collapsing to its
-  // placeholder. A hook rather than a literal because the floor is wrong as
-  // often as it is right: dropped into a `minmax(0, 1fr)` grid column the
-  // trigger holds 160px and overhangs its cell, and overriding
-  // `.wr-select__trigger` is reaching past the public contract for something
-  // the rest of the component already exposes. Set it to 0 to hand the width
-  // back to the layout.
+  // placeholder. Despite the name it is a DEFAULT width rather than a minimum:
+  // an explicit `width`, `width: 100%` in a narrow parent, a `minmax(0, 1fr)`
+  // cell and a shrinking flex item all win over it (see `::after` below). Set
+  // it to 0 to size a bare select to its content alone. This hook is the only
+  // way to lower it: a `min-width` on `.wr-select__trigger`, the override that
+  // did it before the hook existed, no longer reaches the floor.
   --wr-select-min-width: 10rem;
 
-  display: inline-flex;
+  // One column that shrinks to whatever the layout gives it and, left to size
+  // itself, grows to the widest thing in it — the trigger's content or the
+  // floor. The floor used to be a `min-width` on the trigger, which no width on
+  // the host could beat: `<wr-select size="sm" style="width: 9rem">` drew a
+  // 160px trigger in a 144px host and ran 16px into the next control, and in a
+  // 200px flex row beside a 120px sibling the select overflowed the row by
+  // 88px. `minmax(0, …)` is also what drops the trigger's text from the host's
+  // min-content, so the host shrinks as a flex item the way `[wrInput]` and
+  // `<wr-date-picker>` already do, and the label truncates instead.
+  display: inline-grid;
+  grid-template-columns: minmax(0, 1fr);
+  // The spacer below lands in a row of its own, and it must be a FIXED 0 rather
+  // than an implicit `auto` one: a grid shares height beyond its content among
+  // its auto rows, so a host stretched by a taller flex or grid row, or given a
+  // `height`, drew a 45px trigger in a 60px host with an empty band beneath it.
+  grid-template-rows: auto 0;
   vertical-align: middle;
 
+  // The floor as a zero-height spacer in the same column. A grid track's
+  // max-content is its widest item, so a host sized to its content is at least
+  // `--wr-select-min-width` wide; `max-width: 100%` is ignored while that size
+  // is being worked out and applies once the column exists, so a narrower host
+  // caps the spacer instead of the spacer stretching the host. `flex: 0 0 0`
+  // keeps it from taking room beside the trigger if a consumer turns the host
+  // into a flex container (the floor is then inert, never in the way).
+  // The template renders exactly one element into the host — the trigger — so
+  // this is the column's only other item, and the zero row is the spacer's.
+  &::after {
+    content: '';
+    flex: 0 0 0;
+    width: var(--wr-select-min-width);
+    max-width: 100%;
+    height: 0;
+  }
+
   // Sizes — share the `--wr-control-*` contract (22 / 30 / 36 px). Multi/tag
   // min-height and the search/tag inputs all read these vars, so every mode
   // tracks the size. Declared before `--rounded` so the pill modifier wins.
@@ -73,7 +105,10 @@
     align-items: center;
     gap: 0.5rem;
     width: 100%;
-    min-width: var(--wr-select-min-width);
+    // Not the floor — that lives on the host, where a width can beat it. Zero
+    // lets the trigger follow the host down and the value / placeholder
+    // ellipsis take the difference.
+    min-width: 0;
     appearance: none;
     background: var(--wr-select-bg);
     color: var(--wr-select-color);
@@ -117,7 +152,7 @@
   }
 
   &__placeholder {
-    color: var(--wr-color-text-muted);
+    color: var(--wr-color-placeholder);
   }
 
   // The selected option's leading visual on a single-mode button trigger. Never
@@ -208,7 +243,7 @@
     line-height: var(--wr-select-line-height);
 
     &::placeholder {
-      color: var(--wr-color-text-muted);
+      color: var(--wr-color-placeholder);
     }
 
     &:disabled {
@@ -228,7 +263,11 @@
 
   &__tag-input {
     flex: 1 0 6rem;
-    min-width: 4rem;
+    // Both capped by the chip row, which can now be as narrow as the host: with
+    // no 10rem trigger floor underneath, a bare 4rem minimum and an unshrinkable
+    // 6rem basis ran the field 9px past the border of a 100px tag select.
+    min-width: min(4rem, 100%);
+    max-width: 100%;
     border: 0;
     outline: 0;
     padding: 0.125rem 0.25rem;
@@ -239,7 +278,7 @@
     line-height: var(--wr-select-line-height);
 
     &::placeholder {
-      color: var(--wr-color-text-muted);
+      color: var(--wr-color-placeholder);
     }
 
     // At `maxItems` the input goes READONLY rather than disabled — it is the

package/sidebar/styles/_index.scss

@@ -1,7 +1,18 @@
 @use '../../theme/styles' as theme;
 
 .wr-sidebar {
+  // The outer inset, what `--wr-dropdown-padding` is to a menu. Every row paints
+  // its hover and active tint across the host's full width, and at 0 that tint
+  // met whatever frames the nav: the bordered card of a demo, the border of a
+  // `wr-layout-sider`, which pads nothing either. 8px on every side keeps each
+  // tint, nested rows included, off the frame in both directions, and leaves an
+  // outset focus ring room inside a sider that clips (`overflow: hidden`). Where
+  // the container already provides the inset, set it to 0 on `.wr-sidebar`, not
+  // on the container: this declaration shadows anything inherited.
+  --wr-sidebar-padding: 0.5rem;
+
   display: block;
+  padding: var(--wr-sidebar-padding);
   font-family: var(--wr-font-family-base);
   color: var(--wr-color-on-surface);
 
@@ -41,6 +52,11 @@
       }
     }
 
+    // color-ok: the resting entry paints no background, so the active one
+    // differs in LIGHTNESS as well as hue — a filled tint, 1.17:1 light and
+    // 1.12:1 dark against the surface under it, measured in the built showcase.
+    // Weak, and it is the whole cue: a top-level entry has no rail for the bar a
+    // nested `__item` draws, and `pointer-events: none` paints nothing.
     &--active {
       color: var(--wr-color-primary-ink);
       background: var(--wr-color-primary-soft);
@@ -83,6 +99,13 @@
       border: 0;
       border-radius: var(--wr-border-radius-sm);
       color: var(--wr-color-on-surface);
+      // A `<button>` inherits no type. The UA's 13.33px and `line-height: normal`
+      // made this row 33px under the 36px link beside it, and shrank the icon and
+      // the chevron, which size from `em` — so the same type as `__entry`.
+      font: inherit;
+      font-size: var(--wr-text-sm);
+      font-weight: var(--wr-font-weight-semibold);
+      line-height: 1.25rem;
       cursor: pointer;
       text-align: start;
       transition: background var(--wr-transition-base);
@@ -152,12 +175,22 @@
     border-inline-start: 1px solid var(--wr-color-outline);
   }
 
+  // The list's 6px bottom margin spaces an open group from the row after it. On
+  // the LAST group there is no such row, and the margin stacked onto the host's
+  // inset: 14px under the final nested row against 8px above the first row.
+  &__group:last-child &__list {
+    margin-block-end: 0;
+  }
+
   &__item {
     position: relative;
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    padding: 0.3125rem 0.75rem;
+    // 6px around the 20px line: a 32px row, the geometry of a dropdown item. At
+    // 5px the hover and active tint sat closer to the text than anywhere else in
+    // the nav, and a badge row came out 2px taller than its neighbours.
+    padding: 0.375rem 0.75rem;
     border-radius: var(--wr-border-radius-sm);
     color: var(--wr-color-on-surface);
     font-size: var(--wr-text-sm);
@@ -193,6 +226,11 @@
       }
     }
 
+    // color-ok: the `::before` above is transparent on every other row, so this
+    // draws a 2px bar over the group's 1px rail beside the active row — a width
+    // the rail does not have, and 4.89:1 light / 4.07:1 dark against the
+    // surface. Under `prefers-contrast: more` the rail deepens to within 1.41:1
+    // of the bar in light and 1.14:1 in dark, and the width is what is left.
     &--active {
       color: var(--wr-color-primary-ink);
       background: var(--wr-color-primary-soft);
@@ -223,7 +261,10 @@
 
   &__badge {
     flex: 0 0 auto;
-    padding: 0.0625rem 0.375rem;
+    // 16px line plus 2px either side is the row's own 20px line box, so a badge
+    // never makes its row taller: it inherited the row's 20px line and came out
+    // 22px, which grew `__entry` from 36px to 38px and `__item` by the same 2px.
+    padding: 0.125rem 0.375rem;
     // The row's corner, not a pill: the badge sits inside `__entry` / `__item`,
     // which both read `--wr-border-radius-sm`, and a stadium nested in a 6px row
     // reads as a foreign shape rather than a part of it.
@@ -232,6 +273,7 @@
     color: var(--wr-color-on-surface-muted);
     font-size: var(--wr-text-xs);
     font-weight: var(--wr-font-weight-semibold);
+    line-height: 1rem;
     text-transform: uppercase;
     letter-spacing: var(--wr-tracking-wide);
   }

package/skeleton/styles/_index.scss

@@ -30,6 +30,9 @@
   // Tint strength: 12.5% reads as "nothing" on a white card — the
   // placeholder has to be obviously present, so the base sits at 50%
   // with the shimmer band sweeping visibly above it.
+  // color-ok: decoration — a skeleton is a placeholder, announced through
+  // `aria-busy`, and its default is the neutral `light`; an intent only matches
+  // it to the content about to load.
   @each $name in theme.$colors {
     &--#{$name} {
       background: rgba(var(--wr-color-#{$name}-rgb), 0.5);

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: 227 tree-shakable entry points, 113 of them shipping a selector.
+An Angular 22 UI library: 229 tree-shakable entry points, 114 of them shipping a selector.
 Standalone, signals-first, zoneless, `ViewEncapsulation.None`. One runtime
 dependency (`tslib`).
 
@@ -20,8 +20,8 @@ reaching for:
    export per entry point.
 3. Any docs page as markdown: append `.md` to the URL, e.g.
    `https://ngwr.dev/reference/components/select.md`.
-4. `npx ngwr-mcp` — the bundled MCP server, when the agent speaks MCP:
-   `search_ngwr`, `get_ngwr_component`, `get_ngwr_api`, `get_ngwr_setup`.
+4. `npx -y -p ngwr ngwr-mcp` — the bundled MCP server, when the agent speaks
+   MCP: `search_ngwr`, `get_ngwr_component`, `get_ngwr_api`, `get_ngwr_setup`.
 
 Exact input / output signatures are in the shipped `.d.ts` files. Do not invent
 an input name; read one.
@@ -89,8 +89,8 @@ Each of these compiles fine and then does nothing, with no error naming the
 cause.
 
 - `provideWrOverlay() // from 'ngwr/overlay'`
-  — overlays render into an ngwr-owned container; without it they never appear
-  — needed by: `WrDialog`, `WrDrawer`, `WrToast`, `WrPopover`, `WrPopconfirm`, `WrContextMenu`, `WrSelect`, `WrDropdown`, `WrCommandPalette`, `WrCascader`, `WrMention`, `WrDatePicker`, `WrTour`, `WrLightbox`
+  — gives ngwr overlays their own container, so they never collide with other CDK overlays
+  — needed by: `WrDialog`, `WrDrawer`, `WrToast`, `WrPopover`, `WrPopconfirm`, `WrContextMenu`, `WrSelect`, `WrDropdown`, `WrCommandPalette`, `WrCascader`, `WrMention`, `WrDatePicker`, `WrTour`, `WrLightbox`, `WrEditor`
 - `provideWrIcons(lucideIcons({ … })) // from 'ngwr/icon' + 'ngwr/icon/adapters/lucide'`
   — icons resolve by name from a registry you populate
   — needed by: `WrIcon`

package/skills/ngwr/references/catalog.md

@@ -72,6 +72,8 @@ root barrel for components.
 | `ngwr/drawer/testing` | `import { WrDrawerHarness } from 'ngwr/drawer/testing'` | — |
 | `ngwr/dropdown` | `import { WrDropdown } from 'ngwr/dropdown'` | `wr-dropdown-item` `wr-dropdown-menu` `[wrDropdown]` |
 | `ngwr/dropdown/testing` | `import { WrDropdownHarness } from 'ngwr/dropdown/testing'` | — |
+| `ngwr/editor` | `import { WrEditor } from 'ngwr/editor'` | `wr-editor` |
+| `ngwr/editor/testing` | `import { WrEditorHarness } from 'ngwr/editor/testing'` | — |
 | `ngwr/empty` | `import { WrEmpty } from 'ngwr/empty'` | `wr-empty` |
 | `ngwr/event-calendar` | `import { WrEventCalendar } from 'ngwr/event-calendar'` | `ng-template[wrCalendarEvent]` `wr-event-calendar` |
 | `ngwr/event-calendar/testing` | `import { WrEventCalendarChipHarness } from 'ngwr/event-calendar/testing'` | — |

package/skills/ngwr/references/setup.md

@@ -46,7 +46,7 @@ points that ship no stylesheet (the `/testing` harnesses, `ngwr/utils`) have no
 
 ### `provideWrOverlay() // from 'ngwr/overlay'`
 
-Overlays render into an ngwr-owned container; without it they never appear. Needed by `WrDialog`, `WrDrawer`, `WrToast`, `WrPopover`, `WrPopconfirm`, `WrContextMenu`, `WrSelect`, `WrDropdown`, `WrCommandPalette`, `WrCascader`, `WrMention`, `WrDatePicker`, `WrTour`, `WrLightbox`.
+Gives ngwr overlays their own container, so they never collide with other CDK overlays. Needed by `WrDialog`, `WrDrawer`, `WrToast`, `WrPopover`, `WrPopconfirm`, `WrContextMenu`, `WrSelect`, `WrDropdown`, `WrCommandPalette`, `WrCascader`, `WrMention`, `WrDatePicker`, `WrTour`, `WrLightbox`, `WrEditor`.
 
 ### `provideWrIcons(lucideIcons({ … })) // from 'ngwr/icon' + 'ngwr/icon/adapters/lucide'`
 
@@ -69,9 +69,9 @@ The pipe and directive read from a catalog you provide. Register ngwr's with `pr
 - `provideWrConfig({ button: { size: 'sm' } })` — component defaults. A bound
   value always wins, including a bound `false` over a configured `true`.
 - `provideWrDensity({ defaultDensity: 'sm' })` — one control size for the whole
-  app; `'sm' | 'md' | 'lg' | 'touch'`. It scales the paddings of the nine
+  app; `'sm' | 'md' | 'lg' | 'touch'`. It scales the paddings of the ten
   stylesheets that read the multipliers — button, input, textarea, select,
-  cascader, tree, list, table, badge/tag — so `touch` grows those together. A
+  cascader, tree, list, table, badge/tag, editor — so `touch` grows those together. A
   control with fixed geometry (checkbox, switch, radio, slider, rating,
   segmented) does not move; its ≥44px target comes from the `touch-target` mixin
   under `@media (pointer: coarse)` instead.

package/sparkline/styles/_index.scss

@@ -1,9 +1,28 @@
+@use '../../popover/styles'; // the `.wr-tooltip` chip the hover tooltip renders into
+
 .wr-sparkline {
   display: inline-block;
+  // The hover marker is placed in percentages of this box, which is the drawing's.
+  position: relative;
   line-height: 0;
 
   svg {
     display: block;
     overflow: visible;
   }
+
+  // The point the hover tooltip is reading. Placed by the component in SVG
+  // coordinates, which do not flip with `direction`, and never hittable: it sits
+  // under the pointer, and taking the `mousemove` would lose the line.
+  &__marker {
+    position: absolute;
+    width: 0.5rem;
+    height: 0.5rem;
+    border: 2px solid var(--wr-color-surface);
+    border-radius: 50%;
+    box-sizing: content-box;
+    // rtl-ok: SVG coordinates, see above
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
 }

package/styles.scss

@@ -54,6 +54,7 @@
 @forward './event-calendar/styles';
 @forward './drawer/styles';
 @forward './dropdown/styles';
+@forward './editor/styles';
 @forward './empty/styles';
 @forward './falling-text/styles';
 @forward './file-upload/styles';

package/table/styles/_index.scss

@@ -900,6 +900,13 @@
     color: var(--wr-color-on-surface);
     font: inherit;
     font-size: var(--wr-text-sm);
+
+    // Written, where it used to be left to the browser: Chromium's own #757575
+    // is one grey for both themes, 4.60:1 on white and 4.08:1 on the dark
+    // canvas, and it was the one placeholder in the catalog no token reached.
+    &::placeholder {
+      color: var(--wr-color-placeholder);
+    }
   }
 
   &__list {

package/textarea/styles/_index.scss

@@ -6,7 +6,9 @@
 
   // Defaults
   --wr-textarea-color: var(--wr-color-on-surface);
-  --wr-textarea-placeholder: rgba(var(--wr-color-on-surface-muted-rgb), 0.7);
+  // The placeholder role — the same 0.7 alpha `[wrInput]` carried, at the same
+  // 2.91:1, until both moved onto the theme's one placeholder token.
+  --wr-textarea-placeholder: var(--wr-color-placeholder);
   --wr-textarea-bg: var(--wr-color-surface);
   --wr-textarea-border: var(--wr-color-outline);
   --wr-textarea-radius: var(--wr-control-radius-md);
@@ -107,7 +109,10 @@
     // 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.
+    // dark (8.16 / 8.30 under `prefers-contrast: more`), and the surface is the
+    // only ground it is drawn on: `--disabled` is the one state that repaints the
+    // field, and `showHandle()` hides the grip there. 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);
@@ -134,8 +139,12 @@
       height: 0.875rem;
     }
 
+    // One step up from rest. This repeated the rest colour from the day the rest
+    // moved off the faint tier, so hovering the grip changed nothing on screen;
+    // `-on-surface` is the next role up, 17.85:1 light and 15.73:1 dark against
+    // the 5.35 and 7.64 at rest.
     &:hover {
-      color: var(--wr-color-on-surface-muted);
+      color: var(--wr-color-on-surface);
     }
   }
 }