ngwr 7.1.0 → 7.3.0

package/types/ngwr-command-palette.d.ts

@@ -1,5 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { ElementRef } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
 import { WrIconName } from 'ngwr/icon';
 
 /**
@@ -69,10 +70,20 @@ declare class WrCommandPalette {
     protected readonly resolvedEmpty: _angular_core.Signal<string>;
     /** Auto-close on `(picked)`. Set false to keep open. @default true */
     readonly closeOnPick: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Present the palette full-screen on small viewports instead of a centred
+     * modal. `undefined` follows the app-wide `provideWrResponsiveOverlays()`
+     * setting; `true`/`false` overrides it. The palette docks to the top (it
+     * auto-focuses its input, so the on-screen keyboard stays clear).
+     * @default undefined
+     */
+    readonly responsive: _angular_core.InputSignalWithTransform<boolean | undefined, BooleanInput>;
     /** Fires when the user commits an item (Enter / click). */
     readonly picked: _angular_core.OutputEmitterRef<WrCommandItem>;
     protected readonly query: _angular_core.WritableSignal<string>;
     protected readonly activeIndex: _angular_core.WritableSignal<number>;
+    /** Whether the current opening is presented full-screen. Decided on open. */
+    protected readonly presentAsSheet: _angular_core.WritableSignal<boolean>;
     protected readonly inputEl: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
     protected readonly panelEl: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
     /** Listbox id (referenced by the input's `aria-controls`). */
