ngwr 14.6.0 → 14.8.0

package/types/ngwr-gauge.d.ts

@@ -1,3 +1,4 @@
+import * as ngwr_popover from 'ngwr/popover';
 import * as _angular_core from '@angular/core';
 
 /**
@@ -33,6 +34,12 @@ declare class WrGauge {
     /** Show the value text in the center. @default true */
     readonly showValue: _angular_core.InputSignalWithTransform<boolean, any>;
     readonly suffix: _angular_core.InputSignal<string>;
+    /**
+     * Show a tooltip with the reading on hover, named by `ariaLabel` when one is
+     * given. Pointer only — the meter announces the same reading. @default true
+     */
+    readonly tooltip: _angular_core.InputSignalWithTransform<boolean, any>;
+    private readonly surface;
     protected readonly cx = 50;
     protected readonly cy = 50;
     protected readonly radius: _angular_core.Signal<number>;
@@ -47,8 +54,20 @@ declare class WrGauge {
     protected readonly trackPath: _angular_core.Signal<string>;
     protected readonly valuePath: _angular_core.Signal<string>;
     protected readonly viewBox = "0 0 100 56";
+    /**
+     * The reading as the meter announces it — `aria-valuetext`, the number plus the
+     * suffix — so the tooltip, the printed value and a screen reader all say one
+     * thing.
+     */
+    protected readonly valueText: _angular_core.Signal<string>;
+    /**
+     * One tooltip, pointing at the top of the dial. The whole gauge is one section.
+     * The label is the `ariaLabel` input and not the catalog fallback, which names
+     * the kind of widget rather than the reading.
+     */
+    protected readonly tip: ngwr_popover.WrChartTooltip;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrGauge, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrGauge, "wr-gauge", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "trackColor": { "alias": "trackColor"; "required": false; "isSignal": true; }; "valueColor": { "alias": "valueColor"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrGauge, "wr-gauge", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "trackColor": { "alias": "trackColor"; "required": false; "isSignal": true; }; "valueColor": { "alias": "valueColor"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { WrGauge };

package/types/ngwr-image-cropper.d.ts

@@ -157,6 +157,12 @@ declare class WrImageCropper {
     private active;
     private startPointer;
     private startRect;
+    /** The element the live drag set pointer capture on, so the end releases that one. */
+    private captureTarget;
+    /** The pointer the live drag belongs to. Every other pointer's events are ignored. */
+    private pointerId;
+    /** How far past each side of the crop the live resize was pressed — see `onPointerMove`. */
+    private overhang;
     private readonly destroyRef;
     private readonly statusState;
     /**
@@ -217,8 +223,50 @@ declare class WrImageCropper {
     private initialCrop;
     protected readonly handles: readonly WrCropHandle[];
     protected onPointerDown(handle: WrCropHandle, event: PointerEvent): void;
+    /**
+     * A resize ENDS when the pointer leaves the image, exactly as `pointerup` would end it:
+     * the move that carried it out is applied — clamped to the image like any other — and
+     * then the drag is over. Nothing after that resumes it or changes the crop, pointer
+     * back over the image or not, until a new `pointerdown`. A move drag is not affected:
+     * its size is fixed, so it simply rests against the edge.
+     *
+     * The move that leaves is applied rather than dropped because pointer moves are
+     * SAMPLES. Dropped, a quick drag toward a corner would stop wherever its last sample
+     * inside happened to fall — a single move from a handle to past the image would change
+     * nothing at all — and even a slow one would stop a fraction of a pixel short of the
+     * edge. A drag that leaves across one edge still ends there: heading for a corner at a
+     * slant that crosses the bottom first, the crop's right edge stays where it was then.
+     *
+     * "The image" is the `<img>`'s own box — the bounds `applyMove` / `applyResize` clamp
+     * the crop to — with its edges counting as inside, since the crop may reach them. The
+     * box is re-measured on every move and compared with `clientX` / `clientY`: both are
+     * viewport coordinates, so a scroll mid-drag cannot put them out of step. The moves
+     * outside reach this handler at all only because the drag holds pointer capture.
+     *
+     * One allowance, fixed at `pointerdown`: the box is widened on each side by however far
+     * past that side of the CROP the press landed — at most as far as the pressed handle
+     * reaches past it. Half of an edge handle, and three quarters of a corner handle, lies
+     * outside the crop, so a press there already has the pointer ahead of the edge it drags.
+     * Measured without the allowance, that pointer would leave the image while the crop was
+     * still short of the image's edge by the same distance, with nothing able to close the
+     * gap; and a handle resting on the image's edge, pressed on its outer part, would begin
+     * its drag already outside. A press on a handle's inner part widens nothing.
+     */
     protected onPointerMove(event: PointerEvent): void;
+    /**
+     * Ends the drag — for `pointerup`, `pointercancel`, a capture lost to something else,
+     * and a resize whose pointer left the image. Once per drag: the capture released here
+     * fires `lostpointercapture` afterwards, and by then there is nothing left to end.
+     *
+     * Only for the pointer that started it. A second finger is refused a drag of its own at
+     * `pointerdown`, but its moves and its lifting reach these handlers all the same, and
+     * would otherwise drive or end the first finger's drag.
+     */
     protected onPointerUp(event: PointerEvent): void;
+    /** How far past each side of the crop window the pointer is, in CSS pixels. */
+    private pastCrop;
+    /** Whether the pointer is on the image, edges and the press's `overhang` included. */
+    private withinImage;
     /** Whether a key has moved the crop since the last `keyup`. */
     private keyboardDirty;
     /**

package/types/ngwr-input-number.d.ts

@@ -124,6 +124,13 @@ declare class WrInputNumber implements FormValueControl<number | null> {
     protected readonly interactive: _angular_core.Signal<boolean>;
     protected readonly atMin: _angular_core.Signal<boolean>;
     protected readonly atMax: _angular_core.Signal<boolean>;
+    /**
+     * The size and pill modifiers mirror what is bound down to the chrome, because
+     * the stepper column belongs to neither half of it: the field carries
+     * `wr-input--<size>`, the column is its SIBLING, and the group carries no size
+     * at all. Without a modifier of its own the column drew one 10x6 chevron at
+     * every size and ran its dividers into a pill's rounded end.
+     */
     protected readonly classes: _angular_core.Signal<string>;
     /**
      * Fraction digits the stepper rounds its arithmetic to when `decimals` says

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

@@ -44,6 +44,12 @@ declare class WrLineChart {
     readonly showLegend: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Show dots at each data point. @default true */
     readonly showDots: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Show the hover readout: the crosshair, the point markers and the tooltip. Off
+     * drops all three, since a crosshair with no values beside it points at nothing.
+     * @default true
+     */
+    readonly tooltip: _angular_core.InputSignalWithTransform<boolean, any>;
     protected readonly vbW = 600;
     protected readonly vbH = 300;
     protected readonly padding: {
@@ -55,6 +61,8 @@ declare class WrLineChart {
     private readonly host;
     /** Hovered point index (across all series) — null when no hover. */
     protected readonly hoveredIndex: _angular_core.WritableSignal<number | null>;
+    /** The hovered index while the readout is on, so turning `tooltip` off mid-hover clears it. */
+    protected readonly activeIndex: _angular_core.Signal<number | null>;
     /**
      * A dash pattern per series, so the lines are told apart by SHAPE and not
      * only by hue.
@@ -140,7 +148,7 @@ declare class WrLineChart {
     protected readonly viewBox: _angular_core.Signal<string>;
     protected readonly hostEl: HTMLElement;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrLineChart, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrLineChart, "wr-line-chart", never, { "series": { "alias": "series"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "xLabels": { "alias": "xLabels"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showDots": { "alias": "showDots"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrLineChart, "wr-line-chart", never, { "series": { "alias": "series"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "xLabels": { "alias": "xLabels"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showDots": { "alias": "showDots"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { WrLineChart };

package/types/ngwr-meter-group-testing.d.ts

@@ -33,8 +33,9 @@ interface WrMeterGroupSlice {
  * Test harness for `<wr-meter-group>` — one bar divided into labelled bands.
  *
  * **The bar is a single `progressbar`, and its value is the TOTAL.** The bands
- * themselves announce nothing: they carry a `title` for a mouse and their share as an
- * inline width, and the legend is where their labels and values are readable. So a
+ * themselves announce nothing: they carry a hover tooltip (or, with `tooltip` off, a
+ * `title`) for a mouse and their share as an inline width, and the legend is where
+ * their labels and values are readable. So a
  * spec that wants "how much of each" reads {@link getSlices} for the shares or
  * {@link getLegendLabels} / {@link getLegendValues} for what is printed, and one that
  * wants "how full" reads {@link getValue}.

package/types/ngwr-meter-group.d.ts

@@ -1,3 +1,4 @@
+import * as ngwr_popover from 'ngwr/popover';
 import * as _angular_core from '@angular/core';
 
 /**
@@ -45,6 +46,13 @@ declare class WrMeterGroup {
     readonly showLegend: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Show each segment's value in the legend, next to its label. @default true */
     readonly showValues: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Show a tooltip with the segment's label and value on hover. It replaces the
+     * band's `title`, which 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 sliceEls;
     /**
      * A segment's contribution, floored at `0` and with anything non-finite read
      * as `0`. One `NaN` used to poison the whole bar: the sum is `NaN` as soon as
@@ -67,8 +75,13 @@ declare class WrMeterGroup {
         color: string;
         percent: number;
     }[]>;
+    /**
+     * One tooltip for the whole bar, pointing at the hovered band, with the value as
+     * the legend prints it.
+     */
+    protected readonly tip: ngwr_popover.WrChartTooltip;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrMeterGroup, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrMeterGroup, "wr-meter-group", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "segments": { "alias": "segments"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrMeterGroup, "wr-meter-group", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "segments": { "alias": "segments"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { WrMeterGroup };

package/types/ngwr-page-header.d.ts

@@ -6,6 +6,14 @@ import * as _angular_core from '@angular/core';
  * side), `[wrPageHeaderExtra]` (bottom row of tags / metadata). Title +
  * subtitle come from inputs.
  *
+ * A bare `<div>` wrapper in the actions slot, one with no `class` and no
+ * `style`, is laid out as a wrapping row with the actions region's own gap, so
+ * the buttons inside it are spaced exactly like buttons projected one by one.
+ * The gap follows `--wr-density-gap`. Give the wrapper a class or a style and
+ * its layout is yours: the header sets nothing on it. The extra row spaces its
+ * own children and leaves a wrapper alone, since that is where metadata prose
+ * goes, so project tags through an `<ng-container>` as below.
+ *
  * @example
  * ```html
  * <wr-page-header title="Settings" subtitle="Manage your workspace">
@@ -14,10 +22,10 @@ import * as _angular_core from '@angular/core';
  *     <button wr-btn>Invite</button>
  *     <button wr-btn color="primary">Save</button>
  *   </div>
- *   <div wrPageHeaderExtra>
+ *   <ng-container wrPageHeaderExtra>
  *     <wr-tag>v2.4</wr-tag>
  *     <wr-tag color="success">Stable</wr-tag>
- *   </div>
+ *   </ng-container>
  * </wr-page-header>
  * ```
  *

package/types/ngwr-popover.d.ts

@@ -1,7 +1,79 @@
 import * as _angular_core from '@angular/core';
-import { TemplateRef } from '@angular/core';
+import { Signal, TemplateRef } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
 
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+/**
+ * What a chart's hover tooltip says about one section.
+ *
+ * @internal
+ */
+interface WrChartTooltipDatum {
+    /** The series or category name. Omitted where `value` is already a whole sentence. */
+    readonly label?: string;
+    /** The value, formatted the way the chart already prints it. */
+    readonly value: string;
+    /** The section's own paint, drawn as a swatch. Omitted where colour says nothing. */
+    readonly color?: string;
+}
+/**
+ * Where the tooltip for one section points, and what it says.
+ *
+ * @internal
+ */
+interface WrChartTooltipTarget {
+    readonly datum: WrChartTooltipDatum;
+    /**
+     * What the chip points at: an element, or a box in viewport pixels for a section
+     * that is not one — a zero-size point on a donut's arc. The chip sits on `side` of
+     * it with its arrow on the middle of that edge, and flips for room. Point at the
+     * section itself, not at something near it: the arrow is what tells a reader which
+     * of forty squares the chip is about. `null` while the element is not rendered —
+     * the tooltip stays closed rather than pointing at nothing.
+     */
+    readonly anchor: Element | {
+        readonly x: number;
+        readonly y: number;
+        readonly width?: number;
+        readonly height?: number;
+    } | null;
+    /**
+     * Which PHYSICAL side of the anchor the chip goes, before a flip for room — the
+     * side the section faces. A chart's geometry does not mirror with `direction`, so
+     * neither does this: `right` is the right in RTL too. `top` and `bottom` flip to
+     * each other; `left` and `right` try above and below rather than the far side,
+     * which is the chart itself. @default 'top'
+     */
+    readonly side?: 'top' | 'bottom' | 'left' | 'right';
+}
+/**
+ * The handle {@link useChartTooltip} returns to a chart.
+ *
+ * @internal
+ */
+interface WrChartTooltip {
+    /** The section the tooltip is showing, or `null`. Always `null` while the chart opted out. */
+    readonly active: Signal<number | null>;
+    /**
+     * The pointer is over section `index`. Switches straight to it when another is up —
+     * unless the pointer is between that one's anchor and its chip, on its way onto the
+     * chip, where the switch waits out the same grace as `leave`.
+     */
+    enter(index: number): void;
+    /**
+     * The pointer left the sections. Hides after a short grace period, so a pointer
+     * can cross the gap onto the tooltip — WCAG 1.4.13 (Hoverable) — and so moving
+     * between two sections through a gap does not blink it.
+     */
+    leave(event?: MouseEvent): void;
+}
+
 /**
  * @license
  *
@@ -11,6 +83,85 @@ import { BooleanInput } from '@angular/cdk/coercion';
 
 type WrPopoverPosition = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
 
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+/**
+ * A hover tooltip for a chart's sections, with ONE overlay per chart.
+ *
+ * **Why not `[wrPopover] mode="tooltip"` on every section.** It fits the look
+ * and not the shape. A year of `wr-calendar-heatmap` is 371 days, and a directive
+ * per day is 371 focus monitors and 371 overlays-in-waiting for a tooltip only
+ * one of them can show; and most sections are not an element a directive could
+ * point at — a donut's slice is a `<path>` whose box is most of the ring, a
+ * sparkline's point is a coordinate. So the chart says which section is under
+ * the pointer and where to point, and this owns the single overlay, the timers
+ * and the teardown. What IS shared with the directive is everything a reader
+ * sees: the `.wr-tooltip` chip, its arrow, the placements with their flip, and
+ * Escape.
+ *
+ * **The chip points AT the section it describes**, with its arrow on the anchor:
+ * above a heatmap's day, above a bar's top edge, off the outside of a donut's arc.
+ * The arrow is placed from a measurement rather than centred, because the chip is
+ * not always centred on its anchor — `withPush` slides it along the viewport edge
+ * for the first and last week of a year — and an arrow at the chip's middle would
+ * then point at a neighbour. The measurement is written to
+ * `--wr-chart-tooltip-arrow` on the chip, and the stylesheet puts the arrow there.
+ *
+ * **A chip at its section sits over the sections beside it**, and it is hoverable
+ * (below), so the way onto it can cross another section: straight up from a heatmap
+ * day runs through the day above. Switching the moment that day reported itself
+ * would move the chip away from a pointer on its way to it — WCAG 1.4.13 with extra
+ * steps. So the strip between the anchor and the chip is a bridge: another section
+ * reported from inside it waits out the same grace a leave does, a pointer still
+ * closing in on the chip starts that grace again however slowly it moves, and
+ * landing on the chip cancels the switch. Anywhere else a new section switches at
+ * once, so scanning a row of days does not lag. The cost is in the other direction: a
+ * pointer that keeps on going up a heatmap's column is moving onto the chip, so it
+ * passes over it and the days under it read out only once it comes out the far side.
+ *
+ * **Why an overlay and not a positioned child, the way `wr-line-chart` draws its
+ * own.** A child is clipped by every `overflow` between it and the page, and a
+ * chart sits inside those constantly: `wr-calendar-heatmap` IS a scroll
+ * container, and a sparkline in a `wr-table` cell sits under two more.
+ *
+ * **Pointer only, deliberately.** No section of any chart is a tab stop, and
+ * this does not make one — a year of days in the tab order would be the defect.
+ * The pane is `aria-hidden`: every value it shows is already the section's
+ * accessible name or the chart's own, and an orphan tooltip nothing describes
+ * reads as a stray line at the end of the document. It is never the only way to
+ * a value.
+ *
+ * SSR-safe: nothing here touches the DOM until a pointer event has moved a
+ * section, and the render effect that opens the overlay never runs on a server.
+ *
+ * Call from an injection context — a chart's field initialiser.
+ *
+ * @param enabled The chart's `tooltip` input. Turning it off closes an open tooltip.
+ * @param resolve What to show for section `index`, and where. It runs after
+ *   render, so it may read the DOM the section just drew; the signals it reads
+ *   are tracked, so a data change under an open tooltip re-reads it, and a
+ *   section that no longer exists (`null`) closes it. It runs again whenever the
+ *   chart may have moved under an open chip — a scroll anywhere, a viewport
+ *   resize, the chart or its anchor element changing size.
+ * @param sectionAt For a chart whose sections are chosen by POSITION rather than by
+ *   element — a sparkline picks the point nearest the pointer's x, anywhere over the
+ *   drawing — the section at a viewport point, or `null` off the drawing. The chip
+ *   points at the point from inside the drawing, so without this a pointer scrubbing
+ *   above the line lands on the chip and the chart stops hearing it: measured in
+ *   Chromium, a scrub along the top of a sparkline showed 9 of its 12 values. Asked on
+ *   every pointer event while a chip is up, wherever the pointer is over the chart or its
+ *   own chip; straight up from a point onto its chip stays on that point, so the chip is
+ *   still hoverable. Anywhere else the chip closes after the usual grace.
+ *
+ * @internal
+ */
+declare function useChartTooltip(enabled: Signal<boolean>, resolve: (index: number) => WrChartTooltipTarget | null, sectionAt?: (x: number, y: number) => number | null): WrChartTooltip;
+
 declare class WrPopover {
     /**
      * Content to render inside the panel.
@@ -150,5 +301,5 @@ declare class WrPopover {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrPopover, "[wrPopover]", ["wrPopover"], { "content": { "alias": "wrPopover"; "required": true; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "showDelay": { "alias": "showDelay"; "required": false; "isSignal": true; }; "hideDelay": { "alias": "hideDelay"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
 }
 
-export { WrPopover };
-export type { WrPopoverPosition };
+export { WrPopover, useChartTooltip };
+export type { WrChartTooltip, WrChartTooltipDatum, WrChartTooltipTarget, WrPopoverPosition };

package/types/ngwr-select.d.ts

@@ -44,7 +44,11 @@ type WrSelectSize = 'sm' | 'md' | 'lg';
  *
  * - `'option'` — the row in the open panel.
  * - `'chip'` — a selected chip on a `mode="multi"` trigger.
- * - `'value'` — the selected value on a single-mode button trigger.
+ * - `'value'` — the selected value on a single-mode trigger: beside the label on
+ *   a button trigger, and before the input on a search-shaped one while that
+ *   input is showing the label. One placement rather than two, because it is one
+ *   surface — the same size is right on both, and splitting it would ask every
+ *   consumer to name a case they do not have.
  */
 type WrOptionLeadingPlacement = 'option' | 'chip' | 'value';
 /** Template context of `<ng-template wrOptionLeading>`. */
@@ -572,10 +576,38 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     private leadingFor;
     /**
      * The leading visual beside the selected value on a single-mode BUTTON trigger
-     * — one instance, for the one selected value. The search-shaped triggers do not
-     * draw one: their selection is an `<input>`'s text, which cannot hold markup.
+     * — one instance, for the one selected value. A search-shaped trigger draws the
+     * same visual through {@link searchLeading}, on a narrower condition.
      */
     protected readonly selectedLeading: _angular_core.Signal<TemplateRef<WrOptionLeadingContext<unknown>> | null>;
+    /**
+     * The same visual on a SEARCH-shaped trigger (`mode="search"`, a searchable
+     * single), drawn before the input — the surface an assignee picker actually
+     * uses, and the one that lost its avatar the moment the trigger became a field.
+     *
+     * The condition is {@link searchShowsValue} rather than `hasSelection()`, and
+     * the two part company on every open panel: focusing the field replaces the
+     * label with the live query, which starts empty, so what is on screen is the
+     * placeholder. An avatar left standing there names a value the field no longer
+     * shows, and then sits in front of whatever the user types next — the visual
+     * would be answering a different question from the text beside it. It comes
+     * back with the label, which is one signal flipping rather than two things
+     * kept in step: committing a choice clears the query and closes the panel.
+     *
+     * Nothing is instantiated for a search select with no selection, panel open or
+     * shut — `selectedLabel()` is `null` there, and this returns `null` with it.
+     *
+     * The COST of that rule, stated because it is a consumer's to weigh: stepping
+     * aside is a destroy, so opening the picker and dismissing it unchanged
+     * re-creates the visual — a template built on an `<img>` re-mounts once per
+     * round trip, and re-requests unless the cache answers. Kept rather than
+     * traded for a hidden-but-alive node: the panel's own rows already create and
+     * destroy one apiece on the same gesture, so holding this one back buys a
+     * fraction of that, and a node retained while it must not be seen is a second
+     * piece of state to keep in step with the field. Pinned in `option.spec.ts`
+     * ("re-creates it after a round trip"), so a future change here has to say so.
+     */
+    protected readonly searchLeading: _angular_core.Signal<TemplateRef<WrOptionLeadingContext<unknown>> | null>;
     /**
      * Trigger label for single mode. Multi reads `selectedChips` instead.
      *
@@ -748,6 +780,26 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     protected onSearchFocus(): void;
     protected onSearchBlur(): void;
     protected onSearchKey(event: KeyboardEvent): void;
+    /**
+     * Whether the search field is showing the SELECTED VALUE rather than a query.
+     * `searchDisplay` takes its text off this, and `searchLeading` the visual that
+     * goes before it, so the two can never disagree about which of the two things
+     * the field is holding.
+     *
+     * FOCUS as well as open, and that second term is the whole `[minChars]` story.
+     * Backspacing under the threshold closes the panel, and falling back to the
+     * selected label the moment `open()` goes false rewrote the field out from
+     * under someone who was still typing — "sma" -> "sm" showed an empty box.
+     *
+     * A NON-EMPTY query, though: picking an option clears it and leaves focus in
+     * the field, and there the label is what belongs on screen.
+     *
+     * Only the search-shaped trigger reads it. A searchable MULTI binds its input
+     * to `searchQuery()` directly and shows its selection as chips, which carry
+     * their own leading visuals whatever the field holds.
+     * @internal
+     */
+    protected readonly searchShowsValue: _angular_core.Signal<boolean>;
     /**
      * Display text for the search input. Shows the selected option's
      * label when collapsed, or the live query while typing / panel open.
@@ -997,9 +1049,14 @@ declare class WrOptionGroup {
  * - in an option row, while the panel is OPEN — destroyed again when it closes,
  *   and under `virtualScroll` only for the rows in the rendered window;
  * - in a selected chip on a `mode="multi"` trigger, one per visible chip;
- * - beside the selected value on a single-mode BUTTON trigger — one copy. The
- *   search-shaped triggers (`mode="search"`, `[searchable]`) do not draw it: their
- *   selection is the text of an `<input>`, which cannot hold markup.
+ * - beside the selected value on a single-mode BUTTON trigger — one copy;
+ * - before the input on a SEARCH-shaped trigger (`mode="search"`, a searchable
+ *   single), while that input is showing the selected label. It goes beside the
+ *   field rather than into it — an `<input>` holds a string — and it steps aside
+ *   while a query is on screen, panel open or half-typed, because the value it
+ *   names is not what the field is showing then. Picking an option brings it
+ *   back with the label. Stepping aside is a DESTROY, like a closing panel's
+ *   rows, so an `<img>`-backed visual re-mounts once per open-and-dismiss.
  *
  * Every copy sits in an `aria-hidden` wrapper and is skipped when the option's
  * text is read, so the trigger label, the chip, the search filter and the

package/types/ngwr-sidebar.d.ts

@@ -36,6 +36,13 @@ declare function isGroup(entry: WrSidebarEntry): entry is WrSidebarGroup;
  * `WrSidebarItem`s (direct links) or `WrSidebarGroup`s (expand to reveal
  * child items). Active route auto-expands its containing group.
  *
+ * The host pads its rows by `--wr-sidebar-padding` (`0.5rem`), so a hovered or
+ * active row's tint stays off the edge of whatever holds the nav, a bordered
+ * card or a `<wr-layout-sider>`, which pads nothing itself. Where the container
+ * already supplies the inset, set the hook to `0` on the sidebar, not on the
+ * container: the host declares its own default, which shadows an inherited one
+ * (`.my-panel .wr-sidebar { --wr-sidebar-padding: 0 }`, or inline).
+ *
  * @example
  * ```html
  * <wr-sidebar [entries]="[

package/types/ngwr-sparkline.d.ts

@@ -1,3 +1,4 @@
+import * as ngwr_popover from 'ngwr/popover';
 import * as _angular_core from '@angular/core';
 
 /**
@@ -36,9 +37,24 @@ declare class WrSparkline {
     readonly width: _angular_core.InputSignal<string>;
     /** CSS height. @default '2rem' */
     readonly height: _angular_core.InputSignal<string>;
+    /**
+     * Show a tooltip with the value of the point nearest the pointer, marking that
+     * point, and named by `ariaLabel` when one is given. Pointer only. @default true
+     */
+    readonly tooltip: _angular_core.InputSignalWithTransform<boolean, any>;
+    private readonly svg;
+    private readonly marker;
     private readonly vbW;
     private readonly vbH;
     private readonly padding;
+    /**
+     * The data as drawn. Non-finite values are dropped rather than scaled: every
+     * `min`/`max` comparison against a NaN is false, so it survived into the scale and
+     * `toFixed(2)` wrote the literal text `NaN` into the path `d` — invalid geometry,
+     * and the line vanishes. The tooltip reads this list too, so the value it shows is
+     * the one under the point it marks.
+     */
+    private readonly values;
     /** Mapped `{ x, y }` points for the path. */
     protected readonly points: _angular_core.Signal<readonly {
         x: number;
@@ -51,8 +67,34 @@ declare class WrSparkline {
         y: number;
     } | null>;
     protected readonly viewBox: string;
+    /**
+     * One tooltip, pointing at the hovered point: above its marker, below it when there
+     * is no room. The marker is the anchor element itself, drawn for the point the
+     * tooltip reads — it renders before this runs, since both follow `tip.active()`.
+     *
+     * The chip sits INSIDE the drawing, over the stretch of line above the marker, so the
+     * helper is also told which point any spot over the drawing reads: a pointer scrubbing
+     * along the top of a sparkline would otherwise land on the chip and stop there.
+     */
+    protected readonly tip: ngwr_popover.WrChartTooltip;
+    /**
+     * The marker's place, as percentages of the box the drawing stretches to. An
+     * element rather than a `<circle>`: the drawing stretches to any box with
+     * `preserveAspectRatio="none"`, which would squash a circle into an ellipse.
+     */
+    protected readonly markerAt: _angular_core.Signal<{
+        x: number;
+        y: number;
+    } | null>;
+    protected onPointerMove(event: MouseEvent): void;
+    /**
+     * The point nearest the pointer, along x only — the points are evenly spaced, so
+     * that is a rounding rather than a search. A box with no width (nothing laid out
+     * yet) answers nothing rather than a NaN index.
+     */
+    private indexAt;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSparkline, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSparkline, "wr-sparkline", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "showArea": { "alias": "showArea"; "required": false; "isSignal": true; }; "showTip": { "alias": "showTip"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSparkline, "wr-sparkline", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "showArea": { "alias": "showArea"; "required": false; "isSignal": true; }; "showTip": { "alias": "showTip"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { WrSparkline };

package/types/ngwr-toolbar.d.ts

@@ -4,6 +4,13 @@ import * as i0 from '@angular/core';
  * Action bar with three named zones — `[wrToolbarStart]`,
  * `[wrToolbarCenter]`, `[wrToolbarEnd]`. Use any one or all three.
  *
+ * A bare `<div>` wrapper in a zone, one with no `class` and no `style`, is laid
+ * out as a wrapping row with the zone's own gap, so the controls inside it are
+ * spaced exactly like controls projected one by one. The gap follows
+ * `--wr-density-gap`. Give the wrapper a class or a style and its layout is
+ * yours: the toolbar sets nothing on it. Put running text in a `<span>` or a
+ * `<p>`, which stay in inline flow.
+ *
  * @example
  * ```html
  * <wr-toolbar>

package/types/ngwr-version.d.ts

@@ -16,7 +16,7 @@ import { InjectionToken } from '@angular/core';
  * Distinct from `Version` exported by `@angular/core`, which reports the
  * loaded Angular runtime version (e.g. `'22.0.0'`), not ngwr's.
  */
-declare const NGWR_VERSION = "14.6.0";
+declare const NGWR_VERSION = "14.8.0";
 
 /**
  * @license