ngwr 11.1.0 → 12.0.0

package/fesm2022/ngwr-drawer.mjs

@@ -1,15 +1,50 @@
 import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
-import { isPlatformBrowser } from '@angular/common';
+import { isPlatformBrowser, Location } from '@angular/common';
 import * as i0 from '@angular/core';
-import { model, input, viewChild, TemplateRef, inject, ViewContainerRef, DestroyRef, PLATFORM_ID, effect, ViewEncapsulation, Component, InjectionToken, EnvironmentInjector, Injector, afterNextRender, Service, Directive, computed } from '@angular/core';
+import { Directive, model, input, viewChild, TemplateRef, contentChild, inject, ViewContainerRef, DestroyRef, PLATFORM_ID, effect, afterEveryRender, ViewEncapsulation, Component, InjectionToken, EnvironmentInjector, Injector, Service, computed } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { useI18nText, WrI18n } from 'ngwr/i18n';
 import { WR_OVERLAY, wrAppendOverlayClose } from 'ngwr/overlay';
 import { ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { ReplaySubject } from 'rxjs';
 
+/**
+ * @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
+ */
+let uid = 0;
+/**
+ * Marks an element as the drawer's title row. Applies the `wr-drawer__title`
+ * class so the drawer's stylesheet can lay it out alongside content and
+ * footer slots. Auto-assigns an `id` so the drawer panel references it via
+ * `aria-labelledby`.
+ *
+ * @example
+ * ```html
+ * <wr-drawer [(open)]="open">
+ *   <h2 wrDrawerTitle>Settings</h2>
+ *   <div wrDrawerContent>…</div>
+ * </wr-drawer>
+ * ```
+ */
+class WrDrawerTitle {
+    /** Generated id used by the drawer panel for `aria-labelledby`. */
+    id = `wr-drawer-title-${++uid}`;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrDrawerTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: WrDrawerTitle, isStandalone: true, selector: "[wrDrawerTitle]", host: { properties: { "attr.id": "id" }, classAttribute: "wr-drawer__title" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrDrawerTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wrDrawerTitle]',
+                    host: { class: 'wr-drawer__title', '[attr.id]': 'id' },
+                }]
+        }] });
+
 /**
  * @license
  *
@@ -89,6 +124,19 @@ class WrDrawer {
     resolvedCloseLabel = useI18nText(this.closeLabel, 'drawer.close', 'Close drawer');
     panelTpl = viewChild.required(TemplateRef, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelTpl" }] : /* istanbul ignore next */ []));
+    /**
+     * A projected `[wrDrawerTitle]`, if the consumer gave one.
+     *
+     * The dismiss button is corner chrome positioned at a fixed
+     * `inset-block-start` chosen to centre it on the TITLE's first line. With no
+     * title the content starts at the top of the panel and runs underneath it: on
+     * a bare `<wr-drawer><nav /></wr-drawer>` the button covered the first menu
+     * row by 24×16 px, and `elementFromPoint` at the button's centre returned the
+     * button, so that corner of the first item was unclickable. The panel has to
+     * know, because only the panel can reserve the space.
+     */
+    projectedTitle = contentChild(WrDrawerTitle, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "projectedTitle" }] : /* istanbul ignore next */ []));
     panelClass() {
         const parts = ['wr-drawer__panel', `wr-drawer__panel--${this.position()}`];
         if (this.rounded())
@@ -97,6 +145,10 @@ class WrDrawer {
             parts.push('wr-drawer__panel--safe-area');
         if (this.closable())
             parts.push('wr-drawer__panel--closable');
+        // Only when there is something to collide with: a closable drawer with a
+        // title already clears the button, and an unclosable one has no button.
+        if (this.closable() && !this.projectedTitle())
+            parts.push('wr-drawer__panel--untitled');
         return parts.join(' ');
     }
     // Swipe-to-dismiss — gated to the grab handle, so it never fights the
@@ -133,6 +185,21 @@ class WrDrawer {
         panel.style.transition = 'none';
         panel.style.transform = axis === 'y' ? `translateY(${delta}px)` : `translateX(${delta}px)`;
     }
+    /**
+     * A cancelled pointer is an ABANDONED swipe, not a completed one — the system
+     * took the gesture away (a call, a system gesture, an orientation change) and
+     * no `pointerup` ever arrives. Routing it through `onSwipeEnd` dismissed the
+     * drawer on an interruption the user did not ask for and, because the overlay
+     * is disposed with the dragged offset applied, could not take back. Same rule
+     * `wr-pull-to-refresh` states for `touchcancel`.
+     */
+    onSwipeCancel(panel) {
+        if (!this.swiping)
+            return;
+        this.swiping = false;
+        panel.style.transition = '';
+        panel.style.transform = '';
+    }
     onSwipeEnd(event, panel) {
         if (!this.swiping)
             return;
@@ -179,8 +246,30 @@ class WrDrawer {
                 this.closeOverlay();
             }
         });
