ngwr 7.0.0 → 7.2.0

package/stepper/styles/_index.scss

@@ -14,6 +14,13 @@
   gap: 1rem;
   font-family: var(--wr-font-family-base);
 
+  // Opt-in (`responsive`): query the box's own width so a horizontal stepper
+  // can drop to vertical when its column is too narrow. The host is already
+  // full-width, so containment is safe here.
+  &--responsive {
+    container: wr-stepper / inline-size;
+  }
+
   &__headers {
     list-style: none;
     margin: 0;
@@ -151,6 +158,29 @@
   }
 }
 
+// Responsive horizontal steppers fall back to the vertical layout when their
+// own box is too narrow for the row — mirrors the `--vertical` rules above,
+// scoped to responsive steppers that aren't already vertical.
+@container wr-stepper (max-width: 32rem) {
+  .wr-stepper--responsive:not(.wr-stepper--vertical) .wr-stepper__headers {
+    flex-direction: column;
+  }
+
+  .wr-stepper--responsive:not(.wr-stepper--vertical) .wr-stepper__header {
+    align-items: stretch;
+    flex: 0 0 auto;
+  }
+
+  .wr-stepper--responsive:not(.wr-stepper--vertical) .wr-stepper__connector {
+    width: 1.5px;
+    min-height: 1.25rem;
+    height: auto;
+    margin: 0.25rem 0 0.25rem calc(var(--wr-stepper-indicator-size) / 2);
+    align-self: stretch;
+    flex: 0 0 auto;
+  }
+}
+
 // `<wr-step>` itself — visibility is driven by an `--active` class
 // the stepper toggles via host binding.
 .wr-step {

package/styles.scss

@@ -27,6 +27,7 @@
 @forward './blur-text/styles';
 @forward './border-glow/styles';
 @forward './breadcrumbs/styles';
+@forward './burger/styles';
 @forward './button/styles';
 @forward './calendar/styles';
 @forward './calendar-heatmap/styles';
@@ -73,6 +74,7 @@
 @forward './marquee/styles';
 @forward './mention/styles';
 @forward './meter-group/styles';
+@forward './overlay/styles';
 @forward './page-header/styles';
 @forward './pagination/styles';
 @forward './popconfirm/styles';

package/theme/styles/_mixins.scss

@@ -55,3 +55,50 @@
     border-radius: calc(#{$br} * 1.85);
   }
 }
+
+/// Expand a small control's touch hit area to a comfortable minimum on
+/// coarse (touch) pointers, without changing how it looks. Lays an
+/// invisible, centred `::after` over the control that's at least `$size`
+/// square; taps on the slack still land on the host. Fine-pointer
+/// (mouse / trackpad) layouts are left exactly as-is, so dense desktop
+/// UIs keep their tight targets.
+///
+/// Use on small icon-only controls — close (×) buttons, chip removes,
+/// tree / cascader toggles — where the visible glyph is well under the
+/// ~44px comfortable tap size. Skip controls that are already tall
+/// enough, and avoid it on tightly-packed rows where a 44px slack would
+/// overlap a neighbouring target.
+///
+/// The pseudo is absolutely positioned, so the host must be a containing
+/// block. For the common static control the mixin sets `position:
+/// relative` for you; pass `$positioned: true` when the host is already
+/// `absolute` / `fixed` / `relative` so the mixin doesn't downgrade its
+/// positioning under the media query.
+///
+/// @param {Length} $size [44px] - Minimum hit-area edge (Apple HIG).
+/// @param {Bool} $positioned [false] - Set true if the host already
+///   establishes a positioning context (skips `position: relative`).
+///
+/// @example scss
+///   .wr-alert__close {
+///     @include touch-target;
+///   }
+@mixin touch-target($size: 44px, $positioned: false) {
+  @media (pointer: coarse) {
+    @if not $positioned {
+      position: relative;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 100%;
+      height: 100%;
+      min-width: $size;
+      min-height: $size;
+      transform: translate(-50%, -50%);
+    }
+  }
+}

package/toast/styles/_index.scss

@@ -20,7 +20,11 @@ $toast-colors: (
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  padding: 1rem;
+  // Safe-area: fold each inset into the matching padding side so toasts clear
+  // notches / the home indicator / rounded corners on mobile, whichever edge
+  // the host is anchored to. env() is 0 without insets, so desktop stays 1rem.
+  padding: calc(1rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right))
+    calc(1rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));
   pointer-events: none;
   max-width: 22rem;
   width: 100%;
