ngwr 7.2.0 → 8.0.0

package/tree/styles/_index.scss

@@ -5,7 +5,7 @@
 
   display: block;
   font-family: var(--wr-font-family-base);
-  font-size: 0.875rem;
+  font-size: var(--wr-text-sm);
   color: var(--wr-color-dark);
 
   &__list {
@@ -29,19 +29,18 @@
       color var(--wr-transition-base);
 
     &:hover:not(.wr-tree__row--disabled) {
-      background: rgba(var(--wr-color-light-rgb), 0.5);
+      background: var(--wr-color-hover);
     }
 
     &--selected {
-      background: rgba(var(--wr-color-primary-rgb), 0.1);
+      background: var(--wr-color-primary-soft);
       color: var(--wr-color-primary);
     }
 
     // Visible ring only when the row truly has keyboard focus — not
     // just because it's the roving-tabindex cursor row.
     &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 2px rgba(var(--wr-color-primary-rgb), 0.25);
+      @include theme.focus-ring;
     }
 
     &--disabled {
@@ -100,11 +99,13 @@
     --wr-tree-trigger-color: var(--wr-color-dark);
     --wr-tree-trigger-bg: var(--wr-color-white);
     --wr-tree-trigger-border: var(--wr-color-light);
-    --wr-tree-trigger-radius: var(--wr-border-radius-base);
-    --wr-tree-trigger-padding-y: 0.4375rem;
-    --wr-tree-trigger-padding-x: 0.75rem;
-    --wr-tree-trigger-font-size: 0.875rem;
-    --wr-tree-trigger-line-height: 1.25rem;
+    // Combobox trigger on the md control contract (30px, radius 6) so it lines
+    // up with select / input / button when used as a tree-select.
+    --wr-tree-trigger-radius: var(--wr-control-radius-md);
+    --wr-tree-trigger-padding-y: var(--wr-control-padding-y-md);
+    --wr-tree-trigger-padding-x: var(--wr-control-padding-x-md);
+    --wr-tree-trigger-font-size: var(--wr-control-font-size-md);
+    --wr-tree-trigger-line-height: var(--wr-control-line-height-md);
     --wr-tree-panel-max-height: 18rem;
 
     display: inline-flex;
@@ -138,9 +139,8 @@
       box-shadow var(--wr-transition-base);
 
     &:focus-visible {
-      outline: none;
       border-color: var(--wr-color-primary);
-      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.15);
+      @include theme.focus-ring;
     }
 
     &:disabled {
@@ -162,7 +162,7 @@
   }
 
   &__placeholder {
-    color: rgba(var(--wr-color-medium-rgb), 0.85);
+    color: var(--wr-color-text-muted);
   }
 
   &__chevron {
@@ -202,7 +202,8 @@
     flex-wrap: wrap;
     align-items: center;
     padding: 0.25rem 0.5rem;
-    min-height: calc(var(--wr-tree-trigger-line-height) + var(--wr-tree-trigger-padding-y) * 2);
+    // 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);
   }
 
   &__chips {
@@ -221,9 +222,9 @@
     max-width: 100%;
     padding: 0.125rem 0.25rem 0.125rem 0.5rem;
     border-radius: 999px;
-    background: rgba(var(--wr-color-primary-rgb), 0.1);
+    background: var(--wr-color-primary-soft);
     color: var(--wr-color-primary);
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
     line-height: 1.4;
     user-select: none;
   }
@@ -246,7 +247,7 @@
     transition: background 0.12s ease;
 
     &:hover {
-      background: rgba(var(--wr-color-primary-rgb), 0.2);
+      background: var(--wr-color-primary-active);
     }
   }
 

package/types/ngwr-alert.d.ts

@@ -9,7 +9,7 @@ import * as _angular_core from '@angular/core';
 /**
  * Visual variant of the alert.
  */
