forty-cdk 0.2.0 → 0.3.0

package/fesm2022/forty-cdk-combobox.mjs

@@ -0,0 +1,2596 @@
+import * as i0 from '@angular/core';
+import { linkedSignal, untracked, InjectionToken, inject, computed, model, input, booleanAttribute, numberAttribute, output, signal, effect, Directive, ElementRef, DOCUMENT } from '@angular/core';
+import { tryReadHandle, createDefaults, foldSnapshotOnTotalCountTransition, VirtualizedNavigator as VirtualizedNavigator$1, FormUiControlBase, IdGenerator, Collection, defaultItemToFormValue, injectTextDirection, createPointerSuppression, singleSelected, injectHiddenInput, adoptHostId, isInArray, toggleInArray, nextEnabledHandle, emitVetoableEvent, emitVetoableNativeEvent, registerHandle, reflectDisabled, injectOverlayShell, hostId, registerA11yName } from 'forty-cdk/core';
+
+/**
+ * Combobox-local re-exports of the shared snapshot-fold helpers. The single
+ * sources live in `_internal/`: `tryReadHandle` (the NG0950 read guard) in
+ * `_internal/signal-graph/read-handle.ts` and `foldSnapshotOnTotalCountTransition`
+ * (the `totalCount`-reset `linkedSignal` fold) in
+ * `_internal/collection/fold-snapshot.ts`. Kept as a barrel so `OptionLabelCache`
+ * and the combobox virtualized navigator import from one combobox-local path.
+ */
+
+/**
+ * Build the host's activedescendant pointer as a `linkedSignal` so the
+ * "what should be highlighted given open / items / autoHighlight" decision is a
+ * **pure derivation**, never a write from an `effect` (the banned
+ * state-propagation pattern). The returned signal is still writable for the
+ * genuinely imperative moves that own their own scroll — arrow / Home / End
+ * navigation, pointer-move hover, multi-mode activation, and the virtualized
+ * pending-nav resolution (`navigate` / `seedFromIndexedSnapshot` /
+ * `tryResolvePending` in `combobox-virtualized-navigator.ts`).
+ *
+ * The reset/seed rule, in order:
+ * - On a `query` change the previously-active option may have been filtered
+ *   out, so the prior pointer is dropped.
+ * - A pointer that no longer matches a registered option is dropped (covers the
+ *   consumer mutating the list without touching `query`).
+ * - When a valid pointer survives, it is preserved (arrow nav, hover).
+ * - Otherwise, in the **non-virtualized** case, auto-highlight seeds the
+ *   first / last enabled option (per `initialFocus`) while the listbox is open
+ *   via {@link resolveAutoHighlightSeed}. The virtualized case returns `null`
+ *   here and the host's effect seeds it imperatively, because that seed must
+ *   order options by absolute `posInSet` and must lose to a pending
+ *   `(scrollToIndex)` resolution.
+ *
+ * Internal — not re-exported from `combobox/index.ts` or `public-api.ts`.
+ */
+function createActiveIdSignal(source) {
+    return linkedSignal({
+        source: () => ({
+            query: source.query(),
+            open: source.open(),
+            autoHighlight: source.autoHighlight(),
+            virtualized: source.virtualized(),
+            initialFocus: source.initialFocus(),
+            items: source.items(),
+            value: source.value(),
+            equals: source.equals(),
+        }),
+        computation: ({ query, open, autoHighlight, virtualized, initialFocus, items, value, equals }, prev) => {
+            const queryChanged = prev !== undefined && prev.source.query !== query;
+            let current = queryChanged ? null : (prev?.value ?? null);
+            if (current !== null && !items.some((o) => o.id() === current)) {
+                current = null;
+            }
+            if (current !== null) {
+                return current;
+            }
+            if (virtualized || !autoHighlight || !open || items.length === 0) {
+                return null;
+            }
+            return resolveAutoHighlightSeed({ items, initialFocus, value, equals });
+        },
+    });
+}
+/**
+ * Resolve the auto-highlight seed for the **non-virtualized** combobox: the id
+ * of the option `aria-activedescendant` should fall on when the listbox is open
+ * and no pointer survives. Returns `null` when no enabled option qualifies (or
+ * when a `'selected'` seed can't yet read its options — see `tryReadHandle`).
+ *
+ * Pure over its inputs — no signal reads, no DOM access — so the host can call
+ * it from inside its `#activeId` linkedSignal computation without leaking the
+ * banned write-from-effect pattern. The virtualized branch seeds imperatively
+ * via the navigator instead (it orders by absolute `posInSet` and must lose to
+ * a pending `(scrollToIndex)` resolution).
+ *
+ * Internal — not re-exported from `combobox/index.ts` or `public-api.ts`.
+ */
+function resolveAutoHighlightSeed(input) {
+    const { items, initialFocus, value, equals } = input;
+    if (initialFocus === 'selected') {
+        const selected = findSelectedEnabled(items, value, equals);
+        if (selected === NOT_READY) {
+            return null;
+        }
+        if (selected) {
+            return selected.id();
+        }
+    }
+    const target = initialFocus === 'last' ? findLastEnabled(items) : findFirstEnabled(items);
+    return target?.id() ?? null;
+}
+function findFirstEnabled(items) {
+    for (const item of items) {
+        if (!item.disabled()) {
+            return item;
+        }
+    }
+    return null;
+}
+function findLastEnabled(items) {
+    for (let i = items.length - 1; i >= 0; i--) {
+        const item = items[i];
+        if (item && !item.disabled()) {
+            return item;
+        }
+    }
+    return null;
+}
+const NOT_READY = Symbol('forty-cdk/combobox:not-ready');
+function findSelectedEnabled(items, values, equals) {
+    if (values.length === 0) {
+        return null;
+    }
+    for (const item of items) {
+        if (item.disabled()) {
+            continue;
+        }
+        const read = tryReadHandle(() => ({ value: item.value() }));
+        if (read === null) {
+            return NOT_READY;
+        }
+        if (values.some((sel) => equals(read.value, sel))) {
+            return item;
+        }
+    }
+    return null;
+}
+/**
+ * The **imperative tail** of the auto-highlight flow, run from the host's
+ * constructor `effect`. The activedescendant *decision* is a pure derivation in
+ * {@link createActiveIdSignal}; this only performs the side effects that escape
+ * the reactive graph. It reacts to `items()`, `autoHighlight()` and `open()`:
+ *
+ * 1. Primes the label cache so its `linkedSignal` `prev` slot gets seeded while
+ *    the listbox is open — without an eager pull the lazy cache never runs
+ *    during the open cycle in non-virtualized usage and persistence across
+ *    close → re-open would start from an empty `prev`. The virtualization
+ *    navigator (and its position-map) is primed only when the consumer set
+ *    `totalCount()`, so a plain combobox never builds it.
+ * 2. Virtualized only: resolves a pending `(scrollToIndex)` navigation — once
+ *    the option for the requested posInSet mounts, `tryResolvePending` seeds
+ *    activedescendant to its id and scrolls it into view. This is the single
+ *    sanctioned activedescendant write from an effect, and it is a legitimate
+ *    side effect (not state propagation): it integrates the consumer's
+ *    virtualizer mounting a row asynchronously, and it must win over the
+ *    auto-highlight seed — which is why the virtualized seed can't live in the
+ *    linkedSignal. `seedFromIndexedSnapshot` then seeds the topmost / bottommost
+ *    *rendered* enabled option (ordered by absolute `posInSet`) deliberately
+ *    passively — it only moves the pointer, never the consumer's scroll position.
+ * 3. Non-virtualized: scrolls the auto-highlight-seeded option into view so a
+ *    seed that lands below the fold is visible, for parity with `navigate()`.
+ *    The seed itself comes from the linkedSignal; this is its imperative tail.
+ *    The activedescendant is read `untracked` so the scroll never re-triggers
+ *    the effect, and pointer-move hover doesn't reach here (it changes none of
+ *    the tracked reads), so hovering never scrolls.
+ *
+ * Internal — not re-exported from `combobox/index.ts` or `public-api.ts`.
+ */
+function runAutoHighlightBridge(deps) {
+    deps.labelCache.prime();
+    const items = deps.items();
+    const open = deps.open();
+    const autoHighlight = deps.autoHighlight();
+    const virtualized = deps.virtualized();
+    if (virtualized) {
+        const navigator = deps.requireNavigator();
+        navigator.prime();
+        if (navigator.tryResolvePending()) {
+            return;
+        }
+        if (autoHighlight && open && untracked(() => deps.getActiveId()) === null && items.length > 0) {
+            navigator.seedFromIndexedSnapshot(deps.initialFocus() === 'last' ? 'last' : 'first');
+        }
+        return;
+    }
+    if (!open) {
+        deps.setLastPositionedId(null);
+        return;
+    }
+    const activeId = untracked(() => deps.getActiveId());
+    if (activeId === null || activeId === deps.getLastPositionedId()) {
+        return;
+    }
+    const active = items.find((o) => o.id() === activeId);
+    active?.host.scrollIntoView?.({ block: 'nearest' });
+    deps.setLastPositionedId(activeId);
+}
+
+/**
+ * `ForCombobox<T>`'s generic does NOT flow to this token: an `InjectionToken`
+ * is a single runtime instance, so it is published at `ForComboboxContext<unknown>`.
+ * `injectComboboxContext<T>()` re-applies `T` with an `as unknown as` cast, and
+ * each piece (input, option, chip) relies on consumer discipline — the
+ * `[forComboboxOption][value]` and the root `[(value)]` must be the same `T`.
+ * There is no clean fix without abandoning the token pattern; the contract is
+ * the consumer's to honor. Object identity is reconciled at runtime via
+ * `isItemEqualToValue`, which bounds the practical blast radius of a mismatch.
+ */
+const FOR_COMBOBOX_CONTEXT = new InjectionToken('FOR_COMBOBOX_CONTEXT');
+/**
+ * Resolve the surrounding combobox context, re-applying the caller's `T`. The
+ * cast through `unknown` is unavoidable (see {@link FOR_COMBOBOX_CONTEXT}): the
+ * token can't carry the per-instance generic, so `T` correctness is a
+ * consumer-honored contract, not a compiler-enforced one.
+ */
+function injectComboboxContext(piece) {
+    const ctx = inject(FOR_COMBOBOX_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/combobox] ${piece} must be used inside a [forCombobox] element. ` +
+            "If it is declared inside an ng-template, DI resolves at the template's declaration site — " +
+            'not where it is stamped (e.g. via ngTemplateOutlet) — so declare the template inside the ' +
+            '[forCombobox] root.');
+    }
+    return ctx;
+}
+/**
+ * Resolves the trigger's root context: the explicit reference when the
+ * `[forComboboxTrigger]` input carries one, the injected `FOR_COMBOBOX_CONTEXT`
+ * otherwise. The orphan error only fires when neither resolves, on first read
+ * of the returned signal. Must be called in an injection context.
+ */
+function injectComboboxTriggerContext(explicitRoot) {
+    const injected = inject(FOR_COMBOBOX_CONTEXT, { optional: true });
+    return computed(() => {
+        const explicit = explicitRoot();
+        if (explicit !== '') {
+            return explicit;
+        }
+        if (injected) {
+            return injected;
+        }
+        throw new Error('[forty-cdk/combobox] ForComboboxTrigger could not resolve its [forCombobox] root: ' +
+            'no FOR_COMBOBOX_CONTEXT provider is visible and no explicit root reference was passed. ' +
+            "If this trigger is declared inside an ng-template, DI resolves at the template's declaration " +
+            'site — not where it is stamped — so either declare the template inside the root or pass the ' +
+            'root explicitly: [forComboboxTrigger]="root" with #root="forCombobox".');
+    });
+}
+
+/**
+ * Library fallback for combobox defaults, read at the root injector when no
+ * consumer has called `provideForComboboxDefaults`. Exported for the shared
+ * defaults contract spec; not re-exported from the primitive's public entry.
+ */
+const FOR_COMBOBOX_FALLBACK_DEFAULTS = {
+    sideOffset: 4,
+    collisionPadding: 8,
+};
+const { token, provideDefaults } = createDefaults('FOR_COMBOBOX_DEFAULTS', FOR_COMBOBOX_FALLBACK_DEFAULTS);
+/** Token holding the resolved combobox defaults for the current scope. */
+const FOR_COMBOBOX_DEFAULTS = token;
+/**
+ * Configures forty-cdk combobox defaults for this injector scope. Partial
+ * overrides inherit unspecified keys from the parent scope (or library
+ * defaults at the root).
+ */
+function provideForComboboxDefaults(defaults = {}) {
+    return provideDefaults(defaults);
+}
+
+/**
+ * Always-on label cache for `ForCombobox`. Keeps a flat list of
+ * `{ id, value, label }` tuples that persists across listbox close / open
+ * cycles, driving inline autocomplete and the `selected` label fallback.
+ *
+ * Persistence: when the consumer's `@if` unmounts the content
+ * (`items().length === 0`) the prior cache is carried over so chips outside
+ * the listbox area and inline completion after close keep resolving labels.
+ * Resets only when the consumer's `totalCount` transitions — a query / source
+ * rebuild signal in the virtualized case (the shared stale-window invariant
+ * lives in `combobox-snapshot-fold.ts`).
+ *
+ * The option's `label` is itself a `Signal<string>` so we never peek at
+ * `textContent`. Internal helper — not re-exported from `combobox/index.ts`
+ * or `public-api.ts`. Constructed once per host directive, on every combobox
+ * (virtualized or not).
+ */
+class OptionLabelCache {
+    #cachedOptions;
+    constructor(deps) {
+        this.#cachedOptions = foldSnapshotOnTotalCountTransition(deps.items, deps.totalCount, () => [], (prev, items) => {
+            if (items.length === 0) {
+                return prev;
+            }
+            const merged = new Map();
+            for (const entry of prev) {
+                merged.set(entry.id, entry);
+            }
+            for (const item of items) {
+                // A static option (rendered outside `@for`) registers before its
+                // `[value]` binding is written; skip it this fold and pick it up on
+                // the re-run the binding triggers. See `tryReadHandle`.
+                const entry = tryReadHandle(() => ({
+                    id: item.id(),
+                    value: item.value(),
+                    label: item.label(),
+                }));
+                if (entry === null) {
+                    continue;
+                }
+                merged.set(entry.id, entry);
+            }
+            return [...merged.values()];
+        });
+    }
+    /**
+     * Pull the cache so its `linkedSignal` `prev` slot gets seeded while the
+     * listbox is open. Called from the host's bridge effect — without an eager
+     * pull the lazy cache never runs during the open cycle (no other consumer
+     * pulls it in non-virtualized usage), and persistence across close → re-open
+     * would start from an empty `prev`.
+     */
+    prime() {
+        this.#cachedOptions();
+    }
+    /**
+     * Snapshot of the registered options as plain `{ id, value, label }` tuples.
+     * Drives inline-autocomplete matching and the label-resolution fallback in
+     * `ForCombobox.selected`.
+     */
+    entries() {
+        return this.#cachedOptions();
+    }
+    /**
+     * Live entries merged with any off-window entries from the virtualized
+     * position-map, so typeahead and inline autocomplete can match against
+     * options scrolled out of view. Live entries take precedence (freshest data)
+     * and appear first, followed by off-window indexed entries sorted by absolute
+     * position. Pass an empty / zero-size map (the non-virtualized case) to get
+     * the live entries unchanged.
+     */
+    mergedEntries(indexed) {
+        const live = this.#cachedOptions();
+        if (indexed.size === 0) {
+            return live;
+        }
+        const seen = new Set(live.map((o) => o.id));
+        const merged = [...live];
+        const positions = [...indexed.keys()].sort((a, b) => a - b);
+        for (const pos of positions) {
+            const entry = indexed.get(pos);
+            if (seen.has(entry.id)) {
+                continue;
+            }
+            merged.push({ id: entry.id, value: entry.value, label: entry.label });
+        }
+        return merged;
+    }
+}
+
+/**
+ * Virtualization navigation engine for `ForCombobox`. A thin adapter over the
+ * shared `_internal/virtualized-navigator` engine. Maps the combobox option
+ * handle (whose `posInSet` is optional) onto the engine's accessors, reads the
+ * option through the single NG0950 read guard, and overrides scroll-into-view
+ * with the host's pointer-suppression wrapper. Adds the combobox-only
+ * auto-highlight seed that stays passive (never scrolls the window).
+ *
+ * Internal — not re-exported from `combobox/index.ts` or `public-api.ts`.
+ */
+class VirtualizedNavigator {
+    #deps;
+    #core;
+    constructor(deps) {
+        this.#deps = deps;
+        this.#core = new VirtualizedNavigator$1({ ...deps, loop: deps.loop }, {
+            posOf: (o) => o.posInSet?.() ?? null,
+            idOf: (o) => o.id(),
+            hostOf: (o) => o.host,
+            readEntry: (o) => tryReadHandle(() => ({
+                id: o.id(),
+                value: o.value(),
+                label: o.label(),
+                disabled: o.disabled(),
+            })),
+            scrollIntoView: (host) => deps.scrollActiveIntoView(host),
+        }, { deferFoldOnTotalTransition: true });
+    }
+    /** @see VirtualizedNavigator.prime */
+    prime() {
+        this.#core.prime();
+    }
+    /**
+     * Position-keyed snapshot for `ForCombobox.selected`'s scrolled-out-of-view
+     * fallback and for the merged-label lookup. Read-only for callers.
+     */
+    snapshotByPos() {
+        return this.#core.snapshotByPos();
+    }
+    /** @see VirtualizedNavigator.tryResolvePending */
+    tryResolvePending() {
+        return this.#core.tryResolvePending();
+    }
+    /**
+     * Auto-highlight the first or last enabled option that is **currently
+     * rendered**, ordered by absolute `posInSet`. Used in the virtualized branch
+     * of the host's auto-highlight effect — for non-virtualized lists the host
+     * walks the live `items()` array directly. No-op if `totalCount` is unset /
+     * zero or nothing is rendered.
+     *
+     * Deliberately *passive*: it only ever moves `aria-activedescendant`, never
+     * the consumer's scroll position. Auto-highlight re-runs every time the
+     * activedescendant is cleared, and scrolling the active option out of the
+     * rendered window clears it (see `ForCombobox.unregisterOption`). If this
+     * seed emitted `(scrollToIndex)` toward the absolute first option, every
+     * wheel tick that unmounted the active row would snap the listbox straight
+     * back to the top. Off-window targets are reached only through explicit
+     * keyboard navigation (`navigate`), which owns scroll-into-view.
+     */
+    seedFromIndexedSnapshot(direction) {
+        const total = this.#deps.totalCount();
+        if (total === undefined || total <= 0) {
+            return;
+        }
+        const items = this.#deps.items();
+        if (items.length === 0) {
+            return;
+        }
+        const ordered = [...items].sort((a, b) => {
+            const pa = a.posInSet?.() ?? 0;
+            const pb = b.posInSet?.() ?? 0;
+            return direction === 'last' ? pb - pa : pa - pb;
+        });
+        for (const item of ordered) {
+            if (!item.disabled()) {
+                this.#deps.setActiveId(item.id());
+                return;
+            }
+        }
+    }
+    /** @see VirtualizedNavigator.navigate */
+    navigate(direction) {
+        this.#core.navigate(direction);
+    }
+    /**
+     * Drop any pending virtualized navigation. Called by `closeMenu` so a
+     * pending request from the previous open cycle doesn't seed activedescendant
+     * after the listbox re-opens.
+     */
+    resetPending() {
+        this.#core.resetPending();
+    }
+}
+
+/**
+ * Headless implementation of the [WAI-ARIA combobox with listbox popup pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).
+ * Implements `FormValueControl<readonly T[]>` from `@angular/forms/signals`
+ * for `[formField]` auto-wiring.
+ *
+ * Generic over the option value type `T` (default `string`). When the
+ * consumer binds object items the directive infers `T` from `[(value)]`
+ * and per-piece signatures (`[forComboboxOption][value]`,
+ * `[forComboboxChip][value]`) specialize accordingly. Object identity is
+ * resolved by the consumer-supplied `[isItemEqualToValue]` and labels by
+ * `[itemToStringLabel]`; the hidden inputs serialize via
+ * `[itemToFormValue]` (defaults to `JSON.stringify` for non-strings).
+ *
+ * Selection is always modeled as `readonly T[]`:
+ * - In single mode (`multiple=false`, default), the array has 0 or 1
+ *   element and option activation closes the listbox.
+ * - In multi mode, option activation toggles in/out and the listbox stays
+ *   open. Selected entries are typically rendered as chips inside
+ *   `[forComboboxChips]` next to the input.
+ *
+ * The visible input ("query") and the form value are separate two-way
+ * bindable models — the consumer keeps them in sync via filtering /
+ * display logic, and the primitive only commits to `value` when an option
+ * is explicitly activated.
+ *
+ * Filtering is **always** the consumer's responsibility — the primitive is
+ * headless and doesn't filter the registered options. Render the filtered
+ * subset with `@for` and the registry tracks them automatically.
+ */
+class ForCombobox extends FormUiControlBase {
+    #idGen = inject(IdGenerator);
+    #defaults = inject(FOR_COMBOBOX_DEFAULTS);
+    #items = new Collection();
+    #chips = new Collection();
+    /**
+     * Two-way bindable. Visible input text. The `model()` change emitter
+     * (`(queryChange)`) fires only on internal mutations (option activation
+     * commit, `clear()`, multi-mode select reset, picker-anatomy reset on
+     * close), never on consumer writes via `[(query)]`.
+     */
+    query = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    /**
+     * Two-way bindable. Selected option values. Single mode (`multiple=false`)
+     * keeps 0 or 1 element; multi mode keeps any number. The `model()` change
+     * emitter (`(valueChange)`) fires only on internal selection changes,
+     * never on consumer writes via `[(value)]`.
+     */
+    value = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Compare two items for equality. Defaults to `===`, which is the
+     * correct identity for primitive `T` (e.g. strings, numbers). Override
+     * when binding object items so the directive can locate selected /
+     * removed entries by id (or any other stable key) instead of by
+     * reference: `[isItemEqualToValue]="(a, b) => a.id === b.id"`.
+     */
+    isItemEqualToValue = input((a, b) => a === b, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isItemEqualToValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Render an item as a string label. Defaults to `String(item)`, which is
+     * identity for strings. Drives the visible input text after activation
+     * (when `commitOnSelect`) and the chip label fallback in multi mode.
+     * Override when binding object items so the directive can fall back to
+     * a meaningful label without relying on the option cache being warm:
+     * `[itemToStringLabel]="(it) => it.name"`.
+     */
+    itemToStringLabel = input((item) => String(item), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemToStringLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Serialize an item for the hidden input that participates in native
+     * form submission. Defaults to identity for strings and to
+     * `JSON.stringify` for non-string items so the primitive works out of
+     * the box round-tripping objects. Override to emit a specific wire
+     * format — typically a per-item id — when the backend expects that:
+     * `[itemToFormValue]="(it) => it.id"`.
+     */
+    itemToFormValue = input(defaultItemToFormValue, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemToFormValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Two-way bindable. Whether the listbox is currently shown. Internal
+     * transitions: input typing (when `openOnQuery`), focus (when
+     * `openOnFocus`), ArrowDown / ArrowUp, Escape, outside dismissal,
+     * single-mode option activation.
+     */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Autocomplete mode applied to the input. Mirrors the
+     * [WAI-ARIA `aria-autocomplete` property](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#wai-ariaroles,states,andproperties)
+     * and drives whether the listbox auto-opens on query and whether the
+     * input gets inline-completed with the first match. Renamed from
+     * `autocomplete` so consumers don't conflate it with the native HTML
+     * `autocomplete` attribute (which the directive forces to `"off"`).
+     */
+    autocompleteMode = input('list', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autocompleteMode" }] : /* istanbul ignore next */ []));
+    /** Open the listbox when the input gains focus. Off by default — opening on query / arrow keys is the standard ecosystem behavior. */
+    openOnFocus = input(false, { ...(ngDevMode ? { debugName: "openOnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Open the listbox when the user starts typing. On by default. Only honored when `autocompleteMode` includes a listbox (`'list'` or `'both'`). */
+    openOnQuery = input(true, { ...(ngDevMode ? { debugName: "openOnQuery" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * In single mode, copy the activated option's label into `query`. In
+     * multi mode, instead **clear** the query so the user can search the
+     * next item. On by default in both. Set `false` to leave `query`
+     * untouched on activation in either mode.
+     *
+     * Governs the **editable anatomy** only. In the picker anatomy (a
+     * `[forComboboxTrigger]` is registered) the in-panel input is a transient
+     * filter, not the value display: the single-mode label copy is always
+     * skipped and `query` resets to `''` on close regardless of this flag.
+     */
+    commitOnSelect = input(true, { ...(ngDevMode ? { debugName: "commitOnSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** When the user edits the query, automatically clear the committed `value`. Off by default — most apps want the value preserved across query edits. Single-mode only. */
+    clearOnQueryChange = input(false, { ...(ngDevMode ? { debugName: "clearOnQueryChange" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Auto-highlight the first enabled option whenever the listbox is open
+     * and no activedescendant is set (e.g. after the consumer's filter
+     * removed the previously-active option). On by default. Set `false` for
+     * "user must arrow before anything is highlighted" behavior.
+     */
+    autoHighlight = input(true, { ...(ngDevMode ? { debugName: "autoHighlight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Writing direction. Drives chip-cluster keyboard navigation (ArrowLeft /
+     * ArrowRight semantics swap in RTL so they follow the visual order, not DOM
+     * order) and the default `align` of the listbox (anchors to the right edge
+     * of the input in RTL). When unset (default `null`), the inherited ambient
+     * direction is resolved from the nearest ancestor carrying a `dir` attribute
+     * (or `<html dir>`), defaulting to `'ltr'`. An explicit `[dir]` always wins
+     * and the resolved value is reflected to the host `dir` attribute.
+     */
+    _dirInput = input(null, { ...(ngDevMode ? { debugName: "_dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
+    dir = injectTextDirection(this._dirInput);
+    /**
+     * Side the listbox is anchored to. Defaults to `'bottom'`. Pair with
+     * `align` for the full positioning API.
+     */
+    side = input('bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    /**
+     * Alignment along the chosen `side`. When unset, defaults to `'start'`
+     * in LTR and `'end'` in RTL (per `dir`). Set explicitly to pin an
+     * alignment regardless of writing direction.
+     *
+     * The input is aliased to `align`; consumers bind `[align]="..."` and
+     * read the effective value via the public `align` computed below.
+     */
+    _alignInput = input(undefined, { ...(ngDevMode ? { debugName: "_alignInput" } : /* istanbul ignore next */ {}), alias: 'align' });
+    align = computed(() => this._alignInput() ?? (this.dir() === 'rtl' ? 'end' : 'start'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /** Gap (px) between input and listbox along the main axis. Default `4`. */
+    sideOffset = input(this.#defaults.sideOffset, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Gap (px) along the cross axis. Default `0`. */
+    alignOffset = input(0, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** When `true` (default), `flip` and `shift` keep the listbox inside the viewport. */
+    avoidCollisions = input(true, { ...(ngDevMode ? { debugName: "avoidCollisions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Padding (px) applied uniformly to flip / shift / size. Default `8`. */
+    collisionPadding = input(this.#defaults.collisionPadding, { ...(ngDevMode ? { debugName: "collisionPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Padding (px) for the `arrow` middleware. Default `0`. */
+    arrowPadding = input(0, { ...(ngDevMode ? { debugName: "arrowPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Stickiness behaviour for `shift`. Default `'partial'`. */
+    sticky = input('partial', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+    /** When `true`, sets `data-detached=""` while the input is scrolled off-screen. */
+    hideWhenDetached = input(false, { ...(ngDevMode ? { debugName: "hideWhenDetached" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When `true` (default), the content is clipped until floating-ui resolves
+     * its first position, preventing a flash at the viewport corner. Set to
+     * `false` so a dramatic `animate.enter` plays from its first frame (the
+     * surface may flash briefly at the unresolved position while positioning
+     * computes).
+     */
+    clipUntilPositioned = input(true, { ...(ngDevMode ? { debugName: "clipUntilPositioned" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    loop = input(true, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** When true (default), Escape, pointer-down outside, and focus outside close the listbox. */
+    dismissible = input(true, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When true (default), focus returns to the `[forComboboxTrigger]` on close.
+     * Only relevant in the picker anatomy (a trigger is registered) — in the
+     * editable anatomy focus never leaves the input, so there is nothing to
+     * return.
+     */
+    returnFocus = input(true, { ...(ngDevMode ? { debugName: "returnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Manual `aria-label` on the listbox (`[forComboboxList]`, or `[forComboboxContent]` in the editable anatomy) when the input isn't a meaningful name. */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Total number of options in the consumer's source array. Set when wiring
+     * up a virtualized listbox (only the visible window is rendered) so the
+     * directive can reflect `aria-setsize` and walk the snapshot for
+     * navigation past the rendered range. Defaults to `undefined`, in which
+     * case the directive falls back to `options().length` (the live registry).
+     */
+    totalCount = input(undefined, { ...(ngDevMode ? { debugName: "totalCount" } : /* istanbul ignore next */ {}), transform: (v) => (v == null ? undefined : numberAttribute(v)) });
+    /**
+     * Inclusive-exclusive `[start, end)` range of options currently rendered
+     * in the DOM. Used by `navigate()` to translate "move to absolute
+     * position N" into either an in-window highlight update or a request to
+     * the consumer to scroll N into view (`(scrollToIndex)`). When
+     * `undefined` (default), navigation assumes every option in the snapshot
+     * is rendered — appropriate for non-virtualized lists.
+     */
+    visibleRange = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleRange" }] : /* istanbul ignore next */ []));
+    /**
+     * Emitted when keyboard navigation needs to land on an option whose
+     * absolute index falls outside `visibleRange()`. Wire this to the
+     * consumer's virtualizer (`scrollToIndex(idx)` on `@tanstack/virtual`,
+     * `virtua`, etc.); once the option mounts, the directive seeds
+     * `aria-activedescendant` automatically.
+     */
+    scrollToIndex = output();
+    escapeKeyDown = output();
+    pointerDownOutside = output();
+    focusOutside = output();
+    interactOutside = output();
+    /**
+     * _(picker anatomy only)_ Fires just before focus moves into the input on
+     * open. Call `preventDefault()` on the emitted veto to skip the imperative
+     * focus move. Only emitted when a `[forComboboxTrigger]` is registered — the
+     * editable anatomy keeps focus in the input the whole time and has no move to
+     * veto.
+     */
+    autoFocusOnOpen = output();
+    /**
+     * _(picker anatomy only)_ Fires just before focus returns to the trigger on
+     * close. Call `preventDefault()` on the veto to suppress the return-focus.
+     */
+    autoFocusOnClose = output();
+    inputId = signal(this.#idGen.next('for-combobox-input'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    contentId = signal(this.#idGen.next('for-combobox-content'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
+    listId = signal(this.#idGen.next('for-combobox-list'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listId" }] : /* istanbul ignore next */ []));
+    #inputEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#inputEl" }] : /* istanbul ignore next */ []));
+    input = this.#inputEl.asReadonly();
+    #anchorEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#anchorEl" }] : /* istanbul ignore next */ []));
+    #triggerEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#triggerEl" }] : /* istanbul ignore next */ []));
+    trigger = this.#triggerEl.asReadonly();
+    /**
+     * Element floating-ui anchors the listbox against. Resolution order:
+     * explicit `[forComboboxAnchor]` → `[forComboboxTrigger]` (picker anatomy) →
+     * the input (editable anatomy fallback, so existing comboboxes keep their
+     * behavior). Decoupled from `input` so the input keeps driving
+     * `aria-controls`, `aria-activedescendant`, keyboard interaction, and its
+     * dismissal exemption regardless of where the listbox paints.
+     */
+    anchor = computed(() => this.#anchorEl() ?? this.#triggerEl() ?? this.#inputEl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
+    #contentEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#contentEl" }] : /* istanbul ignore next */ []));
+    content = this.#contentEl.asReadonly();
+    #listEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#listEl" }] : /* istanbul ignore next */ []));
+    list = this.#listEl.asReadonly();
+    /** True once a `[forComboboxList]` has registered (picker anatomy). */
+    hasList = computed(() => this.#listEl() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasList" }] : /* istanbul ignore next */ []));
+    /**
+     * Id of the element carrying `role="listbox"`: the list when one is
+     * registered (picker anatomy), otherwise the content surface (editable
+     * anatomy). The input targets this with `aria-controls`.
+     */
+    listboxId = computed(() => (this.hasList() ? this.listId() : this.contentId()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listboxId" }] : /* istanbul ignore next */ []));
+    options = this.#items.items;
+    chips = this.#chips.items;
+    #initialFocus = signal('first', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#initialFocus" }] : /* istanbul ignore next */ []));
+    initialFocus = this.#initialFocus.asReadonly();
+    #lastCloseReason = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#lastCloseReason" }] : /* istanbul ignore next */ []));
+    lastCloseReason = this.#lastCloseReason.asReadonly();
+    /**
+     * The activedescendant pointer. Built by {@link createActiveIdSignal} as a
+     * `linkedSignal` so the highlight decision is a pure derivation, never a write
+     * from an `effect`; it stays writable for the imperative moves that own their
+     * own scroll (arrow / Home / End navigation, hover, multi-mode activation, and
+     * the virtualized pending-nav resolution). The reset/seed rule lives with the
+     * factory in `combobox-auto-highlight.ts`.
+     */
+    #activeId = createActiveIdSignal({
+        query: this.query,
+        open: this.open,
+        autoHighlight: this.autoHighlight,
+        virtualized: () => this.totalCount() !== undefined,
+        initialFocus: this.#initialFocus,
+        items: this.#items.items,
+        value: this.value,
+        equals: this.isItemEqualToValue,
+    });
+    activeId = this.#activeId.asReadonly();
+    #lastPositionedId = null;
+    #pointerSuppression = createPointerSuppression();
+    /**
+     * Always-on label cache — keeps `{ id, value, label }` tuples across
+     * close/open and scroll-out-of-view to drive inline autocomplete matching
+     * and the `selected` label fallback. See `combobox-label-cache.ts`.
+     */
+    #labelCache = new OptionLabelCache({
+        items: this.#items.items,
+        totalCount: this.totalCount,
+    });
+    /**
+     * Virtualization navigation engine — constructed lazily the first time the
+     * consumer sets `totalCount()`, so a non-virtualized combobox never pulls
+     * the position-map machinery. Powers keyboard navigation past the rendered
+     * window and the scrolled-out-of-view label fallback.
+     */
+    #navigator = null;
+    #requireNavigator() {
+        return (this.#navigator ??= new VirtualizedNavigator({
+            items: this.#items.items,
+            totalCount: this.totalCount,
+            visibleRange: this.visibleRange,
+            loop: this.loop,
+            getActiveId: () => this.#activeId(),
+            setActiveId: (id) => this.#activeId.set(id),
+            emitScrollToIndex: (idx) => this.scrollToIndex.emit(idx),
+            scrollActiveIntoView: (host) => this.#scrollActiveIntoView(host),
+        }));
+    }
+    selected = computed(() => {
+        const values = this.value();
+        if (values.length === 0) {
+            return [];
+        }
+        // `cachedOptions()` already merges off-window entries from the indexed
+        // snapshot when virtualizing, so a selected option scrolled out of view
+        // still resolves here without a separate position-map lookup.
+        const cached = this.cachedOptions();
+        const equals = this.isItemEqualToValue();
+        const toLabel = this.itemToStringLabel();
+        return values.map((v) => {
+            const opt = cached.find((o) => equals(o.value, v));
+            if (opt) {
+                return { value: v, label: opt.label };
+            }
+            // Fall back to the consumer-provided label fn so non-string items
+            // still render a meaningful string before the option cache warms up.
+            return { value: v, label: typeof v === 'string' ? v : toLabel(v) };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    /**
+     * Read-only single-select convenience view of {@link value}. Returns the
+     * sole selected item when exactly one is selected, otherwise `null` (empty
+     * selection, or multiple selections in `multiple` mode). Lets single-select
+     * consumers read `selectedItem()` instead of unwrapping `value()[0]`. The
+     * array-backed `value` model remains the source of truth and the
+     * `FormValueControl` contract; this is a derived accessor. Distinct from
+     * {@link selected}, which pairs every selected value with its resolved
+     * label for chip rendering.
+     */
+    selectedItem = singleSelected(this.value);
+    fieldLabelledElement() {
+        return this.input();
+    }
+    fieldLabelledElementId() {
+        return this.inputId();
+    }
+    constructor() {
+        super();
+        injectHiddenInput({
+            name: this.name,
+            values: this.value,
+            serialize: (item) => this.itemToFormValue()(item),
+            disabled: this.effectiveDisabled,
+        });
+        // The activedescendant *decision* is a pure derivation in `#activeId`; this
+        // effect runs only its imperative tail (label-cache priming, virtualized
+        // pending-nav resolution + passive seed, non-virtualized scroll-into-view).
+        // Full rationale lives with `runAutoHighlightBridge` in
+        // `combobox-auto-highlight.ts`.
+        effect(() => {
+            runAutoHighlightBridge({
+                labelCache: this.#labelCache,
+                requireNavigator: () => this.#requireNavigator(),
+                items: this.#items.items,
+                open: this.open,
+                autoHighlight: this.autoHighlight,
+                virtualized: () => this.totalCount() !== undefined,
+                initialFocus: this.#initialFocus,
+                getActiveId: () => this.#activeId(),
+                getLastPositionedId: () => this.#lastPositionedId,
+                setLastPositionedId: (id) => (this.#lastPositionedId = id),
+            });
+        });
+    }
+    registerInput(el) {
+        adoptHostId(el, this.inputId);
+        this.#inputEl.set(el);
+    }
+    unregisterInput(el) {
+        if (this.#inputEl() === el) {
+            this.#inputEl.set(null);
+        }
+    }
+    registerAnchor(el) {
+        const current = this.#anchorEl();
+        if (current !== null && current !== el) {
+            throw new Error('[forty-cdk/combobox] Multiple [forComboboxAnchor] inside the same [forCombobox]; only one is allowed.');
+        }
+        this.#anchorEl.set(el);
+    }
+    unregisterAnchor(el) {
+        if (this.#anchorEl() === el) {
+            this.#anchorEl.set(null);
+        }
+    }
+    registerTrigger(el) {
+        this.#triggerEl.set(el);
+    }
+    unregisterTrigger(el) {
+        if (this.#triggerEl() === el) {
+            this.#triggerEl.set(null);
+        }
+    }
+    registerContent(el) {
+        adoptHostId(el, this.contentId);
+        this.#contentEl.set(el);
+    }
+    unregisterContent(el) {
+        if (this.#contentEl() === el) {
+            this.#contentEl.set(null);
+        }
+    }
+    registerList(el) {
+        adoptHostId(el, this.listId);
+        this.#listEl.set(el);
+    }
+    unregisterList(el) {
+        if (this.#listEl() === el) {
+            this.#listEl.set(null);
+        }
+    }
+    registerOption(handle) {
+        this.#items.register(handle);
+    }
+    unregisterOption(handle) {
+        this.#items.unregister(handle);
+        if (this.#activeId() === handle.id()) {
+            this.#activeId.set(null);
+        }
+    }
+    registerChip(handle) {
+        this.#chips.register(handle);
+    }
+    unregisterChip(handle) {
+        this.#chips.unregister(handle);
+    }
+    isSelected(v) {
+        return isInArray(this.value(), v, this.isItemEqualToValue());
+    }
+    isActive(id) {
+        return this.#activeId() === id;
+    }
+    isPointerSuppressed() {
+        return this.#pointerSuppression.isSuppressed();
+    }
+    activate(handle) {
+        if (this.effectiveDisabled() || this.readonly() || handle.disabled()) {
+            return;
+        }
+        const v = handle.value();
+        if (this.multiple()) {
+            // Toggle in/out of the array. Stay open so the user can keep picking.
+            this.value.set(toggleInArray(this.value(), v, this.isItemEqualToValue()));
+            if (this.commitOnSelect()) {
+                // Reset query so the next typed prefix searches afresh.
+                this.query.set('');
+                this.#syncInputValue('');
+            }
+            this.#activeId.set(handle.id());
+            return;
+        }
+        // Single mode: replace + close + commit label.
+        this.value.set([v]);
+        if (this.commitOnSelect() && this.trigger() === null) {
+            this.query.set(handle.label());
+            this.#syncInputValue(handle.label());
+        }
+        this.closeMenu('select');
+    }
+    /**
+     * Imperatively align the visible `<input>` text with `query()` even
+     * while the input has focus. The directive's reactive sync skips
+     * focused syncs to avoid clobbering inline-autocomplete selection
+     * during typing — but activation / clear writes happen *outside* the
+     * typing flow and should be visible immediately.
+     */
+    #syncInputValue(value) {
+        const el = this.#inputEl();
+        if (el && el.value !== value) {
+            el.value = value;
+        }
+    }
+    removeValue(v) {
+        if (this.effectiveDisabled() || this.readonly()) {
+            return;
+        }
+        const equals = this.isItemEqualToValue();
+        const current = this.value();
+        if (!current.some((x) => equals(x, v))) {
+            return;
+        }
+        this.value.set(current.filter((x) => !equals(x, v)));
+    }
+    activateActive() {
+        const id = this.#activeId();
+        if (!id) {
+            return false;
+        }
+        const handle = this.#items.items().find((o) => o.id() === id);
+        if (!handle || handle.disabled()) {
+            return false;
+        }
+        this.activate(handle);
+        return true;
+    }
+    navigate(direction) {
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        if (this.totalCount() !== undefined) {
+            this.#requireNavigator().navigate(direction);
+            return;
+        }
+        const items = this.#items.items();
+        if (items.length === 0) {
+            return;
+        }
+        const currentId = this.#activeId();
+        const currentIndex = currentId === null ? -1 : items.findIndex((o) => o.id() === currentId);
+        // No activedescendant yet + arrow nav: jump to the natural extreme
+        // (ArrowDown → first enabled, ArrowUp → last enabled).
+        let action = direction;
+        if (currentIndex < 0 && direction === 'next') {
+            action = 'first';
+        }
+        else if (currentIndex < 0 && direction === 'prev') {
+            action = 'last';
+        }
+        const target = nextEnabledHandle(items, currentIndex, action, { loop: this.loop() });
+        if (target === null) {
+            return;
+        }
+        this.#activeId.set(target.id());
+        this.#scrollActiveIntoView(target.host);
+        this.#lastPositionedId = target.id();
+    }
+    setQueryFromInput(query) {
+        if (this.effectiveDisabled() || this.readonly()) {
+            return;
+        }
+        this.query.set(query);
+        if (this.clearOnQueryChange() && !this.multiple() && this.value().length > 0) {
+            this.value.set([]);
+        }
+        const mode = this.autocompleteMode();
+        const hasListbox = mode === 'list' || mode === 'both';
+        if (this.openOnQuery() && hasListbox && query.length > 0 && !this.open()) {
+            this.openMenu();
+        }
+    }
+    setActiveId(id) {
+        this.#activeId.set(id);
+        this.#lastPositionedId = id;
+    }
+    #scrollActiveIntoView(host) {
+        this.#pointerSuppression.suppress();
+        host.scrollIntoView?.({ block: 'nearest' });
+    }
+    #cachedOptionsMemo = computed(() => {
+        if (this.totalCount() === undefined) {
+            return this.#labelCache.entries();
+        }
+        return this.#labelCache.mergedEntries(this.#requireNavigator().snapshotByPos());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#cachedOptionsMemo" }] : /* istanbul ignore next */ []));
+    cachedOptions() {
+        return this.#cachedOptionsMemo();
+    }
+    clear(clearQuery = true) {
+        if (this.effectiveDisabled() || this.readonly()) {
+            return;
+        }
+        this.value.set([]);
+        if (clearQuery) {
+            this.query.set('');
+            this.#syncInputValue('');
+        }
+        this.#activeId.set(null);
+    }
+    setInitialFocus(target) {
+        this.#initialFocus.set(target);
+    }
+    toggle() {
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        if (this.open()) {
+            this.closeMenu('programmatic');
+        }
+        else {
+            this.openMenu(this.trigger() !== null ? 'selected' : 'first');
+        }
+    }
+    openMenu(initialFocus = 'first') {
+        if (this.effectiveDisabled() || this.open()) {
+            return;
+        }
+        this.#initialFocus.set(initialFocus);
+        this.#lastCloseReason.set(null);
+        this.open.set(true);
+    }
+    closeMenu(reason) {
+        if (!this.open()) {
+            return;
+        }
+        this.#lastCloseReason.set(reason);
+        this.open.set(false);
+        this.#activeId.set(null);
+        this.#navigator?.resetPending();
+        if (this.trigger() !== null) {
+            this.query.set('');
+            this.#syncInputValue('');
+        }
+    }
+    /** Fire `(autoFocusOnOpen)` and report whether the consumer vetoed the focus move. */
+    emitAutoFocusOnOpen() {
+        return emitVetoableEvent(this.autoFocusOnOpen);
+    }
+    /** Fire `(autoFocusOnClose)` and report whether the consumer vetoed the return-focus. */
+    emitAutoFocusOnClose() {
+        return emitVetoableEvent(this.autoFocusOnClose);
+    }
+    emitEscapeKeyDown(event) {
+        const vetoed = emitVetoableNativeEvent(this.escapeKeyDown, event);
+        if (!vetoed && this.dismissible()) {
+            event.stopPropagation();
+            this.closeMenu('escape');
+        }
+    }
+    /**
+     * Outside-interaction emit forwarders. The shared `#pendingOutsideVeto`
+     * reuse between the specific outside channels and the composite
+     * `interactOutside` lives in `injectOverlayShell`; these only fire the
+     * matching output with the veto the shell built.
+     */
+    emitPointerDownOutside(veto) {
+        this.pointerDownOutside.emit(veto);
+    }
+    emitFocusOutside(veto) {
+        this.focusOutside.emit(veto);
+    }
+    emitInteractOutside(veto) {
+        this.interactOutside.emit(veto);
+    }
+    /**
+     * Implicit close requested by the shell after an un-vetoed outside
+     * interaction. Marks the control touched and closes with the channel's
+     * reason.
+     */
+    requestClose(reason) {
+        this.markTouched();
+        this.closeMenu(reason);
+    }
+    markTouched() {
+        super.markTouched();
+    }
+    onFocusOut(event) {
+        const next = event.relatedTarget;
+        const inputEl = this.#inputEl();
+        const content = this.#contentEl();
+        if (next) {
+            if (inputEl && inputEl.contains(next)) {
+                return;
+            }
+            if (content && content.contains(next)) {
+                return;
+            }
+            // Focus moving to a chip (multi mode) is "inside" — chips are an
+            // extension of the input area, not an outside boundary.
+            const chips = this.#chips.items();
+            for (const chip of chips) {
+                if (chip.host.contains(next)) {
+                    return;
+                }
+            }
+        }
+        this.markTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCombobox, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForCombobox, isStandalone: true, selector: "[forCombobox]", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, isItemEqualToValue: { classPropertyName: "isItemEqualToValue", publicName: "isItemEqualToValue", isSignal: true, isRequired: false, transformFunction: null }, itemToStringLabel: { classPropertyName: "itemToStringLabel", publicName: "itemToStringLabel", isSignal: true, isRequired: false, transformFunction: null }, itemToFormValue: { classPropertyName: "itemToFormValue", publicName: "itemToFormValue", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, autocompleteMode: { classPropertyName: "autocompleteMode", publicName: "autocompleteMode", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: true, isRequired: false, transformFunction: null }, openOnQuery: { classPropertyName: "openOnQuery", publicName: "openOnQuery", isSignal: true, isRequired: false, transformFunction: null }, commitOnSelect: { classPropertyName: "commitOnSelect", publicName: "commitOnSelect", isSignal: true, isRequired: false, transformFunction: null }, clearOnQueryChange: { classPropertyName: "clearOnQueryChange", publicName: "clearOnQueryChange", isSignal: true, isRequired: false, transformFunction: null }, autoHighlight: { classPropertyName: "autoHighlight", publicName: "autoHighlight", isSignal: true, isRequired: false, transformFunction: null }, _dirInput: { classPropertyName: "_dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, _alignInput: { classPropertyName: "_alignInput", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, avoidCollisions: { classPropertyName: "avoidCollisions", publicName: "avoidCollisions", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, clipUntilPositioned: { classPropertyName: "clipUntilPositioned", publicName: "clipUntilPositioned", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, returnFocus: { classPropertyName: "returnFocus", publicName: "returnFocus", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, totalCount: { classPropertyName: "totalCount", publicName: "totalCount", isSignal: true, isRequired: false, transformFunction: null }, visibleRange: { classPropertyName: "visibleRange", publicName: "visibleRange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { query: "queryChange", value: "valueChange", open: "openChange", scrollToIndex: "scrollToIndex", escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside", interactOutside: "interactOutside", autoFocusOnOpen: "autoFocusOnOpen", autoFocusOnClose: "autoFocusOnClose" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "attr.data-state": "open() ? \"open\" : \"closed\"", "attr.data-disabled": "effectiveDisabled() ? \"\" : null", "attr.dir": "dir()" } }, providers: [{ provide: FOR_COMBOBOX_CONTEXT, useExisting: ForCombobox }], exportAs: ["forCombobox"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForCombobox, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forCombobox]',
+                    exportAs: 'forCombobox',
+                    host: {
+                        '[attr.data-state]': 'open() ? "open" : "closed"',
+                        '[attr.data-disabled]': 'effectiveDisabled() ? "" : null',
+                        '[attr.dir]': 'dir()',
+                        '(focusout)': 'onFocusOut($event)',
+                    },
+                    providers: [{ provide: FOR_COMBOBOX_CONTEXT, useExisting: ForCombobox }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], isItemEqualToValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemEqualToValue", required: false }] }], itemToStringLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemToStringLabel", required: false }] }], itemToFormValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemToFormValue", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], autocompleteMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocompleteMode", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnFocus", required: false }] }], openOnQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnQuery", required: false }] }], commitOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "commitOnSelect", required: false }] }], clearOnQueryChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearOnQueryChange", required: false }] }], autoHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHighlight", required: false }] }], _dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], _alignInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], avoidCollisions: [{ type: i0.Input, args: [{ isSignal: true, alias: "avoidCollisions", required: false }] }], collisionPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], arrowPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPadding", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], hideWhenDetached: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenDetached", required: false }] }], clipUntilPositioned: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipUntilPositioned", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], returnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnFocus", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], totalCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalCount", required: false }] }], visibleRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleRange", required: false }] }], scrollToIndex: [{ type: i0.Output, args: ["scrollToIndex"] }], escapeKeyDown: [{ type: i0.Output, args: ["escapeKeyDown"] }], pointerDownOutside: [{ type: i0.Output, args: ["pointerDownOutside"] }], focusOutside: [{ type: i0.Output, args: ["focusOutside"] }], interactOutside: [{ type: i0.Output, args: ["interactOutside"] }], autoFocusOnOpen: [{ type: i0.Output, args: ["autoFocusOnOpen"] }], autoFocusOnClose: [{ type: i0.Output, args: ["autoFocusOnClose"] }] } });
+
+/**
+ * Optional positioning anchor. When present, `[forComboboxContent]` is
+ * positioned against this element instead of `[forComboboxInput]` — useful
+ * when the input lives inside a decorated field box (padding, prefix icon,
+ * clear button, chip cluster) and the listbox should match the visible field
+ * rather than the inner `<input>`.
+ *
+ * Only positioning changes: the input still owns `aria-controls`,
+ * `aria-expanded`, `aria-activedescendant`, keyboard interaction, and its
+ * exemption from outside-pointer dismissal. If no anchor is registered the
+ * listbox falls back to anchoring against the input, so existing usages are
+ * unaffected.
+ *
+ * At most one `[forComboboxAnchor]` may be registered per `[forCombobox]`; a
+ * second one throws.
+ *
+ * ```html
+ * <div forCombobox [(value)]="v" [(query)]="q">
+ *   <div forComboboxAnchor class="field-box">
+ *     <icon />
+ *     <input forComboboxInput />
+ *     <button class="clear">×</button>
+ *   </div>
+ *   @if (open()) {
+ *     <div forComboboxContent>…</div>
+ *   }
+ * </div>
+ * ```
+ */
+class ForComboboxAnchor {
+    #ctx = injectComboboxContext('ForComboboxAnchor');
+    #host = inject(ElementRef);
+    constructor() {
+        registerHandle(this.#host.nativeElement, (el) => this.#ctx.registerAnchor(el), (el) => this.#ctx.unregisterAnchor(el));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxAnchor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForComboboxAnchor, isStandalone: true, selector: "[forComboboxAnchor]", exportAs: ["forComboboxAnchor"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxAnchor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forComboboxAnchor]',
+                    exportAs: 'forComboboxAnchor',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Button that opens the listbox and keeps showing the committed selection
+ * (label + icon) while the search input lives **inside** the panel — the
+ * "combobox with trigger" / picker anatomy. Apply on
+ * a real `<button>` so Space / Enter dispatch native click events that toggle
+ * via `(click)`.
+ *
+ * Registering a trigger switches the combobox into the picker anatomy: it
+ * becomes the default positioning anchor (after an explicit
+ * `[forComboboxAnchor]`), focus moves into `[forComboboxInput]` on open and
+ * returns to the trigger on close (the standard `(autoFocusOnOpen)` /
+ * `(autoFocusOnClose)` vetoable hooks now fire), and `[forComboboxContent]`
+ * expects an inner `[forComboboxList]` to carry the listbox role.
+ *
+ * Wires `aria-haspopup="listbox"`, `aria-expanded`, and `aria-controls`
+ * (pointing to the popup surface while open). Native `disabled` reflects
+ * `effectiveDisabled` (single-purpose trigger). The trigger is exempt from the
+ * popup's dismissable layer — clicks on it route through `(click)` instead of
+ * racing an outside-pointer dismissal.
+ *
+ * The root is normally resolved via DI from the enclosing `[forCombobox]`.
+ * When the trigger is declared inside an `ng-template` stamped into the root
+ * (e.g. via `ngTemplateOutlet`), DI resolves at the template's declaration
+ * site and misses the root — pass it explicitly through the selector input,
+ * `routerLink`-style: `[forComboboxTrigger]="root"` with `#root="forCombobox"`.
+ *
+ * Keyboard:
+ * - **Click / Enter / Space** — toggle (open moves focus into the input).
+ * - **ArrowDown** — open with the first enabled option highlighted.
+ * - **ArrowUp** — open with the last enabled option highlighted.
+ */
+class ForComboboxTrigger {
+    #host = inject(ElementRef);
+    /**
+     * Optional explicit reference to the `[forCombobox]` root, named after the
+     * selector `routerLink`-style. The bare valueless attribute keeps resolving
+     * the enclosing root via DI; pass the root explicitly
+     * (`[forComboboxTrigger]="root"`, with `#root="forCombobox"`) when the
+     * trigger is declared in an `ng-template` stamped inside the root — DI
+     * resolves at the template's declaration site, so the enclosing root is
+     * invisible there. The empty string (what the valueless attribute yields) is
+     * treated as unset.
+     */
+    forComboboxTrigger = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "forComboboxTrigger" }] : /* istanbul ignore next */ []));
+    ctx = injectComboboxTriggerContext(this.forComboboxTrigger);
+    constructor() {
+        const el = this.#host.nativeElement;
+        // Registration is an imperative call into the resolved root's registry,
+        // not state derivation — the effect only re-registers the element when the
+        // resolved root changes (explicit reference swapped at runtime).
+        effect((onCleanup) => {
+            const ctx = this.ctx();
+            ctx.registerTrigger(el);
+            onCleanup(() => ctx.unregisterTrigger(el));
+        });
+        reflectDisabled(computed(() => this.ctx().effectiveDisabled()));
+    }
+    onClick() {
+        this.ctx().toggle();
+    }
+    onKeyDown(event) {
+        if (this.ctx().effectiveDisabled()) {
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.ctx().openMenu('first');
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.ctx().openMenu('last');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForComboboxTrigger, isStandalone: true, selector: "[forComboboxTrigger]", inputs: { forComboboxTrigger: { classPropertyName: "forComboboxTrigger", publicName: "forComboboxTrigger", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick()", "keydown": "onKeyDown($event)" }, properties: { "attr.aria-haspopup": "\"listbox\"", "attr.aria-expanded": "ctx().open() ? \"true\" : \"false\"", "attr.aria-controls": "ctx().open() ? ctx().contentId() : null", "attr.data-state": "ctx().open() ? \"open\" : \"closed\"", "attr.data-disabled": "ctx().effectiveDisabled() ? \"\" : null" } }, exportAs: ["forComboboxTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forComboboxTrigger]',
+                    exportAs: 'forComboboxTrigger',
+                    host: {
+                        type: 'button',
+                        '[attr.aria-haspopup]': '"listbox"',
+                        '[attr.aria-expanded]': 'ctx().open() ? "true" : "false"',
+                        '[attr.aria-controls]': 'ctx().open() ? ctx().contentId() : null',
+                        '[attr.data-state]': 'ctx().open() ? "open" : "closed"',
+                        '[attr.data-disabled]': 'ctx().effectiveDisabled() ? "" : null',
+                        '(click)': 'onClick()',
+                        '(keydown)': 'onKeyDown($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { forComboboxTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "forComboboxTrigger", required: false }] }] } });
+
+/**
+ * The combobox `<input role="combobox">`. Owns the visible text and all
+ * keyboard interaction. Apply on a real `<input>` so the browser's native
+ * caret / selection semantics drive inline-autocomplete and so the form
+ * still behaves like a text field for screen readers.
+ *
+ * Wires `aria-haspopup="listbox"`, `aria-expanded`, `aria-controls`,
+ * `aria-autocomplete`, and `aria-activedescendant` (per APG combobox).
+ * Focus stays on the input — arrow keys move the listbox's *active
+ * descendant* via id reference, never moving DOM focus into the listbox.
+ *
+ * Keyboard:
+ * - **ArrowDown / ArrowUp** — open + move activedescendant.
+ * - **Home / End** (when open) — first / last enabled option.
+ * - **PageUp / PageDown** (when open) — first / last enabled option.
+ * - **Enter** (when open) — activate the activedescendant; no-op otherwise.
+ * - **Escape** (when open) — close (focus stays in input). On the
+ *   open→closed transition the input value is re-synced to `query()` even
+ *   while focused, so a consumer restoring the committed label from an
+ *   `(openChange)` handler renders without reaching for the DOM.
+ * - **Tab** (when open) — close and let Tab flow to the next focusable.
+ * - Printable keys: update `query` and (if `autocompleteMode` includes `'inline'`)
+ *   complete the rest of the first match in the input as selected text.
+ */
+class ForComboboxInput {
+    // The input doesn't introspect the value type — it reads/writes the
+    // query string and reads cached labels for inline autocomplete.
+    ctx = injectComboboxContext('ForComboboxInput');
+    #host = inject(ElementRef);
+    #composing = false;
+    ariaAutocomplete = computed(() => this.ctx.autocompleteMode(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaAutocomplete" }] : /* istanbul ignore next */ []));
+    constructor() {
+        registerHandle(this.#host.nativeElement, (el) => this.ctx.registerInput(el), (el) => this.ctx.unregisterInput(el));
+        reflectDisabled(this.ctx.effectiveDisabled);
+        const doc = inject(DOCUMENT);
+        // Sync DOM input.value to query() when the input doesn't currently have
+        // focus (e.g. consumer set [(query)] programmatically, or option
+        // activation copied the label into query via commitOnSelect). When the
+        // input is focused the user is mid-edit; clobbering input.value would
+        // jump the caret and break inline autocomplete state.
+        //
+        // The open→closed transition is the documented exception: the edit
+        // session is over (Escape closes but keeps focus in the input, per APG),
+        // so a consumer restoring the committed label — `query.set(label)` from an
+        // `(openChange)` handler — must reach the DOM even while focused. The
+        // caret-protection rationale no longer applies and a caret jump to the end
+        // of the restored text is the expected outcome. `wasOpen` tracks the prior
+        // open state to detect the edge; it's a plain transition latch, not derived
+        // signal state.
+        let wasOpen = this.ctx.open();
+        effect(() => {
+            const q = this.ctx.query();
+            const closing = wasOpen && !this.ctx.open();
+            wasOpen = this.ctx.open();
+            const el = this.#host.nativeElement;
+            if (el.value === q) {
+                return;
+            }
+            if (doc.activeElement !== el || closing) {
+                el.value = q;
+            }
+        });
+    }
+    onCompositionStart() {
+        this.#composing = true;
+    }
+    onCompositionEnd() {
+        this.#composing = false;
+        if (this.ctx.effectiveDisabled() || this.ctx.readonly()) {
+            return;
+        }
+        this.#syncQuery(true, false);
+    }
+    onInput(event) {
+        if (this.ctx.effectiveDisabled() || this.ctx.readonly()) {
+            return;
+        }
+        if (this.#composing) {
+            return;
+        }
+        const inputEvent = event;
+        const allowInline = !inputEvent.isComposing;
+        const isDelete = (inputEvent.inputType ?? '').startsWith('delete');
+        this.#syncQuery(allowInline, isDelete);
+    }
+    #syncQuery(allowInline, isDelete) {
+        const el = this.#host.nativeElement;
+        // The "user prefix" is everything before the caret. After inline
+        // autocomplete sets a selection on chars [prefixLen..end], typing replaces
+        // the selection (caret lands right after the new char) so this still
+        // captures the user's intent. On Backspace, the browser deletes the
+        // selection without touching the prefix — re-completing here would mean
+        // the user can never shorten the query, so we skip completion on delete.
+        const caret = el.selectionStart ?? el.value.length;
+        const prefix = el.value.slice(0, caret);
+        const atEnd = caret === el.value.length;
+        const mode = this.ctx.autocompleteMode();
+        const inlineActive = allowInline &&
+            !isDelete &&
+            atEnd &&
+            (mode === 'inline' || mode === 'both') &&
+            prefix.length > 0;
+        if (inlineActive) {
+            this.ctx.setQueryFromInput(prefix);
+            this.#applyInlineCompletion(prefix);
+        }
+        else {
+            this.ctx.setQueryFromInput(el.value);
+        }
+    }
+    #applyInlineCompletion(prefix) {
+        const cached = this.ctx.cachedOptions();
+        const lower = prefix.toLowerCase();
+        const match = cached.find((o) => o.label.toLowerCase().startsWith(lower));
+        const el = this.#host.nativeElement;
+        if (!match || match.label.toLowerCase() === lower) {
+            // No completion to apply — strip any prior selection so the user's
+            // prefix is plainly visible.
+            if (el.value !== prefix) {
+                el.value = prefix;
+            }
+            return;
+        }
+        // Use the option's full label as the visible text (preserving its case),
+        // with chars [prefixLen..end] selected so the next keystroke replaces
+        // the appended suggestion. Matches native browser autocomplete behavior.
+        const composed = match.label;
+        el.value = composed;
+        el.setSelectionRange(prefix.length, composed.length);
+    }
+    onKeyDown(event) {
+        if (this.ctx.effectiveDisabled()) {
+            return;
+        }
+        // Multi-mode Backspace heuristic: an empty input sends focus to the
+        // last chip so a second Backspace there removes it. Skip when there's a
+        // non-empty selection in the input (the user's mid-edit) — Backspace falls
+        // through to the native delete-char handler.
+        if (event.key === 'Backspace' &&
+            this.ctx.multiple() &&
+            this.#host.nativeElement.value === '' &&
+            !this.ctx.readonly() &&
+            !this.ctx.effectiveDisabled()) {
+            const chips = this.ctx.chips();
+            const last = chips[chips.length - 1];
+            if (last) {
+                event.preventDefault();
+                last.host.focus();
+                return;
+            }
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.ctx.open()) {
+                    // Open with the natural extreme as the auto-highlight bias —
+                    // navigate('next') won't fire here because items aren't registered
+                    // yet; the root's `activeId` linkedSignal seeds the activedescendant
+                    // once the options register.
+                    this.ctx.openMenu('first');
+                }
+                else {
+                    this.ctx.navigate('next');
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (!this.ctx.open()) {
+                    this.ctx.openMenu('last');
+                }
+                else {
+                    this.ctx.navigate('prev');
+                }
+                break;
+            case 'Home':
+                if (this.ctx.open()) {
+                    event.preventDefault();
+                    this.ctx.navigate('first');
+                }
+                break;
+            case 'End':
+                if (this.ctx.open()) {
+                    event.preventDefault();
+                    this.ctx.navigate('last');
+                }
+                break;
+            case 'PageUp':
+                if (this.ctx.open()) {
+                    event.preventDefault();
+                    this.ctx.navigate('first');
+                }
+                break;
+            case 'PageDown':
+                if (this.ctx.open()) {
+                    event.preventDefault();
+                    this.ctx.navigate('last');
+                }
+                break;
+            case 'Enter':
+                if (this.ctx.open() && this.ctx.activateActive()) {
+                    event.preventDefault();
+                }
+                break;
+            case 'Escape':
+                // Routed through emitEscapeKeyDown so the consumer's
+                // (escapeKeyDown) output fires and can veto the close. We still
+                // handle Escape inline (not via the dismissable layer) because
+                // focus stays in the input — the Escape belongs to this input
+                // and shouldn't bubble through nested layers before it sees it.
+                if (this.ctx.open()) {
+                    event.preventDefault();
+                    this.ctx.emitEscapeKeyDown(event);
+                }
+                break;
+            case 'Tab':
+                if (this.ctx.open()) {
+                    this.ctx.closeMenu('tab');
+                }
+                // Don't preventDefault — Tab still flows to the next focusable.
+                break;
+        }
+    }
+    onFocus() {
+        if (this.ctx.openOnFocus() && !this.ctx.open()) {
+            this.ctx.openMenu();
+        }
+    }
+    onClick() {
+        // A click on the input while focused mirrors the focus-open intent —
+        // useful when the user closed via Escape and wants to re-open without
+        // typing or reaching for the keyboard.
+        if (this.ctx.openOnFocus() && !this.ctx.open()) {
+            this.ctx.openMenu();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForComboboxInput, isStandalone: true, selector: "[forComboboxInput]", host: { attributes: { "type": "text", "role": "combobox", "autocomplete": "off", "autocorrect": "off", "spellcheck": "false" }, listeners: { "input": "onInput($event)", "compositionstart": "onCompositionStart()", "compositionend": "onCompositionEnd()", "keydown": "onKeyDown($event)", "focus": "onFocus()", "click": "onClick()" }, properties: { "id": "ctx.inputId()", "attr.aria-haspopup": "\"listbox\"", "attr.aria-expanded": "ctx.open() ? \"true\" : \"false\"", "attr.aria-controls": "ctx.open() ? ctx.listboxId() : null", "attr.aria-autocomplete": "ariaAutocomplete()", "attr.aria-activedescendant": "ctx.open() ? (ctx.activeId() ?? null) : null", "attr.aria-disabled": "ctx.effectiveDisabled() ? \"true\" : null", "attr.aria-readonly": "ctx.readonly() ? \"true\" : null", "attr.aria-required": "ctx.required() ? \"true\" : null", "attr.aria-invalid": "ctx.invalid() ? \"true\" : null", "attr.aria-busy": "ctx.pending() ? \"true\" : null", "attr.readonly": "ctx.readonly() ? \"\" : null", "attr.data-state": "ctx.open() ? \"open\" : \"closed\"", "attr.data-disabled": "ctx.effectiveDisabled() ? \"\" : null" } }, exportAs: ["forComboboxInput"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forComboboxInput]',
+                    exportAs: 'forComboboxInput',
+                    host: {
+                        type: 'text',
+                        role: 'combobox',
+                        autocomplete: 'off',
+                        autocorrect: 'off',
+                        spellcheck: 'false',
+                        '[id]': 'ctx.inputId()',
+                        '[attr.aria-haspopup]': '"listbox"',
+                        '[attr.aria-expanded]': 'ctx.open() ? "true" : "false"',
+                        '[attr.aria-controls]': 'ctx.open() ? ctx.listboxId() : null',
+                        '[attr.aria-autocomplete]': 'ariaAutocomplete()',
+                        '[attr.aria-activedescendant]': 'ctx.open() ? (ctx.activeId() ?? null) : null',
+                        '[attr.aria-disabled]': 'ctx.effectiveDisabled() ? "true" : null',
+                        '[attr.aria-readonly]': 'ctx.readonly() ? "true" : null',
+                        '[attr.aria-required]': 'ctx.required() ? "true" : null',
+                        '[attr.aria-invalid]': 'ctx.invalid() ? "true" : null',
+                        '[attr.aria-busy]': 'ctx.pending() ? "true" : null',
+                        '[attr.readonly]': 'ctx.readonly() ? "" : null',
+                        '[attr.data-state]': 'ctx.open() ? "open" : "closed"',
+                        '[attr.data-disabled]': 'ctx.effectiveDisabled() ? "" : null',
+                        '(input)': 'onInput($event)',
+                        '(compositionstart)': 'onCompositionStart()',
+                        '(compositionend)': 'onCompositionEnd()',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(focus)': 'onFocus()',
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * The floating surface, portaled to `document.body` and positioned by
+ * `@floating-ui/dom` against the anchor (explicit `[forComboboxAnchor]` →
+ * `[forComboboxTrigger]` → input).
+ *
+ * Two anatomies, picked by whether an inner `[forComboboxList]` is present:
+ *
+ * - **Editable (no list)** — content itself carries `role="listbox"`,
+ *   `tabindex="-1"`, `aria-multiselectable`, `aria-setsize`, and the labelled
+ *   role (`aria-label` / `aria-labelledby`). The input's `aria-controls` points
+ *   here. This is the original combobox; nothing about it changes.
+ * - **Picker (list present)** — content drops the listbox semantics and becomes
+ *   a neutral popup surface; `[forComboboxList]` takes over the listbox role and
+ *   owns the options, the input lives inside the panel, and the input's
+ *   `aria-controls` points to the list. Keeps `data-state` and the positioner +
+ *   dismissable layer unchanged.
+ *
+ * Mount/unmount of the visible content is the consumer's responsibility —
+ * wrap with `@if (open())` so `animate.enter` / `animate.leave` fire on the
+ * natural mount cycle. While mounted, a `DismissableLayer` activates for
+ * pointer-down outside / focus outside; the input and (picker anatomy) the
+ * trigger are exempt from outside checks.
+ *
+ * Focus:
+ * - **Editable anatomy** — focus stays in the input across the whole open
+ *   lifecycle; the directive never moves DOM focus and exposes no focus hooks.
+ *   Active-option highlighting is `aria-activedescendant`-driven.
+ * - **Picker anatomy** — on open, focus moves into the input (the search field
+ *   inside the panel); on close it returns to the trigger. Both moves are
+ *   vetoable via `(autoFocusOnOpen)` / `(autoFocusOnClose)` on `[forCombobox]`,
+ *   and the return is gated by `[returnFocus]`. Escape stays owned by the input.
+ *
+ * The lifecycle (positioner + dismissable layer, plus the picker anatomy's
+ * focus bundles) is owned by the shared `injectOverlayShell` helper.
+ */
+class ForComboboxContent {
+    ctx = injectComboboxContext('ForComboboxContent');
+    #host = inject(ElementRef);
+    /** When a `[forComboboxList]` is registered the listbox semantics live there, not here. */
+    hasList = this.ctx.hasList;
+    /**
+     * Reflects `aria-setsize` when the consumer wires up `[totalCount]` for
+     * virtualization (editable anatomy only — the picker anatomy's list owns it).
+     * Falls back to `null` (omitted) otherwise — leaving the default
+     * option-count semantics screen readers already infer.
+     */
+    ariaSetSize = computed(() => {
+        const total = this.ctx.totalCount();
+        return total === undefined ? null : String(total);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSetSize" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const ctx = this.ctx;
+        registerHandle(this.#host.nativeElement, (el) => ctx.registerContent(el), (el) => ctx.unregisterContent(el));
+        // The picker anatomy opts back into the shell's focus bundles. `trigger()`
+        // is read once on construction: the trigger renders outside the `@if (open())`
+        // that gates this content, so it has already registered by the time the
+        // surface mounts. Without a trigger (editable anatomy) the bundles are
+        // omitted entirely and focus stays in the input — byte-for-byte unchanged.
+        const hasTrigger = ctx.trigger() !== null;
+        const config = {
+            positioner: {
+                kind: 'floating',
+                reference: ctx.anchor,
+                open: ctx.open,
+                side: ctx.side,
+                align: ctx.align,
+                sideOffset: ctx.sideOffset,
+                alignOffset: ctx.alignOffset,
+                avoidCollisions: ctx.avoidCollisions,
+                collisionPadding: ctx.collisionPadding,
+                arrowPadding: ctx.arrowPadding,
+                sticky: ctx.sticky,
+                hideWhenDetached: ctx.hideWhenDetached,
+                clipUntilPositioned: ctx.clipUntilPositioned,
+            },
+            dismiss: {
+                dismissible: ctx.dismissible,
+                requestClose: (reason) => ctx.requestClose(reason),
+                // Escape is handled by the input directive (focus stays in the
+                // input, so Escape there shouldn't bubble through nested layers
+                // before the input sees it). Omitted here intentionally.
+                emitPointerDownOutside: (veto) => ctx.emitPointerDownOutside(veto),
+                emitFocusOutside: (veto) => ctx.emitFocusOutside(veto),
+                emitInteractOutside: (veto) => ctx.emitInteractOutside(veto),
+                // The input owns the visible focus and toggles via its own click /
+                // focus handlers; the trigger (picker anatomy) toggles via its own
+                // click handler. Without exemption a pointer-down on either would race
+                // the dismissal layer.
+                exemptElements: () => {
+                    const els = [];
+                    const input = ctx.input();
+                    if (input)
+                        els.push(input);
+                    const trigger = ctx.trigger();
+                    if (trigger)
+                        els.push(trigger);
+                    return els;
+                },
+            },
+            // Picker anatomy only: move focus into the input on open, return it to the
+            // trigger on close. Editable anatomy keeps focus in the input throughout,
+            // so both bundles stay absent (no imperative move, no hooks).
+            ...(hasTrigger
+                ? {
+                    initialFocus: {
+                        move: () => {
+                            const input = ctx.input();
+                            if (input) {
+                                input.focus();
+                                return true;
+                            }
+                            return false;
+                        },
+                        veto: () => ctx.emitAutoFocusOnOpen(),
+                    },
+                    returnFocus: {
+                        enabled: ctx.returnFocus,
+                        target: () => ctx.trigger(),
+                        veto: () => ctx.emitAutoFocusOnClose(),
+                        // Tab already advanced focus past the closing surface; re-focusing
+                        // the trigger would steal it back.
+                        skip: () => ctx.lastCloseReason() === 'tab',
+                    },
+                }
+                : {}),
+        };
+        injectOverlayShell(config);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForComboboxContent, isStandalone: true, selector: "[forComboboxContent]", host: { properties: { "attr.role": "hasList() ? null : \"listbox\"", "attr.tabindex": "hasList() ? null : \"-1\"", "id": "ctx.contentId()", "attr.aria-labelledby": "hasList() ? null : (ctx.ariaLabel() ? null : ctx.inputId())", "attr.aria-label": "hasList() ? null : ctx.ariaLabel()", "attr.aria-multiselectable": "hasList() ? null : (ctx.multiple() ? \"true\" : null)", "attr.aria-setsize": "hasList() ? null : ariaSetSize()", "attr.data-state": "ctx.open() ? \"open\" : \"closed\"" } }, exportAs: ["forComboboxContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forComboboxContent]',
+                    exportAs: 'forComboboxContent',
+                    host: {
+                        '[attr.role]': 'hasList() ? null : "listbox"',
+                        '[attr.tabindex]': 'hasList() ? null : "-1"',
+                        '[id]': 'ctx.contentId()',
+                        '[attr.aria-labelledby]': 'hasList() ? null : (ctx.ariaLabel() ? null : ctx.inputId())',
+                        '[attr.aria-label]': 'hasList() ? null : ctx.ariaLabel()',
+                        '[attr.aria-multiselectable]': 'hasList() ? null : (ctx.multiple() ? "true" : null)',
+                        '[attr.aria-setsize]': 'hasList() ? null : ariaSetSize()',
+                        '[attr.data-state]': 'ctx.open() ? "open" : "closed"',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * The `role="listbox"` element of the picker anatomy. Nest it inside
+ * `[forComboboxContent]` next to `[forComboboxInput]` so the popup surface can
+ * hold a search field without violating `aria-required-owned-elements` (a
+ * `listbox` may only own `option` / `group` children). The list owns the
+ * options; `[forComboboxContent]` becomes a neutral popup surface.
+ *
+ * ```html
+ * <div forComboboxContent>
+ *   <input forComboboxInput />
+ *   <div forComboboxList>
+ *     @for (item of filtered(); track item.id) {
+ *       <div forComboboxOption [value]="item">{{ item.label }}</div>
+ *     }
+ *   </div>
+ * </div>
+ * ```
+ *
+ * Carries `role="listbox"`, `tabindex="-1"` (focus stays in the input,
+ * activedescendant-driven), `aria-multiselectable` in multi mode,
+ * `aria-setsize` when virtualizing, and the labelled-role `aria-label` /
+ * `aria-labelledby`. Its id is what the input's `aria-controls` references in
+ * the picker anatomy.
+ *
+ * When no `[forComboboxList]` is present, `[forComboboxContent]` itself carries
+ * the listbox semantics (the editable anatomy) — this part is additive and
+ * non-breaking.
+ */
+class ForComboboxList {
+    ctx = injectComboboxContext('ForComboboxList');
+    #host = inject(ElementRef);
+    /**
+     * Reflects `aria-setsize` when the consumer wires up `[totalCount]` for
+     * virtualization. Falls back to `null` (omitted) otherwise.
+     */
+    ariaSetSize = computed(() => {
+        const total = this.ctx.totalCount();
+        return total === undefined ? null : String(total);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSetSize" }] : /* istanbul ignore next */ []));
+    constructor() {
+        registerHandle(this.#host.nativeElement, (el) => this.ctx.registerList(el), (el) => this.ctx.unregisterList(el));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForComboboxList, isStandalone: true, selector: "[forComboboxList]", host: { attributes: { "role": "listbox", "tabindex": "-1" }, properties: { "id": "ctx.listId()", "attr.aria-labelledby": "ctx.ariaLabel() ? null : ctx.inputId()", "attr.aria-label": "ctx.ariaLabel()", "attr.aria-multiselectable": "ctx.multiple() ? \"true\" : null", "attr.aria-setsize": "ariaSetSize()" } }, exportAs: ["forComboboxList"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forComboboxList]',
+                    exportAs: 'forComboboxList',
+                    host: {
+                        role: 'listbox',
+                        tabindex: '-1',
+                        '[id]': 'ctx.listId()',
+                        '[attr.aria-labelledby]': 'ctx.ariaLabel() ? null : ctx.inputId()',
+                        '[attr.aria-label]': 'ctx.ariaLabel()',
+                        '[attr.aria-multiselectable]': 'ctx.multiple() ? "true" : null',
+                        '[attr.aria-setsize]': 'ariaSetSize()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Injection key the `[forComboboxIndicator]` uses to resolve its parent
+ * option, decoupled from the concrete `ForComboboxOption` class.
+ * `ForComboboxOption` provides itself under this token, so a design system
+ * wrapping the option by subclassing re-points it at the subclass with a
+ * single provider (`{ provide: FOR_COMBOBOX_OPTION, useExisting: MtxComboboxOption }`)
+ * and the indicator keeps resolving — see `docs/wrapping-form-primitives.md`.
+ */
+const FOR_COMBOBOX_OPTION = new InjectionToken('FOR_COMBOBOX_OPTION');
+/**
+ * One option inside a `[forComboboxContent]`. Apply on whatever element
+ * fits the design — typically a `<div>` or `<li>`. Click activates:
+ * single mode replaces `[(value)]` and closes the listbox; multi mode
+ * toggles the value in/out and keeps the listbox open.
+ *
+ * Generic over the option value type `T` (default `string`). Inferred from
+ * the `[value]` binding so consumers can pass either primitive ids or
+ * full objects (`[value]="city"` infers `T = City`); the parent
+ * `[forCombobox]` must be parameterized over the same `T`.
+ *
+ * `aria-selected` reflects different things in single vs. multi:
+ * - **Single mode**: the option that's the current activedescendant
+ *   (Enter would activate it). Matches APG select-only-combobox.
+ * - **Multi mode**: every option currently in `value()` carries
+ *   `aria-selected="true"` (multiple "selected" entries simultaneously).
+ *   Matches APG multi-select combobox.
+ *
+ * `data-state="checked" | "unchecked"` always reflects membership in
+ * `value()` regardless of mode, so consumers can paint a checkmark with
+ * pure CSS in either mode. `data-highlighted` marks the option that is
+ * the current activedescendant — shared across the
+ * library's roving / activedescendant primitives.
+ *
+ * Hovering an option also makes it the activedescendant, mirroring native
+ * menu / select behavior so mouse and keyboard intent stay synchronized.
+ */
+class ForComboboxOption {
+    #ctx = injectComboboxContext('ForComboboxOption');
+    #host = inject(ElementRef);
+    /**
+     * Stable identifier serialized into `[(value)]` and the hidden input.
+     * Defaults to `string` for back-compat; bind an object to specialize
+     * the parent `[forCombobox]` over a richer `T`. The parent's
+     * `[isItemEqualToValue]` decides how options are matched against the
+     * committed selection.
+     */
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Visible label used by `[forComboboxInput]` for inline autocomplete
+     * matching, by `commitOnSelect` to populate the input on selection,
+     * and by typeahead / display utilities. When omitted: for string
+     * `value` falls back to the trimmed `textContent` of the host element;
+     * for object `value` falls back to the parent's `itemToStringLabel(value)`.
+     */
+    label = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Absolute index of this option in the consumer's source array. Required
+     * when wiring up a virtualized listbox so navigation past the rendered
+     * window can resolve indices to options (and emit `(scrollToIndex)` when
+     * needed). Leave `null` for non-virtualized lists — the directive then
+     * falls back to DOM order.
+     */
+    posInSet = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "posInSet" }] : /* istanbul ignore next */ []));
+    id = hostId('for-combobox-option');
+    selected = computed(() => this.#ctx.isSelected(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    /** True when this option is the current activedescendant. Reflected as `data-highlighted`. */
+    highlighted = computed(() => this.#ctx.isActive(this.id()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => this.disabled() || this.#ctx.effectiveDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    ariaSelected = computed(() => {
+        if (this.#ctx.multiple()) {
+            return this.selected() ? 'true' : 'false';
+        }
+        return this.highlighted() ? 'true' : 'false';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSelected" }] : /* istanbul ignore next */ []));
+    /** Reflects `aria-posinset` (1-based) when virtualizing. Falls back to DOM order otherwise. */
+    ariaPosInSet = computed(() => {
+        const explicit = this.posInSet();
+        if (explicit !== null) {
+            return String(explicit + 1);
+        }
+        if (this.#ctx.totalCount() === undefined) {
+            return null;
+        }
+        const items = this.#ctx.options();
+        const idx = items.findIndex((it) => it.id() === this.id());
+        return idx < 0 ? null : String(idx + 1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaPosInSet" }] : /* istanbul ignore next */ []));
+    /** Reflects `aria-setsize` when the consumer wires up `[totalCount]`. */
+    ariaSetSize = computed(() => {
+        const total = this.#ctx.totalCount();
+        return total === undefined ? null : String(total);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSetSize" }] : /* istanbul ignore next */ []));
+    #effectiveLabel = computed(() => {
+        const explicit = this.label();
+        if (explicit !== null) {
+            return explicit;
+        }
+        const v = this.value();
+        if (typeof v === 'string') {
+            // String mode: the trimmed `textContent` is the canonical fallback,
+            // identical to the pre-generic behaviour. Lets consumers omit
+            // `[label]` and have it just work for projected text.
+            return (this.#host.nativeElement.textContent ?? '').trim();
+        }
+        // Object mode: lean on the parent's `itemToStringLabel` so the
+        // resolved label is consistent with chip rendering and `commitOnSelect`.
+        return this.#ctx.itemToStringLabel()(v);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#effectiveLabel" }] : /* istanbul ignore next */ []));
+    #handle = {
+        host: this.#host.nativeElement,
+        id: this.id,
+        value: this.value,
+        label: this.#effectiveLabel,
+        disabled: this.effectiveDisabled,
+        posInSet: this.posInSet,
+    };
+    constructor() {
+        registerHandle(this.#handle, (h) => this.#ctx.registerOption(h), (h) => this.#ctx.unregisterOption(h));
+    }
+    onClick() {
+        if (this.effectiveDisabled() || this.#ctx.readonly()) {
+            return;
+        }
+        this.#ctx.activate(this.#handle);
+    }
+    onPointerMove() {
+        if (this.effectiveDisabled() || this.#ctx.isPointerSuppressed()) {
+            return;
+        }
+        if (!this.#ctx.isActive(this.id())) {
+            this.#ctx.setActiveId(this.id());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxOption, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForComboboxOption, isStandalone: true, selector: "[forComboboxOption]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, posInSet: { classPropertyName: "posInSet", publicName: "posInSet", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "click": "onClick()", "pointermove": "onPointerMove()" }, properties: { "id": "id()", "attr.aria-selected": "ariaSelected()", "attr.aria-disabled": "effectiveDisabled() ? \"true\" : null", "attr.aria-posinset": "ariaPosInSet()", "attr.aria-setsize": "ariaSetSize()", "attr.data-state": "selected() ? \"checked\" : \"unchecked\"", "attr.data-highlighted": "highlighted() ? \"\" : null", "attr.data-disabled": "effectiveDisabled() ? \"\" : null" } }, providers: [{ provide: FOR_COMBOBOX_OPTION, useExisting: ForComboboxOption }], exportAs: ["forComboboxOption"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxOption, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forComboboxOption]',
+                    exportAs: 'forComboboxOption',
+                    providers: [{ provide: FOR_COMBOBOX_OPTION, useExisting: ForComboboxOption }],
+                    host: {
+                        role: 'option',
+                        '[id]': 'id()',
+                        '[attr.aria-selected]': 'ariaSelected()',
+                        '[attr.aria-disabled]': 'effectiveDisabled() ? "true" : null',
+                        '[attr.aria-posinset]': 'ariaPosInSet()',
+                        '[attr.aria-setsize]': 'ariaSetSize()',
+                        '[attr.data-state]': 'selected() ? "checked" : "unchecked"',
+                        '[attr.data-highlighted]': 'highlighted() ? "" : null',
+                        '[attr.data-disabled]': 'effectiveDisabled() ? "" : null',
+                        '(click)': 'onClick()',
+                        '(pointermove)': 'onPointerMove()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], posInSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "posInSet", required: false }] }] } });
+
+/**
+ * Visibility helper inside a `[forComboboxOption]`. The directive flips a
+ * `[hidden]` host binding so the consumer can keep the checkmark / icon
+ * inline without extra `@if` glue:
+ *
+ * ```html
+ * <div forComboboxOption value="apple">
+ *   <span forComboboxIndicator>✓</span>
+ *   Apple
+ * </div>
+ * ```
+ *
+ * Reflects the parent option's `data-state` (`"checked" | "unchecked"`) so
+ * the consumer can also style it from CSS. Visibility while unselected is
+ * enforced with an inline `display: none` (which beats any author `display`
+ * rule a consumer applies via a class) in addition to the `hidden` attribute
+ * that removes it from the a11y tree.
+ *
+ * In multi mode the indicator follows membership in `value()`, matching the
+ * option's own `data-state` semantics (a checkmark per selected option).
+ */
+class ForComboboxIndicator {
+    option = injectParentOption();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForComboboxIndicator, isStandalone: true, selector: "[forComboboxIndicator]", host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-state": "option.selected() ? \"checked\" : \"unchecked\"", "hidden": "!option.selected()", "style.display": "option.selected() ? null : \"none\"" } }, exportAs: ["forComboboxIndicator"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forComboboxIndicator]',
+                    exportAs: 'forComboboxIndicator',
+                    host: {
+                        'aria-hidden': 'true',
+                        '[attr.data-state]': 'option.selected() ? "checked" : "unchecked"',
+                        '[hidden]': '!option.selected()',
+                        '[style.display]': 'option.selected() ? null : "none"',
+                    },
+                }]
+        }] });
+function injectParentOption() {
+    const option = inject(FOR_COMBOBOX_OPTION, { optional: true });
+    if (!option) {
+        throw new Error('[forty-cdk/combobox] ForComboboxIndicator must be used inside a [forComboboxOption] element.');
+    }
+    return option;
+}
+
+/**
+ * Empty-state slot, shown when the listbox has no registered options.
+ * The directive hides the message when options exist so the consumer can
+ * keep it inline in the template — no `@if` needed. Visibility is enforced
+ * with an inline `display: none` (which beats any author `display` rule a
+ * consumer applies via a class) in addition to the `hidden` attribute that
+ * removes it from the a11y tree:
+ *
+ * ```html
+ * <div forComboboxContent>
+ *   @for (option of filtered(); track option.id) {
+ *     <div forComboboxOption [value]="option.id">{{ option.label }}</div>
+ *   }
+ *   <div forComboboxEmpty>No matches.</div>
+ * </div>
+ * ```
+ *
+ * Carries `role="status"` and `aria-live="polite"` so screen readers
+ * announce the message when it appears.
+ */
+class ForComboboxEmpty {
+    #ctx = injectComboboxContext('ForComboboxEmpty');
+    shouldShow = computed(() => this.#ctx.options().length === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shouldShow" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForComboboxEmpty, isStandalone: true, selector: "[forComboboxEmpty]", host: { attributes: { "role": "status", "aria-live": "polite" }, properties: { "hidden": "!shouldShow()", "style.display": "shouldShow() ? null : \"none\"" } }, exportAs: ["forComboboxEmpty"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxEmpty, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forComboboxEmpty]',
+                    exportAs: 'forComboboxEmpty',
+                    host: {
+                        role: 'status',
+                        'aria-live': 'polite',
+                        '[hidden]': '!shouldShow()',
+                        '[style.display]': 'shouldShow() ? null : "none"',
+                    },
+                }]
+        }] });
+
+/**
+ * Live-region slot for async-filtering feedback (loading, result count,
+ * "no matches", error messages). Apply on a `<div>` inside the listbox or
+ * next to the input. The directive sets `role="status"` and
+ * `aria-live="polite"` so messages projected as content are announced to
+ * screen readers when they change.
+ *
+ * The directive is **content-driven** — it does not pick or render a
+ * message. Project whatever the consumer wants and use the exposed
+ * `count` signal (or `forComboboxStatus` template ref) to interpolate
+ * the option count when relevant.
+ *
+ * ```html
+ * <div forCombobox [(query)]="query" [(value)]="value" [(open)]="open">
+ *   <input forComboboxInput placeholder="Search…" />
+ *   @if (open()) {
+ *     <div forComboboxContent>
+ *       <div forComboboxStatus #status="forComboboxStatus">
+ *         @if (loading()) {
+ *           Searching…
+ *         } @else if (status.count() === 0) {
+ *           No matches.
+ *         } @else {
+ *           {{ status.count() }} results.
+ *         }
+ *       </div>
+ *       @for (it of filtered(); track it.id) {
+ *         <div forComboboxOption [value]="it.id">{{ it.label }}</div>
+ *       }
+ *     </div>
+ *   }
+ * </div>
+ * ```
+ *
+ * For an empty-only slot that auto-hides when there are options, use
+ * `[forComboboxEmpty]`. `[forComboboxStatus]` stays mounted regardless
+ * so transitions like "loading → 5 results" are announced as a single
+ * change to the same live region.
+ */
+class ForComboboxStatus {
+    #ctx = injectComboboxContext('ForComboboxStatus');
+    /**
+     * Number of currently registered options. Reflects the live size of the
+     * filtered listbox so the consumer can interpolate `{{ status.count() }}`
+     * inside the live region.
+     */
+    count = computed(() => this.#ctx.options().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxStatus, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForComboboxStatus, isStandalone: true, selector: "[forComboboxStatus]", host: { attributes: { "role": "status", "aria-live": "polite", "aria-atomic": "true" } }, exportAs: ["forComboboxStatus"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxStatus, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forComboboxStatus]',
+                    exportAs: 'forComboboxStatus',
+                    host: {
+                        role: 'status',
+                        'aria-live': 'polite',
+                        'aria-atomic': 'true',
+                    },
+                }]
+        }] });
+
+/**
+ * Optional clear button. Apply on a `<button type="button">` so Space /
+ * Enter dispatch a native click. Clicking calls `clear()` on the root,
+ * which resets `[(value)]` and `[(query)]` and the activedescendant.
+ *
+ * The directive hides the button when there's nothing to clear (no value,
+ * empty query) so the consumer can leave it inline in the template without
+ * an extra `@if`. Visibility is enforced with an inline `display: none`
+ * (which beats any author `display` rule a consumer applies via a class) in
+ * addition to the `hidden` attribute that removes it from the a11y tree.
+ */
+class ForComboboxClear {
+    ctx = injectComboboxContext('ForComboboxClear');
+    hasContent = computed(() => this.ctx.value().length > 0 || this.ctx.query().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasContent" }] : /* istanbul ignore next */ []));
+    /** Disabled when the combobox is disabled or read-only — the clear action is unavailable. */
+    isDisabled = computed(() => this.ctx.effectiveDisabled() || this.ctx.readonly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        reflectDisabled(this.isDisabled);
+    }
+    onClick() {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.ctx.clear(true);
+        // Restore focus to the input so the user can keep typing without
+        // chasing the caret.
+        this.ctx.input()?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxClear, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForComboboxClear, isStandalone: true, selector: "[forComboboxClear]", host: { attributes: { "type": "button", "aria-label": "Clear" }, listeners: { "click": "onClick()" }, properties: { "hidden": "!hasContent()", "style.display": "hasContent() ? null : \"none\"", "attr.tabindex": "-1" } }, exportAs: ["forComboboxClear"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxClear, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forComboboxClear]',
+                    exportAs: 'forComboboxClear',
+                    host: {
+                        type: 'button',
+                        'aria-label': 'Clear',
+                        '[hidden]': '!hasContent()',
+                        '[style.display]': 'hasContent() ? null : "none"',
+                        '[attr.tabindex]': '-1',
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Multi-mode chips area. Wrap the chips and the `<input>` together so the
+ * combobox visually presents a single editable region:
+ *
+ * ```html
+ * <div forCombobox multiple [(value)]="tags" [(query)]="query" [(open)]="open">
+ *   <div forComboboxChips>
+ *     @for (chip of selected(); track chip.value) {
+ *       <span forComboboxChip [value]="chip.value">
+ *         {{ chip.label }}
+ *         <button forComboboxChipRemove></button>
+ *       </span>
+ *     }
+ *     <input forComboboxInput />
+ *   </div>
+ *   …
+ * </div>
+ * ```
+ *
+ * Carries `role="group"` with `aria-label="Selected items"` (override via
+ * `[ariaLabel]`) so screen readers announce the chip cluster as a single
+ * unit. The directive itself doesn't manage focus or selection — the
+ * chips and the input own that — but its presence groups them for
+ * assistive tech.
+ */
+class ForComboboxChips {
+    ctx = injectComboboxContext('ForComboboxChips');
+    /**
+     * Accessible name for the chip cluster, exposed as `role="group"`'s
+     * `aria-label` so screen readers announce the selected chips as a single
+     * unit. Defaults to `'Selected items'`; set `[ariaLabel]` to localize or
+     * override it.
+     */
+    ariaLabel = input('Selected items', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxChips, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForComboboxChips, isStandalone: true, selector: "[forComboboxChips]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel()" } }, exportAs: ["forComboboxChips"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxChips, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forComboboxChips]',
+                    exportAs: 'forComboboxChips',
+                    host: {
+                        role: 'group',
+                        '[attr.aria-label]': 'ariaLabel()',
+                    },
+                }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * One chip representing a selected value in multi mode. Apply on a
+ * `<span>` (or any inline-block element) inside `[forComboboxChips]`.
+ * The chip is **out of the Tab cycle** (`tabindex="-1"`) by design:
+ * the user reaches it via the input's Backspace heuristic (Backspace on
+ * an empty input focuses the last chip), then navigates between chips
+ * with ArrowLeft / ArrowRight or removes them with Backspace / Delete.
+ *
+ * Keyboard while the chip has focus (LTR; the ArrowLeft/Right roles swap
+ * in RTL so they always follow visual order):
+ * - **ArrowLeft** — focus the previous chip; bounces if first.
+ * - **ArrowRight** — focus the next chip; if at the last, focus the input.
+ * - **Backspace / Delete** — remove this chip + focus the previous chip,
+ *   or the next chip when there is no previous one (so removing the first
+ *   chip lands on the new first chip), falling back to the input only when
+ *   the removed chip was the last one standing.
+ * - **Escape** — return focus to the input.
+ *
+ * Click on the chip body (excluding the remove button) just focuses the
+ * chip — useful as an alternative to the Backspace path.
+ */
+class ForComboboxChip {
+    ctx = injectComboboxContext('ForComboboxChip');
+    #host = inject(ElementRef);
+    /**
+     * The value this chip represents — must match an entry in
+     * `[forCombobox][(value)]` per the parent's `[isItemEqualToValue]`.
+     * Generic over `T` (default `string`); inferred from the binding
+     * (`[value]="someObject"` specializes `T`).
+     */
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * `data-value` reflection — for string `T` this is the value verbatim
+     * (unchanged from the pre-generic behaviour); for object `T` it uses
+     * the parent's `itemToFormValue` so the attribute carries the same
+     * wire format as the hidden inputs (typically JSON or a per-item id).
+     */
+    dataValue = computed(() => {
+        const v = this.value();
+        return typeof v === 'string' ? v : this.ctx.itemToFormValue()(v);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataValue" }] : /* istanbul ignore next */ []));
+    /** Resolved label of the underlying option, used by `[forComboboxChipRemove]` for its `aria-label`. */
+    label = computed(() => {
+        const v = this.value();
+        const equals = this.ctx.isItemEqualToValue();
+        const cached = this.ctx.cachedOptions().find((o) => equals(o.value, v));
+        if (cached) {
+            return cached.label;
+        }
+        return typeof v === 'string' ? v : this.ctx.itemToStringLabel()(v);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const handle = {
+            host: this.#host.nativeElement,
+            value: this.value,
+        };
+        registerHandle(handle, (h) => this.ctx.registerChip(h), (h) => this.ctx.unregisterChip(h));
+    }
+    onKeyDown(event) {
+        if (this.ctx.effectiveDisabled() || this.ctx.readonly()) {
+            return;
+        }
+        const chips = this.ctx.chips();
+        const index = chips.findIndex((c) => c.host === this.#host.nativeElement);
+        if (index < 0) {
+            return;
+        }
+        // In RTL the chip cluster lays out right-to-left, so ArrowRight must
+        // move to the visually-next chip (= DOM-previous) and ArrowLeft to the
+        // visually-previous one (= DOM-next), with the input sitting at the
+        // visual leftmost edge.
+        const rtl = this.ctx.dir() === 'rtl';
+        const prevKey = rtl ? 'ArrowRight' : 'ArrowLeft';
+        const nextKey = rtl ? 'ArrowLeft' : 'ArrowRight';
+        switch (event.key) {
+            case prevKey: {
+                event.preventDefault();
+                const prev = chips[index - 1];
+                if (prev) {
+                    prev.host.focus();
+                }
+                break;
+            }
+            case nextKey: {
+                event.preventDefault();
+                const next = chips[index + 1];
+                if (next) {
+                    next.host.focus();
+                }
+                else {
+                    // At the last chip (visual edge in either direction) — hop to the input.
+                    this.ctx.input()?.focus();
+                }
+                break;
+            }
+            case 'Backspace':
+            case 'Delete': {
+                event.preventDefault();
+                const v = this.value();
+                const prev = chips[index - 1];
+                const next = chips[index + 1];
+                this.ctx.removeValue(v);
+                // Keep focus inside the chip cluster whenever a neighbour survives the
+                // removal: prefer the previous chip, otherwise the next one (which
+                // slides into the freed slot — so removing the first chip lands on the
+                // new first chip rather than ejecting the user to the input). Only drop
+                // focus into the input when the removed chip was the last one standing,
+                // so the user can keep typing without chasing the caret.
+                if (prev) {
+                    prev.host.focus();
+                }
+                else if (next) {
+                    next.host.focus();
+                }
+                else {
+                    this.ctx.input()?.focus();
+                }
+                break;
+            }
+            case 'Escape': {
+                event.preventDefault();
+                this.ctx.input()?.focus();
+                break;
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxChip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForComboboxChip, isStandalone: true, selector: "[forComboboxChip]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "tabindex": "-1" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.data-value": "dataValue()", "attr.data-disabled": "ctx.effectiveDisabled() ? \"\" : null" } }, exportAs: ["forComboboxChip"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxChip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forComboboxChip]',
+                    exportAs: 'forComboboxChip',
+                    host: {
+                        tabindex: '-1',
+                        '[attr.data-value]': 'dataValue()',
+                        '[attr.data-disabled]': 'ctx.effectiveDisabled() ? "" : null',
+                        '(keydown)': 'onKeyDown($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+
+/**
+ * Remove button inside a `[forComboboxChip]`. Apply on a
+ * `<button type="button">` so click and Space / Enter (when focused) all
+ * trigger the same removal flow. The button is out of the Tab cycle
+ * (`tabindex="-1"`) so the user navigates the chip cluster via the chip's
+ * own ArrowLeft/Right + Backspace/Delete keys; this button exists for
+ * mouse / touch users.
+ *
+ * The host carries a generated `aria-label` ("Remove `<chip label>`")
+ * derived from the parent chip's resolved option label.
+ */
+class ForComboboxChipRemove {
+    // The value type is opaque to chip-remove: it just forwards whatever the
+    // parent chip exposes back into `removeValue`. At runtime the chip and
+    // the parent `[forCombobox]` share the same `T` because the consumer
+    // binds them with the same value source.
+    ctx = injectComboboxContext('ForComboboxChipRemove');
+    #chip = inject(ForComboboxChip, { optional: true });
+    /** Disabled when the combobox is disabled or read-only — chip removal is unavailable. */
+    isDisabled = computed(() => this.ctx.effectiveDisabled() || this.ctx.readonly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (!this.#chip) {
+            throw new Error('[forty-cdk/combobox] ForComboboxChipRemove must be used inside a [forComboboxChip] element.');
+        }
+        reflectDisabled(this.isDisabled);
+    }
+    ariaLabel = computed(() => `Remove ${this.#chip.label()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    onClick(event) {
+        if (this.isDisabled()) {
+            return;
+        }
+        // Don't let the click bubble up to the chip body — that would trigger
+        // its keyboard-triggered handlers in some browsers via synthesized events.
+        event.stopPropagation();
+        this.ctx.removeValue(this.#chip.value());
+        // Restore focus to the input so the user can continue typing.
+        this.ctx.input()?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxChipRemove, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForComboboxChipRemove, isStandalone: true, selector: "[forComboboxChipRemove]", host: { attributes: { "type": "button", "tabindex": "-1" }, listeners: { "click": "onClick($event)" }, properties: { "attr.aria-label": "ariaLabel()" } }, exportAs: ["forComboboxChipRemove"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxChipRemove, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forComboboxChipRemove]',
+                    exportAs: 'forComboboxChipRemove',
+                    host: {
+                        type: 'button',
+                        tabindex: '-1',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Optional grouping wrapper inside a `[forComboboxContent]`. Renders
+ * `role="group"` and references the descendant `[forComboboxGroupLabel]`
+ * (if any) via `aria-labelledby`. Options inside a group still register
+ * with the root listbox normally, so keyboard navigation traverses across
+ * groups in DOM order without special handling.
+ */
+class ForComboboxGroup {
+    #labelId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#labelId" }] : /* istanbul ignore next */ []));
+    /** The id of the registered group label (or `null` if none). */
+    labelId = this.#labelId.asReadonly();
+    /** Called by `ForComboboxGroupLabel` on mount. */
+    registerLabel(id) {
+        this.#labelId.set(id);
+    }
+    /** Called by `ForComboboxGroupLabel` on destroy. Idempotent. */
+    unregisterLabel(id) {
+        if (this.#labelId() === id) {
+            this.#labelId.set(null);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForComboboxGroup, isStandalone: true, selector: "[forComboboxGroup]", host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "labelId() || null" } }, exportAs: ["forComboboxGroup"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forComboboxGroup]',
+                    exportAs: 'forComboboxGroup',
+                    host: {
+                        role: 'group',
+                        '[attr.aria-labelledby]': 'labelId() || null',
+                    },
+                }]
+        }] });
+
+/**
+ * Visible label for a `[forComboboxGroup]`. Generates a stable id and
+ * registers with its parent group so the group's `aria-labelledby` points
+ * at this element.
+ */
+class ForComboboxGroupLabel {
+    /** Stable host id used by the parent group's `aria-labelledby`. */
+    id;
+    constructor() {
+        const group = inject(ForComboboxGroup, { optional: true });
+        if (!group) {
+            throw new Error('[forty-cdk/combobox] ForComboboxGroupLabel must be used inside a [forComboboxGroup] element.');
+        }
+        this.id = registerA11yName(group, 'for-combobox-group-label');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxGroupLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForComboboxGroupLabel, isStandalone: true, selector: "[forComboboxGroupLabel]", host: { properties: { "id": "id()" } }, exportAs: ["forComboboxGroupLabel"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxGroupLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forComboboxGroupLabel]',
+                    exportAs: 'forComboboxGroupLabel',
+                    host: {
+                        '[id]': 'id()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Decorative separator between options or groups inside a
+ * `[forComboboxContent]`. Carries `role="separator"` and is intentionally
+ * not registered with the listbox's option collection, so keyboard
+ * navigation skips it automatically.
+ */
+class ForComboboxSeparator {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForComboboxSeparator, isStandalone: true, selector: "[forComboboxSeparator]", host: { attributes: { "role": "separator", "aria-orientation": "horizontal" } }, exportAs: ["forComboboxSeparator"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForComboboxSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forComboboxSeparator]',
+                    exportAs: 'forComboboxSeparator',
+                    host: {
+                        role: 'separator',
+                        'aria-orientation': 'horizontal',
+                    },
+                }]
+        }] });
+
+/**
+ * Exact public names of every `ForCombobox` input, its models included. Spread it into the
+ * `inputs` array of a `hostDirectives` entry so a wrapper component re-exposes the
+ * primitive's full surface — the Signal Forms members `[formField]` binds among them —
+ * without hand-maintaining the list. Always spread into an inline object literal as shown
+ * below: the literal is what keeps the entry statically analyzable for consumers compiling
+ * against the published package. An anti-drift spec fails when this list no longer matches
+ * the directive's actual API. See `docs/wrapping-form-primitives.md` for both supported
+ * wrapping patterns.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   selector: 'div[myCombobox]',
+ *   template: '',
+ *   hostDirectives: [
+ *     {
+ *       directive: ForCombobox,
+ *       inputs: [...FOR_COMBOBOX_HOST_DIRECTIVE_INPUTS],
+ *       outputs: [...FOR_COMBOBOX_HOST_DIRECTIVE_OUTPUTS],
+ *     },
+ *   ],
+ * })
+ * export class MyCombobox {}
+ * ```
+ */
+const FOR_COMBOBOX_HOST_DIRECTIVE_INPUTS = [
+    'query',
+    'value',
+    'open',
+    'align',
+    'alignOffset',
+    'ariaLabel',
+    'arrowPadding',
+    'autoHighlight',
+    'autocompleteMode',
+    'avoidCollisions',
+    'clearOnQueryChange',
+    'clipUntilPositioned',
+    'collisionPadding',
+    'commitOnSelect',
+    'dir',
+    'dirty',
+    'disabled',
+    'dismissible',
+    'errors',
+    'hideWhenDetached',
+    'invalid',
+    'isItemEqualToValue',
+    'itemToFormValue',
+    'itemToStringLabel',
+    'loop',
+    'multiple',
+    'name',
+    'openOnFocus',
+    'openOnQuery',
+    'pending',
+    'readonly',
+    'required',
+    'returnFocus',
+    'side',
+    'sideOffset',
+    'sticky',
+    'totalCount',
+    'visibleRange',
+    'touched',
+];
+/**
+ * Exact public names of every `ForCombobox` output, the Signal Forms `touch` output
+ * included. Spread it into the `outputs` array of the same `hostDirectives` entry as
+ * {@link FOR_COMBOBOX_HOST_DIRECTIVE_INPUTS}.
+ */
+const FOR_COMBOBOX_HOST_DIRECTIVE_OUTPUTS = [
+    'queryChange',
+    'valueChange',
+    'openChange',
+    'scrollToIndex',
+    'escapeKeyDown',
+    'pointerDownOutside',
+    'focusOutside',
+    'interactOutside',
+    'autoFocusOnOpen',
+    'autoFocusOnClose',
+    'touchedChange',
+    'touch',
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FOR_COMBOBOX_CONTEXT, FOR_COMBOBOX_DEFAULTS, FOR_COMBOBOX_HOST_DIRECTIVE_INPUTS, FOR_COMBOBOX_HOST_DIRECTIVE_OUTPUTS, FOR_COMBOBOX_OPTION, ForCombobox, ForComboboxAnchor, ForComboboxChip, ForComboboxChipRemove, ForComboboxChips, ForComboboxClear, ForComboboxContent, ForComboboxEmpty, ForComboboxGroup, ForComboboxGroupLabel, ForComboboxIndicator, ForComboboxInput, ForComboboxList, ForComboboxOption, ForComboboxSeparator, ForComboboxStatus, ForComboboxTrigger, provideForComboboxDefaults };
+//# sourceMappingURL=forty-cdk-combobox.mjs.map