@wildmason/aegis 1.12.0 → 1.14.0

package/dist/fesm2022/wildmason-aegis.mjs

@@ -1,12 +1,13 @@
 import { CdkTrapFocus } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { input, output, HostListener, ChangeDetectionStrategy, Component, model, signal, computed, inject, ElementRef, Renderer2, ChangeDetectorRef, viewChild, effect, ViewEncapsulation, Input, Directive, contentChildren, forwardRef, ViewChild, Injectable } from '@angular/core';
-import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { input, output, HostListener, ChangeDetectionStrategy, Component, model, signal, computed, inject, ElementRef, Renderer2, ChangeDetectorRef, viewChild, effect, ViewEncapsulation, Input, Directive, contentChildren, forwardRef, ViewChild, Injectable, Injector, DestroyRef } from '@angular/core';
+import { CdkConnectedOverlay, CdkOverlayOrigin, createFlexibleConnectedPositionStrategy, createOverlayRef, createRepositionScrollStrategy } from '@angular/cdk/overlay';
 import { NgTemplateOutlet } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subject, debounceTime, switchMap, of, catchError, finalize } from 'rxjs';
 import * as i1 from '@angular/cdk/scrolling';
 import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { ComponentPortal } from '@angular/cdk/portal';
 import { invoke } from '@tauri-apps/api/core';
 
 /**
@@ -60,11 +61,11 @@ class WmModal {
             this.dismiss.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: WmModal, isStandalone: true, selector: "wm-modal", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: true, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (visible()) {\r\n  <div [class]=\"align() === 'top'\r\n      ? 'fixed inset-0 flex items-start justify-center pt-20 z-50'\r\n      : 'fixed inset-0 flex items-center justify-center z-50'\"\r\n       style=\"background: var(--wm-modal-backdrop)\"\r\n       (click)=\"dismiss.emit()\">\r\n    <!-- The trap must sit on an element this template owns, inside this `@if`, so it\r\n         has a parentNode by the time CdkTrapFocus runs ngAfterContentInit. A consumer\r\n         cannot achieve that on projected content \u2014 see the class doc. -->\r\n    <div (click)=\"$event.stopPropagation()\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: WmModal, isStandalone: true, selector: "wm-modal", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: true, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (visible()) {\n  <div [class]=\"align() === 'top'\n      ? 'fixed inset-0 flex items-start justify-center pt-20 z-50'\n      : 'fixed inset-0 flex items-center justify-center z-50'\"\n       style=\"background: var(--wm-modal-backdrop)\"\n       (click)=\"dismiss.emit()\">\n    <!-- The trap must sit on an element this template owns, inside this `@if`, so it\n         has a parentNode by the time CdkTrapFocus runs ngAfterContentInit. A consumer\n         cannot achieve that on projected content \u2014 see the class doc. -->\n    <div (click)=\"$event.stopPropagation()\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n      <ng-content />\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmModal, decorators: [{
             type: Component,
-            args: [{ selector: 'wm-modal', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkTrapFocus], template: "@if (visible()) {\r\n  <div [class]=\"align() === 'top'\r\n      ? 'fixed inset-0 flex items-start justify-center pt-20 z-50'\r\n      : 'fixed inset-0 flex items-center justify-center z-50'\"\r\n       style=\"background: var(--wm-modal-backdrop)\"\r\n       (click)=\"dismiss.emit()\">\r\n    <!-- The trap must sit on an element this template owns, inside this `@if`, so it\r\n         has a parentNode by the time CdkTrapFocus runs ngAfterContentInit. A consumer\r\n         cannot achieve that on projected content \u2014 see the class doc. -->\r\n    <div (click)=\"$event.stopPropagation()\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n}\r\n" }]
+            args: [{ selector: 'wm-modal', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkTrapFocus], template: "@if (visible()) {\n  <div [class]=\"align() === 'top'\n      ? 'fixed inset-0 flex items-start justify-center pt-20 z-50'\n      : 'fixed inset-0 flex items-center justify-center z-50'\"\n       style=\"background: var(--wm-modal-backdrop)\"\n       (click)=\"dismiss.emit()\">\n    <!-- The trap must sit on an element this template owns, inside this `@if`, so it\n         has a parentNode by the time CdkTrapFocus runs ngAfterContentInit. A consumer\n         cannot achieve that on projected content \u2014 see the class doc. -->\n    <div (click)=\"$event.stopPropagation()\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n      <ng-content />\n    </div>\n  </div>\n}\n" }]
         }], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: true }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
@@ -110,16 +111,110 @@ class WmDialog {
             this.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: WmDialog, isStandalone: true, selector: "wm-dialog", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (isOpen()) {\r\n  <!-- Backdrop \u2014 click to close -->\r\n  <div class=\"wm-dialog-backdrop\" (click)=\"close()\" aria-hidden=\"true\"></div>\r\n\r\n  <!-- Panel -->\r\n  <div\r\n    class=\"wm-dialog\"\r\n    [class]=\"'wm-dialog--' + size()\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-labelledby]=\"title() ? 'wm-dialog-title' : null\"\r\n    cdkTrapFocus\r\n    [cdkTrapFocusAutoCapture]=\"true\"\r\n  >\r\n    <div class=\"wm-dialog-header\">\r\n      <h2 class=\"wm-dialog-title\" id=\"wm-dialog-title\">{{ title() }}</h2>\r\n      <button\r\n        class=\"wm-dialog-close\"\r\n        type=\"button\"\r\n        (click)=\"close()\"\r\n        aria-label=\"Close dialog\"\r\n      >\r\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\r\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\r\n        </svg>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"wm-dialog-body\">\r\n      <ng-content select=\"[body]\" />\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.wm-dialog-backdrop{position:fixed;inset:0;background:rgba(0,0,0,var(--wm-backdrop-opacity));z-index:100}.wm-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:101;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:var(--wm-shadow-lg);width:var(--wm-dialog-width, 480px);max-width:calc(100vw - 2rem);max-height:calc(100dvh - 4rem);display:flex;flex-direction:column;overflow:hidden;outline:none}.wm-dialog--sm{width:var(--wm-dialog-width, 360px)}.wm-dialog--lg{width:var(--wm-dialog-width, 640px)}.wm-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1.125rem 1.25rem;flex-shrink:0;background:var(--wm-bg-raised)}.wm-dialog-title{font-size:1rem;font-weight:600;color:var(--wm-text-primary);margin:0;line-height:1.3}.wm-dialog-close{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;border-radius:var(--wm-radius-sm);border:none;background:transparent;color:var(--wm-text-muted);cursor:pointer;transition:background var(--wm-transition-fast),color var(--wm-transition-fast)}.wm-dialog-close:hover{background:var(--wm-bg-hover);color:var(--wm-text-primary)}.wm-dialog-close:focus-visible{outline:2px solid var(--wm-color-accent);outline-offset:1px}.wm-dialog-body{flex:1;overflow-y:auto;padding:1rem 1.25rem 1.25rem;font-size:.875rem;color:var(--wm-text-secondary);line-height:1.6}@media(prefers-reduced-motion:reduce){.wm-dialog-close{transition:none}}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: WmDialog, isStandalone: true, selector: "wm-dialog", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (isOpen()) {\n  <!-- Backdrop \u2014 click to close -->\n  <div class=\"wm-dialog-backdrop\" (click)=\"close()\" aria-hidden=\"true\"></div>\n\n  <!-- Panel -->\n  <div\n    class=\"wm-dialog\"\n    [class]=\"'wm-dialog--' + size()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-labelledby]=\"title() ? 'wm-dialog-title' : null\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\"\n  >\n    <div class=\"wm-dialog-header\">\n      <h2 class=\"wm-dialog-title\" id=\"wm-dialog-title\">{{ title() }}</h2>\n      <button\n        class=\"wm-dialog-close\"\n        type=\"button\"\n        (click)=\"close()\"\n        aria-label=\"Close dialog\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n        </svg>\n      </button>\n    </div>\n\n    <div class=\"wm-dialog-body\">\n      <ng-content select=\"[body]\" />\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.wm-dialog-backdrop{position:fixed;inset:0;background:rgba(0,0,0,var(--wm-backdrop-opacity));z-index:100}.wm-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:101;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:var(--wm-shadow-lg);width:var(--wm-dialog-width, 480px);max-width:calc(100vw - 2rem);max-height:calc(100dvh - 4rem);display:flex;flex-direction:column;overflow:hidden;outline:none}.wm-dialog--sm{width:var(--wm-dialog-width, 360px)}.wm-dialog--lg{width:var(--wm-dialog-width, 640px)}.wm-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1.125rem 1.25rem;flex-shrink:0;background:var(--wm-bg-raised)}.wm-dialog-title{font-size:1rem;font-weight:600;color:var(--wm-text-primary);margin:0;line-height:1.3}.wm-dialog-close{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;border-radius:var(--wm-radius-sm);border:none;background:transparent;color:var(--wm-text-muted);cursor:pointer;transition:background var(--wm-transition-fast),color var(--wm-transition-fast)}.wm-dialog-close:hover{background:var(--wm-bg-hover);color:var(--wm-text-primary)}.wm-dialog-close:focus-visible{outline:2px solid var(--wm-color-accent);outline-offset:1px}.wm-dialog-body{flex:1;overflow-y:auto;padding:1rem 1.25rem 1.25rem;font-size:.875rem;color:var(--wm-text-secondary);line-height:1.6}@media(prefers-reduced-motion:reduce){.wm-dialog-close{transition:none}}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'wm-dialog', imports: [CdkTrapFocus], template: "@if (isOpen()) {\r\n  <!-- Backdrop \u2014 click to close -->\r\n  <div class=\"wm-dialog-backdrop\" (click)=\"close()\" aria-hidden=\"true\"></div>\r\n\r\n  <!-- Panel -->\r\n  <div\r\n    class=\"wm-dialog\"\r\n    [class]=\"'wm-dialog--' + size()\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-labelledby]=\"title() ? 'wm-dialog-title' : null\"\r\n    cdkTrapFocus\r\n    [cdkTrapFocusAutoCapture]=\"true\"\r\n  >\r\n    <div class=\"wm-dialog-header\">\r\n      <h2 class=\"wm-dialog-title\" id=\"wm-dialog-title\">{{ title() }}</h2>\r\n      <button\r\n        class=\"wm-dialog-close\"\r\n        type=\"button\"\r\n        (click)=\"close()\"\r\n        aria-label=\"Close dialog\"\r\n      >\r\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\r\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\r\n        </svg>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"wm-dialog-body\">\r\n      <ng-content select=\"[body]\" />\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.wm-dialog-backdrop{position:fixed;inset:0;background:rgba(0,0,0,var(--wm-backdrop-opacity));z-index:100}.wm-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:101;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:var(--wm-shadow-lg);width:var(--wm-dialog-width, 480px);max-width:calc(100vw - 2rem);max-height:calc(100dvh - 4rem);display:flex;flex-direction:column;overflow:hidden;outline:none}.wm-dialog--sm{width:var(--wm-dialog-width, 360px)}.wm-dialog--lg{width:var(--wm-dialog-width, 640px)}.wm-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1.125rem 1.25rem;flex-shrink:0;background:var(--wm-bg-raised)}.wm-dialog-title{font-size:1rem;font-weight:600;color:var(--wm-text-primary);margin:0;line-height:1.3}.wm-dialog-close{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;border-radius:var(--wm-radius-sm);border:none;background:transparent;color:var(--wm-text-muted);cursor:pointer;transition:background var(--wm-transition-fast),color var(--wm-transition-fast)}.wm-dialog-close:hover{background:var(--wm-bg-hover);color:var(--wm-text-primary)}.wm-dialog-close:focus-visible{outline:2px solid var(--wm-color-accent);outline-offset:1px}.wm-dialog-body{flex:1;overflow-y:auto;padding:1rem 1.25rem 1.25rem;font-size:.875rem;color:var(--wm-text-secondary);line-height:1.6}@media(prefers-reduced-motion:reduce){.wm-dialog-close{transition:none}}\n"] }]
+            args: [{ selector: 'wm-dialog', imports: [CdkTrapFocus], template: "@if (isOpen()) {\n  <!-- Backdrop \u2014 click to close -->\n  <div class=\"wm-dialog-backdrop\" (click)=\"close()\" aria-hidden=\"true\"></div>\n\n  <!-- Panel -->\n  <div\n    class=\"wm-dialog\"\n    [class]=\"'wm-dialog--' + size()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-labelledby]=\"title() ? 'wm-dialog-title' : null\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\"\n  >\n    <div class=\"wm-dialog-header\">\n      <h2 class=\"wm-dialog-title\" id=\"wm-dialog-title\">{{ title() }}</h2>\n      <button\n        class=\"wm-dialog-close\"\n        type=\"button\"\n        (click)=\"close()\"\n        aria-label=\"Close dialog\"\n      >\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n        </svg>\n      </button>\n    </div>\n\n    <div class=\"wm-dialog-body\">\n      <ng-content select=\"[body]\" />\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.wm-dialog-backdrop{position:fixed;inset:0;background:rgba(0,0,0,var(--wm-backdrop-opacity));z-index:100}.wm-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:101;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:var(--wm-shadow-lg);width:var(--wm-dialog-width, 480px);max-width:calc(100vw - 2rem);max-height:calc(100dvh - 4rem);display:flex;flex-direction:column;overflow:hidden;outline:none}.wm-dialog--sm{width:var(--wm-dialog-width, 360px)}.wm-dialog--lg{width:var(--wm-dialog-width, 640px)}.wm-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1.125rem 1.25rem;flex-shrink:0;background:var(--wm-bg-raised)}.wm-dialog-title{font-size:1rem;font-weight:600;color:var(--wm-text-primary);margin:0;line-height:1.3}.wm-dialog-close{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;border-radius:var(--wm-radius-sm);border:none;background:transparent;color:var(--wm-text-muted);cursor:pointer;transition:background var(--wm-transition-fast),color var(--wm-transition-fast)}.wm-dialog-close:hover{background:var(--wm-bg-hover);color:var(--wm-text-primary)}.wm-dialog-close:focus-visible{outline:2px solid var(--wm-color-accent);outline-offset:1px}.wm-dialog-body{flex:1;overflow-y:auto;padding:1rem 1.25rem 1.25rem;font-size:.875rem;color:var(--wm-text-secondary);line-height:1.6}@media(prefers-reduced-motion:reduce){.wm-dialog-close{transition:none}}\n"] }]
         }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
             }] } });
 
+/**
+ * Notify a handler whenever anything that can move an anchored overlay moves.
+ *
+ * This exists because of one property of the DOM that CDK's `ScrollDispatcher`
+ * does not account for: **`scroll` does not bubble.**
+ *
+ * `ScrollDispatcher` has exactly two sources. It listens for `scroll` on the
+ * document in the *bubbling* phase, which therefore only ever hears the
+ * document itself scrolling; and it hears containers that registered
+ * themselves through a `cdkScrollable` directive. In an application shell that
+ * is a fixed-height frame with an inner scrolling element — which is every
+ * Wildmason product — the document never scrolls and nothing is registered, so
+ * both sources are empty and any scroll strategy built on the dispatcher is a
+ * silent no-op. The overlay keeps the coordinates it was born with while its
+ * trigger scrolls out from under it.
+ *
+ * A **capture-phase** listener on the document sees the event from any
+ * descendant, so nothing has to be annotated. Requiring every consumer to mark
+ * their scroll containers — and failing invisibly when they forget — is not a
+ * contract a design system should hand out.
+ *
+ * @param handler called on any scroll or resize while the subscription is live
+ * @returns a function that removes exactly what was added
+ */
+function onViewportChange(handler) {
+    // The capture flag must match between add and remove. A listener added with
+    // capture and removed without it is never removed at all, and nothing
+    // observable goes wrong until every scroll on the page is paying for
+    // overlays that closed long ago.
+    document.addEventListener('scroll', handler, true);
+    window.addEventListener('resize', handler);
+    return () => {
+        document.removeEventListener('scroll', handler, true);
+        window.removeEventListener('resize', handler);
+    };
+}
+
+/**
+ * A scroll strategy that keeps a connected overlay anchored to its trigger,
+ * including when the thing that scrolled was an ordinary `overflow: auto`
+ * element rather than the document.
+ *
+ * CDK's own reposition strategy does the right thing and is simply never told:
+ * it listens through `ScrollDispatcher`, which cannot hear a scroll from a
+ * container that is not marked `cdkScrollable`. See `onViewportChange` for the
+ * full account. This strategy listens in the capture phase instead, so the
+ * consumer annotates nothing.
+ */
+class WmAnchoredScrollStrategy {
+    overlayRef = null;
+    release = null;
+    attach(overlayRef) {
+        this.overlayRef = overlayRef;
+    }
+    enable() {
+        // enable() is called on every attach and can arrive more than once for one
+        // overlay; a second subscription would reposition twice per scroll event.
+        if (this.release)
+            return;
+        this.release = onViewportChange(() => {
+            if (this.overlayRef?.hasAttached())
+                this.overlayRef.updatePosition();
+        });
+    }
+    disable() {
+        this.release?.();
+        this.release = null;
+    }
+    detach() {
+        this.disable();
+        this.overlayRef = null;
+    }
+}
+/*
+ * Why each component holds its own instance rather than an application-wide
+ * provider supplying one:
+ *
+ * A ScrollStrategy is inherently per-overlay. `attach()` stores a single
+ * `overlayRef`, and `enable()` / `disable()` take no argument, so one shared
+ * instance cannot tell two open overlays apart - a select inside a popover
+ * would leave one of them anchored to the other. CDK's own strategies are
+ * built by a factory for exactly this reason, and the only public token in
+ * CDK 21, `CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG`, carries an *instance*.
+ *
+ * So `wm-popover`, `wm-select` and `wm-combobox` each construct one. That also
+ * makes the fix arrive with no setup: a consumer upgrading gets anchored
+ * overlays without adding a provider, and an application that declares its own
+ * `cdkConnectedOverlay` can pass `new WmAnchoredScrollStrategy()` to
+ * `[cdkConnectedOverlayScrollStrategy]` the same way.
+ *
+ * `[wmTooltip]` does not use this - it owns its overlay directly and anchors
+ * itself, including closing when its trigger is scrolled out of view.
+ */
+
 /**
  * WmSelect — Accessible dropdown select built on Angular CDK Overlay.
  *
@@ -153,6 +248,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  *  - Always pair with a visible label via <wm-label> or aria-label on the host
  */
 class WmSelect {
+    /**
+     * Keeps the panel anchored to its trigger while an ancestor scrolls.
+     *
+     * One instance per component, because a ScrollStrategy holds a single
+     * overlayRef and could not tell two open overlays apart. Without it the
+     * panel takes CDK's default, which cannot hear a scroll from any container
+     * that is not marked `cdkScrollable` - so in a fixed-height shell the panel
+     * keeps the coordinates it was born with while the trigger scrolls away.
+     */
+    scrollStrategy = new WmAnchoredScrollStrategy();
     /** Array of options to display. */
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     /** The currently selected value. Two-way bindable. */
@@ -183,11 +288,11 @@ class WmSelect {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: WmSelect, isStandalone: true, selector: "wm-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<!-- Trigger button \u2014 anchors the CDK overlay -->\r\n<div\r\n  class=\"wm-select-host\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n>\r\n  <button\r\n    type=\"button\"\r\n    role=\"combobox\"\r\n    class=\"wm-select-trigger\"\r\n    [class.is-open]=\"isOpen()\"\r\n    [class.is-disabled]=\"disabled()\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.aria-disabled]=\"disabled() ? true : null\"\r\n    [disabled]=\"disabled() || null\"\r\n    (click)=\"toggleOpen()\"\r\n  >\r\n    <span class=\"wm-select-value\" [class.is-placeholder]=\"!selectedOption()\">\r\n      {{ selectedOption()?.label ?? placeholder() }}\r\n    </span>\r\n    <!-- Chevron icon \u2014 rotates when open -->\r\n    <svg\r\n      class=\"wm-select-chevron\"\r\n      [class.is-open]=\"isOpen()\"\r\n      width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\r\n      fill=\"none\" aria-hidden=\"true\"\r\n    >\r\n      <path d=\"M6 9l6 6 6-6\"\r\n        stroke=\"currentColor\" stroke-width=\"2\"\r\n        stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n  </button>\r\n</div>\r\n\r\n<!-- Dropdown panel \u2014 rendered in CDK overlay container -->\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayOrigin]=\"origin\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n  [cdkConnectedOverlayPositions]=\"positions\"\r\n  [cdkConnectedOverlayWidth]=\"overlayWidth\"\r\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n  cdkConnectedOverlayBackdropClass=\"wm-select-backdrop\"\r\n  (backdropClick)=\"isOpen.set(false)\"\r\n  (detach)=\"isOpen.set(false)\"\r\n>\r\n  <div\r\n    class=\"wm-select-panel\"\r\n    role=\"listbox\"\r\n    cdkTrapFocus\r\n    [cdkTrapFocusAutoCapture]=\"true\"\r\n  >\r\n    @for (opt of options(); track opt.value) {\r\n      <button\r\n        type=\"button\"\r\n        role=\"option\"\r\n        class=\"wm-select-option\"\r\n        [class.is-selected]=\"opt.value === value()\"\r\n        [class.is-disabled]=\"!!opt.disabled\"\r\n        [attr.aria-selected]=\"opt.value === value()\"\r\n        [attr.aria-disabled]=\"opt.disabled ? true : null\"\r\n        [disabled]=\"opt.disabled || null\"\r\n        (click)=\"selectOption(opt)\"\r\n      >\r\n        <span class=\"wm-select-option-label\">{{ opt.label }}</span>\r\n        @if (opt.value === value()) {\r\n          <!-- Checkmark for selected option -->\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n            <polyline points=\"20 6 9 17 4 12\"\r\n              stroke=\"currentColor\" stroke-width=\"2.5\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>\r\n        }\r\n      </button>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{display:block}.wm-select-host{display:block}.wm-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:0 .75rem;height:36px;background:var(--wm-bg-base);border:1px solid var(--wm-border-input);border-radius:var(--wm-radius-md);color:var(--wm-text-primary);font-size:.875rem;font-family:inherit;cursor:pointer;transition:border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast);outline:none;text-align:left}.wm-select-trigger:hover:not(.is-disabled){border-color:var(--wm-color-accent-readable)}.wm-select-trigger:focus-visible{border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 25%,transparent)}.wm-select-trigger.is-open{border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 20%,transparent)}.wm-select-trigger.is-disabled{opacity:.45;cursor:not-allowed}.wm-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-select-value.is-placeholder{color:var(--wm-text-placeholder)}.wm-select-chevron{flex-shrink:0;color:var(--wm-text-muted);transition:transform var(--wm-transition-fast)}.wm-select-chevron.is-open{transform:rotate(180deg)}.wm-select-backdrop{position:fixed;inset:0}.wm-select-panel{width:100%;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #0000001f;overflow:hidden;outline:none;padding:.25rem}.wm-select-option{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:.4375rem .625rem;border:none;border-radius:var(--wm-radius-sm);background:transparent;color:var(--wm-text-primary);font-size:.875rem;font-family:inherit;cursor:pointer;text-align:left;transition:background var(--wm-transition-fast)}.wm-select-option:hover:not(.is-disabled):not(.is-selected){background:var(--wm-bg-active)}.wm-select-option.is-selected{background:color-mix(in srgb,var(--wm-color-accent) 10%,transparent);color:var(--wm-color-accent-readable);font-weight:500}.wm-select-option.is-disabled{opacity:.4;cursor:not-allowed}.wm-select-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-select-option svg{flex-shrink:0;color:var(--wm-color-accent-readable)}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: WmSelect, isStandalone: true, selector: "wm-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<!-- Trigger button \u2014 anchors the CDK overlay -->\n<div\n  class=\"wm-select-host\"\n  cdkOverlayOrigin\n  #origin=\"cdkOverlayOrigin\"\n>\n  <button\n    type=\"button\"\n    role=\"combobox\"\n    class=\"wm-select-trigger\"\n    [class.is-open]=\"isOpen()\"\n    [class.is-disabled]=\"disabled()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-disabled]=\"disabled() ? true : null\"\n    [disabled]=\"disabled() || null\"\n    (click)=\"toggleOpen()\"\n  >\n    <span class=\"wm-select-value\" [class.is-placeholder]=\"!selectedOption()\">\n      {{ selectedOption()?.label ?? placeholder() }}\n    </span>\n    <!-- Chevron icon \u2014 rotates when open -->\n    <svg\n      class=\"wm-select-chevron\"\n      [class.is-open]=\"isOpen()\"\n      width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n      fill=\"none\" aria-hidden=\"true\"\n    >\n      <path d=\"M6 9l6 6 6-6\"\n        stroke=\"currentColor\" stroke-width=\"2\"\n        stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n</div>\n\n<!-- Dropdown panel \u2014 rendered in CDK overlay container -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayWidth]=\"overlayWidth\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"wm-select-backdrop\"\n  (backdropClick)=\"isOpen.set(false)\"\n  (detach)=\"isOpen.set(false)\"\n>\n  <div\n    class=\"wm-select-panel\"\n    role=\"listbox\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\"\n  >\n    @for (opt of options(); track opt.value) {\n      <button\n        type=\"button\"\n        role=\"option\"\n        class=\"wm-select-option\"\n        [class.is-selected]=\"opt.value === value()\"\n        [class.is-disabled]=\"!!opt.disabled\"\n        [attr.aria-selected]=\"opt.value === value()\"\n        [attr.aria-disabled]=\"opt.disabled ? true : null\"\n        [disabled]=\"opt.disabled || null\"\n        (click)=\"selectOption(opt)\"\n      >\n        <span class=\"wm-select-option-label\">{{ opt.label }}</span>\n        @if (opt.value === value()) {\n          <!-- Checkmark for selected option -->\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <polyline points=\"20 6 9 17 4 12\"\n              stroke=\"currentColor\" stroke-width=\"2.5\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        }\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block}.wm-select-host{display:block}.wm-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:0 .75rem;height:36px;background:var(--wm-bg-base);border:1px solid var(--wm-border-input);border-radius:var(--wm-radius-md);color:var(--wm-text-primary);font-size:.875rem;font-family:inherit;cursor:pointer;transition:border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast);outline:none;text-align:left}.wm-select-trigger:hover:not(.is-disabled){border-color:var(--wm-color-accent-readable)}.wm-select-trigger:focus-visible{border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 25%,transparent)}.wm-select-trigger.is-open{border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 20%,transparent)}.wm-select-trigger.is-disabled{opacity:.45;cursor:not-allowed}.wm-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-select-value.is-placeholder{color:var(--wm-text-placeholder)}.wm-select-chevron{flex-shrink:0;color:var(--wm-text-muted);transition:transform var(--wm-transition-fast)}.wm-select-chevron.is-open{transform:rotate(180deg)}.wm-select-backdrop{position:fixed;inset:0}.wm-select-panel{width:100%;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #0000001f;overflow:hidden;outline:none;padding:.25rem}.wm-select-option{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:.4375rem .625rem;border:none;border-radius:var(--wm-radius-sm);background:transparent;color:var(--wm-text-primary);font-size:.875rem;font-family:inherit;cursor:pointer;text-align:left;transition:background var(--wm-transition-fast)}.wm-select-option:hover:not(.is-disabled):not(.is-selected){background:var(--wm-bg-active)}.wm-select-option.is-selected{background:color-mix(in srgb,var(--wm-color-accent) 10%,transparent);color:var(--wm-color-accent-readable);font-weight:500}.wm-select-option.is-disabled{opacity:.4;cursor:not-allowed}.wm-select-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-select-option svg{flex-shrink:0;color:var(--wm-color-accent-readable)}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'wm-select', imports: [CdkConnectedOverlay, CdkOverlayOrigin, CdkTrapFocus], template: "<!-- Trigger button \u2014 anchors the CDK overlay -->\r\n<div\r\n  class=\"wm-select-host\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n>\r\n  <button\r\n    type=\"button\"\r\n    role=\"combobox\"\r\n    class=\"wm-select-trigger\"\r\n    [class.is-open]=\"isOpen()\"\r\n    [class.is-disabled]=\"disabled()\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.aria-disabled]=\"disabled() ? true : null\"\r\n    [disabled]=\"disabled() || null\"\r\n    (click)=\"toggleOpen()\"\r\n  >\r\n    <span class=\"wm-select-value\" [class.is-placeholder]=\"!selectedOption()\">\r\n      {{ selectedOption()?.label ?? placeholder() }}\r\n    </span>\r\n    <!-- Chevron icon \u2014 rotates when open -->\r\n    <svg\r\n      class=\"wm-select-chevron\"\r\n      [class.is-open]=\"isOpen()\"\r\n      width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\r\n      fill=\"none\" aria-hidden=\"true\"\r\n    >\r\n      <path d=\"M6 9l6 6 6-6\"\r\n        stroke=\"currentColor\" stroke-width=\"2\"\r\n        stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n  </button>\r\n</div>\r\n\r\n<!-- Dropdown panel \u2014 rendered in CDK overlay container -->\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayOrigin]=\"origin\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n  [cdkConnectedOverlayPositions]=\"positions\"\r\n  [cdkConnectedOverlayWidth]=\"overlayWidth\"\r\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n  cdkConnectedOverlayBackdropClass=\"wm-select-backdrop\"\r\n  (backdropClick)=\"isOpen.set(false)\"\r\n  (detach)=\"isOpen.set(false)\"\r\n>\r\n  <div\r\n    class=\"wm-select-panel\"\r\n    role=\"listbox\"\r\n    cdkTrapFocus\r\n    [cdkTrapFocusAutoCapture]=\"true\"\r\n  >\r\n    @for (opt of options(); track opt.value) {\r\n      <button\r\n        type=\"button\"\r\n        role=\"option\"\r\n        class=\"wm-select-option\"\r\n        [class.is-selected]=\"opt.value === value()\"\r\n        [class.is-disabled]=\"!!opt.disabled\"\r\n        [attr.aria-selected]=\"opt.value === value()\"\r\n        [attr.aria-disabled]=\"opt.disabled ? true : null\"\r\n        [disabled]=\"opt.disabled || null\"\r\n        (click)=\"selectOption(opt)\"\r\n      >\r\n        <span class=\"wm-select-option-label\">{{ opt.label }}</span>\r\n        @if (opt.value === value()) {\r\n          <!-- Checkmark for selected option -->\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n            <polyline points=\"20 6 9 17 4 12\"\r\n              stroke=\"currentColor\" stroke-width=\"2.5\"\r\n              stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          </svg>\r\n        }\r\n      </button>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{display:block}.wm-select-host{display:block}.wm-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:0 .75rem;height:36px;background:var(--wm-bg-base);border:1px solid var(--wm-border-input);border-radius:var(--wm-radius-md);color:var(--wm-text-primary);font-size:.875rem;font-family:inherit;cursor:pointer;transition:border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast);outline:none;text-align:left}.wm-select-trigger:hover:not(.is-disabled){border-color:var(--wm-color-accent-readable)}.wm-select-trigger:focus-visible{border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 25%,transparent)}.wm-select-trigger.is-open{border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 20%,transparent)}.wm-select-trigger.is-disabled{opacity:.45;cursor:not-allowed}.wm-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-select-value.is-placeholder{color:var(--wm-text-placeholder)}.wm-select-chevron{flex-shrink:0;color:var(--wm-text-muted);transition:transform var(--wm-transition-fast)}.wm-select-chevron.is-open{transform:rotate(180deg)}.wm-select-backdrop{position:fixed;inset:0}.wm-select-panel{width:100%;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #0000001f;overflow:hidden;outline:none;padding:.25rem}.wm-select-option{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:.4375rem .625rem;border:none;border-radius:var(--wm-radius-sm);background:transparent;color:var(--wm-text-primary);font-size:.875rem;font-family:inherit;cursor:pointer;text-align:left;transition:background var(--wm-transition-fast)}.wm-select-option:hover:not(.is-disabled):not(.is-selected){background:var(--wm-bg-active)}.wm-select-option.is-selected{background:color-mix(in srgb,var(--wm-color-accent) 10%,transparent);color:var(--wm-color-accent-readable);font-weight:500}.wm-select-option.is-disabled{opacity:.4;cursor:not-allowed}.wm-select-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-select-option svg{flex-shrink:0;color:var(--wm-color-accent-readable)}\n"] }]
+            args: [{ selector: 'wm-select', imports: [CdkConnectedOverlay, CdkOverlayOrigin, CdkTrapFocus], template: "<!-- Trigger button \u2014 anchors the CDK overlay -->\n<div\n  class=\"wm-select-host\"\n  cdkOverlayOrigin\n  #origin=\"cdkOverlayOrigin\"\n>\n  <button\n    type=\"button\"\n    role=\"combobox\"\n    class=\"wm-select-trigger\"\n    [class.is-open]=\"isOpen()\"\n    [class.is-disabled]=\"disabled()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-disabled]=\"disabled() ? true : null\"\n    [disabled]=\"disabled() || null\"\n    (click)=\"toggleOpen()\"\n  >\n    <span class=\"wm-select-value\" [class.is-placeholder]=\"!selectedOption()\">\n      {{ selectedOption()?.label ?? placeholder() }}\n    </span>\n    <!-- Chevron icon \u2014 rotates when open -->\n    <svg\n      class=\"wm-select-chevron\"\n      [class.is-open]=\"isOpen()\"\n      width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n      fill=\"none\" aria-hidden=\"true\"\n    >\n      <path d=\"M6 9l6 6 6-6\"\n        stroke=\"currentColor\" stroke-width=\"2\"\n        stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n</div>\n\n<!-- Dropdown panel \u2014 rendered in CDK overlay container -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayWidth]=\"overlayWidth\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"wm-select-backdrop\"\n  (backdropClick)=\"isOpen.set(false)\"\n  (detach)=\"isOpen.set(false)\"\n>\n  <div\n    class=\"wm-select-panel\"\n    role=\"listbox\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"true\"\n  >\n    @for (opt of options(); track opt.value) {\n      <button\n        type=\"button\"\n        role=\"option\"\n        class=\"wm-select-option\"\n        [class.is-selected]=\"opt.value === value()\"\n        [class.is-disabled]=\"!!opt.disabled\"\n        [attr.aria-selected]=\"opt.value === value()\"\n        [attr.aria-disabled]=\"opt.disabled ? true : null\"\n        [disabled]=\"opt.disabled || null\"\n        (click)=\"selectOption(opt)\"\n      >\n        <span class=\"wm-select-option-label\">{{ opt.label }}</span>\n        @if (opt.value === value()) {\n          <!-- Checkmark for selected option -->\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <polyline points=\"20 6 9 17 4 12\"\n              stroke=\"currentColor\" stroke-width=\"2.5\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        }\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block}.wm-select-host{display:block}.wm-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:0 .75rem;height:36px;background:var(--wm-bg-base);border:1px solid var(--wm-border-input);border-radius:var(--wm-radius-md);color:var(--wm-text-primary);font-size:.875rem;font-family:inherit;cursor:pointer;transition:border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast);outline:none;text-align:left}.wm-select-trigger:hover:not(.is-disabled){border-color:var(--wm-color-accent-readable)}.wm-select-trigger:focus-visible{border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 25%,transparent)}.wm-select-trigger.is-open{border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 20%,transparent)}.wm-select-trigger.is-disabled{opacity:.45;cursor:not-allowed}.wm-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-select-value.is-placeholder{color:var(--wm-text-placeholder)}.wm-select-chevron{flex-shrink:0;color:var(--wm-text-muted);transition:transform var(--wm-transition-fast)}.wm-select-chevron.is-open{transform:rotate(180deg)}.wm-select-backdrop{position:fixed;inset:0}.wm-select-panel{width:100%;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #0000001f;overflow:hidden;outline:none;padding:.25rem}.wm-select-option{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:.4375rem .625rem;border:none;border-radius:var(--wm-radius-sm);background:transparent;color:var(--wm-text-primary);font-size:.875rem;font-family:inherit;cursor:pointer;text-align:left;transition:background var(--wm-transition-fast)}.wm-select-option:hover:not(.is-disabled):not(.is-selected){background:var(--wm-bg-active)}.wm-select-option.is-selected{background:color-mix(in srgb,var(--wm-color-accent) 10%,transparent);color:var(--wm-color-accent-readable);font-weight:500}.wm-select-option.is-disabled{opacity:.4;cursor:not-allowed}.wm-select-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-select-option svg{flex-shrink:0;color:var(--wm-color-accent-readable)}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**
@@ -230,6 +335,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  *    Import WmAutoFocus from @wildmason/aegis/components and add it to your component's imports.
  */
 class WmPopover {
+    /**
+     * Keeps the panel anchored to its trigger while an ancestor scrolls.
+     *
+     * One instance per component, because a ScrollStrategy holds a single
+     * overlayRef and could not tell two open overlays apart. Without it the
+     * panel takes CDK's default, which cannot hear a scroll from any container
+     * that is not marked `cdkScrollable` - so in a fixed-height shell the panel
+     * keeps the coordinates it was born with while the trigger scrolls away.
+     */
+    scrollStrategy = new WmAnchoredScrollStrategy();
     /** Whether the panel is currently open. */
     isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     /** Panel width in pixels, or 'auto' to match content. */
@@ -318,11 +433,11 @@ class WmPopover {
         this.closed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.1", type: WmPopover, isStandalone: true, selector: "wm-popover", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hasPopup: { classPropertyName: "hasPopup", publicName: "hasPopup", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, trapFocusAutoCapture: { classPropertyName: "trapFocusAutoCapture", publicName: "trapFocusAutoCapture", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Trigger anchor -->\n<div cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"wm-popover-trigger\">\n  <ng-content select=\"[trigger]\"></ng-content>\n</div>\n\n<!-- Floating panel -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"onClose()\"\n  (detach)=\"onClose()\"\n  (attach)=\"onAttach()\"\n>\n  <div\n    #panel\n    [id]=\"panelId\"\n    [attr.role]=\"role()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    class=\"wm-popover-panel\"\n    [style.width]=\"width() === 'auto' ? 'auto' : width() + 'px'\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"trapFocusAutoCapture()\"\n    (keydown.escape)=\"onClose()\"\n  >\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</ng-template>\n", styles: ["wm-popover{display:inline-flex;align-items:center}.wm-popover-trigger{display:block;width:100%}.wm-popover-panel{background:var(--wm-bg-raised);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #00000024;overflow:hidden;outline:none}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.1", type: WmPopover, isStandalone: true, selector: "wm-popover", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hasPopup: { classPropertyName: "hasPopup", publicName: "hasPopup", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, trapFocusAutoCapture: { classPropertyName: "trapFocusAutoCapture", publicName: "trapFocusAutoCapture", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Trigger anchor -->\n<div cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"wm-popover-trigger\">\n  <ng-content select=\"[trigger]\"></ng-content>\n</div>\n\n<!-- Floating panel -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"onClose()\"\n  (detach)=\"onClose()\"\n  (attach)=\"onAttach()\"\n>\n  <div\n    #panel\n    [id]=\"panelId\"\n    [attr.role]=\"role()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    class=\"wm-popover-panel\"\n    [style.width]=\"width() === 'auto' ? 'auto' : width() + 'px'\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"trapFocusAutoCapture()\"\n    (keydown.escape)=\"onClose()\"\n  >\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</ng-template>\n", styles: ["wm-popover{display:inline-flex;align-items:center}.wm-popover-trigger{display:block;width:100%}.wm-popover-panel{background:var(--wm-bg-raised);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #00000024;overflow:hidden;outline:none}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmPopover, decorators: [{
             type: Component,
-            args: [{ selector: 'wm-popover', imports: [CdkConnectedOverlay, CdkOverlayOrigin, CdkTrapFocus], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- Trigger anchor -->\n<div cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"wm-popover-trigger\">\n  <ng-content select=\"[trigger]\"></ng-content>\n</div>\n\n<!-- Floating panel -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"onClose()\"\n  (detach)=\"onClose()\"\n  (attach)=\"onAttach()\"\n>\n  <div\n    #panel\n    [id]=\"panelId\"\n    [attr.role]=\"role()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    class=\"wm-popover-panel\"\n    [style.width]=\"width() === 'auto' ? 'auto' : width() + 'px'\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"trapFocusAutoCapture()\"\n    (keydown.escape)=\"onClose()\"\n  >\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</ng-template>\n", styles: ["wm-popover{display:inline-flex;align-items:center}.wm-popover-trigger{display:block;width:100%}.wm-popover-panel{background:var(--wm-bg-raised);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #00000024;overflow:hidden;outline:none}\n"] }]
+            args: [{ selector: 'wm-popover', imports: [CdkConnectedOverlay, CdkOverlayOrigin, CdkTrapFocus], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- Trigger anchor -->\n<div cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"wm-popover-trigger\">\n  <ng-content select=\"[trigger]\"></ng-content>\n</div>\n\n<!-- Floating panel -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"onClose()\"\n  (detach)=\"onClose()\"\n  (attach)=\"onAttach()\"\n>\n  <div\n    #panel\n    [id]=\"panelId\"\n    [attr.role]=\"role()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    class=\"wm-popover-panel\"\n    [style.width]=\"width() === 'auto' ? 'auto' : width() + 'px'\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"trapFocusAutoCapture()\"\n    (keydown.escape)=\"onClose()\"\n  >\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</ng-template>\n", styles: ["wm-popover{display:inline-flex;align-items:center}.wm-popover-trigger{display:block;width:100%}.wm-popover-panel{background:var(--wm-bg-raised);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #00000024;overflow:hidden;outline:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hasPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPopup", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], trapFocusAutoCapture: [{ type: i0.Input, args: [{ isSignal: true, alias: "trapFocusAutoCapture", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
 
 /**
@@ -448,11 +563,11 @@ class WmTabs {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: WmTabs, isStandalone: true, selector: "wm-tabs", inputs: { activeValue: { classPropertyName: "activeValue", publicName: "activeValue", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, queries: [{ propertyName: "tabs", predicate: WmTab, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"wm-tabs\"\r\n  [class.wm-tabs--line]=\"variant() === 'line'\"\r\n  [class.wm-tabs--pill]=\"variant() === 'pill'\"\r\n  role=\"tablist\"\r\n  #container\r\n  (keydown)=\"onKeyDown($event, container)\"\n>\n  @for (tab of tabs(); track tab.value(); let i = $index) {\n    @if (tab.separatorBefore()) {\n      <span\n        class=\"wm-tab-separator\"\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n      ></span>\n    }\n    <button\n      type=\"button\"\r\n      role=\"tab\"\r\n      class=\"wm-tab\"\r\n      [id]=\"'wm-tab-' + tab.value()\"\r\n      [attr.aria-selected]=\"activeValue() === tab.value()\"\n      [attr.aria-controls]=\"'wm-panel-' + tab.value()\"\n      [attr.aria-disabled]=\"tab.unavailable() ? true : null\"\n      [attr.aria-description]=\"tab.unavailable() ? tab.unavailableReason() : null\"\n      [attr.title]=\"tab.unavailable() ? tab.unavailableReason() : null\"\n      [tabIndex]=\"(focusedIndex() === null ? activeValue() === tab.value() : focusedIndex() === i) ? 0 : -1\"\n      [class.is-active]=\"activeValue() === tab.value()\"\n      [class.is-unavailable]=\"tab.unavailable()\"\n      (click)=\"selectTab(tab, i)\"\n      (focus)=\"focusedIndex.set(i)\"\r\n      (blur)=\"onBlur()\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"tab.tmpl()\" />\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [".wm-tab{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;background:transparent;border:none;cursor:pointer;white-space:nowrap;transition:color var(--wm-duration-fast) var(--wm-ease-standard),background var(--wm-duration-fast) var(--wm-ease-standard),border-color var(--wm-duration-fast) var(--wm-ease-standard)}.wm-tab:focus-visible{outline:2px solid var(--wm-color-accent);outline-offset:-2px;border-radius:var(--wm-radius-sm)}.wm-tab.is-unavailable{cursor:not-allowed;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent);box-shadow:none}.wm-tab.is-unavailable:hover{background:transparent;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent)}.wm-tab-separator{flex:0 0 1px;align-self:center;width:1px;height:1.25rem;margin:0 .375rem;background:var(--wm-border-subtle)}.wm-tabs--line{display:flex;gap:1.5rem;border-bottom:1px solid var(--wm-border-subtle)}.wm-tabs--line .wm-tab{padding:.625rem .25rem;color:var(--wm-text-muted);border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px}.wm-tabs--line .wm-tab:hover{color:var(--wm-text-secondary)}.wm-tabs--line .wm-tab.is-active{color:var(--wm-color-accent-readable);border-bottom-color:var(--wm-color-accent-readable)}.wm-tabs--pill{display:inline-flex;background:var(--wm-bg-sunken);padding:.25rem;border-radius:var(--wm-radius-md);gap:.125rem;border:1px solid var(--wm-border-subtle)}.wm-tabs--pill .wm-tab{padding:.375rem .75rem;border-radius:var(--wm-radius-sm);color:var(--wm-text-muted)}.wm-tabs--pill .wm-tab:hover{background:color-mix(in srgb,var(--wm-color-accent) 5%,transparent);color:var(--wm-text-secondary)}.wm-tabs--pill .wm-tab.is-active{background:var(--wm-bg-float);color:var(--wm-text-primary);box-shadow:var(--wm-shadow-sm)}.wm-tabs--line .wm-tab.is-unavailable,.wm-tabs--line .wm-tab.is-unavailable:hover,.wm-tabs--pill .wm-tab.is-unavailable,.wm-tabs--pill .wm-tab.is-unavailable:hover{background:transparent;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent);box-shadow:none}@media(prefers-reduced-motion:reduce){.wm-tab{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: WmTabs, isStandalone: true, selector: "wm-tabs", inputs: { activeValue: { classPropertyName: "activeValue", publicName: "activeValue", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, queries: [{ propertyName: "tabs", predicate: WmTab, isSignal: true }], ngImport: i0, template: "<div\n  class=\"wm-tabs\"\n  [class.wm-tabs--line]=\"variant() === 'line'\"\n  [class.wm-tabs--pill]=\"variant() === 'pill'\"\n  role=\"tablist\"\n  #container\n  (keydown)=\"onKeyDown($event, container)\"\n>\n  @for (tab of tabs(); track tab.value(); let i = $index) {\n    @if (tab.separatorBefore()) {\n      <span\n        class=\"wm-tab-separator\"\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n      ></span>\n    }\n    <button\n      type=\"button\"\n      role=\"tab\"\n      class=\"wm-tab\"\n      [id]=\"'wm-tab-' + tab.value()\"\n      [attr.aria-selected]=\"activeValue() === tab.value()\"\n      [attr.aria-controls]=\"'wm-panel-' + tab.value()\"\n      [attr.aria-disabled]=\"tab.unavailable() ? true : null\"\n      [attr.aria-description]=\"tab.unavailable() ? tab.unavailableReason() : null\"\n      [attr.title]=\"tab.unavailable() ? tab.unavailableReason() : null\"\n      [tabIndex]=\"(focusedIndex() === null ? activeValue() === tab.value() : focusedIndex() === i) ? 0 : -1\"\n      [class.is-active]=\"activeValue() === tab.value()\"\n      [class.is-unavailable]=\"tab.unavailable()\"\n      (click)=\"selectTab(tab, i)\"\n      (focus)=\"focusedIndex.set(i)\"\n      (blur)=\"onBlur()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"tab.tmpl()\" />\n    </button>\n  }\n</div>\n", styles: [".wm-tab{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;background:transparent;border:none;cursor:pointer;white-space:nowrap;transition:color var(--wm-duration-fast) var(--wm-ease-standard),background var(--wm-duration-fast) var(--wm-ease-standard),border-color var(--wm-duration-fast) var(--wm-ease-standard)}.wm-tab:focus-visible{outline:2px solid var(--wm-color-accent);outline-offset:-2px;border-radius:var(--wm-radius-sm)}.wm-tab.is-unavailable{cursor:not-allowed;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent);box-shadow:none}.wm-tab.is-unavailable:hover{background:transparent;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent)}.wm-tab-separator{flex:0 0 1px;align-self:center;width:1px;height:1.25rem;margin:0 .375rem;background:var(--wm-border-subtle)}.wm-tabs--line{display:flex;gap:1.5rem;border-bottom:1px solid var(--wm-border-subtle)}.wm-tabs--line .wm-tab{padding:.625rem .25rem;color:var(--wm-text-muted);border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px}.wm-tabs--line .wm-tab:hover{color:var(--wm-text-secondary)}.wm-tabs--line .wm-tab.is-active{color:var(--wm-color-accent-readable);border-bottom-color:var(--wm-color-accent-readable)}.wm-tabs--pill{display:inline-flex;background:var(--wm-bg-sunken);padding:.25rem;border-radius:var(--wm-radius-md);gap:.125rem;border:1px solid var(--wm-border-subtle)}.wm-tabs--pill .wm-tab{padding:.375rem .75rem;border-radius:var(--wm-radius-sm);color:var(--wm-text-muted)}.wm-tabs--pill .wm-tab:hover{background:color-mix(in srgb,var(--wm-color-accent) 5%,transparent);color:var(--wm-text-secondary)}.wm-tabs--pill .wm-tab.is-active{background:var(--wm-bg-float);color:var(--wm-text-primary);box-shadow:var(--wm-shadow-sm)}.wm-tabs--line .wm-tab.is-unavailable,.wm-tabs--line .wm-tab.is-unavailable:hover,.wm-tabs--pill .wm-tab.is-unavailable,.wm-tabs--pill .wm-tab.is-unavailable:hover{background:transparent;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent);box-shadow:none}@media(prefers-reduced-motion:reduce){.wm-tab{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmTabs, decorators: [{
             type: Component,
-            args: [{ selector: 'wm-tabs', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"wm-tabs\"\r\n  [class.wm-tabs--line]=\"variant() === 'line'\"\r\n  [class.wm-tabs--pill]=\"variant() === 'pill'\"\r\n  role=\"tablist\"\r\n  #container\r\n  (keydown)=\"onKeyDown($event, container)\"\n>\n  @for (tab of tabs(); track tab.value(); let i = $index) {\n    @if (tab.separatorBefore()) {\n      <span\n        class=\"wm-tab-separator\"\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n      ></span>\n    }\n    <button\n      type=\"button\"\r\n      role=\"tab\"\r\n      class=\"wm-tab\"\r\n      [id]=\"'wm-tab-' + tab.value()\"\r\n      [attr.aria-selected]=\"activeValue() === tab.value()\"\n      [attr.aria-controls]=\"'wm-panel-' + tab.value()\"\n      [attr.aria-disabled]=\"tab.unavailable() ? true : null\"\n      [attr.aria-description]=\"tab.unavailable() ? tab.unavailableReason() : null\"\n      [attr.title]=\"tab.unavailable() ? tab.unavailableReason() : null\"\n      [tabIndex]=\"(focusedIndex() === null ? activeValue() === tab.value() : focusedIndex() === i) ? 0 : -1\"\n      [class.is-active]=\"activeValue() === tab.value()\"\n      [class.is-unavailable]=\"tab.unavailable()\"\n      (click)=\"selectTab(tab, i)\"\n      (focus)=\"focusedIndex.set(i)\"\r\n      (blur)=\"onBlur()\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"tab.tmpl()\" />\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [".wm-tab{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;background:transparent;border:none;cursor:pointer;white-space:nowrap;transition:color var(--wm-duration-fast) var(--wm-ease-standard),background var(--wm-duration-fast) var(--wm-ease-standard),border-color var(--wm-duration-fast) var(--wm-ease-standard)}.wm-tab:focus-visible{outline:2px solid var(--wm-color-accent);outline-offset:-2px;border-radius:var(--wm-radius-sm)}.wm-tab.is-unavailable{cursor:not-allowed;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent);box-shadow:none}.wm-tab.is-unavailable:hover{background:transparent;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent)}.wm-tab-separator{flex:0 0 1px;align-self:center;width:1px;height:1.25rem;margin:0 .375rem;background:var(--wm-border-subtle)}.wm-tabs--line{display:flex;gap:1.5rem;border-bottom:1px solid var(--wm-border-subtle)}.wm-tabs--line .wm-tab{padding:.625rem .25rem;color:var(--wm-text-muted);border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px}.wm-tabs--line .wm-tab:hover{color:var(--wm-text-secondary)}.wm-tabs--line .wm-tab.is-active{color:var(--wm-color-accent-readable);border-bottom-color:var(--wm-color-accent-readable)}.wm-tabs--pill{display:inline-flex;background:var(--wm-bg-sunken);padding:.25rem;border-radius:var(--wm-radius-md);gap:.125rem;border:1px solid var(--wm-border-subtle)}.wm-tabs--pill .wm-tab{padding:.375rem .75rem;border-radius:var(--wm-radius-sm);color:var(--wm-text-muted)}.wm-tabs--pill .wm-tab:hover{background:color-mix(in srgb,var(--wm-color-accent) 5%,transparent);color:var(--wm-text-secondary)}.wm-tabs--pill .wm-tab.is-active{background:var(--wm-bg-float);color:var(--wm-text-primary);box-shadow:var(--wm-shadow-sm)}.wm-tabs--line .wm-tab.is-unavailable,.wm-tabs--line .wm-tab.is-unavailable:hover,.wm-tabs--pill .wm-tab.is-unavailable,.wm-tabs--pill .wm-tab.is-unavailable:hover{background:transparent;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent);box-shadow:none}@media(prefers-reduced-motion:reduce){.wm-tab{transition:none}}\n"] }]
+            args: [{ selector: 'wm-tabs', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"wm-tabs\"\n  [class.wm-tabs--line]=\"variant() === 'line'\"\n  [class.wm-tabs--pill]=\"variant() === 'pill'\"\n  role=\"tablist\"\n  #container\n  (keydown)=\"onKeyDown($event, container)\"\n>\n  @for (tab of tabs(); track tab.value(); let i = $index) {\n    @if (tab.separatorBefore()) {\n      <span\n        class=\"wm-tab-separator\"\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n      ></span>\n    }\n    <button\n      type=\"button\"\n      role=\"tab\"\n      class=\"wm-tab\"\n      [id]=\"'wm-tab-' + tab.value()\"\n      [attr.aria-selected]=\"activeValue() === tab.value()\"\n      [attr.aria-controls]=\"'wm-panel-' + tab.value()\"\n      [attr.aria-disabled]=\"tab.unavailable() ? true : null\"\n      [attr.aria-description]=\"tab.unavailable() ? tab.unavailableReason() : null\"\n      [attr.title]=\"tab.unavailable() ? tab.unavailableReason() : null\"\n      [tabIndex]=\"(focusedIndex() === null ? activeValue() === tab.value() : focusedIndex() === i) ? 0 : -1\"\n      [class.is-active]=\"activeValue() === tab.value()\"\n      [class.is-unavailable]=\"tab.unavailable()\"\n      (click)=\"selectTab(tab, i)\"\n      (focus)=\"focusedIndex.set(i)\"\n      (blur)=\"onBlur()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"tab.tmpl()\" />\n    </button>\n  }\n</div>\n", styles: [".wm-tab{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;background:transparent;border:none;cursor:pointer;white-space:nowrap;transition:color var(--wm-duration-fast) var(--wm-ease-standard),background var(--wm-duration-fast) var(--wm-ease-standard),border-color var(--wm-duration-fast) var(--wm-ease-standard)}.wm-tab:focus-visible{outline:2px solid var(--wm-color-accent);outline-offset:-2px;border-radius:var(--wm-radius-sm)}.wm-tab.is-unavailable{cursor:not-allowed;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent);box-shadow:none}.wm-tab.is-unavailable:hover{background:transparent;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent)}.wm-tab-separator{flex:0 0 1px;align-self:center;width:1px;height:1.25rem;margin:0 .375rem;background:var(--wm-border-subtle)}.wm-tabs--line{display:flex;gap:1.5rem;border-bottom:1px solid var(--wm-border-subtle)}.wm-tabs--line .wm-tab{padding:.625rem .25rem;color:var(--wm-text-muted);border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px}.wm-tabs--line .wm-tab:hover{color:var(--wm-text-secondary)}.wm-tabs--line .wm-tab.is-active{color:var(--wm-color-accent-readable);border-bottom-color:var(--wm-color-accent-readable)}.wm-tabs--pill{display:inline-flex;background:var(--wm-bg-sunken);padding:.25rem;border-radius:var(--wm-radius-md);gap:.125rem;border:1px solid var(--wm-border-subtle)}.wm-tabs--pill .wm-tab{padding:.375rem .75rem;border-radius:var(--wm-radius-sm);color:var(--wm-text-muted)}.wm-tabs--pill .wm-tab:hover{background:color-mix(in srgb,var(--wm-color-accent) 5%,transparent);color:var(--wm-text-secondary)}.wm-tabs--pill .wm-tab.is-active{background:var(--wm-bg-float);color:var(--wm-text-primary);box-shadow:var(--wm-shadow-sm)}.wm-tabs--line .wm-tab.is-unavailable,.wm-tabs--line .wm-tab.is-unavailable:hover,.wm-tabs--pill .wm-tab.is-unavailable,.wm-tabs--pill .wm-tab.is-unavailable:hover{background:transparent;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent);box-shadow:none}@media(prefers-reduced-motion:reduce){.wm-tab{transition:none}}\n"] }]
         }], propDecorators: { activeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeValue", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WmTab), { isSignal: true }] }] } });
 
 class WmButton {
@@ -471,11 +586,11 @@ class WmButton {
         return this.iconOnly() ? `${base} btn-icon-only` : base;
     }, ...(ngDevMode ? [{ debugName: "btnClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: WmButton, isStandalone: true, selector: "wm-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, btnTitle: { classPropertyName: "btnTitle", publicName: "btnTitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\r\n  [class]=\"btnClass()\"\r\n  [disabled]=\"disabled()\"\r\n  [type]=\"type()\"\r\n  [attr.aria-label]=\"ariaLabel() || null\"\r\n  [attr.title]=\"btnTitle() || null\"\r\n>\r\n  <ng-content />\r\n</button>\r\n", styles: [":host{display:inline-flex}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: WmButton, isStandalone: true, selector: "wm-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, btnTitle: { classPropertyName: "btnTitle", publicName: "btnTitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n  [class]=\"btnClass()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.title]=\"btnTitle() || null\"\n>\n  <ng-content />\n</button>\n", styles: [":host{display:inline-flex}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmButton, decorators: [{
             type: Component,
-            args: [{ selector: 'wm-button', template: "<button\r\n  [class]=\"btnClass()\"\r\n  [disabled]=\"disabled()\"\r\n  [type]=\"type()\"\r\n  [attr.aria-label]=\"ariaLabel() || null\"\r\n  [attr.title]=\"btnTitle() || null\"\r\n>\r\n  <ng-content />\r\n</button>\r\n", styles: [":host{display:inline-flex}\n"] }]
+            args: [{ selector: 'wm-button', template: "<button\n  [class]=\"btnClass()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.title]=\"btnTitle() || null\"\n>\n  <ng-content />\n</button>\n", styles: [":host{display:inline-flex}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], btnTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "btnTitle", required: false }] }] } });
 
 /**
@@ -522,11 +637,11 @@ class Checkbox {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: Checkbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: Checkbox, isStandalone: true, selector: "wm-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<label class=\"wm-checkbox-wrap\" [class.is-disabled]=\"disabled()\">\r\n  <button\r\n    type=\"button\"\r\n    role=\"checkbox\"\r\n    class=\"wm-checkbox-box\"\r\n    [class.is-checked]=\"checked()\"\r\n    [class.is-indeterminate]=\"indeterminate() && !checked()\"\r\n    [attr.aria-checked]=\"ariaChecked()\"\r\n    [attr.aria-disabled]=\"disabled() ? true : null\"\r\n    [disabled]=\"disabled() || null\"\r\n    (click)=\"toggle()\"\r\n    (keydown.space)=\"$event.preventDefault(); toggle()\"\r\n  >\r\n    @if (indeterminate() && !checked()) {\r\n      <!-- Dash for indeterminate (\"some selected\") state -->\r\n      <svg class=\"wm-checkbox-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\r\n        <line x1=\"2\" y1=\"6\" x2=\"10\" y2=\"6\"\r\n          stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\"/>\r\n      </svg>\r\n    } @else if (checked()) {\r\n      <!-- Animated checkmark for selected state -->\r\n      <svg class=\"wm-checkbox-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\r\n        <polyline class=\"check-mark\" points=\"2,6.5 4.5,9 10,3\"\r\n          fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    }\r\n  </button>\r\n\r\n  @if (label()) {\r\n    <span class=\"wm-checkbox-label\">{{ label() }}</span>\r\n  }\r\n</label>\r\n", styles: [":host{display:inline-flex}.wm-checkbox-wrap{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.wm-checkbox-wrap.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.wm-checkbox-box{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;border:2px solid var(--wm-border-input);border-radius:4px;background:var(--wm-bg-base);color:#fff;cursor:pointer;padding:0;outline:none;transition:background var(--wm-transition-fast),border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast)}.wm-checkbox-box:focus-visible{box-shadow:0 0 0 2px var(--wm-bg-base),0 0 0 4px var(--wm-color-accent)}.wm-checkbox-box.is-checked,.wm-checkbox-box.is-indeterminate{background:var(--wm-color-accent);border-color:var(--wm-color-accent-readable)}.wm-checkbox-icon{width:12px;height:12px;display:block;flex-shrink:0}@keyframes check-draw{0%{stroke-dashoffset:16}to{stroke-dashoffset:0}}.check-mark{stroke-dasharray:16;stroke-dashoffset:0;animation:check-draw .18s ease-out forwards}.wm-checkbox-label{font-size:.875rem;color:var(--wm-text-primary);line-height:1.4}@media(prefers-reduced-motion:reduce){.wm-checkbox-box{transition:none}.check-mark{animation:none}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: Checkbox, isStandalone: true, selector: "wm-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<label class=\"wm-checkbox-wrap\" [class.is-disabled]=\"disabled()\">\n  <button\n    type=\"button\"\n    role=\"checkbox\"\n    class=\"wm-checkbox-box\"\n    [class.is-checked]=\"checked()\"\n    [class.is-indeterminate]=\"indeterminate() && !checked()\"\n    [attr.aria-checked]=\"ariaChecked()\"\n    [attr.aria-disabled]=\"disabled() ? true : null\"\n    [disabled]=\"disabled() || null\"\n    (click)=\"toggle()\"\n    (keydown.space)=\"$event.preventDefault(); toggle()\"\n  >\n    @if (indeterminate() && !checked()) {\n      <!-- Dash for indeterminate (\"some selected\") state -->\n      <svg class=\"wm-checkbox-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n        <line x1=\"2\" y1=\"6\" x2=\"10\" y2=\"6\"\n          stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\"/>\n      </svg>\n    } @else if (checked()) {\n      <!-- Animated checkmark for selected state -->\n      <svg class=\"wm-checkbox-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n        <polyline class=\"check-mark\" points=\"2,6.5 4.5,9 10,3\"\n          fill=\"none\" stroke=\"currentColor\"\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    }\n  </button>\n\n  @if (label()) {\n    <span class=\"wm-checkbox-label\">{{ label() }}</span>\n  }\n</label>\n", styles: [":host{display:inline-flex}.wm-checkbox-wrap{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.wm-checkbox-wrap.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.wm-checkbox-box{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;border:2px solid var(--wm-border-input);border-radius:4px;background:var(--wm-bg-base);color:#fff;cursor:pointer;padding:0;outline:none;transition:background var(--wm-transition-fast),border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast)}.wm-checkbox-box:focus-visible{box-shadow:0 0 0 2px var(--wm-bg-base),0 0 0 4px var(--wm-color-accent)}.wm-checkbox-box.is-checked,.wm-checkbox-box.is-indeterminate{background:var(--wm-color-accent);border-color:var(--wm-color-accent-readable)}.wm-checkbox-icon{width:12px;height:12px;display:block;flex-shrink:0}@keyframes check-draw{0%{stroke-dashoffset:16}to{stroke-dashoffset:0}}.check-mark{stroke-dasharray:16;stroke-dashoffset:0;animation:check-draw .18s ease-out forwards}.wm-checkbox-label{font-size:.875rem;color:var(--wm-text-primary);line-height:1.4}@media(prefers-reduced-motion:reduce){.wm-checkbox-box{transition:none}.check-mark{animation:none}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: Checkbox, decorators: [{
             type: Component,
-            args: [{ selector: 'wm-checkbox', template: "<label class=\"wm-checkbox-wrap\" [class.is-disabled]=\"disabled()\">\r\n  <button\r\n    type=\"button\"\r\n    role=\"checkbox\"\r\n    class=\"wm-checkbox-box\"\r\n    [class.is-checked]=\"checked()\"\r\n    [class.is-indeterminate]=\"indeterminate() && !checked()\"\r\n    [attr.aria-checked]=\"ariaChecked()\"\r\n    [attr.aria-disabled]=\"disabled() ? true : null\"\r\n    [disabled]=\"disabled() || null\"\r\n    (click)=\"toggle()\"\r\n    (keydown.space)=\"$event.preventDefault(); toggle()\"\r\n  >\r\n    @if (indeterminate() && !checked()) {\r\n      <!-- Dash for indeterminate (\"some selected\") state -->\r\n      <svg class=\"wm-checkbox-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\r\n        <line x1=\"2\" y1=\"6\" x2=\"10\" y2=\"6\"\r\n          stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\"/>\r\n      </svg>\r\n    } @else if (checked()) {\r\n      <!-- Animated checkmark for selected state -->\r\n      <svg class=\"wm-checkbox-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\r\n        <polyline class=\"check-mark\" points=\"2,6.5 4.5,9 10,3\"\r\n          fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    }\r\n  </button>\r\n\r\n  @if (label()) {\r\n    <span class=\"wm-checkbox-label\">{{ label() }}</span>\r\n  }\r\n</label>\r\n", styles: [":host{display:inline-flex}.wm-checkbox-wrap{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.wm-checkbox-wrap.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.wm-checkbox-box{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;border:2px solid var(--wm-border-input);border-radius:4px;background:var(--wm-bg-base);color:#fff;cursor:pointer;padding:0;outline:none;transition:background var(--wm-transition-fast),border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast)}.wm-checkbox-box:focus-visible{box-shadow:0 0 0 2px var(--wm-bg-base),0 0 0 4px var(--wm-color-accent)}.wm-checkbox-box.is-checked,.wm-checkbox-box.is-indeterminate{background:var(--wm-color-accent);border-color:var(--wm-color-accent-readable)}.wm-checkbox-icon{width:12px;height:12px;display:block;flex-shrink:0}@keyframes check-draw{0%{stroke-dashoffset:16}to{stroke-dashoffset:0}}.check-mark{stroke-dasharray:16;stroke-dashoffset:0;animation:check-draw .18s ease-out forwards}.wm-checkbox-label{font-size:.875rem;color:var(--wm-text-primary);line-height:1.4}@media(prefers-reduced-motion:reduce){.wm-checkbox-box{transition:none}.check-mark{animation:none}}\n"] }]
+            args: [{ selector: 'wm-checkbox', template: "<label class=\"wm-checkbox-wrap\" [class.is-disabled]=\"disabled()\">\n  <button\n    type=\"button\"\n    role=\"checkbox\"\n    class=\"wm-checkbox-box\"\n    [class.is-checked]=\"checked()\"\n    [class.is-indeterminate]=\"indeterminate() && !checked()\"\n    [attr.aria-checked]=\"ariaChecked()\"\n    [attr.aria-disabled]=\"disabled() ? true : null\"\n    [disabled]=\"disabled() || null\"\n    (click)=\"toggle()\"\n    (keydown.space)=\"$event.preventDefault(); toggle()\"\n  >\n    @if (indeterminate() && !checked()) {\n      <!-- Dash for indeterminate (\"some selected\") state -->\n      <svg class=\"wm-checkbox-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n        <line x1=\"2\" y1=\"6\" x2=\"10\" y2=\"6\"\n          stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\"/>\n      </svg>\n    } @else if (checked()) {\n      <!-- Animated checkmark for selected state -->\n      <svg class=\"wm-checkbox-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n        <polyline class=\"check-mark\" points=\"2,6.5 4.5,9 10,3\"\n          fill=\"none\" stroke=\"currentColor\"\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    }\n  </button>\n\n  @if (label()) {\n    <span class=\"wm-checkbox-label\">{{ label() }}</span>\n  }\n</label>\n", styles: [":host{display:inline-flex}.wm-checkbox-wrap{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.wm-checkbox-wrap.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.wm-checkbox-box{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;border:2px solid var(--wm-border-input);border-radius:4px;background:var(--wm-bg-base);color:#fff;cursor:pointer;padding:0;outline:none;transition:background var(--wm-transition-fast),border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast)}.wm-checkbox-box:focus-visible{box-shadow:0 0 0 2px var(--wm-bg-base),0 0 0 4px var(--wm-color-accent)}.wm-checkbox-box.is-checked,.wm-checkbox-box.is-indeterminate{background:var(--wm-color-accent);border-color:var(--wm-color-accent-readable)}.wm-checkbox-icon{width:12px;height:12px;display:block;flex-shrink:0}@keyframes check-draw{0%{stroke-dashoffset:16}to{stroke-dashoffset:0}}.check-mark{stroke-dasharray:16;stroke-dashoffset:0;animation:check-draw .18s ease-out forwards}.wm-checkbox-label{font-size:.875rem;color:var(--wm-text-primary);line-height:1.4}@media(prefers-reduced-motion:reduce){.wm-checkbox-box{transition:none}.check-mark{animation:none}}\n"] }]
         }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**
@@ -623,7 +738,7 @@ class NumberInput {
                 useExisting: forwardRef(() => NumberInput),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  Uses .wm-input-group and .wm-number-* classes from inputs.css.\r\n  The input fills the group; the controls column sits at the trailing edge.\r\n-->\r\n<div\r\n  class=\"wm-input-group wm-number-field\"\r\n  [class.is-disabled]=\"disabled()\"\r\n>\r\n  <input\r\n    #inputEl\r\n    type=\"number\"\r\n    class=\"wm-input-bare wm-number-input\"\r\n    [value]=\"internalValue() ?? ''\"\r\n    [placeholder]=\"placeholder()\"\r\n    [attr.min]=\"min() ?? null\"\r\n    [attr.max]=\"max() ?? null\"\r\n    [step]=\"step()\"\r\n    [disabled]=\"disabled() || null\"\r\n    (change)=\"onInputChange($event)\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onTouchedFn()\"\r\n  />\r\n\r\n  <div class=\"wm-number-controls\" aria-hidden=\"true\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"wm-number-btn\"\r\n      tabindex=\"-1\"\r\n      [disabled]=\"disabled() || null\"\r\n      (mousedown)=\"preventFocusSteal($event)\"\r\n      (click)=\"increment()\"\r\n      aria-label=\"Increment\"\r\n    >\r\n      <!-- chevron-up (lucide) -->\r\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <path d=\"m18 15-6-6-6 6\"/>\r\n      </svg>\r\n    </button>\r\n    <button\r\n      type=\"button\"\r\n      class=\"wm-number-btn\"\r\n      tabindex=\"-1\"\r\n      [disabled]=\"disabled() || null\"\r\n      (mousedown)=\"preventFocusSteal($event)\"\r\n      (click)=\"decrement()\"\r\n      aria-label=\"Decrement\"\r\n    >\r\n      <!-- chevron-down (lucide) -->\r\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <path d=\"m6 9 6 6 6-6\"/>\r\n      </svg>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.wm-number-field.is-disabled{opacity:.45;pointer-events:none}\n"] });
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  Uses .wm-input-group and .wm-number-* classes from inputs.css.\n  The input fills the group; the controls column sits at the trailing edge.\n-->\n<div\n  class=\"wm-input-group wm-number-field\"\n  [class.is-disabled]=\"disabled()\"\n>\n  <input\n    #inputEl\n    type=\"number\"\n    class=\"wm-input-bare wm-number-input\"\n    [value]=\"internalValue() ?? ''\"\n    [placeholder]=\"placeholder()\"\n    [attr.min]=\"min() ?? null\"\n    [attr.max]=\"max() ?? null\"\n    [step]=\"step()\"\n    [disabled]=\"disabled() || null\"\n    (change)=\"onInputChange($event)\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onTouchedFn()\"\n  />\n\n  <div class=\"wm-number-controls\" aria-hidden=\"true\">\n    <button\n      type=\"button\"\n      class=\"wm-number-btn\"\n      tabindex=\"-1\"\n      [disabled]=\"disabled() || null\"\n      (mousedown)=\"preventFocusSteal($event)\"\n      (click)=\"increment()\"\n      aria-label=\"Increment\"\n    >\n      <!-- chevron-up (lucide) -->\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path d=\"m18 15-6-6-6 6\"/>\n      </svg>\n    </button>\n    <button\n      type=\"button\"\n      class=\"wm-number-btn\"\n      tabindex=\"-1\"\n      [disabled]=\"disabled() || null\"\n      (mousedown)=\"preventFocusSteal($event)\"\n      (click)=\"decrement()\"\n      aria-label=\"Decrement\"\n    >\n      <!-- chevron-down (lucide) -->\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path d=\"m6 9 6 6 6-6\"/>\n      </svg>\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block}.wm-number-field.is-disabled{opacity:.45;pointer-events:none}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NumberInput, decorators: [{
             type: Component,
@@ -633,7 +748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                             useExisting: forwardRef(() => NumberInput),
                             multi: true,
                         },
-                    ], template: "<!--\r\n  Uses .wm-input-group and .wm-number-* classes from inputs.css.\r\n  The input fills the group; the controls column sits at the trailing edge.\r\n-->\r\n<div\r\n  class=\"wm-input-group wm-number-field\"\r\n  [class.is-disabled]=\"disabled()\"\r\n>\r\n  <input\r\n    #inputEl\r\n    type=\"number\"\r\n    class=\"wm-input-bare wm-number-input\"\r\n    [value]=\"internalValue() ?? ''\"\r\n    [placeholder]=\"placeholder()\"\r\n    [attr.min]=\"min() ?? null\"\r\n    [attr.max]=\"max() ?? null\"\r\n    [step]=\"step()\"\r\n    [disabled]=\"disabled() || null\"\r\n    (change)=\"onInputChange($event)\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onTouchedFn()\"\r\n  />\r\n\r\n  <div class=\"wm-number-controls\" aria-hidden=\"true\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"wm-number-btn\"\r\n      tabindex=\"-1\"\r\n      [disabled]=\"disabled() || null\"\r\n      (mousedown)=\"preventFocusSteal($event)\"\r\n      (click)=\"increment()\"\r\n      aria-label=\"Increment\"\r\n    >\r\n      <!-- chevron-up (lucide) -->\r\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <path d=\"m18 15-6-6-6 6\"/>\r\n      </svg>\r\n    </button>\r\n    <button\r\n      type=\"button\"\r\n      class=\"wm-number-btn\"\r\n      tabindex=\"-1\"\r\n      [disabled]=\"disabled() || null\"\r\n      (mousedown)=\"preventFocusSteal($event)\"\r\n      (click)=\"decrement()\"\r\n      aria-label=\"Decrement\"\r\n    >\r\n      <!-- chevron-down (lucide) -->\r\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <path d=\"m6 9 6 6 6-6\"/>\r\n      </svg>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.wm-number-field.is-disabled{opacity:.45;pointer-events:none}\n"] }]
+                    ], template: "<!--\n  Uses .wm-input-group and .wm-number-* classes from inputs.css.\n  The input fills the group; the controls column sits at the trailing edge.\n-->\n<div\n  class=\"wm-input-group wm-number-field\"\n  [class.is-disabled]=\"disabled()\"\n>\n  <input\n    #inputEl\n    type=\"number\"\n    class=\"wm-input-bare wm-number-input\"\n    [value]=\"internalValue() ?? ''\"\n    [placeholder]=\"placeholder()\"\n    [attr.min]=\"min() ?? null\"\n    [attr.max]=\"max() ?? null\"\n    [step]=\"step()\"\n    [disabled]=\"disabled() || null\"\n    (change)=\"onInputChange($event)\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onTouchedFn()\"\n  />\n\n  <div class=\"wm-number-controls\" aria-hidden=\"true\">\n    <button\n      type=\"button\"\n      class=\"wm-number-btn\"\n      tabindex=\"-1\"\n      [disabled]=\"disabled() || null\"\n      (mousedown)=\"preventFocusSteal($event)\"\n      (click)=\"increment()\"\n      aria-label=\"Increment\"\n    >\n      <!-- chevron-up (lucide) -->\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path d=\"m18 15-6-6-6 6\"/>\n      </svg>\n    </button>\n    <button\n      type=\"button\"\n      class=\"wm-number-btn\"\n      tabindex=\"-1\"\n      [disabled]=\"disabled() || null\"\n      (mousedown)=\"preventFocusSteal($event)\"\n      (click)=\"decrement()\"\n      aria-label=\"Decrement\"\n    >\n      <!-- chevron-down (lucide) -->\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path d=\"m6 9 6 6 6-6\"/>\n      </svg>\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block}.wm-number-field.is-disabled{opacity:.45;pointer-events:none}\n"] }]
         }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }] } });
 
 /**
@@ -662,11 +777,11 @@ class Toggle {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: Toggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: Toggle, isStandalone: true, selector: "wm-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  role=\"switch\"\r\n  class=\"wm-toggle\"\r\n  [class.is-on]=\"checked()\"\r\n  [class.is-disabled]=\"disabled()\"\r\n  [attr.aria-checked]=\"checked()\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.aria-disabled]=\"disabled() ? true : null\"\r\n  [disabled]=\"disabled() || null\"\r\n  (click)=\"toggle()\"\r\n>\r\n  <span class=\"wm-toggle-track\" aria-hidden=\"true\">\r\n    <span class=\"wm-toggle-thumb\"></span>\r\n  </span>\r\n</button>\r\n", styles: [":host{display:inline-flex}.wm-toggle{display:inline-flex;align-items:center;background:none;border:none;padding:2px;margin:-2px;cursor:pointer;border-radius:var(--wm-radius-full);outline:none}.wm-toggle:focus-visible .wm-toggle-track{outline:2px solid var(--wm-color-accent);outline-offset:2px}.wm-toggle.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.wm-toggle-track{position:relative;width:40px;height:22px;background:var(--wm-border-input);border-radius:var(--wm-radius-full);transition:background var(--wm-transition-fast);flex-shrink:0}.wm-toggle.is-on .wm-toggle-track{background:var(--wm-color-accent)}.wm-toggle-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:var(--wm-radius-full);box-shadow:0 1px 3px #00000040;transition:transform var(--wm-transition-fast)}.wm-toggle.is-on .wm-toggle-thumb{transform:translate(18px)}@media(prefers-reduced-motion:reduce){.wm-toggle-track,.wm-toggle-thumb{transition:none}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: Toggle, isStandalone: true, selector: "wm-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<button\n  type=\"button\"\n  role=\"switch\"\n  class=\"wm-toggle\"\n  [class.is-on]=\"checked()\"\n  [class.is-disabled]=\"disabled()\"\n  [attr.aria-checked]=\"checked()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-disabled]=\"disabled() ? true : null\"\n  [disabled]=\"disabled() || null\"\n  (click)=\"toggle()\"\n>\n  <span class=\"wm-toggle-track\" aria-hidden=\"true\">\n    <span class=\"wm-toggle-thumb\"></span>\n  </span>\n</button>\n", styles: [":host{display:inline-flex}.wm-toggle{display:inline-flex;align-items:center;background:none;border:none;padding:2px;margin:-2px;cursor:pointer;border-radius:var(--wm-radius-full);outline:none}.wm-toggle:focus-visible .wm-toggle-track{outline:2px solid var(--wm-color-accent);outline-offset:2px}.wm-toggle.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.wm-toggle-track{position:relative;width:40px;height:22px;background:var(--wm-border-input);border-radius:var(--wm-radius-full);transition:background var(--wm-transition-fast);flex-shrink:0}.wm-toggle.is-on .wm-toggle-track{background:var(--wm-color-accent)}.wm-toggle-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:var(--wm-radius-full);box-shadow:0 1px 3px #00000040;transition:transform var(--wm-transition-fast)}.wm-toggle.is-on .wm-toggle-thumb{transform:translate(18px)}@media(prefers-reduced-motion:reduce){.wm-toggle-track,.wm-toggle-thumb{transition:none}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: Toggle, decorators: [{
             type: Component,
-            args: [{ selector: 'wm-toggle', template: "<button\r\n  type=\"button\"\r\n  role=\"switch\"\r\n  class=\"wm-toggle\"\r\n  [class.is-on]=\"checked()\"\r\n  [class.is-disabled]=\"disabled()\"\r\n  [attr.aria-checked]=\"checked()\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.aria-disabled]=\"disabled() ? true : null\"\r\n  [disabled]=\"disabled() || null\"\r\n  (click)=\"toggle()\"\r\n>\r\n  <span class=\"wm-toggle-track\" aria-hidden=\"true\">\r\n    <span class=\"wm-toggle-thumb\"></span>\r\n  </span>\r\n</button>\r\n", styles: [":host{display:inline-flex}.wm-toggle{display:inline-flex;align-items:center;background:none;border:none;padding:2px;margin:-2px;cursor:pointer;border-radius:var(--wm-radius-full);outline:none}.wm-toggle:focus-visible .wm-toggle-track{outline:2px solid var(--wm-color-accent);outline-offset:2px}.wm-toggle.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.wm-toggle-track{position:relative;width:40px;height:22px;background:var(--wm-border-input);border-radius:var(--wm-radius-full);transition:background var(--wm-transition-fast);flex-shrink:0}.wm-toggle.is-on .wm-toggle-track{background:var(--wm-color-accent)}.wm-toggle-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:var(--wm-radius-full);box-shadow:0 1px 3px #00000040;transition:transform var(--wm-transition-fast)}.wm-toggle.is-on .wm-toggle-thumb{transform:translate(18px)}@media(prefers-reduced-motion:reduce){.wm-toggle-track,.wm-toggle-thumb{transition:none}}\n"] }]
+            args: [{ selector: 'wm-toggle', template: "<button\n  type=\"button\"\n  role=\"switch\"\n  class=\"wm-toggle\"\n  [class.is-on]=\"checked()\"\n  [class.is-disabled]=\"disabled()\"\n  [attr.aria-checked]=\"checked()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-disabled]=\"disabled() ? true : null\"\n  [disabled]=\"disabled() || null\"\n  (click)=\"toggle()\"\n>\n  <span class=\"wm-toggle-track\" aria-hidden=\"true\">\n    <span class=\"wm-toggle-thumb\"></span>\n  </span>\n</button>\n", styles: [":host{display:inline-flex}.wm-toggle{display:inline-flex;align-items:center;background:none;border:none;padding:2px;margin:-2px;cursor:pointer;border-radius:var(--wm-radius-full);outline:none}.wm-toggle:focus-visible .wm-toggle-track{outline:2px solid var(--wm-color-accent);outline-offset:2px}.wm-toggle.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.wm-toggle-track{position:relative;width:40px;height:22px;background:var(--wm-border-input);border-radius:var(--wm-radius-full);transition:background var(--wm-transition-fast);flex-shrink:0}.wm-toggle.is-on .wm-toggle-track{background:var(--wm-color-accent)}.wm-toggle-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:var(--wm-radius-full);box-shadow:0 1px 3px #00000040;transition:transform var(--wm-transition-fast)}.wm-toggle.is-on .wm-toggle-thumb{transform:translate(18px)}@media(prefers-reduced-motion:reduce){.wm-toggle-track,.wm-toggle-thumb{transition:none}}\n"] }]
         }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /**
@@ -717,11 +832,11 @@ class PageHeader {
     subtitle = input(...(ngDevMode ? [undefined, { debugName: "subtitle" }] : []));
     badgeLabel = input(...(ngDevMode ? [undefined, { debugName: "badgeLabel" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: PageHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: PageHeader, isStandalone: true, selector: "wm-page-header", inputs: { flavourText: { classPropertyName: "flavourText", publicName: "flavourText", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, badgeLabel: { classPropertyName: "badgeLabel", publicName: "badgeLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<header class=\"wm-page-header\">\r\n  <div class=\"wm-page-header__left\">\r\n    <div class=\"wm-page-header__eyebrow\">\r\n      <ng-content select=\"[icon]\" />\r\n      <span>{{ flavourText() }}</span>\r\n    </div>\r\n    <h2 class=\"wm-page-header__title\">{{ title() }}</h2>\r\n    @if (subtitle()) {\r\n      <p class=\"wm-page-header__subtitle\">{{ subtitle() }}</p>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"wm-page-header__right\">\r\n    <div class=\"wm-page-header__status\">\r\n      @if (badgeLabel()) {\r\n        <span class=\"wm-page-header__badge\">{{ badgeLabel() }}</span>\r\n      }\r\n      <ng-content select=\"[back]\" />\r\n    </div>\r\n    <div class=\"wm-page-header__actions\">\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n</header>\r\n", styles: ["wm-page-header,.wm-page-header{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--wm-border-subtle);padding-bottom:1.5rem}.wm-page-header__left{display:flex;flex-direction:column;gap:4px}.wm-page-header__eyebrow{display:flex;align-items:center;gap:8px;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--wm-text-muted)}.wm-page-header__eyebrow svg,.wm-page-header__eyebrow img{width:12px;height:12px;flex-shrink:0}.wm-page-header__title{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:-.025em;color:var(--wm-text-primary)}.wm-page-header__subtitle{margin:0;font-size:.875rem;color:var(--wm-text-muted)}.wm-page-header__right{display:flex;flex-direction:column;align-items:flex-end;gap:12px}.wm-page-header__status,.wm-page-header__actions{display:flex;align-items:center;gap:12px}.wm-page-header__actions:empty{display:none}.wm-page-header__badge{font-size:.6875rem;font-family:var(--wm-font-mono, monospace);font-weight:700;text-transform:uppercase;letter-spacing:-.05em;color:var(--wm-text-muted);background:var(--wm-bg-float);padding:4px 8px;border-radius:var(--wm-radius-sm);border:1px solid var(--wm-border-subtle);box-shadow:0 1px 2px #0000000d;white-space:nowrap}@media(max-width:767px){wm-page-header,.wm-page-header{flex-direction:column;align-items:stretch;gap:6px;padding-bottom:0;border-bottom:none}.wm-page-header__right{align-items:flex-start}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: PageHeader, isStandalone: true, selector: "wm-page-header", inputs: { flavourText: { classPropertyName: "flavourText", publicName: "flavourText", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, badgeLabel: { classPropertyName: "badgeLabel", publicName: "badgeLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<header class=\"wm-page-header\">\n  <div class=\"wm-page-header__left\">\n    <div class=\"wm-page-header__eyebrow\">\n      <ng-content select=\"[icon]\" />\n      <span>{{ flavourText() }}</span>\n    </div>\n    <h2 class=\"wm-page-header__title\">{{ title() }}</h2>\n    @if (subtitle()) {\n      <p class=\"wm-page-header__subtitle\">{{ subtitle() }}</p>\n    }\n  </div>\n\n  <div class=\"wm-page-header__right\">\n    <div class=\"wm-page-header__status\">\n      @if (badgeLabel()) {\n        <span class=\"wm-page-header__badge\">{{ badgeLabel() }}</span>\n      }\n      <ng-content select=\"[back]\" />\n    </div>\n    <div class=\"wm-page-header__actions\">\n      <ng-content />\n    </div>\n  </div>\n</header>\n", styles: ["wm-page-header,.wm-page-header{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--wm-border-subtle);padding-bottom:1.5rem}.wm-page-header__left{display:flex;flex-direction:column;gap:4px}.wm-page-header__eyebrow{display:flex;align-items:center;gap:8px;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--wm-text-muted)}.wm-page-header__eyebrow svg,.wm-page-header__eyebrow img{width:12px;height:12px;flex-shrink:0}.wm-page-header__title{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:-.025em;color:var(--wm-text-primary)}.wm-page-header__subtitle{margin:0;font-size:.875rem;color:var(--wm-text-muted)}.wm-page-header__right{display:flex;flex-direction:column;align-items:flex-end;gap:12px}.wm-page-header__status,.wm-page-header__actions{display:flex;align-items:center;gap:12px}.wm-page-header__actions:empty{display:none}.wm-page-header__badge{font-size:.6875rem;font-family:var(--wm-font-mono, monospace);font-weight:700;text-transform:uppercase;letter-spacing:-.05em;color:var(--wm-text-muted);background:var(--wm-bg-float);padding:4px 8px;border-radius:var(--wm-radius-sm);border:1px solid var(--wm-border-subtle);box-shadow:0 1px 2px #0000000d;white-space:nowrap}@media(max-width:767px){wm-page-header,.wm-page-header{flex-direction:column;align-items:stretch;gap:6px;padding-bottom:0;border-bottom:none}.wm-page-header__right{align-items:flex-start}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: PageHeader, decorators: [{
             type: Component,
-            args: [{ selector: 'wm-page-header', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"wm-page-header\">\r\n  <div class=\"wm-page-header__left\">\r\n    <div class=\"wm-page-header__eyebrow\">\r\n      <ng-content select=\"[icon]\" />\r\n      <span>{{ flavourText() }}</span>\r\n    </div>\r\n    <h2 class=\"wm-page-header__title\">{{ title() }}</h2>\r\n    @if (subtitle()) {\r\n      <p class=\"wm-page-header__subtitle\">{{ subtitle() }}</p>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"wm-page-header__right\">\r\n    <div class=\"wm-page-header__status\">\r\n      @if (badgeLabel()) {\r\n        <span class=\"wm-page-header__badge\">{{ badgeLabel() }}</span>\r\n      }\r\n      <ng-content select=\"[back]\" />\r\n    </div>\r\n    <div class=\"wm-page-header__actions\">\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n</header>\r\n", styles: ["wm-page-header,.wm-page-header{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--wm-border-subtle);padding-bottom:1.5rem}.wm-page-header__left{display:flex;flex-direction:column;gap:4px}.wm-page-header__eyebrow{display:flex;align-items:center;gap:8px;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--wm-text-muted)}.wm-page-header__eyebrow svg,.wm-page-header__eyebrow img{width:12px;height:12px;flex-shrink:0}.wm-page-header__title{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:-.025em;color:var(--wm-text-primary)}.wm-page-header__subtitle{margin:0;font-size:.875rem;color:var(--wm-text-muted)}.wm-page-header__right{display:flex;flex-direction:column;align-items:flex-end;gap:12px}.wm-page-header__status,.wm-page-header__actions{display:flex;align-items:center;gap:12px}.wm-page-header__actions:empty{display:none}.wm-page-header__badge{font-size:.6875rem;font-family:var(--wm-font-mono, monospace);font-weight:700;text-transform:uppercase;letter-spacing:-.05em;color:var(--wm-text-muted);background:var(--wm-bg-float);padding:4px 8px;border-radius:var(--wm-radius-sm);border:1px solid var(--wm-border-subtle);box-shadow:0 1px 2px #0000000d;white-space:nowrap}@media(max-width:767px){wm-page-header,.wm-page-header{flex-direction:column;align-items:stretch;gap:6px;padding-bottom:0;border-bottom:none}.wm-page-header__right{align-items:flex-start}}\n"] }]
+            args: [{ selector: 'wm-page-header', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"wm-page-header\">\n  <div class=\"wm-page-header__left\">\n    <div class=\"wm-page-header__eyebrow\">\n      <ng-content select=\"[icon]\" />\n      <span>{{ flavourText() }}</span>\n    </div>\n    <h2 class=\"wm-page-header__title\">{{ title() }}</h2>\n    @if (subtitle()) {\n      <p class=\"wm-page-header__subtitle\">{{ subtitle() }}</p>\n    }\n  </div>\n\n  <div class=\"wm-page-header__right\">\n    <div class=\"wm-page-header__status\">\n      @if (badgeLabel()) {\n        <span class=\"wm-page-header__badge\">{{ badgeLabel() }}</span>\n      }\n      <ng-content select=\"[back]\" />\n    </div>\n    <div class=\"wm-page-header__actions\">\n      <ng-content />\n    </div>\n  </div>\n</header>\n", styles: ["wm-page-header,.wm-page-header{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--wm-border-subtle);padding-bottom:1.5rem}.wm-page-header__left{display:flex;flex-direction:column;gap:4px}.wm-page-header__eyebrow{display:flex;align-items:center;gap:8px;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--wm-text-muted)}.wm-page-header__eyebrow svg,.wm-page-header__eyebrow img{width:12px;height:12px;flex-shrink:0}.wm-page-header__title{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:-.025em;color:var(--wm-text-primary)}.wm-page-header__subtitle{margin:0;font-size:.875rem;color:var(--wm-text-muted)}.wm-page-header__right{display:flex;flex-direction:column;align-items:flex-end;gap:12px}.wm-page-header__status,.wm-page-header__actions{display:flex;align-items:center;gap:12px}.wm-page-header__actions:empty{display:none}.wm-page-header__badge{font-size:.6875rem;font-family:var(--wm-font-mono, monospace);font-weight:700;text-transform:uppercase;letter-spacing:-.05em;color:var(--wm-text-muted);background:var(--wm-bg-float);padding:4px 8px;border-radius:var(--wm-radius-sm);border:1px solid var(--wm-border-subtle);box-shadow:0 1px 2px #0000000d;white-space:nowrap}@media(max-width:767px){wm-page-header,.wm-page-header{flex-direction:column;align-items:stretch;gap:6px;padding-bottom:0;border-bottom:none}.wm-page-header__right{align-items:flex-start}}\n"] }]
         }], propDecorators: { flavourText: [{ type: i0.Input, args: [{ isSignal: true, alias: "flavourText", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], badgeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeLabel", required: false }] }] } });
 
 /** Module-level counter for unique panel instance IDs. */
@@ -887,6 +1002,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  *   <wm-combobox formControlName="tag" [options]="tags" />
  */
 class WmCombobox {
+    /**
+     * Keeps the panel anchored to its trigger while an ancestor scrolls.
+     *
+     * One instance per component, because a ScrollStrategy holds a single
+     * overlayRef and could not tell two open overlays apart. Without it the
+     * panel takes CDK's default, which cannot hear a scroll from any container
+     * that is not marked `cdkScrollable` - so in a fixed-height shell the panel
+     * keeps the coordinates it was born with while the trigger scrolls away.
+     */
+    scrollStrategy = new WmAnchoredScrollStrategy();
     // ── Public inputs ──────────────────────────────────────────────────────
     /** Full option list (before filtering). */
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
@@ -1402,7 +1527,7 @@ class WmCombobox {
                 useExisting: forwardRef(() => WmCombobox),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ComboboxPanel, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Trigger wrapper \u2014 anchors the CDK overlay -->\n<div\n  class=\"wm-cb-trigger\"\n  [class.is-open]=\"isOpen()\"\n  [class.is-disabled]=\"disabled()\"\n  cdkOverlayOrigin\n  #origin=\"cdkOverlayOrigin\"\n  (click)=\"onTriggerClick()\"\n>\n  <!-- Multi-select chips -->\n  @if (multiple()) {\n    @for (chip of chips(); track chip.value) {\n      <span class=\"wm-cb-chip\">\n        <span class=\"wm-cb-chip-label\">{{ chip.label }}</span>\n        <button\n          type=\"button\"\n          class=\"wm-cb-chip-remove\"\n          tabindex=\"-1\"\n          [attr.aria-label]=\"'Remove ' + chip.label\"\n          (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n          (click)=\"$event.stopPropagation(); removeChip(chip.value)\"\n        >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M18 6L6 18M6 6l12 12\"\n              stroke=\"currentColor\" stroke-width=\"2\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n      </span>\n    }\n  }\n\n  <!-- Text input -->\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"wm-cb-input\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    [attr.placeholder]=\"chips().length ? '' : placeholder()\"\n    [attr.aria-label]=\"ariaLabelledby() ? null : ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledby()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-autocomplete]=\"allowFreeform() ? 'both' : 'list'\"\n    [attr.aria-activedescendant]=\"activeDescendant()\"\n    [attr.aria-controls]=\"isOpen() ? panelListboxId() : null\"\n    [disabled]=\"disabled() || null\"\n    [value]=\"inputText()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <!-- Chevron -->\n  <svg\n    class=\"wm-cb-chevron\"\n    [class.is-open]=\"isOpen()\"\n    width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n    fill=\"none\" aria-hidden=\"true\"\n  >\n    <path d=\"M6 9l6 6 6-6\"\n      stroke=\"currentColor\" stroke-width=\"2\"\n      stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n</div>\n\n<!-- Live region for screen readers -->\n<span class=\"wm-cb-sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  {{ liveText() }}\n</span>\n\n<!-- Dropdown panel in CDK overlay -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayWidth]=\"overlayWidth\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"wm-cb-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"wm-cb-panel\">\n    <wm-combobox-panel\n      [options]=\"filteredOptions()\"\n      [highlightIndex]=\"highlightIndex()\"\n      [selectedValues]=\"selectedValues()\"\n      [multiple]=\"multiple()\"\n      [itemHeight]=\"itemHeight()\"\n      [maxHeight]=\"maxPanelHeight()\"\n      [filterQuery]=\"inputText()\"\n      [loading]=\"asyncLoading()\"\n      [freeformHint]=\"freeformHint()\"\n      (optionClicked)=\"onOptionClicked($event)\"\n    />\n  </div>\n</ng-template>\n", styles: [":host{display:block}.wm-cb-trigger{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;width:100%;min-height:36px;padding:.25rem .5rem;background:var(--wm-bg-base);border:1px solid var(--wm-border-input);border-radius:var(--wm-radius-sm);color:var(--wm-text-primary);font-size:.875rem;cursor:text;transition:border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast)}.wm-cb-trigger:hover:not(.is-disabled){border-color:var(--wm-color-accent-readable)}.wm-cb-trigger:focus-within:not(.is-disabled){border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 25%,transparent)}.wm-cb-trigger.is-open{border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 20%,transparent)}.wm-cb-trigger.is-disabled{opacity:.45;cursor:not-allowed}.wm-cb-input{flex:1 1 60px;min-width:60px;border:none;outline:none;background:transparent;color:inherit;font:inherit;padding:.125rem 0}.wm-cb-input::placeholder{color:var(--wm-text-placeholder)}.wm-cb-input:disabled{cursor:not-allowed}.wm-cb-chevron{flex-shrink:0;color:var(--wm-text-muted);transition:transform var(--wm-transition-fast);pointer-events:none}.wm-cb-chevron.is-open{transform:rotate(180deg)}.wm-cb-chip{display:inline-flex;align-items:center;gap:.25rem;max-width:100%;padding:.125rem .375rem;background:color-mix(in srgb,var(--wm-color-accent) 15%,transparent);border:1px solid color-mix(in srgb,var(--wm-color-accent) 30%,transparent);border-radius:var(--wm-radius-sm);font-size:.8125rem;line-height:1.4;color:var(--wm-text-primary);-webkit-user-select:none;user-select:none}.wm-cb-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-cb-chip-remove{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--wm-text-muted);cursor:pointer;border-radius:var(--wm-radius-sm);transition:color var(--wm-transition-fast)}.wm-cb-chip-remove:hover{color:var(--wm-text-primary)}.wm-cb-backdrop{position:fixed;inset:0}.wm-cb-panel{width:100%;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #0000001f;overflow:hidden;padding:.25rem}.wm-cb-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ComboboxPanel, selector: "wm-combobox-panel", inputs: ["options", "highlightIndex", "selectedValues", "multiple", "itemHeight", "maxHeight", "filterQuery", "loading", "freeformHint"], outputs: ["optionClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ComboboxPanel, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Trigger wrapper \u2014 anchors the CDK overlay -->\n<div\n  class=\"wm-cb-trigger\"\n  [class.is-open]=\"isOpen()\"\n  [class.is-disabled]=\"disabled()\"\n  cdkOverlayOrigin\n  #origin=\"cdkOverlayOrigin\"\n  (click)=\"onTriggerClick()\"\n>\n  <!-- Multi-select chips -->\n  @if (multiple()) {\n    @for (chip of chips(); track chip.value) {\n      <span class=\"wm-cb-chip\">\n        <span class=\"wm-cb-chip-label\">{{ chip.label }}</span>\n        <button\n          type=\"button\"\n          class=\"wm-cb-chip-remove\"\n          tabindex=\"-1\"\n          [attr.aria-label]=\"'Remove ' + chip.label\"\n          (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n          (click)=\"$event.stopPropagation(); removeChip(chip.value)\"\n        >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M18 6L6 18M6 6l12 12\"\n              stroke=\"currentColor\" stroke-width=\"2\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n      </span>\n    }\n  }\n\n  <!-- Text input -->\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"wm-cb-input\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    [attr.placeholder]=\"chips().length ? '' : placeholder()\"\n    [attr.aria-label]=\"ariaLabelledby() ? null : ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledby()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-autocomplete]=\"allowFreeform() ? 'both' : 'list'\"\n    [attr.aria-activedescendant]=\"activeDescendant()\"\n    [attr.aria-controls]=\"isOpen() ? panelListboxId() : null\"\n    [disabled]=\"disabled() || null\"\n    [value]=\"inputText()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <!-- Chevron -->\n  <svg\n    class=\"wm-cb-chevron\"\n    [class.is-open]=\"isOpen()\"\n    width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n    fill=\"none\" aria-hidden=\"true\"\n  >\n    <path d=\"M6 9l6 6 6-6\"\n      stroke=\"currentColor\" stroke-width=\"2\"\n      stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n</div>\n\n<!-- Live region for screen readers -->\n<span class=\"wm-cb-sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  {{ liveText() }}\n</span>\n\n<!-- Dropdown panel in CDK overlay -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayWidth]=\"overlayWidth\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"wm-cb-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"wm-cb-panel\">\n    <wm-combobox-panel\n      [options]=\"filteredOptions()\"\n      [highlightIndex]=\"highlightIndex()\"\n      [selectedValues]=\"selectedValues()\"\n      [multiple]=\"multiple()\"\n      [itemHeight]=\"itemHeight()\"\n      [maxHeight]=\"maxPanelHeight()\"\n      [filterQuery]=\"inputText()\"\n      [loading]=\"asyncLoading()\"\n      [freeformHint]=\"freeformHint()\"\n      (optionClicked)=\"onOptionClicked($event)\"\n    />\n  </div>\n</ng-template>\n", styles: [":host{display:block}.wm-cb-trigger{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;width:100%;min-height:36px;padding:.25rem .5rem;background:var(--wm-bg-base);border:1px solid var(--wm-border-input);border-radius:var(--wm-radius-sm);color:var(--wm-text-primary);font-size:.875rem;cursor:text;transition:border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast)}.wm-cb-trigger:hover:not(.is-disabled){border-color:var(--wm-color-accent-readable)}.wm-cb-trigger:focus-within:not(.is-disabled){border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 25%,transparent)}.wm-cb-trigger.is-open{border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 20%,transparent)}.wm-cb-trigger.is-disabled{opacity:.45;cursor:not-allowed}.wm-cb-input{flex:1 1 60px;min-width:60px;border:none;outline:none;background:transparent;color:inherit;font:inherit;padding:.125rem 0}.wm-cb-input::placeholder{color:var(--wm-text-placeholder)}.wm-cb-input:disabled{cursor:not-allowed}.wm-cb-chevron{flex-shrink:0;color:var(--wm-text-muted);transition:transform var(--wm-transition-fast);pointer-events:none}.wm-cb-chevron.is-open{transform:rotate(180deg)}.wm-cb-chip{display:inline-flex;align-items:center;gap:.25rem;max-width:100%;padding:.125rem .375rem;background:color-mix(in srgb,var(--wm-color-accent) 15%,transparent);border:1px solid color-mix(in srgb,var(--wm-color-accent) 30%,transparent);border-radius:var(--wm-radius-sm);font-size:.8125rem;line-height:1.4;color:var(--wm-text-primary);-webkit-user-select:none;user-select:none}.wm-cb-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-cb-chip-remove{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--wm-text-muted);cursor:pointer;border-radius:var(--wm-radius-sm);transition:color var(--wm-transition-fast)}.wm-cb-chip-remove:hover{color:var(--wm-text-primary)}.wm-cb-backdrop{position:fixed;inset:0}.wm-cb-panel{width:100%;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #0000001f;overflow:hidden;padding:.25rem}.wm-cb-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ComboboxPanel, selector: "wm-combobox-panel", inputs: ["options", "highlightIndex", "selectedValues", "multiple", "itemHeight", "maxHeight", "filterQuery", "loading", "freeformHint"], outputs: ["optionClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmCombobox, decorators: [{
             type: Component,
@@ -1412,10 +1537,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                             useExisting: forwardRef(() => WmCombobox),
                             multi: true,
                         },
-                    ], template: "<!-- Trigger wrapper \u2014 anchors the CDK overlay -->\n<div\n  class=\"wm-cb-trigger\"\n  [class.is-open]=\"isOpen()\"\n  [class.is-disabled]=\"disabled()\"\n  cdkOverlayOrigin\n  #origin=\"cdkOverlayOrigin\"\n  (click)=\"onTriggerClick()\"\n>\n  <!-- Multi-select chips -->\n  @if (multiple()) {\n    @for (chip of chips(); track chip.value) {\n      <span class=\"wm-cb-chip\">\n        <span class=\"wm-cb-chip-label\">{{ chip.label }}</span>\n        <button\n          type=\"button\"\n          class=\"wm-cb-chip-remove\"\n          tabindex=\"-1\"\n          [attr.aria-label]=\"'Remove ' + chip.label\"\n          (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n          (click)=\"$event.stopPropagation(); removeChip(chip.value)\"\n        >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M18 6L6 18M6 6l12 12\"\n              stroke=\"currentColor\" stroke-width=\"2\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n      </span>\n    }\n  }\n\n  <!-- Text input -->\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"wm-cb-input\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    [attr.placeholder]=\"chips().length ? '' : placeholder()\"\n    [attr.aria-label]=\"ariaLabelledby() ? null : ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledby()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-autocomplete]=\"allowFreeform() ? 'both' : 'list'\"\n    [attr.aria-activedescendant]=\"activeDescendant()\"\n    [attr.aria-controls]=\"isOpen() ? panelListboxId() : null\"\n    [disabled]=\"disabled() || null\"\n    [value]=\"inputText()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <!-- Chevron -->\n  <svg\n    class=\"wm-cb-chevron\"\n    [class.is-open]=\"isOpen()\"\n    width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n    fill=\"none\" aria-hidden=\"true\"\n  >\n    <path d=\"M6 9l6 6 6-6\"\n      stroke=\"currentColor\" stroke-width=\"2\"\n      stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n</div>\n\n<!-- Live region for screen readers -->\n<span class=\"wm-cb-sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  {{ liveText() }}\n</span>\n\n<!-- Dropdown panel in CDK overlay -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayWidth]=\"overlayWidth\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"wm-cb-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"wm-cb-panel\">\n    <wm-combobox-panel\n      [options]=\"filteredOptions()\"\n      [highlightIndex]=\"highlightIndex()\"\n      [selectedValues]=\"selectedValues()\"\n      [multiple]=\"multiple()\"\n      [itemHeight]=\"itemHeight()\"\n      [maxHeight]=\"maxPanelHeight()\"\n      [filterQuery]=\"inputText()\"\n      [loading]=\"asyncLoading()\"\n      [freeformHint]=\"freeformHint()\"\n      (optionClicked)=\"onOptionClicked($event)\"\n    />\n  </div>\n</ng-template>\n", styles: [":host{display:block}.wm-cb-trigger{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;width:100%;min-height:36px;padding:.25rem .5rem;background:var(--wm-bg-base);border:1px solid var(--wm-border-input);border-radius:var(--wm-radius-sm);color:var(--wm-text-primary);font-size:.875rem;cursor:text;transition:border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast)}.wm-cb-trigger:hover:not(.is-disabled){border-color:var(--wm-color-accent-readable)}.wm-cb-trigger:focus-within:not(.is-disabled){border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 25%,transparent)}.wm-cb-trigger.is-open{border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 20%,transparent)}.wm-cb-trigger.is-disabled{opacity:.45;cursor:not-allowed}.wm-cb-input{flex:1 1 60px;min-width:60px;border:none;outline:none;background:transparent;color:inherit;font:inherit;padding:.125rem 0}.wm-cb-input::placeholder{color:var(--wm-text-placeholder)}.wm-cb-input:disabled{cursor:not-allowed}.wm-cb-chevron{flex-shrink:0;color:var(--wm-text-muted);transition:transform var(--wm-transition-fast);pointer-events:none}.wm-cb-chevron.is-open{transform:rotate(180deg)}.wm-cb-chip{display:inline-flex;align-items:center;gap:.25rem;max-width:100%;padding:.125rem .375rem;background:color-mix(in srgb,var(--wm-color-accent) 15%,transparent);border:1px solid color-mix(in srgb,var(--wm-color-accent) 30%,transparent);border-radius:var(--wm-radius-sm);font-size:.8125rem;line-height:1.4;color:var(--wm-text-primary);-webkit-user-select:none;user-select:none}.wm-cb-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-cb-chip-remove{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--wm-text-muted);cursor:pointer;border-radius:var(--wm-radius-sm);transition:color var(--wm-transition-fast)}.wm-cb-chip-remove:hover{color:var(--wm-text-primary)}.wm-cb-backdrop{position:fixed;inset:0}.wm-cb-panel{width:100%;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #0000001f;overflow:hidden;padding:.25rem}.wm-cb-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+                    ], template: "<!-- Trigger wrapper \u2014 anchors the CDK overlay -->\n<div\n  class=\"wm-cb-trigger\"\n  [class.is-open]=\"isOpen()\"\n  [class.is-disabled]=\"disabled()\"\n  cdkOverlayOrigin\n  #origin=\"cdkOverlayOrigin\"\n  (click)=\"onTriggerClick()\"\n>\n  <!-- Multi-select chips -->\n  @if (multiple()) {\n    @for (chip of chips(); track chip.value) {\n      <span class=\"wm-cb-chip\">\n        <span class=\"wm-cb-chip-label\">{{ chip.label }}</span>\n        <button\n          type=\"button\"\n          class=\"wm-cb-chip-remove\"\n          tabindex=\"-1\"\n          [attr.aria-label]=\"'Remove ' + chip.label\"\n          (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n          (click)=\"$event.stopPropagation(); removeChip(chip.value)\"\n        >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M18 6L6 18M6 6l12 12\"\n              stroke=\"currentColor\" stroke-width=\"2\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n      </span>\n    }\n  }\n\n  <!-- Text input -->\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"wm-cb-input\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    [attr.placeholder]=\"chips().length ? '' : placeholder()\"\n    [attr.aria-label]=\"ariaLabelledby() ? null : ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledby()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-autocomplete]=\"allowFreeform() ? 'both' : 'list'\"\n    [attr.aria-activedescendant]=\"activeDescendant()\"\n    [attr.aria-controls]=\"isOpen() ? panelListboxId() : null\"\n    [disabled]=\"disabled() || null\"\n    [value]=\"inputText()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <!-- Chevron -->\n  <svg\n    class=\"wm-cb-chevron\"\n    [class.is-open]=\"isOpen()\"\n    width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n    fill=\"none\" aria-hidden=\"true\"\n  >\n    <path d=\"M6 9l6 6 6-6\"\n      stroke=\"currentColor\" stroke-width=\"2\"\n      stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n</div>\n\n<!-- Live region for screen readers -->\n<span class=\"wm-cb-sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  {{ liveText() }}\n</span>\n\n<!-- Dropdown panel in CDK overlay -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayWidth]=\"overlayWidth\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"wm-cb-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"wm-cb-panel\">\n    <wm-combobox-panel\n      [options]=\"filteredOptions()\"\n      [highlightIndex]=\"highlightIndex()\"\n      [selectedValues]=\"selectedValues()\"\n      [multiple]=\"multiple()\"\n      [itemHeight]=\"itemHeight()\"\n      [maxHeight]=\"maxPanelHeight()\"\n      [filterQuery]=\"inputText()\"\n      [loading]=\"asyncLoading()\"\n      [freeformHint]=\"freeformHint()\"\n      (optionClicked)=\"onOptionClicked($event)\"\n    />\n  </div>\n</ng-template>\n", styles: [":host{display:block}.wm-cb-trigger{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;width:100%;min-height:36px;padding:.25rem .5rem;background:var(--wm-bg-base);border:1px solid var(--wm-border-input);border-radius:var(--wm-radius-sm);color:var(--wm-text-primary);font-size:.875rem;cursor:text;transition:border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast)}.wm-cb-trigger:hover:not(.is-disabled){border-color:var(--wm-color-accent-readable)}.wm-cb-trigger:focus-within:not(.is-disabled){border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 25%,transparent)}.wm-cb-trigger.is-open{border-color:var(--wm-color-accent-readable);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 20%,transparent)}.wm-cb-trigger.is-disabled{opacity:.45;cursor:not-allowed}.wm-cb-input{flex:1 1 60px;min-width:60px;border:none;outline:none;background:transparent;color:inherit;font:inherit;padding:.125rem 0}.wm-cb-input::placeholder{color:var(--wm-text-placeholder)}.wm-cb-input:disabled{cursor:not-allowed}.wm-cb-chevron{flex-shrink:0;color:var(--wm-text-muted);transition:transform var(--wm-transition-fast);pointer-events:none}.wm-cb-chevron.is-open{transform:rotate(180deg)}.wm-cb-chip{display:inline-flex;align-items:center;gap:.25rem;max-width:100%;padding:.125rem .375rem;background:color-mix(in srgb,var(--wm-color-accent) 15%,transparent);border:1px solid color-mix(in srgb,var(--wm-color-accent) 30%,transparent);border-radius:var(--wm-radius-sm);font-size:.8125rem;line-height:1.4;color:var(--wm-text-primary);-webkit-user-select:none;user-select:none}.wm-cb-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-cb-chip-remove{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--wm-text-muted);cursor:pointer;border-radius:var(--wm-radius-sm);transition:color var(--wm-transition-fast)}.wm-cb-chip-remove:hover{color:var(--wm-text-primary)}.wm-cb-backdrop{position:fixed;inset:0}.wm-cb-panel{width:100%;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #0000001f;overflow:hidden;padding:.25rem}.wm-cb-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], allowFreeform: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFreeform", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxPanelHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPanelHeight", required: false }] }], query: [{ type: i0.Output, args: ["query"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ComboboxPanel), { isSignal: true }] }] } });
 
-let nextId = 0;
+let nextId$1 = 0;
 /**
  * WmToastService — Application-wide toast notification manager.
  *
@@ -1429,7 +1554,7 @@ let nextId = 0;
 class WmToastService {
     toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : []));
     show(message, type = 'info', duration) {
-        const id = ++nextId;
+        const id = ++nextId$1;
         this.toasts.update(list => [...list, { id, message, type }]);
         const ms = duration ?? (type === 'error' ? 6000 : 4000);
         setTimeout(() => this.dismiss(id), ms);
@@ -1447,7 +1572,7 @@ class WmToastService {
      *                   The caller should abort the operation and then dismiss the toast.
      */
     progress(message, onCancel) {
-        const id = ++nextId;
+        const id = ++nextId$1;
         this.toasts.update(list => [
             ...list,
             { id, message, type: 'progress', persistent: true, createdAt: Date.now(), onCancel },
@@ -1516,6 +1641,503 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             args: [{ selector: 'wm-toast-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wm-toast-container\" role=\"log\" aria-live=\"polite\" aria-label=\"Notifications\">\n  @for (toast of toastService.toasts(); track toast.id) {\n    <div [class]=\"typeClass(toast)\" role=\"status\">\n      <!-- Success icon (check-circle) -->\n      @if (toast.type === 'success') {\n        <svg class=\"wm-toast-icon\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n             aria-hidden=\"true\">\n          <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"/>\n          <polyline points=\"22 4 12 14.01 9 11.01\"/>\n        </svg>\n      }\n      <!-- Error icon (x-circle) -->\n      @if (toast.type === 'error') {\n        <svg class=\"wm-toast-icon\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n             aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n          <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/>\n          <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n        </svg>\n      }\n      <!-- Info icon -->\n      @if (toast.type === 'info') {\n        <svg class=\"wm-toast-icon\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n             aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n          <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"/>\n          <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"/>\n        </svg>\n      }\n      <!-- Progress spinner -->\n      @if (toast.type === 'progress') {\n        <span class=\"wm-toast-spinner\" aria-hidden=\"true\"></span>\n      }\n\n      <span class=\"wm-toast-message\">\n        {{ toast.message }}\n        @if (toast.type === 'progress' && toast.createdAt) {\n          <span class=\"wm-toast-elapsed\"> ({{ elapsed(toast.createdAt) }})</span>\n        }\n      </span>\n\n      <!-- Cancel button for progress toasts with an onCancel callback -->\n      @if (toast.type === 'progress' && toast.onCancel) {\n        <button class=\"wm-toast-cancel\" (click)=\"cancel(toast)\" aria-label=\"Cancel operation\">Cancel</button>\n      }\n\n      <!-- Dismiss button \u2014 always shown -->\n      <button class=\"wm-toast-dismiss\" (click)=\"dismiss(toast.id)\" aria-label=\"Dismiss notification\">\n        <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n             aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n        </svg>\n      </button>\n    </div>\n  }\n</div>\n", styles: [".wm-toast-container{position:fixed;bottom:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:9999;pointer-events:none}.wm-toast{display:flex;align-items:flex-start;gap:.625rem;padding:.625rem .875rem;border-radius:var(--wm-radius-sm, 4px);box-shadow:var(--wm-shadow-md, 0 4px 12px rgba(0,0,0,.25));font-size:.8125rem;line-height:1.4;min-width:220px;max-width:360px;pointer-events:auto;animation:wm-toast-slide-in .15s ease-out both}.wm-toast--success{background:var(--wm-color-success-bg);color:var(--wm-color-success-readable);border:1px solid var(--wm-color-success-border)}.wm-toast--error{background:var(--wm-color-danger-bg);color:var(--wm-color-danger-readable);border:1px solid var(--wm-color-danger-border)}.wm-toast--info{background:var(--wm-bg-raised);color:var(--wm-text-primary);border:1px solid var(--wm-border)}.wm-toast--progress{background:var(--wm-bg-raised);color:var(--wm-text-primary);border:1px solid var(--wm-color-accent-border)}.wm-toast-icon{flex-shrink:0;margin-top:1px}.wm-toast-message{flex:1;line-height:1.4}.wm-toast-dismiss{flex-shrink:0;background:none;border:none;color:inherit;opacity:.6;cursor:pointer;padding:0;margin-left:.25rem;transition:opacity .15s ease}.wm-toast-dismiss:hover{opacity:1}.wm-toast-spinner{width:14px;height:14px;border:2px solid color-mix(in srgb,var(--wm-color-accent) 30%,transparent);border-top-color:var(--wm-color-accent-readable);border-radius:50%;flex-shrink:0;margin-top:1px;animation:wm-toast-spin .7s linear infinite}.wm-toast-elapsed{opacity:.6;font-size:.75rem;font-variant-numeric:tabular-nums}.wm-toast-cancel{flex-shrink:0;background:none;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:var(--wm-radius-sm, 4px);color:inherit;opacity:.7;cursor:pointer;padding:.125rem .5rem;font-size:.75rem;transition:opacity .15s ease,border-color .15s ease}.wm-toast-cancel:hover{opacity:1;border-color:currentColor}@keyframes wm-toast-spin{to{transform:rotate(360deg)}}@keyframes wm-toast-slide-in{0%{opacity:0;transform:translate(1rem)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.wm-toast{animation:none}}\n"] }]
         }] });
 
+/**
+ * The floating surface a `[wmTooltip]` renders into.
+ *
+ * Internal to the tooltip — consumers never place this element themselves. It
+ * exists as a component rather than a hand-built `<div>` so the panel's styles
+ * ship with the component that needs them, the same arrangement `wm-popover`
+ * uses for its panel.
+ *
+ * `ViewEncapsulation.None` is required, not stylistic: the panel is attached to
+ * the CDK overlay container at the end of `<body>`, outside the host
+ * component's DOM, so an emulated-encapsulation attribute selector would never
+ * match it.
+ */
+class WmTooltipPanel {
+    /** Tooltip body. Newlines are preserved — see `white-space` in tooltip.css. */
+    text = input('', ...(ngDevMode ? [{ debugName: "text" }] : []));
+    /** Id the host points at with aria-describedby / aria-labelledby. */
+    panelId = input('', ...(ngDevMode ? [{ debugName: "panelId" }] : []));
+    /**
+     * Drives the enter transition.
+     *
+     * The panel attaches with this false and is raised on the next frame, so the
+     * fade has two states to move between. Attaching straight to the visible
+     * state would give the browser nothing to interpolate from.
+     */
+    visible = input(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmTooltipPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: WmTooltipPanel, isStandalone: true, selector: "wm-tooltip-panel", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, panelId: { classPropertyName: "panelId", publicName: "panelId", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<div
+    class="wm-tooltip-panel"
+    [class.wm-tooltip-panel--visible]="visible()"
+    [id]="panelId()"
+    role="tooltip"
+  >{{ text() }}</div>`, isInline: true, styles: [".wm-tooltip-panel{max-width:var(--wm-tooltip-max-width, 260px);padding:6px 9px;background:var(--wm-text-primary);color:var(--wm-bg-base);border-radius:var(--wm-radius-md);box-shadow:var(--wm-shadow-md);font-family:var(--wm-font-sans);font-size:11.5px;font-weight:500;line-height:1.5;text-align:left;white-space:pre-line;overflow-wrap:break-word;opacity:0;transform:translateY(-2px);transition:opacity var(--wm-transition-fast),transform var(--wm-transition-fast)}.wm-tooltip-panel--visible{opacity:1;transform:translateY(0)}.wm-tooltip-above .wm-tooltip-panel{transform:translateY(2px)}.wm-tooltip-above .wm-tooltip-panel--visible{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.wm-tooltip-panel,.wm-tooltip-above .wm-tooltip-panel{transition:none;transform:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmTooltipPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'wm-tooltip-panel', template: `<div
+    class="wm-tooltip-panel"
+    [class.wm-tooltip-panel--visible]="visible()"
+    [id]="panelId()"
+    role="tooltip"
+  >{{ text() }}</div>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".wm-tooltip-panel{max-width:var(--wm-tooltip-max-width, 260px);padding:6px 9px;background:var(--wm-text-primary);color:var(--wm-bg-base);border-radius:var(--wm-radius-md);box-shadow:var(--wm-shadow-md);font-family:var(--wm-font-sans);font-size:11.5px;font-weight:500;line-height:1.5;text-align:left;white-space:pre-line;overflow-wrap:break-word;opacity:0;transform:translateY(-2px);transition:opacity var(--wm-transition-fast),transform var(--wm-transition-fast)}.wm-tooltip-panel--visible{opacity:1;transform:translateY(0)}.wm-tooltip-above .wm-tooltip-panel{transform:translateY(2px)}.wm-tooltip-above .wm-tooltip-panel--visible{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.wm-tooltip-panel,.wm-tooltip-above .wm-tooltip-panel{transition:none;transform:none}}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], panelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelId", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }] } });
+
+/**
+ * Add and remove one id from a space-separated ARIA id-reference attribute.
+ *
+ * A tooltip does not own `aria-describedby`. The host may already point at an
+ * error message, a hint, or a description the application wrote, and the
+ * tooltip has to sit alongside those rather than replace them. It also has to
+ * leave the attribute exactly as it found it once the tooltip hides, because a
+ * tooltip opens and closes many times over the life of one element and any
+ * drift accumulates.
+ *
+ * Kept as pure string functions so the rule is testable without a DOM: this is
+ * the part that has to be right every time, and the overlay around it is not.
+ */
+/** Split an id-reference list into its tokens, discarding empty runs. */
+function idTokens(value) {
+    if (!value)
+        return [];
+    return value.split(/\s+/).filter((token) => token.length > 0);
+}
+/**
+ * Return the attribute value with `id` present exactly once, appended last.
+ *
+ * Appending rather than prepending matters: assistive technology announces a
+ * description list in order, and the application's own description is the more
+ * specific one. The tooltip is supplementary, so it speaks last.
+ */
+function withIdToken(value, id) {
+    const tokens = idTokens(value).filter((token) => token !== id);
+    tokens.push(id);
+    return tokens.join(' ');
+}
+/**
+ * Return the attribute value with `id` removed, or `null` when nothing is left.
+ *
+ * `null` is the signal to remove the attribute outright. An empty
+ * `aria-describedby=""` is not the same as no attribute: some assistive
+ * technology treats the empty string as a broken reference, and it also makes
+ * a host that never carried the attribute look, on inspection, as though it
+ * did.
+ */
+function withoutIdToken(value, id) {
+    const tokens = idTokens(value).filter((token) => token !== id);
+    return tokens.length > 0 ? tokens.join(' ') : null;
+}
+
+/** Grace period before a pointer leaving the host closes the tooltip. */
+const HIDE_DELAY_MS = 120;
+let nextId = 0;
+/**
+ * WmTooltip — accessible floating explanation for any element.
+ *
+ * ```html
+ * <button class="wm-btn btn-icon-only" aria-label="Undo" [wmTooltip]="'Undo the last commit'">…</button>
+ * ```
+ *
+ * Why this exists next to the CSS `[data-tooltip]` chip: that chip is a
+ * pseudo-element on the host, so it cannot escape an ancestor's
+ * `overflow: hidden`, cannot wrap, and is invisible to assistive technology —
+ * it is a visual hint that must be paired with an `aria-label` saying the same
+ * thing twice. Reach for the chip for a one-to-five word label on a toolbar
+ * button. Reach for this directive when the text explains something, when the
+ * host sits inside a scrolling container, or when the explanation must be part
+ * of the accessible description rather than a duplicate of it.
+ *
+ * Accessibility:
+ *  - The panel carries `role="tooltip"` and a generated id.
+ *  - While open, the host points at that id with `aria-describedby` (default)
+ *    or `aria-labelledby`. The id is appended to whatever the host already
+ *    referenced and removed again on hide, so an application's own description
+ *    survives untouched.
+ *  - Opens on hover and on `:focus-visible`, so a mouse click that moves focus
+ *    to a button does not leave a tooltip hanging behind the pointer.
+ *  - WCAG 1.4.13 (Content on Hover or Focus): Escape dismisses without moving
+ *    focus; the pointer can travel into the panel and read it without it
+ *    closing; nothing auto-dismisses on a timer.
+ *
+ * Keyboard reachability is the caller's responsibility. A tooltip on an element
+ * that cannot take focus is unreachable by keyboard, so set
+ * `wmTooltipFocusable` to make the host a tab stop — but NOT inside a
+ * roving-tabindex container (tree, listbox, grid, tablist). There the container
+ * is a single tab stop by design, and adding one stop per row is worse for
+ * keyboard users than the gap it closes. Put the tooltip on the row itself, or
+ * expose it from a control the roving focus already reaches.
+ */
+class WmTooltip {
+    /** Tooltip body. Blank or absent means the tooltip never opens. */
+    wmTooltip = input('', ...(ngDevMode ? [{ debugName: "wmTooltip" }] : []));
+    /** Preferred side. Flips automatically when the viewport has no room. */
+    wmTooltipPosition = input('bottom', ...(ngDevMode ? [{ debugName: "wmTooltipPosition" }] : []));
+    /** Milliseconds a pointer must rest on the host before the panel opens. */
+    wmTooltipDelay = input(250, ...(ngDevMode ? [{ debugName: "wmTooltipDelay" }] : []));
+    /** Suppress the tooltip without unbinding it — for a control whose explanation only applies in some states. */
+    wmTooltipDisabled = input(false, ...(ngDevMode ? [{ debugName: "wmTooltipDisabled" }] : []));
+    /** Whether the panel describes the host or names it. See WmTooltipRelation. */
+    wmTooltipRelation = input('description', ...(ngDevMode ? [{ debugName: "wmTooltipRelation" }] : []));
+    /**
+     * Make a non-focusable host a tab stop so a keyboard user can reach the
+     * tooltip. Only applied when the host is not already focusable, and never
+     * safe inside a roving-tabindex container — see the class comment.
+     */
+    wmTooltipFocusable = input(false, ...(ngDevMode ? [{ debugName: "wmTooltipFocusable" }] : []));
+    host = inject(ElementRef).nativeElement;
+    injector = inject(Injector);
+    renderer = inject(Renderer2);
+    panelId = `wm-tooltip-${nextId++}`;
+    overlayRef = null;
+    panelRef = null;
+    portal = null;
+    showTimer = null;
+    hideTimer = null;
+    raiseFrame = null;
+    pointerOnHost = false;
+    pointerOnPanel = false;
+    hostFocused = false;
+    detachDocumentListeners = null;
+    /**
+     * Elements between the host and the document that can clip it, resolved
+     * once per open. They cannot change while the panel is up, and walking the
+     * ancestor chain on every scroll event would be work done per frame.
+     */
+    clippingAncestors = [];
+    constructor() {
+        inject(DestroyRef).onDestroy(() => this.teardown());
+        effect(() => {
+            const focusable = this.wmTooltipFocusable();
+            // Read so the effect re-runs when the host stops carrying a tooltip.
+            const hasText = this.text().length > 0;
+            if (focusable && hasText && !this.isNativelyFocusable()) {
+                this.renderer.setAttribute(this.host, 'tabindex', '0');
+            }
+        });
+        effect(() => {
+            const text = this.text();
+            const disabled = this.wmTooltipDisabled();
+            if (disabled || text.length === 0) {
+                this.hideNow();
+                return;
+            }
+            this.panelRef?.setInput('text', text);
+        });
+    }
+    /** Open the tooltip immediately, bypassing the hover delay. */
+    show() {
+        this.clearTimer('show');
+        this.clearTimer('hide');
+        if (this.overlayRef?.hasAttached())
+            return;
+        if (this.wmTooltipDisabled() || this.text().length === 0)
+            return;
+        const overlayRef = this.ensureOverlay();
+        this.panelRef = overlayRef.attach(this.portal);
+        this.panelRef.setInput('text', this.text());
+        this.panelRef.setInput('panelId', this.panelId);
+        this.panelRef.changeDetectorRef.detectChanges();
+        this.linkHostToPanel();
+        this.clippingAncestors = this.resolveClippingAncestors();
+        this.attachDocumentListeners();
+        // Attach invisible, raise on the next frame: a transition needs a state to
+        // move away from, and attaching straight to the visible state gives the
+        // browser nothing to interpolate.
+        this.raiseFrame = requestAnimationFrame(() => {
+            this.raiseFrame = null;
+            this.panelRef?.setInput('visible', true);
+            this.panelRef?.changeDetectorRef.detectChanges();
+        });
+    }
+    /** Close the tooltip immediately, without the pointer grace period. */
+    hideNow() {
+        this.clearTimer('show');
+        this.clearTimer('hide');
+        if (this.raiseFrame !== null) {
+            cancelAnimationFrame(this.raiseFrame);
+            this.raiseFrame = null;
+        }
+        this.releaseDocumentListeners();
+        this.unlinkHostFromPanel();
+        this.clippingAncestors = [];
+        if (this.overlayRef?.hasAttached()) {
+            this.overlayRef.detach();
+        }
+        this.panelRef = null;
+    }
+    /** True while the panel is attached. Exposed for tests and for callers driving it manually. */
+    get isOpen() {
+        return this.overlayRef?.hasAttached() === true;
+    }
+    // ── Trigger handling ─────────────────────────────────────────────
+    onPointerEnterHost() {
+        this.pointerOnHost = true;
+        this.scheduleShow();
+    }
+    onPointerLeaveHost() {
+        this.pointerOnHost = false;
+        this.scheduleHide();
+    }
+    onFocusHost() {
+        // Only keyboard focus opens the tooltip. Clicking a button focuses it too,
+        // and a tooltip that opens on click sits under the pointer that just left.
+        if (!this.matchesFocusVisible())
+            return;
+        this.hostFocused = true;
+        this.show();
+    }
+    onBlurHost() {
+        this.hostFocused = false;
+        this.scheduleHide();
+    }
+    // ── Internals ────────────────────────────────────────────────────
+    text() {
+        return (this.wmTooltip() ?? '').toString();
+    }
+    scheduleShow() {
+        if (this.isOpen) {
+            this.clearTimer('hide');
+            return;
+        }
+        if (this.wmTooltipDisabled() || this.text().length === 0)
+            return;
+        this.clearTimer('hide');
+        this.clearTimer('show');
+        const delay = Math.max(0, this.wmTooltipDelay());
+        this.showTimer = setTimeout(() => {
+            this.showTimer = null;
+            this.show();
+        }, delay);
+    }
+    scheduleHide() {
+        this.clearTimer('show');
+        this.clearTimer('hide');
+        this.hideTimer = setTimeout(() => {
+            this.hideTimer = null;
+            if (this.pointerOnHost || this.pointerOnPanel || this.hostFocused)
+                return;
+            this.hideNow();
+        }, HIDE_DELAY_MS);
+    }
+    clearTimer(which) {
+        const timer = which === 'show' ? this.showTimer : this.hideTimer;
+        if (timer === null)
+            return;
+        clearTimeout(timer);
+        if (which === 'show')
+            this.showTimer = null;
+        else
+            this.hideTimer = null;
+    }
+    ensureOverlay() {
+        if (this.overlayRef)
+            return this.overlayRef;
+        const positionStrategy = createFlexibleConnectedPositionStrategy(this.injector, this.host)
+            .withFlexibleDimensions(false)
+            .withPush(true)
+            .withPositions(this.positions());
+        this.overlayRef = createOverlayRef(this.injector, {
+            positionStrategy,
+            scrollStrategy: createRepositionScrollStrategy(this.injector),
+            panelClass: 'wm-tooltip-overlay',
+            hasBackdrop: false,
+        });
+        // The pointer may travel from the host into the panel. WCAG 1.4.13 requires
+        // that reading the tooltip that way does not dismiss it, which matters most
+        // for the long explanations this directive exists to carry.
+        const overlayEl = this.overlayRef.overlayElement;
+        overlayEl.addEventListener('mouseenter', this.onPointerEnterPanel);
+        overlayEl.addEventListener('mouseleave', this.onPointerLeavePanel);
+        positionStrategy.positionChanges.subscribe((change) => {
+            const above = change.connectionPair.overlayY === 'bottom';
+            overlayEl.classList.toggle('wm-tooltip-above', above);
+        });
+        this.portal = new ComponentPortal(WmTooltipPanel, null, this.injector);
+        return this.overlayRef;
+    }
+    positions() {
+        const offset = 6;
+        const below = {
+            originX: 'center', originY: 'bottom',
+            overlayX: 'center', overlayY: 'top', offsetY: offset,
+        };
+        const above = {
+            originX: 'center', originY: 'top',
+            overlayX: 'center', overlayY: 'bottom', offsetY: -offset,
+        };
+        const after = {
+            originX: 'end', originY: 'center',
+            overlayX: 'start', overlayY: 'center', offsetX: offset,
+        };
+        const before = {
+            originX: 'start', originY: 'center',
+            overlayX: 'end', overlayY: 'center', offsetX: -offset,
+        };
+        // The preferred side first, then its opposite, then the perpendicular pair.
+        // A tooltip that has run out of room on both preferred sides is better off
+        // beside the host than pushed over the top of it.
+        switch (this.wmTooltipPosition()) {
+            case 'top': return [above, below, after, before];
+            case 'left': return [before, after, above, below];
+            case 'right': return [after, before, above, below];
+            default: return [below, above, after, before];
+        }
+    }
+    onPointerEnterPanel = () => {
+        this.pointerOnPanel = true;
+        this.clearTimer('hide');
+    };
+    onPointerLeavePanel = () => {
+        this.pointerOnPanel = false;
+        this.scheduleHide();
+    };
+    attachDocumentListeners() {
+        if (this.detachDocumentListeners)
+            return;
+        const onKeydown = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            // Dismiss without moving focus and without stopping the event: the host
+            // may sit in a dialog or a menu whose own Escape handling still applies,
+            // and swallowing it would trap the user one layer deeper than they are.
+            this.hideNow();
+        };
+        // A pointer press anywhere settles the interaction. Without this, a panel
+        // that overlaps the control below it can swallow the click that was meant
+        // for that control.
+        const onPointerDown = () => this.hideNow();
+        // Re-anchor to the host whenever anything underneath it moves. The capture
+        // phase is load-bearing and the reason this is not left to CDK's
+        // reposition strategy - see `onViewportChange`.
+        const stopFollowing = onViewportChange(() => this.reanchor());
+        document.addEventListener('keydown', onKeydown, true);
+        document.addEventListener('pointerdown', onPointerDown, true);
+        this.detachDocumentListeners = () => {
+            document.removeEventListener('keydown', onKeydown, true);
+            document.removeEventListener('pointerdown', onPointerDown, true);
+            stopFollowing();
+        };
+    }
+    releaseDocumentListeners() {
+        this.detachDocumentListeners?.();
+        this.detachDocumentListeners = null;
+    }
+    /**
+     * Follow the host, or give up on it.
+     *
+     * Repositioning alone is not enough. Once the host has scrolled out of its
+     * container the panel would be pushed against the container edge and left
+     * explaining a row the reader can no longer see - worse than not being there,
+     * because it now appears to describe whatever it happens to cover.
+     */
+    reanchor() {
+        if (!this.overlayRef?.hasAttached())
+            return;
+        if (this.isHostClipped()) {
+            this.hideNow();
+            return;
+        }
+        this.overlayRef.updatePosition();
+    }
+    /** Every ancestor that can clip the host, nearest first. */
+    resolveClippingAncestors() {
+        const clipping = [];
+        let node = this.host.parentElement;
+        while (node) {
+            const style = getComputedStyle(node);
+            const clips = [style.overflow, style.overflowX, style.overflowY].some((value) => value === 'auto' || value === 'scroll' || value === 'hidden');
+            if (clips)
+                clipping.push(node);
+            node = node.parentElement;
+        }
+        return clipping;
+    }
+    /** True once no part of the host is inside every container that clips it. */
+    isHostClipped() {
+        const host = this.host.getBoundingClientRect();
+        const outside = (bounds) => host.bottom < bounds.top ||
+            host.top > bounds.bottom ||
+            host.right < bounds.left ||
+            host.left > bounds.right;
+        const viewport = {
+            top: 0,
+            left: 0,
+            bottom: window.innerHeight || document.documentElement.clientHeight,
+            right: window.innerWidth || document.documentElement.clientWidth,
+        };
+        if (outside(viewport))
+            return true;
+        return this.clippingAncestors.some((ancestor) => outside(ancestor.getBoundingClientRect()));
+    }
+    relationAttribute() {
+        return this.wmTooltipRelation() === 'label' ? 'aria-labelledby' : 'aria-describedby';
+    }
+    linkHostToPanel() {
+        const attribute = this.relationAttribute();
+        const next = withIdToken(this.host.getAttribute(attribute), this.panelId);
+        this.renderer.setAttribute(this.host, attribute, next);
+    }
+    unlinkHostFromPanel() {
+        // Both are cleared rather than only the current one: `wmTooltipRelation`
+        // can change while the panel is open, and the attribute written on show
+        // would otherwise be orphaned, leaving the host pointing at an id that no
+        // longer exists in the document.
+        for (const attribute of ['aria-describedby', 'aria-labelledby']) {
+            const current = this.host.getAttribute(attribute);
+            if (current === null)
+                continue;
+            const next = withoutIdToken(current, this.panelId);
+            if (next === null)
+                this.renderer.removeAttribute(this.host, attribute);
+            else if (next !== current)
+                this.renderer.setAttribute(this.host, attribute, next);
+        }
+    }
+    isNativelyFocusable() {
+        if (this.host.hasAttribute('tabindex'))
+            return true;
+        return ['a', 'button', 'input', 'select', 'textarea', 'summary'].includes(this.host.tagName.toLowerCase());
+    }
+    matchesFocusVisible() {
+        // `:focus-visible` is unsupported in some test environments; treating an
+        // unsupported selector as "not keyboard focus" would silently disable the
+        // keyboard path, so fall back to opening on any focus.
+        try {
+            return this.host.matches(':focus-visible');
+        }
+        catch {
+            return true;
+        }
+    }
+    teardown() {
+        this.hideNow();
+        const overlayEl = this.overlayRef?.overlayElement;
+        overlayEl?.removeEventListener('mouseenter', this.onPointerEnterPanel);
+        overlayEl?.removeEventListener('mouseleave', this.onPointerLeavePanel);
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.portal = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: WmTooltip, isStandalone: true, selector: "[wmTooltip]", inputs: { wmTooltip: { classPropertyName: "wmTooltip", publicName: "wmTooltip", isSignal: true, isRequired: false, transformFunction: null }, wmTooltipPosition: { classPropertyName: "wmTooltipPosition", publicName: "wmTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, wmTooltipDelay: { classPropertyName: "wmTooltipDelay", publicName: "wmTooltipDelay", isSignal: true, isRequired: false, transformFunction: null }, wmTooltipDisabled: { classPropertyName: "wmTooltipDisabled", publicName: "wmTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, wmTooltipRelation: { classPropertyName: "wmTooltipRelation", publicName: "wmTooltipRelation", isSignal: true, isRequired: false, transformFunction: null }, wmTooltipFocusable: { classPropertyName: "wmTooltipFocusable", publicName: "wmTooltipFocusable", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onPointerEnterHost()", "mouseleave": "onPointerLeaveHost()", "focusin": "onFocusHost()", "focusout": "onBlurHost()", "click": "hideNow()" } }, exportAs: ["wmTooltip"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmTooltip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wmTooltip]',
+                    exportAs: 'wmTooltip',
+                    host: {
+                        '(mouseenter)': 'onPointerEnterHost()',
+                        '(mouseleave)': 'onPointerLeaveHost()',
+                        '(focusin)': 'onFocusHost()',
+                        '(focusout)': 'onBlurHost()',
+                        '(click)': 'hideNow()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { wmTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "wmTooltip", required: false }] }], wmTooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "wmTooltipPosition", required: false }] }], wmTooltipDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "wmTooltipDelay", required: false }] }], wmTooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "wmTooltipDisabled", required: false }] }], wmTooltipRelation: [{ type: i0.Input, args: [{ isSignal: true, alias: "wmTooltipRelation", required: false }] }], wmTooltipFocusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "wmTooltipFocusable", required: false }] }] } });
+
 class WmLicenseService {
     toast = inject(WmToastService);
     license = signal(null, ...(ngDevMode ? [{ debugName: "license" }] : []));
@@ -1656,5 +2278,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Checkbox, GhostField, NumberInput, PageHeader, Toggle, WmAutoFocus, WmButton, WmCombobox, WmDialog, WmLicenseDialog, WmLicenseNudge, WmLicenseService, WmModal, WmPopover, WmSelect, WmTab, WmTabs, WmToastContainer, WmToastService };
+export { Checkbox, GhostField, NumberInput, PageHeader, Toggle, WmAnchoredScrollStrategy, WmAutoFocus, WmButton, WmCombobox, WmDialog, WmLicenseDialog, WmLicenseNudge, WmLicenseService, WmModal, WmPopover, WmSelect, WmTab, WmTabs, WmToastContainer, WmToastService, WmTooltip, onViewportChange };
 //# sourceMappingURL=wildmason-aegis.mjs.map