ngwr 11.2.0 → 12.0.0

package/tree/styles/_index.scss

@@ -46,7 +46,7 @@
 
     &--disabled {
       cursor: not-allowed;
-      opacity: 0.55;
+      opacity: var(--wr-disabled-opacity);
     }
 
     // Active-descendant cursor when virtualized — focus lives on the list
@@ -101,6 +101,20 @@
     transform: rotate(90deg);
   }
 
+  // The indent is logical and mirrors on its own, but the triangle is drawn
+  // pointing physically right — so under `dir="rtl"` a collapsed node aims back
+  // at its parent instead of at the children it would reveal. `tree.ts` already
+  // swaps ArrowLeft / ArrowRight for the same reason; this is the picture of that
+  // axis. Turn it around the way the cascader's branch arrow does.
+  //
+  // Scoped to the COLLAPSED state deliberately, and both halves matter: an
+  // unscoped rule sets the same property as the `aria-expanded='true'` rule
+  // above, and mirroring the inner `<svg>` instead would compose `rotate(90deg)`
+  // over `scaleX(-1)` and point an expanded node UP rather than down.
+  [dir='rtl'] &__row[aria-expanded='false'] &__toggle {
+    transform: scaleX(-1);
+  }
+
   &__label {
     flex: 1 1 auto;
     overflow: hidden;
@@ -109,7 +123,7 @@
   }
 
   &--disabled {
-    opacity: 0.7;
+    opacity: var(--wr-disabled-opacity);
     pointer-events: none;
   }
 
@@ -137,7 +151,7 @@
 
     &.wr-tree--disabled {
       --wr-tree-trigger-color: var(--wr-color-on-surface-muted);
-      --wr-tree-trigger-bg: rgba(var(--wr-color-outline-rgb), 0.35);
+      --wr-tree-trigger-bg: var(--wr-color-fill);
     }
   }
 
@@ -152,7 +166,12 @@
     color: var(--wr-tree-trigger-color);
     border: 1px solid var(--wr-tree-trigger-border);
     border-radius: var(--wr-tree-trigger-radius);
-    padding: var(--wr-tree-trigger-padding-y) var(--wr-tree-trigger-padding-x);
+    // Density-multiplied like select / input / textarea / button. The comment
+    // above promises this trigger "lines up with select / input / button", and
+    // that only holds at `md` without the multiplier: at `touch` the others
+    // measured 35.59px and this one stayed at 30.
+    padding: calc(var(--wr-tree-trigger-padding-y) * var(--wr-density-y, 1))
+      calc(var(--wr-tree-trigger-padding-x) * var(--wr-density-x, 1));
     font-family: var(--wr-font-family-base);
     font-size: var(--wr-tree-trigger-font-size);
     line-height: var(--wr-tree-trigger-line-height);
@@ -226,8 +245,12 @@
     flex-wrap: wrap;
     align-items: center;
     padding: 0.25rem 0.5rem;
