ngwr 11.1.0 → 11.2.0

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

@@ -0,0 +1,174 @@
+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-splitter>` a harness query matches. */
+interface WrSplitterHarnessFilters extends BaseHarnessFilters {
+    /**
+     * Match the splitter's own axis — `horizontal` for panes side by side. Note that
+     * this is the COMPONENT's word, which is the opposite of what the divider
+     * announces; see `WrSplitterHarness.getOrientation`.
+     */
+    readonly orientation?: 'horizontal' | 'vertical';
+    /** Match the divider's accessible name, an exact string or a RegExp. */
+    readonly dividerLabel?: string | RegExp;
+    /** Match only enabled (`false`) or only disabled (`true`) splitters. */
+    readonly disabled?: boolean;
+}
+/** The share of the splitter each pane is asking for, in percent. */
+interface WrSplitterPaneSizes {
+    /** The start pane's `flex-basis` — the same number as the divider's position. */
+    readonly start: number;
+    /** The end pane's `flex-basis` — the remainder. */
+    readonly end: 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
+ */
+
+/** The four arrow keys, by the direction a user would say out loud. */
+type Arrow = 'left' | 'right' | 'up' | 'down';
+/**
+ * Test harness for `<wr-splitter>` — two panes and the divider between them.
+ *
+ * **Everything here is the keyboard, and that is not a workaround.** The divider is
+ * dragged with a pointer in a browser, but the drag reads
+ * `getBoundingClientRect()` and turns a client coordinate into a percentage; jsdom
+ * lays nothing out, so every rect is 0×0 and a synthetic drag writes `NaN` into the
+ * position. The arrow keys reach the same state, are the accessible path anyway, and
+ * are what the WAI-ARIA separator pattern is judged on.
+ *
+ * **Two words for the axis, and they are opposites.** The component's
+ * `orientation="horizontal"` means the panes sit side by side, which needs a
+ * VERTICAL divider — so that is what `aria-orientation` says. {@link getOrientation}
+ * answers the component's word and {@link getDividerOrientation} the divider's; both
+ * are here because a spec that conflated them would look right and assert nothing.
+ *
+ * **Arrows follow the VISUAL axis.** Under `dir="rtl"` the start pane is the one on
+ * the right, so ArrowRight SHRINKS the position. {@link pressArrow} takes the key a
+ * user presses rather than a semantic direction, which is the only way a spec can
+ * pin that mirroring; {@link setPosition} walks with whichever key currently grows
+ * the number, and reports where it landed.
+ *
+ * @example
+ * ```ts
+ * const splitter = await loader.getHarness(WrSplitterHarness);
+ *
+ * expect(await splitter.getPosition()).toBe(50);
+ * await splitter.setPosition(70);
+ * expect(await splitter.getPaneSizes()).toEqual({ start: 70, end: 30 });
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+declare class WrSplitterHarness extends ComponentHarness {
+    static hostSelector: string;
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options?: WrSplitterHarnessFilters): HarnessPredicate<WrSplitterHarness>;
+    private readonly divider;
+    /**
+     * The splitter's own axis: `horizontal` when the panes sit side by side.
+     *
+     * Read from the host modifier rather than from `aria-orientation`, which says the
+     * opposite thing about the same layout — see {@link getDividerOrientation}.
+     */
+    getOrientation(): Promise<'horizontal' | 'vertical'>;
+    /**
+     * What the divider announces — the INVERSE of {@link getOrientation}, and correct:
+     * a separator's orientation is the line it draws, not the axis it travels along.
+     */
+    getDividerOrientation(): Promise<string | null>;
+    /** The divider's position as a percentage, from `aria-valuenow`. */
+    getPosition(): Promise<number>;
+    /** The lowest position the divider will accept, from `aria-valuemin`. */
+    getMinPosition(): Promise<number>;
+    /** The highest position the divider will accept, from `aria-valuemax`. */
+    getMaxPosition(): Promise<number>;
+    /**
+     * What each pane is asking for, in percent, from the `flex-basis` the component
+     * writes inline.
+     *
+     * This is the only evidence a spec without layout has that the panes followed the
+     * divider — a measured width is zero for both. They should always sum to 100:
+     * the end pane is `100 - position`, so a pair that does not is a component bug
+     * rather than a rounding artefact.
+     */
+    getPaneSizes(): Promise<WrSplitterPaneSizes>;
+    /** The start pane's projected text, trimmed. */
+    getStartText(): Promise<string>;
+    /** The end pane's projected text, trimmed. */
+    getEndText(): Promise<string>;
+    /** The divider's accessible name — a focusable separator is a widget and needs one. */
+    getDividerLabel(): Promise<string | null>;
+    /**
+     * Whether the splitter refuses to resize.
+     *
+     * From the divider's `aria-disabled`, which is the half a screen reader acts on.
+     * The component also drops the divider out of the tab order and paints a modifier
+     * on the host, and {@link isDividerFocusable} answers the first of those — worth
+     * asking separately, because a divider that is announced as disabled and still a
+     * tab stop is a control the keyboard can reach and not use.
+     */
+    isDisabled(): Promise<boolean>;
+    /** Whether the divider is a tab stop (`tabindex="0"`). */
+    isDividerFocusable(): Promise<boolean>;
+    /** Move keyboard focus to the divider. */
+    focusDivider(): Promise<void>;
+    /** Whether the divider currently holds focus. */
+    isDividerFocused(): Promise<boolean>;
+    /**
+     * Press one arrow key on the divider.
+     *
+     * The key rather than a direction, deliberately: which way the position moves is a
+     * function of the key AND the reading direction, and a `grow()` / `shrink()` pair
+     * would hide exactly the behaviour worth asserting. An arrow off the splitter's own
+     * axis does nothing at all — the horizontal splitter ignores Up and Down.
+     *
+     * `shift` is the coarse step: 10 instead of 1.
+     */
+    pressArrow(arrow: Arrow, options?: {
+        shift?: boolean;
+    }): Promise<void>;
+    /** Press Home — jumping to `minPosition`, whatever the reading direction. */
+    pressHome(): Promise<void>;
+    /** Press End — jumping to `maxPosition`. Semantic, so it never mirrors under RTL. */
+    pressEnd(): Promise<void>;
+    /**
+     * Walk the divider to a position with the keyboard, and assert it landed there.
+     *
+     * Ten-unit hops first, then single steps — the same two strides a user has. It
+     * walks rather than assigning, because assigning would prove the harness can write
+     * a signal and nothing about the component: the clamp, the min / max and the
+     * mirroring all live on this path.
+     *
+     * Throws rather than half-arriving. A target outside `[min, max]` is unreachable by
+     * construction, and so is any target the walk cannot hit exactly — the position is a
+     * float that a previous drag may have left mid-step, and whole-unit keys cannot get
+     * off a fractional offset. Both say so, with where it actually stopped.
+     */
+    setPosition(target: number): Promise<void>;
+    /**
+     * Whether ArrowRight is currently the key that GROWS the position — true in LTR,
+     * false in RTL, where the start pane is the one on the right.
+     *
+     * Probed rather than read off `Directionality`, which a harness has no access to:
+     * press, look, and put it back. At the top of the range a growing press is clamped
+     * and would prove nothing, so the probe presses the other way there instead. The
+     * undo is conditional — a press that moved nothing has nothing to undo, and undoing
+     * it anyway would move the divider by one in the direction the probe was testing.
+     */
+    private growsWithRight;
+    private numeric;
+}
+
+export { WrSplitterHarness };
+export type { WrSplitterHarnessFilters, WrSplitterPaneSizes };

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>;
 }
 
 /**