ngwr 15.0.1 → 15.2.0

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

@@ -0,0 +1,297 @@
+@use '../../../theme/styles' as theme;
+@use '../../../popover/styles' as popover-styles; // the `.wr-tooltip` chip the hover tooltip renders into
+
+// Styles for the entry points this component's own markup renders. 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-boxplot-chart {
+  --wr-boxplot-chart-font-family: var(--wr-font-family-base);
+  --wr-boxplot-chart-color: var(--wr-color-on-surface);
+  // The room round the drawing inside the plot. The groups sit in equal slots across
+  // the drawing, so nothing overhangs its sides; an outlier on the frame overhangs the
+  // top or the bottom by half its dot.
+  --wr-boxplot-chart-plot-inset-x: var(--wr-space-sm);
+  --wr-boxplot-chart-plot-inset-y: var(--wr-space-sm);
+  --wr-boxplot-chart-grid-color: color-mix(in srgb, var(--wr-border-base) 70%, transparent);
+  --wr-boxplot-chart-tick-gap: var(--wr-space-xs);
+  --wr-boxplot-chart-tick-font-size: var(--wr-text-xs);
+  --wr-boxplot-chart-tick-line-height: var(--wr-text-xs-leading);
+  --wr-boxplot-chart-tick-color: var(--wr-color-on-surface-muted);
+  // The group names under the drawing: what each box IS, so in the text colour rather
+  // than the ticks' muted one, as the radar's axis names are.
+  --wr-boxplot-chart-label-font-size: var(--wr-text-xs);
+  --wr-boxplot-chart-label-line-height: var(--wr-text-xs-leading);
+  --wr-boxplot-chart-label-color: var(--wr-color-on-surface);
+  --wr-boxplot-chart-label-gap: var(--wr-space-xs);
+  --wr-boxplot-chart-title-font-size: var(--wr-text-xs);
+  --wr-boxplot-chart-title-font-weight: var(--wr-font-weight-medium);
+  --wr-boxplot-chart-title-color: var(--wr-color-on-surface-muted);
+  --wr-boxplot-chart-title-gap: var(--wr-space-xs);
+  // A box is a share of its slot, up to a width that keeps one group from becoming a
+  // slab; the caps are half as wide. A percentage here is the SLOT's: it resolves where
+  // the box reads it.
+  --wr-boxplot-chart-box-width: min(3rem, 60%);
+  --wr-boxplot-chart-cap-width: calc(var(--wr-boxplot-chart-box-width) / 2);
+  --wr-boxplot-chart-box-radius: var(--wr-border-radius-sm);
+  // How much of the group's colour the box is filled with, at rest and while hovered.
+  // See-through, so the gridlines read across it.
+  --wr-boxplot-chart-box-tint: 20%;
+  --wr-boxplot-chart-box-tint-active: 40%;
+  // The box's edge, the whiskers, the caps and the outliers' rings, all in the group's
+  // colour.
+  --wr-boxplot-chart-line-width: 2px;
+  // The median in the text colour and heavier than the box's edge, so it reads by tone
+  // and by weight whatever the group's colour is.
+  --wr-boxplot-chart-median-color: var(--wr-color-on-surface);
+  --wr-boxplot-chart-median-width: 3px;
+  // An outlier is a ring, hollow so two that overlap stay two.
+  --wr-boxplot-chart-outlier-size: 0.5rem;
+  --wr-boxplot-chart-outlier-fill: var(--wr-color-surface);
+  // The slot the tooltip is reading, washed top to bottom. See-through, as the box is, so
+  // the gridlines read across it: the theme's hover fill is opaque, and the slot is drawn
+  // over the gridlines. The waterfall's wash, under the same name.
+  --wr-boxplot-chart-active-bg: color-mix(in srgb, var(--wr-color-on-surface) 6%, transparent);
+
+  $inset-y: var(--wr-boxplot-chart-plot-inset-y);
+  $line: var(--wr-boxplot-chart-line-width);
+  $color: var(--wr-boxplot-chart-group-color, currentColor);
+
+  display: block;
+  // 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;
+  font-family: var(--wr-boxplot-chart-font-family);
+  color: var(--wr-boxplot-chart-color);
+
+  // The ticks at inline start, the plot beside them, and the group names under the plot
+  // alone. A grid follows `direction`, so the ticks are on the right under RTL with no
+  // rule of their own — and the groups follow it too, each slot placed from the inline
+  // start, as the bar chart's and the waterfall's columns run in a flex row. The groups
+  // are categories with no order of their own, so they read in the page's direction and
+  // the first stands beside the axis either way. A chart whose x axis is ordered — a
+  // sequence on the line and candlestick charts, a number on the scatter — keeps it
+  // physical instead.
+  &__body {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  // The axes' names, set horizontally: the value axis' above the plot at the ticks' side,
+  // where a reader looks first, and the groups' centred under their names.
+  &__y-title,
+  &__x-title {
+    font-size: var(--wr-boxplot-chart-title-font-size);
+    font-weight: var(--wr-boxplot-chart-title-font-weight);
+    color: var(--wr-boxplot-chart-title-color);
+    overflow-wrap: anywhere;
+  }
+
+  &__y-title {
+    grid-column: 1 / -1;
+    grid-row: 1;
+    margin-block-end: var(--wr-boxplot-chart-title-gap);
+    text-align: start;
+  }
+
+  &__x-title {
+    grid-column: 2;
+    grid-row: 4;
+    margin-block-start: var(--wr-boxplot-chart-title-gap);
+    text-align: center;
+  }
+
+  // As wide as the longest label — every label is in flow, in the one cell of a one-cell
+  // grid — while its height stays one label. Stretched to the plot's row, each label
+  // moves down by its own gridline's share of the drawing, inside the plot's block
+  // padding, then up by half itself: the scatter's y axis, for the same reasons.
+  &__y-axis {
+    grid-column: 1;
+    grid-row: 2;
+    display: grid;
+    grid-template-rows: minmax(0, 1fr);
+    padding-inline-end: var(--wr-boxplot-chart-tick-gap);
+    font-size: var(--wr-boxplot-chart-tick-font-size);
+    line-height: var(--wr-boxplot-chart-tick-line-height);
+    color: var(--wr-boxplot-chart-tick-color);
+    text-align: end;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+  }
+
+  // Shrunk to its text against the plot's side of the column, so its own direction can
+  // follow its text (`plaintext`), as the waterfall's ticks do: a box plot has no zero to
+  // start from, so a negative tick is ordinary, and its `-` in front of digits has no
+  // direction of its own — under RTL it would land on the far side and read `200-`.
+  &__y-tick {
+    grid-area: 1 / 1;
+    align-self: start;
+    justify-self: end;
+    position: relative;
+    unicode-bidi: plaintext;
+    top: calc($inset-y + (100% - 2 * $inset-y) * var(--wr-boxplot-chart-y, 0) / 100);
+    transform: translateY(-50%);
+  }
+
+  &__plot {
+    grid-column: 2;
+    grid-row: 2;
+    position: relative;
+    padding: $inset-y var(--wr-boxplot-chart-plot-inset-x);
+  }
+
+  // What every mark's percentages are of.
+  &__drawing {
+    position: relative;
+    height: 100%;
+  }
+
+  &__grid-line {
+    position: absolute;
+    inset-inline: 0;
+    top: calc(var(--wr-boxplot-chart-y, 0) * 1%);
+    border-block-start: 1px solid var(--wr-boxplot-chart-grid-color);
+    transform: translateY(-50%);
+  }
+
+  // One slot of the drawing, top to bottom, and the group's hover target. Every mark
+  // inside is centred on it, so it needs no rule of its own under RTL.
+  &__group {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(var(--wr-boxplot-chart-slot-start, 0) * 1%);
+    width: calc(var(--wr-boxplot-chart-slot-width, 100) * 1%);
+  }
+
+  &__group--active {
+    background: var(--wr-boxplot-chart-active-bg);
+  }
+
+  &__whisker,
+  &__cap,
+  &__box,
+  &__median,
+  &__outlier,
+  &__extent {
+    position: absolute;
+    // rtl-ok: centred on its slot against a physical translateX, so the pair stays physical
+    left: 50%;
+    pointer-events: none;
+  }
+
+  // A whisker is the inline-start border of a box with no width of its own, centred on
+  // its slot. Each runs from its end to the box's edge: two segments rather than one line
+  // behind the box, so the box can be see-through.
+  &__whisker {
+    top: calc(var(--wr-boxplot-chart-top, 0) * 1%);
+    width: 0;
+    height: calc((var(--wr-boxplot-chart-bottom, 0) - var(--wr-boxplot-chart-top, 0)) * 1%);
+    border-inline-start: $line solid $color;
+    transform: translateX(-50%);
+  }
+
+  // A cap, the median and an outlier sit centred ON their value.
+  &__cap,
+  &__median {
+    top: calc(var(--wr-boxplot-chart-y, 0) * 1%);
+    height: 0;
+    transform: translate(-50%, -50%);
+  }
+
+  &__cap {
+    width: var(--wr-boxplot-chart-cap-width);
+    border-block-start: $line solid $color;
+  }
+
+  // The edge is centred on the quartiles, half outside the span between them, so the
+  // box is one edge taller than that span — and centred on its MIDDLE rather than hung
+  // from its top: a box can be no shorter than its two edges, so one whose quartiles
+  // meet grows to that and stays centred on its value, where hung from the top it sat
+  // an edge low.
+  &__box {
+    top: calc((var(--wr-boxplot-chart-top, 0) + var(--wr-boxplot-chart-bottom, 0)) / 2 * 1%);
+    width: var(--wr-boxplot-chart-box-width);
+    height: calc((var(--wr-boxplot-chart-bottom, 0) - var(--wr-boxplot-chart-top, 0)) * 1% + $line);
+    border: $line solid $color;
+    border-radius: var(--wr-boxplot-chart-box-radius);
+    background: color-mix(in srgb, $color var(--wr-boxplot-chart-box-tint), transparent);
+    transform: translate(-50%, -50%);
+  }
+
+  &__group--active &__box {
+    background: color-mix(in srgb, $color var(--wr-boxplot-chart-box-tint-active), transparent);
+  }
+
+  &__median {
+    width: var(--wr-boxplot-chart-box-width);
+    border-block-start: var(--wr-boxplot-chart-median-width) solid var(--wr-boxplot-chart-median-color);
+  }
+
+  &__outlier {
+    top: calc(var(--wr-boxplot-chart-y, 0) * 1%);
+    width: var(--wr-boxplot-chart-outlier-size);
+    height: var(--wr-boxplot-chart-outlier-size);
+    border: $line solid $color;
+    border-radius: 50%;
+    background: var(--wr-boxplot-chart-outlier-fill);
+    transform: translate(-50%, -50%);
+  }
+
+  // Paints nothing and is hit by nothing: a box from the topmost mark to the lowest, half
+  // an outlier taller at either end, for the tooltip to point at.
+  &__extent {
+    top: calc(var(--wr-boxplot-chart-top, 0) * 1% - var(--wr-boxplot-chart-outlier-size) / 2);
+    width: 0;
+    height: calc(
+      (var(--wr-boxplot-chart-bottom, 0) - var(--wr-boxplot-chart-top, 0)) * 1% + var(--wr-boxplot-chart-outlier-size)
+    );
+  }
+
+  // As wide as the drawing — the plot's inline padding is its margin — so a name's
+  // percentages are the drawing's. The names are out of flow, so the strip is given one
+  // line's height.
+  &__x-axis {
+    grid-column: 2;
+    grid-row: 3;
+    position: relative;
+    height: var(--wr-boxplot-chart-label-line-height);
+    margin-block-start: var(--wr-boxplot-chart-label-gap);
+    margin-inline: var(--wr-boxplot-chart-plot-inset-x);
+    font-size: var(--wr-boxplot-chart-label-font-size);
+    line-height: var(--wr-boxplot-chart-label-line-height);
+    color: var(--wr-boxplot-chart-label-color);
+  }
+
+  // A name is the host's own text, in whatever language it is, so it takes its direction
+  // from that text (`plaintext`) and is ellipsised at its own end, not at the page's — the
+  // waterfall's labels, for the same reason: two Latin names under RTL read `… America`.
+  // Not `dir="auto"`: the box is placed by `inset-inline-start`, which would then resolve
+  // against the name's own direction and put it under the wrong slot.
+  &__x-label {
+    position: absolute;
+    top: 0;
+    // Under its slot, from the same inline start.
+    inset-inline-start: calc(var(--wr-boxplot-chart-slot-start, 0) * 1%);
+    width: calc(var(--wr-boxplot-chart-slot-width, 100) * 1%);
+    padding-inline: calc(var(--wr-boxplot-chart-label-gap) / 2);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+    unicode-bidi: plaintext;
+  }
+}
+
+// Forced colors repaints every border in the text colour and every background as the
+// page, which is the right drawing here: the colour of a group says nothing its name
+// does not, the outlines all stay, and the box's tint and the hover wash go. Only the
+// gridlines would come out as heavy as the boxes, so they keep the system's muted
+// colour.
+@media (forced-colors: active) {
+  .wr-boxplot-chart__grid-line {
+    border-color: GrayText;
+    forced-color-adjust: none;
+  }
+}

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