@@ -261,3 +265,28 @@ $toast-colors: (
   order: 99;
   align-self: stretch;
 }
+
+// Touch pointers: grow the per-toast action buttons (copy / dismiss) to ~32px
+// with a wider gap so the pair no longer sits 2px apart, and give the
+// dismiss-all bar a taller hit area. Fine pointers keep the compact desktop
+// sizing above.
+@media (pointer: coarse) {
+  .wr-toast__actions {
+    gap: 0.25rem;
+  }
+
+  .wr-toast__action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    --wr-icon-size: 1.125rem;
+  }
+
+  .wr-toast-host__close-all {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+}

package/tree/styles/_index.scss

@@ -269,3 +269,18 @@
   max-height: var(--wr-tree-panel-max-height, 18rem);
   overflow-y: auto;
 }
+
+// Touch pointers: taller rows (~44px) and a larger expand/collapse toggle so
+// both the row and its toggle are comfortable tap targets. Fine pointers keep
+// the compact desktop rows above.
+@media (pointer: coarse) {
+  .wr-tree__row {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .wr-tree__toggle {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+}

package/types/ngwr-burger.d.ts

@@ -0,0 +1,36 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Animated menu toggle — three SVG strokes morph between a hamburger and a
+ * close mark on `open`. Two-way bindable, so it pairs naturally with a
+ * `<wr-drawer>` or any disclosure.
+ *
+ * The morph is pure CSS (`stroke-dasharray` / `stroke-dashoffset` tweens),
+ * so it stays smooth without JS and collapses to its end state under
+ * `prefers-reduced-motion`.
+ *
+ * @example Toggle a drawer
+ * ```html
+ * <wr-burger [(open)]="menuOpen" />
+ * <wr-drawer [(open)]="menuOpen" position="right">…</wr-drawer>
+ * ```
+ *
+ * @see https://ngwr.dev/components/burger
+ */
+declare class WrBurger {
+    /** Two-way bindable open state. Drives the hamburger ↔ close morph. @default false */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Accessible label for the toggle button. @default 'Toggle menu' */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Disable the toggle. @default false */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    protected readonly classes: _angular_core.Signal<{
+        'wr-burger': boolean;
+        'wr-burger--opened': boolean;
+    }>;
+    protected toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrBurger, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrBurger, "wr-burger", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, never, true, never>;
+}
+
+export { WrBurger };

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

@@ -73,6 +73,7 @@ declare class WrMeta {
     private readonly meta;
     private readonly doc;
     private readonly defaults;
+    private readonly injector;
     /** Stack of meta layers. Bottom = defaults, top = currently applied. */
     private readonly stack;
     /** Resolved (merged) metadata at the top of the stack. */
@@ -86,6 +87,29 @@ declare class WrMeta {
     set(config: WrMetaConfig): void;
     /** Push a new layer. Returns a handle whose `.pop()` removes it. */
     push(config: WrMetaConfig): WrMetaHandle;
+    /**
+     * Reactive layer. Runs `factory` inside an effect and re-applies the
+     * resolved metadata whenever any signal it reads changes — so a title
+     * (or any field) built from {@link WrI18n}'s `t()` updates live on
+     * locale switch, with no manual re-`set()`.
+     *
+     * Returns a handle whose `.pop()` removes the layer and stops the effect.
+     * Safe to call outside an injection context.
+     *
+     * @example Locale-aware title
+     * ```ts
+     * const meta = inject(WrMeta);
+     * const i18n = inject(WrI18n);
+     *
+     * // `i18n.t(...)` tracks the active locale, so the title re-renders
+     * // every time `i18n.use(...)` switches languages.
+     * meta.bind(() => ({
+     *   title: i18n.t('home.title'),
+     *   description: i18n.t('home.description'),
+     * }));
+     * ```
+     */
+    bind(factory: () => WrMetaConfig): WrMetaHandle;
     /** Pop the most recently pushed layer (defaults remain). */
     pop(): void;
     /** Clear all overrides, restore the defaults registered via `provideWrMeta`. */

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-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
@@ -8,7 +9,7 @@ import { TemplateRef } from '@angular/core';
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 
-type WrPopoverPosition = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right';
+type WrPopoverPosition = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
 
 declare class WrPopover {
     /**
@@ -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-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-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.0.0";
+declare const NGWR_VERSION = "7.2.0";
 
 /**
  * @license