ngwr 11.0.0 → 11.2.0

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

@@ -0,0 +1,134 @@
+import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+import { WrCropHandle } from 'ngwr/image-cropper';
+
+/**
+ * @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 `<wr-image-cropper>` a harness query matches. */
+interface WrImageCropperHarnessFilters extends BaseHarnessFilters {
+    /**
+     * Match croppers holding an image (`false`) or showing the empty state (`true`).
+     * A cropper with a `src` it has not measured yet is NOT empty — see
+     * `WrImageCropperHarness.isReady`.
+     */
+    readonly empty?: boolean;
+}
+
+/**
+ * @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
+ */
+
+/** Where the crop window sits over the DISPLAYED image, in CSS pixels. */
+interface WrCropWindowBox {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+}
+/**
+ * Test harness for `<wr-image-cropper>`.
+ *
+ * **This is the smallest honest surface of any harness here, and the reason is worth
+ * reading before you reach for a method that is not on it.** Almost everything the
+ * cropper does is measured: it reads the `<img>`'s rendered box and its
+ * `naturalWidth`, converts between display and source pixels, and moves the crop
+ * window with pointer deltas. jsdom measures nothing — every rect is 0×0 and
+ * `naturalWidth` is 0 — so an image never "loads", the crop UI never renders, and a
+ * synthetic drag divides by zero. There is deliberately no `moveCrop()` or
+ * `resizeCrop()`: either would write `NaN` and report success.
+ *
+ * What a spec CAN do is give the image a box and a natural size itself, then call
+ * {@link dispatchImageLoad} — the two numbers `onImageLoad` reads are the whole
+ * stub, and from there {@link getCropBox} and {@link getHandles} are real answers,
+ * because the component writes the crop window's geometry as inline pixels.
+ *
+ * ```ts
+ * // In your spec, before dispatching the load:
+ * const img = fixture.nativeElement.querySelector('.wr-image-cropper__image');
+ * img.getBoundingClientRect = () => ({ width: 400, height: 400, x: 0, y: 0 }) as DOMRect;
+ * Object.defineProperty(img, 'naturalWidth', { value: 800 });
+ * Object.defineProperty(img, 'naturalHeight', { value: 800 });
+ * ```
+ *
+ * **There is also nothing to click.** The cropper renders no buttons: a consumer
+ * takes the result by calling `crop()` on the component through a `viewChild`, and
+ * reads `cropRect()` the same way. Those are component API rather than DOM, so they
+ * are outside what a harness can reach at all — which is worth knowing rather than
+ * discovering.
+ *
+ * @example
+ * ```ts
+ * const cropper = await loader.getHarness(WrImageCropperHarness);
+ *
+ * expect(await cropper.isEmpty()).toBe(false);
+ * expect(await cropper.isReady()).toBe(false);   // nothing measured yet
+ *
+ * await cropper.dispatchImageLoad();
+ * expect(await cropper.getCropBox()).toEqual({ x: 80, y: 80, width: 240, height: 240 });
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+declare class WrImageCropperHarness extends ComponentHarness {
+    static hostSelector: string;
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options?: WrImageCropperHarnessFilters): HarnessPredicate<WrImageCropperHarness>;
+    private readonly image;
+    private readonly cropWindow;
+    /** Whether the cropper has no source at all, and is showing its placeholder. */
+    isEmpty(): Promise<boolean>;
+    /** The placeholder's text, or `null` when there is an image. Comes from the catalog. */
+    getEmptyText(): Promise<string | null>;
+    /**
+     * Whether the crop UI is up.
+     *
+     * Not the same question as {@link isEmpty}: a cropper with a perfectly good `src`
+     * shows nothing but the image until it has been MEASURED, because the window's size
+     * is a fraction of the rendered box. In a browser that happens on load; in a unit
+     * test it happens when the spec stubs the box and calls
+     * {@link dispatchImageLoad}.
+     */
+    isReady(): Promise<boolean>;
+    /**
+     * What the `<img>` is pointing at.
+     *
+     * A `File` or `Blob` source becomes an object URL, so this is `blob:…` for those
+     * and the plain string for a string `src`. Comparing the two is not useful; asking
+     * whether it CHANGED is.
+     */
+    getImageSrc(): Promise<string | null>;
+    /**
+     * Fire the image's `load` event.
+     *
+     * The event, not a real load: jsdom fetches nothing, and the handler reads
+     * `getBoundingClientRect()` and `naturalWidth` off the element. Stub those first —
+     * see this class's docs — or the crop window will still not render and
+     * {@link isReady} will stay `false`, which is exactly what a real cropper does with
+     * a zero-sized image.
+     */
+    dispatchImageLoad(): Promise<void>;
+    /**
+     * Where the crop window sits over the displayed image, in CSS pixels.
+     *
+     * From the inline styles the component writes — a measured box would be 0×0 — and
+     * in DISPLAY pixels, which is not what a consumer receives: `cropRect()` converts
+     * to the image's natural pixels, and that conversion is the component's own contract
+     * rather than something the DOM shows.
+     */
+    getCropBox(): Promise<WrCropWindowBox>;
+    /** The eight resize handles, by their compass suffix. Throws before the crop UI is up. */
+    getHandles(): Promise<WrCropHandle[]>;
+    /** Whether the dimming backdrop with the cut-out is drawn. */
+    hasBackdrop(): Promise<boolean>;
+    private requireReady;
+}
+
+export { WrImageCropperHarness };
+export type { WrImageCropperHarnessFilters };

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