@@ -0,0 +1,268 @@
+@use '../../../theme/styles' as theme;
+@use '../../../popover/styles' as popover-styles; // the `.wr-tooltip` chip the hover tooltip renders into
+
+.wr-bullet-chart {
+  --wr-bullet-chart-font-family: var(--wr-font-family-base);
+  --wr-bullet-chart-color: var(--wr-color-on-surface);
+  // The drawing's height, one line of the label's: the label is set at it, so its first
+  // line sits level with the drawing whatever the sub-label under it adds.
+  --wr-bullet-chart-track-height: 1.5rem;
+  // The least the drawing narrows to, so a chart in a shrink-to-fit parent (a flex row of
+  // tiles) still draws one rather than collapsing to its label.
+  --wr-bullet-chart-track-min-width: 6rem;
+  --wr-bullet-chart-track-radius: var(--wr-border-radius-sm);
+  // The track is what shows past the last band, and with no `ranges` the whole frame.
+  --wr-bullet-chart-track-color: var(--wr-color-fill);
+  // The bands step from the first colour, nearest zero, to the second, at the last range
+  // limit: steps in LIGHTNESS, which survive greyscale. Both are the theme's neutral fill
+  // roles, so each scheme and `prefers-contrast: more` (which deepens the muted ink) moves
+  // them on its own. The first is the strong fill pulled halfway to the muted ink, since
+  // the fills alone are too close to the surface to read as bands.
+  --wr-bullet-chart-range-start: color-mix(in srgb, var(--wr-color-on-surface-muted) 50%, var(--wr-color-fill-strong));
+  --wr-bullet-chart-range-end: var(--wr-color-fill-strong);
+  // The rule where the last band ends, drawn only where the scale runs on past it — a
+  // value or a target above the last limit, or a `max` beyond it. The faintest band and
+  // the track are a step of lightness apart that no reader can see, so the end of the
+  // last band is a line rather than a shade.
+  --wr-bullet-chart-range-edge-color: var(--wr-color-on-surface-muted);
+  // The value and the target are drawn in the text colour, as in Few's own design, and
+  // told apart by shape. Measured in Chromium against the strongest band, the text colour
+  // holds 6.6:1 in light and 5.0:1 in dark (6.4 and 4.7 under `prefers-contrast: more`),
+  // where the primary blue reads 1.8:1 and 1.3:1 — under the 3:1 WCAG 1.4.11 asks of a
+  // mark a reader needs.
+  --wr-bullet-chart-value-color: var(--wr-color-on-surface);
+  --wr-bullet-chart-bar-thickness: calc(100% / 3);
+  --wr-bullet-chart-target-color: var(--wr-color-on-surface);
+  --wr-bullet-chart-target-thickness: 3px;
+  --wr-bullet-chart-target-length: 75%;
+  // A ring in the surface colour round the marker, so it stays a line of its own where it
+  // crosses the bar, which is the same colour.
+  --wr-bullet-chart-target-ring: var(--wr-color-surface);
+  --wr-bullet-chart-target-ring-width: 1px;
+  // By default as wide as the longer of the two labels, up to the max width, which only
+  // this default reads. Give several bullets stacked in a column the same length here and
+  // their drawings line up: the labels fill the column and sit against the drawing at any
+  // width, a wider one than the max included.
+  --wr-bullet-chart-label-max-width: 12rem;
+  --wr-bullet-chart-label-width: fit-content(var(--wr-bullet-chart-label-max-width));
+  --wr-bullet-chart-label-gap: var(--wr-space-md);
+  --wr-bullet-chart-label-font-size: var(--wr-text-sm);
+  --wr-bullet-chart-label-font-weight: var(--wr-font-weight-semibold);
+  --wr-bullet-chart-label-color: var(--wr-color-on-surface);
+  --wr-bullet-chart-sub-label-font-size: var(--wr-text-xs);
+  --wr-bullet-chart-sub-label-line-height: var(--wr-text-xs-leading);
+  --wr-bullet-chart-sub-label-color: var(--wr-color-on-surface-muted);
+  --wr-bullet-chart-scale-gap: var(--wr-space-xs);
+  --wr-bullet-chart-tick-length: var(--wr-space-xs);
+  --wr-bullet-chart-tick-color: var(--wr-color-on-surface-muted);
+  --wr-bullet-chart-tick-font-size: var(--wr-text-xs);
+  --wr-bullet-chart-tick-line-height: var(--wr-text-xs-leading);
+
+  // The drawing above its scale, and with a label, the label column at inline start of
+  // both. A grid follows `direction`, so under RTL the labels are on the right.
+  display: grid;
+  grid-template-areas:
+    'track'
+    'scale';
+  grid-template-columns: minmax(var(--wr-bullet-chart-track-min-width), 1fr);
+  font-family: var(--wr-bullet-chart-font-family);
+  color: var(--wr-bullet-chart-color);
+
+  &--labelled {
+    grid-template-areas:
+      'labels track'
+      'labels scale';
+    grid-template-columns: var(--wr-bullet-chart-label-width) minmax(var(--wr-bullet-chart-track-min-width), 1fr);
+    column-gap: var(--wr-bullet-chart-label-gap);
+  }
+
+  // Beside the drawing and the scale both, from the top: the label's line is the drawing's
+  // height, so a single line sits level with it and the sub-label hangs beside the scale.
+  // End-aligned, against the drawing, as Few sets them.
+  &__labels {
+    grid-area: labels;
+    align-self: start;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    text-align: end;
+  }
+
+  &__label,
+  &__sub-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__label {
+    font-size: var(--wr-bullet-chart-label-font-size);
+    font-weight: var(--wr-bullet-chart-label-font-weight);
+    line-height: var(--wr-bullet-chart-track-height);
+    color: var(--wr-bullet-chart-label-color);
+  }
+
+  &__sub-label {
+    font-size: var(--wr-bullet-chart-sub-label-font-size);
+    line-height: var(--wr-bullet-chart-sub-label-line-height);
+    color: var(--wr-bullet-chart-sub-label-color);
+  }
+
+  // The positioned box every mark is placed in by the shares the component writes, as
+  // percentages of its width; nothing in it is in flow.
+  &__track {
+    grid-area: track;
+    align-self: start;
+    position: relative;
+    block-size: var(--wr-bullet-chart-track-height);
+  }
+
+  &__ranges {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    border-radius: var(--wr-bullet-chart-track-radius);
+    background: var(--wr-bullet-chart-track-color);
+  }
+
+  &__range {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(var(--wr-bullet-chart-start, 0) * 100%);
+    inline-size: calc(var(--wr-bullet-chart-size, 0) * 100%);
+    background: color-mix(
+      in srgb,
+      var(--wr-bullet-chart-range-end) var(--wr-bullet-chart-range-mix, 0%),
+      var(--wr-bullet-chart-range-start)
+    );
+
+    // The end of the last band, as a rule just past it. A last band that reaches the end
+    // of the scale puts the rule outside the track, where the layer above clips it, so it
+    // shows only where the scale runs on past the last limit.
+    &:last-child::after {
+      content: '';
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: 100%;
+      border-inline-start: 1px solid var(--wr-bullet-chart-range-edge-color);
+    }
+  }
+
+  // A third of the line high and centred on it, from zero to the value; a zero value is
+  // still a sliver, since it is a reading.
+  &__bar {
+    position: absolute;
+    inset-block: calc(50% - var(--wr-bullet-chart-bar-thickness) / 2);
+    inset-inline-start: calc(var(--wr-bullet-chart-start, 0) * 100%);
+    inline-size: calc(var(--wr-bullet-chart-size, 0) * 100%);
+    min-inline-size: 1px;
+    background: var(--wr-bullet-chart-value-color);
+    transition:
+      inset-inline-start var(--wr-duration-slow) var(--wr-ease-out),
+      inline-size var(--wr-duration-slow) var(--wr-ease-out);
+  }
+
+  // Across the line on its value, held inside the drawing at either end so no part of it
+  // is cut off or reaches past the chart's box.
+  &__target {
+    position: absolute;
+    inset-block: calc(50% - var(--wr-bullet-chart-target-length) / 2);
+    inset-inline-start: clamp(
+      0px,
+      calc(var(--wr-bullet-chart-at, 0) * 100% - var(--wr-bullet-chart-target-thickness) / 2),
+      calc(100% - var(--wr-bullet-chart-target-thickness))
+    );
+    inline-size: var(--wr-bullet-chart-target-thickness);
+    background: var(--wr-bullet-chart-target-color);
+    outline: var(--wr-bullet-chart-target-ring-width) solid var(--wr-bullet-chart-target-ring);
+    transition: inset-inline-start var(--wr-duration-slow) var(--wr-ease-out);
+  }
+
+  // As wide as the drawing, so a tick's share is of the drawing too. Every tick is out of
+  // flow, so the strip is given the height of a mark and a line of text.
+  &__scale {
+    grid-area: scale;
+    position: relative;
+    block-size: calc(var(--wr-bullet-chart-tick-length) + var(--wr-bullet-chart-tick-line-height));
+    margin-block-start: var(--wr-bullet-chart-scale-gap);
+    font-size: var(--wr-bullet-chart-tick-font-size);
+    line-height: var(--wr-bullet-chart-tick-line-height);
+    color: var(--wr-bullet-chart-tick-color);
+    font-variant-numeric: tabular-nums;
+  }
+
+  // A box of no width on the tick's value, its mark and label centred on it — so it is
+  // centred in either direction with no transform — and aligned inwards at either end of
+  // the scale, so the first and last labels stay over the drawing.
+  &__tick {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc(var(--wr-bullet-chart-at, 0) * 100%);
+    inline-size: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &::before {
+      content: '';
+      block-size: var(--wr-bullet-chart-tick-length);
+      border-inline-start: 1px solid var(--wr-bullet-chart-tick-color);
+    }
+
+    &--start {
+      align-items: flex-start;
+    }
+
+    &--end {
+      align-items: flex-end;
+    }
+  }
+
+  // Its direction follows its own text (`plaintext`), as the waterfall's and the box
+  // plot's ticks do: a negative tick is a `-` in front of digits, neither of which has a
+  // direction of its own, and under RTL the sign would land on the far side — `20-`. It is
+  // shrunk to its text in the zero-width column above, so it keeps its place either way.
+  &__tick-label {
+    white-space: nowrap;
+    unicode-bidi: plaintext;
+  }
+}
+
+// The bar and the marker are empty boxes painted by `background`, which forced colors
+// resets to `Canvas` — they would vanish into the page. They keep their paint and
+// take the system's text colour; the bands lose their greys to the page colour, so each
+// one's start is drawn as a rule in the system's muted colour, as is the last one's end,
+// and the track gets an edge.
+@media (forced-colors: active) {
+  .wr-bullet-chart {
+    --wr-bullet-chart-track-color: Canvas;
+    --wr-bullet-chart-range-edge-color: GrayText;
+    --wr-bullet-chart-value-color: CanvasText;
+    --wr-bullet-chart-target-color: CanvasText;
+    --wr-bullet-chart-target-ring: Canvas;
+  }
+
+  .wr-bullet-chart__ranges {
+    outline: 1px solid CanvasText;
+  }
+
+  .wr-bullet-chart__range {
+    forced-color-adjust: none;
+    background: Canvas;
+    border-inline-start: 1px solid GrayText;
+  }
+
+  .wr-bullet-chart__bar,
+  .wr-bullet-chart__target {
+    forced-color-adjust: none;
+  }
+}
+
+// The bar grows to its value and the marker slides to its target; with reduced motion
+// both land there at once.
+@media (prefers-reduced-motion: reduce) {
+  .wr-bullet-chart__bar,
+  .wr-bullet-chart__target {
+    transition: none;
+  }
+}

