ngwr 15.0.1 → 15.2.0

package/charts/line-chart/styles/_index.scss

@@ -1,13 +1,29 @@
 @use '../../../theme/styles' as theme;
 
+// Styles for the entry points this component's own markup renders. The legend is a
+// `ul[wr-chart-legend]`, so `@use 'ngwr/charts/line-chart'` alone draws it styled.
+@use '../../chart-legend/styles' as chart-legend-styles; // WrChartLegend
+// With `dataTable`, the figures render as a `<wr-chart-table>` beside the plot, which
+// its own sheet clips out of sight.
+@use '../../core/styles' as core-styles; // WrChartTable
+
 .wr-line-chart {
   --wr-line-chart-font-family: var(--wr-font-family-base);
+  --wr-line-chart-color: var(--wr-color-on-surface);
+  // The horizontal gridlines, as faint as every chart's; the hover crosshair, and the
+  // centre of the ring round each marker it reads.
+  --wr-line-chart-grid-color: color-mix(in srgb, var(--wr-border-base) 70%, transparent);
+  --wr-line-chart-crosshair-color: var(--wr-color-on-surface-muted);
+  --wr-line-chart-hover-center: var(--wr-color-surface);
   // The room round the drawing inside the plot, which the dots and the hover ring
   // overhang into: the drawing runs edge to edge, so a point at either end is drawn
   // half outside it. The y labels read the block one to meet the gridlines, the x labels
   // and the tooltip the inline one to meet the points.
   --wr-line-chart-plot-inset-x: var(--wr-space-md);
   --wr-line-chart-plot-inset-y: var(--wr-space-sm);
+  // How much of its series' colour a `showArea` fill takes: faint enough that the
+  // gridlines and every other series' line read through where fills overlap.
+  --wr-line-chart-area-opacity: 0.15;
 
   // Where a point is, for the x labels and the tooltip. Both sit in a box as wide as the
   // plot — the drawing plus its inline padding — and are handed the point's x as a
@@ -20,10 +36,27 @@
   $point: calc($inset + (100% - 2 * $inset) * $x / 100);
   $room-start: calc($inset + (100cqw - 2 * $inset) * $x / 100);
   $room-end: calc($inset + (100cqw - 2 * $inset) * (100 - $x) / 100);
+  // How far a readout beside the crosshair keeps from it: the hover marker's 6px radius
+  // and as much again. The component's `BESIDE`, which it places the readout by.
+  $beside: 12px;
 
   display: block;
+  // The containing block of the `dataTable` copy, which is out of flow and sits beside
+  // the plot rather than inside it. With a static host that box resolved against the
+  // nearest positioned ancestor outside the chart, often the page, and inside an
+  // unpositioned scroller the 1px box kept its place in the scrolled content: measured
+  // in Chromium, a chart 2000px down a 300px scroller grew the page from 600px to
+  // 2241px of blank scroll. No z-index, so no stacking context; the tooltip already
+  // resolves against the plot.
+  position: relative;
   font-family: var(--wr-line-chart-font-family);
-  color: var(--wr-color-on-surface);
+  color: var(--wr-line-chart-color);
+
+  // A stacked chart's bands meet without overlapping, so each fill can carry twice the
+  // colour and still hide nothing.
+  &--stacked {
+    --wr-line-chart-area-opacity: 0.3;
+  }
 
   &__legend {
     --wr-line-chart-legend-margin-bottom: var(--wr-space-md);
@@ -41,11 +74,17 @@
   &__legend-item {
     --wr-line-chart-legend-item-gap: var(--wr-space-sm);
     --wr-line-chart-legend-item-font-size: var(--wr-text-xs);
+    // A toggleable row's button lays out the key and the name itself, from the shared
+    // legend's own hook, so that hook follows this one.
+    --wr-chart-legend-item-gap: var(--wr-line-chart-legend-item-gap);
 
     display: inline-flex;
     align-items: center;
     gap: var(--wr-line-chart-legend-item-gap);
     font-size: var(--wr-line-chart-legend-item-font-size);
+    // The chart's own colour, as before the shared legend, which paints its rows
+    // `--wr-chart-legend-color`.
+    color: inherit;
   }
 
   // A short line rather than a dot, because it now carries the series' dash
@@ -62,7 +101,8 @@
 
   // The y labels at inline start, the plot beside them, and the x labels under the plot
   // alone. A grid follows `direction`, so the gutter is on the right under RTL with no
-  // rule of its own; the drawing itself does not mirror, as it never has.
+  // rule of its own; the drawing itself keeps time running left to right, as every SVG
+  // chart here does — the HTML layouts (bar, bullet, treemap) are the ones that mirror.
   &__body {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr);
@@ -98,12 +138,17 @@
 
   // `top` in percent is the grid area's height — the cell is the containing block — and
   // relative positioning leaves the label's place in flow, so the column keeps its width.
+  // Shrunk to its text against the plot's side of the column, so its own direction can
+  // follow its text (`plaintext`): a negative tick is a `-` in front of digits, neither of
+  // which has a direction, and under RTL the sign would land on the far side — `350-`.
   &__tick {
     $inset: var(--wr-line-chart-plot-inset-y);
 
     grid-area: 1 / 1;
     align-self: start;
+    justify-self: end;
     position: relative;
+    unicode-bidi: plaintext;
     top: calc($inset + (100% - 2 * $inset) * var(--wr-line-chart-y, 0) / 100);
     transform: translateY(-50%);
   }
@@ -115,6 +160,25 @@
     padding: var(--wr-line-chart-plot-inset-y) var(--wr-line-chart-plot-inset-x);
   }
 
+  // The colour is the series', an attribute of the path; only its share is the hook's.
+  // A fill keeps it under forced colors, as the lines keep their strokes, and it stays
+  // under every line, so a reader who cannot tell the fills apart still has the dashes.
+  &__area {
+    fill-opacity: var(--wr-line-chart-area-opacity);
+  }
+
+  &__grid-line {
+    stroke: var(--wr-line-chart-grid-color);
+  }
+
+  &__crosshair {
+    stroke: var(--wr-line-chart-crosshair-color);
+  }
+
+  &__hover-dot-center {
+    stroke: var(--wr-line-chart-hover-center);
+  }
+
   // The plot's drawing by its class, never a bare `svg`: the legend swatch is an
   // `<svg>` too, and `.wr-line-chart svg` (0,1,1) outranks `&__swatch` (0,1,0), so
   // the 1rem × 0.125rem dash stretched to the legend row — measured in Chromium at
@@ -148,6 +212,8 @@
     --wr-line-chart-tooltip-padding-y: var(--wr-space-sm);
     --wr-line-chart-tooltip-padding-x: var(--wr-space-md);
     --wr-line-chart-tooltip-font-size: var(--wr-text-xs);
+    --wr-line-chart-tooltip-bg: var(--wr-color-surface);
+    --wr-line-chart-tooltip-shadow: var(--wr-shadow-sm);
 
     position: absolute;
     // rtl-ok: the SVG's own x, and SVG coordinates do not flip with `direction`
@@ -162,10 +228,10 @@
     // any that does not.
     // rtl-ok: the SVG's own x, and SVG coordinates do not flip with `direction`
     transform: translate(clamp(calc(-1 * $room-start), -50%, calc($room-end - 100%)), 0.5rem);
-    background: var(--wr-color-surface);
+    background: var(--wr-line-chart-tooltip-bg);
     border: 1px solid var(--wr-line-chart-tooltip-border);
     border-radius: var(--wr-line-chart-tooltip-radius);
-    box-shadow: var(--wr-shadow-sm);
+    box-shadow: var(--wr-line-chart-tooltip-shadow);
     padding: var(--wr-line-chart-tooltip-padding-y) var(--wr-line-chart-tooltip-padding-x);
     font-size: var(--wr-line-chart-tooltip-font-size);
     pointer-events: none;
@@ -173,6 +239,29 @@
     min-width: 6rem;
   }
 
