@wildmason/aegis 1.5.4

package/dist/fesm2022/wildmason-aegis.mjs

@@ -0,0 +1,883 @@
+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, Injectable } from '@angular/core';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { NgTemplateOutlet } from '@angular/common';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { invoke } from '@tauri-apps/api/core';
+
+/**
+ * WmModal — Lightweight modal backdrop with Escape key and click-outside dismissal.
+ *
+ * Owns the fixed backdrop, centering, and keyboard/pointer dismissal so individual
+ * modal components don't need to repeat this logic or add their own HostListeners.
+ *
+ * Usage:
+ *   <wm-modal [visible]="visible()" (dismiss)="close()">
+ *     <div class="p-6 wm-r-md w-80" style="background: var(--wm-bg-raised)">
+ *       <!-- modal panel content -->
+ *     </div>
+ *   </wm-modal>
+ *
+ * For top-aligned panels (e.g. search/command palettes), use align="top":
+ *   <wm-modal [visible]="visible()" (dismiss)="close()" align="top">
+ *
+ * The projected content is wrapped in a stop-propagation container so clicks inside
+ * the panel do not bubble up to the backdrop and trigger a dismiss.
+ */
+class WmModal {
+    /** Whether the modal is currently open. */
+    visible = input.required(...(ngDevMode ? [{ debugName: "visible" }] : []));
+    /** Emitted when the user requests the modal to close (Escape or backdrop click). */
+    dismiss = output();
+    /**
+     * Vertical alignment of the panel within the backdrop.
+     * - 'center' (default): panel is vertically centered (items-center)
+     * - 'top': panel appears near the top (items-start pt-20), for search/command overlays
+     */
+    align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : []));
+    onEscape() {
+        if (this.visible())
+            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    <div (click)=\"$event.stopPropagation()\">\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n}\r\n", 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, 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    <div (click)=\"$event.stopPropagation()\">\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n}\r\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']
+            }] } });
+
+/**
+ * WmDialog — Modal dialog with backdrop, focus trap, and Escape key handling.
+ *
+ * Renders a fixed-position overlay that is always viewport-relative (not clipped
+ * by ancestor overflow:hidden). Do NOT place inside a container that uses
+ * CSS transform, perspective, or filter — fixed positioning breaks in that context.
+ *
+ * Usage:
+ *   <wm-dialog [(isOpen)]="open" title="Confirm action">
+ *     <div body>
+ *       <p>Are you sure?</p>
+ *       <div class="wm-dialog-footer">
+ *         <wm-button variant="secondary" (click)="open.set(false)">Cancel</wm-button>
+ *         <wm-button variant="primary" (click)="onConfirm()">Confirm</wm-button>
+ *       </div>
+ *     </div>
+ *   </wm-dialog>
+ *
+ * Accessibility:
+ *  - role="dialog" + aria-modal="true" on the panel
+ *  - aria-labelledby wired to the title element (when title is set)
+ *  - Focus is trapped inside the panel when open (cdkTrapFocus)
+ *  - Escape key closes the dialog
+ *  - Clicking the backdrop closes the dialog
+ *  - On close, focus returns to the element that opened the dialog
+ *    (browser default when focus trap is released)
+ */
+class WmDialog {
+    /** Two-way binding for open/closed state. */
+    isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    /** Dialog heading text. When set, aria-labelledby is applied automatically. */
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    /** Panel width preset. sm = 360px, md = 480px (default), lg = 640px. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    close() { this.isOpen.set(false); }
+    onEscape() {
+        if (this.isOpen())
+            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"] }] });
+}
+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"] }]
+        }], 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']
+            }] } });
+
+/**
+ * WmSelect — Accessible dropdown select built on Angular CDK Overlay.
+ *
+ * Provides a styled, keyboard-accessible alternative to the native <select> element
+ * when you need custom option rendering or consistent cross-platform appearance.
+ *
+ * When to use:
+ *  - Single selection from a list of 4+ options
+ *  - When option labels are complex (icons, descriptions, status badges)
+ *  - When native <select> appearance is insufficient
+ *
+ * When NOT to use:
+ *  - 3 or fewer options → use a radio group (more scannable, no extra click)
+ *  - Multi-select → use a checkbox group or a combobox with chips
+ *  - Yes/No choices → use a Toggle or two radio buttons
+ *
+ * Options API:
+ *   options: SelectOption[]  — Array of { value, label, disabled? } objects.
+ *
+ * Two-way binding:
+ *   <wm-select [(value)]="selectedValue" [options]="myOptions" />
+ *
+ * Accessibility:
+ *  - Trigger has role="combobox", aria-expanded, aria-haspopup="listbox"
+ *  - Panel has role="listbox"; each option has role="option" + aria-selected
+ *  - Disabled options have aria-disabled="true"
+ *  - Focus is trapped inside the open panel (cdkTrapFocus)
+ *  - Clicking the backdrop closes the panel and returns focus to the trigger
+ *  - Keyboard: Enter/Space on trigger opens; Escape closes; arrow keys
+ *    navigate options (relies on natural tab order within the panel)
+ *  - Always pair with a visible label via <wm-label> or aria-label on the host
+ */
+class WmSelect {
+    /** Array of options to display. */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    /** The currently selected value. Two-way bindable. */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Placeholder text shown when no option is selected. */
+    placeholder = input('Select…', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** Disables the trigger and prevents the panel from opening. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    selectedOption = computed(() => this.options().find((o) => o.value === this.value()) ?? null, ...(ngDevMode ? [{ debugName: "selectedOption" }] : []));
+    hostEl = inject((ElementRef));
+    get overlayWidth() {
+        return this.hostEl.nativeElement.offsetWidth || 200;
+    }
+    positions = [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+    ];
+    toggleOpen() {
+        if (!this.disabled()) {
+            this.isOpen.update((v) => !v);
+        }
+    }
+    selectOption(opt) {
+        if (!opt.disabled) {
+            this.value.set(opt.value);
+            this.isOpen.set(false);
+        }
+    }
+    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)}.wm-select-trigger:focus-visible{border-color:var(--wm-color-accent);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);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);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)}\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)}.wm-select-trigger:focus-visible{border-color:var(--wm-color-accent);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);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);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)}\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 }] }] } });
+
+/**
+ * WmPopover — general-purpose CDK-overlay floating panel.
+ *
+ * A low-level primitive for dropdowns, menus, pickers, and any floating UI.
+ * The parent controls open/close state; this component handles positioning,
+ * backdrop, focus-trapping, and ARIA attribute management.
+ *
+ * Slots:
+ *  - [trigger]  — the anchor element (button, icon, etc.)
+ *  - [content]  — the panel body (menu items, form, etc.)
+ *
+ * Usage:
+ * ```html
+ * <wm-popover [isOpen]="open()" (closed)="open.set(false)" role="menu" hasPopup="menu" align="end">
+ *   <button trigger (click)="open.set(!open())">Options</button>
+ *   <div content role="menu">
+ *     <button role="menuitem" (click)="doThing()">Do thing</button>
+ *   </div>
+ * </wm-popover>
+ * ```
+ *
+ * Accessibility:
+ *  - Trigger element automatically receives aria-haspopup, aria-expanded, aria-controls
+ *  - Panel receives the configured role
+ *  - Focus is trapped inside the open panel (cdkTrapFocus)
+ *  - Escape key closes the panel
+ *  - Backdrop click closes the panel
+ *
+ * Auto-focus:
+ *  - Add [wmAutoFocus] to any element inside [content] to focus it on open.
+ *    Import WmAutoFocus from @wildmason/aegis/components and add it to your component's imports.
+ */
+class WmPopover {
+    /** Whether the panel is currently open. */
+    isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    /** Panel width in pixels, or 'auto' to match content. */
+    width = input('auto', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    /** ARIA role for the floating panel element. Use 'menu', 'listbox', 'dialog', etc. */
+    role = input('dialog', ...(ngDevMode ? [{ debugName: "role" }] : []));
+    /** Value for aria-haspopup on the trigger element. */
+    hasPopup = input('dialog', ...(ngDevMode ? [{ debugName: "hasPopup" }] : []));
+    /** Horizontal alignment: 'start' aligns left edges, 'end' aligns right edges. */
+    align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : []));
+    /** Emitted when the panel should close (backdrop click, Escape key, CDK detach). */
+    closed = output();
+    renderer = inject(Renderer2);
+    hostEl = inject(ElementRef);
+    cdr = inject(ChangeDetectorRef);
+    panelId = 'wm-popover-' + Math.random().toString(36).substring(2, 9);
+    panel = viewChild('panel', ...(ngDevMode ? [{ debugName: "panel" }] : []));
+    constructor() {
+        effect(() => {
+            const open = this.isOpen();
+            const popup = this.hasPopup();
+            this.cdr.markForCheck();
+            const el = this.hostEl.nativeElement.querySelector('[trigger]');
+            if (!el)
+                return;
+            this.renderer.setAttribute(el, 'aria-haspopup', String(popup));
+            this.renderer.setAttribute(el, 'aria-expanded', String(open));
+            this.renderer.setAttribute(el, 'aria-controls', this.panelId);
+            if (!el.getAttribute('role')) {
+                this.renderer.setAttribute(el, 'role', 'button');
+            }
+        });
+    }
+    get positions() {
+        const x = this.align();
+        return [
+            { originX: x, originY: 'bottom', overlayX: x, overlayY: 'top', offsetY: 4 },
+            { originX: x, originY: 'top', overlayX: x, overlayY: 'bottom', offsetY: -4 },
+        ];
+    }
+    onAttach() {
+        setTimeout(() => {
+            const panelEl = this.panel();
+            if (!panelEl)
+                return;
+            const el = panelEl.nativeElement.querySelector('[wmAutoFocus]');
+            if (!el)
+                return;
+            el.focus();
+            if (typeof el.showPicker === 'function') {
+                const type = el.type;
+                if (el.tagName === 'SELECT' || ['date', 'time', 'color'].includes(type)) {
+                    try {
+                        el.showPicker();
+                    }
+                    catch { /* ignore */ }
+                }
+            }
+        }, 10);
+    }
+    onClose() {
+        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 }, hasPopup: { classPropertyName: "hasPopup", publicName: "hasPopup", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", 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 -->\r\n<div cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"wm-popover-trigger\">\r\n  <ng-content select=\"[trigger]\"></ng-content>\r\n</div>\r\n\r\n<!-- Floating panel -->\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayOrigin]=\"origin\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n  [cdkConnectedOverlayPositions]=\"positions\"\r\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n  (backdropClick)=\"onClose()\"\r\n  (detach)=\"onClose()\"\r\n  (attach)=\"onAttach()\"\r\n>\r\n  <div\r\n    #panel\r\n    [id]=\"panelId\"\r\n    [attr.role]=\"role()\"\r\n    class=\"wm-popover-panel\"\r\n    [style.width]=\"width() === 'auto' ? 'auto' : width() + 'px'\"\r\n    cdkTrapFocus\r\n    [cdkTrapFocusAutoCapture]=\"true\"\r\n    (keydown.escape)=\"onClose()\"\r\n  >\r\n    <ng-content select=\"[content]\"></ng-content>\r\n  </div>\r\n</ng-template>\r\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 -->\r\n<div cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"wm-popover-trigger\">\r\n  <ng-content select=\"[trigger]\"></ng-content>\r\n</div>\r\n\r\n<!-- Floating panel -->\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayOrigin]=\"origin\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n  [cdkConnectedOverlayPositions]=\"positions\"\r\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n  (backdropClick)=\"onClose()\"\r\n  (detach)=\"onClose()\"\r\n  (attach)=\"onAttach()\"\r\n>\r\n  <div\r\n    #panel\r\n    [id]=\"panelId\"\r\n    [attr.role]=\"role()\"\r\n    class=\"wm-popover-panel\"\r\n    [style.width]=\"width() === 'auto' ? 'auto' : width() + 'px'\"\r\n    cdkTrapFocus\r\n    [cdkTrapFocusAutoCapture]=\"true\"\r\n    (keydown.escape)=\"onClose()\"\r\n  >\r\n    <ng-content select=\"[content]\"></ng-content>\r\n  </div>\r\n</ng-template>\r\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 }] }], hasPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPopup", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
+
+/**
+ * WmAutoFocus — focuses an element when it enters the DOM.
+ *
+ * Usage: add [wmAutoFocus] to any focusable element inside a <wm-popover> panel.
+ * For date/time/color/select inputs, also attempts to open the native picker UI.
+ *
+ * @example
+ * <input wmAutoFocus type="text" />
+ * <input [wmAutoFocus]="shouldFocus" type="date" />
+ */
+class WmAutoFocus {
+    enabled = true;
+    #el = inject((ElementRef));
+    ngAfterViewInit() {
+        if (this.enabled === false)
+            return;
+        setTimeout(() => {
+            const el = this.#el.nativeElement;
+            if (!el)
+                return;
+            el.focus();
+            const isPickerType = el.tagName === 'SELECT' ||
+                (el.tagName === 'INPUT' &&
+                    ['date', 'time', 'color', 'datetime-local', 'month', 'week'].includes(el.type));
+            if (isPickerType && typeof el.showPicker === 'function') {
+                try {
+                    el.showPicker();
+                }
+                catch {
+                    // Browser may reject showPicker() if not triggered by user gesture
+                }
+            }
+        }, 50);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmAutoFocus, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: WmAutoFocus, isStandalone: true, selector: "[wmAutoFocus]", inputs: { enabled: ["wmAutoFocus", "enabled"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmAutoFocus, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wmAutoFocus]',
+                }]
+        }], propDecorators: { enabled: [{
+                type: Input,
+                args: ['wmAutoFocus']
+            }] } });
+
+class WmTab {
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    tmpl = viewChild.required('tmpl');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.1", type: WmTab, isStandalone: true, selector: "wm-tab", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { styleAttribute: "display: none" }, viewQueries: [{ propertyName: "tmpl", first: true, predicate: ["tmpl"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #tmpl><ng-content /></ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmTab, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wm-tab',
+                    template: `<ng-template #tmpl><ng-content /></ng-template>`,
+                    host: { style: 'display: none' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], tmpl: [{ type: i0.ViewChild, args: ['tmpl', { isSignal: true }] }] } });
+
+class WmTabs {
+    activeValue = input.required(...(ngDevMode ? [{ debugName: "activeValue" }] : []));
+    variant = input('line', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    select = output();
+    tabs = contentChildren(WmTab, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
+    focusedIndex = signal(null, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : []));
+    selectTab(value, index) {
+        this.focusedIndex.set(index);
+        this.select.emit(value);
+    }
+    onBlur() {
+        setTimeout(() => {
+            if (!document.activeElement?.closest('.wm-tabs')) {
+                this.focusedIndex.set(null);
+            }
+        }, 0);
+    }
+    onKeyDown(event, container) {
+        const tabs = this.tabs();
+        const currentIndex = this.focusedIndex() ?? tabs.findIndex(t => t.value() === this.activeValue());
+        let nextIndex = null;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                nextIndex = (currentIndex + 1) % tabs.length;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+                break;
+            case 'Home':
+                nextIndex = 0;
+                break;
+            case 'End':
+                nextIndex = tabs.length - 1;
+                break;
+        }
+        if (nextIndex !== null) {
+            event.preventDefault();
+            this.focusedIndex.set(nextIndex);
+            const btns = container.querySelectorAll('[role="tab"]');
+            btns[nextIndex]?.focus();
+        }
+    }
+    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)\"\r\n>\r\n  @for (tab of tabs(); track tab.value(); let i = $index) {\r\n    <button\r\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()\"\r\n      [attr.aria-controls]=\"'wm-panel-' + tab.value()\"\r\n      [tabIndex]=\"(focusedIndex() === null ? activeValue() === tab.value() : focusedIndex() === i) ? 0 : -1\"\r\n      [class.is-active]=\"activeValue() === tab.value()\"\r\n      (click)=\"selectTab(tab.value(), i)\"\r\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-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);border-bottom-color:var(--wm-color-accent)}.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)}@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)\"\r\n>\r\n  @for (tab of tabs(); track tab.value(); let i = $index) {\r\n    <button\r\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()\"\r\n      [attr.aria-controls]=\"'wm-panel-' + tab.value()\"\r\n      [tabIndex]=\"(focusedIndex() === null ? activeValue() === tab.value() : focusedIndex() === i) ? 0 : -1\"\r\n      [class.is-active]=\"activeValue() === tab.value()\"\r\n      (click)=\"selectTab(tab.value(), i)\"\r\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-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);border-bottom-color:var(--wm-color-accent)}.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)}@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 {
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    /** Makes the button square (equal width/height). Use for icon-only buttons. */
+    iconOnly = input(false, ...(ngDevMode ? [{ debugName: "iconOnly" }] : []));
+    /** Accessible label forwarded to the inner <button>. Required for icon-only buttons. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Tooltip text forwarded to the inner <button>. Named btnTitle to avoid native attribute conflict. */
+    btnTitle = input('', ...(ngDevMode ? [{ debugName: "btnTitle" }] : []));
+    btnClass = computed(() => {
+        const base = `wm-btn wm-btn--${this.variant()} wm-btn--${this.size()}`;
+        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"] });
+}
+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"] }]
+        }], 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 }] }] } });
+
+/**
+ * WmCheckbox — Boolean selection control with optional indeterminate state.
+ *
+ * When to use:
+ *  - Multi-select lists (each item is independent)
+ *  - Form options that require explicit confirmation before taking effect
+ *  - Parent/child hierarchical selection (use indeterminate for "some selected")
+ *
+ * When NOT to use:
+ *  - Mutually exclusive choices → use radio buttons instead
+ *  - Immediate-effect toggles (e.g. dark mode) → use Toggle instead
+ *
+ * Accessibility:
+ *  - role="checkbox" with aria-checked="true|false|mixed"
+ *  - "mixed" maps to the indeterminate state for screen readers
+ *  - Space activates the checkbox (native button behaviour)
+ *  - Focus ring uses a double-ring (canvas gap + accent) pattern for maximum visibility
+ *    across all themes, meeting WCAG 2.1 SC 1.4.11 Non-text Contrast
+ *  - When wrapping in a group, add role="group" + aria-labelledby to the container
+ */
+class Checkbox {
+    /** Two-way bindable checked state. */
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    /**
+     * Shows a dash icon instead of a checkmark. Typically used for a "select all"
+     * checkbox when only some child items are selected.
+     * Note: indeterminate is display-only — clicking always toggles to true/false.
+     */
+    indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
+    /** Visible text label rendered next to the checkbox box. */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** Maps to aria-checked: true, false, or "mixed" (for indeterminate). */
+    ariaChecked = computed(() => {
+        if (this.indeterminate() && !this.checked())
+            return 'mixed';
+        return this.checked();
+    }, ...(ngDevMode ? [{ debugName: "ariaChecked" }] : []));
+    toggle() {
+        if (!this.disabled()) {
+            this.checked.update(v => !v);
+        }
+    }
+    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)}.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)}.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 }] }] } });
+
+/**
+ * WmNumberInput — Numeric input with stepper buttons.
+ *
+ * Implements ControlValueAccessor so it works with both template-driven forms
+ * (ngModel) and reactive forms (formControl / formControlName).
+ *
+ * When to use:
+ *  - Quantity fields (items in cart, repetitions, page count)
+ *  - Bounded numeric settings with a known min/max (timeout seconds, font size)
+ *
+ * When NOT to use:
+ *  - Free-form numeric entry without bounds → plain <input type="number">
+ *  - Currency or phone numbers → use a text input with masking
+ *
+ * Accessibility:
+ *  - The underlying <input type="number"> is the focusable control.
+ *  - Stepper buttons have tabindex="-1" — they are mouse/touch targets only.
+ *    Keyboard users use the arrow keys on the input itself (native browser behaviour).
+ *  - Always provide an aria-label or visible label via <wm-field> + <wm-label>.
+ *  - The buttons use mousedown + preventDefault to avoid stealing focus from the input.
+ *
+ * Form integration:
+ *   <!-- Template-driven -->
+ *   <wm-number-input [(ngModel)]="count" [min]="0" [max]="100" />
+ *
+ *   <!-- Reactive -->
+ *   <wm-number-input formControlName="quantity" [step]="5" />
+ */
+class NumberInput {
+    /** Minimum allowed value. */
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    /** Maximum allowed value. */
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    /** Amount to increment/decrement per step. Defaults to 1. */
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
+    /** Placeholder text shown when the field is empty. */
+    placeholder = input('0', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** Disables the control from the template. Also set automatically by reactive forms. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
+    internalValue = signal(null, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+    onChangeFn = () => { };
+    onTouchedFn = () => { };
+    /** CVA interface — called when the form model changes programmatically. */
+    writeValue(value) {
+        this.internalValue.set(value ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    onInputChange(event) {
+        const raw = event.target.value;
+        const num = raw === '' ? null : parseFloat(raw);
+        this.internalValue.set(num);
+        this.onChangeFn(num);
+        this.onTouchedFn();
+    }
+    increment() {
+        const curr = this.internalValue() ?? 0;
+        const next = curr + this.step();
+        const max = this.max();
+        this.setValue(max !== null ? Math.min(next, max) : next);
+    }
+    decrement() {
+        const curr = this.internalValue() ?? 0;
+        const next = curr - this.step();
+        const min = this.min();
+        this.setValue(min !== null ? Math.max(next, min) : next);
+    }
+    /**
+     * Prevents the stepper buttons from stealing focus away from the input element.
+     * Without this, clicking a button would blur the input, hiding any validation state.
+     */
+    preventFocusSteal(event) {
+        event.preventDefault();
+    }
+    setValue(val) {
+        this.internalValue.set(val);
+        this.onChangeFn(val);
+        this.onTouchedFn();
+        const el = this.inputRef();
+        if (el)
+            el.nativeElement.value = String(val);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NumberInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.1", type: NumberInput, isStandalone: true, selector: "wm-number-input", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", 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 } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NumberInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'wm-number-input', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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"] }]
+        }], 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 }] }] } });
+
+/**
+ * WmToggle — Binary on/off control.
+ *
+ * Use for settings that take effect immediately without a form submit.
+ * For settings that need an explicit "Save" action, prefer a checkbox.
+ *
+ * Accessibility:
+ *  - role="switch" communicates binary state to screen readers
+ *  - aria-checked reflects true/false
+ *  - aria-label required when no visible text label surrounds the toggle
+ *  - Space and Enter activate the toggle (native button behaviour)
+ *  - When disabled, aria state is preserved so SR users understand why it can't be changed
+ */
+class Toggle {
+    /** Two-way bindable state. Use [(checked)]="mySignal" or [checked]="val" (changeChecked)="val=$event". */
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    /** Visually and functionally disables the toggle. State is still readable by assistive tech. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** Accessible label. Required if no visible label text surrounds the toggle in the DOM. */
+    ariaLabel = input('Toggle', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    toggle() {
+        if (!this.disabled()) {
+            this.checked.update(v => !v);
+        }
+    }
+    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"] });
+}
+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"] }]
+        }], 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 }] }] } });
+
+/**
+ * GhostField — transparent-until-hover wrapper for inline-editable fields.
+ *
+ * Applies .wm-ghost-field to its content; all visual behaviour is CSS-driven
+ * (inputs.css). No inputs or outputs — interactivity belongs to the inner
+ * element projected via ng-content.
+ *
+ * Usage:
+ *   <wm-ghost-field>
+ *     <input class="wm-input-bare" [(ngModel)]="title" aria-label="Task title" />
+ *   </wm-ghost-field>
+ */
+class GhostField {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: GhostField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: GhostField, isStandalone: true, selector: "wm-ghost-field", ngImport: i0, template: `<div class="wm-ghost-field"><ng-content /></div>`, isInline: true, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: GhostField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wm-ghost-field',
+                    standalone: true,
+                    template: `<div class="wm-ghost-field"><ng-content /></div>`,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }] });
+
+/**
+ * PageHeader — standardised page-level heading with eyebrow label, title,
+ * optional subtitle, optional status badge, and projected action/back slots.
+ *
+ * Slots:
+ *   [icon]   — 12×12 icon projected into the eyebrow row (optional)
+ *   [back]   — back-navigation element (link or button) placed in the status row (optional)
+ *   default  — action buttons / controls placed below the status row
+ *
+ * Usage:
+ *   <wm-page-header flavourText="Sprints" title="Active Sprint" [badgeLabel]="daysLeft">
+ *     <svg icon .../>
+ *     <a back href="...">← Board</a>
+ *     <wm-button>New Sprint</wm-button>
+ *   </wm-page-header>
+ */
+class PageHeader {
+    flavourText = input.required(...(ngDevMode ? [{ debugName: "flavourText" }] : []));
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+    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: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: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 }] }] } });
+
+let nextId = 0;
+/**
+ * WmToastService — Application-wide toast notification manager.
+ *
+ * Provided in root; inject anywhere and call success(), error(), info(), or progress().
+ * Render `<wm-toast-container>` once at the app root to display toasts.
+ *
+ * Auto-dismiss: success/info after 4 s, error after 6 s.
+ * Progress toasts persist until explicitly dismissed.
+ * Custom duration via show(message, type, durationMs).
+ */
+class WmToastService {
+    toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : []));
+    show(message, type = 'info', duration) {
+        const id = ++nextId;
+        this.toasts.update(list => [...list, { id, message, type }]);
+        const ms = duration ?? (type === 'error' ? 6000 : 4000);
+        setTimeout(() => this.dismiss(id), ms);
+        return id;
+    }
+    success(message) { return this.show(message, 'success'); }
+    error(message) { return this.show(message, 'error'); }
+    info(message) { return this.show(message, 'info'); }
+    /**
+     * Show a persistent progress toast with spinner and elapsed timer.
+     * Returns the toast ID — caller must call dismiss(id) when done.
+     *
+     * @param message - Display message (e.g. "Generating docs…")
+     * @param onCancel - Optional callback invoked when the user clicks Cancel.
+     *                   The caller should abort the operation and then dismiss the toast.
+     */
+    progress(message, onCancel) {
+        const id = ++nextId;
+        this.toasts.update(list => [
+            ...list,
+            { id, message, type: 'progress', persistent: true, createdAt: Date.now(), onCancel },
+        ]);
+        return id;
+    }
+    dismiss(id) {
+        this.toasts.update(list => list.filter(t => t.id !== id));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * WmToastContainer — Renders the current stack of toasts.
+ *
+ * Place once at the application root (e.g. inside the shell or app component).
+ * Uses inline SVG icons — no external icon library dependency.
+ *
+ * Accessibility:
+ *  - Container has role="log" + aria-live="polite" so new toasts are announced
+ *  - Each toast has role="status"
+ *  - Dismiss button has an accessible label
+ */
+class WmToastContainer {
+    toastService = inject(WmToastService);
+    /** Tick signal that updates every second — drives the elapsed time display. */
+    tick = signal(Date.now(), ...(ngDevMode ? [{ debugName: "tick" }] : []));
+    tickInterval = setInterval(() => {
+        // Only tick when there are progress toasts with createdAt
+        if (this.toastService.toasts().some(t => t.type === 'progress' && t.createdAt)) {
+            this.tick.set(Date.now());
+        }
+    }, 1000);
+    ngOnDestroy() {
+        clearInterval(this.tickInterval);
+    }
+    dismiss(id) {
+        this.toastService.dismiss(id);
+    }
+    cancel(toast) {
+        toast.onCancel?.();
+        this.toastService.dismiss(toast.id);
+    }
+    typeClass(toast) {
+        return `wm-toast wm-toast--${toast.type}`;
+    }
+    elapsed(createdAt) {
+        const now = this.tick(); // reactive dependency on tick
+        const diff = Math.max(0, Math.floor((now - createdAt) / 1000));
+        if (diff < 60)
+            return `${diff}s`;
+        const mins = Math.floor(diff / 60);
+        const secs = diff % 60;
+        return `${mins}m ${secs.toString().padStart(2, '0')}s`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmToastContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: WmToastContainer, isStandalone: true, selector: "wm-toast-container", ngImport: i0, 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:color-mix(in srgb,var(--wm-color-success) 20%,var(--wm-bg-raised));color:var(--wm-color-success);border:1px solid color-mix(in srgb,var(--wm-color-success) 40%,transparent)}.wm-toast--error{background:color-mix(in srgb,var(--wm-color-danger) 20%,var(--wm-bg-raised));color:var(--wm-color-danger);border:1px solid color-mix(in srgb,var(--wm-color-danger) 40%,transparent)}.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 color-mix(in srgb,var(--wm-color-accent) 40%,transparent)}.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);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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmToastContainer, decorators: [{
+            type: Component,
+            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:color-mix(in srgb,var(--wm-color-success) 20%,var(--wm-bg-raised));color:var(--wm-color-success);border:1px solid color-mix(in srgb,var(--wm-color-success) 40%,transparent)}.wm-toast--error{background:color-mix(in srgb,var(--wm-color-danger) 20%,var(--wm-bg-raised));color:var(--wm-color-danger);border:1px solid color-mix(in srgb,var(--wm-color-danger) 40%,transparent)}.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 color-mix(in srgb,var(--wm-color-accent) 40%,transparent)}.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);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"] }]
+        }] });
+
+class WmLicenseService {
+    toast = inject(WmToastService);
+    license = signal(null, ...(ngDevMode ? [{ debugName: "license" }] : []));
+    isLicensed = computed(() => this.license()?.valid ?? false, ...(ngDevMode ? [{ debugName: "isLicensed" }] : []));
+    orgName = computed(() => this.license()?.org ?? null, ...(ngDevMode ? [{ debugName: "orgName" }] : []));
+    async checkLicense() {
+        try {
+            const status = await invoke('get_license_status');
+            this.license.set(status);
+            if (!status.valid && status.error) {
+                const message = status.error === 'expired'
+                    ? 'Your license key has expired.'
+                    : 'Your license key is not valid.';
+                this.toast.error(message);
+            }
+        }
+        catch (e) {
+            console.error('License check failed:', e);
+            this.license.set(null);
+        }
+    }
+    async installKey(jwt) {
+        const status = await invoke('install_license', { key: jwt });
+        this.license.set(status);
+        return status;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmLicenseService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmLicenseService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmLicenseService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class WmLicenseNudge {
+    licenseService = inject(WmLicenseService);
+    dismissed = signal(false, ...(ngDevMode ? [{ debugName: "dismissed" }] : []));
+    enterLicense = output();
+    shouldShow = () => !this.licenseService.isLicensed() && !this.dismissed();
+    dismiss() {
+        this.dismissed.set(true);
+    }
+    onEnterLicense() {
+        this.enterLicense.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmLicenseNudge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: WmLicenseNudge, isStandalone: true, selector: "wm-license-nudge", outputs: { enterLicense: "enterLicense" }, ngImport: i0, template: "@if (shouldShow()) {\n  <div class=\"wm-license-nudge\">\n    <span class=\"wm-license-nudge__text\">\n      Using this at work? Organizations require a commercial license.\n    </span>\n    <div class=\"wm-license-nudge__actions\">\n      <wm-button variant=\"ghost\" size=\"sm\" (click)=\"onEnterLicense()\">Enter License Key</wm-button>\n      <wm-button variant=\"ghost\" size=\"sm\" (click)=\"dismiss()\">Dismiss</wm-button>\n    </div>\n  </div>\n}\n", styles: [".wm-license-nudge{display:flex;align-items:center;justify-content:space-between;gap:var(--wm-space-md, 12px);padding:var(--wm-space-sm, 8px) var(--wm-space-md, 12px);background:var(--wm-bg-subtle, #2a2a2a);border-bottom:1px solid var(--wm-border, #3a3a3a);font-size:var(--wm-font-sm, 13px);color:var(--wm-fg-secondary, #999)}.wm-license-nudge__text{flex:1}.wm-license-nudge__actions{display:flex;gap:var(--wm-space-xs, 4px);flex-shrink:0}\n"], dependencies: [{ kind: "component", type: WmButton, selector: "wm-button", inputs: ["variant", "size", "disabled", "type", "iconOnly", "ariaLabel", "btnTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmLicenseNudge, decorators: [{
+            type: Component,
+            args: [{ selector: 'wm-license-nudge', standalone: true, imports: [WmButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (shouldShow()) {\n  <div class=\"wm-license-nudge\">\n    <span class=\"wm-license-nudge__text\">\n      Using this at work? Organizations require a commercial license.\n    </span>\n    <div class=\"wm-license-nudge__actions\">\n      <wm-button variant=\"ghost\" size=\"sm\" (click)=\"onEnterLicense()\">Enter License Key</wm-button>\n      <wm-button variant=\"ghost\" size=\"sm\" (click)=\"dismiss()\">Dismiss</wm-button>\n    </div>\n  </div>\n}\n", styles: [".wm-license-nudge{display:flex;align-items:center;justify-content:space-between;gap:var(--wm-space-md, 12px);padding:var(--wm-space-sm, 8px) var(--wm-space-md, 12px);background:var(--wm-bg-subtle, #2a2a2a);border-bottom:1px solid var(--wm-border, #3a3a3a);font-size:var(--wm-font-sm, 13px);color:var(--wm-fg-secondary, #999)}.wm-license-nudge__text{flex:1}.wm-license-nudge__actions{display:flex;gap:var(--wm-space-xs, 4px);flex-shrink:0}\n"] }]
+        }], propDecorators: { enterLicense: [{ type: i0.Output, args: ["enterLicense"] }] } });
+
+class WmLicenseDialog {
+    licenseService = inject(WmLicenseService);
+    visible = input.required(...(ngDevMode ? [{ debugName: "visible" }] : []));
+    dismiss = output();
+    keyInput = signal('', ...(ngDevMode ? [{ debugName: "keyInput" }] : []));
+    validationResult = signal(null, ...(ngDevMode ? [{ debugName: "validationResult" }] : []));
+    validating = signal(false, ...(ngDevMode ? [{ debugName: "validating" }] : []));
+    installed = signal(false, ...(ngDevMode ? [{ debugName: "installed" }] : []));
+    onDismiss() {
+        this.reset();
+        this.dismiss.emit();
+    }
+    onKeyInput(event) {
+        const value = event.target.value;
+        this.keyInput.set(value);
+        this.validationResult.set(null);
+        this.installed.set(false);
+    }
+    async validate() {
+        const jwt = this.keyInput().trim();
+        if (!jwt)
+            return;
+        this.validating.set(true);
+        try {
+            const status = await this.licenseService.installKey(jwt);
+            this.validationResult.set(status);
+            if (status.valid) {
+                this.installed.set(true);
+            }
+        }
+        catch (e) {
+            this.validationResult.set({
+                valid: false,
+                org: null,
+                product: '',
+                seats: null,
+                tier: null,
+                expires: null,
+                key_id: null,
+                error: String(e),
+            });
+        }
+        finally {
+            this.validating.set(false);
+        }
+    }
+    reset() {
+        this.keyInput.set('');
+        this.validationResult.set(null);
+        this.validating.set(false);
+        this.installed.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmLicenseDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: WmLicenseDialog, isStandalone: true, selector: "wm-license-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "<wm-modal [visible]=\"visible()\" (dismiss)=\"onDismiss()\">\n  <div class=\"wm-license-dialog\">\n    <h2 class=\"wm-license-dialog__title\">Enter License Key</h2>\n\n    @if (installed()) {\n      <div class=\"wm-license-dialog__success\">\n        <p class=\"wm-license-dialog__success-text\">License activated successfully.</p>\n        <dl class=\"wm-license-dialog__details\">\n          <dt>Organization</dt>\n          <dd>{{ validationResult()?.org }}</dd>\n          <dt>Seats</dt>\n          <dd>{{ validationResult()?.seats }}</dd>\n          <dt>Expires</dt>\n          <dd>{{ validationResult()?.expires?.slice(0, 10) }}</dd>\n        </dl>\n        <wm-button variant=\"primary\" size=\"sm\" (click)=\"onDismiss()\">Done</wm-button>\n      </div>\n    } @else {\n      <textarea\n        class=\"wm-license-dialog__input\"\n        placeholder=\"Paste your license key here...\"\n        [value]=\"keyInput()\"\n        (input)=\"onKeyInput($event)\"\n        rows=\"4\"\n      ></textarea>\n\n      @if (validationResult(); as result) {\n        @if (!result.valid) {\n          <p class=\"wm-license-dialog__error\">\n            @if (result.error === 'expired') {\n              This license key has expired.\n            } @else {\n              This is not a valid license key for this product.\n            }\n          </p>\n        }\n      }\n\n      <div class=\"wm-license-dialog__actions\">\n        <wm-button\n          variant=\"primary\"\n          size=\"sm\"\n          [disabled]=\"!keyInput().trim() || validating()\"\n          (click)=\"validate()\"\n        >\n          @if (validating()) { Validating... } @else { Activate }\n        </wm-button>\n      </div>\n    }\n  </div>\n</wm-modal>\n", styles: [".wm-license-dialog{background:var(--wm-bg-raised, #1e1e1e);border-radius:var(--wm-radius-md, 8px);padding:var(--wm-space-lg, 20px);width:480px;max-width:90vw;display:flex;flex-direction:column;gap:var(--wm-space-md, 12px)}.wm-license-dialog__title{font-size:var(--wm-font-lg, 16px);font-weight:600;color:var(--wm-fg-primary, #fff);margin:0}.wm-license-dialog__input{width:100%;resize:vertical;font-family:var(--wm-font-mono, monospace);font-size:var(--wm-font-sm, 13px);padding:var(--wm-space-sm, 8px);border:1px solid var(--wm-border, #3a3a3a);border-radius:var(--wm-radius-sm, 4px);background:var(--wm-bg-input, #141414);color:var(--wm-fg-primary, #fff);box-sizing:border-box}.wm-license-dialog__input:focus{outline:none;border-color:var(--wm-accent, #4a9eff)}.wm-license-dialog__error{color:var(--wm-fg-error, #f44);font-size:var(--wm-font-sm, 13px);margin:0}.wm-license-dialog__success{display:flex;flex-direction:column;gap:var(--wm-space-md, 12px)}.wm-license-dialog__success-text{color:var(--wm-fg-success, #4caf50);font-size:var(--wm-font-sm, 13px);margin:0}.wm-license-dialog__details{display:grid;grid-template-columns:auto 1fr;gap:var(--wm-space-xs, 4px) var(--wm-space-md, 12px);font-size:var(--wm-font-sm, 13px);margin:0}.wm-license-dialog__details dt{color:var(--wm-fg-secondary, #999)}.wm-license-dialog__details dd{color:var(--wm-fg-primary, #fff);margin:0}.wm-license-dialog__actions{display:flex;justify-content:flex-end;gap:var(--wm-space-sm, 8px)}\n"], dependencies: [{ kind: "component", type: WmModal, selector: "wm-modal", inputs: ["visible", "align"], outputs: ["dismiss"] }, { kind: "component", type: WmButton, selector: "wm-button", inputs: ["variant", "size", "disabled", "type", "iconOnly", "ariaLabel", "btnTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmLicenseDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'wm-license-dialog', standalone: true, imports: [WmModal, WmButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<wm-modal [visible]=\"visible()\" (dismiss)=\"onDismiss()\">\n  <div class=\"wm-license-dialog\">\n    <h2 class=\"wm-license-dialog__title\">Enter License Key</h2>\n\n    @if (installed()) {\n      <div class=\"wm-license-dialog__success\">\n        <p class=\"wm-license-dialog__success-text\">License activated successfully.</p>\n        <dl class=\"wm-license-dialog__details\">\n          <dt>Organization</dt>\n          <dd>{{ validationResult()?.org }}</dd>\n          <dt>Seats</dt>\n          <dd>{{ validationResult()?.seats }}</dd>\n          <dt>Expires</dt>\n          <dd>{{ validationResult()?.expires?.slice(0, 10) }}</dd>\n        </dl>\n        <wm-button variant=\"primary\" size=\"sm\" (click)=\"onDismiss()\">Done</wm-button>\n      </div>\n    } @else {\n      <textarea\n        class=\"wm-license-dialog__input\"\n        placeholder=\"Paste your license key here...\"\n        [value]=\"keyInput()\"\n        (input)=\"onKeyInput($event)\"\n        rows=\"4\"\n      ></textarea>\n\n      @if (validationResult(); as result) {\n        @if (!result.valid) {\n          <p class=\"wm-license-dialog__error\">\n            @if (result.error === 'expired') {\n              This license key has expired.\n            } @else {\n              This is not a valid license key for this product.\n            }\n          </p>\n        }\n      }\n\n      <div class=\"wm-license-dialog__actions\">\n        <wm-button\n          variant=\"primary\"\n          size=\"sm\"\n          [disabled]=\"!keyInput().trim() || validating()\"\n          (click)=\"validate()\"\n        >\n          @if (validating()) { Validating... } @else { Activate }\n        </wm-button>\n      </div>\n    }\n  </div>\n</wm-modal>\n", styles: [".wm-license-dialog{background:var(--wm-bg-raised, #1e1e1e);border-radius:var(--wm-radius-md, 8px);padding:var(--wm-space-lg, 20px);width:480px;max-width:90vw;display:flex;flex-direction:column;gap:var(--wm-space-md, 12px)}.wm-license-dialog__title{font-size:var(--wm-font-lg, 16px);font-weight:600;color:var(--wm-fg-primary, #fff);margin:0}.wm-license-dialog__input{width:100%;resize:vertical;font-family:var(--wm-font-mono, monospace);font-size:var(--wm-font-sm, 13px);padding:var(--wm-space-sm, 8px);border:1px solid var(--wm-border, #3a3a3a);border-radius:var(--wm-radius-sm, 4px);background:var(--wm-bg-input, #141414);color:var(--wm-fg-primary, #fff);box-sizing:border-box}.wm-license-dialog__input:focus{outline:none;border-color:var(--wm-accent, #4a9eff)}.wm-license-dialog__error{color:var(--wm-fg-error, #f44);font-size:var(--wm-font-sm, 13px);margin:0}.wm-license-dialog__success{display:flex;flex-direction:column;gap:var(--wm-space-md, 12px)}.wm-license-dialog__success-text{color:var(--wm-fg-success, #4caf50);font-size:var(--wm-font-sm, 13px);margin:0}.wm-license-dialog__details{display:grid;grid-template-columns:auto 1fr;gap:var(--wm-space-xs, 4px) var(--wm-space-md, 12px);font-size:var(--wm-font-sm, 13px);margin:0}.wm-license-dialog__details dt{color:var(--wm-fg-secondary, #999)}.wm-license-dialog__details dd{color:var(--wm-fg-primary, #fff);margin:0}.wm-license-dialog__actions{display:flex;justify-content:flex-end;gap:var(--wm-space-sm, 8px)}\n"] }]
+        }], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: true }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
+
+// Components
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Checkbox, GhostField, NumberInput, PageHeader, Toggle, WmAutoFocus, WmButton, WmDialog, WmLicenseDialog, WmLicenseNudge, WmLicenseService, WmModal, WmPopover, WmSelect, WmTab, WmTabs, WmToastContainer, WmToastService };
+//# sourceMappingURL=wildmason-aegis.mjs.map