ngwr 15.0.1 → 15.2.0

package/skills/ngwr/references/setup.md

@@ -146,10 +146,11 @@ bootstrapApplication(App, {
 - `withTheme({ defaultMode: 'dark' })` from `ngwr/theme` — the default
   scheme and its storage key, and `WrTheme` created at boot.
 - `withToast({ … })` from `ngwr/toast`, `withStorage({ … })` from
-  `ngwr/storage` and `withMeta({ … })` from `ngwr/meta` — toast defaults,
-  the storage engine, prefix and TTL, and `<head>` defaults for every route.
-  Like density and theme they configure a root service, so they belong at
-  bootstrap.
+  `ngwr/storage`, `withMeta({ … })` from `ngwr/meta` and
+  `withWindows({ bounds })` from `ngwr/window` — toast defaults, the storage
+  engine, prefix and TTL, `<head>` defaults for every route, and the work area
+  floating windows keep inside. Like density and theme they configure a root
+  service, so they belong at bootstrap.
 - A `validation` namespace in your own i18n catalog — ngwr ships no validation
   copy. `<wr-form-field>` reads `validation.<key>` for an error whose validator
   carries no `{ message }`, with the error payload as params.

package/theme/styles/_focus.scss

@@ -199,6 +199,14 @@
   @include focus-ring;
 }
 
+// Chart legend rows — with `toggleable` each row is a `<button aria-pressed>`, in
+// a standalone `ul[wr-chart-legend]` and in the legend every chart draws with one.
+// Safe as an OUTSET ring: neither the legend nor the charts that render it set
+// `overflow` on anything around the rows.
+.wr-chart-legend__toggle:focus-visible {
+  @include focus-ring;
+}
+
 // Pull to refresh — the host is the scroller, and a list of plain rows leaves
 // it the only thing a keyboard user can focus to scroll. An element's own
 // `overflow` does not clip its outline, so the ring stays OUTSET.

package/toast/styles/_index.scss

@@ -82,9 +82,33 @@ $toast-colors: (
         opacity: 0;
         pointer-events: none;
       }
+
+      // Only the front card shows its content while the stack is collapsed,
+      // and the cards behind take its height, so what peeks out under it is an
+      // even edge per level. Not an 8px one: each card behind is moved 8px per
+      // level and scaled by 5% per level about its anchored edge, so the edge
+      // is 8px less 5% of the front card's height — about 6px under a one-line
+      // toast, and nothing once the front card is 160px tall. Each card used to
+      // keep its own height, so a
+      // short front toast — a title alone, a one-line message — left the taller
+      // card behind it hanging past its bottom edge, with that card's last line
+      // reading through underneath at 70% opacity. The front toast is the last
+      // one in the DOM, whichever way the stack grows, and the host measures it
+      // into `--wr-toast-front-height`; until it has, each card keeps its own.
+      &:not(:last-of-type) {
+        block-size: var(--wr-toast-front-height, auto);
+
+        > * {
+          opacity: 0;
+        }
+      }
     }
   }
 
+  &--stack .wr-toast > * {
+    transition: opacity 240ms ease;
+  }
+
   // Bottom-anchored hosts: stack grows UPWARD (newest at the bottom).
   &--stack:not(.wr-toast-host--expanded).wr-toast-host--bottom,
   &--stack:not(.wr-toast-host--expanded).wr-toast-host--bottom-start,