+  // Where the top would cover a marker the readout reads, which the component works out
+  // from its size: at the bottom of the plot, as far inside it as the top one sits, or —
+  // where the bottom would too — at the top beside the crosshair, every marker being on
+  // it, `$beside` off it on the side with more room and still never past either end. At
+  // the top always, it hid every reading in the plot's upper band under the chip that gave
+  // its value — a third of the rings on the docs' own demos.
+  &__tooltip--below {
+    top: auto;
+    bottom: var(--wr-line-chart-plot-inset-y);
+    // rtl-ok: the SVG's own x, and SVG coordinates do not flip with `direction`
+    transform: translate(clamp(calc(-1 * $room-start), -50%, calc($room-end - 100%)), -0.5rem);
+  }
+
+  &__tooltip--left {
+    // rtl-ok: the SVG's own x, and SVG coordinates do not flip with `direction`
+    transform: translate(clamp(calc(-1 * $room-start), calc(-100% - $beside), calc($room-end - 100%)), 0.5rem);
+  }
+
+  &__tooltip--right {
+    // rtl-ok: the SVG's own x, and SVG coordinates do not flip with `direction`
+    transform: translate(clamp(calc(-1 * $room-start), $beside, calc($room-end - 100%)), 0.5rem);
+  }
+
   &__tooltip-label {
     --wr-line-chart-tooltip-label-font-weight: var(--wr-font-weight-semibold);
     --wr-line-chart-tooltip-label-margin-bottom: var(--wr-space-xs);
@@ -191,29 +280,38 @@
   }
 
   &__tooltip-name {
+    --wr-line-chart-tooltip-name-color: var(--wr-color-on-surface-muted);
+
     flex: 1 1 auto;
-    color: var(--wr-color-on-surface-muted);
+    color: var(--wr-line-chart-tooltip-name-color);
   }
 
   &__tooltip-value {
     --wr-line-chart-tooltip-value-font-weight: var(--wr-font-weight-semibold);
 
     font-weight: var(--wr-line-chart-tooltip-value-font-weight);
+    // As a tick: the sign of `-350` stays before the digits on an RTL page.
+    unicode-bidi: plaintext;
   }
 
   &__x-labels {
     --wr-line-chart-x-labels-margin-top: var(--wr-space-xs);
     --wr-line-chart-x-labels-font-size: var(--wr-text-xs);
+    --wr-line-chart-x-labels-line-height: var(--wr-text-xs-leading);
+    --wr-line-chart-x-labels-color: var(--wr-color-on-surface-muted);
 
     grid-column: 2;
     grid-row: 2;
     position: relative;
     margin-top: var(--wr-line-chart-x-labels-margin-top);
     font-size: var(--wr-line-chart-x-labels-font-size);
+    line-height: var(--wr-line-chart-x-labels-line-height);
     // The labels are absolutely positioned onto their points, so the strip has no
     // content of its own to give it a height. Without this it collapses and the
-    // labels overlap whatever the page puts under the chart.
-    height: 1.25em;
+    // labels overlap whatever the page puts under the chart. One line of the labels' own
+    // leading: `1.25em` with the page's line-height left each label's box hanging 6px
+    // below the chart's, over whatever came next.
+    height: 1lh;
     // A `translateX` percentage means the LABEL's own width, so the room left beside it
     // has to arrive in another unit — `cqw` is this strip's. Every label is out of flow,
     // so the strip contributes no intrinsic width either way and the containment this
@@ -245,7 +343,42 @@
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: inherit;
-    color: var(--wr-color-on-surface-muted);
+    color: var(--wr-line-chart-x-labels-color);
     white-space: nowrap;
+    // A label is the host's own text, in whatever language: it takes its direction from
+    // that text. Its box is as wide as its text, so where it sits does not move.
+    unicode-bidi: plaintext;
+  }
+
+  // Every label once, a line each, laid out and never seen: the component measures the
+  // widest off it to decide how many labels print. Never wider than the strip, which is
+  // the most room a label could have, and clipped there, so a long one adds no overflow.
+  &__x-probe {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    width: max-content;
+    max-width: 100%;
+    overflow: hidden;
+    visibility: hidden;
+    white-space: pre;
+    pointer-events: none;
+  }
+}
+
+// Forced colors keeps the SVG strokes as written, so the strokes written in theme colours
+// would keep colours the forced palette no longer has: the gridlines would all but vanish
+// on a dark canvas, and the hovered marker's centre would be a disc of the old page.
+@media (forced-colors: active) {
+  .wr-line-chart__grid-line {
+    stroke: GrayText;
+  }
+
+  .wr-line-chart__crosshair {
+    stroke: CanvasText;
+  }
+
+  .wr-line-chart__hover-dot-center {
+    stroke: Canvas;
   }
 }

