ngwr 14.7.0 → 14.8.0

package/types/ngwr-date-picker.d.ts

@@ -1,8 +1,71 @@
 import * as _angular_core from '@angular/core';
-import { ElementRef } from '@angular/core';
+import { Signal, ElementRef } from '@angular/core';
 import { FormValueControl } from '@angular/forms/signals';
 import { WrDateFormat } from 'ngwr/date';
 
+/**
+ * @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
+ */
+/**
+ * Why the text typed into a picker's field was not committed.
+ *
+ * A picker never guesses: text it cannot read, or a date the calendar would
+ * refuse, leaves the bound value exactly as it was. This is the reason it
+ * refused, in the shape Angular's forms carry an error — `kind` is the key
+ * `<wr-form-field>` resolves a message for (`validation.<kind>` in the
+ * `ngwr/i18n` catalogs), and `message` is that sentence already resolved, for
+ * a template that renders errors itself.
+ *
+ * - `dateFormat` — the text does not read as a date in the field's format.
+ *   `example` is a date written in that format, for the message to show.
+ * - `minDate` / `maxDate` — the text reads, and the date is outside the bounds.
+ * - `dateFilter` — the text reads, and the `dateFilter` predicate rejects it.
+ *
+ * The same keys, and the same `min` / `max` payload, as `WrValidators.minDate`
+ * and `WrValidators.maxDate`, so one app-wide message covers both.
+ */
+type WrDateInputError = {
+    readonly kind: 'dateFormat';
+    readonly message: string;
+    readonly example: string;
+} | {
+    readonly kind: 'minDate';
+    readonly message: string;
+    readonly date: Date;
+    readonly min: Date;
+} | {
+    readonly kind: 'maxDate';
+    readonly message: string;
+    readonly date: Date;
+    readonly max: Date;
+} | {
+    readonly kind: 'dateFilter';
+    readonly message: string;
+    readonly date: Date;
+};
+/** A {@link WrDateInputError} from one end of a `<wr-date-range-picker>`. */
+type WrDateRangeInputError = WrDateInputError & {
+    readonly end: 'start' | '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
+ */
+/**
+ * The `<wr-date-range-picker>` value — `[start, end]`.
+ *
+ * Either end can be `null` while the range is half-picked, so a partially
+ * filled range is still representable. Structurally identical to
+ * `WrCalendarRange`, which the picker forwards it to.
+ */
+type WrDateRange = readonly [Date | null, Date | null];
+
 /**
  * Unified date / time / date-time picker. Same `<input>` + popover skeleton
  * for every mode — the overlay content swaps based on `[mode]`:
@@ -20,8 +83,12 @@ import { WrDateFormat } from 'ngwr/date';
  * `[(ngModel)]` / reactive forms keep working through Angular's bridge. Value
  * type is `Date | null` for every mode.
  *
- * Parses the input on every keystroke (silently — only emits when valid) and
- * re-formats canonical on blur. Format is driven by {@link WrDateAdapter}: it
+ * Parses the input on every keystroke and emits only a date it can read and the
+ * calendar would accept. Anything else is REFUSED, never guessed: the bound value
+ * stays where it was, and the text stays in the field so it can be corrected.
+ * Enter and leaving the field turn a refusal visible — see {@link inputError}.
+ * A committed date is re-formatted canonical on blur and on Enter. Format is
+ * driven by {@link WrDateAdapter}: it
  * accepts both named keys (`'shortDate'`, `'mediumDateTime'`, …) and raw
  * token strings (`'dd.MM.yyyy'`, `'HH:mm'`). When `format` is left at the
  * default (`null`), the picker derives the right named key from `mode`:
@@ -91,8 +158,8 @@ declare class WrDatePicker implements FormValueControl<Date | null> {
      * simply reads as `ltr`.
      */
     private readonly dir;
-    protected readonly inputEl: _angular_core.Signal<ElementRef<HTMLInputElement>>;
-    protected readonly triggerEl: _angular_core.Signal<ElementRef<HTMLButtonElement> | undefined>;
+    protected readonly inputEl: Signal<ElementRef<HTMLInputElement>>;
+    protected readonly triggerEl: Signal<ElementRef<HTMLButtonElement> | undefined>;
     /** The picked Date. Bound by `[formField]`, or two-way via `[(value)]`. */
     readonly value: _angular_core.ModelSignal<Date | null>;
     /** Emitted on blur so a bound field can mark itself touched. */
@@ -110,9 +177,9 @@ declare class WrDatePicker implements FormValueControl<Date | null> {
     /** Whether the panel this open cycle should take focus. */
     private autoFocusPanel;
     /** Resolved format — falls back to a mode-appropriate default. */
-    protected readonly resolvedFormat: _angular_core.Signal<string>;
-    protected readonly isTime: _angular_core.Signal<boolean>;
-    protected readonly isDateTime: _angular_core.Signal<boolean>;
+    protected readonly resolvedFormat: Signal<string>;
+    protected readonly isTime: Signal<boolean>;
+    protected readonly isDateTime: Signal<boolean>;
     private readonly labelDate;
     private readonly labelTime;
     private readonly labelDateTime;
@@ -126,8 +193,8 @@ declare class WrDatePicker implements FormValueControl<Date | null> {
      */
     readonly ariaLabel: _angular_core.InputSignal<string | null>;
     private readonly fieldLabel;
-    protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
-    protected readonly triggerLabel: _angular_core.Signal<string>;
+    protected readonly resolvedAriaLabel: Signal<string>;
+    protected readonly triggerLabel: Signal<string>;
     /**
      * Accessible name of the popup. The trigger advertises
      * `aria-haspopup="dialog"`, so the panel is a `role="dialog"` — and an unnamed
@@ -137,8 +204,83 @@ declare class WrDatePicker implements FormValueControl<Date | null> {
     readonly panelAriaLabel: _angular_core.InputSignal<string | null>;
     /** Popup id — what the trigger's `aria-controls` points at while open. */
     protected readonly panelId: string;
-    protected readonly resolvedPanelLabel: _angular_core.Signal<string>;
-    protected readonly classes: _angular_core.Signal<string>;
+    protected readonly resolvedPanelLabel: Signal<string>;
+    private readonly refusals;
+    private readonly reportToForm;
+    private readonly inputField;
+    /**
+     * Why the text in the field was not committed — `null` while the text is the value.
+     * Raised on the keystroke that makes the text unusable, and reported to a bound form
+     * from that keystroke on.
+     */
+    private readonly refusal;
+    /**
+     * Whether the refusal is on show. A refusal is raised on the keystroke but shown
+     * only once the user has finished — on Enter, or on leaving the field — because
+     * every date is unreadable for most of the time it takes to type one, and a field
+     * that turned red on the first digit would be telling the user off for typing.
+     * Once shown it follows the text live, so a correction clears it immediately.
+     *
+     * Leaving counts wherever focus goes, including by way of the open panel: moving
+     * into the panel waits, since a pick there replaces the text, but focus that leaves
+     * the panel for anything other than the field — or a panel that closes without a
+     * pick and without handing focus back to the field — has left too.
+     */
+    private readonly revealed;
+    /**
+     * Why the text in the field is not the bound value, once the picker is showing it —
+     * `null` while the text is the value, and `null` while the user is still typing.
+     *
+     * A refusal is raised on the keystroke that makes the text unreadable (`dateFormat`),
+     * out of `min` / `max` (`minDate` / `maxDate`) or rejected by `dateFilter`, and goes
+     * on show on Enter or when the user leaves the field — the same moment the border
+     * turns and the reason is announced, so a message rendered from this signal never
+     * disagrees with them. Once on show it follows the text, and it clears the moment the
+     * text becomes a date the picker commits, is emptied, or is replaced by a pick from
+     * the panel, a value written from outside, or a form reset. The value itself is never
+     * touched by a refusal.
+     *
+     * A bound form does NOT wait: `[formField]`, `[formControl]`, `formControlName` and
+     * `[(ngModel)]` see the refusal as a parse error from the keystroke, so the form is
+     * invalid the whole time the field holds text it could not use, and
+     * `<wr-form-field>` shows `message` by its own rule — once the control is touched or
+     * dirty. Read this through a template reference when the picker is bound with
+     * `[(value)]` alone and the reason should be on screen.
+     *
+     * @example
+     * ```html
+     * <wr-date-picker #due [(value)]="due" format="dd.MM.yyyy" />
+     * @if (due.inputError(); as error) {
+     *   <small>{{ error.message }}</small>
+     * }
+     * ```
+     */
+    readonly inputError: Signal<WrDateInputError | null>;
+    /**
+     * Blanked briefly so Enter on an unchanged refusal is announced again. A live region
+     * does not repeat text it already holds, and blanking it for one render is not
+     * enough: both changes land in the same task, and the accessibility tree sees
+     * only the end state. The gap is a timer for that reason — the CDK's
+     * `LiveAnnouncer` clears its region the same way.
+     */
+    private readonly silenced;
+    private silenceTimer;
+    protected readonly statusId: string;
+    /**
+     * What the picker's own live region says: the refusal on show, unless a surrounding
+     * `<wr-form-field>` is already rendering a message for it — that message is a
+     * `role="alert"`, and a second voice would repeat it.
+     */
+    protected readonly announcement: Signal<string>;
+    /**
+     * `aria-invalid` and `aria-describedby` for the text input, bound only with NO
+     * field around the picker. Inside one, `wrInput` writes both from the field — see
+     * `WrDateInputField` for why the picker feeds them through it rather than binding
+     * a second writer beside it.
+     */
+    protected readonly ownAriaInvalid: Signal<"true" | null>;
+    protected readonly ownDescribedBy: Signal<string | null>;
+    protected readonly classes: Signal<string>;
     private overlayRef;
     /** Live calendar ref while the date popover is open — lets the panel track
      * the typed value in real time (not just on reopen). */
@@ -164,7 +306,41 @@ declare class WrDatePicker implements FormValueControl<Date | null> {
      * the text field silently moved the value to another day.
      */
     private withKeptDate;
-    protected onBlur(): void;
+    protected onBlur(event: FocusEvent): void;
+    /**
+     * Enter is "this is the date". A date the picker committed is re-formatted
+     * canonical and the panel closes; text it refused turns invalid on the spot —
+     * border, `aria-invalid`, the reason announced — and emits `touch`, which is what
+     * makes a surrounding `<wr-form-field>` show its message. The panel closes in both
+     * cases: it opens directly below the field, which is exactly where that message
+     * renders.
+     *
+     * Never `preventDefault`: Enter inside a `<form>` still submits it, and a form
+     * bound to this picker is invalid while the refusal stands.
+     */
+    private onEnter;
+    /** Show the committed value canonically, or commit an emptied field as `null`. */
+    private settleText;
+    /**
+     * Record why the current text was not committed, or that it was. Clearing a
+     * refusal also takes it off show, so the next one waits for Enter or blur again.
+     */
+    private refuse;
+    /** Put a standing refusal on show — the user has left the field. */
+    private reveal;
+    /**
+     * The bound form was reset while the model stayed where it was — Angular has thrown
+     * the parse error away, so the text it was about goes too, and the field shows the
+     * value again. (A reset that MOVES the model reaches the text through the sync
+     * effect instead, like any other outside write.)
+     */
+    private onFormReset;
+    /**
+     * Focus leaving the open panel. Moving within it, or back to the text field, is
+     * still the same visit; anywhere else — the page, the trigger, the next control — is
+     * leaving, so a refusal that waited while focus went into the panel shows now.
+     */
+    private readonly onPaneFocusOut;
     /** Called by the input's click — opens the overlay if it isn't open already. */
     protected openOnInput(): void;
     protected toggleOverlay(): void;
@@ -203,29 +379,16 @@ declare class WrDatePicker implements FormValueControl<Date | null> {
      */
     private closeOverlay;
     private dispose;
-    private isOutOfBounds;
+    private outOfBounds;
     private sameDate;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrDatePicker, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrDatePicker, "wr-date-picker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "timeFormat": { "alias": "timeFormat"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "panelAriaLabel": { "alias": "panelAriaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
-/**
- * @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
- */
-/**
- * The `<wr-date-range-picker>` value — `[start, end]`.
- *
- * Either end can be `null` while the range is half-picked, so a partially
- * filled range is still representable. Structurally identical to
- * `WrCalendarRange`, which the picker forwards it to.
- */
-type WrDateRange = readonly [Date | null, Date | null];
-
 /** Which end of the range an edit applies to. */
 type RangeEnd = 0 | 1;
+/** One refusal per end, start first — `null` where that end's text is its date. */
+type EndRefusals = readonly [WrDateInputError | null, WrDateInputError | null];
 /**
  * Date-range picker — two text inputs sharing one range calendar.
  *
@@ -248,6 +411,10 @@ type RangeEnd = 0 | 1;
  * Either end may be `null` while the range is half-picked. Out-of-order ends
  * are swapped on commit, matching the calendar's own behaviour.
  *
+ * Each end refuses text it cannot use exactly as `<wr-date-picker>` does — never
+ * guessing, keeping the text, and showing the refusal on Enter or when focus
+ * leaves that end. See {@link inputErrors}.
+ *
  * @example
  * ```html
  * <!-- signal forms -->
@@ -322,9 +489,9 @@ declare class WrDateRangePicker implements FormValueControl<WrDateRange | null>
      * simply reads as `ltr`.
      */
     private readonly dir;
-    protected readonly startEl: _angular_core.Signal<ElementRef<HTMLInputElement>>;
-    protected readonly endEl: _angular_core.Signal<ElementRef<HTMLInputElement>>;
-    protected readonly triggerEl: _angular_core.Signal<ElementRef<HTMLButtonElement> | undefined>;
+    protected readonly startEl: Signal<ElementRef<HTMLInputElement>>;
+    protected readonly endEl: Signal<ElementRef<HTMLInputElement>>;
+    protected readonly triggerEl: Signal<ElementRef<HTMLButtonElement> | undefined>;
     /** The picked range. Bound by `[formField]`, or two-way via `[(value)]`. */
     readonly value: _angular_core.ModelSignal<WrDateRange | null>;
     /** Emitted on blur so a bound field can mark itself touched. */
@@ -345,11 +512,11 @@ declare class WrDateRangePicker implements FormValueControl<WrDateRange | null>
     /** Whether the panel this open cycle should take focus. */
     private autoFocusPanel;
     /** Resolved format — falls back to a mode-appropriate default. */
-    protected readonly resolvedFormat: _angular_core.Signal<string>;
-    protected readonly isDateTime: _angular_core.Signal<boolean>;
-    protected readonly triggerLabel: _angular_core.Signal<string>;
-    protected readonly startLabel: _angular_core.Signal<string>;
-    protected readonly endLabel: _angular_core.Signal<string>;
+    protected readonly resolvedFormat: Signal<string>;
+    protected readonly isDateTime: Signal<boolean>;
+    protected readonly triggerLabel: Signal<string>;
+    protected readonly startLabel: Signal<string>;
+    protected readonly endLabel: Signal<string>;
     private readonly panelLabelRange;
     private readonly panelLabelRangeDateTime;
     /**
@@ -361,8 +528,74 @@ declare class WrDateRangePicker implements FormValueControl<WrDateRange | null>
     readonly panelAriaLabel: _angular_core.InputSignal<string | null>;
     /** Popup id — what the trigger's `aria-controls` points at while open. */
     protected readonly panelId: string;
-    protected readonly resolvedPanelLabel: _angular_core.Signal<string>;
-    protected readonly classes: _angular_core.Signal<string>;
+    protected readonly resolvedPanelLabel: Signal<string>;
+    private readonly refusalBuilder;
+    private readonly reportToForm;
+    private readonly inputField;
+    /** Why each end's text was not committed. */
+    private readonly refusals;
+    /**
+     * Every refusal standing, on show or not, each marked with its end — what a bound form
+     * hears, from the keystroke.
+     */
+    private readonly raised;
+    /**
+     * Which ends have their refusal on show — raised on the keystroke, shown on Enter
+     * or when focus leaves that end, for the reason `wr-date-picker` gives at the same
+     * name: a date is unreadable for most of the time it takes to type one. Leaving
+     * includes leaving by way of the open panel, as it does there.
+     */
+    private readonly revealed;
+    protected readonly shownErrors: Signal<EndRefusals>;
+    /**
+     * Why the text in either field is not that end of the bound range, for the ends
+     * whose refusal the picker is SHOWING — one entry per end, marked with the `end` it
+     * came from, and empty while both fields hold their dates or the user is still
+     * typing.
+     *
+     * An end's refusal is raised on the keystroke and goes on show on Enter or when
+     * focus leaves that end — the moment its input turns invalid and the reason is
+     * announced, so a message rendered from this never disagrees with them. It clears
+     * the moment that end's text commits, is emptied, or is replaced by a pick from the
+     * panel, a value written from outside, or a form reset.
+     *
+     * A bound form does NOT wait: it sees every refusal as a parse error from the
+     * keystroke, so it is invalid the whole time either field holds text the picker
+     * could not use — including while the OTHER end commits — and `<wr-form-field>`
+     * shows `message` by its own rule. Read this through a template reference to put
+     * the reason on screen for a picker bound with `[(value)]` alone.
+     */
+    readonly inputErrors: Signal<readonly WrDateRangeInputError[]>;
+    /**
+     * Blanked briefly so Enter on an unchanged refusal is announced again. A live region
+     * does not repeat text it already holds, and blanking it for one render is not
+     * enough: both changes land in the same task, and the accessibility tree sees
+     * only the end state. The gap is a timer for that reason — the CDK's
+     * `LiveAnnouncer` clears its region the same way.
+     */
+    private readonly silenced;
+    private silenceTimer;
+    protected readonly statusId: string;
+    /**
+     * The live region's text: every refusal on show that a surrounding `<wr-form-field>`
+     * is not already rendering a message for, each sentence once.
+     */
+    protected readonly announcement: Signal<string>;
+    /**
+     * `aria-invalid` / `aria-describedby` for each input, where the picker binds them.
+     *
+     * The START input reads a surrounding field through `wrInput`, so inside one the
+     * picker feeds its refusal through `WrDateInputField` rather than binding a second
+     * writer beside `wrInput`, and binds these only with no field around it. The END
+     * input is hidden from the field on purpose (see `wrDateRangeEnd`), so its `wrInput`
+     * never writes either attribute and the picker always owns them: an unreadable end
+     * date marks the end field, not only the start.
+     */
+    protected readonly startAriaInvalid: Signal<"true" | null>;
+    protected readonly endAriaInvalid: Signal<"true" | null>;
+    protected readonly startDescribedBy: Signal<string | null>;
+    protected readonly endDescribedBy: Signal<string | null>;
+    protected readonly classes: Signal<string>;
     private overlayRef;
     /** Live panel ref while the popover is open — lets typed edits move the
      * displayed month in real time (not just on reopen). */
@@ -374,6 +607,38 @@ declare class WrDateRangePicker implements FormValueControl<WrDateRange | null>
     protected onStartInput(event: Event): void;
     protected onEndInput(event: Event): void;
     protected onBlur(event: FocusEvent): void;
+    /**
+     * Enter in either field is "this is the range". Committed ends are settled — sorted
+     * and re-formatted canonical — and the panel closes; a refused end turns invalid on
+     * the spot, and `touch` is emitted so a surrounding `<wr-form-field>` shows its
+     * message, which the panel would otherwise cover. Never `preventDefault`: Enter in a
+     * `<form>` still submits it, and a bound form is invalid while a refusal stands.
+     */
+    private onEnter;
+    /** Put the refusals of the given ends on show; an end with no refusal stays clear. */
+    private reveal;
+    /**
+     * Record why one end's text was not committed, or that it was. Clearing a refusal
+     * takes it off show too, so the next one waits for Enter or blur again.
+     */
+    private refuse;
+    /**
+     * Put the refusals on show for wherever focus has gone: back into one field leaves
+     * the OTHER end, and anywhere outside the pair leaves both.
+     */
+    private revealFor;
+    /**
+     * The bound form was reset while the model stayed where it was — Angular has thrown
+     * the parse errors away, so the text they were about goes too, and both fields show
+     * the range again. (A reset that MOVES the model reaches the text through the sync
+     * effect, like any other outside write.)
+     */
+    private onFormReset;
+    /**
+     * Focus leaving the open panel. Moving within it is the same visit; anywhere else has
+     * left whichever end focus is not going back to — see {@link revealFor}.
+     */
+    private readonly onPaneFocusOut;
     /** Called by an input's click — opens the overlay if it isn't open already. */
     protected openOnInput(end: RangeEnd): void;
     protected toggleOverlay(): void;
@@ -432,11 +697,11 @@ declare class WrDateRangePicker implements FormValueControl<WrDateRange | null>
      */
     private compareEnds;
     /**
-     * Whether a typed date must be rejected. Covers `dateFilter` as well as the
-     * bounds — the calendar disables filtered days, so accepting them from the
+     * Why a typed date must be rejected, or `null`. Covers `dateFilter` as well as
+     * the bounds — the calendar disables filtered days, so accepting them from the
      * keyboard would make the two entry paths disagree.
      */
-    private isOutOfBounds;
+    private outOfBounds;
     private sameDate;
     /**
      * `null` and `[null, null]` are the same VALUE — an empty range — and treating
@@ -453,4 +718,4 @@ declare class WrDateRangePicker implements FormValueControl<WrDateRange | null>
 }
 
 export { WrDatePicker, WrDateRangePicker };
-export type { WrDateRange };
+export type { WrDateInputError, WrDateRange, WrDateRangeInputError };

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

@@ -1,3 +1,4 @@
+import * as ngwr_popover from 'ngwr/popover';
 import * as _angular_core from '@angular/core';
 
 interface WrDonutSegment {
@@ -39,6 +40,13 @@ declare class WrDonutChart {
     readonly centerValue: _angular_core.InputSignal<string>;
     /** Smaller label under the value. */
     readonly centerLabel: _angular_core.InputSignal<string>;
+    /**
+     * Show a tooltip with the slice's label and value on hover. Pointer only — the
+     * legend prints the same numbers, and with `showLegend` off `ariaLabel` is where
+     * to say them. @default true
+     */
+    readonly tooltip: _angular_core.InputSignalWithTransform<boolean, any>;
+    private readonly svg;
     private readonly outerR;
     protected readonly innerR: _angular_core.Signal<number>;
     protected readonly total: _angular_core.Signal<number>;
@@ -49,11 +57,26 @@ declare class WrDonutChart {
         color: string;
         path: string;
         percent: number;
+        midAngle: number;
     }[]>;
+    /**
+     * One tooltip for the whole chart, pointing at the hovered slice: at the middle of
+     * its OUTER arc, on the side that part of the ring faces — above for a slice whose
+     * middle is in the top quarter, below for the bottom one, beside it for the two at
+     * three and nine o'clock. From there the chip sits clear of the ring, and the way
+     * onto it runs straight out of the slice that opened it, over nothing else.
+     *
+     * Not the slice's `<path>` element: its box is most of the ring for any slice past
+     * a quarter, so the chip would point at the middle of the chart. And not the middle
+     * of the band: a chip there lies over the ring, under a pointer resting on it —
+     * measured in Chromium, the inner half of a lower slice landed on its own chip. A
+     * tiny slice keeps its own mid-angle, so the arrow says which sliver it is.
+     */
+    protected readonly tip: ngwr_popover.WrChartTooltip;
     /** SVG path for one donut slice using outer and inner arcs. */
     private arcPath;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrDonutChart, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrDonutChart, "wr-donut-chart", never, { "segments": { "alias": "segments"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "thickness": { "alias": "thickness"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "centerValue": { "alias": "centerValue"; "required": false; "isSignal": true; }; "centerLabel": { "alias": "centerLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrDonutChart, "wr-donut-chart", never, { "segments": { "alias": "segments"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "thickness": { "alias": "thickness"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "centerValue": { "alias": "centerValue"; "required": false; "isSignal": true; }; "centerLabel": { "alias": "centerLabel"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { WrDonutChart };

package/types/ngwr-dropdown.d.ts

@@ -58,8 +58,28 @@ declare class WrDropdown {
     readonly menu: _angular_core.InputSignal<WrDropdownMenu>;
     /** How the menu opens. @default 'click' */
     readonly trigger: _angular_core.InputSignal<WrDropdownTrigger>;
-    /** Where the menu anchors relative to the trigger. @default 'bottom-start' */
+    /**
+     * Where the menu anchors relative to the trigger. A placement that does not
+     * fit flips to the opposite side (a `left` / `right` menu may also drop below
+     * or above, and then stays there until it closes), and the pane's
+     * `wr-dropdown-overlay--<placement>` class names the side it actually took.
+     * @default 'bottom-start'
+     */
     readonly position: _angular_core.InputSignal<WrDropdownPosition>;
+    /**
+     * Draw a small arrow on the menu's edge, pointing at the trigger — the one
+     * `wr-popover` and `wr-popconfirm` draw, from the same shared rule. It follows
+     * the placement the menu actually took, so a flipped menu points the right
+     * way, and it widens the gap to the trigger from 0.25rem to popover's 0.5rem
+     * so the tip does not touch the control.
+     *
+     * Never drawn on a bottom sheet (`responsive`), which is anchored to nothing.
+     * Turn it off on a menu with no padding of its own (`--wr-dropdown-padding: 0`)
+     * or one that clips its overflow: the square reaches about 3px inside the
+     * menu's border, over the first row, and `overflow` cuts its tip off.
+     * Read when the menu opens. @default true
+     */
+    readonly arrow: _angular_core.InputSignalWithTransform<boolean, any>;
     /**
      * Present the menu as a full-width bottom-sheet on small viewports instead
      * of an anchored panel. `undefined` follows the app-wide
@@ -161,7 +181,7 @@ declare class WrDropdown {
     private focusItemAt;
     private readonly onOverlayMouseLeave;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrDropdown, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrDropdown, "[wrDropdown]", ["wrDropdown"], { "menu": { "alias": "wrDropdown"; "required": true; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrDropdown, "[wrDropdown]", ["wrDropdown"], { "menu": { "alias": "wrDropdown"; "required": true; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "arrow": { "alias": "arrow"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
 }
 
 /**

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

@@ -126,6 +126,11 @@ interface DayCell {
 interface MonthWeek {
     readonly key: string;
     readonly days: readonly DayCell[];
+    /**
+     * How many lanes the row's chips fill. The chips are absolutely positioned,
+     * so this is the only way the row's height can know about them.
+     */
+    readonly lanes: number;
 }
 interface TimeCell {
     readonly key: string;
@@ -291,6 +296,8 @@ declare class WrEventCalendar {
         bands: readonly BandChip[];
     }[]>;
     protected readonly hasAllDay: _angular_core.Signal<boolean>;
+    /** Lanes the all-day band fills — it has no `maxLanes` cap, so its row has to grow instead. */
+    protected readonly allDayLanes: _angular_core.Signal<number>;
     protected readonly rows: _angular_core.Signal<readonly TimeRow[]>;
     protected step(direction: -1 | 1): void;
     protected goToday(): void;
@@ -323,6 +330,7 @@ declare class WrEventCalendar {
      * the cell can say how much it is hiding.
      */
     private bandLayout;
+    private laneCount;
     /**
      * Column layout inside one day: events that overlap in time share the width.
      * Clusters are built by a running high-water mark — a new cluster starts the

package/types/ngwr-form.d.ts

@@ -1,7 +1,6 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken, Signal, EnvironmentProviders } from '@angular/core';
-import * as _angular_forms from '@angular/forms';
-import { NgControl } from '@angular/forms';
+import { InjectionToken, Signal, AfterContentChecked, EnvironmentProviders } from '@angular/core';
+import { NgControl, ValidationErrors } from '@angular/forms';
 import * as _angular_forms_signals from '@angular/forms/signals';
 
 /**
@@ -153,7 +152,7 @@ declare class WrFormError {
  *
  * @see https://ngwr.dev/reference/components/form-field
  */
-declare class WrFormField implements WrFormFieldContext {
+declare class WrFormField implements WrFormFieldContext, AfterContentChecked {
     /** Label text shown above the control. */
     readonly label: _angular_core.InputSignal<string>;
     /** Hint text shown below the control. Hidden when an error is visible. */
@@ -205,10 +204,41 @@ declare class WrFormField implements WrFormFieldContext {
      * Angular does expose, so the computed depends on this counter instead.
      * Signal Forms needs none of this — its interop getters read live signals —
      * and harmlessly contributes no events.
+     *
+     * Events are not the whole story, which is what {@link ngAfterContentChecked} is for.
      */
     private readonly revision;
+    /** What the last check saw on a reactive control — see {@link ngAfterContentChecked}. */
+    private seen;
+    /**
+     * Catch the changes a reactive control makes WITHOUT an event.
+     *
+     * `updateValueAndValidity({ emitEvent: false })`, `markAsTouched({ emitEvent: false })`
+     * and their siblings change `errors`, `touched` and `dirty` and emit nothing, so the
+     * subscription above never hears them and the message stays whatever it was. That is
+     * not only an app's own silent write: Angular reports a custom control's PARSE errors
+     * to a `FormControl` exactly that way — a validator re-run with `emitEvent: false` —
+     * so a `wr-date-picker` refusing typed text made its control invalid while the field
+     * went on showing the message from before, or nothing — and a later pass of change
+     * detection did not help, because the message was memoised on a revision only events
+     * move.
+     *
+     * This runs whenever the view holding the field is checked, which is when the page
+     * around the control changes — for the date picker, the moment its refusal turns
+     * visible. It is `ngAfterContentChecked` and not `ngDoCheck` for an ordering reason
+     * read out of Angular's `refreshView`: check hooks run BEFORE the view's effects, and
+     * Angular's parse-error validator is re-run from an effect in that same view, so a
+     * `DoCheck` saw the errors one pass late and lost the message whenever nothing
+     * refreshed the view again. Content-checked hooks run after those effects and before
+     * the field's own bindings. Only a change moves the revision.
+     *
+     * Signal Forms' interop control is skipped: it is reactive already, and its `errors`
+     * getter builds a fresh object on every read, which a reference check would call a
+     * change on every pass — and re-resolve every message with it.
+     */
+    ngAfterContentChecked(): void;
     constructor();
-    protected readonly errors: _angular_core.Signal<_angular_forms.ValidationErrors | null>;
+    protected readonly errors: _angular_core.Signal<ValidationErrors | null>;
     protected readonly hasError: _angular_core.Signal<boolean>;
     /** @internal Read by the projected `<wr-form-error>` children to decide which of them renders. */
     readonly errorKeys: _angular_core.Signal<readonly string[]>;