@@ -82,6 +93,7 @@ declare class WrCommandPalette {
     /** Id of the active option for `aria-activedescendant`. */
     protected readonly activeOptionId: _angular_core.Signal<string | null>;
     private readonly hotkeys;
+    private readonly responsiveConfig;
     private readonly destroyRef;
     private readonly focusTrapFactory;
     private readonly isBrowser;
@@ -106,7 +118,7 @@ declare class WrCommandPalette {
     close(): void;
     private commit;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCommandPalette, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCommandPalette, "wr-command-palette", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "closeOnPick": { "alias": "closeOnPick"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "picked": "picked"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCommandPalette, "wr-command-palette", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "closeOnPick": { "alias": "closeOnPick"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "picked": "picked"; }, never, never, true, never>;
 }
 
 export { WrCommandPalette };

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, long-presses on touch, or otherwise
+ * sends a `contextmenu` event (Shift+F10, etc.). The native browser menu is
+ * suppressed for the host element.
  *
  * @example
  * ```html
@@ -79,9 +79,31 @@ 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;

package/types/ngwr-density.d.ts

@@ -2,7 +2,7 @@ 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 = 'compact' | 'default' | 'comfortable' | 'touch';
 /** Configuration for {@link WrDensityValueService}. */
 interface WrDensityConfig {
     /** Initial density used when no persisted value is present. @default 'default' */
@@ -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 compact → default → comfortable → touch → compact … */
     cycle(): void;
     private readPersisted;
     private persist;

package/types/ngwr-descriptions.d.ts

@@ -23,9 +23,16 @@ declare class WrDescriptions {
     readonly inline: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Add visible borders around each row. @default false */
     readonly bordered: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Reflow `inline` rows back to a stacked layout when the box itself is
+     * narrow (a container query on its own width, not the viewport — so it
+     * adapts inside a narrow card or side panel). Makes the box fill its
+     * container's width. @default false
+     */
+    readonly responsive: _angular_core.InputSignalWithTransform<boolean, any>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrDescriptions, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrDescriptions, "wr-descriptions", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrDescriptions, "wr-descriptions", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**

package/types/ngwr-dialog.d.ts

@@ -66,6 +66,12 @@ interface WrDialogOptions<D = unknown> {
     readonly maxWidth?: string;
     /** Extra CSS class(es) added to the panel. */
     readonly panelClass?: string | readonly string[];
+    /**
+     * Present as a full-width bottom-sheet on small viewports instead of a
+     * centred modal. `undefined` follows the app-wide
+     * `provideWrResponsiveOverlays()` setting; `true`/`false` overrides it.
+     */
+    readonly responsive?: boolean;
 }
 
 /**
@@ -96,6 +102,7 @@ declare class WrDialog {
     private readonly parentInjector;
     private readonly focusTrapFactory;
     private readonly isBrowser;
+    private readonly responsiveConfig;
     open<C, R = unknown, D = unknown>(component: ComponentType<C>, options?: WrDialogOptions<D>): WrDialogRef<C, R>;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrDialog, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<WrDialog>;

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-dropdown.d.ts

@@ -1,5 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
 
 /**
  * Holds the menu content rendered when a {@link WrDropdown} opens.
@@ -59,12 +60,20 @@ declare class WrDropdown {
     readonly trigger: _angular_core.InputSignal<WrDropdownTrigger>;
     /** Where the menu anchors relative to the trigger. @default 'bottom-start' */
     readonly position: _angular_core.InputSignal<WrDropdownPosition>;
+    /**
+     * Present the menu as a full-width bottom-sheet on small viewports instead
+     * of an anchored panel. `undefined` follows the app-wide
+     * `provideWrResponsiveOverlays()` setting; `true`/`false` overrides it.
+     * @default undefined
+     */
+    readonly responsive: _angular_core.InputSignalWithTransform<boolean | undefined, BooleanInput>;
     /** Fires after the menu opens. */
     readonly opened: _angular_core.OutputEmitterRef<void>;
     /** Fires after the menu closes. */
     readonly closed: _angular_core.OutputEmitterRef<void>;
     private readonly host;
     private readonly overlay;
+    private readonly responsiveConfig;
     private readonly vcr;
     private readonly scrollStrategies;
     private readonly destroyRef;
@@ -95,7 +104,7 @@ declare class WrDropdown {
     private focusItemAt;
     private readonly onOverlayMouseLeave;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrDropdown, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrDropdown, "[wrDropdown]", never, { "menu": { "alias": "wrDropdown"; "required": true; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrDropdown, "[wrDropdown]", never, { "menu": { "alias": "wrDropdown"; "required": true; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
 }
 
 /**

package/types/ngwr-lightbox.d.ts

@@ -40,6 +40,11 @@ declare class WrLightbox {
     constructor();
     protected onClick(): void;
     protected onClose(): void;
+    private viewerStartY;
+    private viewerSwiping;
+    protected onViewerSwipeStart(event: TouchEvent): void;
+    protected onViewerSwipeMove(event: TouchEvent, viewer: HTMLElement): void;
+    protected onViewerSwipeEnd(event: TouchEvent, viewer: HTMLElement): void;
     protected onLoad(): void;
     private openOverlay;
     private closeOverlay;

package/types/ngwr-overlay.d.ts

@@ -68,6 +68,74 @@ declare class WrOverlayContainer extends OverlayContainer {
  */
 declare function provideWrOverlay(): EnvironmentProviders;
 
+/**
+ * @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
+ */
+
+/** Configuration for responsive (bottom-sheet) overlay presentation. */
+interface WrResponsiveOverlaysConfig {
+    /**
+     * Viewport width (CSS px) at or below which overlays present as a
+     * bottom-sheet instead of a floating panel. @default 640
+     */
+    readonly breakpoint: number;
+}
+/**
+ * When set, overlay services (dialog, select, dropdown, …) present as a
+ * slide-up bottom-sheet on viewports at or below `breakpoint`. `null`
+ * (the default) keeps every overlay floating. Configure via
+ * {@link provideWrResponsiveOverlays}; override per call with a
+ * component's `responsive` option.
+ *
+ * @internal
+ */
+declare const WR_RESPONSIVE_OVERLAYS: InjectionToken<WrResponsiveOverlaysConfig | null>;
+/**
+ * Decide whether an overlay should present as a bottom-sheet for the
+ * current viewport.
+ *
+ * - `responsive === true` — sheet on small viewports regardless of config.
+ * - `responsive === false` — never a sheet.
+ * - `responsive === undefined` — follow the global config (sheet when
+ *   {@link provideWrResponsiveOverlays} is configured).
+ *
+ * SSR-safe: returns `false` when there's no `window`.
+ *
+ * @internal
+ */
+declare function wrPresentAsSheet(responsive: boolean | undefined, config: WrResponsiveOverlaysConfig | null): boolean;
+
+/**
+ * @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
+ */
+
+/**
+ * Opt every NGWR overlay into responsive presentation — on viewports at or
+ * below `breakpoint`, dialogs / selects / dropdowns and friends slide up as
+ * a full-width bottom-sheet instead of a floating panel. Built on the same
+ * overlay plumbing, so focus-trap, backdrop and scroll-blocking carry over.
+ *
+ * Individual components can still opt out (or in) per instance via their
+ * `responsive` option.
+ *
+ * @example
+ * ```ts
+ * bootstrapApplication(AppComponent, {
+ *   providers: [provideWrOverlay(), provideWrResponsiveOverlays()],
+ * });
+ *
+ * // Custom breakpoint:
+ * provideWrResponsiveOverlays({ breakpoint: 768 });
+ * ```
+ */
+declare function provideWrResponsiveOverlays(config?: Partial<WrResponsiveOverlaysConfig>): EnvironmentProviders;
+
 /**
  * @license
  *
@@ -107,4 +175,4 @@ declare const WR_OVERLAY: InjectionToken<Overlay>;
  */
 declare const WR_OVERLAY_CONTAINER: InjectionToken<OverlayContainer>;
 
-export { WR_OVERLAY, WR_OVERLAY_CONTAINER, WrOverlayContainer, provideWrOverlay };
+export { WR_OVERLAY, WR_OVERLAY_CONTAINER, WR_RESPONSIVE_OVERLAYS, WrOverlayContainer, provideWrOverlay, provideWrResponsiveOverlays, wrPresentAsSheet };

package/types/ngwr-page-header.d.ts

@@ -28,8 +28,15 @@ declare class WrPageHeader {
     readonly title: _angular_core.InputSignal<string>;
     /** Secondary line below the title. */
     readonly subtitle: _angular_core.InputSignal<string>;
+    /**
+     * Stack the title and actions vertically when the header's own box is too
+     * narrow to sit them side by side (a container query on its own width, not
+     * the viewport — so it adapts inside a narrow column or split pane).
+     * @default false
+     */
+    readonly responsive: _angular_core.InputSignalWithTransform<boolean, any>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrPageHeader, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrPageHeader, "wr-page-header", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; }, {}, never, ["[wrPageHeaderBreadcrumbs]", "[wrPageHeaderActions]", "[wrPageHeaderExtra]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrPageHeader, "wr-page-header", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; }, {}, never, ["[wrPageHeaderBreadcrumbs]", "[wrPageHeaderActions]", "[wrPageHeaderExtra]"], true, never>;
 }
 
 export { WrPageHeader };

package/types/ngwr-pagination.d.ts

@@ -83,6 +83,12 @@ declare class WrPagination {
     readonly shape: _angular_core.InputSignal<WrPaginationShape>;
     /** Disable interaction. @default false */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Collapse to a compact `‹ page / total ›` pager when the control's own box
+     * is too narrow for the full numbered strip (a container query on its own
+     * width, not the viewport). @default false
+     */
+    readonly responsive: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Localised text between range and total ("X–Y of Z"). Falls back to `pagination.of` then `'of'`. */
     readonly ofLabel: _angular_core.InputSignal<string | null>;
     /** Previous-page button aria-label. Falls back to `pagination.prev`. */
@@ -112,7 +118,7 @@ declare class WrPagination {
     protected goTo(page: number | typeof ELLIPSIS): void;
     protected onSizeChange(size: number): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrPagination, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrPagination, "wr-pagination", never, { "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "showSizeChanger": { "alias": "showSizeChanger"; "required": false; "isSignal": true; }; "showTotal": { "alias": "showTotal"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ofLabel": { "alias": "ofLabel"; "required": false; "isSignal": true; }; "prevLabel": { "alias": "prevLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "itemsPerPageLabel": { "alias": "itemsPerPageLabel"; "required": false; "isSignal": true; }; }, { "currentPage": "currentPageChange"; "pageSize": "pageSizeChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrPagination, "wr-pagination", never, { "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "showSizeChanger": { "alias": "showSizeChanger"; "required": false; "isSignal": true; }; "showTotal": { "alias": "showTotal"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "ofLabel": { "alias": "ofLabel"; "required": false; "isSignal": true; }; "prevLabel": { "alias": "prevLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "itemsPerPageLabel": { "alias": "itemsPerPageLabel"; "required": false; "isSignal": true; }; }, { "currentPage": "currentPageChange"; "pageSize": "pageSizeChange"; }, never, never, true, never>;
 }
 
 export { WrPagination };

package/types/ngwr-popover.d.ts

@@ -1,5 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
 
 /**
  * @license
@@ -37,12 +38,20 @@ declare class WrPopover {
     readonly showDelay: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Tooltip only — delay before hiding, in ms. @default 60 */
     readonly hideDelay: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Popover mode only — present the panel as a full-width bottom-sheet on
+     * small viewports instead of an anchored panel. `undefined` follows the
+     * app-wide `provideWrResponsiveOverlays()` setting; `true`/`false`
+     * overrides it. Tooltips never become sheets. @default undefined
+     */
+    readonly responsive: _angular_core.InputSignalWithTransform<boolean | undefined, BooleanInput>;
     /** Fires after the panel opens. */
     readonly opened: _angular_core.OutputEmitterRef<void>;
     /** Fires after the panel closes. */
     readonly closed: _angular_core.OutputEmitterRef<void>;
     private readonly host;
     private readonly overlay;
+    private readonly responsiveConfig;
     private readonly vcr;
     private readonly scrollStrategies;
     private readonly destroyRef;
@@ -83,7 +92,7 @@ declare class WrPopover {
     private scheduleHoverClose;
     private clearHoverClose;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrPopover, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrPopover, "[wrPopover]", never, { "content": { "alias": "wrPopover"; "required": true; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "showDelay": { "alias": "showDelay"; "required": false; "isSignal": true; }; "hideDelay": { "alias": "hideDelay"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrPopover, "[wrPopover]", never, { "content": { "alias": "wrPopover"; "required": true; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "showDelay": { "alias": "showDelay"; "required": false; "isSignal": true; }; "hideDelay": { "alias": "hideDelay"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
 }
 
 export { WrPopover };

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

@@ -49,6 +49,7 @@ declare class WrRotatingText {
     protected readonly current: _angular_core.Signal<string>;
     protected readonly words: _angular_core.Signal<readonly Word[]>;
     private readonly host;
+    private readonly injector;
     private readonly destroyRef;
     private readonly isBrowser;
     private readonly platform;

package/types/ngwr-select.d.ts

@@ -1,6 +1,7 @@
 import * as ngwr_i18n from 'ngwr/i18n';
 import * as _angular_core from '@angular/core';
 import { InjectionToken, Signal, TemplateRef, ElementRef } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
 import { ControlValueAccessor } from '@angular/forms';
 import { Observable } from 'rxjs';
 
@@ -154,6 +155,13 @@ 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>;
+    /**
+     * Present the option panel as a full-width bottom-sheet on small
+     * viewports instead of an anchored dropdown. `undefined` follows the
+     * app-wide `provideWrResponsiveOverlays()` setting; `true`/`false`
+     * overrides it. @default undefined
+     */
+    readonly responsive: _angular_core.InputSignalWithTransform<boolean | undefined, BooleanInput>;
     /**
      * Behavior mode. `<wr-select>` is the unified combobox primitive —
      * pick the shape via `[mode]`:
@@ -309,6 +317,7 @@ declare class WrSelect implements ControlValueAccessor, WrSelectContext {
     protected readonly searchDisplay: _angular_core.Signal<string>;
     private readonly host;
     private readonly overlay;
+    private readonly responsiveConfig;
     private readonly vcr;
     private readonly scrollStrategies;
     private readonly destroyRef;
@@ -346,7 +355,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; }; "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; }; "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>;
 }
 
 /**

package/types/ngwr-stepper.d.ts

@@ -80,6 +80,13 @@ declare class WrStepper implements WrStepperContext {
     readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
     /** Lock steps after the latest completed one. @default false */
     readonly linear: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Drop a horizontal stepper to a vertical layout when its own box is too
+     * narrow for the row (a container query on its own width, not the
+     * viewport — so it adapts inside a narrow column or side panel). No effect
+     * when `orientation` is already `vertical`. @default false
+     */
+    readonly responsive: _angular_core.InputSignalWithTransform<boolean, any>;
     protected readonly steps: _angular_core.Signal<readonly WrStep[]>;
     protected readonly classes: _angular_core.Signal<string>;
     constructor();
@@ -92,7 +99,7 @@ declare class WrStepper implements WrStepperContext {
     next(): void;
     prev(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrStepper, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrStepper, "wr-stepper", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, ["steps"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrStepper, "wr-stepper", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, ["steps"], ["*"], true, never>;
 }
 
 export { WR_STEPPER, WrStep, WrStepper };

package/types/ngwr-table.d.ts

@@ -139,6 +139,12 @@ declare class WrTable {
     readonly items: _angular_core.InputSignal<readonly Record<string, unknown>[] | null | undefined>;
     /** Show the loading spinner overlay. @default false */
     readonly loading: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Collapse each row to a labelled card when the table's own box is too narrow
+     * for columns (a container query on its own width, not the viewport). Every
+     * cell shows its column title as a label. @default false
+     */
+    readonly responsive: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Two-way bindable sort array. Order in array = application order. */
     readonly sort: _angular_core.ModelSignal<readonly WrTableSortState[]>;
     /** Fires whenever a column's filter selection changes. */
@@ -174,7 +180,7 @@ declare class WrTable {
     protected getValue(item: Record<string, unknown>, key: unknown): unknown;
     protected templateFor(key: unknown): TemplateRef<WrTableCellContext> | undefined;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrTable, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTable, "wr-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; "totalItems": { "alias": "totalItems"; "required": false; "isSignal": true; }; }, { "sort": "sortChange"; "filterChange": "filterChange"; "page": "pageChange"; }, ["cellTemplates"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTable, "wr-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; "totalItems": { "alias": "totalItems"; "required": false; "isSignal": true; }; }, { "sort": "sortChange"; "filterChange": "filterChange"; "page": "pageChange"; }, ["cellTemplates"], never, true, never>;
 }
 
 /**

package/types/ngwr-tabs.d.ts

@@ -110,6 +110,12 @@ declare class WrTabs implements WrTabsContext {
     }): void;
     unregister(): void;
     protected readonly stripRef: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    /** Whether the strip is scrolled away from its start / end — drives the edge fades. */
+    protected readonly canScrollStart: _angular_core.WritableSignal<boolean>;
+    protected readonly canScrollEnd: _angular_core.WritableSignal<boolean>;
+    constructor();
+    /** Recompute which edges can scroll, from the strip's scroll metrics. @internal */
+    protected updateFades(): void;
     protected onTabClick(tab: WrTab): void;
     /** Header id for `aria-labelledby` on the panel. @internal */
     headerId(key: string): string;

package/types/ngwr-toolbar.d.ts

@@ -23,8 +23,14 @@ import * as i0 from '@angular/core';
  * @see https://ngwr.dev/components/toolbar
  */
 declare class WrToolbar {
+    /**
+     * Stack the zones vertically when the toolbar's own box is too narrow to fit
+     * them in a row (a container query on its own width, not the viewport — so it
+     * adapts inside a narrow column or split pane). @default false
+     */
+    readonly responsive: i0.InputSignalWithTransform<boolean, any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrToolbar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WrToolbar, "wr-toolbar", never, {}, {}, never, ["[wrToolbarStart]", "[wrToolbarCenter]", "[wrToolbarEnd]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrToolbar, "wr-toolbar", never, { "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; }, {}, never, ["[wrToolbarStart]", "[wrToolbarCenter]", "[wrToolbarEnd]"], true, never>;
 }
 
 export { WrToolbar };

package/types/ngwr-version.d.ts

@@ -16,7 +16,7 @@ import { InjectionToken } from '@angular/core';
  * Distinct from `Version` exported by `@angular/core`, which reports the
  * loaded Angular runtime version (e.g. `'21.2.13'`), not ngwr's.
  */
-declare const NGWR_VERSION = "7.1.0";
+declare const NGWR_VERSION = "7.3.0";
 
 /**
  * @license