@cdevhub/ngx-tw 0.2.0

package/types/cdevhub-ngx-tw-code-block.d.ts

@@ -0,0 +1,93 @@
+import * as _angular_core from '@angular/core';
+
+/** Visual style of the code block container. */
+type CodeBlockVariant = 'filled' | 'outlined';
+/**
+ * Localizable strings used by the code block. Provide a partial override —
+ * any missing fields fall back to English defaults.
+ */
+interface CodeBlockLabels {
+    /** aria-label for the copy button in its resting state. Defaults to `'Copy code'`. */
+    copy?: string;
+    /** aria-label for the copy button after a successful copy. Defaults to `'Copied'`. */
+    copied?: string;
+    /** Text passed to LiveAnnouncer after a successful copy. Defaults to `'Copied to clipboard'`. */
+    announcement?: string;
+}
+/**
+ * Marker directive for projected header content (e.g. filename, secondary
+ * actions). Sits alongside the language label inside the code block's
+ * header row.
+ *
+ * @remarks
+ * The host class (`inline-flex items-center gap-2 min-w-0`) styles the
+ * projected element's *own* children — e.g. a filename `<span>` next to a
+ * "modified" badge — and is distinct from the library's `headerStart` slot
+ * wrapper that contains this element. The two carry overlapping utility names
+ * (`items-center gap-2 min-w-0`) because both lay out flex children, but they
+ * apply to different DOM nodes (parent slot vs the projected element itself)
+ * and serve different jobs (slot row geometry vs the consumer's badge group).
+ */
+declare class CodeBlockHeaderDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CodeBlockHeaderDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CodeBlockHeaderDirective, "[twCodeBlockHeader]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Code-display surface with copy-to-clipboard, optional language label, and a
+ * projection slot for filename / extra actions.
+ *
+ * @remarks
+ * **`role="region"` ownership.** The outer host is a presentational container —
+ * the inner `<pre tabindex="0" role="region" aria-label="...">` owns the
+ * scrollable-content region semantics that screen readers and AXE care about.
+ * Promoting the host to `role="region"` as well would double-announce the
+ * landmark; the `<pre>` is the focusable, keyboard-reachable target, so the
+ * region role belongs there. This matches APG guidance for scroll-region
+ * widgets and Material's `pre`-as-region pattern.
+ */
+declare class CodeBlockComponent {
+    /** The code string to display and copy to clipboard. */
+    readonly code: _angular_core.InputSignal<string>;
+    /** Optional language label displayed in the header (e.g. `'TypeScript'`, `'HTML'`). */
+    readonly language: _angular_core.InputSignal<string | undefined>;
+    /** Visual style of the container. Defaults to `'filled'`. */
+    readonly variant: _angular_core.InputSignal<CodeBlockVariant>;
+    /** When true, wraps long lines instead of horizontal scrolling. Defaults to `false`. */
+    readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Localizable strings for the copy button's aria-labels and the
+     * screen-reader announcement. Provide a partial override; missing fields
+     * fall back to English defaults.
+     */
+    readonly labels: _angular_core.InputSignal<CodeBlockLabels>;
+    /** Fires when code is successfully copied to clipboard. */
+    readonly copied: _angular_core.OutputEmitterRef<void>;
+    /** Fires when the clipboard copy fails (e.g. user denied permission, no clipboard API available). Payload is an `Error` describing the failure. */
+    readonly copyFailed: _angular_core.OutputEmitterRef<Error>;
+    /** Whether the copy-to-clipboard button is currently in its "copied" confirmation state. Two-way bindable via `[(isCopied)]`. Set to `true` for ~2s after a successful copy, then auto-resets to `false`. Defaults to `false`. */
+    readonly isCopied: _angular_core.ModelSignal<boolean>;
+    private readonly clipboard;
+    private readonly liveAnnouncer;
+    private readonly destroyRef;
+    private timeoutId;
+    protected readonly resolvedLabels: _angular_core.Signal<{
+        copy: string;
+        copied: string;
+        announcement: string;
+    }>;
+    private readonly variantResult;
+    protected readonly rootClasses: _angular_core.Signal<string>;
+    protected readonly headerClasses: _angular_core.Signal<string>;
+    protected readonly headerStartClasses: _angular_core.Signal<string>;
+    protected readonly preClasses: _angular_core.Signal<string>;
+    protected readonly copyButtonClasses: _angular_core.Signal<string>;
+    protected readonly copyIconClasses: _angular_core.Signal<string>;
+    protected readonly preAriaLabel: _angular_core.Signal<string>;
+    constructor();
+    protected copyToClipboard(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CodeBlockComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CodeBlockComponent, "tw-code-block", never, { "code": { "alias": "code"; "required": true; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "isCopied": { "alias": "isCopied"; "required": false; "isSignal": true; }; }, { "copied": "copied"; "copyFailed": "copyFailed"; "isCopied": "isCopiedChange"; }, never, ["[twCodeBlockHeader]"], true, never>;
+}
+
+export { CodeBlockComponent, CodeBlockHeaderDirective };
+export type { CodeBlockLabels, CodeBlockVariant };

package/types/cdevhub-ngx-tw-collapsible.d.ts

@@ -0,0 +1,151 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+import { FocusableOption } from '@angular/cdk/a11y';
+import { TwColor, TwSize } from '@cdevhub/ngx-tw/core';
+
+/** Visual style of the collapsible container. */
+type CollapsibleVariant = 'default' | 'bordered' | 'ghost' | 'filled';
+/** Decorative axes bundled into a single collapsible input. */
+interface CollapsibleDisplay {
+    /** Visual style of the panel container. Defaults to `'default'`. */
+    variant?: CollapsibleVariant;
+    /** Semantic color; applies to the `bordered` and `filled` variants. Defaults to `'neutral'`. */
+    color?: TwColor;
+    /** Padding scale for the trigger and content sections. Defaults to `'md'`. */
+    size?: TwSize;
+}
+declare class CollapsibleIconDirective {
+    private readonly collapsible;
+    /** @internal */
+    readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CollapsibleIconDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CollapsibleIconDirective, "[twCollapsibleIcon]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Marks the toggle element inside a `<tw-collapsible>`. Apply this to a
+ * native `<button>`; the directive wires up ARIA, keyboard handling, and
+ * focus management. Custom hosts (e.g. `<div>`) are not supported.
+ */
+declare class CollapsibleTriggerDirective implements FocusableOption {
+    /** @internal */
+    readonly collapsible: CollapsibleComponent;
+    readonly elementRef: ElementRef<any>;
+    /** @internal */
+    readonly classes: _angular_core.Signal<string>;
+    /** @internal */
+    readonly iconClasses: _angular_core.Signal<string>;
+    onClick(): void;
+    onKeydown(event: KeyboardEvent): void;
+    focus(): void;
+    /** @internal FocusableOption: lets FocusKeyManager skip disabled triggers. */
+    get disabled(): boolean;
+    /** @internal FocusableOption: text label for typeahead navigation. */
+    getLabel(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CollapsibleTriggerDirective, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CollapsibleTriggerDirective, "[twCollapsibleTrigger]", never, {}, {}, never, ["*"], true, never>;
+}
+declare class CollapsibleComponent {
+    /** Unique identifier for this panel. Required when used inside a group. */
+    readonly value: _angular_core.InputSignal<string>;
+    /** Bundles decorative axes: `variant`, `color`, `size`. Accepts a partial; unset keys fall back to the defaults (`{ variant: 'default', color: 'neutral', size: 'md' }`). */
+    readonly display: _angular_core.InputSignal<CollapsibleDisplay>;
+    /** When true, the panel cannot be toggled and appears dimmed. Defaults to `false`. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** When true, content is rendered on first open and kept in the DOM across toggles. Defaults to `false`. */
+    readonly keepAlive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the panel is expanded. Two-way bindable. Defaults to `false`. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Fires after the panel is toggled. Payload is the new open state. */
+    readonly toggled: _angular_core.OutputEmitterRef<boolean>;
+    /** @internal */
+    readonly group: CollapsibleGroupComponent | null;
+    private readonly liveAnnouncer;
+    /** @internal */
+    readonly customIcon: _angular_core.Signal<CollapsibleIconDirective | undefined>;
+    private readonly componentId;
+    readonly triggerId: string;
+    readonly panelId: string;
+    /**
+     * @internal Tracks whether the panel has been opened at least once (for keepAlive mode).
+     *
+     * Latches to `true` the first time `open` is `true` and stays `true` for the
+     * lifetime of the component. Implemented as a `linkedSignal` so the derivation
+     * lives next to the source — `activated()` reads cleanly as "derived from open".
+     */
+    readonly activated: _angular_core.WritableSignal<boolean>;
+    /** @internal Resolved decorative configuration. */
+    readonly resolvedDisplay: _angular_core.Signal<Required<CollapsibleDisplay>>;
+    private readonly variantResult;
+    readonly rootClasses: _angular_core.Signal<string>;
+    readonly triggerClasses: _angular_core.Signal<string>;
+    readonly iconClasses: _angular_core.Signal<string>;
+    readonly contentClasses: _angular_core.Signal<string>;
+    readonly contentWrapperClasses: _angular_core.Signal<string>;
+    /** @internal Toggle the open state. Called by the trigger directive. */
+    toggle(): void;
+    /** @internal Set the open state programmatically (used by group). */
+    setOpen(value: boolean): void;
+    /** @internal */
+    announceState(isOpen: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CollapsibleComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CollapsibleComponent, "tw-collapsible", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "keepAlive": { "alias": "keepAlive"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "toggled": "toggled"; }, ["customIcon"], ["[twCollapsibleTrigger]", "*"], true, never>;
+}
+declare class CollapsibleGroupComponent {
+    /**
+     * When true, only one panel can be open at a time.
+     *
+     * `AccordionComponent` (subclass) ignores this input and drives the same
+     * behaviour from its own `type` input via the `isAccordionMode()` /
+     * `canCollapseSingleMode()` virtual hooks below. Consumers using
+     * `<tw-collapsible-group>` directly should bind this input; consumers using
+     * `<tw-accordion>` should bind `type="single"` / `type="multiple"` instead.
+     *
+     * Defaults to `false`.
+     */
+    readonly accordion: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The value(s) of currently open panels. String in accordion mode, string array in independent mode. `null` when no panel is open in accordion mode. Two-way bindable. Defaults to `null`. */
+    readonly value: _angular_core.ModelSignal<string | string[] | null>;
+    /**
+     * @internal Wrapper `role` attribute. Subclasses may override (e.g.
+     * `AccordionComponent` returns `null` per APG — accordions don't carry
+     * `role="group"`).
+     */
+    readonly hostRole: _angular_core.Signal<string | null>;
+    /**
+     * @internal Host class string. Subclasses may override to provide their own
+     * variant-driven string (e.g. `AccordionComponent.rootClasses`).
+     */
+    readonly hostClasses: _angular_core.Signal<string>;
+    /** @internal */
+    readonly items: _angular_core.Signal<readonly CollapsibleComponent[]>;
+    /** @internal */
+    readonly triggers: _angular_core.Signal<readonly CollapsibleTriggerDirective[]>;
+    private keyManager;
+    /**
+     * @internal Whether the group is in single-open-panel mode.
+     *
+     * Subclasses override to bridge their own input surface (e.g. `AccordionComponent`
+     * returns `this.type() === 'single'`). All internal toggle/sync/warn logic reads
+     * the mode through this hook, never `accordion()` directly — that lets the
+     * subclass drive mode from `type` without redeclaring the parent's signal input.
+     */
+    protected isAccordionMode(): boolean;
+    /**
+     * @internal Whether re-clicking the open panel in single mode closes it.
+     *
+     * Defaults to `true` for the bare group component (re-clicking always closes).
+     * `AccordionComponent` overrides to honour its `collapsible` opt-out input.
+     */
+    protected canCollapseSingleMode(): boolean;
+    constructor();
+    private syncChildrenFromValue;
+    /** @internal Called by a child collapsible when it is toggled. */
+    toggleItem(item: CollapsibleComponent): void;
+    /** @internal Handle keyboard navigation within the group. */
+    onTriggerKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CollapsibleGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CollapsibleGroupComponent, "tw-collapsible-group", never, { "accordion": { "alias": "accordion"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["items", "triggers"], ["*"], true, never>;
+}
+
+export { CollapsibleComponent, CollapsibleGroupComponent, CollapsibleIconDirective, CollapsibleTriggerDirective };
+export type { CollapsibleDisplay, CollapsibleVariant };

package/types/cdevhub-ngx-tw-combobox.d.ts

@@ -0,0 +1,389 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, Signal, TemplateRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { TwSize, TwColor, ErrorStateMatcher } from '@cdevhub/ngx-tw/core';
+import { FormFieldControl } from '@cdevhub/ngx-tw/form-field';
+
+/** Canonical option shape for `tw-combobox`. Consumers using arbitrary records override the accessor inputs instead. */
+interface TwComboboxOption<T> {
+    /** Visible label. Used by the default filter and trigger render. */
+    label: string;
+    /** Value emitted via `valueCommit` / `optionSelected` when this option is picked. */
+    value: T;
+    /** When true, the option cannot be highlighted, selected, or matched by the resolver. */
+    disabled?: boolean;
+    /** Optional group label. Options sharing a group render under a labelled `role="group"` region. */
+    group?: string;
+    /** Optional secondary description rendered under the label in the default option row. */
+    description?: string;
+}
+/** Discriminator for the origin of a `valueCommit` emission. */
+type TwComboboxValueSource = 'option' | 'free-text' | 'reset' | 'programmatic';
+/** Filter callback applied to `options` whenever `inputValue` changes. Return `true` to keep the option visible. */
+type TwComboboxFilterFn = (option: unknown, query: string) => boolean;
+/** Payload of the `optionSelected` output. */
+interface TwComboboxOptionSelectedEvent<T> {
+    /** The raw option object (or arbitrary record when accessors are overridden). */
+    option: unknown;
+    /** Resolved value from `optionValue`. */
+    value: T;
+    /** Resolved label from `optionLabel`. */
+    label: string;
+}
+/** Payload of the `valueCommit` output. Distinguishes selection / free-text / reset / programmatic. */
+interface TwComboboxValueCommitEvent<T> {
+    /** The committed value. */
+    value: T | string | null;
+    /** What triggered the commit. */
+    source: TwComboboxValueSource;
+}
+/** Payload of the `openedChange` output. */
+interface TwComboboxOpenedEvent {
+    /** Whether the popover is now open. */
+    open: boolean;
+    /** The combobox input element. */
+    trigger: HTMLElement;
+}
+/** Template context passed to `*twComboboxOption` consumer templates. */
+interface TwComboboxOptionContext<T, O = TwComboboxOption<T>> {
+    /** Raw option object (or arbitrary record). */
+    $implicit: O;
+    /** Same as `$implicit`, named for clarity. */
+    option: O;
+    /** Resolved label. */
+    label: string;
+    /** Resolved value. */
+    value: T;
+    /** Whether this option is the currently committed selection. */
+    selected: boolean;
+    /** Whether this option is the active descendant (keyboard highlight). */
+    active: boolean;
+    /** Whether this option is disabled. */
+    disabled: boolean;
+    /** Index within the visible (filtered) options. */
+    index: number;
+}
+/** Internal: resolved option view pairing the raw option with its derived fields. */
+interface ComboboxVisibleOption<T> {
+    readonly option: unknown;
+    readonly label: string;
+    readonly value: T;
+    readonly disabled: boolean;
+    readonly group?: string;
+    readonly description?: string;
+}
+/** Internal rendered-row discriminated union — either a group header or an option row. */
+type ComboboxRenderedRow<T> = {
+    readonly kind: 'group';
+    readonly group: string;
+} | {
+    readonly kind: 'option';
+    readonly option: ComboboxVisibleOption<T>;
+    readonly index: number;
+};
+
+/** Structural directive projecting a custom template for each option row. Context: `TwComboboxOptionContext<T>`. */
+declare class ComboboxOptionTemplateDirective<T = unknown, O = unknown> {
+    /** @internal */
+    readonly templateRef: TemplateRef<any>;
+    /** @internal */
+    static ngTemplateContextGuard<T, O>(_dir: ComboboxOptionTemplateDirective<T, O>, _ctx: unknown): _ctx is TwComboboxOptionContext<T, O>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxOptionTemplateDirective<any, any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ComboboxOptionTemplateDirective<any, any>, "[twComboboxOption]", never, {}, {}, never, never, true, never>;
+}
+/** Structural directive projecting a custom template for the empty-results state. Context: `{ $implicit: query }`. */
+declare class ComboboxEmptyTemplateDirective {
+    /** @internal */
+    readonly templateRef: TemplateRef<any>;
+    /** @internal */
+    static ngTemplateContextGuard(_dir: ComboboxEmptyTemplateDirective, _ctx: unknown): _ctx is {
+        $implicit: string;
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxEmptyTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ComboboxEmptyTemplateDirective, "[twComboboxEmpty]", never, {}, {}, never, never, true, never>;
+}
+/** Structural directive projecting a custom template above the list while `loading=true`. */
+declare class ComboboxLoadingTemplateDirective {
+    /** @internal */
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxLoadingTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ComboboxLoadingTemplateDirective, "[twComboboxLoading]", never, {}, {}, never, never, true, never>;
+}
+/** Attribute directive marking a leading adornment projected inside the input row. */
+declare class ComboboxPrefixDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxPrefixDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ComboboxPrefixDirective, "[twComboboxPrefix]", never, {}, {}, never, never, true, never>;
+}
+/** Attribute directive marking a trailing adornment projected inside the input row, before the clear button. */
+declare class ComboboxSuffixDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxSuffixDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ComboboxSuffixDirective, "[twComboboxSuffix]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Editable single-select typeahead form control. Follows the WAI-ARIA 1.2
+ * combobox + listbox pattern with `aria-activedescendant` (DOM focus stays
+ * on the `<input>`). Supports local filtering, async result streams via
+ * `queryChange`, grouped options, strict and free-text modes, and full
+ * integration with template-driven, reactive, and signal forms plus
+ * `tw-form-field`.
+ */
+declare class ComboboxComponent<T = unknown> implements ControlValueAccessor, FormFieldControl<T | string | null>, OnInit {
+    /** Array of options to render in the popover. Accepts plain records or `TwComboboxOption<T>`. */
+    readonly options: _angular_core.InputSignal<readonly unknown[]>;
+    /** Accessor returning the visible label for an option. Used by the default filter and the trigger label resolver. */
+    readonly optionLabel: _angular_core.InputSignal<(option: unknown) => string>;
+    /** Accessor returning the value emitted via `valueCommit` when this option is picked. */
+    readonly optionValue: _angular_core.InputSignal<(option: unknown) => T>;
+    /** Accessor returning whether an option is non-interactive. */
+    readonly optionDisabled: _angular_core.InputSignal<(option: unknown) => boolean>;
+    /** Accessor returning a group label. Options sharing a group render under a labelled `role="group"` region. */
+    readonly optionGroup: _angular_core.InputSignal<(option: unknown) => string | undefined>;
+    /** Accessor returning an optional secondary description rendered under the label in the default option row. */
+    readonly optionDescription: _angular_core.InputSignal<(option: unknown) => string | undefined>;
+    /** Filter function applied client-side whenever `inputValue` changes. Pass `null` to disable client filtering (async mode). Defaults to case-insensitive `startsWith` on the label. */
+    readonly filterFn: _angular_core.InputSignal<((option: unknown, query: string) => boolean) | null>;
+    /** When `true`, free-text commits are rejected — the input reverts to the last committed label on blur. */
+    readonly strict: _angular_core.InputSignal<boolean>;
+    /** Placeholder shown when the input is empty. */
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    /** Disables the input and prevents the popover from opening. */
+    readonly disabledInput: _angular_core.InputSignal<boolean>;
+    /** Sets `aria-required="true"` on the input. */
+    readonly requiredInput: _angular_core.InputSignal<boolean>;
+    /** Controls trigger padding and font size per the inline padding scale. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    /** Semantic color for the focus ring. */
+    readonly color: _angular_core.InputSignal<TwColor>;
+    /** Whether the trailing chevron affordance is rendered. */
+    readonly showChevron: _angular_core.InputSignal<boolean>;
+    /** Whether the inline clear (×) button appears while `inputValue` is non-empty. */
+    readonly clearable: _angular_core.InputSignal<boolean>;
+    /** When `true`, shows an in-popover spinner and an inline spinner in the trigger while the popover is open. */
+    readonly loading: _angular_core.InputSignal<boolean>;
+    /** Debounce window (ms) before `queryChange` emits. Local filtering is not debounced. */
+    readonly queryDebounce: _angular_core.InputSignal<number>;
+    /** Minimum query length before the popover opens automatically. `0` opens on focus. */
+    readonly minQueryLength: _angular_core.InputSignal<number>;
+    /** Whether the popover opens automatically when the input receives focus. */
+    readonly openOnFocus: _angular_core.InputSignal<boolean>;
+    /** Maximum height (px) of the popover scroll region. */
+    readonly panelMaxHeight: _angular_core.InputSignal<number>;
+    /** Overlay width strategy. `'trigger'` matches input width; `'auto'` lets content decide; a number is applied as px; a string is passed as a CSS length. */
+    readonly panelWidth: _angular_core.InputSignal<string | number>;
+    /** Extra class(es) appended to the overlay panel for consumer customization. */
+    readonly panelClass: _angular_core.InputSignal<string | readonly string[]>;
+    /** CDK overlay scroll strategy. */
+    readonly scrollStrategy: _angular_core.InputSignal<"reposition" | "close" | "block">;
+    /** Pixel offset between the input and the popover. */
+    readonly offset: _angular_core.InputSignal<number>;
+    /** Fallback empty-state message when no `*twComboboxEmpty` template is projected. */
+    readonly emptyMessage: _angular_core.InputSignal<string>;
+    /** Equality comparator used to reconcile `value` with options during `writeValue`. */
+    readonly compareWith: _angular_core.InputSignal<(a: T, b: T) => boolean>;
+    /** Accessible name for the combobox input. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** ID of an external label element. */
+    readonly ariaLabelledby: _angular_core.InputSignal<string | undefined>;
+    /** ID of an external descriptor element. */
+    readonly ariaDescribedby: _angular_core.InputSignal<string | undefined>;
+    /** Per-instance override of the {@link ErrorStateMatcher}. When omitted, the combobox uses the `TW_ERROR_STATE_MATCHER` token's value. */
+    readonly errorStateMatcher: _angular_core.InputSignal<ErrorStateMatcher | undefined>;
+    /** Two-way bound committed value. May be an option's value (`T`), a typed string (free-text mode), or `null`. */
+    readonly value: _angular_core.ModelSignal<string | T | null>;
+    /** Two-way bound visible text in the input. Bound separately from `value` so async consumers can drive the query. */
+    readonly inputValue: _angular_core.ModelSignal<string>;
+    /** Two-way bound open state of the popover. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Fires after the query text changes, debounced by `queryDebounce`. Async-mode consumers subscribe to this to fetch results. */
+    readonly queryChange: _angular_core.OutputEmitterRef<string>;
+    /** Fires when the user picks an option from the list (not on free-text commit). */
+    readonly optionSelected: _angular_core.OutputEmitterRef<TwComboboxOptionSelectedEvent<T>>;
+    /** Fires whenever `value` changes, with a `source` discriminator distinguishing option / free-text / reset / programmatic origin. */
+    readonly valueCommit: _angular_core.OutputEmitterRef<TwComboboxValueCommitEvent<T>>;
+    /** Fires when the popover opens or closes. */
+    readonly openedChange: _angular_core.OutputEmitterRef<TwComboboxOpenedEvent>;
+    /** @internal */
+    readonly optionTemplateChild: Signal<ComboboxOptionTemplateDirective<any, any> | undefined>;
+    /** @internal */
+    readonly emptyTemplateChild: Signal<ComboboxEmptyTemplateDirective | undefined>;
+    /** @internal */
+    readonly loadingTemplateChild: Signal<ComboboxLoadingTemplateDirective | undefined>;
+    private readonly inputRef;
+    private readonly triggerSurfaceRef;
+    private readonly overlayService;
+    private readonly elementRef;
+    private readonly viewContainerRef;
+    private readonly injector;
+    private readonly destroyRef;
+    private readonly focusMonitor;
+    private readonly liveAnnouncer;
+    private readonly platform;
+    private readonly formField;
+    private readonly ngControl;
+    private readonly parentForm;
+    private readonly parentFormGroup;
+    private readonly defaultMatcher;
+    private readonly uid;
+    /** @internal */
+    readonly hostId: string;
+    /** @internal */
+    readonly listboxId: string;
+    /** @internal */
+    readonly optionId: (index: number) => string;
+    /** @internal */
+    readonly groupHeaderId: (group: string) => string;
+    /** @internal */
+    readonly composing: _angular_core.WritableSignal<boolean>;
+    /** @internal */
+    readonly focusedSignal: _angular_core.WritableSignal<boolean>;
+    private readonly cvaDisabled;
+    private readonly _ngControlRev;
+    private readonly _formSubmitRev;
+    private readonly describedByIdsSignal;
+    private readonly labelledByIdsSignal;
+    /** @internal */
+    readonly lastCommittedLabel: _angular_core.WritableSignal<string>;
+    private readonly pendingWriteValue;
+    private readonly closingSignal;
+    /** Re-runs the input handler once after IME composition ends. */
+    private composingPendingValue;
+    private onChange;
+    private onTouched;
+    private overlayRef;
+    private readonly overlayInstanceSignal;
+    private closeTimer;
+    private queryDebounceTimer;
+    private announceTimer;
+    private resizeObserver;
+    private get overlayInstance();
+    /** @internal */
+    readonly isDisabled: Signal<boolean>;
+    /** @internal Auto-naked when wrapped in tw-form-field. */
+    readonly naked: Signal<boolean>;
+    /** @internal Resolved visible options (after filter, with derived view fields). */
+    readonly visibleOptions: Signal<readonly ComboboxVisibleOption<T>[]>;
+    /** @internal Rendered rows (group headers + option rows). */
+    readonly renderedRows: Signal<readonly ComboboxRenderedRow<T>[]>;
+    /** Returns the index of the first enabled option, or -1 when none. */
+    private firstEnabledIndex;
+    /** Returns the index of the last enabled option, or -1 when none. */
+    private lastEnabledIndex;
+    /** @internal Active descendant index, resets to the first enabled when the visible list changes. */
+    readonly activeIndex: _angular_core.WritableSignal<number>;
+    /** @internal */
+    readonly activeOption: Signal<ComboboxVisibleOption<T> | null>;
+    /** @internal */
+    readonly activeOptionId: Signal<string | null>;
+    /** @internal */
+    readonly isEmpty: Signal<boolean>;
+    /** @internal */
+    readonly showClearButton: Signal<boolean>;
+    /** @internal */
+    readonly showSpinner: Signal<boolean>;
+    /** @internal */
+    readonly resolvedDescribedBy: Signal<string>;
+    /** @internal */
+    readonly resolvedLabelledBy: Signal<string>;
+    /** @internal Error-state per the configured `ErrorStateMatcher`. Reads the bound `NgControl.invalid` through the matcher. */
+    readonly errorState: Signal<boolean>;
+    private readonly variantResult;
+    /** @internal */
+    readonly rootClasses: Signal<string>;
+    /** @internal */
+    readonly triggerClasses: Signal<string>;
+    /** @internal */
+    readonly inputClasses: Signal<string>;
+    /** @internal */
+    readonly clearButtonClasses: Signal<string>;
+    /** @internal */
+    readonly chevronClasses: Signal<string>;
+    /** @internal */
+    readonly spinnerClasses: Signal<string>;
+    /** @internal */
+    readonly id: Signal<string>;
+    /** @internal */
+    readonly focused: Signal<boolean>;
+    /** @internal */
+    readonly empty: Signal<boolean>;
+    /** @internal */
+    readonly disabled: Signal<boolean>;
+    /** @internal */
+    readonly required: Signal<boolean>;
+    /** @internal */
+    readonly controlType = "combobox";
+    /** @internal */
+    readonly userAriaDescribedBy: Signal<string | undefined>;
+    /** @internal */
+    readonly userAriaLabelledby: Signal<string | undefined>;
+    constructor();
+    /** Opens the popover. No-op when disabled or already open. */
+    openPanel(): void;
+    /** Closes the popover. No-op when already closed. */
+    closePanel(): void;
+    /** Programmatically focuses the input. */
+    focus(): void;
+    /** @internal */
+    isVisibleOptionSelected(index: number): boolean;
+    /** @internal */
+    onInput(event: Event): void;
+    /** @internal */
+    onCompositionStart(): void;
+    /** @internal */
+    onCompositionEnd(event: CompositionEvent): void;
+    /** @internal */
+    onFocus(): void;
+    /** @internal */
+    onBlur(): void;
+    /** @internal */
+    onKeydown(event: KeyboardEvent): void;
+    /** @internal — preventDefault to keep DOM focus on the input. */
+    onClearMousedown(event: MouseEvent): void;
+    /** @internal */
+    onClearClick(event: MouseEvent): void;
+    /** Clears the input and committed value, emitting `valueCommit({ source: 'reset' })`. */
+    clear(): void;
+    private moveActive;
+    private moveActiveTo;
+    private scrollActiveIntoView;
+    /** @internal */
+    commit(source: 'enter' | 'blur' | 'tab'): void;
+    /** @internal */
+    commitOption(option: ComboboxVisibleOption<T>, source: 'option'): void;
+    private scheduleQueryEmit;
+    private clearQueryDebounceTimer;
+    private clearAnnounceTimer;
+    private openOverlay;
+    private closeOverlay;
+    private ensureOverlay;
+    private installResizeObserver;
+    private updateOverlaySize;
+    private attachOverlayComponent;
+    private subscribeBackdrop;
+    /**
+     * Listens for `Escape` on the overlay's `keydownEvents()`. Mirrors
+     * `SelectComponent` so focus inside the overlay panel (e.g., if the user
+     * tabs into projected loading/empty templates) still dismisses cleanly.
+     * The combobox's own `<input>` keydown handler already short-circuits
+     * Escape when focus is on the input; this layer is the safety net for
+     * panel-internal focus.
+     */
+    private subscribeOverlayEscape;
+    private resolvePanelClass;
+    private clearCloseTimer;
+    writeValue(value: T | string | null): void;
+    registerOnChange(fn: (value: T | string | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /** @internal */
+    setDescribedByIds(ids: string[]): void;
+    /** @internal */
+    setLabelledByIds(ids: string[]): void;
+    /** @internal */
+    onContainerClick(_event: MouseEvent): void;
+    ngOnInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComboboxComponent<any>, "tw-combobox", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "optionGroup": { "alias": "optionGroup"; "required": false; "isSignal": true; }; "optionDescription": { "alias": "optionDescription"; "required": false; "isSignal": true; }; "filterFn": { "alias": "filterFn"; "required": false; "isSignal": true; }; "strict": { "alias": "strict"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "requiredInput": { "alias": "required"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "showChevron": { "alias": "showChevron"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "queryDebounce": { "alias": "queryDebounce"; "required": false; "isSignal": true; }; "minQueryLength": { "alias": "minQueryLength"; "required": false; "isSignal": true; }; "openOnFocus": { "alias": "openOnFocus"; "required": false; "isSignal": true; }; "panelMaxHeight": { "alias": "panelMaxHeight"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "scrollStrategy": { "alias": "scrollStrategy"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "inputValue": { "alias": "inputValue"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "inputValue": "inputValueChange"; "open": "openChange"; "queryChange": "queryChange"; "optionSelected": "optionSelected"; "valueCommit": "valueCommit"; "openedChange": "openedChange"; }, ["optionTemplateChild", "emptyTemplateChild", "loadingTemplateChild"], ["[twComboboxPrefix]", "[twComboboxSuffix]", "*"], true, never>;
+}
+
+export { ComboboxComponent, ComboboxEmptyTemplateDirective, ComboboxLoadingTemplateDirective, ComboboxOptionTemplateDirective, ComboboxPrefixDirective, ComboboxSuffixDirective };
+export type { TwComboboxFilterFn, TwComboboxOpenedEvent, TwComboboxOption, TwComboboxOptionContext, TwComboboxOptionSelectedEvent, TwComboboxValueCommitEvent, TwComboboxValueSource };