+        afterEveryRender(() => this.syncLabel());
         this.destroyRef.onDestroy(() => this.closeOverlay());
     }
+    /**
+     * Point the panel's `aria-labelledby` at the CURRENT `[wrDrawerTitle]`.
+     *
+     * Re-resolved after every render rather than once when the drawer opens,
+     * because the title element is projected content and can come and go while
+     * the drawer stays open — an `@if` around it, or a heading that only exists
+     * once the data arrives. A one-shot lookup leaves the attribute naming an
+     * element that has been removed or replaced, and a dangling reference is not
+     * a name: the dialog is announced as unnamed, with nothing on screen to say
+     * so. A missing title clears the attribute for the same reason.
+     */
+    syncLabel() {
+        const host = this.overlayRef?.overlayElement;
+        if (!host)
+            return;
+        const titleEl = host.querySelector('[wrDrawerTitle], [wr-drawer-title]');
+        if (titleEl?.id)
+            host.setAttribute('aria-labelledby', titleEl.id);
+        else
+            host.removeAttribute('aria-labelledby');
+    }
     openOverlay() {
         if (this.overlayRef)
             return;
@@ -214,11 +303,6 @@ class WrDrawer {
             const host = this.overlayRef.overlayElement;
             host.setAttribute('role', 'dialog');
             host.setAttribute('aria-modal', 'true');
-            queueMicrotask(() => {
-                const titleEl = host.querySelector('[wrDrawerTitle], [wr-drawer-title]');
-                if (titleEl?.id)
-                    host.setAttribute('aria-labelledby', titleEl.id);
-            });
             this.focusTrap = this.focusTrapFactory.create(host);
             void this.focusTrap.focusInitialElementWhenReady();
         }
@@ -253,13 +337,13 @@ class WrDrawer {
             restore.focus();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrDrawer, isStandalone: true, selector: "wr-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showHandle: { classPropertyName: "showHandle", publicName: "showHandle", isSignal: true, isRequired: false, transformFunction: null }, safeArea: { classPropertyName: "safeArea", publicName: "safeArea", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { styleAttribute: "display:none" }, viewQueries: [{ propertyName: "panelTpl", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\n  <div #panel [class]=\"panelClass()\">\n    @if (showHandle()) {\n      <div\n        class=\"wr-drawer__handle\"\n        aria-hidden=\"true\"\n        (pointerdown)=\"onSwipeStart($event)\"\n        (pointermove)=\"onSwipeMove($event, panel)\"\n        (pointerup)=\"onSwipeEnd($event, panel)\"\n        (pointercancel)=\"onSwipeEnd($event, panel)\"\n      >\n        <span class=\"wr-drawer__grabber\"></span>\n      </div>\n    }\n    @if (closable()) {\n      <button type=\"button\" class=\"wr-drawer__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"open.set(false)\">\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </button>\n    }\n    <ng-content />\n  </div>\n</ng-template>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: WrDrawer, isStandalone: true, selector: "wr-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showHandle: { classPropertyName: "showHandle", publicName: "showHandle", isSignal: true, isRequired: false, transformFunction: null }, safeArea: { classPropertyName: "safeArea", publicName: "safeArea", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { styleAttribute: "display:none" }, queries: [{ propertyName: "projectedTitle", first: true, predicate: WrDrawerTitle, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelTpl", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\n  <div #panel [class]=\"panelClass()\">\n    @if (showHandle()) {\n      <div\n        class=\"wr-drawer__handle\"\n        aria-hidden=\"true\"\n        (pointerdown)=\"onSwipeStart($event)\"\n        (pointermove)=\"onSwipeMove($event, panel)\"\n        (pointerup)=\"onSwipeEnd($event, panel)\"\n        (pointercancel)=\"onSwipeCancel(panel)\"\n      >\n        <span class=\"wr-drawer__grabber\"></span>\n      </div>\n    }\n    @if (closable()) {\n      <button type=\"button\" class=\"wr-drawer__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"open.set(false)\">\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </button>\n    }\n    <ng-content />\n  </div>\n</ng-template>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDrawer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrDrawer, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-drawer', encapsulation: ViewEncapsulation.None, host: { style: 'display:none' }, template: "<ng-template>\n  <div #panel [class]=\"panelClass()\">\n    @if (showHandle()) {\n      <div\n        class=\"wr-drawer__handle\"\n        aria-hidden=\"true\"\n        (pointerdown)=\"onSwipeStart($event)\"\n        (pointermove)=\"onSwipeMove($event, panel)\"\n        (pointerup)=\"onSwipeEnd($event, panel)\"\n        (pointercancel)=\"onSwipeEnd($event, panel)\"\n      >\n        <span class=\"wr-drawer__grabber\"></span>\n      </div>\n    }\n    @if (closable()) {\n      <button type=\"button\" class=\"wr-drawer__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"open.set(false)\">\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </button>\n    }\n    <ng-content />\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHandle", required: false }] }], safeArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "safeArea", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], panelTpl: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+            args: [{ selector: 'wr-drawer', encapsulation: ViewEncapsulation.None, host: { style: 'display:none' }, template: "<ng-template>\n  <div #panel [class]=\"panelClass()\">\n    @if (showHandle()) {\n      <div\n        class=\"wr-drawer__handle\"\n        aria-hidden=\"true\"\n        (pointerdown)=\"onSwipeStart($event)\"\n        (pointermove)=\"onSwipeMove($event, panel)\"\n        (pointerup)=\"onSwipeEnd($event, panel)\"\n        (pointercancel)=\"onSwipeCancel(panel)\"\n      >\n        <span class=\"wr-drawer__grabber\"></span>\n      </div>\n    }\n    @if (closable()) {\n      <button type=\"button\" class=\"wr-drawer__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"open.set(false)\">\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </button>\n    }\n    <ng-content />\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHandle", required: false }] }], safeArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "safeArea", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], panelTpl: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], projectedTitle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WrDrawerTitle), { isSignal: true }] }] } });
 
 /**
  * @license
@@ -472,6 +556,7 @@ class WrDrawerManager {
     focusTrapFactory = inject(ConfigurableFocusTrapFactory);
     isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     i18n = inject(WrI18n);
+    location = inject(Location);
     open(component, options = {}) {
         const position = options.position ?? DEFAULT_POSITION;
         const isHorizontal = position === 'left' || position === 'right';
@@ -546,11 +631,23 @@ class WrDrawerManager {
             // Has to wait for a render, not a microtask: attaching the portal only
             // schedules change detection, so under zoneless CD a microtask runs while
             // the content is still an empty view and the title id doesn't exist yet.
-            afterNextRender(() => {
+            //
+            // And after EVERY render, not just the next one: the title belongs to the
+            // caller's component, so an `@if` or a late-arriving heading can replace
+            // or remove the element the attribute names. A reference to a node that is
+            // no longer there is not a name — the dialog announces as unnamed — so a
+            // missing title clears the attribute rather than leaving it dangling.
+            const labelSync = afterEveryRender(() => {
                 const titleEl = host.querySelector('[wrDrawerTitle], [wr-drawer-title]');
                 if (titleEl?.id)
                     host.setAttribute('aria-labelledby', titleEl.id);
+                else
+                    host.removeAttribute('aria-labelledby');
             }, { injector: this.parentInjector });
+            // The hook is bound to the root injector, so it outlives the drawer unless
+            // it is torn down with it. `detachments()` fires on dispose, which is the
+            // one path every dismissal goes through.
+            overlayRef.detachments().subscribe(() => labelSync.destroy());
             // Trap focus inside the drawer and move initial focus in.
             const trap = this.focusTrapFactory.create(host);
             drawerRef.focusTrap = trap;
@@ -569,15 +666,45 @@ class WrDrawerManager {
                 }
             });
         }
+        if (options.closeOnNavigation !== false) {
+            this.watchNavigation(overlayRef, drawerRef);
+        }
         return drawerRef;
     }
+    /**
+     * Tie the drawer's lifetime to the URL it was opened on — the same treatment
+     * `WrDialog` gets, and for the same reason.
+     *
+     * Nothing else does. The overlay belongs to a root service and is dismissed
+     * only by the backdrop, Escape, the appended × or an explicit `close()`, so
+     * navigating away left the panel, its backdrop, its focus trap and the
+     * page-wide scroll block sitting over a page the user never opened them on.
+     *
+     * `onUrlChange`, not `Location.subscribe()` — which is what CDK's own
+     * `disposeOnNavigation` uses: `subscribe` fires on popstate alone, so an in-app
+     * `router.navigate()` left the drawer standing. And `drawerRef.close()` rather
+     * than disposing the overlay behind the ref's back, which would never emit
+     * `closed`, never destroy the focus trap, and leave `awaitClose()` pending.
+     */
+    watchNavigation(overlayRef, drawerRef) {
+        const stopWatching = this.location.onUrlChange(() => drawerRef.close());
+        // Unhooked a microtask late, because `Location` notifies its listeners with
+        // a `forEach` and unregistering splices the array it is iterating: removing
+        // ours synchronously from inside the notification would shift the next entry
+        // into the slot forEach has already passed, and a SECOND stacked drawer
+        // would be skipped and left behind.
+        overlayRef.detachments().subscribe(() => queueMicrotask(stopWatching));
+    }
     /**
      * The dismiss button's accessible name.
      *
-     * Resolved per open, not once at injection: this is a root service, so a
-     * `readI18nText` field — which is what `WrDialog` uses — would be evaluated
-     * before an async catalog had loaded and then freeze that answer for the life
-     * of the app.
+     * Resolved per open, not stored as a plain string at injection: this is a root
+     * service, so a one-shot read — which is what `WrDialog` used to have, and moved
+     * off for this reason — would run before an async catalog had loaded and then
+     * freeze that answer for the life of the app. (`readI18nText` hands back a signal
+     * now, so it would no longer freeze; the name still has to be pushed onto the
+     * button per open either way.) `WrDialog.closeLabel()` is the matching precedent,
+     * not the counter-example.
      *
      * The miss check is the point. `t()` hands back the KEY when the catalog has
      * no entry, and `WrI18n` is root-provided with an empty catalog by default —
@@ -589,48 +716,13 @@ class WrDrawerManager {
         const resolved = this.i18n.t('drawer.close');
         return resolved === 'drawer.close' ? 'Close drawer' : resolved;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDrawerManager, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.1", ngImport: i0, type: WrDrawerManager });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrDrawerManager, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.2", ngImport: i0, type: WrDrawerManager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDrawerManager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrDrawerManager, decorators: [{
             type: Service
         }] });
 
-/**
- * @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
- */
-let uid = 0;
-/**
- * Marks an element as the drawer's title row. Applies the `wr-drawer__title`
- * class so the drawer's stylesheet can lay it out alongside content and
- * footer slots. Auto-assigns an `id` so the drawer panel references it via
- * `aria-labelledby`.
- *
- * @example
- * ```html
- * <wr-drawer [(open)]="open">
- *   <h2 wrDrawerTitle>Settings</h2>
- *   <div wrDrawerContent>…</div>
- * </wr-drawer>
- * ```
- */
-class WrDrawerTitle {
-    /** Generated id used by the drawer panel for `aria-labelledby`. */
-    id = `wr-drawer-title-${++uid}`;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDrawerTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: WrDrawerTitle, isStandalone: true, selector: "[wrDrawerTitle]", host: { properties: { "attr.id": "id" }, classAttribute: "wr-drawer__title" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDrawerTitle, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[wrDrawerTitle]',
-                    host: { class: 'wr-drawer__title', '[attr.id]': 'id' },
-                }]
-        }] });
-
 /**
  * @license
  *
@@ -643,10 +735,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * footer.
  */
 class WrDrawerContent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDrawerContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: WrDrawerContent, isStandalone: true, selector: "[wrDrawerContent]", host: { classAttribute: "wr-drawer__content" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrDrawerContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: WrDrawerContent, isStandalone: true, selector: "[wrDrawerContent]", host: { classAttribute: "wr-drawer__content" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDrawerContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrDrawerContent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrDrawerContent]',
@@ -679,10 +771,10 @@ class WrDrawerFooter {
     ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
     classes = computed(() => `wr-drawer__footer wr-drawer__footer--${this.align()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDrawerFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: WrDrawerFooter, isStandalone: true, selector: "[wrDrawerFooter]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrDrawerFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: WrDrawerFooter, isStandalone: true, selector: "[wrDrawerFooter]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDrawerFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrDrawerFooter, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrDrawerFooter]',
@@ -731,10 +823,10 @@ class WrDrawerClose {
         }
         this.ref?.close(this.result());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDrawerClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: WrDrawerClose, isStandalone: true, selector: "[wrDrawerClose]", inputs: { result: { classPropertyName: "result", publicName: "wrDrawerClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "close()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrDrawerClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: WrDrawerClose, isStandalone: true, selector: "[wrDrawerClose]", inputs: { result: { classPropertyName: "result", publicName: "wrDrawerClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "close()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrDrawerClose, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrDrawerClose, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrDrawerClose]',