ngwr 11.2.0 → 12.1.0

package/theme/styles/_variables.scss

@@ -3,6 +3,20 @@
 // These are the canonical knobs every component reads from. Consumers
 // override them on `:root` (or any subtree) without touching SCSS.
 
+/// The tokens here that are composed out of one the THEME re-tunes, kept in a
+/// mixin so `_dark.scss` can re-declare them on the themed element. See the long
+/// note above `colors.derived()`: a `var()` inside a custom property is
+/// substituted where it is DECLARED, so a `:root` composition inherits into a
+/// scoped `[data-theme="dark"]` subtree as the light literal.
+///
+/// Only the ring. The other compositions in this file — `--wr-control-font-size-*`,
+/// `--wr-transition-*`, `--wr-overlay-*` — read sizes and durations, which no
+/// theme flips, so freezing them is the same value either way.
+@mixin derived-focus-ring() {
+  --wr-focus-ring-color: var(--wr-color-primary);
+  --wr-focus-ring-halo: rgba(var(--wr-color-primary-rgb), 0.25);
+}
+
 :root {
   // Border radius
   --wr-border-radius-sm: 0.375rem;
@@ -45,11 +59,16 @@
   --wr-duration-fast: 0.1s;
   --wr-duration-base: 0.15s;
   --wr-duration-slow: 0.3s;
+  // unused-ok: the slow end of a public scale. The catalog's own animations top
+  // out at `-slow`; a consumer's need not.
   --wr-duration-slower: 0.5s;
 
   // Transition shorthands
   --wr-transition-short: var(--wr-duration-fast) var(--wr-ease-out);
   --wr-transition-base: var(--wr-duration-base) var(--wr-ease-linear);
+  // unused-ok: the third shorthand. Components compose `-slow` with an easing
+  // themselves where they need it, but dropping one rung out of three would make
+  // the set look arbitrary.
   --wr-transition-long: var(--wr-duration-slow) var(--wr-ease-out);
 
   // Elevation
@@ -65,6 +84,52 @@
   --wr-shadow-float: 0 8px 24px rgb(0 0 0 / 18%);
   --wr-shadow-modal: 0 20px 48px rgb(0 0 0 / 25%);
 
+  // Disabled
+  //
+  // How far a control fades when it will not respond. One number, because the
+  // catalog had **seven** — 0.6 in eighteen places, then 0.5, 0.7, 0.55, 0.4,
+  // 0.35 and 0.65 — spread over 29 entry points, and two components disagreed
+  // with THEMSELVES three ways inside one file (`date-picker` at 0.5 / 0.4 / 0.7,
+  // `calendar` at 0.5 / 0.35 / 0.6). Sibling text fields fading differently is
+  // not a design decision anyone made; it is what happens when the value has no
+  // name.
+  //
+  // 0.6 is the value eighteen of them already used. A component that genuinely
+  // needs another strength overrides this token in its own block, with the reason
+  // — the point is that the exception has to be argued rather than typed.
+  --wr-disabled-opacity: 0.6;
+
+  // Focus ring
+  //
+  // The keyboard indicator, as tokens rather than a recipe baked into SCSS —
+  // the ring was the one surface a consumer could not retheme, because
+  // `theme.focus-ring` hard-coded it.
+  //
+  // It is an OUTLINE now, and the halo is a second channel rather than the only
+  // one. The halo alone is a 25% tint of the primary over the page: **1.41:1 in
+  // light, 1.31:1 in dark**, where WCAG 1.4.11 asks 3:1 of a focus indicator —
+  // and the mixin also set `outline: none`, so for the forty-one selectors whose
+  // entire focus style is that mixin, nothing on screen met the bar. The solid
+  // token measures 4.89:1 and 4.07:1. Two components had already worked this out
+  // on their own, in three places, and hand-rolled
+  // `outline: 2px solid var(--wr-color-primary)` (`event-calendar` twice,
+  // `lightbox` once), and four more wrote an `outline-offset` next to the include
+  // that could never apply.
+  //
+  // An outline is also the only form the indicator survives in under
+  // `forced-colors`, which drops every `box-shadow` outright, and it is exempt
+  // from layout, so focus never reflows the box.
+  //
+  // Halo spread equals the offset on purpose: the halo fills exactly the gap the
+  // outline leaves, so the two read as one ring instead of two. A component that
+  // insets its outline (`outline-offset: -2px`, the idiom for a row inside an
+  // `overflow: hidden` container) keeps the halo outside, where its own clipping
+  // hides it.
+  // `-color` and `-halo` are composed off `--wr-color-primary`, so they live in
+  // `derived-focus-ring()` at the top of this file, included at the end of `:root`.
+  --wr-focus-ring-width: 2px;
+  --wr-focus-ring-offset: 2px;
+
   // Z-index scale
   //
   // Overlay panels inside the CDK container inherit its stacking; these
@@ -124,6 +189,8 @@
   --wr-tracking-wide: 0.025em;
   --wr-tracking-wider: 0.05em;
   --wr-tracking-widest: 0.1em;
+
+  @include derived-focus-ring;
 }
 
 // Shared open animation for overlay panels. Every overlay component

package/transfer/styles/_index.scss

@@ -11,7 +11,7 @@
   color: var(--wr-color-on-surface);
 
   &--disabled {
-    opacity: 0.6;
+    opacity: var(--wr-disabled-opacity);
   }
 
   &__pane {
@@ -31,11 +31,24 @@
     gap: 0.5rem;
     padding: 0.5rem 0.625rem;
     border-bottom: 1px solid var(--wr-color-outline);
-    background: rgba(var(--wr-color-outline-rgb), 0.25);
+    background: var(--wr-color-fill);
+    // The checkbox and the count are intrinsically sized, so on a narrow pane
+    // the title absorbed the entire shortfall: at 375px it was 26px of a 91px
+    // track and the headers read "A…" and "S…". Let the count drop to its own
+    // line before that happens — it is the one part of the row that reads fine
+    // anywhere. Nothing moves while the row fits (measured: identical at 190px
+    // and 430px panes).
+    flex-wrap: wrap;
   }
 
   &__title {
-    flex: 1 1 auto;
+    // A small basis rather than `auto`: the title has to be the item that
+    // yields, and with a content-sized basis a long title pushes ITSELF onto
+    // the next line, leaving the select-all checkbox alone on a row and the
+    // two panes of one transfer with headers of different heights. 3.5rem is
+    // the widest basis that still shares a row with the checkbox in the
+    // narrowest pane the component reaches (113px).
+    flex: 1 1 3.5rem;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -98,6 +111,16 @@
     height: 1rem;
   }
 
+  // The panes are a plain flex row, so they already swap: under `dir="rtl"` the
+  // source pane lays out at the right. The move chevrons are drawn to physical
+  // directions, though, so "move to target" ends up pointing at the pane it
+  // moves away from. Turn them around with the panes, the same way the
+  // pagination and carousel arrows do. Both move buttons are icon-only, so
+  // nothing textual is caught.
+  [dir='rtl'] &__move .wr-icon__svg {
+    transform: scaleX(-1);
+  }
+
   // No container query here on purpose: `@container` only styles DESCENDANTS, so
   // a rule that reflows `.wr-transfer` itself could never match its own query.
   // Doing it properly means the house `responsive` opt-in modifier (a wrapper

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. */