ngwr 11.1.0 → 12.0.0

package/fesm2022/ngwr-window.mjs

@@ -1,11 +1,12 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, model, input, computed, output, inject, signal, afterNextRender, effect, ViewEncapsulation, Component, Injector, DestroyRef, viewChild, ViewContainerRef, runInInjectionContext, ChangeDetectionStrategy, EnvironmentInjector, PLATFORM_ID, Service } from '@angular/core';
+import { InjectionToken, signal, model, input, computed, output, inject, afterNextRender, effect, ViewEncapsulation, Component, Injector, DestroyRef, viewChild, ViewContainerRef, runInInjectionContext, ChangeDetectionStrategy, EnvironmentInjector, PLATFORM_ID, Service } from '@angular/core';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { isPlatformBrowser } from '@angular/common';
 import { WR_OVERLAY } from 'ngwr/overlay';
 import { WrStorage } from 'ngwr/storage';
 import { randomId, clamp } from 'ngwr/utils';
-import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import { useI18nText, useI18nFormatter } from 'ngwr/i18n';
 import { ReplaySubject, Subject } from 'rxjs';
 
 /**
@@ -31,6 +32,13 @@ function storageKey(cfg) {
  * 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
  */
+/**
+ * Stands in for the consumer input `useI18nText` expects. The chrome buttons take no
+ * label input — they are icon-only OS affordances — but their names still have to
+ * come from the catalog rather than from the template, which is where they used to
+ * live as English literals.
+ */
+const NO_OVERRIDE$1 = signal(null).asReadonly();
 /**
  * Best-effort OS detection — runs once at module load. Looks at the
  * new `navigator.userAgentData.platform` first (Chromium, no UA
@@ -57,6 +65,17 @@ function detectOs() {
     return 'windows';
 }
 const DETECTED_OS = detectOs();
+/**
+ * `coerceBooleanProperty` that keeps `null` as `null`.
+ *
+ * The plain coercion maps `null` and `undefined` to `false`, which is the one
+ * thing a tri-state input must not do: "unset" has to survive as its own value
+ * or the OS default can never be told apart from an explicit `false`. Attribute
+ * presence (`<wr-window showMinimize>`, i.e. `''`) still means `true`.
+ */
+function optionalBoolean(value) {
+    return value === null || value === undefined ? null : coerceBooleanProperty(value);
+}
 const SIZE_PRESETS = {
     sm: { width: 320, height: 200 },
     md: { width: 480, height: 320 },
@@ -91,6 +110,20 @@ class WrWindow {
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     /** Auto-generated id for the title element, referenced by `aria-labelledby`. */
     titleId = randomId('wr-window-title');
+    // `window.close` had been sitting in both catalogs unread while the template
+    // hard-coded the same English beside it; the other four had no key at all, so a
+    // Russian app announced four of its five window buttons in English.
+    closeLabel = useI18nText(NO_OVERRIDE$1, 'window.close', 'Close');
+    minimizeLabel = useI18nText(NO_OVERRIDE$1, 'window.minimize', 'Minimize');
+    maximizeLabel = useI18nText(NO_OVERRIDE$1, 'window.maximize', 'Maximize');
+    restoreLabel = useI18nText(NO_OVERRIDE$1, 'window.restore', 'Restore');
+    restoreDownLabel = useI18nText(NO_OVERRIDE$1, 'window.restoreDown', 'Restore down');
+    /** The minimize button doubles as restore, and says which it is. */
+    minimizeActionLabel = computed(() => this.state() === 'minimized' ? this.restoreLabel() : this.minimizeLabel(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minimizeActionLabel" }] : /* istanbul ignore next */ []));
+    /** Same for maximize, whose restore has its own wording. */
+    maximizeActionLabel = computed(() => this.state() === 'maximized' ? this.restoreDownLabel() : this.maximizeLabel(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maximizeActionLabel" }] : /* istanbul ignore next */ []));
     /** Initial position. `null` = auto-cascade from the manager. */
     initialX = input(null, { ...(ngDevMode ? { debugName: "initialX" } : /* istanbul ignore next */ {}), transform: (v) => (v == null ? null : coerceNumberProperty(v, 0)) });
     initialY = input(null, { ...(ngDevMode ? { debugName: "initialY" } : /* istanbul ignore next */ {}), transform: (v) => (v == null ? null : coerceNumberProperty(v, 0)) });
@@ -118,6 +151,15 @@ class WrWindow {
         return o === 'auto' ? DETECTED_OS : o;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedOs" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether each control is rendered: the input wins, the chrome decides the
+     * default. Linux is close-only unless asked otherwise — see
+     * {@link showMinimize} for why that is an input and not a template gate.
+     */
+    minimizeVisible = computed(() => this.showMinimize() ?? this.resolvedOs() !== 'linux', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minimizeVisible" }] : /* istanbul ignore next */ []));
+    maximizeVisible = computed(() => this.showMaximize() ?? this.resolvedOs() !== 'linux', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maximizeVisible" }] : /* istanbul ignore next */ []));
     /** Title-bar density. @default 'normal' */
     chromeSize = input('normal', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "chromeSize" }] : /* istanbul ignore next */ []));
@@ -146,8 +188,22 @@ class WrWindow {
      */
     dragHandle = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dragHandle" }] : /* istanbul ignore next */ []));
-    showMinimize = input(true, { ...(ngDevMode ? { debugName: "showMinimize" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
-    showMaximize = input(true, { ...(ngDevMode ? { debugName: "showMaximize" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    // Tri-state, and the third state is the point. While this defaulted to `true`,
+    // "not set" and "explicitly asked for" were the same value, so the Linux
+    // preset had to gate minimize out of the template unconditionally — and
+    // `<wr-window-taskbar>` became unreachable on that chrome: `ref.minimize()`
+    // still filed a window into it, but no user could press anything to get it
+    // there. `null` restores the distinction the chrome docs always claimed.
+    /**
+     * Show the minimize control. `null` (the default) follows the chrome: every OS
+     * but Linux shows it, and the Linux preset is close-only by convention. Pass
+     * `true` to override that — on Linux it is what puts a window within reach of
+     * `<wr-window-taskbar>`.
+     */
+    showMinimize = input(null, { ...(ngDevMode ? { debugName: "showMinimize" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** Show the maximize control. `null` (the default) follows the chrome, as with {@link showMinimize}. */
+    showMaximize = input(null, { ...(ngDevMode ? { debugName: "showMaximize" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** Show the close control. Not per-OS: every chrome closes. */
     showClose = input(true, { ...(ngDevMode ? { debugName: "showClose" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
     /** Fires when the window closes — from the header button or from `close()`. */
     closed = output();
@@ -228,7 +284,16 @@ class WrWindow {
     }
     // Public API
     close() {
-        this.open.set(false);
+        // A REQUEST to close, not the close itself. `WrWindowContainer` binds
+        // `(closed)` to `WrWindowRef.close()`, which awaits the `beforeClose` hook
+        // and — only if the hook agrees — disposes the overlay, so the owner is what
+        // takes the window away and this component never has to hide itself. Hiding
+        // here first defeated the veto: `.wr-window--closed` is `display: none`, so
+        // a vetoed window vanished while its ref stayed in `manager.windows()` in
+        // state `normal` — off screen, absent from the taskbar, and unreachable by
+        // `restore()` / `focus()` / `moveTo()`, none of which write `open`. Escape
+        // goes straight to `ref.close()` and so never had the bug, which is the
+        // contrast that exposed it.
         this.closed.emit();
     }
     minimize() {
@@ -304,10 +369,11 @@ class WrWindow {
             this.clampToViewport();
             this.snapTarget.set(this.detectSnapTarget(e.clientX, e.clientY));
         };
-        const up = (e) => {
+        const cleanup = (e) => {
             target.releasePointerCapture(e.pointerId);
             target.removeEventListener('pointermove', move);
-            target.removeEventListener('pointerup', up);
+            target.removeEventListener('pointerup', cleanup);
+            target.removeEventListener('pointercancel', cleanup);
             const snap = this.snapTarget();
             this.snapTarget.set(null);
             if (snap) {
@@ -316,7 +382,14 @@ class WrWindow {
             this.moved.emit({ x: this.x_(), y: this.y_() });
         };
         target.addEventListener('pointermove', move);
-        target.addEventListener('pointerup', up);
+        target.addEventListener('pointerup', cleanup);
+        // `pointercancel` is never followed by a `pointerup` (a pen leaving range, a
+        // long-press menu, an OS gesture taking over), so without this the move
+        // listener outlived the drag on a chrome element that lives as long as the
+        // component: every later hover over the title bar dragged the window.
+        // The cancelled gesture's geometry is kept rather than rolled back, so
+        // `moved` still reports where the window ended up.
+        target.addEventListener('pointercancel', cleanup);
     }
     /** Map a cursor position to a snap target, honouring `[snap]`. */
     detectSnapTarget(clientX, clientY) {
@@ -444,14 +517,18 @@ class WrWindow {
             this.height_.set(clampedH);
             this.clampToViewport();
         };
-        const up = (e) => {
+        const cleanup = (e) => {
             target.releasePointerCapture(e.pointerId);
             target.removeEventListener('pointermove', move);
-            target.removeEventListener('pointerup', up);
+            target.removeEventListener('pointerup', cleanup);
+            target.removeEventListener('pointercancel', cleanup);
             this.resized.emit({ width: this.width_(), height: this.height_() });
         };
         target.addEventListener('pointermove', move);
-        target.addEventListener('pointerup', up);
+        target.addEventListener('pointerup', cleanup);
+        // Same cancelled-gesture leak as `startMove` — a resize handle that is
+        // still listening for `pointermove` resizes the window on a bare hover.
+        target.addEventListener('pointercancel', cleanup);
     }
     // Bound resize handlers for the template — avoids inline object literals
     // re-creating on every change-detection tick.
@@ -495,10 +572,10 @@ class WrWindow {
         this.x_.set(clamp(this.x_(), MIN_ON_VIEWPORT - w, vw - MIN_ON_VIEWPORT));
         this.y_.set(clamp(this.y_(), 0, vh - MIN_ON_VIEWPORT));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrWindow, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrWindow, isStandalone: true, selector: "wr-window", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, initialX: { classPropertyName: "initialX", publicName: "initialX", isSignal: true, isRequired: false, transformFunction: null }, initialY: { classPropertyName: "initialY", publicName: "initialY", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, initialWidth: { classPropertyName: "initialWidth", publicName: "initialWidth", isSignal: true, isRequired: false, transformFunction: null }, initialHeight: { classPropertyName: "initialHeight", publicName: "initialHeight", isSignal: true, isRequired: false, transformFunction: null }, os: { classPropertyName: "os", publicName: "os", isSignal: true, isRequired: false, transformFunction: null }, chromeSize: { classPropertyName: "chromeSize", publicName: "chromeSize", isSignal: true, isRequired: false, transformFunction: null }, animations: { classPropertyName: "animations", publicName: "animations", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, movable: { classPropertyName: "movable", publicName: "movable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, keepInViewport: { classPropertyName: "keepInViewport", publicName: "keepInViewport", isSignal: true, isRequired: false, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null }, showMinimize: { classPropertyName: "showMinimize", publicName: "showMinimize", isSignal: true, isRequired: false, transformFunction: null }, showMaximize: { classPropertyName: "showMaximize", publicName: "showMaximize", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", state: "stateChange", closed: "closed", moved: "moved", resized: "resized" }, host: { attributes: { "role": "dialog" }, listeners: { "pointerdown": "focusWindow()" }, properties: { "class": "classes()", "style.left.px": "x()", "style.top.px": "y()", "style.width.px": "width()", "style.height.px": "height()", "style.z-index": "z()", "attr.aria-hidden": "!open()", "attr.aria-labelledby": "titleId" } }, ngImport: i0, template: "<div class=\"wr-window__chrome\" (pointerdown)=\"startMove($event)\" (dblclick)=\"showMaximize() && maximize()\">\n  <div class=\"wr-window__title\" [attr.id]=\"titleId\">{{ title() }}</div>\n  <div class=\"wr-window__title-extra\">\n    <ng-content select=\"[wrWindowTitleExtra]\" />\n  </div>\n\n  <div class=\"wr-window__chrome-actions\">\n    @if (resolvedOs() === 'macos') {\n      <!-- macOS-style traffic-light cluster: close \u2192 minimize \u2192 maximize.\n           Glyphs (\u00D7, \u2212, +) appear on cluster hover. -->\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          aria-label=\"Close\"\n          (click)=\"close()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path\n              d=\"M2.2 2.2 L7.8 7.8 M7.8 2.2 L2.2 7.8\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.4\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </button>\n      }\n      @if (showMinimize()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"state() === 'minimized' ? 'Restore' : 'Minimize'\"\n          (click)=\"minimize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <line x1=\"2\" y1=\"5\" x2=\"8\" y2=\"5\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n      @if (showMaximize()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"state() === 'maximized' ? 'Restore down' : 'Maximize'\"\n          (click)=\"maximize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            @if (state() === 'maximized') {\n              <path\n                d=\"M3 1 L1 1 L1 3 M7 1 L9 1 L9 3 M1 7 L1 9 L3 9 M9 7 L9 9 L7 9\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.4\"\n                stroke-linecap=\"round\"\n                fill=\"none\"\n              />\n            } @else {\n              <path d=\"M2 5 L8 5 M5 2 L5 8\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n            }\n          </svg>\n        </button>\n      }\n    } @else {\n      <!-- Windows / Linux glyph buttons -->\n      @if (resolvedOs() !== 'linux' && showMinimize()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"state() === 'minimized' ? 'Restore' : 'Minimize'\"\n          (click)=\"minimize()\"\n        >\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <line x1=\"1\" y1=\"8\" x2=\"9\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n\n      @if (resolvedOs() !== 'linux' && showMaximize()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"state() === 'maximized' ? 'Restore down' : 'Maximize'\"\n          (click)=\"maximize()\"\n        >\n          @if (state() === 'maximized') {\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <rect x=\"1.5\" y=\"2.5\" width=\"6\" height=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n              <rect x=\"3\" y=\"1\" width=\"6\" height=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n            </svg>\n          } @else {\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <rect x=\"1\" y=\"1\" width=\"8\" height=\"8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n            </svg>\n          }\n        </button>\n      }\n\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          aria-label=\"Close\"\n          (click)=\"close()\"\n        >\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n    }\n  </div>\n</div>\n\n<div class=\"wr-window__body\">\n  <ng-content />\n</div>\n\n<div class=\"wr-window__status-bar\">\n  <ng-content select=\"[wrWindowStatusBar]\" />\n</div>\n\n@if (resizable() && state() === 'normal') {\n  <span class=\"wr-window__handle wr-window__handle--t\" (pointerdown)=\"resizeT($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--r\" (pointerdown)=\"resizeR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--b\" (pointerdown)=\"resizeB($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--l\" (pointerdown)=\"resizeL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tl\" (pointerdown)=\"resizeTL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tr\" (pointerdown)=\"resizeTR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--bl\" (pointerdown)=\"resizeBL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--br\" (pointerdown)=\"resizeBR($event)\"></span>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrWindow, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: WrWindow, isStandalone: true, selector: "wr-window", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, initialX: { classPropertyName: "initialX", publicName: "initialX", isSignal: true, isRequired: false, transformFunction: null }, initialY: { classPropertyName: "initialY", publicName: "initialY", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, initialWidth: { classPropertyName: "initialWidth", publicName: "initialWidth", isSignal: true, isRequired: false, transformFunction: null }, initialHeight: { classPropertyName: "initialHeight", publicName: "initialHeight", isSignal: true, isRequired: false, transformFunction: null }, os: { classPropertyName: "os", publicName: "os", isSignal: true, isRequired: false, transformFunction: null }, chromeSize: { classPropertyName: "chromeSize", publicName: "chromeSize", isSignal: true, isRequired: false, transformFunction: null }, animations: { classPropertyName: "animations", publicName: "animations", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, movable: { classPropertyName: "movable", publicName: "movable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, keepInViewport: { classPropertyName: "keepInViewport", publicName: "keepInViewport", isSignal: true, isRequired: false, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null }, showMinimize: { classPropertyName: "showMinimize", publicName: "showMinimize", isSignal: true, isRequired: false, transformFunction: null }, showMaximize: { classPropertyName: "showMaximize", publicName: "showMaximize", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", state: "stateChange", closed: "closed", moved: "moved", resized: "resized" }, host: { attributes: { "role": "dialog" }, listeners: { "pointerdown": "focusWindow()" }, properties: { "class": "classes()", "style.left.px": "x()", "style.top.px": "y()", "style.width.px": "width()", "style.height.px": "height()", "style.z-index": "z()", "attr.aria-hidden": "!open()", "attr.aria-labelledby": "titleId" } }, ngImport: i0, template: "<!--\n  The double-click gate is `!== false`, NOT `maximizeVisible()`, and the\n  difference is a window nobody can get out of. The Linux preset hides the\n  maximize BUTTON; the gesture is how GNOME maximizes, and it worked on every\n  chrome before this input went tri-state. Gating it on button visibility would\n  have killed it there \u2014 and `maximized` is reachable on Linux with no button at\n  all (a snap to the top edge, `ref.maximize()`, a restored layout), after which\n  every exit disappears at once: no restore-down button, no minimize button,\n  `startMove` refuses while the state is not `normal`, the resize handles are not\n  rendered, and the only key the window listens for is Escape, which closes it.\n  An explicit `showMaximize: false` still turns the gesture off everywhere.\n-->\n<div class=\"wr-window__chrome\" (pointerdown)=\"startMove($event)\" (dblclick)=\"showMaximize() !== false && maximize()\">\n  <div class=\"wr-window__title\" [attr.id]=\"titleId\">{{ title() }}</div>\n  <div class=\"wr-window__title-extra\">\n    <ng-content select=\"[wrWindowTitleExtra]\" />\n  </div>\n\n  <div class=\"wr-window__chrome-actions\">\n    @if (resolvedOs() === 'macos') {\n      <!-- macOS-style traffic-light cluster: close \u2192 minimize \u2192 maximize.\n           Glyphs (\u00D7, \u2212, +) appear on cluster hover. -->\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path\n              d=\"M2.2 2.2 L7.8 7.8 M7.8 2.2 L2.2 7.8\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.4\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </button>\n      }\n      @if (minimizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"minimizeActionLabel()\"\n          (click)=\"minimize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <line x1=\"2\" y1=\"5\" x2=\"8\" y2=\"5\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n      @if (maximizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"maximizeActionLabel()\"\n          (click)=\"maximize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            @if (state() === 'maximized') {\n              <path\n                d=\"M3 1 L1 1 L1 3 M7 1 L9 1 L9 3 M1 7 L1 9 L3 9 M9 7 L9 9 L7 9\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.4\"\n                stroke-linecap=\"round\"\n                fill=\"none\"\n              />\n            } @else {\n              <path d=\"M2 5 L8 5 M5 2 L5 8\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n            }\n          </svg>\n        </button>\n      }\n    } @else {\n      <!-- Windows / Linux glyph buttons. Linux hides minimize and maximize by\n           DEFAULT, not by rule: `minimizeVisible()` resolves the input first, so\n           `[showMinimize]=\"true\"` puts the button back \u2014 which is the only way a\n           user on Linux can reach `<wr-window-taskbar>` at all. -->\n      @if (minimizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"minimizeActionLabel()\"\n          (click)=\"minimize()\"\n        >\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <line x1=\"1\" y1=\"8\" x2=\"9\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n\n      @if (maximizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"maximizeActionLabel()\"\n          (click)=\"maximize()\"\n        >\n          @if (state() === 'maximized') {\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <rect x=\"1.5\" y=\"2.5\" width=\"6\" height=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n              <rect x=\"3\" y=\"1\" width=\"6\" height=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n            </svg>\n          } @else {\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <rect x=\"1\" y=\"1\" width=\"8\" height=\"8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n            </svg>\n          }\n        </button>\n      }\n\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close()\"\n        >\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n    }\n  </div>\n</div>\n\n<div class=\"wr-window__body\">\n  <ng-content />\n</div>\n\n<div class=\"wr-window__status-bar\">\n  <ng-content select=\"[wrWindowStatusBar]\" />\n</div>\n\n@if (resizable() && state() === 'normal') {\n  <span class=\"wr-window__handle wr-window__handle--t\" (pointerdown)=\"resizeT($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--r\" (pointerdown)=\"resizeR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--b\" (pointerdown)=\"resizeB($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--l\" (pointerdown)=\"resizeL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tl\" (pointerdown)=\"resizeTL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tr\" (pointerdown)=\"resizeTR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--bl\" (pointerdown)=\"resizeBL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--br\" (pointerdown)=\"resizeBR($event)\"></span>\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrWindow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrWindow, decorators: [{
             type: Component,
             args: [{ selector: 'wr-window', encapsulation: ViewEncapsulation.None, host: {
                         role: 'dialog',
@@ -511,7 +588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         '[attr.aria-hidden]': '!open()',
                         '[attr.aria-labelledby]': 'titleId',
                         '(pointerdown)': 'focusWindow()',
-                    }, template: "<div class=\"wr-window__chrome\" (pointerdown)=\"startMove($event)\" (dblclick)=\"showMaximize() && maximize()\">\n  <div class=\"wr-window__title\" [attr.id]=\"titleId\">{{ title() }}</div>\n  <div class=\"wr-window__title-extra\">\n    <ng-content select=\"[wrWindowTitleExtra]\" />\n  </div>\n\n  <div class=\"wr-window__chrome-actions\">\n    @if (resolvedOs() === 'macos') {\n      <!-- macOS-style traffic-light cluster: close \u2192 minimize \u2192 maximize.\n           Glyphs (\u00D7, \u2212, +) appear on cluster hover. -->\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          aria-label=\"Close\"\n          (click)=\"close()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path\n              d=\"M2.2 2.2 L7.8 7.8 M7.8 2.2 L2.2 7.8\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.4\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </button>\n      }\n      @if (showMinimize()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"state() === 'minimized' ? 'Restore' : 'Minimize'\"\n          (click)=\"minimize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <line x1=\"2\" y1=\"5\" x2=\"8\" y2=\"5\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n      @if (showMaximize()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"state() === 'maximized' ? 'Restore down' : 'Maximize'\"\n          (click)=\"maximize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            @if (state() === 'maximized') {\n              <path\n                d=\"M3 1 L1 1 L1 3 M7 1 L9 1 L9 3 M1 7 L1 9 L3 9 M9 7 L9 9 L7 9\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.4\"\n                stroke-linecap=\"round\"\n                fill=\"none\"\n              />\n            } @else {\n              <path d=\"M2 5 L8 5 M5 2 L5 8\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n            }\n          </svg>\n        </button>\n      }\n    } @else {\n      <!-- Windows / Linux glyph buttons -->\n      @if (resolvedOs() !== 'linux' && showMinimize()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"state() === 'minimized' ? 'Restore' : 'Minimize'\"\n          (click)=\"minimize()\"\n        >\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <line x1=\"1\" y1=\"8\" x2=\"9\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n\n      @if (resolvedOs() !== 'linux' && showMaximize()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"state() === 'maximized' ? 'Restore down' : 'Maximize'\"\n          (click)=\"maximize()\"\n        >\n          @if (state() === 'maximized') {\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <rect x=\"1.5\" y=\"2.5\" width=\"6\" height=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n              <rect x=\"3\" y=\"1\" width=\"6\" height=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n            </svg>\n          } @else {\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <rect x=\"1\" y=\"1\" width=\"8\" height=\"8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n            </svg>\n          }\n        </button>\n      }\n\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          aria-label=\"Close\"\n          (click)=\"close()\"\n        >\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n    }\n  </div>\n</div>\n\n<div class=\"wr-window__body\">\n  <ng-content />\n</div>\n\n<div class=\"wr-window__status-bar\">\n  <ng-content select=\"[wrWindowStatusBar]\" />\n</div>\n\n@if (resizable() && state() === 'normal') {\n  <span class=\"wr-window__handle wr-window__handle--t\" (pointerdown)=\"resizeT($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--r\" (pointerdown)=\"resizeR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--b\" (pointerdown)=\"resizeB($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--l\" (pointerdown)=\"resizeL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tl\" (pointerdown)=\"resizeTL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tr\" (pointerdown)=\"resizeTR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--bl\" (pointerdown)=\"resizeBL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--br\" (pointerdown)=\"resizeBR($event)\"></span>\n}\n" }]
+                    }, template: "<!--\n  The double-click gate is `!== false`, NOT `maximizeVisible()`, and the\n  difference is a window nobody can get out of. The Linux preset hides the\n  maximize BUTTON; the gesture is how GNOME maximizes, and it worked on every\n  chrome before this input went tri-state. Gating it on button visibility would\n  have killed it there \u2014 and `maximized` is reachable on Linux with no button at\n  all (a snap to the top edge, `ref.maximize()`, a restored layout), after which\n  every exit disappears at once: no restore-down button, no minimize button,\n  `startMove` refuses while the state is not `normal`, the resize handles are not\n  rendered, and the only key the window listens for is Escape, which closes it.\n  An explicit `showMaximize: false` still turns the gesture off everywhere.\n-->\n<div class=\"wr-window__chrome\" (pointerdown)=\"startMove($event)\" (dblclick)=\"showMaximize() !== false && maximize()\">\n  <div class=\"wr-window__title\" [attr.id]=\"titleId\">{{ title() }}</div>\n  <div class=\"wr-window__title-extra\">\n    <ng-content select=\"[wrWindowTitleExtra]\" />\n  </div>\n\n  <div class=\"wr-window__chrome-actions\">\n    @if (resolvedOs() === 'macos') {\n      <!-- macOS-style traffic-light cluster: close \u2192 minimize \u2192 maximize.\n           Glyphs (\u00D7, \u2212, +) appear on cluster hover. -->\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path\n              d=\"M2.2 2.2 L7.8 7.8 M7.8 2.2 L2.2 7.8\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.4\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </button>\n      }\n      @if (minimizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"minimizeActionLabel()\"\n          (click)=\"minimize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <line x1=\"2\" y1=\"5\" x2=\"8\" y2=\"5\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n      @if (maximizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"maximizeActionLabel()\"\n          (click)=\"maximize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            @if (state() === 'maximized') {\n              <path\n                d=\"M3 1 L1 1 L1 3 M7 1 L9 1 L9 3 M1 7 L1 9 L3 9 M9 7 L9 9 L7 9\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.4\"\n                stroke-linecap=\"round\"\n                fill=\"none\"\n              />\n            } @else {\n              <path d=\"M2 5 L8 5 M5 2 L5 8\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n            }\n          </svg>\n        </button>\n      }\n    } @else {\n      <!-- Windows / Linux glyph buttons. Linux hides minimize and maximize by\n           DEFAULT, not by rule: `minimizeVisible()` resolves the input first, so\n           `[showMinimize]=\"true\"` puts the button back \u2014 which is the only way a\n           user on Linux can reach `<wr-window-taskbar>` at all. -->\n      @if (minimizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"minimizeActionLabel()\"\n          (click)=\"minimize()\"\n        >\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <line x1=\"1\" y1=\"8\" x2=\"9\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n\n      @if (maximizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"maximizeActionLabel()\"\n          (click)=\"maximize()\"\n        >\n          @if (state() === 'maximized') {\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <rect x=\"1.5\" y=\"2.5\" width=\"6\" height=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n              <rect x=\"3\" y=\"1\" width=\"6\" height=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n            </svg>\n          } @else {\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <rect x=\"1\" y=\"1\" width=\"8\" height=\"8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n            </svg>\n          }\n        </button>\n      }\n\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close()\"\n        >\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n    }\n  </div>\n</div>\n\n<div class=\"wr-window__body\">\n  <ng-content />\n</div>\n\n<div class=\"wr-window__status-bar\">\n  <ng-content select=\"[wrWindowStatusBar]\" />\n</div>\n\n@if (resizable() && state() === 'normal') {\n  <span class=\"wr-window__handle wr-window__handle--t\" (pointerdown)=\"resizeT($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--r\" (pointerdown)=\"resizeR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--b\" (pointerdown)=\"resizeB($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--l\" (pointerdown)=\"resizeL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tl\" (pointerdown)=\"resizeTL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tr\" (pointerdown)=\"resizeTR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--bl\" (pointerdown)=\"resizeBL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--br\" (pointerdown)=\"resizeBR($event)\"></span>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }, { type: i0.Output, args: ["stateChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], initialX: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialX", required: false }] }], initialY: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialY", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], initialWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialWidth", required: false }] }], initialHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialHeight", required: false }] }], os: [{ type: i0.Input, args: [{ isSignal: true, alias: "os", required: false }] }], chromeSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "chromeSize", required: false }] }], animations: [{ type: i0.Input, args: [{ isSignal: true, alias: "animations", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], movable: [{ type: i0.Input, args: [{ isSignal: true, alias: "movable", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], keepInViewport: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepInViewport", required: false }] }], snap: [{ type: i0.Input, args: [{ isSignal: true, alias: "snap", required: false }] }], dragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragHandle", required: false }] }], showMinimize: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMinimize", required: false }] }], showMaximize: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMaximize", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], moved: [{ type: i0.Output, args: ["moved"] }], resized: [{ type: i0.Output, args: ["resized"] }] } });
 
 /** Coalesce live position/size writes — drag/resize fires every move. */
@@ -669,12 +746,12 @@ class WrWindowContainer {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrWindowContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrWindowContainer, isStandalone: true, selector: "wr-window-container", viewQueries: [{ propertyName: "contentVcr", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "wrWindow", first: true, predicate: WrWindow, descendants: true, isSignal: true }], ngImport: i0, template: "<wr-window\n  [open]=\"true\"\n  [title]=\"ref.title()\"\n  [os]=\"config.os ?? 'auto'\"\n  [size]=\"config.size ?? 'md'\"\n  [chromeSize]=\"config.chromeSize ?? 'normal'\"\n  [animations]=\"config.animations ?? true\"\n  [initialX]=\"config.x ?? null\"\n  [initialY]=\"config.y ?? null\"\n  [initialWidth]=\"config.width ?? null\"\n  [initialHeight]=\"config.height ?? null\"\n  [minWidth]=\"config.minWidth ?? 220\"\n  [minHeight]=\"config.minHeight ?? 140\"\n  [maxWidth]=\"config.maxWidth ?? 1000000\"\n  [maxHeight]=\"config.maxHeight ?? 1000000\"\n  [movable]=\"config.movable ?? true\"\n  [resizable]=\"config.resizable ?? true\"\n  [keepInViewport]=\"config.keepInViewport ?? true\"\n  [snap]=\"config.snap ?? 'none'\"\n  [dragHandle]=\"config.dragHandle ?? null\"\n  [showMinimize]=\"config.showMinimize ?? true\"\n  [showMaximize]=\"config.showMaximize ?? true\"\n  [showClose]=\"config.showClose ?? true\"\n  (closed)=\"ref.close()\"\n  #window\n>\n  <ng-container #content />\n</wr-window>\n\n@if (window.snapTarget(); as target) {\n  <div class=\"wr-window__snap-hint\" [attr.data-target]=\"target\" aria-hidden=\"true\"></div>\n}\n", dependencies: [{ kind: "component", type: WrWindow, selector: "wr-window", inputs: ["open", "state", "title", "initialX", "initialY", "size", "initialWidth", "initialHeight", "os", "chromeSize", "animations", "minWidth", "minHeight", "maxWidth", "maxHeight", "movable", "resizable", "keepInViewport", "snap", "dragHandle", "showMinimize", "showMaximize", "showClose"], outputs: ["openChange", "stateChange", "closed", "moved", "resized"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrWindowContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: WrWindowContainer, isStandalone: true, selector: "wr-window-container", viewQueries: [{ propertyName: "contentVcr", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "wrWindow", first: true, predicate: WrWindow, descendants: true, isSignal: true }], ngImport: i0, template: "<wr-window\n  [open]=\"true\"\n  [title]=\"ref.title()\"\n  [os]=\"config.os ?? 'auto'\"\n  [size]=\"config.size ?? 'md'\"\n  [chromeSize]=\"config.chromeSize ?? 'normal'\"\n  [animations]=\"config.animations ?? true\"\n  [initialX]=\"config.x ?? null\"\n  [initialY]=\"config.y ?? null\"\n  [initialWidth]=\"config.width ?? null\"\n  [initialHeight]=\"config.height ?? null\"\n  [minWidth]=\"config.minWidth ?? 220\"\n  [minHeight]=\"config.minHeight ?? 140\"\n  [maxWidth]=\"config.maxWidth ?? 1000000\"\n  [maxHeight]=\"config.maxHeight ?? 1000000\"\n  [movable]=\"config.movable ?? true\"\n  [resizable]=\"config.resizable ?? true\"\n  [keepInViewport]=\"config.keepInViewport ?? true\"\n  [snap]=\"config.snap ?? 'none'\"\n  [dragHandle]=\"config.dragHandle ?? null\"\n  [showMinimize]=\"config.showMinimize ?? null\"\n  [showMaximize]=\"config.showMaximize ?? null\"\n  [showClose]=\"config.showClose ?? true\"\n  (closed)=\"ref.close()\"\n  #window\n>\n  <ng-container #content />\n</wr-window>\n\n@if (window.snapTarget(); as target) {\n  <div class=\"wr-window__snap-hint\" [attr.data-target]=\"target\" aria-hidden=\"true\"></div>\n}\n", dependencies: [{ kind: "component", type: WrWindow, selector: "wr-window", inputs: ["open", "state", "title", "initialX", "initialY", "size", "initialWidth", "initialHeight", "os", "chromeSize", "animations", "minWidth", "minHeight", "maxWidth", "maxHeight", "movable", "resizable", "keepInViewport", "snap", "dragHandle", "showMinimize", "showMaximize", "showClose"], outputs: ["openChange", "stateChange", "closed", "moved", "resized"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrWindowContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrWindowContainer, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-window-container', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [WrWindow], template: "<wr-window\n  [open]=\"true\"\n  [title]=\"ref.title()\"\n  [os]=\"config.os ?? 'auto'\"\n  [size]=\"config.size ?? 'md'\"\n  [chromeSize]=\"config.chromeSize ?? 'normal'\"\n  [animations]=\"config.animations ?? true\"\n  [initialX]=\"config.x ?? null\"\n  [initialY]=\"config.y ?? null\"\n  [initialWidth]=\"config.width ?? null\"\n  [initialHeight]=\"config.height ?? null\"\n  [minWidth]=\"config.minWidth ?? 220\"\n  [minHeight]=\"config.minHeight ?? 140\"\n  [maxWidth]=\"config.maxWidth ?? 1000000\"\n  [maxHeight]=\"config.maxHeight ?? 1000000\"\n  [movable]=\"config.movable ?? true\"\n  [resizable]=\"config.resizable ?? true\"\n  [keepInViewport]=\"config.keepInViewport ?? true\"\n  [snap]=\"config.snap ?? 'none'\"\n  [dragHandle]=\"config.dragHandle ?? null\"\n  [showMinimize]=\"config.showMinimize ?? true\"\n  [showMaximize]=\"config.showMaximize ?? true\"\n  [showClose]=\"config.showClose ?? true\"\n  (closed)=\"ref.close()\"\n  #window\n>\n  <ng-container #content />\n</wr-window>\n\n@if (window.snapTarget(); as target) {\n  <div class=\"wr-window__snap-hint\" [attr.data-target]=\"target\" aria-hidden=\"true\"></div>\n}\n" }]
+            args: [{ selector: 'wr-window-container', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [WrWindow], template: "<wr-window\n  [open]=\"true\"\n  [title]=\"ref.title()\"\n  [os]=\"config.os ?? 'auto'\"\n  [size]=\"config.size ?? 'md'\"\n  [chromeSize]=\"config.chromeSize ?? 'normal'\"\n  [animations]=\"config.animations ?? true\"\n  [initialX]=\"config.x ?? null\"\n  [initialY]=\"config.y ?? null\"\n  [initialWidth]=\"config.width ?? null\"\n  [initialHeight]=\"config.height ?? null\"\n  [minWidth]=\"config.minWidth ?? 220\"\n  [minHeight]=\"config.minHeight ?? 140\"\n  [maxWidth]=\"config.maxWidth ?? 1000000\"\n  [maxHeight]=\"config.maxHeight ?? 1000000\"\n  [movable]=\"config.movable ?? true\"\n  [resizable]=\"config.resizable ?? true\"\n  [keepInViewport]=\"config.keepInViewport ?? true\"\n  [snap]=\"config.snap ?? 'none'\"\n  [dragHandle]=\"config.dragHandle ?? null\"\n  [showMinimize]=\"config.showMinimize ?? null\"\n  [showMaximize]=\"config.showMaximize ?? null\"\n  [showClose]=\"config.showClose ?? true\"\n  (closed)=\"ref.close()\"\n  #window\n>\n  <ng-container #content />\n</wr-window>\n\n@if (window.snapTarget(); as target) {\n  <div class=\"wr-window__snap-hint\" [attr.data-target]=\"target\" aria-hidden=\"true\"></div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { contentVcr: [{ type: i0.ViewChild, args: ['content', { ...{ read: ViewContainerRef }, isSignal: true }] }], wrWindow: [{ type: i0.ViewChild, args: [i0.forwardRef(() => WrWindow), { isSignal: true }] }] } });
 
 /**
@@ -802,18 +879,36 @@ class WrWindowRef {
         return this.componentRef.instance;
     }
     // Lifecycle
+    isClosed = false;
     /**
      * Close the window, optionally returning a result. If a `beforeClose`
      * hook is registered it is consulted first — a falsy resolution
      * cancels the close.
      */
     async close(result) {
-        if (this._beforeCloseHook) {
-            const ok = await this._beforeCloseHook(result);
-            if (!ok)
-                return;
+        // `WrDialogRef` / `WrDrawerRef` latch the same way on their own `isClosed`,
+        // but theirs are synchronous: this is the only one of the three that AWAITS,
+        // so it is the
+        // only one a second call can enter mid-flight and run the hook again. Two
+        // Escapes in a row do it, and so does `manager.closeAll()` while a hook is
+        // pending — `_doClose` is what removes the ref from the manager's list, and
+        // it has not run yet.
+        if (this.isClosed)
+            return;
+        this.isClosed = true;
+        let proceed = false;
+        try {
+            proceed = this._beforeCloseHook ? !!(await this._beforeCloseHook(result)) : true;
+        }
+        finally {
+            // A veto is not a close, and neither is a hook that threw — release the
+            // latch in both cases, or a declined close would disable the window for
+            // good.
+            if (!proceed)
+                this.isClosed = false;
         }
-        this._doClose?.(result);
+        if (proceed)
+            this._doClose?.(result);
     }
     /** Toggle the minimized state. */
     minimize() {
@@ -962,6 +1057,9 @@ class WrWindowManager {
                 title: pending.title || config.title,
             };
         }
+        // Assigned right after the ref exists; the predicate below only ever runs
+        // from a keydown, long after.
+        let self = null;
         // Each window gets its own CDK overlay pane positioned `static` —
         // <wr-window> itself uses `position: fixed`, so the pane is only a
         // mount point. Windows are never modal — reach for `WrDialog` when
@@ -970,6 +1068,15 @@ class WrWindowManager {
             positionStrategy: this.overlay.position().global(),
             panelClass: 'wr-window-overlay',
             hasBackdrop: false,
+            // Which window an Escape belongs to is a question the CDK cannot answer
+            // here. Its keyboard dispatcher walks the attached overlays newest-first
+            // and hands the key to the first one willing to take it — and attach order
+            // is frozen at OPEN order, because `focus()` re-stacks with a z-index and
+            // never re-attaches. So the last window opened swallowed every Escape,
+            // even sitting behind the one the user was in. Declining here is what makes
+            // it recoverable: a rejected event walks on down the stack instead of being
+            // eaten, so the window that does own it still gets its Escape.
+            eventPredicate: () => self === null || this.ownsKeyboard(self),
             // OUT of the top layer, deliberately. The CDK puts overlay hosts there by
             // default (`popover="manual"`), and the top layer orders strictly by
             // ENTRY: whatever opened last paints on top and no z-index can change it.
@@ -982,6 +1089,7 @@ class WrWindowManager {
         });
         const id = config.id ?? randomId('wr-window');
         const ref = new WrWindowRef(id, overlayRef);
+        self = ref;
         ref.taskbarVisible = config.taskbar !== false;
         // Provide WR_WINDOW_REF + WR_WINDOW_DATA inside the projected
         // component's subtree so it can `inject(WR_WINDOW_REF)` etc.
@@ -1029,6 +1137,24 @@ class WrWindowManager {
         }
         return ref;
     }
+    /**
+     * Whether a keyboard event routed to `ref`'s overlay is actually meant for it.
+     *
+     * The window holding real DOM focus owns the key. When focus is outside every
+     * window — the common case, since a window is not modal and traps nothing —
+     * the FRONT-most one does, by the manager's own z stack rather than by attach
+     * order. A tie (nothing has ever been focused, so no z has been handed out
+     * yet) leaves every window willing, and the dispatcher's newest-first walk
+     * settles it as before.
+     */
+    ownsKeyboard(ref) {
+        const open = this._windows();
+        const active = this.isBrowser ? document.activeElement : null;
+        const focused = active ? open.find(w => w._overlayRef.overlayElement?.contains(active)) : undefined;
+        if (focused)
+            return focused === ref;
+        return open.every(w => w === ref || w.z() <= ref.z());
+    }
     /** Close every programmatically-opened window. */
     closeAll() {
         for (const ref of [...this._windows()]) {
@@ -1144,10 +1270,10 @@ class WrWindowManager {
     clearLayout(name) {
         this.storage.remove(this.layoutKey(name));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrWindowManager, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.1", ngImport: i0, type: WrWindowManager });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrWindowManager, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.2", ngImport: i0, type: WrWindowManager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrWindowManager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrWindowManager, decorators: [{
             type: Service
         }] });
 
@@ -1157,6 +1283,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * 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
  */
+/**
+ * Stands in for the consumer input `useI18nText` expects — the taskbar exposes no
+ * label inputs. Read reactively rather than once at construction: the rail is as
+ * long-lived as the app, so a catalog that arrives later, or a locale switch, has to
+ * reach it.
+ */
+const NO_OVERRIDE = signal(null).asReadonly();
 /**
  * OS-style window taskbar. Drop one anywhere in the app — typically
  * fixed to the bottom of the viewport — and it lists every window
@@ -1175,6 +1308,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * @see https://ngwr.dev/reference/components/window
  */
 class WrWindowTaskbar {
+    // Four English literals lived in this component's markup, next to a catalog that
+    // already carried `window.close`. A `toolbar` with no name and tabs announced in
+    // the wrong language are both invisible on screen.
+    /** @internal */ railLabel = useI18nText(NO_OVERRIDE, 'window.taskbar', 'Minimized windows');
+    /** @internal */ closeLabel = useI18nText(NO_OVERRIDE, 'window.closeWindow', 'Close window');
+    /** @internal */ untitled = useI18nText(NO_OVERRIDE, 'window.untitled', 'Untitled');
+    /** @internal */ restoreLabel = useI18nFormatter('window.restoreWindow', 'Restore {{title}}');
     /** Edge the taskbar pins itself to. @default 'bottom' */
     position = input('bottom', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
@@ -1184,6 +1324,10 @@ class WrWindowTaskbar {
     ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     classes = computed(() => `wr-window-taskbar wr-window-taskbar--${this.position()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    /** A window with no title still needs a name in the rail. */
+    tabTitle(ref) {
+        return ref.title() || this.untitled();
+    }
     restore(ref) {
         ref.restore();
         ref.focus();
@@ -1192,12 +1336,12 @@ class WrWindowTaskbar {
         event.stopPropagation();
         void ref.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrWindowTaskbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrWindowTaskbar, isStandalone: true, selector: "wr-window-taskbar", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar", "aria-label": "Minimized windows" }, properties: { "class": "classes()" } }, ngImport: i0, template: "@if (items().length > 0) {\n  <div class=\"wr-window-taskbar__rail\">\n    @for (ref of items(); track ref.id) {\n      <button\n        type=\"button\"\n        class=\"wr-window-taskbar__tab\"\n        [attr.aria-label]=\"`Restore ${ref.title() || 'Untitled'}`\"\n        (click)=\"restore(ref)\"\n      >\n        <span class=\"wr-window-taskbar__tab-title\">{{ ref.title() || 'Untitled' }}</span>\n        <span\n          class=\"wr-window-taskbar__tab-close\"\n          role=\"button\"\n          tabindex=\"0\"\n          aria-label=\"Close window\"\n          (click)=\"close(ref, $event)\"\n          (keydown.enter)=\"close(ref, $event)\"\n        >\n          <svg width=\"9\" height=\"9\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </span>\n      </button>\n    }\n  </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrWindowTaskbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: WrWindowTaskbar, isStandalone: true, selector: "wr-window-taskbar", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar" }, properties: { "class": "classes()", "attr.aria-label": "railLabel()" } }, ngImport: i0, template: "@if (items().length > 0) {\n  <div class=\"wr-window-taskbar__rail\">\n    @for (ref of items(); track ref.id) {\n      <!--\n        Two SIBLING buttons in a plain container, not a close button nested\n        inside the tab. The close used to be a `role=\"button\"` span with\n        `tabindex=\"0\"` inside the tab's own `<button>` \u2014 interactive content\n        inside interactive content, which the HTML parser and `nested-interactive`\n        both object to. Nothing caught it: a taskbar tab exists only while a\n        window is minimized, and the a11y sweep reads prerendered HTML, where the\n        rail is not rendered at all.\n      -->\n      <div class=\"wr-window-taskbar__tab\">\n        <button\n          type=\"button\"\n          class=\"wr-window-taskbar__tab-restore\"\n          [attr.aria-label]=\"restoreLabel({ title: tabTitle(ref) })\"\n          (click)=\"restore(ref)\"\n        >\n          <span class=\"wr-window-taskbar__tab-title\">{{ tabTitle(ref) }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"wr-window-taskbar__tab-close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close(ref, $event)\"\n        >\n          <svg width=\"9\" height=\"9\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      </div>\n    }\n  </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrWindowTaskbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrWindowTaskbar, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-window-taskbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()', role: 'toolbar', 'aria-label': 'Minimized windows' }, template: "@if (items().length > 0) {\n  <div class=\"wr-window-taskbar__rail\">\n    @for (ref of items(); track ref.id) {\n      <button\n        type=\"button\"\n        class=\"wr-window-taskbar__tab\"\n        [attr.aria-label]=\"`Restore ${ref.title() || 'Untitled'}`\"\n        (click)=\"restore(ref)\"\n      >\n        <span class=\"wr-window-taskbar__tab-title\">{{ ref.title() || 'Untitled' }}</span>\n        <span\n          class=\"wr-window-taskbar__tab-close\"\n          role=\"button\"\n          tabindex=\"0\"\n          aria-label=\"Close window\"\n          (click)=\"close(ref, $event)\"\n          (keydown.enter)=\"close(ref, $event)\"\n        >\n          <svg width=\"9\" height=\"9\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </span>\n      </button>\n    }\n  </div>\n}\n" }]
+            args: [{ selector: 'wr-window-taskbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()', role: 'toolbar', '[attr.aria-label]': 'railLabel()' }, template: "@if (items().length > 0) {\n  <div class=\"wr-window-taskbar__rail\">\n    @for (ref of items(); track ref.id) {\n      <!--\n        Two SIBLING buttons in a plain container, not a close button nested\n        inside the tab. The close used to be a `role=\"button\"` span with\n        `tabindex=\"0\"` inside the tab's own `<button>` \u2014 interactive content\n        inside interactive content, which the HTML parser and `nested-interactive`\n        both object to. Nothing caught it: a taskbar tab exists only while a\n        window is minimized, and the a11y sweep reads prerendered HTML, where the\n        rail is not rendered at all.\n      -->\n      <div class=\"wr-window-taskbar__tab\">\n        <button\n          type=\"button\"\n          class=\"wr-window-taskbar__tab-restore\"\n          [attr.aria-label]=\"restoreLabel({ title: tabTitle(ref) })\"\n          (click)=\"restore(ref)\"\n        >\n          <span class=\"wr-window-taskbar__tab-title\">{{ tabTitle(ref) }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"wr-window-taskbar__tab-close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close(ref, $event)\"\n        >\n          <svg width=\"9\" height=\"9\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      </div>\n    }\n  </div>\n}\n" }]
         }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
 
 // `WrWindow` itself is NOT exported. Windows are opened through