ngwr 11.0.0 → 11.2.0

package/types/ngwr-spotlight-card-testing.d.ts

@@ -0,0 +1,303 @@
+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-spotlight-card>` a harness query matches. */
+interface WrSpotlightCardHarnessFilters extends BaseHarnessFilters {
+    /**
+     * Match the card's projected text — a string is an exact match, a RegExp is tested.
+     *
+     * The only filter offered, and deliberately: the card has no name of its own, no
+     * disabled or open state, and its one piece of state — where the highlight last sat —
+     * is a coordinate nobody would filter on. The content it wraps is what tells two cards
+     * on a page apart.
+     */
+    readonly text?: string | RegExp;
+}
+/** Narrows which `[wrSpotlight]` host a harness query matches. */
+interface WrSpotlightHarnessFilters extends BaseHarnessFilters {
+    /** Match the decorated element's text — a string is an exact match, a RegExp is tested. */
+    readonly text?: string | RegExp;
+    /**
+     * Match a host carrying this class.
+     *
+     * The directive adds no class of its own — it writes custom properties and nothing
+     * else — so unlike every component harness here there is no `.wr-*` hook to narrow by.
+     * The consumer's own class is the stable discriminator, which is why this filter names
+     * the HOST's class rather than the directive's.
+     */
+    readonly hostClass?: 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-spotlight-card>` — a card with a soft radial highlight that
+ * follows the cursor.
+ *
+ * **The component's entire output is three custom properties on its own host, and this
+ * harness reads them off the inline declaration.** There is no DOM for the highlight at
+ * all: it is a `::before` pseudo-element, painted by the stylesheet from those three
+ * values. So the paint is out of reach here and always will be — what is in reach is the
+ * arithmetic and the exact spelling that feeds it, which is where this component breaks.
+ *
+ * **This harness reads PIXELS. {@link WrSpotlightHarness}, the `[wrSpotlight]` directive
+ * shipped from the same entry point, reads PERCENTAGES.** Both write
+ * `--wr-spotlight-x` / `--wr-spotlight-y`, in different units, off different events —
+ * the card listens for `mousemove`, the directive for `pointermove`. That is deliberate
+ * and documented, and it is also the mistake waiting to happen: putting `wrSpotlight` on
+ * a `<wr-spotlight-card>` gives you two handlers overwriting one variable in units that
+ * do not agree. Reach for the harness that matches the thing under test.
+ *
+ * **{@link movePointerTo} needs the card to have a box, and in a unit test it has none.**
+ * The component subtracts its own `getBoundingClientRect()` from the client coordinate,
+ * and jsdom answers that with a 0×0 rect at the origin — so the subtraction is a no-op
+ * and the coordinate comes back unchanged. No throw here, unlike the directive's version:
+ * the answer is degenerate rather than wrong, and it is legitimately what a real card
+ * with no box would report. But a spec that asserts `x === clientX` against an unstubbed
+ * rect has proved nothing about the box-relative conversion, which is the only thing
+ * {@link getSpotlightPosition} is for. Give the host a box first:
+ *
+ * ```ts
+ * const card = fixture.nativeElement.querySelector('wr-spotlight-card');
+ * card.getBoundingClientRect = () => ({ left: 40, top: 20, width: 200, height: 100 }) as DOMRect;
+ * ```
+ *
+ * Several plausible methods are deliberately absent. There is no `isSpotlightVisible()`
+ * or `getSpotlightOpacity()`: the highlight sits at `opacity: 0` and is lifted to `0.6`
+ * only under `:hover` / `:focus-within`, both of which are stylesheet selectors on a
+ * pseudo-element — jsdom loads no stylesheet, matches no `:hover`, and cannot read a
+ * pseudo-element's style at any time, so any answer would be invented. No `getGradient()`
+ * for the same reason. No `hover()` / `mouseAway()` wrappers, which would be worse than
+ * missing: the CDK's versions dispatch `mouseenter` / `mouseover` / `mouseleave`, none of
+ * which this component listens to and none of which changes a `:hover` match in a test —
+ * a spec calling them would look like it exercised the reveal and would have exercised
+ * nothing. No `getSpotlightRect()` or `getCardSize()`, which are layout. And no
+ * `respectsReducedMotion()`: this is the one animation component in the library that
+ * deliberately does not implement the preference — a gradient tracks the cursor and no
+ * content moves — so the method would answer identically for a component that honoured it
+ * and one that ignored it.
+ *
+ * @example
+ * ```ts
+ * const card = await loader.getHarness(WrSpotlightCardHarness.with({ text: 'Hover me' }));
+ *
+ * expect(await card.getRadiusPercent()).toBe(80);
+ * expect(await card.getSpotlightColor()).toBeNull();       // the theme decides
+ * expect(await card.getSpotlightPosition()).toBeNull();    // nothing has pointed at it
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+declare class WrSpotlightCardHarness extends ComponentHarness {
+    static hostSelector: string;
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options?: WrSpotlightCardHarnessFilters): HarnessPredicate<WrSpotlightCardHarness>;
+    /**
+     * Where the gradient fades out, as a percentage of its own radius.
+     *
+     * Returns the number, but the assertion it really makes is about the `%` that was
+     * stripped to get it — this method refuses a bare `80`. The stylesheet interpolates the
+     * variable straight into `transparent var(--wr-spotlight-radius, 80%)`, where a unitless
+     * value is not a length, so the whole `radial-gradient()` declaration is dropped and the
+     * highlight disappears with nothing in the console to say why. Reading this as a plain
+     * number would sail past exactly that.
+     *
+     * Always present, whatever the input says: a `[radius]` that is not a number coerces
+     * back to the default 80 rather than writing nonsense into the sheet.
+     */
+    getRadiusPercent(): Promise<number>;
+    /**
+     * The highlight colour the author asked for, or `null` when they left it to the theme.
+     *
+     * `null` IS the contract for an unset `[spotlightColor]`, not a gap in it. The
+     * stylesheet's own default is `rgba(var(--wr-color-on-surface-rgb), .15)`, and that
+     * token flips per theme — which is what makes one component read as a dark glow on a
+     * light surface and a light beam on a dark one. A card that started writing a concrete
+     * colour here would look right in whichever theme it was authored against and wrong in
+     * the other, and this is the only method that can tell.
+     */
+    getSpotlightColor(): Promise<string | null>;
+    /**
+     * Where the highlight last sat, in pixels from the card's own top-left corner. `null`
+     * until something has pointed at the card.
+     *
+     * Pixels, not percentages — see this class's docs for why the distinction matters
+     * inside this one entry point.
+     *
+     * `null` is a state of its own rather than a stand-in for `{ x: 0, y: 0 }`: before the
+     * first move the stylesheet's `50% / 50%` default applies, and a pointer at the card's
+     * own origin legitimately reports zero, so folding the two together would make an
+     * untouched card indistinguishable from one being pointed at in its corner.
+     *
+     * Note there is no reset when the cursor leaves, and that is not an oversight the
+     * harness papers over: the stylesheet fades the whole overlay to `opacity: 0` on leave,
+     * so nothing is parked visibly — but the coordinate stays written for the life of the
+     * element. `null` therefore means "no pointer has EVER arrived", not "none is here now".
+     */
+    getSpotlightPosition(): Promise<{
+        x: number;
+        y: number;
+    } | null>;
+    /**
+     * Point at the card, in client coordinates.
+     *
+     * A `mousemove`, not a `pointermove` — the component listens for the former, and the
+     * directive in the same entry point for the latter, so a pointer event dispatched here
+     * is silently ignored. It goes to the host itself, so it needs no hit test and cannot
+     * miss in a test that has no layout; the coordinates only ever reach the component's
+     * own subtraction.
+     *
+     * Stub the host's `getBoundingClientRect` before calling this, or the subtraction is
+     * invisible — see this class's docs.
+     */
+    movePointerTo(clientX: number, clientY: number): Promise<void>;
+    /**
+     * The projected content's text, trimmed.
+     *
+     * Read from the host, which is the whole assertion: the template is a bare
+     * `<ng-content />` with no wrapper element, so content lands as a direct child and an
+     * interactive one keeps its own name and role. The component adds no ARIA and no node
+     * of its own — there is nothing else here for a harness to ask about.
+     */
+    getContentText(): Promise<string>;
+    /** The host's inline declarations — the component's whole written output. */
+    private vars;
+    /** One written coordinate, as a number, insisting on the `px` the card promises. */
+    private parsePixels;
+}
+
+/**
+ * @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 `[wrSpotlight]` — the directive that makes a cursor-following
+ * gradient possible on an element the consumer owns.
+ *
+ * **This harness reads PERCENTAGES. {@link WrSpotlightCardHarness}, shipped from the same
+ * entry point, reads PIXELS.** Both write `--wr-spotlight-x` / `--wr-spotlight-y`; the
+ * directive writes them as a share of its own box off `pointermove`, the card as a pixel
+ * offset off `mousemove`. That is why {@link getSpotlightPosition} hands back raw strings
+ * and not numbers — collapsing `'37.5%'` to `37.5` would hide the one thing that decides
+ * whether the gradient lands where the cursor is, and would make the two halves of this
+ * entry point look interchangeable when they are not.
+ *
+ * **The directive ships no styles and adds no node.** There is no class to assert, no
+ * wrapper, no ARIA: whatever the element announced before the directive applies is
+ * exactly what it announces after, and the gradient is entirely the consumer's own CSS.
+ * So there is no `isSpotlightVisible()` — there is nothing here to be visible — and no
+ * `getResetX()` / `getResetY()`, which would echo the inputs back rather than report the
+ * coordinate the directive actually WROTE. The echo would pass while the written value
+ * was wrong, which is not hypothetical (see {@link getSpotlightPosition}). And no
+ * `respectsReducedMotion()`: neither export in this entry point implements the
+ * preference — it is the library's one documented exemption, since a gradient tracks the
+ * cursor and no content moves — so the method would answer the same for a directive that
+ * honoured it and one that ignored it.
+ *
+ * @example
+ * ```ts
+ * const spotlight = await loader.getHarness(WrSpotlightHarness.with({ hostClass: 'card' }));
+ *
+ * expect(await spotlight.getSpotlightPosition()).toEqual({ x: '50%', y: '50%' });
+ * await spotlight.movePointerTo(150, 25);   // stub the host's rect first
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+declare class WrSpotlightHarness extends ComponentHarness {
+    static hostSelector: string;
+    /**
+     * Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`.
+     *
+     * Both options describe the HOST rather than the directive, because the directive
+     * leaves no mark of its own to match on.
+     */
+    static with(options?: WrSpotlightHarnessFilters): HarnessPredicate<WrSpotlightHarness>;
+    /**
+     * The coordinates the directive has written, as the raw strings it wrote them.
+     *
+     * Strings on purpose — see this class's docs. The values are percentages of the host's
+     * own box while a pointer is over it, and whatever `[resetX]` / `[resetY]` say
+     * otherwise, so a `px` appearing here means something else is writing these variables.
+     *
+     * **Present from construction, before any pointer arrives.** The directive seeds the
+     * reset coordinates in its constructor, so the first read is `50%` / `50%` on a fresh
+     * host — do not mistake that for a pointer having been tracked. Worth knowing that the
+     * constructor runs before signal inputs are bound, so a bound (or even a static)
+     * `resetX` is NOT what appears here initially: it is honoured from the first
+     * {@link leave} onward, and the highlight jumps at that point. Reading the written
+     * coordinate rather than the input is what makes that visible at all.
+     *
+     * Throws once the directive has been destroyed, rather than answering with the last
+     * value it happened to leave behind — {@link hasTrackedPointer} is the question to ask
+     * when the host may be gone.
+     */
+    getSpotlightPosition(): Promise<{
+        x: string;
+        y: string;
+    }>;
+    /**
+     * Point at the host, in client coordinates.
+     *
+     * **Refuses on a host with no box, which in a unit test is every host.** The directive
+     * divides the cursor offset by the element's own width and height, so a 0×0 rect writes
+     * literally `Infinity%` or — at the origin — `NaN%` into the style. jsdom accepts either
+     * string without complaint, so an unguarded harness would hand back something that looks
+     * like a coordinate and describes nothing. Give the host a box first:
+     *
+     * ```ts
+     * const el = fixture.nativeElement.querySelector('[wrSpotlight]');
+     * el.getBoundingClientRect = () => ({ left: 0, top: 0, width: 200, height: 100 }) as DOMRect;
+     * ```
+     *
+     * A `pointermove`, not a `mousemove` — the directive listens for the former, and the
+     * component in the same entry point for the latter. It is dispatched on the host itself,
+     * so it needs no hit test and cannot miss.
+     */
+    movePointerTo(clientX: number, clientY: number): Promise<void>;
+    /**
+     * Take the pointer away.
+     *
+     * Dispatches `pointerleave` — the directive's reset path, and the only place `[resetX]`
+     * / `[resetY]` are read after construction. Needs no box: the handler writes the reset
+     * strings straight through without measuring anything, which is why this one does not
+     * refuse the way {@link movePointerTo} does.
+     *
+     * Not the CDK's `mouseAway()`, though that dispatches `pointerleave` too. This says what
+     * it does, and it does not also fire the `mouseleave` / `mouseout` that the CDK helper
+     * sends alongside it — events this directive ignores, and that would make a spec look
+     * like it had covered more than it did.
+     */
+    leave(): Promise<void>;
+    /**
+     * Whether the directive still owns the host's spotlight variables.
+     *
+     * **This is "the directive is alive", not "a pointer has moved over it".** It is `true`
+     * from the moment the directive constructs, because the constructor seeds the reset
+     * coordinates — there is no earlier state to catch. What it distinguishes is a live
+     * directive from a torn-down one: destroy removes both declarations from the element,
+     * and nothing else in the repo asserts that cleanup. A directive that stopped removing
+     * them would leave a stale gradient position on an element the consumer went on using,
+     * and the only trace would be these two declarations outliving it.
+     */
+    hasTrackedPointer(): Promise<boolean>;
+    /** The host's inline declarations — the directive's whole written output. */
+    private vars;
+}
+
+export { WrSpotlightCardHarness, WrSpotlightHarness };
+export type { WrSpotlightCardHarnessFilters, WrSpotlightHarnessFilters };

