ngwr 12.2.0 → 13.0.1

package/types/ngwr-icon.d.ts

@@ -17,6 +17,7 @@ import { Provider } from '@angular/core';
 declare class WrIcon {
     readonly name: i0.InputSignal<string>;
     private readonly host;
+    private readonly doc;
     /**
      * Every icon visible from this position, walked up the whole chain of
      * registering injector levels.
@@ -35,6 +36,22 @@ declare class WrIcon {
     private readonly registry;
     private readonly icon;
     constructor();
+    /**
+     * `replaceChildren()` would say this in one call, but domino — the DOM
+     * `@angular/platform-server` renders into — does not implement it, and
+     * `innerHTML = ''` is the write Trusted Types refuses.
+     */
+    private clear;
+    /**
+     * Say what the allowlist removed, once per registered icon.
+     *
+     * A silently stripped icon is the failure mode this rebuild could introduce:
+     * a consumer's own glyph renders blank or wrong and nothing anywhere says
+     * why. Keyed on the definition object, so a page with fifty instances of the
+     * same icon warns once and an icon nobody renders never warns at all.
+     */
+    private reportStripped;
+    private static readonly reported;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrIcon, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<WrIcon, "wr-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -79,6 +96,15 @@ type WrIconName = string;
  */
 interface WrIconDef {
     name: WrIconName;
+    /**
+     * The icon's SVG markup, treated as **untrusted**: `<wr-icon>` rebuilds the
+     * first `<svg>` root from an allowlist of shape, paint and text elements
+     * rather than assigning the string to `innerHTML`, so event handlers,
+     * `<script>`, `<style>`, `<image>`, `<foreignObject>`, `<a>`, SMIL animation
+     * and non-fragment `href`s never reach the DOM. Registering a runtime-fetched
+     * or tenant-supplied icon set is therefore safe; dev mode warns whenever
+     * anything is dropped.
+     */
     data: string;
 }
 
@@ -99,7 +125,13 @@ interface WrIconDef {
  *
  * In dev mode, each icon is validated for common issues (missing
  * `viewBox`, malformed root). Validation is dropped from production
- * builds via `isDevMode()` tree-shaking.
+ * builds via `isDevMode()` tree-shaking, and it is a rendering check rather
+ * than a security one — see {@link validateIcon}.
+ *
+ * Icon `data` is treated as **untrusted** at render: `<wr-icon>` rebuilds the
+ * glyph from an allowlist instead of writing the string to `innerHTML`, so a
+ * set fetched at runtime or supplied by a tenant cannot execute in the app's
+ * origin. Dev mode names anything the allowlist removed.
  *
  * @example
  * ```ts
@@ -165,6 +197,15 @@ declare function provideWrIcons(icons: WrIconDef[]): Provider[];
  *   ],
  * });
  * ```
+ *
+ * **`svg` is treated as untrusted.** It is a string, so it is a natural place
+ * for a tenant's uploaded logo or an icon pack fetched from an API to end up,
+ * and `<wr-icon>` used to write it to `innerHTML`. It no longer does: the glyph
+ * is rebuilt from an allowlist of SVG shape, paint and text elements, so
+ * `<script>`, `<style>`, `<image>`, `<foreignObject>`, `<a>`, SMIL animation,
+ * every `on*` handler, `style` attributes and non-fragment `href`s are dropped
+ * before anything reaches the DOM. In dev mode the component names what it
+ * removed, so a legitimate icon that loses something says so out loud.
  */
 declare function svgIcon(name: string, svg: string): WrIconDef;
 

package/types/ngwr-input-otp.d.ts

@@ -1,3 +1,4 @@
+import * as ngwr_form from 'ngwr/form';
 import * as _angular_core from '@angular/core';
 import { ElementRef } from '@angular/core';
 import { FormValueControl } from '@angular/forms/signals';
@@ -72,6 +73,27 @@ declare class WrInputOtp implements FormValueControl<string> {
      * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Refuse edits while every box stays focusable and the code still submits.
+     * Bound automatically from the field's readonly state when used with
+     * `[formField]`.
+     *
+     * Each box is a real text input, so this is the native `readonly` attribute —
+     * arrow keys, Home / End and selection keep working, which is the whole
+     * difference from `disabled`. Paste is cancelled too, since a `paste` still
+     * reaches a read-only input even though typing does not.
+     *
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * The surrounding `<wr-form-field>`'s error state — bound per BOX rather than
+     * on the `role="group"` host, because the box is what takes focus and a reader
+     * queries the focused element.
+     *
+     * @internal
+     */
+    protected readonly fieldAria: ngwr_form.WrFormFieldAria;
     /** Character shown in empty cells. @default '•' */
     readonly placeholder: _angular_core.InputSignal<string>;
     /** The entered code. Bound by `[formField]`, or two-way via `[(value)]`. */
@@ -116,7 +138,7 @@ declare class WrInputOtp implements FormValueControl<string> {
      */
     private inlineKey;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrInputOtp, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrInputOtp, "wr-input-otp", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "completed": "completed"; "touch": "touch"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrInputOtp, "wr-input-otp", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "completed": "completed"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { WrInputOtp };

package/types/ngwr-knob.d.ts

@@ -1,3 +1,4 @@
+import * as ngwr_form from 'ngwr/form';
 import * as _angular_core from '@angular/core';
 import { FormValueControl } from '@angular/forms/signals';
 
@@ -54,6 +55,19 @@ declare class WrKnob implements FormValueControl<number> {
     readonly touch: _angular_core.OutputEmitterRef<void>;
     private dragging;
     protected readonly interactive: _angular_core.Signal<boolean>;
+    /**
+     * Whether the control keeps its tab stop — `disabled` only, never `readonly`.
+     *
+     * The two states differ precisely here: a disabled control leaves the tab
+     * order, a read-only one stays in it and keeps announcing `aria-valuenow`,
+     * because a keyboard user still has to be able to READ a value they cannot
+     * change. Driving `tabindex` off `interactive()` collapsed that distinction
+     * and made `readonly()` unreachable — with an `aria-describedby` pointing at
+     * an error message on an element nobody could focus.
+     */
+    protected readonly focusable: _angular_core.Signal<boolean>;
+    /** The surrounding `<wr-form-field>`'s error state. @internal */
+    protected readonly fieldAria: ngwr_form.WrFormFieldAria;
     protected readonly classes: _angular_core.Signal<string>;
     protected readonly cx = 50;
     protected readonly cy = 50;

package/types/ngwr-radio.d.ts

@@ -1,5 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { InjectionToken, Signal } from '@angular/core';
+import * as ngwr_form from 'ngwr/form';
 import { FormValueControl } from '@angular/forms/signals';
 
 /**
@@ -18,7 +19,10 @@ import { FormValueControl } from '@angular/forms/signals';
  */
 type WrRadioSize = 'sm' | 'md' | 'lg';
 declare class WrRadio {
-    /** Stable id used to associate the native input with its label. */
+    /**
+     * Stable id used to associate the native input with its label. Lands on the
+     * inner `<input>`; the host never keeps it.
+     */
     readonly id: _angular_core.InputSignal<string>;
     /** Value selected when this radio is checked. */
     readonly value: _angular_core.InputSignal<unknown>;
@@ -48,7 +52,20 @@ declare class WrRadio {
     protected readonly checked: _angular_core.Signal<boolean>;
     /** Effective disabled — this option's own `disabled` or the group's. */
     protected readonly isDisabled: _angular_core.Signal<boolean>;
+    /**
+     * Readonly is a GROUP-level state — a single option cannot be read-only while
+     * its siblings are not, because picking any of them rewrites the same value.
+     * `aria-readonly` therefore lives on the `role="radiogroup"` host and NOT here:
+     * role `radio` does not support it.
+     */
+    protected readonly isReadonly: _angular_core.Signal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
+    /**
+     * Cancel the selection while the group is read-only. `change` never fires for
+     * a click whose default was prevented, so this is the only guard the pointer
+     * and Space paths need; `onSelect` keeps its own for a synthetic `change`.
+     */
+    protected onInputClick(event: Event): void;
     protected onSelect(): void;
     protected onBlur(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrRadio, never>;
@@ -74,6 +91,8 @@ interface WrRadioGroupContext {
     readonly value: Signal<unknown>;
     /** Whether the entire group is disabled. */
     readonly isDisabled: Signal<boolean>;
+    /** Whether the entire group refuses edits while staying focusable. */
+    readonly isReadonly: Signal<boolean>;
     /** Select the given value. */
     select(value: unknown): void;
     /**
@@ -124,16 +143,32 @@ declare class WrRadioGroup implements FormValueControl<unknown>, WrRadioGroupCon
      * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Refuse selection changes while every option stays focusable and the value
+     * still submits. Bound automatically from the field's readonly state when used
+     * with `[formField]`.
+     *
+     * Native radios ignore the `readonly` attribute, so the group cancels the
+     * activation instead and mirrors the state as `aria-readonly`, which role
+     * `radiogroup` supports.
+     *
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** The surrounding `<wr-form-field>`'s error state. @internal */
+    protected readonly fieldAria: ngwr_form.WrFormFieldAria;
     /** The selected radio's value. Bound by `[formField]`, or two-way via `[(value)]`. */
     readonly value: _angular_core.ModelSignal<unknown>;
     /** Emitted on blur from any child so a bound field can mark itself touched. */
     readonly touch: _angular_core.OutputEmitterRef<void>;
     /** Effective disabled state (WrRadioGroupContext). */
     readonly isDisabled: _angular_core.Signal<boolean>;
+    /** Effective readonly state (WrRadioGroupContext). */
+    readonly isReadonly: _angular_core.Signal<boolean>;
     select(value: unknown): void;
     markTouched(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrRadioGroup, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrRadioGroup, "wr-radio-group", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrRadioGroup, "wr-radio-group", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, ["*"], true, never>;
 }
 
 export { WR_RADIO_GROUP, WrRadio, WrRadioGroup };

package/types/ngwr-rating.d.ts

@@ -1,3 +1,4 @@
+import * as ngwr_form from 'ngwr/form';
 import * as _angular_core from '@angular/core';
 import { FormValueControl } from '@angular/forms/signals';
 
@@ -56,6 +57,17 @@ declare class WrRating implements FormValueControl<number | null> {
     /** Transient hover preview — overrides `value` for display when set. */
     protected readonly hoverValue: _angular_core.WritableSignal<number | null>;
     protected readonly interactive: _angular_core.Signal<boolean>;
+    /**
+     * Whether the control keeps its tab stop — `disabled` only, never `readonly`.
+     *
+     * The two states differ precisely here: a disabled control leaves the tab
+     * order, a read-only one stays in it and keeps announcing `aria-valuenow`,
+     * because a keyboard user still has to be able to READ a value they cannot
+     * change. Driving `tabindex` off `interactive()` collapsed that distinction
+     * and made `readonly()` unreachable — with an `aria-describedby` pointing at
+     * an error message on an element nobody could focus.
+     */
+    protected readonly focusable: _angular_core.Signal<boolean>;
     /** What we actually render — hover wins while hovering. */
     protected readonly displayValue: _angular_core.Signal<number>;
     protected readonly slots: _angular_core.Signal<number[]>;
@@ -69,6 +81,8 @@ declare class WrRating implements FormValueControl<number | null> {
      * interaction rather than cached, so a runtime flip needs no subscription.
      */
     private readonly directionality;
+    /** The surrounding `<wr-form-field>`'s error state. @internal */
+    protected readonly fieldAria: ngwr_form.WrFormFieldAria;
     protected readonly classes: _angular_core.Signal<string>;
     constructor();
     /** Fill ratio for slot `i` in `[0, 1]` — drives the CSS clip width. */

package/types/ngwr-segmented.d.ts

@@ -81,6 +81,23 @@ declare class WrSegmented<T = unknown> implements FormValueControl<T | null> {
      * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Refuse changes while every segment stays focusable and the value still
+     * submits. Bound automatically from the field's readonly state when used with
+     * `[formField]`.
+     *
+     * NOTHING is mirrored into ARIA here, deliberately: the strip is a
+     * `role="group"` of `aria-pressed` buttons, and ARIA defines `aria-readonly`
+     * for neither role — it is a state of `checkbox` / `radiogroup` / `textbox`
+     * and their kin, and it is not global. `aria-disabled` is the only attribute
+     * that would apply to a button, and it says the wrong thing: these segments
+     * are still focusable and the value still submits. So the state is honest in
+     * the DOM (`wr-segmented--readonly`) and silent in the accessibility tree
+     * rather than announced with a word that means something else.
+     *
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Control size — shares the `--wr-control-*` contract. @default 'md' */
     readonly size: _angular_core.InputSignal<WrSegmentedSize>;
     private readonly host;
@@ -169,7 +186,7 @@ declare class WrSegmented<T = unknown> implements FormValueControl<T | null> {
      */
     protected onFocusOut(event: FocusEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSegmented<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSegmented<any>, "wr-segmented", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSegmented<any>, "wr-segmented", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { WrSegmented };

package/types/ngwr-select.d.ts

@@ -243,6 +243,20 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
      * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Refuse changes while the trigger stays focusable and the value still
+     * submits. Bound automatically from the field's readonly state when used with
+     * `[formField]`.
+     *
+     * The panel is where every edit happens, so a read-only select does not open —
+     * and with it go the clear button, the chip ×, the tag draft and the search
+     * query. The text-input shapes take the native `readonly` attribute, which is
+     * what keeps them focusable and selectable where `disabled` would not; every
+     * shape mirrors `aria-readonly`, which role `combobox` supports.
+     *
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
     /**
      * Pill-shaped corners on the trigger. Unset falls back to the `select.rounded`
      * app default from `provideWrConfig()`; `[rounded]="false"` turns a configured
@@ -508,6 +522,8 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     protected readonly hasSelection: _angular_core.Signal<boolean>;
     /** Effective disabled state. Part of {@link WrSelectContext} for child options. */
     readonly isDisabled: _angular_core.Signal<boolean>;
+    /** Effective readonly state — refuses every write path without removing focus. */
+    protected readonly isReadonly: _angular_core.Signal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
     /**
      * Search-mode dynamic options. Loader results win when the loader is
@@ -684,7 +700,7 @@ declare class WrSelect implements FormValueControl<unknown>, WrSelectContext {
     private openOverlay;
     private closeOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSelect, "wr-select", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchQuery": { "alias": "searchQuery"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "loader": { "alias": "loader"; "required": false; "isSignal": true; }; "serverSearch": { "alias": "serverSearch"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "minChars": { "alias": "minChars"; "required": false; "isSignal": true; }; "freeText": { "alias": "freeText"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "viewportHeight": { "alias": "viewportHeight"; "required": false; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "separators": { "alias": "separators"; "required": false; "isSignal": true; }; "allowDuplicates": { "alias": "allowDuplicates"; "required": false; "isSignal": true; }; "validate": { "alias": "validate"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxItems": { "alias": "maxItems"; "required": false; "isSignal": true; }; "maxTagCount": { "alias": "maxTagCount"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "searchQuery": "searchQueryChange"; "searchChange": "searchChange"; "value": "valueChange"; "touch": "touch"; }, ["projectedOptions"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSelect, "wr-select", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchQuery": { "alias": "searchQuery"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "loader": { "alias": "loader"; "required": false; "isSignal": true; }; "serverSearch": { "alias": "serverSearch"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "minChars": { "alias": "minChars"; "required": false; "isSignal": true; }; "freeText": { "alias": "freeText"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "viewportHeight": { "alias": "viewportHeight"; "required": false; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "separators": { "alias": "separators"; "required": false; "isSignal": true; }; "allowDuplicates": { "alias": "allowDuplicates"; "required": false; "isSignal": true; }; "validate": { "alias": "validate"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxItems": { "alias": "maxItems"; "required": false; "isSignal": true; }; "maxTagCount": { "alias": "maxTagCount"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "searchQuery": "searchQueryChange"; "searchChange": "searchChange"; "value": "valueChange"; "touch": "touch"; }, ["projectedOptions"], ["*"], true, never>;
 }
 
 /**

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

@@ -44,6 +44,7 @@ declare class WrShinyText {
     /** Total animation cycle (speed + delay) in seconds. */
     protected readonly totalDuration: _angular_core.Signal<number>;
     protected readonly gradient: _angular_core.Signal<string>;
+    private slot;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrShinyText, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrShinyText, "wr-shiny-text", never, { "text": { "alias": "text"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "speed": { "alias": "speed"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "shineColor": { "alias": "shineColor"; "required": false; "isSignal": true; }; "spread": { "alias": "spread"; "required": false; "isSignal": true; }; "yoyo": { "alias": "yoyo"; "required": false; "isSignal": true; }; "pauseOnHover": { "alias": "pauseOnHover"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "delay": { "alias": "delay"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/types/ngwr-slider.d.ts

@@ -67,6 +67,19 @@ declare class WrSlider implements FormValueControl<WrSliderValue> {
      * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Refuse value changes while the thumbs stay focusable and the value still
+     * submits. Bound automatically from the field's readonly state when used with
+     * `[formField]`.
+     *
+     * The thumbs keep their tab stop and keep announcing their value — arrow keys,
+     * Home / End and the pointer simply move nothing — which is the whole
+     * difference from `disabled`, where they would leave the tab order entirely.
+     * Mirrored as `aria-readonly`, which role `slider` supports.
+     *
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Render the current value below the track. @default true */
     readonly showLabel: _angular_core.InputSignalWithTransform<boolean, any>;
     /**
@@ -210,7 +223,7 @@ declare class WrSlider implements FormValueControl<WrSliderValue> {
     private percentOf;
     private emitChange;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSlider, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSlider, "wr-slider", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "upperLabel": { "alias": "upperLabel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSlider, "wr-slider", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "upperLabel": { "alias": "upperLabel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { WrSlider };

package/types/ngwr-switch.d.ts

@@ -1,3 +1,4 @@
+import * as ngwr_form from 'ngwr/form';
 import * as _angular_core from '@angular/core';
 import { FormCheckboxControl } from '@angular/forms/signals';
 
@@ -27,7 +28,10 @@ declare class WrSwitch implements FormCheckboxControl {
      * label is empty and the input has no name at all.
      */
     readonly ariaLabel: _angular_core.InputSignal<string | null>;
-    /** Stable id used to associate the native input with its label. */
+    /**
+     * Stable id used to associate the native input with its label. Lands on the
+     * inner `<input>`; the host never keeps it.
+     */
     readonly id: _angular_core.InputSignal<string>;
     /**
      * Disable the switch. Bound automatically from the field's disabled state
@@ -36,6 +40,20 @@ declare class WrSwitch implements FormCheckboxControl {
      * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Refuse edits while staying focusable and submittable. Bound automatically
+     * from the field's readonly state when used with `[formField]`.
+     *
+     * A native checkbox ignores the `readonly` attribute, so this cancels the
+     * click's activation behaviour instead — which covers Space too, since the key
+     * arrives as a click — and mirrors the state as `aria-readonly`, which role
+     * `switch` supports.
+     *
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** The surrounding `<wr-form-field>`'s error state. @internal */
+    protected readonly fieldAria: ngwr_form.WrFormFieldAria;
     /**
      * Control size — shares the `--wr-control-*` contract. Unset falls back to the
      * `switch.size` app default from `provideWrConfig()`. @default 'md'
@@ -48,10 +66,16 @@ declare class WrSwitch implements FormCheckboxControl {
     /** Emitted on blur so a bound field can mark itself touched. */
     readonly touch: _angular_core.OutputEmitterRef<void>;
     protected readonly classes: _angular_core.Signal<string>;
+    /**
+     * Cancel the toggle while readonly. `change` never fires for a click whose
+     * default was prevented, so this is the only guard the pointer and Space paths
+     * need; `onInputChange` keeps its own for a synthetic `change`.
+     */
+    protected onInputClick(event: Event): void;
     protected onInputChange(event: Event): void;
     protected onInputBlur(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSwitch, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSwitch, "wr-switch", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "touch": "touch"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSwitch, "wr-switch", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "touch": "touch"; }, never, ["*"], true, never>;
 }
 
 export { WrSwitch };

package/types/ngwr-textarea.d.ts

@@ -1,3 +1,4 @@
+import * as ngwr_form from 'ngwr/form';
 import * as _angular_core from '@angular/core';
 import { ElementRef } from '@angular/core';
 import { FormValueControl } from '@angular/forms/signals';
@@ -68,6 +69,8 @@ declare class WrTextarea implements FormValueControl<string> {
     protected readonly native: _angular_core.Signal<ElementRef<HTMLTextAreaElement>>;
     /** Resize direction, gated by `resizable` (false → 'none'). */
     protected readonly effectiveResize: _angular_core.Signal<WrTextareaResize>;
+    /** The surrounding `<wr-form-field>`'s error state. @internal */
+    protected readonly fieldAria: ngwr_form.WrFormFieldAria;
     protected readonly classes: _angular_core.Signal<string>;
     /** Show the corner grip (hidden when direction is 'none' / autosize / disabled). */
     protected readonly showHandle: _angular_core.Signal<boolean>;

package/types/ngwr-theme.d.ts

@@ -159,6 +159,11 @@ declare const WR_THEME_CONFIG: InjectionToken<WrThemeConfig>;
  * - Persists the selected mode via {@link WrStorage} (defaults to
  *   `localStorage`; swap the storage engine globally to change where).
  *
+ * A configured `attribute` has to be given to the STYLESHEET too — a CSS
+ * selector cannot read a provider value — so pair it with
+ * `@use 'ngwr' with ($theme-attribute: '...')`. In dev mode the service compares
+ * the two and warns when they disagree.
+ *
  * @example
  * ```ts
  * const theme = inject(WrTheme);
@@ -183,6 +188,25 @@ declare class WrTheme {
     set(mode: WrThemeMode): void;
     /** Cycle: light → dark → light (skips auto). */
     toggle(): void;
+    /**
+     * Dev-mode check that the STYLESHEET keys on the same attribute this service
+     * writes.
+     *
+     * `attribute` is a runtime value and a CSS selector cannot read one, so the
+     * dark block is keyed on a Sass variable (`$theme-attribute`) the consumer
+     * configures separately. That makes disagreement possible, and disagreement is
+     * silent in the worst way: the service resolves `dark`, writes the attribute,
+     * reports success — and the page stays light forever, because nothing matches.
+     *
+     * The compiled theme publishes the name it keys on as `--wr-theme-attribute`,
+     * which is what this reads. An empty value means no ngwr stylesheet is loaded
+     * (a unit test, a consumer bundling their own CSS) or that it predates v13, so
+     * the check stays quiet — it can only fire on a real mismatch, never on an
+     * absence it cannot interpret.
+     *
+     * Production builds drop the call entirely via `isDevMode()` tree-shaking.
+     */
+    private warnOnAttributeMismatch;
     private readPersisted;
     private persist;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrTheme, never>;

package/types/ngwr-transfer.d.ts

@@ -1,4 +1,5 @@
 import * as ngwr_i18n from 'ngwr/i18n';
+import * as ngwr_form from 'ngwr/form';
 import * as _angular_core from '@angular/core';
 import { FormValueControl } from '@angular/forms/signals';
 
@@ -74,6 +75,21 @@ declare class WrTransfer implements FormValueControl<readonly unknown[]> {
     readonly touch: _angular_core.OutputEmitterRef<void>;
     /** Disable the whole control. @default false */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Refuse changes to the value while both panes stay focusable and readable.
+     * Bound automatically from the field's readonly state when used with
+     * `[formField]`.
+     *
+     * The move buttons go inert and the row checkboxes go read-only; SEARCH keeps
+     * working, because filtering a pane changes what is shown and not what is
+     * chosen. No `aria-readonly` on the host: role `group` does not support the
+     * state, so each row's checkbox mirrors its own instead.
+     *
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** The surrounding `<wr-form-field>`'s error state. @internal */
+    protected readonly fieldAria: ngwr_form.WrFormFieldAria;
     /** Show a filter box above each pane. @default false */
     readonly searchable: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Heading above the left pane. Falls back to `transfer.source`. */
@@ -126,7 +142,7 @@ declare class WrTransfer implements FormValueControl<readonly unknown[]> {
     /** Filter, then derive the header state from what survived. */
     private pane;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrTransfer, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTransfer, "wr-transfer", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "sourceTitle": { "alias": "sourceTitle"; "required": false; "isSignal": true; }; "targetTitle": { "alias": "targetTitle"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; "toTargetLabel": { "alias": "toTargetLabel"; "required": false; "isSignal": true; }; "toSourceLabel": { "alias": "toSourceLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTransfer, "wr-transfer", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "sourceTitle": { "alias": "sourceTitle"; "required": false; "isSignal": true; }; "targetTitle": { "alias": "targetTitle"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; "toTargetLabel": { "alias": "toTargetLabel"; "required": false; "isSignal": true; }; "toSourceLabel": { "alias": "toSourceLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { WrTransfer };

package/types/ngwr-tree.d.ts

@@ -1,4 +1,5 @@
 import * as ngwr_i18n from 'ngwr/i18n';
+import * as ngwr_form from 'ngwr/form';
 import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
 import { FormValueControl } from '@angular/forms/signals';
@@ -89,6 +90,25 @@ declare class WrTree<TId = string> implements FormValueControl<unknown> {
      * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Refuse selection changes while the tree stays focusable and the value still
+     * submits. Bound automatically from the field's readonly state when used with
+     * `[formField]`.
+     *
+     * Expanding and collapsing keep working: a branch is NAVIGATION, not a value,
+     * so a read-only tree is still browsable — it is picking and un-picking that
+     * stops. In `overlay` mode the trigger additionally refuses to open, because
+     * there the panel exists only to choose from and it already shows what is
+     * chosen.
+     *
+     * `aria-readonly` rides on the combobox trigger only; role `tree` does not
+     * support the state, so the inline shape has nothing valid to mirror it onto.
+     *
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** The surrounding `<wr-form-field>`'s error state. @internal */
+    protected readonly fieldAria: ngwr_form.WrFormFieldAria;
     /** Render shape. @default 'inline' */
     readonly openOn: _angular_core.InputSignal<"inline" | "overlay">;
     /** Placeholder shown on the trigger when no node is selected. */
@@ -274,7 +294,7 @@ declare class WrTree<TId = string> implements FormValueControl<unknown> {
     private openOverlay;
     private closeOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrTree<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTree<any>, "wr-tree", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "openOn": { "alias": "openOn"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxTagCount": { "alias": "maxTagCount"; "required": false; "isSignal": true; }; "defaultExpandAll": { "alias": "defaultExpandAll"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "viewportHeight": { "alias": "viewportHeight"; "required": false; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "expanded": "expandedChange"; "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTree<any>, "wr-tree", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "openOn": { "alias": "openOn"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxTagCount": { "alias": "maxTagCount"; "required": false; "isSignal": true; }; "defaultExpandAll": { "alias": "defaultExpandAll"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "viewportHeight": { "alias": "viewportHeight"; "required": false; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "expanded": "expandedChange"; "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { WrTree };