@@ -61,6 +61,7 @@ declare class WrImageCropper {
     readonly cropped: _angular_core.OutputEmitterRef<Blob>;
     protected readonly imgEl: _angular_core.Signal<ElementRef<HTMLImageElement>>;
     /** Resolved object URL for `src` (so File / Blob render in `<img>`). */
+    protected readonly emptyText: _angular_core.Signal<string>;
     protected readonly objectUrl: _angular_core.WritableSignal<string | null>;
     /** Previous object URL we created — kept off-signal so the resolve
      *  effect doesn't depend on its own writes (which would loop). */

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

@@ -79,6 +79,17 @@ declare class WrInputNumber implements FormValueControl<number | null> {
      */
     readonly ariaLabel: _angular_core.InputSignal<string | null>;
     protected readonly resolvedAriaLabel: _angular_core.Signal<string | null>;
+    /** Increment button aria-label. Falls back to `inputNumber.increment`. */
+    readonly incrementLabel: _angular_core.InputSignal<string | null>;
+    /** Decrement button aria-label. Falls back to `inputNumber.decrement`. */
+    readonly decrementLabel: _angular_core.InputSignal<string | null>;
+    /**
+     * The steppers are icon-only buttons, so these ARE their accessible names.
+     * They were hard-coded English while the catalog carried the keys for them
+     * unread — a Russian app announced "Increment".
+     */
+    protected readonly resolvedIncrement: _angular_core.Signal<string>;
+    protected readonly resolvedDecrement: _angular_core.Signal<string>;
     /** Disable interaction. @default false */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Read-only — values cannot be changed (steppers + typing disabled). @default false */
@@ -97,6 +108,27 @@ declare class WrInputNumber implements FormValueControl<number | null> {
     protected readonly atMin: _angular_core.Signal<boolean>;
     protected readonly atMax: _angular_core.Signal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
+    /**
+     * Fraction digits the stepper rounds its arithmetic to when `decimals` says
+     * nothing. High enough to leave a real value alone, low enough to erase the
+     * binary-float tail that repeated stepping accumulates.
+     */
+    private static readonly STEP_PRECISION;
+    /**
+     * Above this, the anti-drift round is skipped — it would MANUFACTURE drift.
+     *
+     * `round(v, 10)` is `Math.round((v + EPSILON) * 1e10) / 1e10`, and the scale
+     * factor is only exact while `v * 1e10` stays inside 2^53, i.e. |v| under
+     * about 900,720. In practice the round-trip still recovers up to ~9.2e8 and
+     * then breaks: `round(1000000001, 10)` is `1000000000.9999999`, and since
+     * `format` prints up to 20 fraction digits that tail reaches the screen —
+     * and compounds, because the next press starts from it. Integer stepping at
+     * that magnitude is exact in IEEE754 and needed no help; the only thing this
+     * rounding exists to defend is `0.1 + 0.1 + 0.1`.
+     */
+    private static readonly SAFE_ROUND_MAGNITUDE;
+    /** Steps finer than this would be rounded away by {@link STEP_PRECISION}. */
+    private static readonly SAFE_ROUND_STEP;
     constructor();
     protected onInput(event: Event): void;
     protected onFocus(): void;
@@ -112,7 +144,7 @@ declare class WrInputNumber implements FormValueControl<number | null> {
     /** Format a value using `Intl.NumberFormat` for the active locale. */
     private format;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrInputNumber, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrInputNumber, "wr-input-number", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "showSteppers": { "alias": "showSteppers"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "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<WrInputNumber, "wr-input-number", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "showSteppers": { "alias": "showSteppers"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "incrementLabel": { "alias": "incrementLabel"; "required": false; "isSignal": true; }; "decrementLabel": { "alias": "decrementLabel"; "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>;
 }
 
 export { WrInputNumber };

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

@@ -0,0 +1,150 @@
+import { BaseHarnessFilters, ComponentHarness, 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 `<wr-knob>` a harness query matches. */
+interface WrKnobHarnessFilters extends BaseHarnessFilters {
+    /** Match the dial's accessible name — a string is an exact match, a RegExp is tested. */
+    readonly label?: string | RegExp;
+    /** Match the current value, as `aria-valuenow` reports it. */
+    readonly value?: number;
+    /** Match only enabled (`false`) or only disabled (`true`) dials. */
+    readonly disabled?: boolean;
+    /** Match only writable (`false`) or only read-only (`true`) dials. */
+    readonly readonly?: boolean;
+}
+
+/**
+ * @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 two arrow keys that raise the value, and the two that lower it. */
+type Arrow = 'left' | 'right' | 'up' | 'down';
+/**
+ * Test harness for `<wr-knob>` — the radial dial.
+ *
+ * **Driven by the keyboard, and the drag is not merely unsupported.** Turning the
+ * dial with a pointer takes `getBoundingClientRect()`, measures the angle from the
+ * centre to the cursor, and maps it onto a 270° arc. jsdom lays nothing out, so the
+ * centre is `(0, 0)` and every synthetic gesture writes the same corner of the arc
+ * whatever coordinates it is given — a `turnTo()` built on one would pass while
+ * proving nothing. The arrows reach every value on the grid and are the accessible
+ * path anyway.
+ *
+ * **Two questions about the value, not one.** {@link getValue} is the number
+ * `aria-valuenow` carries; {@link getDisplayValue} is the string in the middle of the
+ * dial, which the `suffix` input can make `"50%"` while the announced value stays
+ * `50`. They are separate methods because they can disagree, and because
+ * `showValue` can remove the text entirely without touching the value.
+ *
+ * @example
+ * ```ts
+ * const knob = await loader.getHarness(WrKnobHarness);
+ *
+ * await knob.setValue(60);
+ * expect(await knob.getValue()).toBe(60);
+ * expect(await knob.getDisplayValue()).toBe('60%');
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+declare class WrKnobHarness extends ComponentHarness {
+    static hostSelector: string;
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options?: WrKnobHarnessFilters): HarnessPredicate<WrKnobHarness>;
+    private readonly surface;
+    /** The value the dial announces, from `aria-valuenow`. */
+    getValue(): Promise<number>;
+    /** The bottom of the range, from `aria-valuemin`. */
+    getMin(): Promise<number>;
+    /** The top of the range, from `aria-valuemax`. */
+    getMax(): Promise<number>;
+    /**
+     * The text printed in the middle of the dial, suffix included, or `null` when the
+     * knob was built with `[showValue]="false"`.
+     *
+     * Not the same question as {@link getValue}: with a `suffix` the two disagree by
+     * design, and a screen reader is told the bare number — the component publishes no
+     * `aria-valuetext`, so `50` is what gets announced for a dial that reads `50%`.
+     */
+    getDisplayValue(): Promise<string | null>;
+    /** The suffix alone, or `null` when there is none (or no value text at all). */
+    getSuffix(): Promise<string | null>;
+    /** The dial's accessible name — `role="slider"` needs one. */
+    getLabel(): Promise<string | null>;
+    /** Whether the dial is disabled, from `aria-disabled`. */
+    isDisabled(): Promise<boolean>;
+    /** Whether the dial is read-only, from `aria-readonly`. */
+    isReadonly(): Promise<boolean>;
+    /**
+     * Whether the dial is a tab stop.
+     *
+     * The component drops it out of the tab order for BOTH disabled and read-only,
+     * which is worth knowing: a read-only slider that a keyboard user cannot reach is
+     * also one they cannot read, and this is the method that says so.
+     */
+    isFocusable(): Promise<boolean>;
+    /** Move keyboard focus to the dial. */
+    focus(): Promise<void>;
+    /** Whether the dial currently holds focus. */
+    isFocused(): Promise<boolean>;
+    /** Blur the dial — which is what emits `touch` for a knob moved with the keyboard. */
+    blur(): Promise<void>;
+    /**
+     * Press one arrow key.
+     *
+     * Right and Up raise the value, Left and Down lower it — all four are live on this
+     * component, which has one axis and no mirroring to do. `shift` multiplies the step
+     * by ten.
+     */
+    pressArrow(arrow: Arrow, options?: {
+        shift?: boolean;
+    }): Promise<void>;
+    /** Press Home — the bottom of the range. */
+    pressHome(): Promise<void>;
+    /**
+     * Press End — the top of the range, or the last value ON the grid below it: a range
+     * that is not a whole number of steps cannot reach its own maximum.
+     */
+    pressEnd(): Promise<void>;
+    /**
+     * Walk the dial to a value with the arrow keys, and assert it landed there.
+     *
+     * It measures the step as it goes rather than being told it — `step` is an input
+     * with no DOM presence, and the value can arrive off the grid, since an external
+     * write is clamped but never snapped. So the first press may move by less than a
+     * step (it snaps onto the grid) and the walk adapts, which also means the ten-step
+     * hops only start once a real step has been seen.
+     *
+     * Throws rather than half-arriving, and the two reasons read differently: a target
+     * outside `[min, max]` is refused before anything moves, while a target BETWEEN two
+     * grid points is only discovered by overshooting it, and says where it landed. A
+     * dial that will not move at all — disabled, read-only — is the third.
+     */
+    setValue(target: number): Promise<void>;
+    /**
+     * Where the handle dot sits, in the SVG's own 100×100 viewBox units.
+     *
+     * The dial's whole visual state is an arc path and this dot, and neither can be
+     * measured in a unit test — but the dot's centre is written as plain `cx` / `cy`
+     * attributes, so it reads with no layout at all. That makes it the evidence that
+     * the drawing followed the value: at `min` the handle is at the 7 o'clock end of
+     * the arc, at `max` the 5 o'clock end.
+     */
+    getHandlePosition(): Promise<{
+        x: number;
+        y: number;
+    }>;
+    private numeric;
+}
+
+export { WrKnobHarness };
+export type { WrKnobHarnessFilters };

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

@@ -0,0 +1,154 @@
+import { BaseHarnessFilters, ComponentHarness, 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 `<wr-lightbox>` a harness query matches. */
+interface WrLightboxHarnessFilters extends BaseHarnessFilters {
+    /** Match the image's alt text — a string is an exact match, a RegExp is tested. */
+    readonly alt?: string | RegExp;
+    /** Match the caption shown under the full image. */
+    readonly caption?: string | RegExp;
+    /** Match only open (`true`) or only closed (`false`) lightboxes. */
+    readonly open?: boolean;
+}
+
+/**
+ * @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 `<wr-lightbox>` — the thumbnail, and the full-size viewer it
+ * opens.
+ *
+ * The thumbnail is an element in your fixture and the viewer is a portal in the NGWR
+ * overlay container, so this is loaded from the normal fixture loader and reaches
+ * across for you — scoped by the id the trigger publishes as `aria-controls`, never
+ * by `.wr-lightbox-viewer`, which would answer with whichever lightbox opened first.
+ *
+ * **A closed lightbox has no viewer at all**, unlike the collapse or the speed dial:
+ * the overlay is created on open and disposed on close, so every viewer read here
+ * throws while it is shut rather than answering about a stale element.
+ *
+ * **`disablePreview` removes the button, not just its behaviour.** The thumbnail is
+ * then a bare `<img>` with nothing to click and nothing in the tab order, which is
+ * why {@link isInteractive} exists and why {@link open} explains itself rather than
+ * timing out on a missing element.
+ *
+ * @example
+ * ```ts
+ * const lightbox = await loader.getHarness(WrLightboxHarness.with({ alt: 'Mountain' }));
+ *
+ * await lightbox.open();
+ * expect(await lightbox.getFullSrc()).toBe('/photo.jpg');
+ *
+ * await lightbox.sendEscape();
+ * expect(await lightbox.isOpen()).toBe(false);
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+declare class WrLightboxHarness extends ComponentHarness {
+    static hostSelector: string;
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options?: WrLightboxHarnessFilters): HarnessPredicate<WrLightboxHarness>;
+    private readonly thumb;
+    private readonly trigger;
+    /**
+     * Whether the viewer is open, from the host's own modifier.
+     *
+     * The class rather than the overlay, because it is the answer that holds for a
+     * harness you are HOLDING: the viewer is disposed on close, and a query for it
+     * cannot tell "shut" apart from "never opened".
+     */
+    isOpen(): Promise<boolean>;
+    /**
+     * Whether the thumbnail has settled — loaded OR failed.
+     *
+     * A failure counts on purpose: the loading state animates a shimmer and hides the
+     * image, so a broken `src` with no error path would shimmer for ever instead of
+     * falling back to its alt text. The two cases are deliberately not separated here,
+     * because the DOM does not separate them either.
+     */
+    isLoading(): Promise<boolean>;
+    /** The thumbnail's alt text — the same string the viewer takes its name from. */
+    getAlt(): Promise<string>;
+    /**
+     * What the THUMBNAIL is showing: `preview` when one was given, `src` otherwise.
+     *
+     * Worth its own method because the two images are different files by design — a
+     * grid of thumbnails should not pull full-size originals — and because the
+     * thumbnail never swaps to `src` later. Compare with {@link getFullSrc}.
+     */
+    getThumbSrc(): Promise<string>;
+    /** Whether the thumbnail can be clicked open at all (`disablePreview` off). */
+    isInteractive(): Promise<boolean>;
+    /** The trigger's accessible name — falls back to the alt text, then to the catalog. */
+    getOpenLabel(): Promise<string | null>;
+    /** Open the viewer. An already-open one is left alone; a non-interactive one throws. */
+    open(): Promise<void>;
+    /** Close the viewer through its ✕ button. An already-closed one is left alone. */
+    close(): Promise<void>;
+    /**
+     * Click the full image — which closes the viewer.
+     *
+     * It looks like decoration and is not: the image is styled `cursor: zoom-out`, and
+     * that is a promise. It is deliberately NOT in the tab order, since the ✕ button,
+     * Escape, the backdrop and a swipe all do the same thing and all reach a keyboard —
+     * so this is a mouse affordance, and the only way to assert it still works.
+     */
+    clickImage(): Promise<void>;
+    /**
+     * Press Escape.
+     *
+     * Sent to the viewer, though it would arrive from anywhere: the overlay is fed by
+     * the CDK's keyboard dispatcher, which keeps one document listener and routes to
+     * the top-most overlay.
+     */
+    sendEscape(): Promise<void>;
+    /** The full-size image's `src`. Throws while the viewer is closed. */
+    getFullSrc(): Promise<string>;
+    /** The caption under the full image, or `null` when there is none. Throws while closed. */
+    getCaption(): Promise<string | null>;
+    /** The name the viewer dialog announces — its alt text, or the catalog's fallback. */
+    getViewerLabel(): Promise<string | null>;
+    /** The ✕ button's accessible name. Throws while the viewer is closed. */
+    getCloseLabel(): Promise<string | null>;
+    /** Whether the viewer announces itself as a modal dialog. */
+    isModal(): Promise<boolean>;
+    /**
+     * Whether focus is inside the viewer, where the trap should be holding it.
+     *
+     * `role="dialog"` with `aria-modal` promises the page behind is out of reach, and a
+     * missing trap makes that a lie — Tab walks straight through the backdrop. Note
+     * that in a unit test the trap needs elements with a box to find anything tabbable,
+     * so a spec asserting this has to hand the DOM some dimensions first.
+     */
+    isFocusTrapped(): Promise<boolean>;
+    /**
+     * Whether the trigger's `aria-controls` names THIS lightbox's viewer, and nothing
+     * else on the page.
+     *
+     * The reference only exists while the viewer does — an id naming an element that is
+     * not in the document is not a pairing, it is a dangling reference — so this is
+     * `false` for a closed lightbox by construction. Counted across the document too,
+     * because two viewers answering to one id hand every reference to the first.
+     */
+    isViewerBound(): Promise<boolean>;
+    /** The caption without the open check — for filters, which must not throw. */
+    private readCaption;
+    /** The id the trigger currently points at, or `null` while the viewer is closed. */
+    private viewerId;
+    private requireViewer;
+    private viewerPart;
+}
+
+export { WrLightboxHarness };
+export type { WrLightboxHarnessFilters };

package/types/ngwr-lightbox.d.ts

@@ -50,6 +50,12 @@ declare class WrLightbox {
     readonly aspectRatio: _angular_core.InputSignal<string | number | null>;
     protected readonly open: _angular_core.WritableSignal<boolean>;
     protected readonly loaded: _angular_core.WritableSignal<boolean>;
+    /**
+     * Id the trigger's `aria-controls` points at while the viewer is open.
+     *
+     * @internal Public so the host bindings can read it.
+     */
+    protected readonly viewerId: string;
     protected readonly classes: _angular_core.Signal<string>;
     protected readonly panelTpl: _angular_core.Signal<TemplateRef<unknown>>;
     private readonly overlay;

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

@@ -0,0 +1,93 @@
+import { BaseHarnessFilters, ComponentHarness, 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 `<wr-line-chart>` a harness query matches. */
+interface WrLineChartHarnessFilters extends BaseHarnessFilters {
+    /** Match the plot's accessible name. */
+    readonly ariaLabel?: string | RegExp;
+    /** Match a chart whose legend holds this series. */
+    readonly seriesLabel?: string | RegExp;
+}
+/** One row of the hover tooltip — a series and its value at the hovered index. */
+interface WrLineChartTooltipRow {
+    readonly label: string;
+    readonly value: string;
+}
+
+/**
+ * @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 `<wr-line-chart>`.
+ *
+ * **The lines are paths and the paths are not assertable.** A `d` attribute is a
+ * rendering detail — it moves with the viewBox, the padding and the value range — so
+ * this harness counts the lines and reads everything TEXTUAL instead: the legend, the
+ * axis ticks, the x labels and the tooltip. Those are what a reader gets, and they
+ * are what breaks when the data wiring does.
+ *
+ * **The tooltip cannot be opened from a spec, and the reason is worth knowing.** It
+ * follows a `pointermove` over the plot, and the component turns the cursor's x into
+ * an index by measuring the plot's box — which jsdom reports as 0×0, so every
+ * synthetic move resolves to the same index or to none at all. There is deliberately
+ * no `hoverAt()`; {@link getTooltipRows} reads the tooltip when something else has
+ * opened it, which in practice means a browser-run harness.
+ *
+ * @example
+ * ```ts
+ * const chart = await loader.getHarness(WrLineChartHarness);
+ *
+ * expect(await chart.getSeriesLabels()).toEqual(['Revenue', 'Costs']);
+ * expect(await chart.getLineCount()).toBe(2);
+ * expect(await chart.getXLabels()).toEqual(['Jan', 'Feb', 'Mar']);
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+declare class WrLineChartHarness extends ComponentHarness {
+    static hostSelector: string;
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options?: WrLineChartHarnessFilters): HarnessPredicate<WrLineChartHarness>;
+    /** The plot's accessible name — the only name the drawing has. */
+    getAccessibleName(): Promise<string | null>;
+    /** Whether the legend is rendered (`showLegend`, and at least one series). */
+    hasLegend(): Promise<boolean>;
+    /** The series names from the legend, in order. */
+    getSeriesLabels(): Promise<string[]>;
+    /**
+     * How many lines were drawn.
+     *
+     * Worth comparing with {@link getSeriesLabels}: the legend and the paths come from
+     * the same list, so a mismatch is a series that got filtered out of one of them.
+     */
+    getLineCount(): Promise<number>;
+    /** How many point dots were drawn across every series (`showDots`). */
+    getDotCount(): Promise<number>;
+    /** Whether the horizontal grid lines are drawn (`showGrid`). */
+    hasGrid(): Promise<boolean>;
+    /** The y-axis tick labels, top to bottom as drawn. */
+    getYTicks(): Promise<string[]>;
+    /** The x-axis labels under the plot, in order. */
+    getXLabels(): Promise<string[]>;
+    /** Whether the hover tooltip is showing. */
+    hasTooltip(): Promise<boolean>;
+    /** The tooltip's heading — the x label of the hovered point — or `null` while it is closed. */
+    getTooltipLabel(): Promise<string | null>;
+    /** The tooltip's rows, one per series, or `[]` while it is closed. */
+    getTooltipRows(): Promise<WrLineChartTooltipRow[]>;
+    /** The plot's height in pixels, as the component writes it inline. */
+    getPlotHeight(): Promise<number>;
+}
+
+export { WrLineChartHarness };
+export type { WrLineChartHarnessFilters, WrLineChartTooltipRow };