ngwr 14.7.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-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-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.7.0";
+declare const NGWR_VERSION = "14.8.0";
 
 /**
  * @license