package/charts/meter-group/styles/_index.scss

@@ -1,20 +1,34 @@
 @use '../../../theme/styles' as theme;
 @use '../../../popover/styles'; // the `.wr-tooltip` chip the hover tooltip renders into
 
+// Styles for the entry points this component's own markup renders. The legend is a
+// `ul[wr-chart-legend]`, so `@use 'ngwr/charts/meter-group'` alone draws it styled.
+@use '../../chart-legend/styles' as chart-legend-styles; // WrChartLegend
+
 .wr-meter-group {
+  --wr-meter-group-gap: var(--wr-space-sm);
+  --wr-meter-group-font-family: var(--wr-font-family-base);
+  --wr-meter-group-color: var(--wr-color-on-surface);
+  --wr-meter-group-bar-height: 0.625rem;
+  --wr-meter-group-bar-radius: var(--wr-border-radius-pill);
+  // The part of the scale nothing fills, and the gap laid between two slices in it.
+  --wr-meter-group-track-bg: var(--wr-color-fill-strong);
+  --wr-meter-group-slice-gap: calc(var(--wr-space-xs) / 2);
+  --wr-meter-group-legend-value-color: var(--wr-color-on-surface-muted);
+
   display: flex;
   flex-direction: column;
-  gap: var(--wr-space-sm);
-  font-family: var(--wr-font-family-base);
-  color: var(--wr-color-on-surface);
+  gap: var(--wr-meter-group-gap);
+  font-family: var(--wr-meter-group-font-family);
+  color: var(--wr-meter-group-color);
 
   &__bar {
     display: flex;
     width: 100%;
-    height: 0.625rem;
-    border-radius: var(--wr-border-radius-pill);
+    height: var(--wr-meter-group-bar-height);
+    border-radius: var(--wr-meter-group-bar-radius);
     overflow: hidden;
-    background: var(--wr-color-fill-strong);
+    background: var(--wr-meter-group-track-bg);
 
     // Forced colors paints the track `Canvas`, the page itself, so the part of
     // the scale nothing fills needs an edge to be read against.
@@ -37,24 +51,39 @@
     // so every boundary sits at its exact share; it is painted after every slice, so it
     // covers the next one rather than hiding under it, as a spread shadow would; and a
     // zero slice's outline is the one gap where its two neighbours meet.
-    outline: calc(var(--wr-space-xs) / 2) solid var(--wr-color-fill-strong);
+    outline: var(--wr-meter-group-slice-gap) solid var(--wr-meter-group-track-bg);
+
+    // The width follows a toggled legend row as well as new data, so every press would
+    // tween the whole bar. Under reduced motion it lands at once.
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   &__legend {
+    --wr-meter-group-legend-gap-y: var(--wr-space-sm);
+    --wr-meter-group-legend-gap-x: var(--wr-space-lg);
+
     list-style: none;
     margin: 0;
     padding: 0;
     display: flex;
     flex-wrap: wrap;
-    gap: var(--wr-space-sm) var(--wr-space-lg);
+    gap: var(--wr-meter-group-legend-gap-y) var(--wr-meter-group-legend-gap-x);
   }
 
   &__legend-item {
+    --wr-meter-group-legend-item-gap: var(--wr-space-sm);
+    --wr-meter-group-legend-item-font-size: var(--wr-text-xs);
+    // A toggleable row's button lays out the key, the name and the value itself, from the
+    // shared legend's own hook, so that hook follows this one.
+    --wr-chart-legend-item-gap: var(--wr-meter-group-legend-item-gap);
+
     display: inline-flex;
     align-items: center;
-    gap: var(--wr-space-sm);
-    font-size: var(--wr-text-xs);
-    color: var(--wr-color-on-surface);
+    gap: var(--wr-meter-group-legend-item-gap);
+    font-size: var(--wr-meter-group-legend-item-font-size);
+    color: var(--wr-meter-group-color);
   }
 
   &__swatch {
@@ -67,11 +96,13 @@
   }
 
   &__legend-label {
-    font-weight: var(--wr-font-weight-medium);
+    --wr-meter-group-legend-label-font-weight: var(--wr-font-weight-medium);
+
+    font-weight: var(--wr-meter-group-legend-label-font-weight);
   }
 
   &__legend-value {
-    color: var(--wr-color-on-surface-muted);
+    color: var(--wr-meter-group-legend-value-color);
     font-variant-numeric: tabular-nums;
   }
 }

package/charts/radar-chart/styles/_index.scss

@@ -0,0 +1,206 @@
+@use '../../../theme/styles' as theme;
+@use '../../../popover/styles'; // the `.wr-tooltip` chip the hover tooltip renders into
+
+// Styles for the entry points this component's own markup renders. The legend is a
+// `ul[wr-chart-legend]`, so `@use 'ngwr/charts/radar-chart'` alone draws it styled.
+@use '../../chart-legend/styles' as chart-legend-styles; // WrChartLegend
+// With `dataTable`, the figures render as a `<wr-chart-table>` beside the drawing, which
+// its own sheet clips out of sight.
+@use '../../core/styles' as core-styles; // WrChartTable
+
+.wr-radar-chart {
+  --wr-radar-chart-font-family: var(--wr-font-family-base);
+  --wr-radar-chart-color: var(--wr-color-on-surface);
+  --wr-radar-chart-gap: var(--wr-space-lg);
+  // The axis names. They sit outside the outer ring, so the drawing has a gutter round it
+  // as wide as a name may run beside it and as tall as one line above and below it; a
+  // name longer than its room is ellipsised, and the tooltip and the data table carry it
+  // whole.
+  --wr-radar-chart-label-font-size: var(--wr-text-xs);
+  --wr-radar-chart-label-line-height: var(--wr-text-xs-leading);
+  --wr-radar-chart-label-color: var(--wr-color-on-surface);
+  // Far enough out that the name at twelve o'clock clears the outer ring's value, which
+  // sits half a line above that ring beside the same spoke.
+  --wr-radar-chart-label-gap: var(--wr-space-sm);
+  --wr-radar-chart-label-max-width: 10rem;
+  --wr-radar-chart-gutter-x: 5rem;
+  --wr-radar-chart-gutter-y: calc(var(--wr-radar-chart-label-line-height) + var(--wr-radar-chart-label-gap));
+  // The ring values beside the first axis, muted as every axis' ticks are, with a halo of
+  // the surface round each glyph: the first axis carries every series' first value, so an
+  // outline leaving it crosses the values more often than not, and the halo keeps a number
+  // readable where a line runs behind it while the line still shows round it. A chip with
+  // a wash of the surface veiled the outlines under it instead, and on a phone took a
+  // large part of a quadrant.
+  --wr-radar-chart-ring-label-color: var(--wr-color-on-surface-muted);
+  --wr-radar-chart-ring-label-halo: var(--wr-color-surface);
+  --wr-radar-chart-ring-label-offset: var(--wr-space-sm);
+  // The web, as faint as the line chart's gridlines.
+  --wr-radar-chart-grid-color: color-mix(in srgb, var(--wr-border-base) 70%, transparent);
+  --wr-radar-chart-grid-width: 1px;
+  // The series: an outline, a faint fill under it, and a dot at every value. In pixels,
+  // whatever the drawing's size, since every stroke here does not scale.
+  --wr-radar-chart-line-width: 2px;
+  --wr-radar-chart-area-opacity: 0.15;
+  --wr-radar-chart-dot-size: 6px;
+  // What the open tooltip marks: its axis' spoke, and a ring round each value on it.
+  --wr-radar-chart-crosshair-color: var(--wr-color-on-surface-muted);
+  --wr-radar-chart-hover-center: var(--wr-color-surface);
+
+  display: inline-flex;
+  // The containing block of the out-of-flow `dataTable` copy, as on the line chart: a
+  // static host lets that 1px box resolve against an ancestor outside the chart and keep
+  // its place in an unpositioned scroller's content. No z-index, so no stacking context.
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--wr-radar-chart-gap);
+  max-width: 100%;
+  font-family: var(--wr-radar-chart-font-family);
+  color: var(--wr-radar-chart-color);
+
+  // As wide as the drawing — the inline width is `size` — with the gutter as its padding,
+  // and never wider than the chart leaves it, so on a phone the drawing shrinks rather
+  // than the page scrolling sideways.
+  &__surface {
+    position: relative;
+    box-sizing: content-box;
+    max-width: calc(100% - 2 * var(--wr-radar-chart-gutter-x));
+    padding: var(--wr-radar-chart-gutter-y) var(--wr-radar-chart-gutter-x);
+  }
+
+  // The drawing by its class, never a bare `svg`: the legend's keys are `<svg>`s too.
+  // Overflow is visible because the outer ring is the drawing's edge, so a dot on it is
+  // drawn half outside.
+  &__svg {
+    display: block;
+    width: 100%;
+    height: auto;
+    overflow: visible;
+  }
+
+  &__ring,
+  &__spoke {
+    stroke: var(--wr-radar-chart-grid-color);
+    stroke-width: var(--wr-radar-chart-grid-width);
+  }
+
+  &__area {
+    fill-opacity: var(--wr-radar-chart-area-opacity);
+  }
+
+  &__line {
+    stroke-width: var(--wr-radar-chart-line-width);
+  }
+
+  &__dot {
+    stroke-width: var(--wr-radar-chart-dot-size);
+  }
+
+  &__crosshair {
+    stroke: var(--wr-radar-chart-crosshair-color);
+    stroke-width: 1px;
+    stroke-dasharray: 3 3;
+  }
+
+  &__hover-dot {
+    stroke-width: calc(var(--wr-radar-chart-dot-size) * 2);
+  }
+
+  &__hover-dot-center {
+    stroke: var(--wr-radar-chart-hover-center);
+    stroke-width: calc(var(--wr-radar-chart-dot-size) * 4 / 3);
+  }
+
+  // Both layers cover the drawing exactly, so a label's percentages are the drawing's.
+  // Never hittable: the drawing under them hears the pointer.
+  &__ring-labels,
+  &__axis-labels {
+    position: absolute;
+    inset: var(--wr-radar-chart-gutter-y) var(--wr-radar-chart-gutter-x);
+    pointer-events: none;
+    font-size: var(--wr-radar-chart-label-font-size);
+    line-height: var(--wr-radar-chart-label-line-height);
+  }
+
+  // Beside the first axis, just past its spoke and level with its ring, so a value reads
+  // against the line it names. Past the spoke rather than on it, because the first
+  // axis' dots are on the spoke and a value laid over one would hide it. `top` in
+  // percent is the layer's height, which is the drawing's. A fitted scale can run below
+  // zero, and a value has no strong character of its own, so `plaintext` keeps the sign
+  // of `-20` before its digits on an RTL page.
+  &__ring-label {
+    position: absolute;
+    // rtl-ok: beside the first axis' spoke, which the drawing does not mirror
+    left: 50%;
+    top: calc(var(--wr-radar-chart-y, 0) * 1%);
+    transform: translate(var(--wr-radar-chart-ring-label-offset), -50%);
+    color: var(--wr-radar-chart-ring-label-color);
+    text-shadow:
+      0 0 2px var(--wr-radar-chart-ring-label-halo),
+      0 0 2px var(--wr-radar-chart-ring-label-halo),
+      0 0 1px var(--wr-radar-chart-ring-label-halo);
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+    unicode-bidi: plaintext;
+  }
+
+  // Each name starts a gap out from the end of its spoke, along the spoke, and is aligned
+  // AWAY from the centre by how far its spoke leans: the shift is `(cos - 1) / 2` of its
+  // own width and `(sin - 1) / 2` of its height, so a name at three o'clock starts at its
+  // point, one at nine ends there, and one at twelve or six is centred on it — and every
+  // spoke between leans the same way the name does.
+  //
+  // Its width is bounded by the room on the side it grows towards: the drawing's share
+  // beyond its point plus the gutter, divided by the share of its width that lies on that
+  // side. One `max-width` for every quadrant, where per-quadrant rules would have to agree
+  // at their borders. jsdom has no layout, so no spec holds the arithmetic — the spec pins
+  // the four numbers the template hands this rule instead.
+  &__axis-label {
+    $x: var(--wr-radar-chart-x, 50);
+    $y: var(--wr-radar-chart-y, 50);
+    $cos: var(--wr-radar-chart-cos, 0);
+    $sin: var(--wr-radar-chart-sin, 0);
+    $gap: var(--wr-radar-chart-label-gap);
+    $gutter: var(--wr-radar-chart-gutter-x);
+
+    position: absolute;
+    // rtl-ok: the end of the axis' spoke, which does not mirror with `direction`
+    left: calc($x * 1% + $cos * $gap);
+    top: calc($y * 1% + $sin * $gap);
+    transform: translate(calc(($cos - 1) * 50%), calc(($sin - 1) * 50%));
+    max-width: min(
+      var(--wr-radar-chart-label-max-width),
+      calc(($x * 1% + $gutter + $cos * $gap) / max(0.001, (1 - $cos) / 2)),
+      calc(((100 - $x) * 1% + $gutter - $cos * $gap) / max(0.001, (1 + $cos) / 2))
+    );
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--wr-radar-chart-label-color);
+    // A name is the host's own text, in whatever language: it takes its direction from
+    // that text. Its box is as wide as its text, so where it sits does not move.
+    unicode-bidi: plaintext;
+  }
+
+  &__legend {
+    justify-content: center;
+  }
+}
+
+// Forced colors keeps the SVG strokes as written, so the strokes written in theme colours
+// would keep colours the forced palette no longer has: the web would vanish on a dark
+// canvas, and the hovered dot's surface-coloured centre would be a disc of the old page.
+@media (forced-colors: active) {
+  .wr-radar-chart__ring,
+  .wr-radar-chart__spoke {
+    stroke: GrayText;
+  }
+
+  .wr-radar-chart__crosshair {
+    stroke: CanvasText;
+  }
+
+  .wr-radar-chart__hover-dot-center {
+    stroke: Canvas;
+  }
+}