@wildmason/aegis 1.5.4 → 1.5.6

package/dist/fesm2022/wildmason-aegis.mjs

@@ -1,9 +1,12 @@
 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 { input, output, HostListener, ChangeDetectionStrategy, Component, model, signal, computed, inject, ElementRef, Renderer2, ChangeDetectorRef, viewChild, effect, ViewEncapsulation, Input, Directive, contentChildren, forwardRef, ViewChild, Injectable } from '@angular/core';
 import { 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 { Subject, debounceTime, switchMap, of, catchError, finalize } from 'rxjs';
+import * as i1 from '@angular/cdk/scrolling';
+import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { invoke } from '@tauri-apps/api/core';
 
 /**
@@ -659,6 +662,656 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             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 }] }] } });
 
+/** Module-level counter for unique panel instance IDs. */
+let nextPanelId = 0;
+/**
+ * Internal sub-component that renders the virtual-scrolled option list
+ * inside the WmCombobox's CDK overlay. NOT exported from Aegis.
+ */
+class ComboboxPanel {
+    /** Filtered options to display. */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    /** Index of the keyboard-highlighted option (-1 = none). */
+    highlightIndex = input(-1, ...(ngDevMode ? [{ debugName: "highlightIndex" }] : []));
+    /** Values currently selected (for checkmark display). */
+    selectedValues = input(new Set(), ...(ngDevMode ? [{ debugName: "selectedValues" }] : []));
+    /** Whether the parent is multi-select. */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    /** Pixel height per row. */
+    itemHeight = input(36, ...(ngDevMode ? [{ debugName: "itemHeight" }] : []));
+    /** Max panel height in pixels. */
+    maxHeight = input(256, ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
+    /** Current filter text — used for match highlighting in labels. */
+    filterQuery = input('', ...(ngDevMode ? [{ debugName: "filterQuery" }] : []));
+    /** Show spinner when async filter is pending. */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    /** Shown in empty state when freeform input is enabled. */
+    freeformHint = input('', ...(ngDevMode ? [{ debugName: "freeformHint" }] : []));
+    /** Emitted on mousedown (not click) to prevent focus steal. */
+    optionClicked = output();
+    viewport;
+    /** Unique instance ID for generating DOM IDs. */
+    instanceId = nextPanelId++;
+    /** The DOM ID of the listbox element — used by parent for aria-controls. */
+    listboxId = `wm-combobox-${this.instanceId}-listbox`;
+    /** Computed viewport height: min of (options * itemHeight) and maxHeight. */
+    viewportHeight = computed(() => {
+        const count = this.options().length;
+        return Math.min(count * this.itemHeight(), this.maxHeight());
+    }, ...(ngDevMode ? [{ debugName: "viewportHeight" }] : []));
+    /** Whether to show the empty state. */
+    showEmpty = computed(() => this.options().length === 0 && !this.loading(), ...(ngDevMode ? [{ debugName: "showEmpty" }] : []));
+    /** Text for the empty state. */
+    emptyText = computed(() => this.freeformHint() || 'No matches', ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
+    /**
+     * Precomputed label segments for each option, split by the current filter query.
+     * Recomputes whenever options or filterQuery changes.
+     */
+    segmentedLabels = computed(() => {
+        const query = this.filterQuery().trim();
+        return this.options().map(opt => this.splitLabel(opt.label, query));
+    }, ...(ngDevMode ? [{ debugName: "segmentedLabels" }] : []));
+    /** Map from option value to a stable key for DOM IDs. */
+    optionKeyMap = new Map();
+    nextObjectIndex = 0;
+    constructor() {
+        // Scroll the highlighted option into view whenever highlightIndex changes.
+        effect(() => {
+            const idx = this.highlightIndex();
+            if (idx >= 0 && this.viewport) {
+                this.viewport.scrollToIndex(idx);
+            }
+        });
+    }
+    /** Returns a stable DOM ID for the option at the given index. */
+    optionIdAt(index) {
+        const opts = this.options();
+        if (index < 0 || index >= opts.length) {
+            return '';
+        }
+        return `wm-combobox-${this.instanceId}-opt-${this.keyFor(opts[index].value)}`;
+    }
+    /** Handle mousedown on an option — emits event and prevents default. */
+    onOptionMousedown(event, option, index) {
+        event.preventDefault();
+        if (!option.disabled) {
+            this.optionClicked.emit({ option, index });
+        }
+    }
+    /** Check whether a value is currently selected. */
+    isSelected(value) {
+        return this.selectedValues().has(value);
+    }
+    /** Get label segments for the option at the given virtual-scroll index. */
+    segmentsAt(index) {
+        return this.segmentedLabels()[index] ?? [{ text: '', match: false }];
+    }
+    /**
+     * Returns a stable string key for an option value.
+     * Strings/numbers use the value directly. Objects use a monotonic index.
+     */
+    keyFor(value) {
+        if (typeof value === 'string' || typeof value === 'number') {
+            return String(value);
+        }
+        let key = this.optionKeyMap.get(value);
+        if (key == null) {
+            key = `obj-${this.nextObjectIndex++}`;
+            this.optionKeyMap.set(value, key);
+        }
+        return key;
+    }
+    /**
+     * Split a label into segments where the query matches (case-insensitive).
+     * Returns an array of { text, match } segments.
+     */
+    splitLabel(label, query) {
+        if (!query) {
+            return [{ text: label, match: false }];
+        }
+        const segments = [];
+        const lowerLabel = label.toLowerCase();
+        const lowerQuery = query.toLowerCase();
+        let cursor = 0;
+        while (cursor < label.length) {
+            const matchIndex = lowerLabel.indexOf(lowerQuery, cursor);
+            if (matchIndex === -1) {
+                segments.push({ text: label.slice(cursor), match: false });
+                break;
+            }
+            if (matchIndex > cursor) {
+                segments.push({ text: label.slice(cursor, matchIndex), match: false });
+            }
+            segments.push({
+                text: label.slice(matchIndex, matchIndex + query.length),
+                match: true,
+            });
+            cursor = matchIndex + query.length;
+        }
+        return segments;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ComboboxPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ComboboxPanel, isStandalone: true, selector: "wm-combobox-panel", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, highlightIndex: { classPropertyName: "highlightIndex", publicName: "highlightIndex", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, filterQuery: { classPropertyName: "filterQuery", publicName: "filterQuery", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, freeformHint: { classPropertyName: "freeformHint", publicName: "freeformHint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionClicked: "optionClicked" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "@if (loading()) {\n  <div class=\"wm-cb-loading\" aria-live=\"polite\">\n    <svg\n      class=\"wm-cb-spinner\"\n      width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n      fill=\"none\" aria-hidden=\"true\"\n    >\n      <circle\n        cx=\"10\" cy=\"10\" r=\"8\"\n        stroke=\"currentColor\" stroke-width=\"2\"\n        stroke-dasharray=\"40 60\"\n        stroke-linecap=\"round\"\n      />\n    </svg>\n    <span class=\"wm-cb-loading-text\">Loading\u2026</span>\n  </div>\n} @else if (showEmpty()) {\n  <div class=\"wm-cb-empty\" aria-live=\"polite\">{{ emptyText() }}</div>\n} @else {\n  <cdk-virtual-scroll-viewport\n    [itemSize]=\"itemHeight()\"\n    [style.height.px]=\"viewportHeight()\"\n    class=\"wm-cb-viewport\"\n  >\n    <div\n      [id]=\"listboxId\"\n      role=\"listbox\"\n      [attr.aria-multiselectable]=\"multiple() ? true : null\"\n    >\n      <div\n        *cdkVirtualFor=\"let opt of options(); let i = index\"\n        role=\"option\"\n        class=\"wm-cb-option\"\n        [id]=\"optionIdAt(i)\"\n        [class.is-highlighted]=\"i === highlightIndex()\"\n        [class.is-selected]=\"isSelected(opt.value)\"\n        [class.is-disabled]=\"!!opt.disabled\"\n        [attr.aria-selected]=\"isSelected(opt.value)\"\n        [attr.aria-disabled]=\"opt.disabled ? true : null\"\n        (mousedown)=\"onOptionMousedown($event, opt, i)\"\n      >\n        <span class=\"wm-cb-option-label\">\n          @for (seg of segmentsAt(i); track $index) {\n            @if (seg.match) {\n              <b class=\"wm-cb-match\">{{ seg.text }}</b>\n            } @else {\n              {{ seg.text }}\n            }\n          }\n        </span>\n        @if (isSelected(opt.value)) {\n          <svg\n            class=\"wm-cb-check\"\n            width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"\n            fill=\"none\" aria-hidden=\"true\"\n          >\n            <polyline\n              points=\"20 6 9 17 4 12\"\n              stroke=\"currentColor\" stroke-width=\"2.5\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\"\n            />\n          </svg>\n        }\n      </div>\n    </div>\n  </cdk-virtual-scroll-viewport>\n}\n", styles: [":host{display:block}.wm-cb-viewport{width:100%}.wm-cb-option{display:flex;align-items:center;justify-content:space-between;gap:.5rem;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);-webkit-user-select:none;user-select:none}.wm-cb-option:hover:not(.is-disabled):not(.is-highlighted){background:var(--wm-bg-active)}.wm-cb-option.is-highlighted{background:color-mix(in srgb,var(--wm-color-accent) 15%,transparent)}.wm-cb-option.is-selected{background:color-mix(in srgb,var(--wm-color-accent) 10%,transparent);color:var(--wm-color-accent);font-weight:500}.wm-cb-option.is-disabled{opacity:.4;cursor:not-allowed}.wm-cb-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-cb-match{font-weight:700;color:var(--wm-color-accent)}.wm-cb-check{flex-shrink:0;color:var(--wm-color-accent)}.wm-cb-empty{padding:.75rem .625rem;color:var(--wm-text-muted);font-size:.875rem;text-align:center}.wm-cb-loading{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem .625rem;color:var(--wm-text-muted);font-size:.875rem}.wm-cb-spinner{animation:wm-cb-spin .8s linear infinite}@keyframes wm-cb-spin{to{transform:rotate(360deg)}}.wm-cb-loading-text{color:var(--wm-text-muted)}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ComboboxPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'wm-combobox-panel', imports: [ScrollingModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (loading()) {\n  <div class=\"wm-cb-loading\" aria-live=\"polite\">\n    <svg\n      class=\"wm-cb-spinner\"\n      width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n      fill=\"none\" aria-hidden=\"true\"\n    >\n      <circle\n        cx=\"10\" cy=\"10\" r=\"8\"\n        stroke=\"currentColor\" stroke-width=\"2\"\n        stroke-dasharray=\"40 60\"\n        stroke-linecap=\"round\"\n      />\n    </svg>\n    <span class=\"wm-cb-loading-text\">Loading\u2026</span>\n  </div>\n} @else if (showEmpty()) {\n  <div class=\"wm-cb-empty\" aria-live=\"polite\">{{ emptyText() }}</div>\n} @else {\n  <cdk-virtual-scroll-viewport\n    [itemSize]=\"itemHeight()\"\n    [style.height.px]=\"viewportHeight()\"\n    class=\"wm-cb-viewport\"\n  >\n    <div\n      [id]=\"listboxId\"\n      role=\"listbox\"\n      [attr.aria-multiselectable]=\"multiple() ? true : null\"\n    >\n      <div\n        *cdkVirtualFor=\"let opt of options(); let i = index\"\n        role=\"option\"\n        class=\"wm-cb-option\"\n        [id]=\"optionIdAt(i)\"\n        [class.is-highlighted]=\"i === highlightIndex()\"\n        [class.is-selected]=\"isSelected(opt.value)\"\n        [class.is-disabled]=\"!!opt.disabled\"\n        [attr.aria-selected]=\"isSelected(opt.value)\"\n        [attr.aria-disabled]=\"opt.disabled ? true : null\"\n        (mousedown)=\"onOptionMousedown($event, opt, i)\"\n      >\n        <span class=\"wm-cb-option-label\">\n          @for (seg of segmentsAt(i); track $index) {\n            @if (seg.match) {\n              <b class=\"wm-cb-match\">{{ seg.text }}</b>\n            } @else {\n              {{ seg.text }}\n            }\n          }\n        </span>\n        @if (isSelected(opt.value)) {\n          <svg\n            class=\"wm-cb-check\"\n            width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"\n            fill=\"none\" aria-hidden=\"true\"\n          >\n            <polyline\n              points=\"20 6 9 17 4 12\"\n              stroke=\"currentColor\" stroke-width=\"2.5\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\"\n            />\n          </svg>\n        }\n      </div>\n    </div>\n  </cdk-virtual-scroll-viewport>\n}\n", styles: [":host{display:block}.wm-cb-viewport{width:100%}.wm-cb-option{display:flex;align-items:center;justify-content:space-between;gap:.5rem;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);-webkit-user-select:none;user-select:none}.wm-cb-option:hover:not(.is-disabled):not(.is-highlighted){background:var(--wm-bg-active)}.wm-cb-option.is-highlighted{background:color-mix(in srgb,var(--wm-color-accent) 15%,transparent)}.wm-cb-option.is-selected{background:color-mix(in srgb,var(--wm-color-accent) 10%,transparent);color:var(--wm-color-accent);font-weight:500}.wm-cb-option.is-disabled{opacity:.4;cursor:not-allowed}.wm-cb-option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-cb-match{font-weight:700;color:var(--wm-color-accent)}.wm-cb-check{flex-shrink:0;color:var(--wm-color-accent)}.wm-cb-empty{padding:.75rem .625rem;color:var(--wm-text-muted);font-size:.875rem;text-align:center}.wm-cb-loading{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem .625rem;color:var(--wm-text-muted);font-size:.875rem}.wm-cb-spinner{animation:wm-cb-spin .8s linear infinite}@keyframes wm-cb-spin{to{transform:rotate(360deg)}}.wm-cb-loading-text{color:var(--wm-text-muted)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], highlightIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightIndex", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], filterQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterQuery", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], freeformHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "freeformHint", required: false }] }], optionClicked: [{ type: i0.Output, args: ["optionClicked"] }], viewport: [{
+                type: ViewChild,
+                args: [CdkVirtualScrollViewport]
+            }] } });
+
+/**
+ * WmCombobox — Accessible combobox with filtering, single/multi-select,
+ * freeform entry, chips, and virtual-scrolled panel.
+ *
+ * Built on Angular CDK Overlay and the WAI-ARIA APG combobox pattern.
+ * DOM focus ALWAYS stays on the input; assistive tech focus moves via
+ * `aria-activedescendant`.
+ *
+ * Implements ControlValueAccessor for both template-driven and reactive forms.
+ *
+ * Usage:
+ *   <!-- Single-select -->
+ *   <wm-combobox [options]="opts" [(value)]="selected" />
+ *
+ *   <!-- Multi-select with chips -->
+ *   <wm-combobox [options]="opts" [(values)]="selectedIds" [multiple]="true" />
+ *
+ *   <!-- Async filter -->
+ *   <wm-combobox [options]="opts" [filterFn]="searchApi" />
+ *
+ *   <!-- Reactive form -->
+ *   <wm-combobox formControlName="tag" [options]="tags" />
+ */
+class WmCombobox {
+    // ── Public inputs ──────────────────────────────────────────────────────
+    /** Full option list (before filtering). */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    /** Selected value (single-select). Two-way bindable. */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Selected values (multi-select). Two-way bindable. */
+    values = model([], ...(ngDevMode ? [{ debugName: "values" }] : []));
+    /** Enable multi-select mode with chips. */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    /** Allow typed text to be accepted as a freeform value. */
+    allowFreeform = input(false, ...(ngDevMode ? [{ debugName: "allowFreeform" }] : []));
+    /** Placeholder text for the input. */
+    placeholder = input('Search\u2026', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** Disable the combobox. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** Custom async filter function. Overrides default substring matching. */
+    filterFn = input(null, ...(ngDevMode ? [{ debugName: "filterFn" }] : []));
+    /** Pixel height of each option row. */
+    itemHeight = input(36, ...(ngDevMode ? [{ debugName: "itemHeight" }] : []));
+    /** Max panel height in pixels. */
+    maxPanelHeight = input(256, ...(ngDevMode ? [{ debugName: "maxPanelHeight" }] : []));
+    // ── Public outputs ─────────────────────────────────────────────────────
+    /** Emitted when the input text changes. */
+    query = output();
+    /** Emitted when the panel opens. */
+    opened = output();
+    /** Emitted when the panel closes. */
+    closed = output();
+    // ── View children ──────────────────────────────────────────────────────
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
+    panel = viewChild(ComboboxPanel, ...(ngDevMode ? [{ debugName: "panel" }] : []));
+    // ── Internal state ─────────────────────────────────────────────────────
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    inputText = signal('', ...(ngDevMode ? [{ debugName: "inputText" }] : []));
+    highlightIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightIndex" }] : []));
+    asyncLoading = signal(false, ...(ngDevMode ? [{ debugName: "asyncLoading" }] : []));
+    asyncResults = signal(null, ...(ngDevMode ? [{ debugName: "asyncResults" }] : []));
+    /** Text the input had when the panel opened — restored on Escape. */
+    savedText = '';
+    hostEl = inject((ElementRef));
+    // ── CVA state ──────────────────────────────────────────────────────────
+    onChangeFn = () => { };
+    onTouchedFn = () => { };
+    // ── Async filter plumbing ──────────────────────────────────────────────
+    filterSubject = new Subject();
+    filterSub = null;
+    // ── Live region debounce ───────────────────────────────────────────────
+    liveText = signal('', ...(ngDevMode ? [{ debugName: "liveText" }] : []));
+    liveTimer = null;
+    // ── Computed ───────────────────────────────────────────────────────────
+    /** Set of currently selected values for the panel. */
+    selectedValues = computed(() => {
+        if (this.multiple()) {
+            return new Set(this.values());
+        }
+        const v = this.value();
+        return v != null ? new Set([v]) : new Set();
+    }, ...(ngDevMode ? [{ debugName: "selectedValues" }] : []));
+    /** Filtered options shown in the panel. */
+    filteredOptions = computed(() => {
+        // If async filterFn is set and we have results, use those.
+        const asyncRes = this.asyncResults();
+        if (this.filterFn() && asyncRes !== null) {
+            return asyncRes;
+        }
+        const query = this.inputText().trim().toLowerCase();
+        const opts = this.options();
+        if (!query)
+            return opts;
+        return opts.filter(o => o.label.toLowerCase().includes(query));
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+    /** Chips for multi-select mode. */
+    chips = computed(() => {
+        if (!this.multiple())
+            return [];
+        const vals = this.values();
+        const opts = this.options();
+        return vals.map(v => {
+            const opt = opts.find(o => o.value === v);
+            return { value: v, label: opt?.label ?? String(v) };
+        });
+    }, ...(ngDevMode ? [{ debugName: "chips" }] : []));
+    /** The aria-activedescendant value. */
+    activeDescendant = computed(() => {
+        const idx = this.highlightIndex();
+        const p = this.panel();
+        if (idx < 0 || !p)
+            return null;
+        return p.optionIdAt(idx) || null;
+    }, ...(ngDevMode ? [{ debugName: "activeDescendant" }] : []));
+    /** The listbox ID from the panel (for aria-controls). */
+    panelListboxId = computed(() => {
+        const p = this.panel();
+        return p ? p.listboxId : null;
+    }, ...(ngDevMode ? [{ debugName: "panelListboxId" }] : []));
+    /** Freeform hint for empty state. */
+    freeformHint = computed(() => {
+        if (!this.allowFreeform())
+            return '';
+        const text = this.inputText().trim();
+        return text ? `Press Enter to add "${text}"` : '';
+    }, ...(ngDevMode ? [{ debugName: "freeformHint" }] : []));
+    /** Overlay width tracks host element width. */
+    get overlayWidth() {
+        return this.hostEl.nativeElement.offsetWidth || 200;
+    }
+    /** Overlay positions: below-first with above-fallback. */
+    positions = [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+    ];
+    constructor() {
+        // Wire up async filter subscription.
+        this.filterSub = this.filterSubject
+            .pipe(debounceTime(200), switchMap(q => {
+            const fn = this.filterFn();
+            if (!fn)
+                return of(null);
+            this.asyncLoading.set(true);
+            return fn(q).pipe(catchError(() => of([])), finalize(() => this.asyncLoading.set(false)));
+        }))
+            .subscribe(results => {
+            if (results !== null) {
+                this.asyncResults.set(results);
+            }
+        });
+        // Update live region when filtered options change (debounced 300ms).
+        effect(() => {
+            const count = this.filteredOptions().length;
+            const total = this.options().length;
+            // Read isOpen to track it in this effect.
+            const open = this.isOpen();
+            // Clear any pending timer.
+            if (this.liveTimer !== null) {
+                clearTimeout(this.liveTimer);
+            }
+            if (!open) {
+                this.liveText.set('');
+                return;
+            }
+            this.liveTimer = setTimeout(() => {
+                if (count === 0) {
+                    this.liveText.set('No results');
+                }
+                else if (this.filterFn() || this.inputText().trim()) {
+                    this.liveText.set(total > 0 && count < total
+                        ? `${count} of ${total} results`
+                        : `${count} results available`);
+                }
+                else {
+                    this.liveText.set(`${count} results available`);
+                }
+            }, 300);
+        });
+    }
+    ngOnDestroy() {
+        this.filterSub?.unsubscribe();
+        if (this.liveTimer !== null) {
+            clearTimeout(this.liveTimer);
+        }
+    }
+    // ── CVA ────────────────────────────────────────────────────────────────
+    writeValue(value) {
+        if (this.multiple()) {
+            const arr = Array.isArray(value) ? value : [];
+            this.values.set(arr);
+        }
+        else {
+            this.value.set(value);
+            // Show label for current value.
+            const opt = this.options().find(o => o.value === value);
+            this.inputText.set(opt?.label ?? '');
+        }
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    // ── Panel open/close ───────────────────────────────────────────────────
+    open(highlightFirst = false, highlightLast = false) {
+        if (this.disabled() || this.isOpen())
+            return;
+        this.savedText = this.inputText();
+        this.isOpen.set(true);
+        this.opened.emit();
+        if (highlightFirst) {
+            this.highlightFirst();
+        }
+        else if (highlightLast) {
+            this.highlightLast();
+        }
+        else {
+            this.highlightIndex.set(-1);
+        }
+    }
+    close(restoreText = false) {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+        this.highlightIndex.set(-1);
+        this.closed.emit();
+        if (restoreText) {
+            this.inputText.set(this.savedText);
+        }
+        else if (!this.multiple()) {
+            // Restore label of selected value.
+            this.syncInputToSelection();
+        }
+    }
+    // ── Input events ───────────────────────────────────────────────────────
+    onInput(event) {
+        const text = event.target.value;
+        this.inputText.set(text);
+        this.query.emit(text);
+        this.highlightIndex.set(-1);
+        this.asyncResults.set(null);
+        if (this.filterFn()) {
+            this.filterSubject.next(text);
+        }
+        if (!this.isOpen()) {
+            this.open();
+        }
+    }
+    onBlur() {
+        this.onTouchedFn();
+        // Short delay so mousedown on an option fires first.
+        setTimeout(() => {
+            if (!this.isOpen())
+                return;
+            if (this.allowFreeform() && !this.multiple()) {
+                this.acceptFreeform();
+            }
+            this.close();
+        }, 150);
+    }
+    onTriggerClick() {
+        if (this.disabled())
+            return;
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+            // In single-select, select the input text for easy re-typing.
+            if (!this.multiple() && this.inputText()) {
+                const el = this.inputRef()?.nativeElement;
+                el?.select();
+            }
+        }
+    }
+    // ── Keyboard ───────────────────────────────────────────────────────────
+    onKeydown(event) {
+        if (this.disabled())
+            return;
+        const open = this.isOpen();
+        const hi = this.highlightIndex();
+        const opts = this.filteredOptions();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!open) {
+                    if (event.altKey) {
+                        this.open(false, false); // Alt+ArrowDown: open without highlight
+                    }
+                    else {
+                        this.open(true, false); // ArrowDown: open + highlight first
+                    }
+                }
+                else if (hi < 0) {
+                    this.highlightFirst();
+                }
+                else {
+                    const next = this.nextEnabled(hi, 1, opts);
+                    this.highlightIndex.set(next);
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (!open) {
+                    this.open(false, true); // ArrowUp: open + highlight last
+                }
+                else if (event.altKey) {
+                    this.close();
+                }
+                else if (hi < 0) {
+                    this.highlightLast();
+                }
+                else {
+                    const prev = this.nextEnabled(hi, -1, opts);
+                    this.highlightIndex.set(prev);
+                }
+                break;
+            case 'Enter':
+                if (open) {
+                    event.preventDefault();
+                    if (hi >= 0 && hi < opts.length) {
+                        this.selectOption(opts[hi]);
+                    }
+                    else if (this.allowFreeform() && this.inputText().trim()) {
+                        this.acceptFreeform();
+                        this.close();
+                    }
+                }
+                break;
+            case 'Escape':
+                if (open) {
+                    event.preventDefault();
+                    this.close(true); // Restore text
+                }
+                else {
+                    // Clear input text.
+                    this.inputText.set('');
+                    this.query.emit('');
+                }
+                break;
+            case 'Tab':
+                if (open) {
+                    if (hi >= 0 && hi < opts.length) {
+                        this.selectOption(opts[hi]);
+                    }
+                    this.close();
+                }
+                break;
+            case 'ArrowLeft':
+            case 'ArrowRight':
+            case 'Home':
+            case 'End':
+                // Clear highlight so cursor navigation works normally.
+                if (open && hi >= 0) {
+                    this.highlightIndex.set(-1);
+                }
+                break;
+            case 'Backspace':
+                if (open && hi >= 0) {
+                    // Clear highlight, let deletion happen in input.
+                    this.highlightIndex.set(-1);
+                }
+                else if (this.multiple() &&
+                    !this.inputText() &&
+                    this.values().length > 0) {
+                    // Remove last chip.
+                    this.removeChipByIndex(this.values().length - 1);
+                }
+                break;
+            default:
+                // Printable character: clear highlight, let it type.
+                if (open && hi >= 0 && event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+                    this.highlightIndex.set(-1);
+                }
+                // If closed and printable, open panel.
+                if (!open && event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+                    this.open();
+                }
+                break;
+        }
+    }
+    // ── Option selection ───────────────────────────────────────────────────
+    onOptionClicked(event) {
+        this.selectOption(event.option);
+        // Refocus input since mousedown prevented default.
+        this.inputRef()?.nativeElement.focus();
+    }
+    selectOption(opt) {
+        if (opt.disabled)
+            return;
+        if (this.multiple()) {
+            const current = this.values();
+            const idx = current.indexOf(opt.value);
+            if (idx >= 0) {
+                // Deselect.
+                this.values.set(current.filter((_, i) => i !== idx));
+            }
+            else {
+                this.values.set([...current, opt.value]);
+            }
+            // Clear input, keep panel open.
+            this.inputText.set('');
+            this.query.emit('');
+            this.highlightIndex.set(-1);
+            this.onChangeFn(this.values());
+        }
+        else {
+            this.value.set(opt.value);
+            this.inputText.set(opt.label);
+            this.onChangeFn(opt.value);
+            this.close();
+        }
+    }
+    // ── Chip removal ───────────────────────────────────────────────────────
+    removeChip(chipValue) {
+        const current = this.values();
+        this.values.set(current.filter(v => v !== chipValue));
+        this.onChangeFn(this.values());
+        this.inputRef()?.nativeElement.focus();
+    }
+    removeChipByIndex(index) {
+        const current = this.values();
+        this.values.set(current.filter((_, i) => i !== index));
+        this.onChangeFn(this.values());
+    }
+    // ── Freeform ───────────────────────────────────────────────────────────
+    acceptFreeform() {
+        const text = this.inputText().trim();
+        if (!text)
+            return;
+        if (this.multiple()) {
+            const current = this.values();
+            if (!current.includes(text)) {
+                this.values.set([...current, text]);
+                this.onChangeFn(this.values());
+            }
+            this.inputText.set('');
+            this.query.emit('');
+        }
+        else {
+            this.value.set(text);
+            this.onChangeFn(text);
+        }
+    }
+    // ── Highlight helpers ──────────────────────────────────────────────────
+    highlightFirst() {
+        const opts = this.filteredOptions();
+        for (let i = 0; i < opts.length; i++) {
+            if (!opts[i].disabled) {
+                this.highlightIndex.set(i);
+                return;
+            }
+        }
+        this.highlightIndex.set(-1);
+    }
+    highlightLast() {
+        const opts = this.filteredOptions();
+        for (let i = opts.length - 1; i >= 0; i--) {
+            if (!opts[i].disabled) {
+                this.highlightIndex.set(i);
+                return;
+            }
+        }
+        this.highlightIndex.set(-1);
+    }
+    /**
+     * Find the next enabled option in the given direction.
+     * Returns -1 if wrapping past the end/start (clears highlight).
+     */
+    nextEnabled(from, direction, opts) {
+        let i = from + direction;
+        if (i < 0 || i >= opts.length)
+            return -1; // Wrap clears highlight.
+        while (i >= 0 && i < opts.length) {
+            if (!opts[i].disabled)
+                return i;
+            i += direction;
+        }
+        return -1;
+    }
+    /** Sync input text to the currently selected option label (single-select). */
+    syncInputToSelection() {
+        const v = this.value();
+        if (v == null) {
+            this.inputText.set('');
+            return;
+        }
+        const opt = this.options().find(o => o.value === v);
+        this.inputText.set(opt?.label ?? '');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmCombobox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: WmCombobox, isStandalone: true, selector: "wm-combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, allowFreeform: { classPropertyName: "allowFreeform", publicName: "allowFreeform", 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 }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, maxPanelHeight: { classPropertyName: "maxPanelHeight", publicName: "maxPanelHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange", query: "query", opened: "opened", closed: "closed" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => WmCombobox),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ComboboxPanel, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Trigger wrapper \u2014 anchors the CDK overlay -->\n<div\n  class=\"wm-cb-trigger\"\n  [class.is-open]=\"isOpen()\"\n  [class.is-disabled]=\"disabled()\"\n  cdkOverlayOrigin\n  #origin=\"cdkOverlayOrigin\"\n  (click)=\"onTriggerClick()\"\n>\n  <!-- Multi-select chips -->\n  @if (multiple()) {\n    @for (chip of chips(); track chip.value) {\n      <span class=\"wm-cb-chip\">\n        <span class=\"wm-cb-chip-label\">{{ chip.label }}</span>\n        <button\n          type=\"button\"\n          class=\"wm-cb-chip-remove\"\n          tabindex=\"-1\"\n          [attr.aria-label]=\"'Remove ' + chip.label\"\n          (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n          (click)=\"$event.stopPropagation(); removeChip(chip.value)\"\n        >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M18 6L6 18M6 6l12 12\"\n              stroke=\"currentColor\" stroke-width=\"2\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n      </span>\n    }\n  }\n\n  <!-- Text input -->\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"wm-cb-input\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    [attr.placeholder]=\"chips().length ? '' : placeholder()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-autocomplete]=\"allowFreeform() ? 'both' : 'list'\"\n    [attr.aria-activedescendant]=\"activeDescendant()\"\n    [attr.aria-controls]=\"isOpen() ? panelListboxId() : null\"\n    [disabled]=\"disabled() || null\"\n    [value]=\"inputText()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <!-- Chevron -->\n  <svg\n    class=\"wm-cb-chevron\"\n    [class.is-open]=\"isOpen()\"\n    width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n    fill=\"none\" aria-hidden=\"true\"\n  >\n    <path d=\"M6 9l6 6 6-6\"\n      stroke=\"currentColor\" stroke-width=\"2\"\n      stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n</div>\n\n<!-- Live region for screen readers -->\n<span class=\"wm-cb-sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  {{ liveText() }}\n</span>\n\n<!-- Dropdown panel in CDK overlay -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayWidth]=\"overlayWidth\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"wm-cb-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"wm-cb-panel\">\n    <wm-combobox-panel\n      [options]=\"filteredOptions()\"\n      [highlightIndex]=\"highlightIndex()\"\n      [selectedValues]=\"selectedValues()\"\n      [multiple]=\"multiple()\"\n      [itemHeight]=\"itemHeight()\"\n      [maxHeight]=\"maxPanelHeight()\"\n      [filterQuery]=\"inputText()\"\n      [loading]=\"asyncLoading()\"\n      [freeformHint]=\"freeformHint()\"\n      (optionClicked)=\"onOptionClicked($event)\"\n    />\n  </div>\n</ng-template>\n", styles: [":host{display:block}.wm-cb-trigger{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;width:100%;min-height:36px;padding:.25rem .5rem;background:var(--wm-bg-base);border:1px solid var(--wm-border-input);border-radius:var(--wm-radius-sm);color:var(--wm-text-primary);font-size:.875rem;cursor:text;transition:border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast)}.wm-cb-trigger:hover:not(.is-disabled){border-color:var(--wm-color-accent)}.wm-cb-trigger:focus-within:not(.is-disabled){border-color:var(--wm-color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 25%,transparent)}.wm-cb-trigger.is-open{border-color:var(--wm-color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 20%,transparent)}.wm-cb-trigger.is-disabled{opacity:.45;cursor:not-allowed}.wm-cb-input{flex:1 1 60px;min-width:60px;border:none;outline:none;background:transparent;color:inherit;font:inherit;padding:.125rem 0}.wm-cb-input::placeholder{color:var(--wm-text-placeholder)}.wm-cb-input:disabled{cursor:not-allowed}.wm-cb-chevron{flex-shrink:0;color:var(--wm-text-muted);transition:transform var(--wm-transition-fast);pointer-events:none}.wm-cb-chevron.is-open{transform:rotate(180deg)}.wm-cb-chip{display:inline-flex;align-items:center;gap:.25rem;max-width:100%;padding:.125rem .375rem;background:color-mix(in srgb,var(--wm-color-accent) 15%,transparent);border:1px solid color-mix(in srgb,var(--wm-color-accent) 30%,transparent);border-radius:var(--wm-radius-sm);font-size:.8125rem;line-height:1.4;color:var(--wm-text-primary);-webkit-user-select:none;user-select:none}.wm-cb-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-cb-chip-remove{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--wm-text-muted);cursor:pointer;border-radius:var(--wm-radius-sm);transition:color var(--wm-transition-fast)}.wm-cb-chip-remove:hover{color:var(--wm-text-primary)}.wm-cb-backdrop{position:fixed;inset:0}.wm-cb-panel{width:100%;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #0000001f;overflow:hidden;padding:.25rem}.wm-cb-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ComboboxPanel, selector: "wm-combobox-panel", inputs: ["options", "highlightIndex", "selectedValues", "multiple", "itemHeight", "maxHeight", "filterQuery", "loading", "freeformHint"], outputs: ["optionClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: WmCombobox, decorators: [{
+            type: Component,
+            args: [{ selector: 'wm-combobox', imports: [CdkConnectedOverlay, CdkOverlayOrigin, ComboboxPanel], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => WmCombobox),
+                            multi: true,
+                        },
+                    ], template: "<!-- Trigger wrapper \u2014 anchors the CDK overlay -->\n<div\n  class=\"wm-cb-trigger\"\n  [class.is-open]=\"isOpen()\"\n  [class.is-disabled]=\"disabled()\"\n  cdkOverlayOrigin\n  #origin=\"cdkOverlayOrigin\"\n  (click)=\"onTriggerClick()\"\n>\n  <!-- Multi-select chips -->\n  @if (multiple()) {\n    @for (chip of chips(); track chip.value) {\n      <span class=\"wm-cb-chip\">\n        <span class=\"wm-cb-chip-label\">{{ chip.label }}</span>\n        <button\n          type=\"button\"\n          class=\"wm-cb-chip-remove\"\n          tabindex=\"-1\"\n          [attr.aria-label]=\"'Remove ' + chip.label\"\n          (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n          (click)=\"$event.stopPropagation(); removeChip(chip.value)\"\n        >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M18 6L6 18M6 6l12 12\"\n              stroke=\"currentColor\" stroke-width=\"2\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n      </span>\n    }\n  }\n\n  <!-- Text input -->\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"wm-cb-input\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    [attr.placeholder]=\"chips().length ? '' : placeholder()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-autocomplete]=\"allowFreeform() ? 'both' : 'list'\"\n    [attr.aria-activedescendant]=\"activeDescendant()\"\n    [attr.aria-controls]=\"isOpen() ? panelListboxId() : null\"\n    [disabled]=\"disabled() || null\"\n    [value]=\"inputText()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  <!-- Chevron -->\n  <svg\n    class=\"wm-cb-chevron\"\n    [class.is-open]=\"isOpen()\"\n    width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n    fill=\"none\" aria-hidden=\"true\"\n  >\n    <path d=\"M6 9l6 6 6-6\"\n      stroke=\"currentColor\" stroke-width=\"2\"\n      stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n</div>\n\n<!-- Live region for screen readers -->\n<span class=\"wm-cb-sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n  {{ liveText() }}\n</span>\n\n<!-- Dropdown panel in CDK overlay -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayWidth]=\"overlayWidth\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"wm-cb-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"wm-cb-panel\">\n    <wm-combobox-panel\n      [options]=\"filteredOptions()\"\n      [highlightIndex]=\"highlightIndex()\"\n      [selectedValues]=\"selectedValues()\"\n      [multiple]=\"multiple()\"\n      [itemHeight]=\"itemHeight()\"\n      [maxHeight]=\"maxPanelHeight()\"\n      [filterQuery]=\"inputText()\"\n      [loading]=\"asyncLoading()\"\n      [freeformHint]=\"freeformHint()\"\n      (optionClicked)=\"onOptionClicked($event)\"\n    />\n  </div>\n</ng-template>\n", styles: [":host{display:block}.wm-cb-trigger{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;width:100%;min-height:36px;padding:.25rem .5rem;background:var(--wm-bg-base);border:1px solid var(--wm-border-input);border-radius:var(--wm-radius-sm);color:var(--wm-text-primary);font-size:.875rem;cursor:text;transition:border-color var(--wm-transition-fast),box-shadow var(--wm-transition-fast)}.wm-cb-trigger:hover:not(.is-disabled){border-color:var(--wm-color-accent)}.wm-cb-trigger:focus-within:not(.is-disabled){border-color:var(--wm-color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 25%,transparent)}.wm-cb-trigger.is-open{border-color:var(--wm-color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--wm-color-accent) 20%,transparent)}.wm-cb-trigger.is-disabled{opacity:.45;cursor:not-allowed}.wm-cb-input{flex:1 1 60px;min-width:60px;border:none;outline:none;background:transparent;color:inherit;font:inherit;padding:.125rem 0}.wm-cb-input::placeholder{color:var(--wm-text-placeholder)}.wm-cb-input:disabled{cursor:not-allowed}.wm-cb-chevron{flex-shrink:0;color:var(--wm-text-muted);transition:transform var(--wm-transition-fast);pointer-events:none}.wm-cb-chevron.is-open{transform:rotate(180deg)}.wm-cb-chip{display:inline-flex;align-items:center;gap:.25rem;max-width:100%;padding:.125rem .375rem;background:color-mix(in srgb,var(--wm-color-accent) 15%,transparent);border:1px solid color-mix(in srgb,var(--wm-color-accent) 30%,transparent);border-radius:var(--wm-radius-sm);font-size:.8125rem;line-height:1.4;color:var(--wm-text-primary);-webkit-user-select:none;user-select:none}.wm-cb-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wm-cb-chip-remove{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--wm-text-muted);cursor:pointer;border-radius:var(--wm-radius-sm);transition:color var(--wm-transition-fast)}.wm-cb-chip-remove:hover{color:var(--wm-text-primary)}.wm-cb-backdrop{position:fixed;inset:0}.wm-cb-panel{width:100%;background:var(--wm-bg-float);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #0000001f;overflow:hidden;padding:.25rem}.wm-cb-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], allowFreeform: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFreeform", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxPanelHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPanelHeight", required: false }] }], query: [{ type: i0.Output, args: ["query"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ComboboxPanel), { isSignal: true }] }] } });
+
 let nextId = 0;
 /**
  * WmToastService — Application-wide toast notification manager.
@@ -879,5 +1532,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Checkbox, GhostField, NumberInput, PageHeader, Toggle, WmAutoFocus, WmButton, WmDialog, WmLicenseDialog, WmLicenseNudge, WmLicenseService, WmModal, WmPopover, WmSelect, WmTab, WmTabs, WmToastContainer, WmToastService };
+export { Checkbox, GhostField, NumberInput, PageHeader, Toggle, WmAutoFocus, WmButton, WmCombobox, WmDialog, WmLicenseDialog, WmLicenseNudge, WmLicenseService, WmModal, WmPopover, WmSelect, WmTab, WmTabs, WmToastContainer, WmToastService };
 //# sourceMappingURL=wildmason-aegis.mjs.map