package/charts/calendar-heatmap/styles/_index.scss

@@ -1,14 +1,24 @@
 @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. With `dataTable`, the
+// figures render as a `<wr-chart-table>` beside the grid, which its own sheet clips out of
+// sight.
+@use '../../core/styles' as core-styles; // WrChartTable
+
 .wr-calendar-heatmap {
   --wr-calendar-heatmap-font-family: var(--wr-font-family-base);
   --wr-calendar-heatmap-grid-gap: var(--wr-space-sm);
   --wr-calendar-heatmap-weekday-font-size: var(--wr-text-xs);
   --wr-calendar-heatmap-weekday-line-height: var(--wr-leading-none);
   --wr-calendar-heatmap-month-font-size: var(--wr-text-xs);
+  // The weekday and month names, muted as an axis' labels are on every chart.
+  --wr-calendar-heatmap-label-color: var(--wr-color-on-surface-muted);
 
   display: inline-block;
+  // The containing block of the out-of-flow `dataTable` copy, as on every chart that
+  // renders one: in a scroller it would otherwise keep its place in the scrolled content.
+  position: relative;
   // A year is 53 columns of a FIXED cell size, so the grid has no reflow in it:
   // its intrinsic width is ~731px whatever the container, and without a cap it
   // escaped the card it sits in and gave the whole document a 397px horizontal
@@ -25,7 +35,13 @@
   // legible.
   overflow-y: hidden;
   font-family: var(--wr-calendar-heatmap-font-family);
-  color: var(--wr-color-on-surface-muted);
+  color: var(--wr-calendar-heatmap-label-color);
+
+  // The host is a tab stop while it scrolls (see the component), so the keyboard can move
+  // it. Outset: an element's own `overflow` does not clip its outline.
+  &:focus-visible {
+    @include theme.focus-ring;
+  }
 
   &__grid {
     display: grid;
@@ -42,7 +58,7 @@
     grid-template-rows: repeat(7, var(--wr-calendar-heatmap-cell-size));
     gap: var(--wr-calendar-heatmap-cell-gap);
     font-size: var(--wr-calendar-heatmap-weekday-font-size);
-    color: var(--wr-color-on-surface-muted);
+    color: var(--wr-calendar-heatmap-label-color);
     align-items: center;
   }
 
@@ -65,7 +81,7 @@
   &__months {
     grid-area: months;
     font-size: var(--wr-calendar-heatmap-month-font-size);
-    color: var(--wr-color-on-surface-muted);
+    color: var(--wr-calendar-heatmap-label-color);
   }
 
   &__month {
@@ -98,5 +114,11 @@
     &:hover {
       transform: scale(1.4);
     }
+
+    // The hovered square still grows, so the pointer's place stays marked; it just lands
+    // there at once rather than tweening on every square the pointer crosses.
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 }