-    // Empty / one-row floor = single-mode height (+2px for the border).
-    min-height: calc(var(--wr-tree-trigger-line-height) + var(--wr-tree-trigger-padding-y) * 2 + 2px);
+    // Empty / one-row floor = single-mode height (+2px for the border), so it
+    // has to carry the same density multiplier the single-mode padding does —
+    // otherwise the two modes stop agreeing the moment density leaves `md`.
+    min-height: calc(
+      var(--wr-tree-trigger-line-height) + var(--wr-tree-trigger-padding-y) * var(--wr-density-y, 1) * 2 + 2px
+    );
   }
 
   &__chips {

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

@@ -37,7 +37,13 @@ interface WrBarChartBar {
  * **The bars are read as PERCENTAGES, not as pixels.** Each column's height is
  * written inline as a share of the chart's maximum, which is the one number that
  * survives a test with no layout — and it is also the component's whole job, since
- * the maximum is either given or derived from the data.
+ * the maximum is either given or derived from the data. That share is read off the
+ * `style` ATTRIBUTE rather than through `getCssValue()`, and the difference is not
+ * cosmetic: `getCssValue()` is `getComputedStyle()`, which hands the declared `60%`
+ * straight back in jsdom and resolves it to used pixels in a real browser — so the
+ * same harness answered `100` here and `200` under Selenium or a browser runner,
+ * with no error to say which one you got. The stylesheet's own `min-height: 1px`
+ * is a second way that read lies, turning an empty bar into `1`.
  *
  * **The visible label row is decoration.** Every column carries `role="img"` with
  * the label AND the value in its name, and the printed labels underneath are
@@ -61,6 +67,8 @@ declare class WrBarChartHarness extends ComponentHarness {
     static with(options?: WrBarChartHarnessFilters): HarnessPredicate<WrBarChartHarness>;
     /** Every column, in data order. */
     getBars(): Promise<WrBarChartBar[]>;
+    /** Parse one bar's declared share. See the class note on why this is not `getCssValue()`. */
+    private static heightPercentOf;
     /** The labels printed under the columns, in order. */
     getLabels(): Promise<string[]>;
     /** What each column announces — the label and the value together. */

package/types/ngwr-blur-text.d.ts

@@ -1,7 +1,10 @@
 import * as _angular_core from '@angular/core';
 
-type Unit = 'chars' | 'words';
-type Direction = 'top' | 'bottom';
+/** Granularity of the split. */
+type WrBlurTextUnit = 'chars' | 'words';
+/** Entry direction. `'top'` slides down into place; `'bottom'` slides up. */
+type WrBlurTextDirection = 'top' | 'bottom';
+
 type Piece = {
     readonly kind: 'piece';
     readonly text: string;
@@ -31,9 +34,9 @@ declare class WrBlurText {
     /** Text to animate. Required. */
     readonly text: _angular_core.InputSignal<string>;
     /** Split granularity. @default 'words' */
-    readonly animateBy: _angular_core.InputSignal<Unit>;
+    readonly animateBy: _angular_core.InputSignal<WrBlurTextUnit>;
     /** Entry direction. `'top'` slides down into place; `'bottom'` slides up. @default 'top' */
-    readonly direction: _angular_core.InputSignal<Direction>;
+    readonly direction: _angular_core.InputSignal<WrBlurTextDirection>;
     /** Per-piece stagger in ms. @default 200 */
     readonly delay: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Duration of each keyframe step in seconds (total = 2 × stepDuration). @default 0.35 */
@@ -72,3 +75,4 @@ declare class WrBlurText {
 }
 
 export { WrBlurText };
+export type { WrBlurTextDirection, WrBlurTextUnit };

package/types/ngwr-breadcrumbs.d.ts

@@ -1,10 +1,10 @@
 import * as _angular_core from '@angular/core';
 
 /**
- * Breadcrumb navigation. Project `<wr-breadcrumbs-item>` children — they
- * render as `<li>` rows inside an `<ol>`, separated by the configured
- * glyph (default `/`). The container exposes the `nav[aria-label]`
- * landmark required by WCAG.
+ * Breadcrumb navigation. Project `<wr-breadcrumbs-item>` children — each keeps
+ * its own element and takes `role="listitem"` inside the `<ol>` rather than
+ * rendering an `<li>`, separated by the configured glyph (default `/`). The
+ * container exposes the `nav[aria-label]` landmark required by WCAG.
  *
  * @example
  * ```html
@@ -23,17 +23,24 @@ import * as _angular_core from '@angular/core';
 declare class WrBreadcrumbs {
     /** Separator glyph between items. Any short string. @default '/' */
     readonly separator: _angular_core.InputSignal<string>;
-    /** Accessible label for the `nav` landmark. @default 'Breadcrumbs' */
-    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Accessible label for the `nav` landmark. Falls back to `breadcrumbs.label`,
+     * then `'Breadcrumbs'`.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrBreadcrumbs, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrBreadcrumbs, "wr-breadcrumbs", never, { "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**
- * One row inside `<wr-breadcrumbs>`. Renders as a `<li>` containing
- * either an `<a>` (when `[href]` or `[routerLink]` is set) or a plain
- * `<span aria-current="page">` (when neither is set — typically the last
- * crumb).
+ * One row inside `<wr-breadcrumbs>`. The host itself is the row — a
+ * `<wr-breadcrumbs-item role="listitem" class="wr-breadcrumbs__item">`
+ * inside the parent's `<ol>` — and it contains either a real
+ * `<a class="wr-breadcrumbs__link">` (when `[href]` or `[routerLink]` is
+ * set) or, for the current crumb, a non-interactive
+ * `<a class="wr-breadcrumbs__current" role="text" tabindex="-1"
+ * aria-current="page">` (when neither is set — typically the last crumb).
  *
  * @example
  * ```html

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

@@ -139,7 +139,7 @@ type Arrow = 'left' | 'right' | 'up' | 'down';
  * picked. And it does NOT follow {@link next} / {@link previous} — a grid paged
  * away from the roving month has no active cell at all, and so no tab stop, until
  * a key or a click puts one back. That is the component's behaviour, and
- * {@link getActiveDay} is how a spec sees it.
+ * {@link getActiveDayNumber} is how a spec sees it.
  *
  * **Keys go to the host, not to a cell.** The component listens on its own element,
  * so {@link pressArrow} works whether or not jsdom managed to put real focus

package/types/ngwr-calendar.d.ts

@@ -79,6 +79,16 @@ declare class WrCalendar {
     protected readonly hoverDate: _angular_core.WritableSignal<Date | null>;
     /** Which sub-view is currently shown. Cycles `day → month → year` on header click. */
     protected readonly viewMode: _angular_core.WritableSignal<"day" | "month" | "year">;
+    /**
+     * Chip the month / year listbox has moved its ring to, as an index into
+     * `monthsView()` / `yearsView()`. `null` means "nobody has pressed an arrow
+     * yet", which resolves to the month or year on screen — see {@link activeChip}.
+     *
+     * Reset on every view change rather than remembered: coming back to the month
+     * list should ring the month you are looking at, not the one an earlier visit
+     * happened to leave the ring on.
+     */
+    private readonly rovedChip;
     private readonly prevMonthLabel;
     private readonly nextMonthLabel;
     private readonly prevYearLabel;
@@ -97,6 +107,22 @@ declare class WrCalendar {
     protected readonly headerLabel: _angular_core.Signal<string>;
     /** 6×7 day grid covering the current month plus spillover. */
     protected readonly weeks: _angular_core.Signal<readonly (readonly Date[])[]>;
+    /**
+     * The chip carrying the listbox's only `tabindex="0"` — where the ring is, and
+     * where Tab lands.
+     *
+     * A listbox owns its arrows, and these two did not: twelve months were twelve
+     * tab stops, so the role promised an interaction model the component never
+     * implemented. One tab stop plus arrow keys is the roving-tabindex half of the
+     * pattern the day grid already uses.
+     *
+     * Routed through {@link nearestEnabledChip} on BOTH paths — the seed and every
+     * arrow — for the reason the grid learned first: `.focus()` on a
+     * `<button disabled>` is a no-op, so parking the sole tab stop on a month a
+     * `[min]` has closed off leaves the whole view unreachable by keyboard.
+     * `-1` on the day view, where there are no chips at all.
+     */
+    protected readonly activeChip: _angular_core.Signal<number>;
     protected readonly classes: _angular_core.Signal<string>;
     constructor();
     /** Header `‹` button — steps by month / year / decade based on the active view. */
@@ -107,6 +133,14 @@ declare class WrCalendar {
     protected onLabelClick(): void;
     protected onMonthSelect(monthIdx: number): void;
     protected onYearSelect(year: number): void;
+    /**
+     * Switch views and drop the chip ring with them.
+     *
+     * Every view change is the only thing that changes what the chips MEAN, so it
+     * is the one place the ring has to forget where it was — otherwise a year
+     * picked at index 7 rings the eighth MONTH on the way back down.
+     */
+    private setViewMode;
     private stepViewDate;
     protected isToday(date: Date): boolean;
     protected isOutOfMonth(date: Date): boolean;
@@ -126,6 +160,38 @@ declare class WrCalendar {
     protected onCellLeave(): void;
     private applyRangeClick;
     protected onKeyDown(event: KeyboardEvent): void;
+    /**
+     * Arrow / Home / End inside the month or year listbox — the roving half of the
+     * pattern their `role` has always claimed.
+     *
+     * Steps by one along the row and by a full row vertically, and the inline pair
+     * mirrors under `dir="rtl"` for the same reason the grid's does: those two keys
+     * name a side of the screen. The page does NOT wrap or spill into the next
+     * one — a month list is twelve fixed cells, and the header's `‹` / `›` are what
+     * change which twelve. Anything else (Enter, Space, Tab, Escape) is left to the
+     * button and to whatever owns the calendar.
+     */
+    private onChipKeyDown;
+    /** How many chips the current view renders — twelve either way, read rather than assumed. */
+    private chipCount;
+    /** Whether the chip at `index` refuses selection in the current view. */
+    private isChipDisabled;
+    /** The chip the view itself points at: the month or year currently on screen. */
+    private currentChip;
+    /**
+     * The first selectable chip at or after `from`, else the first before it, else
+     * `from` unchanged when the whole page is closed off — the chip version of
+     * {@link nearestEnabled}, and it exists for the same reason: the ring carries
+     * the only `tabindex="0"`, and a disabled button cannot hold it.
+     */
+    private nearestEnabledChip;
+    /**
+     * The first selectable chip at `from` or beyond it in `step`'s direction, else
+     * null when that whole direction is closed off — which is the answer for an
+     * ArrowLeft on the first chip: stay put.
+     */
+    private enabledChipToward;
+    private focusActiveChip;
     /**
      * The first selectable day at or after `candidate`, else the first before it,
      * else `candidate` unchanged when everything nearby is closed off. Bounded at

package/types/ngwr-carousel.d.ts

@@ -1,14 +1,74 @@
 import * as ngwr_i18n from 'ngwr/i18n';
 import * as _angular_core from '@angular/core';
+import { InjectionToken, Signal } from '@angular/core';
 
 /**
  * One slide in a {@link WrCarousel}. Holds whatever content you
  * project — image, card, video, anything.
+ *
+ * **An off-screen slide is `inert`.** Only one slide is visible, but the track
+ * merely translates the others out of view: without this they stay in the tab
+ * order and in the accessibility tree, so a keyboard user tabs into a link they
+ * cannot see and a screen reader announces every slide as if they were all on
+ * screen. `inert` takes the whole subtree out of both at once, which is why it
+ * is preferred here over `tabindex="-1"` (which reaches only the host) — the
+ * same answer `wr-collapse` and `wr-marquee` use.
+ *
+ * `aria-hidden` rides along for the same reason it does on the marquee's
+ * duplicate copies: it states the intent for anything reading the attribute
+ * rather than honouring `inert`.
  */
 declare class WrCarouselSlide {
+    private readonly carousel;
+    /**
+     * Word a screen reader speaks IN PLACE OF the `group` role. Falls back to
+     * `carousel.slideRoledescription`, then `'slide'`.
+     */
+    readonly roledescription: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedRoledescription: _angular_core.Signal<string>;
+    /**
+     * Whether this slide is one of the ones translated out of view.
+     *
+     * `false` while the index is `-1`: content children resolve after the first
+     * render, and a slide that hid itself in that window would make the carousel
+     * open with everything inert. `false` too when there is no parent — the
+     * component is exported, so it can be used on its own.
+     */
+    protected readonly offScreen: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCarouselSlide, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCarouselSlide, "wr-carousel-slide", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCarouselSlide, "wr-carousel-slide", never, { "roledescription": { "alias": "roledescription"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * @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
+ */
+
+/**
+ * Contract a `<wr-carousel-slide>` uses to ask its parent whether it is the one
+ * on screen.
+ *
+ * A token rather than an input, because slides arrive through `<ng-content />`:
+ * nothing in `carousel.html` can bind to them, so the child has to reach up.
+ * Same shape as {@link WR_TABS}.
+ *
+ * @internal
+ */
+interface WrCarouselContext {
+    /** Index of the slide currently on screen. */
+    readonly active: Signal<number>;
+    /**
+     * Position of a slide in projection order, or `-1` before it has registered.
+     *
+     * Reads the content-children signal, so a `computed()` calling this tracks
+     * both the active index and slides being added or removed.
+     */
+    indexOf(slide: object): number;
 }
+/** Token a `<wr-carousel-slide>` injects to find its parent `<wr-carousel>`. */
+declare const WR_CAROUSEL: InjectionToken<WrCarouselContext>;
 
 /**
  * Slide carousel. Project `<wr-carousel-slide>` children — the carousel
@@ -25,7 +85,7 @@ declare class WrCarouselSlide {
  *
  * @see https://ngwr.dev/reference/components/carousel
  */
-declare class WrCarousel {
+declare class WrCarousel implements WrCarouselContext {
     /** Accessible name of the previous-slide button. Falls back to `carousel.prev`. */
     readonly prevLabel: _angular_core.InputSignal<string | null>;
     /** Accessible name of the next-slide button. Falls back to `carousel.next`. */
@@ -38,6 +98,12 @@ declare class WrCarousel {
     /** Accessible name of the carousel itself. Falls back to `carousel.label`. */
     readonly ariaLabel: _angular_core.InputSignal<string | null>;
     protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
+    /**
+     * Word a screen reader speaks IN PLACE OF the `group` role. Falls back to
+     * `carousel.roledescription`, then `'carousel'`.
+     */
+    readonly roledescription: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedRoledescription: _angular_core.Signal<string>;
     protected readonly slideLabel: (params?: ngwr_i18n.WrI18nParams) => string;
     /** Active slide index. Two-way bindable. @default 0 */
     readonly active: _angular_core.ModelSignal<number>;
@@ -53,6 +119,14 @@ declare class WrCarousel {
     readonly loop: _angular_core.InputSignalWithTransform<boolean, any>;
     protected readonly slides: _angular_core.Signal<readonly WrCarouselSlide[]>;
     protected readonly count: _angular_core.Signal<number>;
+    /**
+     * Where a slide sits in projection order — {@link WrCarouselContext}.
+     *
+     * Public only because the child injects the parent through `WR_CAROUSEL`;
+     * reading `slides()` here is what makes the child's `computed()` re-run when a
+     * slide is added or removed.
+     */
+    indexOf(slide: object): number;
     /** Live horizontal drag offset (px) during a touch swipe. */
     protected readonly dragX: _angular_core.WritableSignal<number>;
     protected readonly dragging: _angular_core.WritableSignal<boolean>;
@@ -69,12 +143,16 @@ declare class WrCarousel {
     /** CSS transform for the track — the per-slide offset plus any live drag. */
     protected readonly trackStyle: _angular_core.Signal<string>;
     private timer;
+    private readonly hovered;
+    private readonly focusWithin;
     private readonly paused;
     private readonly destroyRef;
     private readonly isBrowser;
     constructor();
-    protected onPauseIn(): void;
-    protected onPauseOut(): void;
+    protected onHoverIn(): void;
+    protected onHoverOut(): void;
+    protected onFocusIn(): void;
+    protected onFocusOut(): void;
     goTo(index: number): void;
     next(): void;
     prev(): void;
@@ -83,7 +161,8 @@ declare class WrCarousel {
     protected onSwipeMove(event: TouchEvent): void;
     protected onSwipeEnd(event: TouchEvent, viewport: HTMLElement): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCarousel, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCarousel, "wr-carousel", never, { "prevLabel": { "alias": "prevLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "paginationLabel": { "alias": "paginationLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "showArrows": { "alias": "showArrows"; "required": false; "isSignal": true; }; "showDots": { "alias": "showDots"; "required": false; "isSignal": true; }; "autoplay": { "alias": "autoplay"; "required": false; "isSignal": true; }; "intervalMs": { "alias": "intervalMs"; "required": false; "isSignal": true; }; "loop": { "alias": "loop"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, ["slides"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCarousel, "wr-carousel", never, { "prevLabel": { "alias": "prevLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "paginationLabel": { "alias": "paginationLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "roledescription": { "alias": "roledescription"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "showArrows": { "alias": "showArrows"; "required": false; "isSignal": true; }; "showDots": { "alias": "showDots"; "required": false; "isSignal": true; }; "autoplay": { "alias": "autoplay"; "required": false; "isSignal": true; }; "intervalMs": { "alias": "intervalMs"; "required": false; "isSignal": true; }; "loop": { "alias": "loop"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, ["slides"], ["*"], true, never>;
 }
 
-export { WrCarousel, WrCarouselSlide };
+export { WR_CAROUSEL, WrCarousel, WrCarouselSlide };
+export type { WrCarouselContext };

package/types/ngwr-cascader.d.ts

@@ -116,14 +116,31 @@ declare class WrCascader<T = string> implements FormValueControl<unknown> {
     private readonly vcr;
     private readonly scrollStrategies;
     private readonly destroyRef;
+    private readonly injector;
     private overlayRef;
     constructor();
     protected onTriggerClick(): void;
+    /**
+     * ArrowDown / ArrowUp open the panel, Alt+ArrowDown included — the combobox way in,
+     * and the shape `wr-dropdown`'s trigger uses. Enter and Space need no branch: the
+     * trigger is a real `<button>`, so the browser turns them into the click above.
+     *
+     * Only while closed. Once the panel is up the caret is inside it, and its options
+     * own their own keys.
+     */
+    protected onTriggerKeydown(event: KeyboardEvent): void;
     protected onOptionClick(colIndex: number, opt: WrCascaderOption<T>, event: Event): void;
     protected clearSelection(event: Event): void;
     protected isActiveAt(colIndex: number, value: T): boolean;
     private pathsEqual;
     private openOverlay;
+    /**
+     * The option the panel opens on: the selected one in the first column when there is
+     * a selection, otherwise the first enabled root. A disabled option is skipped — it
+     * still carries `tabindex="-1"`, so `focus()` would land on it and answer for a
+     * choice nobody can make.
+     */
+    private focusPanelOption;
     private closeOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCascader<any>, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCascader<any>, "wr-cascader", never, { "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "changeOnSelect": { "alias": "changeOnSelect"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;

package/types/ngwr-click-spark.d.ts

@@ -44,6 +44,10 @@ declare class WrClickSpark {
     private readonly isBrowser;
     private readonly platform;
     private sparks;
+    /** Pending frame id, or `0` while the loop is parked. `cancelAnimationFrame(0)` is a no-op. */
+    private raf;
+    /** The frame callback, once a context was obtained. `null` means there is no loop to wake. */
+    private drawFrame;
     constructor();
     protected onClick(event: MouseEvent): void;
     /**

package/types/ngwr-color-picker-testing.d.ts

@@ -197,6 +197,14 @@ declare class WrColorPickerHarness extends ComponentHarness {
      * readable with no layout at all — which makes them the only evidence a spec has
      * that the surfaces followed a colour set through the fields. A measured position
      * would be zero for all three.
+     *
+     * Read off the `style` ATTRIBUTE rather than through `getCssValue()`, and the
+     * difference is not cosmetic: `getCssValue()` is `getComputedStyle()`, and `left` /
+     * `top` on a positioned element resolve to the USED value — so the declared `40%`
+     * comes straight back in jsdom and arrives as pixels in a real browser, and the same
+     * harness answered 40 here and 96 under a browser runner with nothing to say which
+     * one you got. The stylesheet's own `top: 0; left: 0` is a second way that read lies,
+     * turning a thumb whose binding is gone into one parked at the origin.
      */
     getThumbs(): Promise<WrColorPickerThumbs>;
     /** The HEX field's value without the tab check — for filters, which must not throw. */

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

@@ -232,8 +232,15 @@ declare class WrColorPicker implements FormValueControl<string> {
     protected readonly activeTab: _angular_core.WritableSignal<Tab>;
     /** HSL view of the current colour, computed lazily. */
     protected readonly hslView: _angular_core.Signal<WrHsl>;
-    /** Alpha as integer percent for display in numeric tabs. */
+    /** Alpha as integer percent — the numeric tabs and the alpha slider's `aria-valuenow`. */
     protected readonly alphaPercent: _angular_core.Signal<number>;
+    /** Hue in whole degrees, for the hue slider's `aria-valuenow`. */
+    protected readonly hueValue: _angular_core.Signal<number>;
+    private readonly areaLabel;
+    /** Name of the SV surface, carrying the two values a `role="group"` cannot. */
+    protected readonly resolvedAreaLabel: _angular_core.Signal<string>;
+    protected readonly resolvedHueLabel: _angular_core.Signal<string>;
+    protected readonly resolvedAlphaLabel: _angular_core.Signal<string>;
     protected readonly tabOptions: readonly WrSegmentedOption<Tab>[];
     protected readonly classes: _angular_core.Signal<string>;
     /**
@@ -250,6 +257,19 @@ declare class WrColorPicker implements FormValueControl<string> {
     private lastEmitted;
     constructor();
     protected onPointerDown(event: PointerEvent, surface: Edges): void;
+    /**
+     * Hue and alpha are real one-value sliders, so they take the APG slider keys —
+     * the same set `wr-knob` and `wr-slider` implement, including Home / End.
+     */
+    protected onSliderKeydown(event: KeyboardEvent, surface: 'hue' | 'alpha'): void;
+    /**
+     * The SV canvas is two axes at once, so the keys follow the picture: left and
+     * right run along saturation, up and down along brightness — the directions
+     * the thumb visibly moves. Shift takes ten percent at a time.
+     */
+    protected onAreaKeydown(event: KeyboardEvent): void;
+    /** Leaving a surface is what "touched" means, the same as leaving the hex field. */
+    protected onSurfaceBlur(): void;
     private updateFromEvent;
     protected onHexInput(event: Event): void;
     protected onHexBlur(): void;

package/types/ngwr-confetti.d.ts

@@ -56,9 +56,17 @@ declare class WrConfetti {
     private ctx;
     private particles;
     private rafId;
+    private readonly onResize;
+    constructor();
     /** Spawn a confetti burst with the given (or default) options. */
     fire(options?: WrConfettiOptions): void;
     private ensureCanvas;
+    /**
+     * Give back the canvas and the listener `ensureCanvas()` took from the page,
+     * stop the frame loop, and reset the state both of them guard on so a `fire()`
+     * from a fresh injector rebuilds cleanly.
+     */
+    private teardown;
     private resize;
     private spawn;
     private tick;

package/types/ngwr-config.d.ts

@@ -151,8 +151,17 @@ declare function provideWrConfig(config: WrConfig): EnvironmentProviders;
  * size scale is narrower than {@link WrControlSize} stops compiling here rather
  * than accepting a value it cannot render — the type checker doing the work a
  * parity script would otherwise have to.
+ *
+ * `NoInfer` is what makes that true. Drop it and the guard is a comment again on
+ * every call site that does not pin the generic by hand, which was all but two —
+ * `wr-btn` the only size one among them. Without it `T` has three inference sites;
+ * TypeScript collects all three candidates and keeps the SUPERTYPE, so `pick`'s
+ * `WrControlSize` won and `T` widened to the config's type. `Signal<T>` is
+ * covariant, so the narrower binding stayed assignable and the call compiled clean.
+ * Widening `WrControlSize` by one member used to raise exactly one error, in
+ * `wr-btn`; it now raises nine.
  */
-declare function useConfigValue<T>(binding: Signal<T | null | undefined>, pick: (config: WrConfig) => T | undefined, fallback: T): Signal<T>;
+declare function useConfigValue<T>(binding: Signal<T | null | undefined>, pick: (config: WrConfig) => NoInfer<T> | undefined, fallback: NoInfer<T>): Signal<T>;
 
 /**
  * @license

package/types/ngwr-context-menu-testing.d.ts

@@ -101,13 +101,12 @@ declare class WrContextMenuItemHarness extends ComponentHarness {
     /** The leading icon's registered name, or `null` when the item has no icon. */
     getIconName(): Promise<string | null>;
     /**
-     * Whether the item holds focus.
+     * Whether the item holds the menu's roving focus.
      *
-     * Worth asking, because nothing in this component ever puts it there: unlike
-     * `<wr-dropdown-menu>`, a context menu does not focus its first item on open
-     * and has no arrow-key cursor between items. Focus lands on an item when
-     * something sends it a key — which every keyboard method here does, since the
-     * CDK focuses an element before typing into it.
+     * The menu moves focus onto its first enabled row as the pane renders and the
+     * arrows walk it from there, so this is where the keyboard is. Opening a
+     * submenu hands the cursor to the submenu's own first row, which leaves the
+     * item that owns it unfocused while its pane is up.
      */
     isFocused(): Promise<boolean>;
     /**
@@ -143,8 +142,10 @@ declare class WrContextMenuItemHarness extends ComponentHarness {
      *
      * The keyboard, not the pointer: it opens with no delay (hover waits out
      * 120ms — `openSubmenuByHover()` covers that path) and needs no coordinates,
-     * which jsdom could not supply anyway. Sending the key focuses the item first,
-     * exactly as a roving cursor would have.
+     * which jsdom could not supply anyway. A keyboard open walks INTO the submenu,
+     * so afterwards the cursor is on the submenu's first row and `isFocused()` on
+     * this item is `false` — `openSubmenuByHover()` only shows the pane and leaves
+     * the cursor where it was.
      */
     openSubmenu(timeout?: number): Promise<void>;
     /**
@@ -223,9 +224,10 @@ declare class WrContextMenuItemHarness extends ComponentHarness {
  *   `clickItem()` leaves it closed.
  * - Submenus are a first-class input here rather than a nested trigger, so they
  *   are driven from {@link WrContextMenuItemHarness}.
- * - The menu never takes focus: nothing focuses the first item and there is no
- *   arrow-key cursor between items, so there is no `getFocusedItemText()` to ask
- *   — see `WrContextMenuItemHarness.isFocused()`.
+ * - Focus moves in on EVERY open, where a dropdown's does so only when a
+ *   keyboard opened it. There is no hover trigger here — a right-click, Shift+F10
+ *   or a long-press is always a deliberate request for the menu — so
+ *   `getFocusedItemText()` answers straight after `open()`.
  *
  * **Timing.** The waits are real: a 500ms `setTimeout` for the long-press hold and
  * another 220ms one for the exit animation the pane is held alive through, plus the
@@ -359,6 +361,17 @@ declare class WrContextMenuHarness extends ContentContainerComponentHarness {
     getItems(filters?: WrContextMenuItemHarnessFilters): Promise<WrContextMenuItemHarness[]>;
     /** The labels of this menu's items, in DOM order. */
     getItemTexts(): Promise<string[]>;
+    /**
+     * The label of the item that currently holds focus, or `null` when the
+     * keyboard is elsewhere.
+     *
+     * The menu roves focus rather than drawing a cursor — it lands on the first
+     * ENABLED item as the pane renders, and the arrows walk it over the enabled
+     * items only — so this is the only way to ask where the keyboard is. It answers
+     * `null` once a submenu has taken the cursor: that pane is a separate overlay,
+     * and its own rows are reached through `WrContextMenuItemHarness`.
+     */
+    getFocusedItemText(): Promise<string | null>;
     /**
      * How many separators this menu shows.
      *