ngwr 7.3.0 → 8.0.0

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

@@ -24,9 +24,9 @@ declare class WrContextMenuPanel {
 
 /**
  * Attach to any element to show a `<wr-context-menu>` at the pointer
- * position when the user right-clicks, long-presses on touch, or otherwise
- * sends a `contextmenu` event (Shift+F10, etc.). The native browser menu is
- * suppressed for the host element.
+ * position when the user right-clicks or otherwise sends a `contextmenu`
+ * event (Shift+F10, etc.). The native browser menu is suppressed for the
+ * host element.
  *
  * @example
  * ```html
@@ -64,6 +64,13 @@ declare class WrContextMenu {
     static keepChainAlive(): void;
     /** Called from a submenu pane's mouseleave when the cursor left ALL menus. */
     static scheduleChainClose(): void;
+    /**
+     * Called from a `<wr-context-menu-item>` click — selecting an item
+     * dismisses the whole chain (root + any open submenus). Items live in
+     * a detached overlay portal, so they reach their owning root through
+     * this static handle rather than DI.
+     */
+    static closeActive(): void;
     /**
      * Open/close animation duration in ms. Matches the longest SCSS
      * transition on `.wr-context-menu-overlay` (the spring-scale curve).
@@ -79,31 +86,9 @@ declare class WrContextMenu {
      * on a deliberate hover-out.
      */
     private static readonly LEAVE_DELAY;
-    /** Hold duration (ms) before a stationary touch press opens the menu. */
-    private static readonly LONG_PRESS_MS;
-    /** Movement (px) that reclassifies a press as a scroll and cancels it. */
-    private static readonly LONG_PRESS_MOVE_TOLERANCE;
-    private longPressTimer;
-    private touchStartX;
-    private touchStartY;
-    private longPressFired;
-    private suppressContextMenuUntil;
     constructor();
     /** @internal Right-click handler — opens at the pointer (or re-positions if already open). */
     protected onContextMenu(event: MouseEvent): void;
-    /**
-     * @internal Touch long-press → open the menu. Native `contextmenu` is
-     * unreliable on touch (iOS doesn't fire it, Android's timing varies), so we
-     * detect the press ourselves: a stationary hold for `LONG_PRESS_MS` opens
-     * the menu at the touch point; moving the finger reclassifies it as a
-     * scroll and cancels.
-     */
-    protected onTouchStart(event: TouchEvent): void;
-    /** @internal Cancel a pending long-press once the finger travels (a scroll). */
-    protected onTouchMove(event: TouchEvent): void;
-    /** @internal Release — drop a pending press; swallow the synthetic click a fired press would emit. */
-    protected onTouchEnd(event: TouchEvent): void;
-    private clearLongPress;
     /** Close the menu. */
     close(): void;
     private openOverlay;
@@ -168,6 +153,16 @@ declare class WrContextMenuItem {
      */
     static disposeAll(immediate: boolean): void;
     constructor();
+    /**
+     * @internal Pointer activation — selecting a leaf item dismisses the
+     * whole menu chain. The consumer's own `(click)` binding on the host
+     * runs in the same event; we defer the close to a microtask so that
+     * handler (the actual "select") always completes before the overlay
+     * tears down, regardless of listener registration order. Items that
+     * own a submenu (or are disabled) don't dismiss — clicking them just
+     * drills into / ignores the row.
+     */
+    protected onClick(): void;
     /** @internal Keyboard activation — Enter / Space. */
     protected activate(event: Event): void;
     /** @internal Right-arrow opens the submenu. */

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

@@ -90,6 +90,9 @@ declare class WrDatePicker implements ControlValueAccessor {
     protected readonly triggerLabel: _angular_core.Signal<string>;
     protected readonly classes: _angular_core.Signal<string>;
     private overlayRef;
+    /** Live calendar ref while the date popover is open — lets the panel track
+     * the typed value in real time (not just on reopen). */
+    private readonly dateRef;
     constructor();
     private onChange;
     private onTouched;

package/types/ngwr-density.d.ts

@@ -2,10 +2,10 @@ import * as i0 from '@angular/core';
 import { InjectionToken, Signal, EnvironmentProviders } from '@angular/core';
 
 /** Density scale. Components multiply their paddings by the matching multiplier. */
-type WrDensityValue = 'compact' | 'default' | 'comfortable' | 'touch';
+type WrDensityValue = 'sm' | 'md' | 'lg' | 'touch';
 /** Configuration for {@link WrDensityValueService}. */
 interface WrDensityConfig {
-    /** Initial density used when no persisted value is present. @default 'default' */
+    /** Initial density used when no persisted value is present. @default 'md' */
     readonly defaultDensity: WrDensityValue;
     /** Storage key for persistence (via `WrStorage`). Set to `null` to disable. @default 'wr-density' */
     readonly storageKey: string | null;
@@ -36,8 +36,8 @@ declare const WR_DENSITY_CONFIG: InjectionToken<WrDensityConfig>;
  * @example
  * ```ts
  * const density = inject(WrDensity);
- * density.set('compact');
- * density.current();   // 'compact'
+ * density.set('sm');
+ * density.current();   // 'sm'
  * ```
  *
  * @see https://ngwr.dev/services/density
@@ -52,7 +52,7 @@ declare class WrDensity {
     constructor();
     /** Switch the active density. Ignores unknown values. */
     set(density: WrDensityValue): void;
-    /** Cycle compact → default → comfortable → touch → compact … */
+    /** Cycle sm → md → lg → touch → sm … */
     cycle(): void;
     private readPersisted;
     private persist;
@@ -67,8 +67,8 @@ declare class WrDensity {
  *
  * @example
  * ```html
- * <!-- The whole sidebar is compact, the rest of the app keeps its global density. -->
- * <aside wrDensity="compact">
+ * <!-- The whole sidebar is sm, the rest of the app keeps its global density. -->
+ * <aside wrDensity="sm">
  *   <wr-list ...></wr-list>
  * </aside>
  * ```

package/types/ngwr-directives.d.ts

@@ -1,4 +1,4 @@
-import * as _angular_core from '@angular/core';
+import * as i0 from '@angular/core';
 
 /**
  * Focus the host element after the first render — or whenever the bound
@@ -12,11 +12,11 @@ import * as _angular_core from '@angular/core';
  */
 declare class WrAutofocus {
     /** Truthy = focus. Defaults to `true` so bare `wrAutofocus` works. */
-    readonly wrAutofocus: _angular_core.InputSignalWithTransform<boolean, any>;
+    readonly wrAutofocus: i0.InputSignalWithTransform<boolean, any>;
     private readonly el;
     constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrAutofocus, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrAutofocus, "[wrAutofocus]", never, { "wrAutofocus": { "alias": "wrAutofocus"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrAutofocus, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrAutofocus, "[wrAutofocus]", never, { "wrAutofocus": { "alias": "wrAutofocus"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -29,8 +29,8 @@ declare class WrAutofocus {
  * ```
  */
 declare class WrAutosize {
-    readonly minRows: _angular_core.InputSignalWithTransform<number, unknown>;
-    readonly maxRows: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly minRows: i0.InputSignalWithTransform<number, unknown>;
+    readonly maxRows: i0.InputSignalWithTransform<number, unknown>;
     private readonly el;
     private lastValue;
     constructor();
@@ -38,8 +38,8 @@ declare class WrAutosize {
     protected onInput(): void;
     /** Recompute height from `scrollHeight`, clamped to min/max rows. */
     private resize;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrAutosize, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrAutosize, "textarea[wrAutosize]", never, { "minRows": { "alias": "minRows"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrAutosize, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrAutosize, "textarea[wrAutosize]", never, { "minRows": { "alias": "minRows"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -52,14 +52,14 @@ declare class WrAutosize {
  * ```
  */
 declare class WrClickOutside {
-    readonly wrClickOutside: _angular_core.OutputEmitterRef<MouseEvent>;
+    readonly wrClickOutside: i0.OutputEmitterRef<MouseEvent>;
     private readonly host;
     private readonly doc;
     private readonly zone;
     private readonly destroyRef;
     constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrClickOutside, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrClickOutside, "[wrClickOutside]", never, {}, { "wrClickOutside": "wrClickOutside"; }, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrClickOutside, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrClickOutside, "[wrClickOutside]", never, {}, { "wrClickOutside": "wrClickOutside"; }, never, never, true, never>;
 }
 
 /**
@@ -76,50 +76,18 @@ declare class WrClickOutside {
  */
 declare class WrCopyToClipboard {
     /** The text to copy. */
-    readonly wrCopyToClipboard: _angular_core.InputSignal<string>;
+    readonly wrCopyToClipboard: i0.InputSignal<string>;
     /** Emitted with the copied text once the write succeeds. */
-    readonly copied: _angular_core.OutputEmitterRef<string>;
+    readonly copied: i0.OutputEmitterRef<string>;
     /** Emitted if the copy fails (denied permission, no clipboard, …). */
-    readonly copyFailed: _angular_core.OutputEmitterRef<unknown>;
+    readonly copyFailed: i0.OutputEmitterRef<unknown>;
     private readonly doc;
     /** @internal */
     protected onClick(): Promise<void>;
     /** Legacy clipboard write — hidden textarea + execCommand('copy'). */
     private fallback;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCopyToClipboard, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrCopyToClipboard, "[wrCopyToClipboard]", never, { "wrCopyToClipboard": { "alias": "wrCopyToClipboard"; "required": true; "isSignal": true; }; }, { "copied": "copied"; "copyFailed": "copyFailed"; }, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrCopyToClipboard, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrCopyToClipboard, "[wrCopyToClipboard]", never, { "wrCopyToClipboard": { "alias": "wrCopyToClipboard"; "required": true; "isSignal": true; }; }, { "copied": "copied"; "copyFailed": "copyFailed"; }, never, never, true, never>;
 }
 
-/**
- * Reveal-on-scroll directive. Adds the `wr-reveal` host class
- * immediately and flips it to `wr-reveal--visible` once the element
- * enters the viewport — pair with the `.wr-reveal` styles in
- * `ngwr/animations` for a fade-and-slide-up enter.
- *
- * SSR-safe: on the server, the host renders in the visible state so
- * the page isn't blank.
- *
- * @example
- * ```html
- * <h2 wrReveal>Animates in once visible</h2>
- * <div wrReveal threshold="0.5" rootMargin="-100px 0px">…</div>
- * <p wrReveal [once]="false">Re-runs every time it enters the viewport</p>
- * ```
- */
-declare class WrReveal {
-    /** Visibility threshold passed to IntersectionObserver. @default 0.1 */
-    readonly threshold: _angular_core.InputSignalWithTransform<number, unknown>;
-    /** `rootMargin` passed to IntersectionObserver. @default '0px' */
-    readonly rootMargin: _angular_core.InputSignal<string>;
-    /** Stop observing after the first reveal. @default true */
-    readonly once: _angular_core.InputSignalWithTransform<boolean, any>;
-    protected readonly visible: _angular_core.WritableSignal<boolean>;
-    private readonly el;
-    private readonly destroyRef;
-    private readonly isBrowser;
-    constructor();
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrReveal, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrReveal, "[wrReveal]", never, { "threshold": { "alias": "threshold"; "required": false; "isSignal": true; }; "rootMargin": { "alias": "rootMargin"; "required": false; "isSignal": true; }; "once": { "alias": "once"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
-export { WrAutofocus, WrAutosize, WrClickOutside, WrCopyToClipboard, WrReveal };
+export { WrAutofocus, WrAutosize, WrClickOutside, WrCopyToClipboard };

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

@@ -31,7 +31,7 @@ declare class WrFuzzyText {
     readonly fontWeight: _angular_core.InputSignal<string | number>;
     /** Font family. `'inherit'` reads the canvas's computed style. @default 'inherit' */
     readonly fontFamily: _angular_core.InputSignal<string>;
-    /** Text colour. Ignored if `[gradient]` is set. @default '#fff' */
+    /** Text colour. `'inherit'` reads the canvas's computed style. Ignored if `[gradient]` is set. @default 'inherit' */
     readonly color: _angular_core.InputSignal<string>;
     /** Optional horizontal gradient stops. */
     readonly gradient: _angular_core.InputSignal<readonly string[] | null>;

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

@@ -22,10 +22,16 @@ declare class WrGlitchText {
     readonly enableShadows: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Only glitch on hover (idle until then). @default true */
     readonly enableOnHover: _angular_core.InputSignalWithTransform<boolean, any>;
-    protected readonly beforeShadow: _angular_core.Signal<"5px 0 cyan" | "none">;
-    protected readonly afterShadow: _angular_core.Signal<"none" | "-5px 0 red">;
+    /**
+     * Surface colour for the clone slices. Pass the colour of the surface the
+     * component sits on so the slicing illusion masks cleanly; leave unset
+     * (transparent) on the page canvas. @default '' (transparent)
+     */
+    readonly background: _angular_core.InputSignal<string>;
+    protected readonly beforeShadow: _angular_core.Signal<"5px 0 var(--wr-color-info)" | "none">;
+    protected readonly afterShadow: _angular_core.Signal<"none" | "-5px 0 var(--wr-color-danger)">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrGlitchText, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrGlitchText, "wr-glitch-text", never, { "text": { "alias": "text"; "required": true; "isSignal": true; }; "speed": { "alias": "speed"; "required": false; "isSignal": true; }; "enableShadows": { "alias": "enableShadows"; "required": false; "isSignal": true; }; "enableOnHover": { "alias": "enableOnHover"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrGlitchText, "wr-glitch-text", never, { "text": { "alias": "text"; "required": true; "isSignal": true; }; "speed": { "alias": "speed"; "required": false; "isSignal": true; }; "enableShadows": { "alias": "enableShadows"; "required": false; "isSignal": true; }; "enableOnHover": { "alias": "enableOnHover"; "required": false; "isSignal": true; }; "background": { "alias": "background"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { WrGlitchText };

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

@@ -17,6 +17,8 @@ import { ControlValueAccessor } from '@angular/forms';
  */
 type WrInputOtpMode = 'numeric' | 'alphanumeric' | 'text';
 
+type WrInputOtpSize = 'sm' | 'md' | 'lg';
+
 /**
  * Fixed-length one-time-code input. Renders one `<input>` per character,
  * auto-advances focus on typing, handles paste of a full code, and supports
@@ -38,6 +40,8 @@ declare class WrInputOtp implements ControlValueAccessor {
     readonly length: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Character set per cell. @default 'numeric' */
     readonly mode: _angular_core.InputSignal<WrInputOtpMode>;
+    /** Control size — shares the `--wr-control-*` contract. @default 'md' */
+    readonly size: _angular_core.InputSignal<WrInputOtpSize>;
     /** Mask the typed characters like a password. @default false */
     readonly mask: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Disable interaction. @default false */
@@ -71,8 +75,8 @@ declare class WrInputOtp implements ControlValueAccessor {
     /** Drop a character that doesn't match the configured mode. */
     private sanitiseChar;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrInputOtp, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrInputOtp, "wr-input-otp", never, { "length": { "alias": "length"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "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; }; }, { "completed": "completed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrInputOtp, "wr-input-otp", never, { "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; }; }, { "completed": "completed"; }, never, never, true, never>;
 }
 
 export { WrInputOtp };
-export type { WrInputOtpMode };
+export type { WrInputOtpMode, WrInputOtpSize };

package/types/ngwr-input.d.ts

@@ -1,5 +1,25 @@
 import * as i0 from '@angular/core';
 
+/**
+ * @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
+ */
+/**
+ * Native input `type` values supported by `<wr-input>`.
+ */
+type WrInputType = 'text' | 'number' | 'password' | 'email' | 'search' | 'tel' | 'url';
+
+/**
+ * @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
+ */
+/** Control size for `[wrInput]` — shares the `--wr-control-*` contract. */
+type WrInputSize = 'sm' | 'md' | 'lg';
+
 /**
  * Applies NGWR input styling to a native `<input>` element.
  *
@@ -22,11 +42,16 @@ import * as i0 from '@angular/core';
  * @see https://ngwr.dev/components/input
  */
 declare class WrInput {
+    /**
+     * Control size. Named `wrSize` (not `size`) so it never clashes with the
+     * native `<input size>` attribute. @default 'md'
+     */
+    readonly wrSize: i0.InputSignal<WrInputSize>;
     /** Pill-shaped corners. @default false */
     readonly rounded: i0.InputSignalWithTransform<boolean, any>;
     protected readonly classes: i0.Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrInput, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<WrInput, "input[wrInput], textarea[wrInput]", never, { "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrInput, "input[wrInput], textarea[wrInput]", never, { "wrSize": { "alias": "wrSize"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -116,16 +141,5 @@ declare class WrPasswordToggle {
     static ɵcmp: i0.ɵɵComponentDeclaration<WrPasswordToggle, "wr-password-toggle", never, { "for": { "alias": "for"; "required": true; "isSignal": true; }; }, {}, never, 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
- */
-/**
- * Native input `type` values supported by `<wr-input>`.
- */
-type WrInputType = 'text' | 'number' | 'password' | 'email' | 'search' | 'tel' | 'url';
-
 export { WrInput, WrInputGroup, WrInputPrefix, WrInputSuffix, WrPasswordToggle };
-export type { WrInputType };
+export type { WrInputSize, WrInputType };

package/types/ngwr-lightbox.d.ts

@@ -29,6 +29,14 @@ declare class WrLightbox {
     readonly disablePreview: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Caption shown under the full image in the lightbox. */
     readonly caption: _angular_core.InputSignal<string>;
+    /**
+     * Reserve space before the image resolves by fixing the thumbnail's
+     * `aspect-ratio` (e.g. `'16 / 9'`, `'4 / 3'`, or a number like `1.5`).
+     * Prevents the layout jump when the intrinsic image size isn't known up
+     * front — pair it with a `width` and the box keeps its height from first
+     * paint. @default null
+     */
+    readonly aspectRatio: _angular_core.InputSignal<string | number | null>;
     protected readonly open: _angular_core.WritableSignal<boolean>;
     protected readonly loaded: _angular_core.WritableSignal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
@@ -49,7 +57,7 @@ declare class WrLightbox {
     private openOverlay;
     private closeOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrLightbox, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrLightbox, "wr-lightbox", never, { "src": { "alias": "src"; "required": true; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "preview": { "alias": "preview"; "required": false; "isSignal": true; }; "disablePreview": { "alias": "disablePreview"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrLightbox, "wr-lightbox", never, { "src": { "alias": "src"; "required": true; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "preview": { "alias": "preview"; "required": false; "isSignal": true; }; "disablePreview": { "alias": "disablePreview"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { WrLightbox };

package/types/ngwr-pagination.d.ts

@@ -1,5 +1,4 @@
 import * as _angular_core from '@angular/core';
-import { WrButtonSize } from 'ngwr/button';
 
 /**
  * @license
@@ -33,12 +32,9 @@ type WrPaginationShape = 'rounded' | 'square';
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 /**
- * Size variant. The middle three (`sm` / `md` / `lg`) cascade the
- * matching `<wr-btn>` size directly; `xs` and `xl` reuse the closest
- * button size and overlay tighter / chunkier padding + font tokens so
- * the cells read smaller / bigger than the button's own scale.
+ * Size variant. Cascades the matching `<wr-btn>` size to every cell.
  */
-type WrPaginationSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type WrPaginationSize = 'sm' | 'md' | 'lg';
 
 declare const ELLIPSIS: "\u2026";
 type PageEntry = number | typeof ELLIPSIS;
@@ -75,10 +71,8 @@ declare class WrPagination {
     readonly showTotal: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Horizontal alignment. @default 'start' */
     readonly align: _angular_core.InputSignal<WrPaginationAlign>;
-    /** Size variant — cascades to every internal button. @default 'md' */
+    /** Size variant — cascades to every internal button. @default 'sm' */
     readonly size: _angular_core.InputSignal<WrPaginationSize>;
-    /** Resolved button size — clamps xs/xl to the closest button size. @internal */
-    protected readonly buttonSize: _angular_core.Signal<WrButtonSize>;
     /** Cell corner treatment. @default 'rounded' */
     readonly shape: _angular_core.InputSignal<WrPaginationShape>;
     /** Disable interaction. @default false */

package/types/ngwr-radio.d.ts

@@ -16,6 +16,7 @@ import { ControlValueAccessor } from '@angular/forms';
  *
  * @see https://ngwr.dev/components/radio
  */
+type WrRadioSize = 'sm' | 'md' | 'lg';
 declare class WrRadio {
     /** Stable id used to associate the native input with its label. */
     readonly id: _angular_core.InputSignal<string>;
@@ -26,16 +27,26 @@ declare class WrRadio {
      * default solid circle. Use any registered NGWR icon.
      */
     readonly icon: _angular_core.InputSignal<string | null>;
+    /** Control size — shares the `--wr-control-*` contract. @default 'md' */
+    readonly size: _angular_core.InputSignal<WrRadioSize>;
+    /**
+     * Disable just this option. The group can also be disabled as a whole via
+     * `<wr-radio-group disabled>`; either source disables this radio.
+     *
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
     private readonly group;
     constructor();
     protected readonly name: _angular_core.Signal<string>;
     protected readonly checked: _angular_core.Signal<boolean>;
-    protected readonly disabled: _angular_core.Signal<boolean>;
+    /** Effective disabled — this option's own `disabled` or the group's. */
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
     protected onSelect(): void;
     protected onBlur(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrRadio, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrRadio, "wr-radio", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrRadio, "wr-radio", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**
@@ -117,4 +128,4 @@ declare class WrRadioGroup implements ControlValueAccessor, WrRadioGroupContext
 }
 
 export { WR_RADIO_GROUP, WrRadio, WrRadioGroup };
-export type { WrRadioGroupContext };
+export type { WrRadioGroupContext, WrRadioSize };

package/types/ngwr-rating.d.ts

@@ -18,6 +18,7 @@ import { ControlValueAccessor } from '@angular/forms';
  *
  * @see https://ngwr.dev/components/rating
  */
+type WrRatingSize = 'sm' | 'md' | 'lg';
 declare class WrRating implements ControlValueAccessor {
     /** Total number of slots. @default 5 */
     readonly count: _angular_core.InputSignalWithTransform<number, unknown>;
@@ -27,6 +28,8 @@ declare class WrRating implements ControlValueAccessor {
     readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Disable interaction. @default false */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Control size — scales the icons + gaps. @default 'md' */
+    readonly size: _angular_core.InputSignal<WrRatingSize>;
     /** Accessible label. @default 'Rating' */
     readonly ariaLabel: _angular_core.InputSignal<string>;
     /** Last committed value (mirrored from the CVA). */
@@ -56,7 +59,8 @@ declare class WrRating implements ControlValueAccessor {
     private computeValue;
     private commit;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrRating, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrRating, "wr-rating", never, { "count": { "alias": "count"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrRating, "wr-rating", never, { "count": { "alias": "count"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { WrRating };
+export type { WrRatingSize };

package/types/ngwr-segmented.d.ts

@@ -39,6 +39,7 @@ interface WrSegmentedOption<T = unknown> {
  *
  * @see https://ngwr.dev/components/segmented
  */
+type WrSegmentedSize = 'sm' | 'md' | 'lg';
 declare class WrSegmented<T = unknown> {
     /** The segments to render. */
     readonly options: _angular_core.InputSignal<readonly WrSegmentedOption<T>[]>;
@@ -46,6 +47,8 @@ declare class WrSegmented<T = unknown> {
     readonly value: _angular_core.ModelSignal<T | null>;
     /** Disable the whole control. @default false */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Control size — shares the `--wr-control-*` contract. @default 'md' */
+    readonly size: _angular_core.InputSignal<WrSegmentedSize>;
     /** Index of the selected option, or `-1` when nothing is selected. */
     protected readonly selectedIndex: _angular_core.Signal<number>;
     /** Flips true after the first paint so the thumb only animates user-driven changes, not the initial snap. */
@@ -58,8 +61,8 @@ declare class WrSegmented<T = unknown> {
     protected select(option: WrSegmentedOption<T>): void;
     protected trackByValue(_: number, option: WrSegmentedOption<T>): unknown;
     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; }; }, { "value": "valueChange"; }, 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; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 export { WrSegmented };
-export type { WrSegmentedOption };
+export type { WrSegmentedOption, WrSegmentedSize };

package/types/ngwr-select.d.ts

@@ -37,6 +37,8 @@ type WrSelectTagValidator = (value: string, existing: readonly string[]) => bool
  * so stale responses can't clobber fresh ones.
  */
 type WrSelectSearchLoader<T> = (query: string) => Observable<readonly T[]> | Promise<readonly T[]> | readonly T[];
+/** Control size for `<wr-select>` — shares the `--wr-control-*` contract. */
+type WrSelectSize = 'sm' | 'md' | 'lg';
 
 /**
  * @license
@@ -155,6 +157,8 @@ declare class WrSelect implements ControlValueAccessor, WrSelectContext {
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Pill-shaped corners on the trigger. @default false */
     readonly rounded: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Control size — shares the `--wr-control-*` contract. @default 'md' */
+    readonly size: _angular_core.InputSignal<WrSelectSize>;
     /**
      * Present the option panel as a full-width bottom-sheet on small
      * viewports instead of an anchored dropdown. `undefined` follows the
@@ -355,7 +359,7 @@ declare class WrSelect implements ControlValueAccessor, 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; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "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; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "minChars": { "alias": "minChars"; "required": false; "isSignal": true; }; "freeText": { "alias": "freeText"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "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; }; }, {}, never, ["*"], 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; }; "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; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "loader": { "alias": "loader"; "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; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "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; }; }, {}, never, ["*"], true, never>;
 }
 
 /**
@@ -419,4 +423,4 @@ declare class WrOptionGroup {
 }
 
 export { WR_SELECT, WrOption, WrOptionGroup, WrSelect };
-export type { WrSelectContext, WrSelectMode, WrSelectSearchLoader, WrSelectTagValidator };
+export type { WrSelectContext, WrSelectMode, WrSelectSearchLoader, WrSelectSize, WrSelectTagValidator };

package/types/ngwr-spotlight-card.d.ts

@@ -20,7 +20,7 @@ import * as _angular_core from '@angular/core';
 declare class WrSpotlightCard {
     /**
      * Highlight colour (any CSS colour). When unset, the theme decides:
-     * a soft dark tint on light surfaces, white-alpha on dark.
+     * a dark-ish glow on light surfaces, a light glow on dark.
      */
     readonly spotlightColor: _angular_core.InputSignal<string | null>;
     /** Where the spotlight fades out, as a percentage of the gradient. @default 80 */