@@ -148,6 +172,10 @@ $toast-colors: (
   --wr-toast-title-margin-bottom: var(--wr-space-xs);
   --wr-toast-title-font-size: var(--wr-text-sm);
   --wr-toast-title-font-weight: var(--wr-font-weight-semibold);
+  // The two line heights take a LENGTH. The glyph's offset and the actions
+  // row's height are `calc()`s over them, and a unitless value — valid for
+  // `line-height` itself — makes both invalid when the browser computes them:
+  // the glyph drops to the top of the line and the row to its buttons' height.
   --wr-toast-title-line-height: var(--wr-text-sm-leading);
   --wr-toast-message-font-size: var(--wr-text-sm);
   --wr-toast-message-line-height: var(--wr-text-sm-leading);
@@ -171,14 +199,18 @@ $toast-colors: (
   animation: wr-toast-in 0.18s ease-out;
   overflow: hidden;
 
-  // The status glyph. Sized off the title's line box so it reads as part of the
-  // first line rather than floating above it, and inked with the accent the
+  // The status glyph. Centred on the first line's box so it reads as part of
+  // that line rather than floating above it, and inked with the accent the
   // type already carries — the SHAPE is the channel, the colour reinforces it.
+  // The offset is derived from the line height rather than written as the 1px
+  // it comes to by default, so a toast whose first line is the message (see
+  // `--untitled` below) or whose line height was re-hooked to another length
+  // still lines up. A unitless one does not; see the hooks above.
   &__icon {
     flex: 0 0 auto;
     width: 1.125rem;
     height: 1.125rem;
-    margin-block-start: 0.0625rem;
+    margin-block-start: calc((var(--wr-toast-title-line-height) - 1.125rem) / 2);
     color: var(--wr-toast-accent);
   }
 
@@ -193,6 +225,17 @@ $toast-colors: (
     font-size: var(--wr-toast-title-font-size);
     font-weight: var(--wr-toast-title-font-weight);
     line-height: var(--wr-toast-title-line-height);
+    // A filename or a URL as a title wraps, the way it does as a message.
+    // Without it the word ran on under the copy and close buttons and was cut
+    // off at the card's edge by its `overflow: hidden`.
+    overflow-wrap: break-word;
+
+    // The margin separates the title FROM the message, so a title with nothing
+    // under it carries none — left in, the card was 4px deeper below its one
+    // line than above it.
+    &:last-child {
+      margin-block-end: 0;
+    }
   }
 
   &__message {
@@ -203,21 +246,50 @@ $toast-colors: (
     overflow-wrap: break-word;
   }
 
+  // The buttons sit on the FIRST line: the row is exactly one line box tall and
+  // the buttons are centred in it, overflowing into the padding when they are
+  // taller than the line. Before, the row took the buttons' own height, so a
+  // one-line toast grew from 46px to 56.5px, its text sat 13px from the top and
+  // 23.5px from the bottom, and the × hung 5px below the line it closes.
   &__actions {
     flex: 0 0 auto;
     display: inline-flex;
     align-items: center;
     gap: var(--wr-toast-actions-gap);
+    block-size: var(--wr-toast-title-line-height);
+  }
+
+  // A toast with no title opens on its message, so that is the line the glyph
+  // and the buttons centre on.
+  &--untitled &__icon {
+    margin-block-start: calc((var(--wr-toast-message-line-height) - 1.125rem) / 2);
   }
 
+  &--untitled &__actions {
+    block-size: var(--wr-toast-message-line-height);
+  }
+
+  // A square, the way the alert's, dialog's and drawer's × are: the glyph plus
+  // the padding on every side, centred by flex. As an inline box the button
+  // took its height from the line box around an inline `<svg>` — glyph, strut
+  // and descender — and measured 23x30.5, so its hover tint was a tall pill.
+  // The 1.5rem floor is WCAG 2.5.8's 24px target, which the glyph alone missed
+  // by a pixel on a 15px page.
   &__action {
     appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    min-inline-size: 1.5rem;
+    min-block-size: 1.5rem;
     background: transparent;
     border: 0;
     padding: var(--wr-toast-action-padding);
     color: var(--wr-color-on-surface-muted);
     cursor: pointer;
     border-radius: var(--wr-toast-action-radius);
+    line-height: 0;
     transition:
       color var(--wr-transition-base),
       background var(--wr-transition-base);
@@ -231,10 +303,25 @@ $toast-colors: (
     // pill from 12px to 20px when it was tried there.
     font-size: inherit;
 
+    // A 44px hit area on a coarse pointer, from the shared mixin the alert's,
+    // dialog's and drawer's × use. The pair stays clear of each other through
+    // the touch gap at the end of this file.
+    @include theme.touch-target;
+
     &:hover {
       color: var(--wr-color-on-surface);
       background: var(--wr-color-hover);
     }
+
+    // The shared ring, as on the alert's, dialog's and drawer's ×. These two
+    // had no focus style at all, so a keyboard user landing on Close — which
+    // the host does on purpose after a dismissal — saw whatever the UA drew.
+    // OUTSET is safe: the button sits inside the toast's padding, which is
+    // wider than the ring's reach, so the toast's `overflow: hidden` does not
+    // cut it.
+    &:focus-visible {
+      @include theme.focus-ring;
+    }
   }
 
   &__progress {
@@ -359,19 +446,23 @@ $toast-colors: (
   align-self: stretch;
 }
 
-// Touch pointers: grow the per-toast action buttons (copy / dismiss) to ~32px
-// with a wider gap so the pair no longer sits 2px apart, and give the
-// dismiss-all bar a taller hit area. Fine pointers keep the compact desktop
-// sizing above.
+// Touch pointers: grow the per-toast action buttons (copy / dismiss) to 32px,
+// each with the shared 44px hit area, and give the dismiss-all bar a taller
+// one. Fine pointers keep the compact desktop sizing above.
+//
+// The gap defaults to 0.75rem because that is what keeps two 44px halos on
+// 32px buttons from overlapping: centres 44px apart, so at rest they abut
+// exactly. It is the HOOK's default that moves, not the row's `gap`, so an
+// app's own `--wr-toast-actions-gap` still applies on a touch screen. Before,
+// this block re-declared the hook as the 4px it already was, under a comment
+// promising a wider gap, and there was no halo at all: the hit area was the
+// 32px button.
 @media (pointer: coarse) {
-  .wr-toast__actions {
-    gap: var(--wr-toast-actions-gap);
+  .wr-toast {
+    --wr-toast-actions-gap: 0.75rem;
   }
 
   .wr-toast__action {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
     width: 2rem;
     height: 2rem;
     padding: 0;

package/types/ngwr-bits-aurora.d.ts

@@ -7,6 +7,10 @@ import * as i0 from "@angular/core";
  * Under `prefers-reduced-motion` a single static frame is drawn, and drawn
  * again in the new colours when the page's colour scheme switches.
  *
+ * Under forced colours the canvas is hidden and its loop stops with it, leaving the
+ * box on the palette's own ground, which is what forced text and marks are chosen
+ * against. The loop also stops off screen and with no box to draw on.
+ *
  * @example
  * ```html
  * <div style="position: relative; min-height: 24rem; overflow: hidden">
@@ -40,10 +44,17 @@ export declare class WrAurora {
   private gl;
   private uniforms;
   private rafId;
+  /** The shader time last drawn, so a resize can repaint the frame it just cleared. */
+  private time;
   /** Flips once `boot()` has a context and a program — the loop waits for it. */
   private readonly booted;
   /** Whether the host is in the viewport; stays `true` without an observer. */
   private readonly onScreen;
+  /**
+   * Whether the box has an area. The intersection observer calls a zero-area canvas
+   * intersecting and sends no entry when it gains a size, so this reads the box instead.
+   */
+  private readonly hasBox;
   constructor();
   private boot;
   private pushUniforms;

package/types/ngwr-bits-border-glow-testing.d.ts

@@ -32,11 +32,10 @@ interface WrBorderGlowHarnessFilters extends BaseHarnessFilters {
  * {@link parseInlineDeclarations} for why a computed read would be a different, and
  * wrong, question.
  *
- * **A colour getter answering `null` means the component has never written that
- * variable**, which is the contract when the input is unset: the stylesheet's per-theme
- * default takes over. Note that it does not un-write them either — setting `[glowColor]`
- * and then putting it back to `null` leaves the last value on the host — so `null` is
- * "never set", not "not set now".
+ * **A colour getter answering `null` means that variable is not on the host now**, which
+ * is the contract when the input is unset or its value was refused: the stylesheet's
+ * per-theme default takes over. An input set and then put back to `null` comes off the
+ * host, so `null` says nothing about whether it was ever set.
  *
  * There is deliberately no `getGlowOpacity()`, `isGlowVisible()` or `isHovered()`: the
  * visible strength is a `calc()` in the stylesheet gated behind `:not(:hover)`, and
@@ -103,7 +102,7 @@ export declare class WrBorderGlowHarness extends ComponentHarness {
   getGlowColor(): Promise<string | null>;
   /**
    * The seven halo alphas in percent, brightest first, or `null` when no glow colour
-   * was ever set.
+   * is set.
    *
    * This is the whole of `[glowIntensity]`: the steps are `[100, 60, 50, 40, 30, 20,
    * 10]` multiplied by the intensity and clamped at 100, so `0.5` gives

package/types/ngwr-bits-border-glow.d.ts

@@ -23,7 +23,11 @@ import * as i0 from "@angular/core";
  * @see https://www.reactbits.dev/components/border-glow (visual reference)
  */
 export declare class WrBorderGlow {
-  /** Card background fill. When unset, uses the theme surface token. */
+  /**
+   * Card background fill. When unset, uses the theme surface token. A hook set inline on
+   * the same element is replaced by this input and does not come back when it is unset,
+   * so set it from a stylesheet rule. The same goes for `glowColor` and `colors`.
+   */
   readonly backgroundColor: import("@angular/core").InputSignal<string | null>;
   /** Corner radius in pixels. @default 28 */
   readonly borderRadius: import("@angular/core").InputSignalWithTransform<number, unknown>;

package/types/ngwr-bits-dot-grid-testing.d.ts

@@ -0,0 +1,92 @@
+import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from "@angular/cdk/testing";
+/** Narrows which `<wr-dot-grid>` a harness query matches. */
+interface WrDotGridHarnessFilters extends BaseHarnessFilters {
+  /**
+   * Match only grids whose canvas has drawn (`true`) or only grids still showing the
+   * stand-in dots (`false`). A dot grid has no name of its own, so this is the one
+   * state that tells two of them apart — see `WrDotGridHarness.isPainted`, which
+   * explains why the answer is always `false` in a unit test.
+   */
+  readonly painted?: boolean;
+}
+/**
+ * Test harness for `<wr-dot-grid>` — a field of dots that light up and move aside
+ * near the pointer.
+ *
+ * **The dots themselves are unreadable and always will be.** They are fills on a 2D
+ * canvas, laid out from the host's measured box; a unit test has no box and no
+ * drawing context, so there is nothing to count and nothing to compare. What the
+ * component publishes to the DOM is small and deliberate: the handover flag
+ * {@link isPainted}, the pitch {@link getGapPx} and size {@link getDotSizePx} the CSS
+ * stand-in grid draws at before the canvas takes over, and the surface itself.
+ *
+ * Both numbers are read from the host's inline declaration, never computed: the
+ * stylesheet declares `--wr-dot-grid-gap` and `--wr-dot-grid-dot-size` too, as the
+ * stand-in's own defaults, so a computed read would answer `24` and `3` on a
+ * component that had stopped publishing anything — the break the methods exist to
+ * catch.
+ *
+ * There is no `getDotCount()`, `getDotPositions()` or `getCanvasSize()`: the grid is
+ * laid out from `getBoundingClientRect()`, which is 0×0 here, and what falls out of
+ * that describes nothing. No `getDotColor()` or `getActiveColor()` — they are canvas
+ * fills resolved from themed custom properties that only a stylesheet supplies. No
+ * `hover()` or `moveTo()`: the pointer listeners go on only once a context exists,
+ * and what they move is canvas pixels. And no `isReducedMotion()`: the still grid is
+ * drawn through the same code and sets the same flag, so the DOM is identical either
+ * way and any answer would be a guess.
+ *
+ * @example
+ * ```ts
+ * const grid = await loader.getHarness(WrDotGridHarness);
+ *
+ * expect(await grid.hasCanvas()).toBe(true);
+ * expect(await grid.isDecorative()).toBe(true);
+ * expect(await grid.getGapPx()).toBe(24);
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+export declare class WrDotGridHarness extends ComponentHarness {
+  static hostSelector: string;
+  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+  static with(options?: WrDotGridHarnessFilters): HarnessPredicate<WrDotGridHarness>;
+  private readonly canvas;
+  /**
+   * Whether the canvas has drawn a frame and retired the CSS stand-in grid.
+   *
+   * **In a unit test this is always `false`, and asserting exactly that is the point.**
+   * jsdom hands back no 2D context, so the component must leave the stand-in up rather
+   * than declare itself painted over a blank box — the flag is set inside the draw for
+   * that reason, not at the end of the boot. A spec that waits for this to turn `true`
+   * waits forever.
+   */
+  isPainted(): Promise<boolean>;
+  /**
+   * The distance between dot centres, in pixels, as the component publishes it —
+   * `[gap]`, floored at the 4px the canvas lays the grid out at.
+   *
+   * The canvas half of `[gap]` is invisible here, but the stand-in half is not, and a
+   * stand-in drawing at one pitch while the canvas arrives at another changes the
+   * grid under the reader on hydration.
+   */
+  getGapPx(): Promise<number>;
+  /** The dot diameter, in pixels, as the component publishes it for the stand-in — `[dotSize]`. */
+  getDotSizePx(): Promise<number>;
+  /**
+   * Whether the grid is hidden from assistive tech.
+   *
+   * A background canvas has nothing to announce, so losing this leaves a screen reader
+   * stopping on a nameless graphic in front of the section's actual content.
+   */
+  isDecorative(): Promise<boolean>;
+  /**
+   * Whether the drawing surface is in the markup.
+   *
+   * It is there in every state, including the ones where nothing is ever drawn on it —
+   * prerendered, no 2D context, reduced motion — so the stand-in has something to sit
+   * behind and {@link isPainted} has something to answer about.
+   */
+  hasCanvas(): Promise<boolean>;
+  private publishedPx;
+}
+export type { WrDotGridHarnessFilters };

package/types/ngwr-bits-dot-grid.d.ts

@@ -0,0 +1,158 @@
+import * as i0 from "@angular/core";
+/**
+ * Dot-grid background — evenly spaced dots on a 2D canvas that light up in the
+ * active colour near the pointer and are pushed away from it, both by the same
+ * falloff, then spring back. Fills its nearest positioned ancestor; put it
+ * behind hero copy or section content.
+ *
+ * The pointer is followed on the host's PARENT, with passive listeners, so the
+ * dots answer a pointer that is over the content in front of them rather than
+ * over the canvas — the host itself takes no pointer events and never steals a
+ * click. Placed directly in a shadow root, where it has no parent element, it
+ * follows the pointer on the shadow host; with neither it listens nowhere and
+ * the grid stays unlit. Content placed after it needs `position: relative` (or
+ * any z-index) to paint above it, as with any absolutely positioned layer.
+ *
+ * The grid is laid out in the host's own box, before transforms, so one that
+ * boots inside a scaling-in panel (a dialog opening) is not stretched when the
+ * animation ends, and the pointer is mapped back through the transform.
+ *
+ * Decorative: the canvas is `aria-hidden`, the host has no role and nothing in
+ * it takes focus. The frame loop runs only while something moves — a still
+ * grid asks for no frames at all — and never while the host is off screen.
+ *
+ * Under `prefers-reduced-motion` one still grid is drawn, in the resting
+ * colour, and nothing follows the pointer; it is drawn again when the colours
+ * or the page's colour scheme change. The preference is read live.
+ *
+ * Colours are theme tokens by default — the dots `--wr-border-strong`, the lit
+ * ones `--wr-color-primary` — through the `--wr-dot-grid-dot-color` and
+ * `--wr-dot-grid-active-color` hooks, and resolved before they reach the
+ * canvas, which reads neither a `var()` nor a `light-dark()`.
+ *
+ * @example
+ * ```html
+ * <section style="position: relative; min-height: 24rem; overflow: hidden">
+ *   <wr-dot-grid />
+ *   <h1 style="position: relative">Hero copy above the dots</h1>
+ * </section>
+ * ```
+ *
+ * @see https://ngwr.dev/bits/dot-grid
+ */
+export declare class WrDotGrid {
+  /** Dot diameter in px. @default 3 */
+  readonly dotSize: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** Distance between dot centres in px, never under 4. @default 24 */
+  readonly gap: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** Resting dot colour, any CSS colour. When unset, empty or blank, `--wr-dot-grid-dot-color` decides. */
+  readonly dotColor: import("@angular/core").InputSignal<string | null>;
+  /** Colour a dot takes near the pointer, any CSS colour. When unset, empty or blank, `--wr-dot-grid-active-color` decides. */
+  readonly activeColor: import("@angular/core").InputSignal<string | null>;
+  /** How far from the pointer a dot still reacts, in px. @default 120 */
+  readonly radius: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /**
+   * How far a dot right by the pointer is pushed, in px; the push fades out
+   * toward `radius`. `0` keeps the dots in place and only lights them, and a
+   * negative value pulls them in. @default 12
+   */
+  readonly strength: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** The pitch the grid is laid out at: `gap`, floored. */
+  protected readonly pitch: import("@angular/core").Signal<number>;
+  /** The dot diameter drawn: `dotSize`, never negative. */
+  protected readonly size: import("@angular/core").Signal<number>;
+  /** A colour the author chose, published so the stand-in draws in it too; `null` while the hook decides. */
+  protected readonly standInColor: import("@angular/core").Signal<string | null>;
+  /** The colours the canvas resolves: an input that is unset, empty or blank leaves the hook in charge. */
+  private readonly dotExpression;
+  private readonly activeExpression;
+  /**
+   * Flips once the canvas has drawn, which retires the CSS stand-in grid.
+   *
+   * A canvas cannot be prerendered, so on an SSR'd page it is blank until the
+   * bundle has loaded and hydrated. The stylesheet paints the same dots at the
+   * same pitch from the prerendered HTML in the meantime, and this hands over.
+   */
+  protected readonly painted: import("@angular/core").WritableSignal<boolean>;
+  private readonly canvasRef;
+  private readonly host;
+  private readonly zone;
+  private readonly destroyRef;
+  private readonly platform;
+  private readonly isBrowser;
+  private ctx;
+  /** The host's layout box, in CSS pixels before any transform: what the grid is laid out in. */
+  private box;
+  /** Bitmap pixels per CSS pixel the canvas is backed at; 0 until the first fit. */
+  private ratio;
+  private dots;
+  /** Lit dots by alpha step, reused frame to frame. */
+  private readonly lit;
+  /** The pointer, in viewport coordinates, and whether it is over the parent at all. */
+  private readonly pointer;
+  private rafId;
+  private lastTime;
+  /** Schedules a frame while motion is allowed; `null` under reduced motion. */
+  private wake;
+  /** Flips once `boot()` has a context and a grid — everything after waits for it. */
+  private readonly booted;
+  constructor();
+  private boot;
+  /** Follow the pointer and draw on demand; returns what stops both. */
+  private interact;
+  /** Draw the grid as it should look now: a frame while motion is allowed, at once under reduced motion. */
+  private requestDraw;
+  /** Fit the canvas to a new box or pixel ratio and, when that cleared it, repaint at once. */
+  private resize;
+  /**
+   * Back the canvas for a `width` × `height` box, in CSS pixels, at the screen's
+   * pixel ratio. Returns whether anything changed: writing `canvas.width` clears
+   * the bitmap even to the value it already has, so an unchanged box is left alone.
+   */
+  private fit;
+  /** Lay the dots out over the box, every one at rest. */
+  private placeDots;
+  /** Positions along one side of `length`: the centre, then every `gap` out to one step past each edge. */
+  private axis;
+  /** Every dot back at rest and unlit, and the pointer gone. */
+  private rest;
+  private tick;
+  /** Advance every dot by `step` frames; returns whether any is still moving. */
+  private move;
+  private draw;
+  /** One path for every dot in `dots`, filled once. */
+  private fillDots;
+  static ɵfac: i0.ɵɵFactoryDeclaration<WrDotGrid, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<WrDotGrid, "wr-dot-grid", never, {
+    "dotSize": {
+      "alias": "dotSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "gap": {
+      "alias": "gap";
+      "required": false;
+      "isSignal": true;
+    };
+    "dotColor": {
+      "alias": "dotColor";
+      "required": false;
+      "isSignal": true;
+    };
+    "activeColor": {
+      "alias": "activeColor";
+      "required": false;
+      "isSignal": true;
+    };
+    "radius": {
+      "alias": "radius";
+      "required": false;
+      "isSignal": true;
+    };
+    "strength": {
+      "alias": "strength";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

package/types/ngwr-bits-iridescence-testing.d.ts

@@ -0,0 +1,85 @@
+import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from "@angular/cdk/testing";
+/** Narrows which `<wr-iridescence>` a harness query matches. */
+interface WrIridescenceHarnessFilters extends BaseHarnessFilters {
+  /**
+   * Match only hosts whose canvas has drawn (`true`) or only hosts still showing the
+   * stand-in alone (`false`). The background has no name of its own, so this is the one
+   * state that tells two of them apart — see `WrIridescenceHarness.isPainted`, which
+   * says when each answer is the right one in a unit test.
+   */
+  readonly painted?: boolean;
+}
+/**
+ * Test harness for `<wr-iridescence>` — folded silk on a WebGL2 canvas.
+ *
+ * **The picture is unreadable and always will be.** It is a fragment shader's output,
+ * and jsdom has no WebGL2 to run one. What the component publishes to the DOM is small
+ * and deliberate: the handover flag {@link isPainted}, the colour {@link getColor} it
+ * hands the CSS stand-in, and the surface itself.
+ *
+ * The colour is read from the host's inline declaration, a variable of the component's
+ * own. The `--wr-iridescence-color` hook belongs to the author and the stylesheet, so it
+ * says nothing about what the component published.
+ *
+ * There is no `getPhase()`: the phases live in a frame loop, step by the real frame
+ * delta and leave the component only as a uniform, so any number would be a stale copy
+ * of an implementation detail. No pixel reads: a stub context paints nothing, and with
+ * no stub there is no context. No `isAnimating()`: a loop that is running and a loop
+ * that was never started look the same from the DOM, and a frame that would repeat the
+ * last one draws nothing either way. And no `stir()`: the pointer's easing runs on
+ * frames and its result goes to a uniform, so a method that moved it could report
+ * nothing it had done.
+ *
+ * @example
+ * ```ts
+ * const silk = await loader.getHarness(WrIridescenceHarness);
+ *
+ * expect(await silk.hasCanvas()).toBe(true);
+ * expect(await silk.isDecorative()).toBe(true);
+ * expect(await silk.getColor()).toBe('var(--wr-color-primary)');
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+export declare class WrIridescenceHarness extends ComponentHarness {
+  static hostSelector: string;
+  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+  static with(options?: WrIridescenceHarnessFilters): HarnessPredicate<WrIridescenceHarness>;
+  private readonly canvas;
+  /**
+   * Whether the canvas has drawn a frame and is fading in over the CSS stand-in.
+   *
+   * **In a plain unit test this is `false`, and asserting exactly that is the point.**
+   * jsdom hands back no WebGL2 context, so the component must leave the stand-in up
+   * rather than declare itself painted over a blank box: the flag is set inside the draw
+   * for that reason, not at the end of the boot. A spec that stubs a context and runs a
+   * frame gets `true`, and a lost context takes it back to `false`.
+   */
+  isPainted(): Promise<boolean>;
+  /**
+   * The colour published on the host's own `--wr-iridescence-input-color` for the stand-in,
+   * or `null` when none is: `[color]` unset, empty or blank, which leaves the stylesheet's
+   * value in charge.
+   *
+   * It is the input as authored, a `var()` or a `light-dark()` included, not what it
+   * resolves to: what reaches the shader is a uniform, which the DOM does not carry. A
+   * stand-in tinted one colour while the canvas arrives in another is what this catches.
+   */
+  getColor(): Promise<string | null>;
+  /**
+   * Whether the background is hidden from assistive tech.
+   *
+   * A background canvas has nothing to announce, so losing this leaves a screen reader
+   * stopping on a nameless graphic in front of the section's actual content.
+   */
+  isDecorative(): Promise<boolean>;
+  /**
+   * Whether the drawing surface is in the markup.
+   *
+   * It is there in every state, including the ones where nothing is ever drawn on it
+   * (prerendered, no WebGL2, a shader the driver refused), so the stand-in has something
+   * to sit behind and {@link isPainted} has something to answer about.
+   */
+  hasCanvas(): Promise<boolean>;
+}
+export type { WrIridescenceHarnessFilters };