-type WrAlertType = 'info' | 'success' | 'warning' | 'danger';
+type WrAlertType = 'info' | 'success' | 'warning' | 'danger' | 'neutral' | 'offline';
 
 /**
  * Inline status banner. Use for feedback messages — saved/failed/notice etc.
@@ -23,14 +23,24 @@ type WrAlertType = 'info' | 'success' | 'warning' | 'danger';
  * @see https://ngwr.dev/components/alert
  */
 declare class WrAlert {
-    /** Required headline shown at the top of the alert. */
-    readonly title: _angular_core.InputSignal<string>;
+    /**
+     * Optional headline shown at the top of the alert.
+     *
+     * @default null
+     */
+    readonly title: _angular_core.InputSignal<string | null>;
     /**
      * Visual variant.
      *
      * @default 'info'
      */
     readonly type: _angular_core.InputSignal<WrAlertType>;
+    /**
+     * Override the default per-type icon with any ngwr icon name.
+     *
+     * @default null
+     */
+    readonly iconName: _angular_core.InputSignal<string | null>;
     /**
      * Optional secondary message rendered below the title.
      *
@@ -38,8 +48,8 @@ declare class WrAlert {
      */
     readonly message: _angular_core.InputSignal<string | null>;
     /**
-     * When `true`, renders a leading status icon matching the `type`
-     * (info / success / warning / danger). Pass `false` to hide.
+     * When `true`, renders a leading status icon matching the `type`.
+     * Pass `false` to hide. Ignored when `iconName` is set.
      *
      * @default true
      */
@@ -61,7 +71,7 @@ declare class WrAlert {
     protected readonly liveLevel: _angular_core.Signal<"assertive" | "polite" | null>;
     protected onClose(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrAlert, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrAlert, "wr-alert", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "closeable": { "alias": "closeable"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrAlert, "wr-alert", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "closeable": { "alias": "closeable"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, never, true, never>;
 }
 
 export { WrAlert };

package/types/ngwr-carousel.d.ts

@@ -39,7 +39,10 @@ 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>;
-    /** CSS transform for the track. */
+    /** Live horizontal drag offset (px) during a touch swipe. */
+    protected readonly dragX: _angular_core.WritableSignal<number>;
+    protected readonly dragging: _angular_core.WritableSignal<boolean>;
+    /** CSS transform for the track — the per-slide offset plus any live drag. */
     protected readonly trackStyle: _angular_core.Signal<string>;
     private timer;
     private readonly paused;
@@ -50,6 +53,10 @@ declare class WrCarousel {
     goTo(index: number): void;
     next(): void;
     prev(): void;
+    private swipeStartX;
+    protected onSwipeStart(event: TouchEvent): void;
+    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, { "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>;
 }

package/types/ngwr-cascader.d.ts

@@ -43,6 +43,7 @@ interface WrCascaderOption<T = string> {
  *
  * @see https://ngwr.dev/components/cascader
  */
+type WrCascaderSize = 'sm' | 'md' | 'lg';
 declare class WrCascader<T = string> implements ControlValueAccessor {
     /** Root-level options. Each may have `children` for deeper levels. */
     readonly options: _angular_core.InputSignal<readonly WrCascaderOption<T>[]>;
@@ -50,6 +51,8 @@ declare class WrCascader<T = string> implements ControlValueAccessor {
     readonly placeholder: _angular_core.InputSignal<string>;
     /** Disable the cascader. */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Control size — shares the `--wr-control-*` contract. @default 'md' */
+    readonly size: _angular_core.InputSignal<WrCascaderSize>;
     /** Show a clear-all (×) button on the trigger when a path is selected. @default true */
     readonly clearable: _angular_core.InputSignalWithTransform<boolean, any>;
     /**
@@ -100,8 +103,8 @@ declare class WrCascader<T = string> implements ControlValueAccessor {
     private openOverlay;
     private closeOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCascader<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCascader<any>, "wr-cascader", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "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; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCascader<any>, "wr-cascader", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "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; }; }, {}, never, never, true, never>;
 }
 
 export { WrCascader };
-export type { WrCascaderOption };
+export type { WrCascaderOption, WrCascaderSize };

package/types/ngwr-checkbox.d.ts

@@ -25,6 +25,7 @@ import { ControlValueAccessor } from '@angular/forms';
  *
  * @see https://ngwr.dev/components/checkbox
  */
+type WrCheckboxSize = 'sm' | 'md' | 'lg';
 declare class WrCheckbox implements ControlValueAccessor {
     /**
      * Stable id used to associate the native input with its label.
@@ -43,6 +44,8 @@ declare class WrCheckbox implements ControlValueAccessor {
      * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Control size — shares the `--wr-control-*` contract. @default 'md' */
+    readonly size: _angular_core.InputSignal<WrCheckboxSize>;
     /**
      * Optional icon name rendered inside the box when checked, in place of the
      * default checkmark. Use any registered NGWR icon.
@@ -65,7 +68,7 @@ declare class WrCheckbox implements ControlValueAccessor {
     protected onInputChange(event: Event): void;
     protected onInputBlur(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCheckbox, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCheckbox, "wr-checkbox", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCheckbox, "wr-checkbox", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**
@@ -136,4 +139,4 @@ declare class WrCheckboxGroup implements ControlValueAccessor, WrCheckboxGroupCo
 }
 
 export { WR_CHECKBOX_GROUP, WrCheckbox, WrCheckboxGroup };
-export type { WrCheckboxGroupContext };
+export type { WrCheckboxGroupContext, WrCheckboxSize };

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

@@ -19,7 +19,12 @@ type WrClickSparkEasing = 'linear' | 'ease-in' | 'ease-in-out' | 'ease-out';
  * @see https://www.reactbits.dev/animations/click-spark
  */
 declare class WrClickSpark {
-    /** Spark line colour. @default '#fff' */
+    /**
+     * Spark line colour. Accepts any CSS colour, or a `var(--wr-…)` token which is
+     * resolved against the host so it tracks the theme. The default flips with the
+     * theme — dark sparks in light mode, light sparks in dark.
+     * @default 'var(--wr-color-dark)'
+     */
     readonly sparkColor: _angular_core.InputSignal<string>;
     /** Length of each spark line in pixels (at t=0; tapers to 0 at t=1). @default 10 */
     readonly sparkSize: _angular_core.InputSignalWithTransform<number, unknown>;
@@ -41,6 +46,13 @@ declare class WrClickSpark {
     private sparks;
     constructor();
     protected onClick(event: MouseEvent): void;
+    /**
+     * Canvas `strokeStyle` can't read CSS custom properties, so a `var(--wr-…)`
+     * token is resolved against the host's computed style here. Plain colours
+     * pass through untouched. Falls back to a dark literal if the custom
+     * property resolves to nothing.
+     */
+    private resolveColor;
     private syncCanvasSize;
     private watchResize;
     private startLoop;

package/types/ngwr-clipboard.d.ts

@@ -41,7 +41,18 @@ declare class WrClipboard {
      * when the user denied the permission prompt.
      */
     read(): Promise<string | null>;
-    /** Probe the Permissions API for `clipboard-read` / `clipboard-write`. */
+    /**
+     * Report whether clipboard read / write is available and, when the
+     * browser exposes it, what the user has granted.
+     *
+     * The answer is grounded in the actual Clipboard API capability
+     * (`writeText` / `readText`), then refined by the Permissions API when
+     * it can speak for the requested name. `clipboard-read` / `clipboard-write`
+     * are not recognised everywhere — Firefox and Safari throw on the query —
+     * so a missing or throwing Permissions API is treated as "supported,
+     * will resolve at use time" (`'prompt'`), not `'unsupported'`. We only
+     * return `'unsupported'` when the capability genuinely isn't there.
+     */
     permission(name: 'read' | 'write'): Promise<WrClipboardPermission>;
     /** Hidden-textarea + `execCommand('copy')` write. Synchronous, no permissions. */
     private legacyWrite;

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 (or sends a `contextmenu` event by
- * any means — long-press on touch, 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).
@@ -146,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';
+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 → 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-drag-drop.d.ts

@@ -47,6 +47,18 @@ declare class WrSortableList<T = unknown> {
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Locked axis — restrict drag movement to one axis even diagonally. */
     readonly lockAxis: _angular_core.InputSignal<"x" | "y" | undefined>;
+    /**
+     * Delay (ms) before a drag begins after the pointer goes down. The touch
+     * delay is the fix for the classic CDK touch snag: without it, the
+     * `touch-action: none` CDK puts on each item blocks scrolling the list on a
+     * phone. With a small touch delay, a quick swipe scrolls and a brief hold
+     * starts the drag; mouse stays instant. Pass a single number to apply one
+     * delay to both pointers. @default { touch: 150, mouse: 0 }
+     */
+    readonly dragStartDelay: _angular_core.InputSignal<number | {
+        touch: number;
+        mouse: number;
+    }>;
     /** `trackBy` for the inner `@for`. Defaults to identity. */
     readonly trackBy: _angular_core.InputSignal<(index: number, item: T) => unknown>;
     /** Fired after a successful reorder with the new array + indices. */
@@ -54,7 +66,7 @@ declare class WrSortableList<T = unknown> {
     protected readonly rowTemplate: _angular_core.Signal<TemplateRef<any>>;
     protected onDrop(event: CdkDragDrop<T[]>): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSortableList<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSortableList<any>, "wr-sortable-list", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "lockAxis": { "alias": "lockAxis"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; }, { "items": "itemsChange"; "reorder": "reorder"; }, ["rowTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSortableList<any>, "wr-sortable-list", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "lockAxis": { "alias": "lockAxis"; "required": false; "isSignal": true; }; "dragStartDelay": { "alias": "dragStartDelay"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; }, { "items": "itemsChange"; "reorder": "reorder"; }, ["rowTemplate"], never, true, never>;
 }
 
 /**

package/types/ngwr-drawer.d.ts

@@ -51,9 +51,9 @@ declare class WrDrawer {
      */
     readonly rounded: _angular_core.InputSignalWithTransform<boolean, any>;
     /**
-     * Render a grab handle at the leading edge. Visual affordance for
-     * "swipe to dismiss" patterns. Cosmetic — no swipe logic attached.
-     * @default false
+     * Render a grab handle at the leading edge and enable swipe-to-dismiss:
+     * drag the handle toward the drawer's edge (down for `bottom`, left for
+     * `left`, …) and release past ~30% of the panel to close. @default false
      */
     readonly showHandle: _angular_core.InputSignalWithTransform<boolean, any>;
     /**
@@ -69,6 +69,14 @@ declare class WrDrawer {
     readonly closeOnEscape: _angular_core.InputSignalWithTransform<boolean, any>;
     protected readonly panelTpl: _angular_core.Signal<TemplateRef<any>>;
     protected panelClass(): string;
+    private swipeStartX;
+    private swipeStartY;
+    private swiping;
+    protected onSwipeStart(event: TouchEvent): void;
+    protected onSwipeMove(event: TouchEvent, panel: HTMLElement): void;
+    protected onSwipeEnd(event: TouchEvent, panel: HTMLElement): void;
+    /** Axis + sign of the closing direction for the current position. */
+    private closeAxis;
     private readonly overlay;
     private readonly vcr;
     private readonly destroyRef;

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 };