package/types/ngwr-star-border-testing.d.ts

@@ -0,0 +1,135 @@
+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 star border a harness query matches. */
+interface WrStarBorderHarnessFilters extends BaseHarnessFilters {
+    /**
+     * Match the projected content's text — the only thing telling two of these apart, since
+     * the decoration carries no name of its own and the host has no role. A string is an
+     * exact match, a RegExp is tested.
+     */
+    readonly text?: 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 `<wr-star-border>` and for the `[wr-star-border]` attribute form.
+ *
+ * **There is no `getRayCount()`, and no `hasTopRay()`.** `rays="single"` does not remove
+ * the top ray: both spans are always in the DOM and the stylesheet hides one with
+ * `display: none`. A count would answer 2 in both modes — flatly contradicting the input
+ * that was set — so the variant is read as {@link isSingleRay}, off the modifier class
+ * the CSS itself keys on. That class is public API, and it is the honest observable.
+ *
+ * Nothing here reports on the motion either. The sweep is a `@keyframes` rule in a
+ * stylesheet a unit test never loads, so `animationName` is `''` and `getAnimations()` is
+ * empty whether the component works or not; `mode="hover"` is a bare `:hover` selector
+ * with no state behind it, which is why there is no `hover()` to pair with anything; and
+ * the reduced-motion escape is a media query with no mirror in TypeScript, so the DOM is
+ * identical for a user who asked for less motion and one who did not.
+ *
+ * **The inline values are read off the `style` attribute rather than through
+ * `getCssValue()`, and that is not a jsdom concession.** The stylesheet declares its own
+ * `--wr-star-border-color` and `--wr-star-border-speed` on `.wr-star-border`, so in a
+ * real browser a computed read answers with the stylesheet's default at exactly the
+ * moment the host binding is the thing that broke. What the component wrote is the only
+ * value nothing else can forge.
+ *
+ * On the attribute form the host's `[class]` binding MERGES with the classes the consumer
+ * already put there, so read the variants through {@link isHoverOnly} and
+ * {@link isSingleRay} rather than comparing a whole `className` — the latter passes only
+ * as long as the host happens to carry nothing else.
+ *
+ * @example
+ * ```ts
+ * const loader = TestbedHarnessEnvironment.loader(fixture);
+ * const border = await loader.getHarness(WrStarBorderHarness);
+ *
+ * expect(await border.getText()).toBe('Upgrade');
+ * expect(await border.getSpeedSeconds()).toBe(6);
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+declare class WrStarBorderHarness extends ComponentHarness {
+    static hostSelector: string;
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options?: WrStarBorderHarnessFilters): HarnessPredicate<WrStarBorderHarness>;
+    /**
+     * The projected content's text, trimmed.
+     *
+     * Read from the inner panel rather than from the host, which would pick up anything the
+     * rays ever came to hold. They are empty spans today, so the two agree — but the panel
+     * is the slot the content was put in, and it is the thing a reader actually sees.
+     */
+    getText(): Promise<string>;
+    /** Whether the rays wait for the pointer (`mode="hover"`) instead of running always. */
+    isHoverOnly(): Promise<boolean>;
+    /**
+     * Whether only the bottom ray is drawn (`rays="single"`).
+     *
+     * From the modifier class, because the DOM cannot be asked: both ray spans are rendered
+     * in both modes and the top one is hidden in CSS. See this class's docs.
+     */
+    isSingleRay(): Promise<boolean>;
+    /**
+     * The ray colour as the consumer passed it — a CSS value, not a resolved one — or
+     * `null` when none was given.
+     *
+     * `null` is the common case and a real answer rather than a missing one: with no
+     * `[color]` the theme decides, primary on a light surface and white on a dark one, and
+     * a component that started writing a colour of its own there would silently take that
+     * choice away.
+     */
+    getRayColor(): Promise<string | null>;
+    /**
+     * How long one ray sweep takes, in seconds.
+     *
+     * Refuses a value that lost its unit rather than parsing the number out of it. The
+     * component builds this string from a plain number input and the stylesheet drops it
+     * straight into `animation-duration`, where a bare `6` is invalid — the declaration is
+     * discarded, the stylesheet's own default takes over, and nothing about the page looks
+     * wrong. A `parseFloat` would report 6 either way.
+     */
+    getSpeedSeconds(): Promise<number>;
+    /**
+     * How far the rays bleed past the inner panel, in pixels.
+     *
+     * Read off the host's `padding`, which is where `[thickness]` lands: the component
+     * writes the SHORTHAND, `<n>px 0`. Worth knowing on the attribute form — an inline
+     * shorthand wins the cascade, so a `<button wr-star-border>` loses whatever padding its
+     * own classes gave it, horizontal included. The visible padding lives on the inner
+     * panel, so this is a bleed measurement rather than a spacing one.
+     *
+     * Throws when the host's padding is not that shape, which means either the binding
+     * stopped arriving or something else is writing the property inline.
+     */
+    getThickness(): Promise<number>;
+    /**
+     * Whether every ray is kept out of the accessible tree.
+     *
+     * The one question worth asking about both spans at once — not how many there are, but
+     * whether either has stopped being decoration. They carry no text and mean nothing, so
+     * a ray that reached a screen reader would be an empty announcement in the middle of a
+     * button. Answered for all of them together, so one ray losing the attribute is enough
+     * to report `false`.
+     */
+    areRaysDecorative(): Promise<boolean>;
+    /** Read one declaration off the host's inline `style` — see this class's docs for why not `getCssValue()`. */
+    private hostStyle;
+}
+
+export { WrStarBorderHarness };
+export type { WrStarBorderHarnessFilters };

package/types/ngwr-table.d.ts

@@ -368,7 +368,16 @@ declare class WrTable {
     readonly selectGroupLabel: _angular_core.InputSignal<string | null>;
     /** Accessible name of a group band's collapse toggle. Falls back to `table.toggleGroup`. */
     readonly toggleGroupLabel: _angular_core.InputSignal<string | null>;
+    /** Accessible name of the loading overlay. Falls back to `table.loading`. */
+    readonly loadingLabel: _angular_core.InputSignal<string | null>;
     protected readonly resolvedEmptyLabel: _angular_core.Signal<string>;
+    /**
+     * The loading overlay was a bare spinner in a `<div>` — a busy state with no
+     * accessible name, which a screen reader reports as nothing at all while the
+     * table sits empty. `table.loading` shipped in both catalogs for it and was
+     * never read.
+     */
+    protected readonly resolvedLoadingLabel: _angular_core.Signal<string>;
     protected readonly resolvedSortLabel: _angular_core.Signal<string>;
     protected readonly resolvedSelectAllLabel: _angular_core.Signal<string>;
     protected readonly resolvedSelectRowLabel: _angular_core.Signal<string>;
@@ -681,7 +690,7 @@ declare class WrTable {
     protected getValue(item: Record<string, unknown>, key: unknown): unknown;
     protected templateFor(key: unknown): TemplateRef<WrTableCellContext> | undefined;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrTable, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTable, "wr-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "reorderable": { "alias": "reorderable"; "required": false; "isSignal": true; }; "columnOrder": { "alias": "columnOrder"; "required": false; "isSignal": true; }; "rowSelection": { "alias": "rowSelection"; "required": false; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "childrenKey": { "alias": "childrenKey"; "required": false; "isSignal": true; }; "treeColumn": { "alias": "treeColumn"; "required": false; "isSignal": true; }; "toggleRowLabel": { "alias": "toggleRowLabel"; "required": false; "isSignal": true; }; "collapsedGroups": { "alias": "collapsedGroups"; "required": false; "isSignal": true; }; "groupSummary": { "alias": "groupSummary"; "required": false; "isSignal": true; }; "showGroupCount": { "alias": "showGroupCount"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "emptyLabel": { "alias": "emptyLabel"; "required": false; "isSignal": true; }; "sortLabel": { "alias": "sortLabel"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; "selectRowLabel": { "alias": "selectRowLabel"; "required": false; "isSignal": true; }; "expandRowLabel": { "alias": "expandRowLabel"; "required": false; "isSignal": true; }; "selectGroupLabel": { "alias": "selectGroupLabel"; "required": false; "isSignal": true; }; "toggleGroupLabel": { "alias": "toggleGroupLabel"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; "totalItems": { "alias": "totalItems"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "viewportHeight": { "alias": "viewportHeight"; "required": false; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; }, { "columnOrder": "columnOrderChange"; "selection": "selectionChange"; "expanded": "expandedChange"; "collapsedGroups": "collapsedGroupsChange"; "sort": "sortChange"; "filterChange": "filterChange"; "page": "pageChange"; }, ["cellTemplates", "expandTpl", "groupTpl"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTable, "wr-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "reorderable": { "alias": "reorderable"; "required": false; "isSignal": true; }; "columnOrder": { "alias": "columnOrder"; "required": false; "isSignal": true; }; "rowSelection": { "alias": "rowSelection"; "required": false; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "childrenKey": { "alias": "childrenKey"; "required": false; "isSignal": true; }; "treeColumn": { "alias": "treeColumn"; "required": false; "isSignal": true; }; "toggleRowLabel": { "alias": "toggleRowLabel"; "required": false; "isSignal": true; }; "collapsedGroups": { "alias": "collapsedGroups"; "required": false; "isSignal": true; }; "groupSummary": { "alias": "groupSummary"; "required": false; "isSignal": true; }; "showGroupCount": { "alias": "showGroupCount"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "emptyLabel": { "alias": "emptyLabel"; "required": false; "isSignal": true; }; "sortLabel": { "alias": "sortLabel"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; "selectRowLabel": { "alias": "selectRowLabel"; "required": false; "isSignal": true; }; "expandRowLabel": { "alias": "expandRowLabel"; "required": false; "isSignal": true; }; "selectGroupLabel": { "alias": "selectGroupLabel"; "required": false; "isSignal": true; }; "toggleGroupLabel": { "alias": "toggleGroupLabel"; "required": false; "isSignal": true; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; "totalItems": { "alias": "totalItems"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "viewportHeight": { "alias": "viewportHeight"; "required": false; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; }, { "columnOrder": "columnOrderChange"; "selection": "selectionChange"; "expanded": "expandedChange"; "collapsedGroups": "collapsedGroupsChange"; "sort": "sortChange"; "filterChange": "filterChange"; "page": "pageChange"; }, ["cellTemplates", "expandTpl", "groupTpl"], never, true, never>;
 }
 
 /**

package/types/ngwr-tilt-card-testing.d.ts

@@ -0,0 +1,158 @@
+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 tilted element a harness query matches. */
+interface WrTiltHarnessFilters extends BaseHarnessFilters {
+    /** Match only the ones carrying a glare overlay (`true`) or only the ones without. */
+    readonly glare?: boolean;
+    /** Match only elements at rest (`true`) or only ones holding a tilt (`false`). */
+    readonly flat?: boolean;
+}
+/** The two rotations a tilt writes, in degrees. */
+interface WrTiltRotation {
+    /** Positive tips the top of the card toward the viewer. */
+    readonly rotateX: number;
+    /** Positive tips the right edge away. */
+    readonly rotateY: number;
+}
+
+/**
+ * @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 `[wrTilt]` and for `<wr-tilt-card>`, which applies it as a host
+ * directive — one class, because they are one behaviour on two hosts.
+ *
+ * **The tilt itself needs a box, and a unit test has none.** The directive turns a
+ * pointer position into two rotations by dividing by `getBoundingClientRect()`, which
+ * is 0×0 in jsdom, so a move dispatched at a component that has not been given
+ * dimensions writes `rotateX(NaNdeg)`. {@link movePointerTo} is still here because the
+ * fix is one line in the SPEC — stub the host's rect, the way
+ * `projects/lib/image-cropper/testing` documents — and because the two things worth
+ * asserting on this component are only reachable through it: that a move writes a
+ * transform at all, and that {@link leave} takes it away again.
+ *
+ * **{@link isFlat} is the reduced-motion assertion.** `onMove` returns before touching
+ * the host when the user asked for less motion, so "no inline transform after a move"
+ * is the whole contract, and it is one of the few reduced-motion behaviours in the
+ * animation set that a test can actually see — most of the others live in a `@media`
+ * block. Provide the `WrPlatform` stub and assert this.
+ *
+ * There is no `getGlareOpacity()` or `isGlareVisible()`: the overlay's gradient, its
+ * blend mode and its fade all live in the stylesheet. And no `getMaxTilt()` /
+ * `getPerspectiveInput()` — those would echo an input back rather than report what the
+ * directive wrote; {@link getPerspective} and {@link getScale} read the transform the
+ * host is actually carrying, which is the value that can be wrong.
+ *
+ * @example
+ * ```ts
+ * const card = await loader.getHarness(WrTiltHarness);
+ * expect(await card.isFlat()).toBe(true);
+ *
+ * await card.movePointerTo(150, 50);   // the spec stubbed the rect first
+ * expect((await card.getTilt())?.rotateY).toBeGreaterThan(0);
+ *
+ * await card.leave();
+ * expect(await card.isFlat()).toBe(true);
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+declare class WrTiltHarness extends ComponentHarness {
+    /** The directive on a consumer's element, and the card that hosts it. */
+    static hostSelector: string;
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options?: WrTiltHarnessFilters): HarnessPredicate<WrTiltHarness>;
+    /**
+     * Whether the host is at rest — no inline transform at all.
+     *
+     * True before the first move, after {@link leave}, and for the whole life of a card
+     * whose user asked for less motion. It is the difference between "flat" and
+     * "rotated by zero": the directive CLEARS the property rather than writing an
+     * identity transform, so an empty string is the state and `rotateX(0deg)` would be
+     * a component that tilted and came back the long way.
+     */
+    isFlat(): Promise<boolean>;
+    /** The inline `transform` exactly as written, or `''` at rest. */
+    getTransform(): Promise<string>;
+    /**
+     * The two rotations the host is holding, in degrees, or `null` while it is flat.
+     *
+     * Parsed from the transform rather than recomputed: the harness has no more access
+     * to the pointer maths than a consumer does, and the string is what the compositor
+     * will read.
+     */
+    getTilt(): Promise<WrTiltRotation | null>;
+    /** The perspective the transform was written with, in pixels, or `null` while flat. */
+    getPerspective(): Promise<number | null>;
+    /** The scale the transform was written with, or `null` while flat. */
+    getScale(): Promise<number | null>;
+    /**
+     * Whether the host was set up to hold children in 3-D.
+     *
+     * Written once in the constructor, so it is true from first render and stays true —
+     * which makes it the cheapest evidence that the directive is applied at all, on a
+     * host where every other read is `''` until something moves.
+     */
+    isPreserve3d(): Promise<boolean>;
+    /** Whether the glare overlay is installed (`[glare]`). */
+    hasGlare(): Promise<boolean>;
+    /**
+     * Whether the glare is kept out of the accessibility tree.
+     *
+     * It is a decorative highlight with no text, so a screen reader must not stop on
+     * it. Asserted rather than assumed because the overlay is created imperatively —
+     * there is no template line for a reader to check.
+     */
+    isGlareDecorative(): Promise<boolean>;
+    /**
+     * Where the glare is pointing, as the two percentages the directive writes, or
+     * `null` when there is no glare or nothing has moved yet.
+     *
+     * Cleared when the overlay is removed: a card that has given `[glare]` back should
+     * not look like it is still tracking a pointer.
+     */
+    getGlarePosition(): Promise<{
+        x: string;
+        y: string;
+    } | null>;
+    /**
+     * Move a pointer over the host.
+     *
+     * **Stub the host's rect in your spec first.** The directive divides the pointer
+     * offset by the host's width and height, and jsdom measures every element at 0×0,
+     * so without a box the transform comes out as `NaN` — which is not a failure the
+     * component would ever produce in a browser. One line does it:
+     *
+     * ```ts
+     * host.getBoundingClientRect = () => ({ left: 0, top: 0, width: 200, height: 100 }) as DOMRect;
+     * ```
+     */
+    movePointerTo(clientX: number, clientY: number): Promise<void>;
+    /** Take the pointer off the host — which clears the transform and settles it flat. */
+    leave(): Promise<void>;
+    /** The projected content's text, trimmed. */
+    getContentText(): Promise<string>;
+    /**
+     * One inline declaration, read off the `style` ATTRIBUTE.
+     *
+     * Not `getCssValue`, which is `getComputedStyle`: that resolves the stylesheet as
+     * well, so `transform` would come back as the resolved matrix in a browser and
+     * `--wr-tilt-glare-x` would answer with the sheet's own default. The attribute holds
+     * what the directive wrote and nothing else, which is the only thing worth pinning.
+     */
+    private inlineStyle;
+}
+
+export { WrTiltHarness };
+export type { WrTiltHarnessFilters, WrTiltRotation };

package/types/ngwr-tilt-card.d.ts

@@ -25,6 +25,8 @@ declare class WrTilt {
     private readonly platform;
     private readonly isBrowser;
     private glareEl;
+    private priorOverflow;
+    private priorPosition;
     constructor();
     /** @internal */
     protected onMove(event: PointerEvent): void;