ngwr 14.7.0 → 14.8.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/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);
@@ -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;

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);
 
@@ -83,6 +94,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 +170,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);
@@ -223,7 +251,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 +263,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/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/toolbar/styles/_index.scss

@@ -33,7 +33,9 @@
   &__zone {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    // Density-aware: `touch` widens it so adjacent controls 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));
     min-width: 0;
 
     &:empty {
@@ -74,6 +76,38 @@
   }
 }
 
+// The documented zone shape is ONE wrapper around the controls —
+// `<div wrToolbarEnd><wr-btn>…</wr-btn><wr-btn>…</wr-btn></div>` — and the zone's
+// `gap` spaces the zone'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 zone is, taking the zone's own gap through `inherit`, so both
+// shapes — one wrapper, or the attribute on each control — space the same and a
+// density change moves them together. It wraps, as the inline flow it replaces
+// did, so a stacked `responsive` zone still folds its controls onto a second
+// row, now with the gap between the rows as well. 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`, `grid` or `gap-4`
+//   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 control projected directly is already a child of the
+//   zone and spaced by its gap, and must not become a flex container itself.
+//   Running text belongs in a `<span>` or a `<p>`, which stay in inline flow: in
+//   a bare `<div>` its words and links would become separate flex items.
+// - `[hidden]`. An author rule outranks the user agent's
+//   `[hidden] { display: none }` at any specificity.
+:where(.wr-toolbar__zone > div:not([hidden], [class]:not([class='']), [style]:not([style='']))) {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: inherit;
+}
+
 // Responsive toolbars stack their zones when the bar is too narrow for a row.
 @container wr-toolbar (max-width: 32rem) {
   .wr-toolbar--responsive .wr-toolbar__zone {

package/tree/styles/_index.scss

@@ -177,15 +177,51 @@
     --wr-tree-trigger-font-size: var(--wr-control-font-size-md);
     --wr-tree-trigger-line-height: var(--wr-control-line-height-md);
     --wr-tree-panel-max-height: 18rem;
-    // Trigger width floor — hooked for the same reason as `--wr-select-min-width`:
-    // in a narrow grid column the literal wins over `minmax(0, 1fr)` and the
-    // trigger overhangs its cell, and the only escape was overriding
-    // `.wr-tree__trigger` from outside. Set it to 0 to defer to the layout.
+    // Trigger width floor, the same contract as `--wr-select-min-width`.
+    // 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 trigger to its content alone. This hook is the only way to
+    // lower it: a `min-width` on `.wr-tree__trigger`, the override that did it
+    // before the hook existed, no longer reaches the floor.
     --wr-tree-trigger-min-width: 12rem;
 
-    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: `style="width: 6rem"` drew a 192px trigger in a
+    // 96px host, and in a 200px flex row beside a 120px sibling the tree
+    // overflowed the row by 120px. `minmax(0, …)` also drops the label's text
+    // from the host's min-content, so it shrinks as a flex item the way
+    // `[wrInput]` does 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-tree-trigger-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). In overlay mode 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-tree-trigger-min-width);
+      max-width: 100%;
+      height: 0;
+    }
+
     &.wr-tree--disabled {
       --wr-tree-trigger-color: var(--wr-color-on-surface-muted);
       --wr-tree-trigger-bg: var(--wr-color-fill);
@@ -197,7 +233,10 @@
     align-items: center;
     gap: 0.5rem;
     width: 100%;
-    min-width: var(--wr-tree-trigger-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 label's ellipsis take the
+    // difference.
+    min-width: 0;
     appearance: none;
     background: var(--wr-tree-trigger-bg);
     color: var(--wr-tree-trigger-color);

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

@@ -1,3 +1,4 @@
+import * as ngwr_popover from 'ngwr/popover';
 import * as _angular_core from '@angular/core';
 
 /** One bar's worth of data. */
@@ -32,6 +33,12 @@ declare class WrBarChart {
     readonly height: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Explicit max value. `0` = auto. @default 0 */
     readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Show a tooltip with the bar's label and value on hover. Pointer only — the
+     * column's accessible name already carries both. @default true
+     */
+    readonly tooltip: _angular_core.InputSignalWithTransform<boolean, any>;
+    private readonly barEls;
     /**
      * A datum's value, with anything non-finite read as `0`.
      *
@@ -55,8 +62,19 @@ declare class WrBarChart {
          */
         name: string;
     }[]>;
+    /**
+     * One tooltip for the whole chart, with the value exactly as it is printed above
+     * the bar. It points at the top edge of the BAR — above it, below it when there is
+     * no room — rather than at the column, which is the full height of the plot and
+     * would put the chip above every bar alike. A bar with nothing to draw (zero, a
+     * negative value) keeps its 1px floor on the baseline, so its chip points there.
+     *
+     * The bar is the anchor element itself, so an open chip follows it through the
+     * height transition a data change starts.
+     */
+    protected readonly tip: ngwr_popover.WrChartTooltip;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrBarChart, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrBarChart, "wr-bar-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrBarChart, "wr-bar-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { WrBarChart };

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

@@ -1,3 +1,4 @@
+import * as ngwr_popover from 'ngwr/popover';
 import * as _angular_core from '@angular/core';
 
 interface WrHeatmapDatum {
@@ -70,6 +71,13 @@ declare class WrCalendarHeatmap {
     readonly emptyColor: _angular_core.InputSignal<string>;
     /** Show the weekday + month labels around the grid. @default true */
     readonly showLabels: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Show a tooltip with the day and its count on hover. It is the sentence the
+     * square's `title` carried, so the `title` is written only while this is off —
+     * or the browser would open a second copy a moment later. @default true
+     */
+    readonly tooltip: _angular_core.InputSignalWithTransform<boolean, any>;
+    private readonly daysEl;
     private readonly locale;
     /**
      * Weekday names from the locale rather than a hard-coded English list — the row order is
@@ -84,10 +92,30 @@ declare class WrCalendarHeatmap {
         week: number;
     }[]>;
     protected readonly columnCount: _angular_core.Signal<number>;
+    /** Each day's position in `cells()`, for the square the pointer lands on. */
+    private readonly indexByIso;
+    /**
+     * One tooltip for the whole year, pointing at the hovered day: above its square,
+     * below it when there is no room above, and slid along the viewport edge for the
+     * first and last weeks with the arrow still on the square. A listener on the grid
+     * rather than one per square: a year is 371 of them.
+     *
+     * The box is the square's LAYOUT box rather than its client rect. The hovered square
+     * grows by `:hover` over a transition, and a rect read part way through it would
+     * move the chip by up to a fifth of a square depending on when it was measured;
+     * the scale is centred, so the layout box is the rect's centre and the square's
+     * own size.
+     */
+    protected readonly tip: ngwr_popover.WrChartTooltip;
+    /**
+     * Which square the pointer is on, from a `mousemove` on the grid. Over the gap
+     * between two squares it is on none, and the tooltip starts to leave.
+     */
+    protected onCellsPointer(event: MouseEvent): void;
     protected colorFor(intensity: number): string;
     protected opacityFor(intensity: number): number;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCalendarHeatmap, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCalendarHeatmap, "wr-calendar-heatmap", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "endDate": { "alias": "endDate"; "required": false; "isSignal": true; }; "weeks": { "alias": "weeks"; "required": false; "isSignal": true; }; "cellSize": { "alias": "cellSize"; "required": false; "isSignal": true; }; "cellGap": { "alias": "cellGap"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "emptyColor": { "alias": "emptyColor"; "required": false; "isSignal": true; }; "showLabels": { "alias": "showLabels"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCalendarHeatmap, "wr-calendar-heatmap", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "endDate": { "alias": "endDate"; "required": false; "isSignal": true; }; "weeks": { "alias": "weeks"; "required": false; "isSignal": true; }; "cellSize": { "alias": "cellSize"; "required": false; "isSignal": true; }; "cellGap": { "alias": "cellGap"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "emptyColor": { "alias": "emptyColor"; "required": false; "isSignal": true; }; "showLabels": { "alias": "showLabels"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { WrCalendarHeatmap };

package/types/ngwr-checkbox.d.ts

@@ -111,6 +111,8 @@ declare class WrCheckbox implements FormCheckboxControl {
      * only and controlled: set it yourself for a parent "select all" whose
      * children are partly checked, and clear it on the next toggle. Takes visual
      * precedence over `checked`; the native input reports `aria-checked="mixed"`.
+     * A click the host does not answer still toggles `checked` underneath, and the
+     * dash and the mixed state both stay until the binding turns `false`.
      *
      * @default false
      */