ngwr 10.2.0 → 11.0.0

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

@@ -84,6 +84,7 @@ declare class WrDatePicker implements FormValueControl<Date | null> {
     private readonly host;
     private readonly destroyRef;
     protected readonly inputEl: _angular_core.Signal<ElementRef<HTMLInputElement>>;
+    protected readonly triggerEl: _angular_core.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. */
@@ -92,6 +93,14 @@ declare class WrDatePicker implements FormValueControl<Date | null> {
     protected readonly text: _angular_core.WritableSignal<string>;
     /** Whether the popover is currently open. */
     protected readonly overlayOpen: _angular_core.WritableSignal<boolean>;
+    /**
+     * Where focus came from, captured as an explicit argument at open time —
+     * never read off `document.activeElement`, which by then may already be the
+     * pane. Every close path that took focus INTO the panel hands it back here.
+     */
+    private openedFrom;
+    /** 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>;
@@ -99,6 +108,9 @@ declare class WrDatePicker implements FormValueControl<Date | null> {
     private readonly labelDate;
     private readonly labelTime;
     private readonly labelDateTime;
+    private readonly panelLabelDate;
+    private readonly panelLabelTime;
+    private readonly panelLabelDateTime;
     /**
      * Accessible name of the text field. Falls back to the placeholder, then to
      * the same catalog string the calendar button uses — the field is a
@@ -108,11 +120,25 @@ declare class WrDatePicker implements FormValueControl<Date | null> {
     private readonly fieldLabel;
     protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
     protected readonly triggerLabel: _angular_core.Signal<string>;
+    /**
+     * Accessible name of the popup. The trigger advertises
+     * `aria-haspopup="dialog"`, so the panel is a `role="dialog"` — and an unnamed
+     * dialog announces as a bare "dialog". Defaults to the catalog's
+     * `datePicker.panel*` string for the current `mode`.
+     */
+    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>;
     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). */
     private readonly dateRef;
+    private readonly timeRef;
+    private readonly dateTimeRef;
+    /** The last value an open panel handed us, so the live push never echoes it back. */
+    private lastFromPanel;
     /** Last value we pushed into the model ourselves — lets the sync effect
      * skip the echo of our own edits (so a live keystroke's raw text is never
      * reformatted mid-type). */
@@ -123,6 +149,24 @@ declare class WrDatePicker implements FormValueControl<Date | null> {
     /** Called by the input's click — opens the overlay if it isn't open already. */
     protected openOnInput(): void;
     protected toggleOverlay(): void;
+    /**
+     * The keyboard route into the panel, per the APG date-picker pattern.
+     *
+     * `Alt+ArrowDown` opens and takes focus; a bare arrow moves focus in when the
+     * panel is ALREADY open, which is how someone who opened it by clicking the
+     * field gets to the grid. Every other key — characters, Backspace, the
+     * horizontal arrows, Home / End — is left to the field untouched, so typing a
+     * date keeps working exactly as before.
+     */
+    protected onFieldKey(event: KeyboardEvent): void;
+    /**
+     * Move focus into an already-mounted panel. A plain query is right HERE and
+     * wrong at mount time: the panel has settled, so there is no deferral to get
+     * wrong — and it keeps `autoFocus` as the single piece of panel API.
+     */
+    private focusPanel;
+    /** Hand focus back to whatever opened the panel, if it is still on the page. */
+    private restoreFocus;
     private openOverlay;
     private attachDate;
     private attachTime;
@@ -131,12 +175,19 @@ declare class WrDatePicker implements FormValueControl<Date | null> {
     /** Push a value to the model while remembering it, so the sync effect treats
      * the resulting change as an echo and leaves the display text alone. */
     private commitValue;
+    /**
+     * Focus goes back to the opener only when it was still INSIDE the panel —
+     * dropped there, it would land on `<body>` and the next Tab would restart
+     * from the top of the page. When focus had already moved elsewhere (a click
+     * on another control, which is itself what closed us) it is left alone:
+     * stealing it back would fight the user for the caret.
+     */
     private closeOverlay;
     private dispose;
     private isOutOfBounds;
     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; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, 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>;
 }
 
 /**
@@ -154,6 +205,8 @@ declare class WrDatePicker implements FormValueControl<Date | null> {
  */
 type WrDateRange = readonly [Date | null, Date | null];
 
+/** Which end of the range an edit applies to. */
+type RangeEnd = 0 | 1;
 /**
  * Date-range picker — two text inputs sharing one range calendar.
  *
@@ -224,7 +277,17 @@ declare class WrDateRangePicker implements FormValueControl<WrDateRange | null>
      * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
-    /** Read-only — inputs not typeable, but the trigger icon still opens the overlay. @default false */
+    /**
+     * Read-only — neither the inputs nor the calendar can change the value.
+     *
+     * Deliberately stricter than `wr-date-picker`, which still opens its popup
+     * while read-only: with two fields feeding one calendar there is no reading
+     * of "untypeable" that leaves the grid free to rewrite both ends. The doc
+     * used to promise the trigger still opened; the code has always refused, and
+     * refusing is the behaviour worth keeping.
+     *
+     * @default false
+     */
     readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
     private readonly adapter;
     private readonly overlay;
@@ -233,6 +296,8 @@ declare class WrDateRangePicker implements FormValueControl<WrDateRange | null>
     private readonly host;
     private readonly destroyRef;
     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>;
     /** 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. */
@@ -242,12 +307,34 @@ declare class WrDateRangePicker implements FormValueControl<WrDateRange | null>
     protected readonly endText: _angular_core.WritableSignal<string>;
     /** Whether the popover is currently open. */
     protected readonly overlayOpen: _angular_core.WritableSignal<boolean>;
+    /**
+     * Which element opened the popup — captured as an argument, never read off
+     * `document.activeElement`, which by then may already be the pane. With TWO
+     * text inputs this is the whole point: "restore focus to the field" is
+     * ambiguous here, and the old code resolved it by always picking the START
+     * input, so closing from the end input threw the caret across the control.
+     */
+    private openedFrom;
+    /** 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: string;
     protected readonly startLabel: string;
     protected readonly endLabel: string;
+    private readonly panelLabelRange;
+    private readonly panelLabelRangeDateTime;
+    /**
+     * Accessible name of the popup. The trigger advertises
+     * `aria-haspopup="dialog"`, so the pane is a `role="dialog"` — and an unnamed
+     * dialog announces as a bare "dialog". Defaults to the catalog's
+     * `datePicker.panelRange*` string for the current `mode`.
+     */
+    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>;
     private overlayRef;
     /** Live panel ref while the popover is open — lets typed edits move the
@@ -261,15 +348,39 @@ declare class WrDateRangePicker implements FormValueControl<WrDateRange | null>
     protected onEndInput(event: Event): void;
     protected onBlur(event: FocusEvent): void;
     /** Called by an input's click — opens the overlay if it isn't open already. */
-    protected openOnInput(): void;
+    protected openOnInput(end: RangeEnd): void;
     protected toggleOverlay(): void;
+    /**
+     * The keyboard route into the popup, per the APG date-picker pattern, and the
+     * only one either field has. `Alt+ArrowDown` opens and takes focus; a bare
+     * vertical arrow walks focus in when the popup is ALREADY open, which is how
+     * someone who opened it by clicking a field reaches the grid. Every other key
+     * belongs to the field, so typing a date keeps working with the popup open.
+     */
+    protected onFieldKey(event: KeyboardEvent, end: RangeEnd): void;
+    /** The input element for an end — the two are otherwise addressed by index. */
+    private fieldEl;
+    /**
+     * Move focus into an already-mounted panel. A plain query is right HERE and
+     * wrong at mount time: the panel has settled, so there is no deferral to get
+     * wrong — and it keeps `autoFocus` as the single piece of panel API.
+     */
+    private focusPanel;
+    /** Hand focus back to whatever opened the popup, if it is still on the page. */
+    private restoreFocus;
     private onRangeInput;
     private openOverlay;
     /**
-     * Close the popover. `restoreFocus` returns focus to the start input — needed
-     * when the overlay is dismissed while focus lives inside it (picking the
-     * second date), because disposing then leaves focus on a removed element and
-     * the browser falls back to `<body>`.
+     * Close the popover, handing focus back to whichever field or button opened
+     * it — but ONLY when focus was still inside the pane. Dropped there it would
+     * land on `<body>` and the next Tab would restart from the top of the page;
+     * moved on by the user, it must be left where they put it.
+     *
+     * There is deliberately no "always restore" escape hatch. Escape reaches this
+     * overlay from anywhere in the document (the CDK dispatches it to the topmost
+     * one), so forcing a restore would drag the caret backwards out of the field
+     * the user was actually typing in — into the one that happened to open the
+     * popup, possibly several Tab stops away.
      */
     private closeOverlay;
     private dispose;
@@ -300,9 +411,18 @@ declare class WrDateRangePicker implements FormValueControl<WrDateRange | null>
      */
     private isOutOfBounds;
     private sameDate;
+    /**
+     * `null` and `[null, null]` are the same VALUE — an empty range — and treating
+     * them as different is what let the FIRST blur on an untouched picker write
+     * `[null, null]` over the `null` it was bound to. No date had moved, but
+     * `model()` emitted: a bound `[formField]` went dirty from nothing but tabbing
+     * through, and a consumer's `@if (period())` flipped from empty to truthy with
+     * neither end picked. The write guard in `commitRange` is only as good as this
+     * comparison.
+     */
     private sameRange;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrDateRangePicker, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrDateRangePicker, "wr-date-range-picker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "startPlaceholder": { "alias": "startPlaceholder"; "required": false; "isSignal": true; }; "endPlaceholder": { "alias": "endPlaceholder"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "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; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrDateRangePicker, "wr-date-range-picker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "startPlaceholder": { "alias": "startPlaceholder"; "required": false; "isSignal": true; }; "endPlaceholder": { "alias": "endPlaceholder"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "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; }; "panelAriaLabel": { "alias": "panelAriaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { WrDatePicker, WrDateRangePicker };

package/types/ngwr-dialog-testing.d.ts

@@ -0,0 +1,79 @@
+import { BaseHarnessFilters, ContentContainerComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+
+/**
+ * @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
+ */
+
+/** Narrows which open dialog a harness query matches. */
+interface WrDialogHarnessFilters extends BaseHarnessFilters {
+    /**
+     * Match the dialog's `[wrDialogTitle]` text — a string is an exact match, a
+     * RegExp is tested. A dialog with no title never matches.
+     */
+    readonly title?: string | RegExp;
+}
+
+/**
+ * @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
+ */
+
+/**
+ * Test harness for a dialog opened with `WrDialog.open()`.
+ *
+ * A dialog is never inside the fixture — `WrDialog` attaches it to the overlay
+ * container — so load this from `TestbedHarnessEnvironment.documentRootLoader()`
+ * rather than from `loader()`. The harness is a CONTENT CONTAINER, which is what
+ * makes the interesting assertions possible: the buttons and fields it holds are
+ * the consumer's own components, so `dialog.getHarness(WrButtonHarness…)` reads
+ * them without the spec ever touching the overlay.
+ *
+ * @example
+ * ```ts
+ * const rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+ * const dialog = await rootLoader.getHarness(WrDialogHarness);
+ *
+ * expect(await dialog.getTitleText()).toBe('Delete this item?');
+ * await (await dialog.getHarness(WrButtonHarness.with({ text: 'Delete' }))).click();
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+declare class WrDialogHarness extends ContentContainerComponentHarness {
+    /** The overlay panel `WrDialog` creates. */
+    static hostSelector: string;
+    /** Build a predicate that narrows the query — useful when two dialogs are stacked. */
+    static with(options?: WrDialogHarnessFilters): HarnessPredicate<WrDialogHarness>;
+    /** The `[wrDialogTitle]` text, or `null` when the dialog has no title. */
+    getTitleText(): Promise<string | null>;
+    /** The `[wrDialogContent]` text, or `null` when the dialog projects no content region. */
+    getContentText(): Promise<string | null>;
+    /**
+     * The role and modality the dialog announces.
+     *
+     * Worth asserting rather than assuming: `WrDialog` sets these on the OVERLAY
+     * element, not on the component it renders, so a consumer looking for them on
+     * their own host would not find them.
+     */
+    getRole(): Promise<string | null>;
+    /** Whether the dialog is marked `aria-modal`. */
+    isModal(): Promise<boolean>;
+    /** Whether the built-in dismiss button is present (`closable`, the default). */
+    isClosable(): Promise<boolean>;
+    /** The dismiss button's accessible name — the string a screen reader reads out. */
+    getCloseLabel(): Promise<string | null>;
+    /** Click the built-in dismiss button. Throws when the dialog was opened `closable: false`. */
+    close(): Promise<void>;
+    /** Press Escape. A dialog opened `closeOnEscape: false` ignores it — assert, do not assume. */
+    sendEscape(): Promise<void>;
+    /** Whether focus is currently somewhere inside the dialog, where the trap should keep it. */
+    isFocusTrapped(): Promise<boolean>;
+}
+
+export { WrDialogHarness };
+export type { WrDialogHarnessFilters };

package/types/ngwr-dialog.d.ts

@@ -140,6 +140,19 @@ declare class WrDialog {
     private readonly responsiveConfig;
     private readonly i18n;
     open<C, R = unknown, D = unknown>(component: ComponentType<C>, options?: WrDialogOptions<D>): WrDialogRef<C, R>;
+    /**
+     * The dismiss button's accessible name.
+     *
+     * Two failure modes, and resolving PER OPEN is what covers both. `t()` hands
+     * back the KEY on a miss, and `WrI18n` is root-provided with an empty catalog
+     * by default, so an app that never configured i18n named its dismiss button
+     * "dialog.close" — a name axe cannot fault, because a name is present, and a
+     * screen reader reads out verbatim. Resolving once at injection time fixed
+     * that but froze the answer: this is a root service, constructed before an
+     * async catalog has loaded, so a localized app got the English fallback on
+     * every dialog it ever opened.
+     */
+    private closeLabel;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrDialog, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<WrDialog>;
 }

package/types/ngwr-directives.d.ts

@@ -85,7 +85,16 @@ declare class WrCopyToClipboard {
     private readonly doc;
     /** @internal */
     protected onClick(): Promise<void>;
-    /** Legacy clipboard write — hidden textarea + execCommand('copy'). */
+    /**
+     * Legacy clipboard write — hidden textarea + `execCommand('copy')`.
+     *
+     * Two things this has to get right beyond writing the text. `execCommand`
+     * REPORTS refusal rather than throwing it: a document without focus hands back
+     * `false` and copies nothing, so ignoring the return value shows a "Copied!"
+     * toast over an unchanged clipboard. And selecting the textarea moves focus
+     * into it, so removing the node afterwards drops focus on `<body>` — the user's
+     * next Tab restarts from the top of the page, on every copy.
+     */
     private fallback;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrCopyToClipboard, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<WrCopyToClipboard, "[wrCopyToClipboard]", never, { "wrCopyToClipboard": { "alias": "wrCopyToClipboard"; "required": true; "isSignal": true; }; }, { "copied": "copied"; "copyFailed": "copyFailed"; }, never, never, true, never>;

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

@@ -22,6 +22,13 @@ interface WrDonutSegment {
  */
 declare class WrDonutChart {
     readonly segments: _angular_core.InputSignal<readonly WrDonutSegment[]>;
+    /**
+     * Accessible name of the chart. The ring is `aria-hidden` and the legend is optional,
+     * so with `showLegend: false` this is the only thing a screen reader gets. Falls back
+     * to `donutChart.label`.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
     /** Diameter in CSS pixels. @default 200 */
     readonly size: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Inner-ring thickness as a percent of radius (0–100). `0` = solid pie. @default 30 */
@@ -46,7 +53,7 @@ declare class WrDonutChart {
     /** 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; }; "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; }; }, {}, never, never, true, never>;
 }
 
 export { WrDonutChart };

package/types/ngwr-drawer-testing.d.ts

@@ -0,0 +1,196 @@
+import { BaseHarnessFilters, ContentContainerComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+import { WrDrawerPosition } from 'ngwr/drawer';
+
+/**
+ * @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
+ */
+
+/** Narrows which open drawer a harness query matches. */
+interface WrDrawerHarnessFilters extends BaseHarnessFilters {
+    /**
+     * Match the `[wrDrawerTitle]` text — a string is an exact match, a RegExp is
+     * tested. A drawer with no title never matches.
+     */
+    readonly title?: string | RegExp;
+    /**
+     * Match the `[wrDrawerContent]` text. A drawer whose content is not wrapped in
+     * that directive never matches.
+     */
+    readonly content?: string | RegExp;
+    /** Match the edge the drawer slid in from: `left`, `right`, `top` or `bottom`. */
+    readonly position?: WrDrawerPosition;
+}
+
+/**
+ * @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
+ */
+
+/**
+ * Test harness for an open drawer — both flavours.
+ *
+ * A drawer ships as an element (`<wr-drawer [(open)]="…">`) AND as a service call
+ * (`WrDrawerManager.open(Cmp)`), but neither puts the panel where a consumer's
+ * spec can see it: both render into the NGWR overlay container, a sibling of the
+ * whole app. So this is loaded from `TestbedHarnessEnvironment.documentRootLoader()`
+ * in BOTH cases — a fixture-scoped loader finds nothing, including for the element
+ * form, whose `<wr-drawer>` host is `display: none` and holds no content.
+ *
+ * The harness is anchored on the overlay pane, which is the one element the two
+ * flavours share: for `<wr-drawer>` it wraps the panel div, for the manager it IS
+ * the panel (the caller's component is attached straight into it). It is also the
+ * only per-instance anchor there is — `<wr-drawer>` publishes no `aria-controls` /
+ * `aria-owns` link to the overlay it opened — which is why every query here starts
+ * from the pane rather than from a class in the shared container.
+ *
+ * The harness is a CONTENT CONTAINER: the fields and buttons in the panel are the
+ * consumer's own components, so `drawer.getHarness(WrButtonHarness…)` reads them
+ * without the spec ever touching the overlay.
+ *
+ * @example
+ * ```ts
+ * const rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+ * const drawer = await rootLoader.getHarness(WrDrawerHarness.with({ title: 'Filters' }));
+ *
+ * expect(await drawer.getPosition()).toBe('bottom');
+ * expect(await drawer.isSheet()).toBe(true);
+ * await drawer.close();
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+declare class WrDrawerHarness extends ContentContainerComponentHarness {
+    /** The overlay pane both flavours create. A closed drawer has none. */
+    static hostSelector: string;
+    /** Build a predicate that narrows the query — drawers can be stacked. */
+    static with(options?: WrDrawerHarnessFilters): HarnessPredicate<WrDrawerHarness>;
+    /**
+     * Whether this drawer is still open.
+     *
+     * A harness can only be obtained while a drawer is open — closing disposes the
+     * overlay, panel and all — so this is the answer for a harness you are already
+     * HOLDING: it flips to `false` after a dismissal, where a fresh
+     * `getHarnessOrNull()` comes back `null`.
+     *
+     * Attachment is the test, not a class: disposal takes the pane out of the
+     * document along with its wrapper, so the `body` ancestor in the selector is what
+     * distinguishes a live panel from the detached element a stale harness holds.
+     */
+    isOpen(): Promise<boolean>;
+    /** The `[wrDrawerTitle]` text, or `null` when the drawer has no title. */
+    getTitleText(): Promise<string | null>;
+    /** The `[wrDrawerContent]` text, or `null` when the body is not wrapped in it. */
+    getContentText(): Promise<string | null>;
+    /**
+     * The edge the drawer is attached to.
+     *
+     * Read from the overlay's own side modifier, which both flavours set and consumer
+     * CSS targets. It is a real mode axis rather than a style flag: left/right size
+     * themselves from `width` and stretch full-height, top/bottom span the viewport
+     * and size themselves from `height` / `maxHeight`.
+     */
+    getPosition(): Promise<WrDrawerPosition>;
+    /**
+     * Whether the drawer presents as a SHEET rather than a side panel — the top and
+     * bottom edges, where it spans the full viewport width and takes its size from
+     * `height` / `maxHeight`.
+     *
+     * This answers the axis only. The bottom-sheet look is that plus `rounded` and
+     * `showHandle`, which {@link isRounded} and {@link hasHandle} answer separately.
+     */
+    isSheet(): Promise<boolean>;
+    /** Whether the leading corners are rounded (`rounded`). */
+    isRounded(): Promise<boolean>;
+    /** Whether the trailing edge is padded for the device's safe area (`safeArea`). */
+    hasSafeArea(): Promise<boolean>;
+    /**
+     * Whether the drawer draws a grab handle (`showHandle`), which is also what
+     * enables swipe-to-dismiss.
+     *
+     * Always `false` for a `WrDrawerManager.open()` drawer, and not a defect: the
+     * handle lives in the component's own wrapper markup, which the service path
+     * replaces with the caller's component.
+     */
+    hasHandle(): Promise<boolean>;
+    /**
+     * The role the drawer announces.
+     *
+     * Worth asserting rather than assuming: both flavours write it onto the OVERLAY
+     * element, not onto the markup the consumer wrote, so a spec looking for it on
+     * its own host would not find it.
+     */
+    getRole(): Promise<string | null>;
+    /** Whether the drawer is marked `aria-modal` — the promise the backdrop and focus trap make. */
+    isModal(): Promise<boolean>;
+    /**
+     * Whether the panel takes its accessible name from the drawer's own title.
+     *
+     * Both flavours point `aria-labelledby` at `[wrDrawerTitle]`'s generated id, but
+     * only once the content is in the DOM — deferred either way — so a spec has to
+     * let the fixture settle (`await fixture.whenStable()`) before asking.
+     */
+    isLabelledByTitle(): Promise<boolean>;
+    /** Whether the built-in dismiss (✕) button is present (`closable`, the default). */
+    isClosable(): Promise<boolean>;
+    /** The dismiss button's accessible name — the string a screen reader reads out. */
+    getCloseLabel(): Promise<string | null>;
+    /**
+     * Click the built-in dismiss button.
+     *
+     * Throws on a drawer opened `closable: false`. That is a deliberate shape — the
+     * projected content owns the close affordance, typically a `[wrDrawerClose]`
+     * button — and a quiet no-op here would read as "closed" three assertions later.
+     */
+    close(): Promise<void>;
+    /**
+     * Press Escape. A drawer opened `closeOnEscape: false` ignores it — assert, do
+     * not assume.
+     *
+     * The key reaches a drawer through the CDK's keyboard dispatcher, which hands it
+     * to the TOP-MOST listening overlay, so with drawers stacked this dismisses the
+     * top one whichever harness it is called on.
+     */
+    sendEscape(): Promise<void>;
+    /** Whether the drawer dims the page behind it (`hasBackdrop`, the default). */
+    hasBackdrop(): Promise<boolean>;
+    /**
+     * Click the backdrop — the third way a drawer is dismissed, next to the dismiss
+     * button and Escape, and the one a `closeOnBackdropClick: false` drawer is meant
+     * to survive.
+     */
+    clickBackdrop(): Promise<void>;
+    /** Whether focus is currently inside the drawer, where the trap should hold it. */
+    isFocusTrapped(): Promise<boolean>;
+    /**
+     * The element carrying the `.wr-drawer__panel` classes.
+     *
+     * `WrDrawerManager` flattens the panel onto the overlay pane itself, while
+     * `<wr-drawer>` renders it as a div inside the pane — same classes, one level
+     * apart, so the modifiers have to be read from whichever element has them.
+     */
+    private panel;
+    /**
+     * THIS drawer's backdrop, or `null` when it has none.
+     *
+     * Scoped by the overlay pane's own id, not by a bare `.wr-drawer-backdrop` query:
+     * the container is shared, so a class query answers with whichever drawer opened
+     * first — and two drawers open at once can disagree about `hasBackdrop`.
+     *
+     * Two queries, because the CDK puts the backdrop in one of two places. With the
+     * popover API — its default wherever `showPopover` exists, so in every real
+     * browser — the backdrop is PREPENDED INSIDE the host, next to the pane, which is
+     * what the first query's `+` pins down. Without it (jsdom, or `usePopover: false`)
+     * it goes immediately BEFORE the host wrapper that holds the pane, which is what
+     * the second query matches — so under vitest the second one does the work and the
+     * first is the production path.
+     */
+    private backdrop;
+}
+
+export { WrDrawerHarness };
+export type { WrDrawerHarnessFilters };

package/types/ngwr-drawer.d.ts

@@ -254,6 +254,21 @@ declare class WrDrawerManager {
     private readonly isBrowser;
     private readonly i18n;
     open<C, R = unknown, D = unknown>(component: ComponentType<C>, options?: WrDrawerOptions<D>): WrDrawerRef<C, R>;
+    /**
+     * The dismiss button's accessible name.
+     *
+     * Resolved per open, not once at injection: this is a root service, so a
+     * `readI18nText` field — which is what `WrDialog` uses — would be evaluated
+     * before an async catalog had loaded and then freeze that answer for the life
+     * of the app.
+     *
+     * The miss check is the point. `t()` hands back the KEY when the catalog has
+     * no entry, and `WrI18n` is root-provided with an empty catalog by default —
+     * so an app that never configured i18n got a button announced as
+     * "drawer.close, button". A name WAS present, which is exactly why the axe
+     * gate could not see it.
+     */
+    private closeLabel;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrDrawerManager, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<WrDrawerManager>;
 }