@cdevhub/ngx-tw 0.2.1 → 0.4.0

package/types/cdevhub-ngx-tw-form-field.d.ts

@@ -52,6 +52,25 @@ declare abstract class FormFieldControl<T = unknown> {
  * `providers: [{ provide: TW_FORM_FIELD_CONTROL, useExisting: MyControl }]`.
  */
 declare const TW_FORM_FIELD_CONTROL: InjectionToken<FormFieldControl<unknown>>;
+/**
+ * Minimal surface a wrapped control reads from its surrounding form-field —
+ * presence (via optional injection) plus whether a label is projected — without
+ * depending on the concrete {@link FormFieldComponent}. Controls inject
+ * {@link TW_FORM_FIELD} typed as this interface so detecting a parent form-field
+ * never pins the heavier component class into the control's own bundle.
+ */
+interface TwFormFieldParent {
+    /** Whether a `twLabel` element is projected into the form-field. */
+    readonly hasLabel: Signal<boolean>;
+}
+/**
+ * Injection token exposing the wrapping {@link TwFormFieldParent}. The
+ * {@link FormFieldComponent} provides itself under this token; controls inject
+ * it with `{ optional: true }` to detect (and read label state from) a parent
+ * `tw-form-field` without referencing the concrete component class — keeping the
+ * form-field component out of each control's bundle.
+ */
+declare const TW_FORM_FIELD: InjectionToken<TwFormFieldParent>;
 declare class LabelDirective {
     private readonly formField;
     private readonly elementRef;
@@ -119,7 +138,7 @@ declare class SuffixIconDirective extends SuffixDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<SuffixIconDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<SuffixIconDirective, "[twSuffixIcon]", never, {}, {}, never, never, true, never>;
 }
-declare class FormFieldComponent implements AfterContentInit {
+declare class FormFieldComponent implements AfterContentInit, TwFormFieldParent {
     /** Visual appearance of the field container. `'outline'` draws a full border around the control; `'filled'` uses a filled surface with a bottom border. Defaults to `'outline'`. */
     readonly appearance: i0.InputSignal<FormFieldAppearance>;
     /** Density of the field container. Maps to the inline-padding scale (`px-2 py-1` xs … `px-5 py-3` xl) and the floating-label font scale. Defaults to `'md'`. */
@@ -206,5 +225,5 @@ declare class FormFieldComponent implements AfterContentInit {
     static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldComponent, "tw-form-field", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; "isSignal": true; }; "hideRequiredMarker": { "alias": "hideRequiredMarker"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "hintAlign": { "alias": "hintAlign"; "required": false; "isSignal": true; }; }, {}, ["control", "labelChild", "hintChildren", "errorChildren", "prefixChildren"], ["[twPrefix]", "[twPrefixIcon]", "*", "[twSuffix]", "[twSuffixIcon]", "[twLabel]", "[twError]", "[twHint]"], true, never>;
 }
 
-export { ErrorDirective, FormFieldComponent, FormFieldControl, HintDirective, LabelDirective, PrefixDirective, PrefixIconDirective, SuffixDirective, SuffixIconDirective, TW_FORM_FIELD_CONTROL };
-export type { FloatLabel, FormFieldAppearance, SubscriptSizing };
+export { ErrorDirective, FormFieldComponent, FormFieldControl, HintDirective, LabelDirective, PrefixDirective, PrefixIconDirective, SuffixDirective, SuffixIconDirective, TW_FORM_FIELD, TW_FORM_FIELD_CONTROL };
+export type { FloatLabel, FormFieldAppearance, SubscriptSizing, TwFormFieldParent };

package/types/cdevhub-ngx-tw-icon-lucide.d.ts

@@ -1,11 +1,28 @@
 import { Provider } from '@angular/core';
-import { LucideIconData, LucideIcons } from 'lucide-angular';
 import { TwIconData } from '@cdevhub/ngx-tw/icon';
 
+/**
+ * A single Lucide SVG element: `[tagName, attributes]`.
+ *
+ * Declared structurally rather than imported from a Lucide package on purpose.
+ * An `import type … from 'lucide'` here would be emitted into the published
+ * `.d.ts`, making a package this library does not depend on a hard requirement
+ * for anyone who merely *type-checks* against this entry point. Declaring the
+ * shape locally keeps the entry point dependency-free and lets it accept icons
+ * from `lucide`, `lucide-angular`, or any other source with the same shape.
+ */
+type LucideIconNode = readonly [
+    tag: string,
+    attrs: Record<string, string | number | undefined>
+];
+/** Icon data as Lucide emits it: the SVG child elements, without the `<svg>` wrapper. */
+type LucideIconData = readonly LucideIconNode[];
+/** A map of PascalCase icon names to Lucide icon data, as produced by `import { Star } from 'lucide'`. */
+type LucideIcons = Readonly<Record<string, LucideIconData>>;
 /**
  * Converts a single Lucide icon to the generic `TwIconData` format.
  *
- * Lucide's `LucideIconData` is structurally identical to `TwIconData`.
+ * Lucide's icon data is structurally identical to `TwIconData`.
  * This function exists for type-level conversion and explicit intent.
  */
 declare function fromLucideIcon(icon: LucideIconData): TwIconData;
@@ -17,7 +34,7 @@ declare function fromLucideIcon(icon: LucideIconData): TwIconData;
  * @example
  * ```ts
  * import { provideTwLucideIcons } from '@cdevhub/ngx-tw/icon/lucide';
- * import { ChevronRight, Star, Check } from 'lucide-angular';
+ * import { ChevronRight, Star, Check } from 'lucide';
  *
  * export const appConfig = {
  *   providers: [provideTwLucideIcons({ ChevronRight, Star, Check })]
@@ -27,3 +44,4 @@ declare function fromLucideIcon(icon: LucideIconData): TwIconData;
 declare function provideTwLucideIcons(icons: LucideIcons): Provider[];
 
 export { fromLucideIcon, provideTwLucideIcons };
+export type { LucideIconData, LucideIconNode, LucideIcons };

package/types/cdevhub-ngx-tw-number-input.d.ts

@@ -0,0 +1,130 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { TwSize } from '@cdevhub/ngx-tw/core';
+
+/**
+ * Turns a plain `<input twInput twNumberInput>` into a robust numeric field
+ * without `type="number"` — fixing the broken-on-mobile, browser-inconsistent
+ * native control. It composes the sibling {@link InputDirective}: that directive
+ * keeps owning the form-field chrome, error-state, and `aria-invalid` /
+ * `aria-required`, while this directive owns the numeric value transport,
+ * locale-aware parse/format, spinbutton ARIA, `inputmode`, and keyboard stepping.
+ *
+ * Pair it with the companion `<tw-number-stepper [for]="ref">` for visible
+ * up/down spinner buttons.
+ *
+ * Forms: implements `ControlValueAccessor`, so the value round-trips as a real
+ * `number | null` (never a string) through template-driven, reactive, and
+ * signal-based forms.
+ */
+declare class NumberInputDirective implements ControlValueAccessor {
+    private readonly el;
+    /** Smallest accepted value. Clamps the committed value (on blur, Enter, and stepping) and sets `aria-valuemin`. Does not clamp per keystroke. Defaults to `undefined` (no lower bound). */
+    readonly min: _angular_core.InputSignal<number | undefined>;
+    /** Largest accepted value. Clamps the committed value (on blur, Enter, and stepping) and sets `aria-valuemax`. Does not clamp per keystroke. Defaults to `undefined` (no upper bound). */
+    readonly max: _angular_core.InputSignal<number | undefined>;
+    /** Amount added or subtracted by ArrowUp/ArrowDown and the stepper buttons. Defaults to `1`. Values `<= 0` or non-finite fall back to `1`. */
+    readonly step: _angular_core.InputSignal<number>;
+    /** `Intl.NumberFormat` options driving the blurred display (grouping, decimals, currency). The formatter's resolved `maximumFractionDigits` also sets commit-time rounding precision and switches `inputmode` to `'numeric'` when it is `0`. Percent style is not supported in v1. Defaults to `undefined` (locale default number formatting, grouping on). */
+    readonly format: _angular_core.InputSignal<Intl.NumberFormatOptions | undefined>;
+    /** BCP-47 locale for `Intl.NumberFormat` formatting and for locale-aware parsing (decimal and group separators). Defaults to `undefined` (the runtime default locale). */
+    readonly locale: _angular_core.InputSignal<string | undefined>;
+    /** Fires when the committed numeric value changes through user interaction (typing, stepping, clamping on blur/Enter). Does not fire on `writeValue` (programmatic form writes). Useful for non-form / template-ref usage alongside the `value` signal. */
+    readonly valueChange: _angular_core.OutputEmitterRef<number | null>;
+    private readonly _value;
+    private readonly cvaDisabled;
+    private readonly readonlySig;
+    /** The current committed numeric value, or `null` when empty / unparseable. Read this from a template ref (`#n="twNumberInput"`) for non-form usage. */
+    readonly value: _angular_core.Signal<number | null>;
+    /** @internal Formatted display text surfaced through `TW_INPUT_VALUE_ACCESSOR` so the sibling InputDirective's empty / float-label state tracks the text in the box (not the numeric model). Updated on every field mutation. */
+    readonly displayText: _angular_core.WritableSignal<string>;
+    /** True when the control is disabled. Reactively tracks the reactive-forms path (`setDisabledState` via `control.disable()`) and a static `disabled` attribute read at mount. A runtime-toggled declarative `[disabled]` binding without reactive forms is NOT reactively tracked (v2 limitation — same class as `readonly`). Read by the companion stepper so its buttons disable in lock-step. */
+    readonly disabled: _angular_core.Signal<boolean>;
+    /** True when the host input carries the `readonly` attribute (static / declarative, seeded after render). A runtime toggle of the bare `readonly` attribute is not reactively tracked (v2). Read by the companion stepper so its buttons disable in lock-step. */
+    readonly readonly: _angular_core.Signal<boolean>;
+    /** @internal Mobile-keyboard hint: `'numeric'` for integer-only formats, else `'decimal'`. */
+    readonly inputMode: _angular_core.Signal<"numeric" | "decimal">;
+    /** @internal Locale group / decimal separators, memoized per `locale()`. */
+    private readonly separators;
+    private _focused;
+    private _lastValue;
+    private _lastDisplay;
+    private onChange;
+    private onTouched;
+    constructor();
+    /** @internal */
+    writeValue(value: number | null | undefined): void;
+    /** @internal */
+    registerOnChange(fn: (value: number | null) => void): void;
+    /** @internal */
+    registerOnTouched(fn: () => void): void;
+    /** @internal */
+    setDisabledState(isDisabled: boolean): void;
+    /** Steps the value up: treats an empty field as `0`, adds `step`, clamps to `[min,max]`, rounds to the formatter's resolved precision, formats, and writes both the display and the model. Emits `valueChange`. No-op when the host input is disabled or readonly. Does not move focus. */
+    increment(): void;
+    /** Steps the value down: treats an empty field as `0`, subtracts `step`, clamps to `[min,max]`, rounds, formats, writes display and model. Emits `valueChange`. No-op when disabled or readonly. Does not move focus. */
+    decrement(): void;
+    /** Moves focus to the underlying input element. */
+    focus(options?: FocusOptions): void;
+    /** @internal */
+    onInput(): void;
+    /** @internal */
+    onFocus(): void;
+    /** @internal */
+    onBlur(): void;
+    /** @internal */
+    onKeydown(event: KeyboardEvent): void;
+    private stepBy;
+    private commitFromElement;
+    private commitNumber;
+    private commitEmpty;
+    private revertToLastCommitted;
+    private resolvedStep;
+    private clamp;
+    private roundToPrecision;
+    private resolvedMaxFractionDigits;
+    private formatValue;
+    /**
+     * Parse a raw string to `number | null` in a load-bearing order: the `e`/`E`
+     * rejection MUST precede stripping (otherwise `'1e3'` would survive as `'13'`).
+     */
+    private parseValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NumberInputDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NumberInputDirective, "input[twNumberInput]", ["twNumberInput"], { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+/**
+ * The visible up/down spinner column for a {@link NumberInputDirective}. A
+ * directive cannot emit sibling DOM, so the spinner buttons live in this tiny
+ * companion. Bind it to the directive via a template ref and drop it into a
+ * `<tw-form-field>`'s `[twSuffix]` slot (or a standalone flex row):
+ *
+ * ```html
+ * <input twInput twNumberInput #qty="twNumberInput" [formControl]="ctrl" />
+ * <tw-number-stepper twSuffix [for]="qty" />
+ * ```
+ *
+ * The buttons are kept out of the tab order (`tabindex="-1"`) — the spinbutton
+ * input owns value + keyboard semantics — and refocus the input after stepping.
+ */
+declare class NumberStepperComponent {
+    /** The number-input directive instance this stepper controls. Bind to a template ref, e.g. `[for]="qty"` with `#qty="twNumberInput"`. When omitted, the buttons render but do nothing (no-op) and disable. */
+    readonly for: _angular_core.InputSignal<NumberInputDirective | undefined>;
+    /** Button + glyph density. Match the field's `size` for visual alignment. Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    private readonly variant;
+    /** @internal */
+    readonly groupClasses: _angular_core.Signal<string>;
+    /** @internal */
+    readonly buttonClasses: _angular_core.Signal<string>;
+    /** @internal */
+    readonly iconClasses: _angular_core.Signal<string>;
+    /** @internal Disabled when there is no target, or the target input is disabled / readonly. */
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    /** @internal Step the bound directive, then refocus the input (the refocus lives here, not in `increment`/`decrement`). */
+    onStep(direction: 1 | -1): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NumberStepperComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NumberStepperComponent, "tw-number-stepper", ["twNumberStepper"], { "for": { "alias": "for"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=up]", "[slot=down]"], true, never>;
+}
+
+export { NumberInputDirective, NumberStepperComponent };

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

@@ -111,6 +111,14 @@ declare class PopoverDirective {
     private setupFocusTrap;
     private destroyFocusTrap;
     private disposeOverlay;
+    /**
+     * Aborts an in-flight close, leaving the popover open.
+     *
+     * `closePopover` tears the focus trap down immediately and defers only the
+     * detach, so cancelling has to rebuild the trap — the overlay itself is still
+     * attached and the instance still live.
+     */
+    private cancelPendingClose;
     private clearCloseTimer;
     private resolveScrollStrategy;
     private resolvePanelClass;

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

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
-import { TemplateRef, AfterViewInit, Provider } from '@angular/core';
+import { TemplateRef, AfterViewInit, QueryList, Provider } from '@angular/core';
 import * as i1 from '@angular/cdk/stepper';
-import { CdkStep, CdkStepLabel, CdkStepper, StepperOrientation, StepState, StepperOptions } from '@angular/cdk/stepper';
+import { CdkStep, CdkStepLabel, CdkStepper, StepperOrientation, StepState, CdkStepHeader, StepperOptions } from '@angular/cdk/stepper';
 export { STEPPER_GLOBAL_OPTIONS, STEP_STATE, StepState, StepperOptions, StepperOrientation, StepperSelectionEvent } from '@angular/cdk/stepper';
 import { TwColor, TwSize } from '@cdevhub/ngx-tw/core';
 
@@ -106,6 +106,34 @@ declare class StepperComponent extends CdkStepper implements AfterViewInit {
     /** @internal Context supplied to custom icon templates. */
     iconContext(index: number): StepperIconContext;
     /** @internal Click handler for the step header button. */
+    /**
+     * @internal Re-declares CdkStepper's `_stepHeader` query as a **view** query.
+     *
+     * CdkStepper declares it as `@ContentChildren`, which assumes the host
+     * projects its own headers. `tw-stepper` renders the header strip inside its
+     * own template instead, so the base query matched nothing: `_sortedHeaders`
+     * stayed empty, the FocusKeyManager had zero items, and arrow-key navigation
+     * silently did nothing at all. Angular Material overrides the same query for
+     * the same reason.
+     *
+     * Decorator form, not `viewChildren()`, because CdkStepper subscribes to
+     * `_stepHeader.changes` — a QueryList API that signal queries do not expose.
+     */
+    _stepHeader: QueryList<CdkStepHeader>;
+    /**
+     * @internal Which step header currently holds the single tab stop.
+     *
+     * Mirrors CdkStepper's `_getFocusIndex()` into a signal because that method
+     * reads `_keyManager.activeItemIndex`, a plain property — and CdkStepper's
+     * `_onKeydown` does not call `_stateChanged()` on the arrow-key path, so an
+     * OnPush template binding straight to `_getFocusIndex()` would render the
+     * roving tabindex once and then go stale the moment the user arrows.
+     */
+    readonly focusIndexValue: _angular_core.WritableSignal<number>;
+    /** @internal Re-reads the CDK key manager's active item into `focusIndexValue`. */
+    private syncFocusIndex;
+    /** @internal Relays tablist keydown to CdkStepper, then republishes the tab stop. */
+    onTablistKeydown(event: KeyboardEvent): void;
     onHeaderClick(step: StepComponent, index: number): void;
     /** @internal Whether the stepper should render the error state for a step. */
     shouldRenderError(step: StepComponent): boolean;

package/types/cdevhub-ngx-tw-tab-nav.d.ts

@@ -41,6 +41,14 @@ declare class TabNavComponent {
     /** @internal Resolved panel — explicit `tabPanel` input wins, falls back to a projected `<tw-tab-nav-panel>` inside the nav. */
     readonly resolvedPanel: _angular_core.Signal<TabNavPanel | undefined>;
     private readonly liveAnnouncer;
+    private readonly directionality;
+    private readonly destroyRef;
+    /**
+     * Live layout direction. Hardcoding 'ltr' inverts ArrowLeft/ArrowRight in RTL
+     * locales — the arrow moves to the next link in DOM order but the previous
+     * one visually. Mirrored into a signal so the key manager rebuilds on change.
+     */
+    private readonly layoutDirection;
     /** Tracks the previously-announced active link id so we only announce on actual changes. `null` = before the first sync. */
     private readonly previousActiveLinkId;
     private readonly layoutResult;

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

@@ -322,7 +322,16 @@ declare class ColumnComponent<T = unknown> {
 declare class TableComponent<T = unknown> {
     /** The table's rows. Accepts a plain array, an `Observable<readonly T[]>`, or a CDK `DataSource<T>`. Wired directly to `CdkTable.dataSource`. Defaults to an empty array. */
     readonly data: _angular_core.InputSignal<TwTableDataSourceInput<T>>;
-    /** Tracking function used by CDK to identify rows across data changes. When unset, CDK uses identity. */
+    /**
+     * Tracking function used to identify rows across data changes. When unset, rows are identified by
+     * object reference.
+     *
+     * This drives **selection and expansion membership** as well as CDK's DOM diffing. Supply it when
+     * the data source re-emits equal-but-new objects — an HTTP refetch, an immutable store — or the
+     * user's selection empties on every refresh with no event and no error. It is called with `-1` as
+     * the index for membership lookups, so return a value derived from the row alone (`row.id`), not
+     * from the index.
+     */
     readonly trackBy: _angular_core.InputSignal<TrackByFunction<T> | undefined>;
     /** When true, renders the loading slot as an overlay and applies `opacity-60 pointer-events-none` to the body. Defaults to `false`. */
     readonly loading: _angular_core.InputSignal<boolean>;
@@ -444,6 +453,26 @@ declare class TableComponent<T = unknown> {
     collapse(row: T): void;
     /** Toggles the expansion state of the given row. */
     toggleExpansion(row: T): void;
+    /**
+     * @internal Identity key for a row.
+     *
+     * Selection and expansion are membership questions, and answering them by
+     * object reference breaks the moment a data source re-emits equal-but-new
+     * objects — an HTTP refetch, an immutable store, `signal.set([...mapped])`.
+     * The user's selection empties with no event and no error.
+     *
+     * `trackBy` is already the consumer's declaration of row identity, so it is
+     * reused here rather than adding a second, redundant input. With no `trackBy`
+     * the key IS the row, i.e. reference identity — the same default CDK uses.
+     *
+     * Note this must be a *key* function, not a comparator: a comparator would fix
+     * identity but leave membership as an O(rows x selected) scan, and a
+     * reference-keyed Set would fix the scan but ignore custom identity. Only a
+     * key fixes both.
+     */
+    private rowKey;
+    /** @internal O(1) membership lookup for the current selection, keyed by `rowKey`. */
+    private readonly selectedKeys;
     /** Whether a given row is currently in the `selected` list. */
     isSelected(row: T): boolean;
     /** Selects or deselects a row and emits `selectionChange`. */

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

@@ -68,6 +68,14 @@ declare class TabsComponent implements AfterViewInit {
     readonly closed: _angular_core.OutputEmitterRef<string>;
     private readonly destroyRef;
     private readonly liveAnnouncer;
+    private readonly directionality;
+    /**
+     * Live layout direction, mirrored into a signal so the key manager rebuilds
+     * when it changes. Without this the tablist hardcodes 'ltr' and ArrowRight
+     * moves to the next tab in DOM order but the *previous* tab visually in an
+     * RTL locale. CdkStepper and `tw-split` already honour Directionality.
+     */
+    private readonly layoutDirection;
     /** @internal */
     readonly tabs: _angular_core.Signal<readonly TabComponent[]>;
     /** @internal */

package/types/cdevhub-ngx-tw-tags-input.d.ts

@@ -0,0 +1,217 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, Signal } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { TwColor, TwSize, ErrorStateMatcher } from '@cdevhub/ngx-tw/core';
+import { FormFieldControl } from '@cdevhub/ngx-tw/form-field';
+
+/**
+ * Maps the committed input text to a tag value. The default returns the trimmed
+ * string, so the value type defaults to `string`. Override to build object tags
+ * (e.g. `(text) => ({ id: crypto.randomUUID(), name: text })`).
+ */
+type TwTagFactory<T> = (text: string) => T;
+/**
+ * Maps a tag value to its visible chip label and the remove-button accessible
+ * name. Defaults to `String(tag)`.
+ */
+type TwTagLabelFn<T> = (tag: T) => string;
+/**
+ * Equality comparator used to dedupe tags when `allowDuplicates` is `false` and
+ * to resolve a tag passed to `removeTag`. Defaults to `Object.is`.
+ */
+type TwTagCompareFn<T> = (a: T, b: T) => boolean;
+/** Payload of the `tagAdded` output. */
+interface TwTagAddedEvent<T> {
+    /** The tag that was committed. */
+    tag: T;
+    /** The full tag array after the addition. A fresh array reference. */
+    value: T[];
+}
+/** Payload of the `tagRemoved` output. */
+interface TwTagRemovedEvent<T> {
+    /** The tag that was removed. */
+    tag: T;
+    /** The full tag array after the removal. A fresh array reference. */
+    value: T[];
+    /** The index the removed tag occupied before removal. */
+    index: number;
+}
+
+/**
+ * Free-text multi-value input. The user types a token and commits it via Enter,
+ * a separator key, paste, or blur; committed tokens render as dismissible chips
+ * (composing `[twBadge]`) inline with the text input. The value is exposed as a
+ * real `T[]` (default `string[]`) through `ControlValueAccessor`, so it works
+ * with template-driven, reactive, and signal forms and integrates with
+ * `<tw-form-field>` for label / hint / error chrome.
+ *
+ * The control is a single tab stop with a roving-tabindex chip strip
+ * (Material `MatChipGrid` interaction model): Arrow keys traverse chips and the
+ * input, Delete / a two-step Backspace remove chips, and `LiveAnnouncer` voices
+ * add / remove. Autocomplete suggestions are out of scope (use `tw-combobox`).
+ */
+declare class TagsInputComponent<T = string> extends FormFieldControl<T[]> implements ControlValueAccessor, OnInit {
+    /** Semantic color for the container focus-within ring and the chip accent. Defaults to `'primary'`. */
+    readonly color: _angular_core.InputSignal<TwColor>;
+    /** Controls overall density: container padding, chip size, and text scale. Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    /** When true, blocks typing, committing, and chip removal, and applies muted styling. Reactive forms also propagate disabled via `setDisabledState`. Defaults to `false`. */
+    readonly disabledInput: _angular_core.InputSignal<boolean>;
+    /** Marks the control as required. Mirrored to the input's `aria-required`. Also inferred from `Validators.required` on a bound control. Defaults to `false`. */
+    readonly requiredInput: _angular_core.InputSignal<boolean>;
+    /** Placeholder shown in the text input only while there are no chips and the input is empty. */
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    /** Keys that commit the in-progress text as a tag. Each entry is a `KeyboardEvent.key` value (`'Enter'`) or a single separator character (`','`). Single-character separators also split pasted text. Defaults to `['Enter', ',']`. */
+    readonly separatorKeys: _angular_core.InputSignal<readonly string[]>;
+    /** When true, blurring the control while the input holds non-empty text commits it as a tag. Defaults to `false`. */
+    readonly addOnBlur: _angular_core.InputSignal<boolean>;
+    /** Maximum number of tags. Once reached, further commits are blocked and announced. Does not truncate an oversized `writeValue`. Defaults to `undefined` (no limit). */
+    readonly maxTags: _angular_core.InputSignal<number | undefined>;
+    /** When false (default), a committed tag equal (per `compareWith`) to an existing tag is dropped silently. When true, duplicates are kept. Defaults to `false`. */
+    readonly allowDuplicates: _angular_core.InputSignal<boolean>;
+    /** Maps committed text to a tag value. Default is identity — the trimmed string. Override to build object tags. */
+    readonly createTag: _angular_core.InputSignal<TwTagFactory<T>>;
+    /** Maps a tag value to its visible chip label and the remove-button accessible name. Defaults to `String(tag)`. */
+    readonly tagLabel: _angular_core.InputSignal<TwTagLabelFn<T>>;
+    /** Equality comparator used for dedup when `allowDuplicates` is false. Defaults to `Object.is` (reference / value identity). String tags dedupe case-sensitively by default; pass `(a, b) => a.toLowerCase() === b.toLowerCase()` for case-insensitive dedup. */
+    readonly compareWith: _angular_core.InputSignal<TwTagCompareFn<T>>;
+    /** Applied to the text input for labeling and identification only; does not submit the tag array via native (non-Angular) form posting. */
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    /** Id on the host element. Auto-generated as `tw-tags-input-N` when not provided. Used by the form-field's `<label for>` association. */
+    readonly idInput: _angular_core.InputSignal<string | undefined>;
+    /** Accessible name applied to the control when no visible label is wired. Mirrored to `aria-label`. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** ID of an external element that labels the control. Mirrored to `aria-labelledby`. */
+    readonly ariaLabelledby: _angular_core.InputSignal<string | undefined>;
+    /** ID of an external element that describes the control. Form-field merges its hint / error ids alongside. */
+    readonly ariaDescribedby: _angular_core.InputSignal<string | undefined>;
+    /** Per-instance override of the {@link ErrorStateMatcher}. When omitted, uses the `TW_ERROR_STATE_MATCHER` token's value. */
+    readonly errorStateMatcher: _angular_core.InputSignal<ErrorStateMatcher | undefined>;
+    /** Fires when the tag array changes through user interaction (add, remove, clear). Emits a fresh array reference. Does not fire on `writeValue`. */
+    readonly valueChange: _angular_core.OutputEmitterRef<T[]>;
+    /** Fires when a tag is committed via Enter, a separator key, paste, or `addTag()`. Does not fire for dropped duplicates, blocked-by-max commits, empty commits, or `writeValue`. */
+    readonly tagAdded: _angular_core.OutputEmitterRef<TwTagAddedEvent<T>>;
+    /** Fires when a tag is removed via the remove button, Backspace / Delete, or `removeTag()`. Does not fire on `writeValue` or `clear()`. */
+    readonly tagRemoved: _angular_core.OutputEmitterRef<TwTagRemovedEvent<T>>;
+    private readonly focusMonitor;
+    private readonly liveAnnouncer;
+    private readonly elementRef;
+    private readonly destroyRef;
+    private readonly ngControl;
+    private readonly parentForm;
+    private readonly parentFormGroup;
+    private readonly defaultMatcher;
+    private readonly formField;
+    private readonly textInputRef;
+    private readonly removeButtons;
+    private onChange;
+    private onTouched;
+    private readonly tags;
+    /** The current in-progress (uncommitted) text in the input. Empty when nothing is typed. */
+    readonly inputText: _angular_core.WritableSignal<string>;
+    /** @internal Roving-tabindex position. `null` = the text input is the active element; a number = that chip's remove button. */
+    protected readonly activeChipIndex: _angular_core.WritableSignal<number | null>;
+    private readonly cvaDisabled;
+    private readonly _focused;
+    private readonly _ngControlRev;
+    private readonly _formSubmitRev;
+    private readonly describedByIdsSignal;
+    private readonly labelledByIdsSignal;
+    /** Nonce bumped only on explicit focus intent — keeps the focus effect from stealing focus on unrelated renders. */
+    private readonly focusNonce;
+    private lastMaxAnnounce;
+    private readonly uid;
+    /** @internal Fallback id used when the consumer does not set `[id]`. */
+    readonly hostId: string;
+    /** @internal */
+    readonly id: Signal<string>;
+    /** The current tag array (empty array when there are no tags). Read from a template ref (`#t="twTagsInput"`) for non-form usage. Doubles as the `FormFieldControl` contract member. */
+    readonly value: Signal<T[]>;
+    /** @internal */
+    readonly focused: Signal<boolean>;
+    /** @internal Empty when there are no chips AND the input text is blank — drives the form-field floating label. */
+    readonly empty: Signal<boolean>;
+    /** @internal */
+    readonly disabled: Signal<boolean>;
+    /** @internal */
+    readonly required: Signal<boolean>;
+    /** @internal */
+    readonly errorState: Signal<boolean>;
+    /** @internal Active validation errors map from the bound control, for `[twError match="…"]` filtering. */
+    readonly errors: Signal<Record<string, unknown> | null>;
+    /** @internal */
+    readonly controlType = "tags-input";
+    /** @internal */
+    readonly userAriaDescribedBy: Signal<string | undefined>;
+    /** @internal */
+    readonly userAriaLabelledby: Signal<string | undefined>;
+    /** @internal Merged `aria-describedby` (form-field hint/error ids + consumer-supplied). */
+    readonly resolvedDescribedBy: Signal<string>;
+    /** @internal Merged `aria-labelledby` (form-field label id + consumer-supplied). */
+    readonly resolvedLabelledBy: Signal<string>;
+    private readonly variantResult;
+    /** @internal */
+    readonly rootClasses: Signal<string>;
+    /** @internal */
+    readonly chipClasses: Signal<string>;
+    /** @internal */
+    readonly chipLabelClasses: Signal<string>;
+    /** @internal */
+    readonly removeButtonClasses: Signal<string>;
+    /** @internal */
+    readonly removeIconClasses: Signal<string>;
+    /** @internal */
+    readonly inputClasses: Signal<string>;
+    /** @internal Pre-resolved chip view models so the template never calls accessor functions inline. */
+    readonly chipViews: Signal<{
+        tag: T;
+        label: string;
+        removeLabel: string;
+        index: number;
+    }[]>;
+    constructor();
+    /** Commits `text` as a tag (trim → `createTag` → dedup unless `allowDuplicates` → `maxTags` check). Returns true if a tag was added, false if dropped (empty / duplicate / max). Emits `tagAdded` + `valueChange` on success. No-op when disabled. */
+    addTag(text: string): boolean;
+    /** Removes a tag by value (first match via `compareWith`) or by index when a number is passed. Emits `tagRemoved` + `valueChange` and restores focus. No-op when disabled or when no match. Note: when the tag type is `number`, the argument is treated as an index. */
+    removeTag(tag: T | number): void;
+    /** Removes all tags and clears the in-progress input text. Emits `valueChange` with `[]`. Does NOT emit `tagRemoved` per tag (bulk reset). No-op when already empty or disabled. */
+    clear(): void;
+    /** Moves focus to the text input. */
+    focus(): void;
+    private tryAdd;
+    private commitInput;
+    private removeAt;
+    /** @internal */
+    onInput(event: Event): void;
+    /** @internal */
+    onInputKeydown(event: KeyboardEvent): void;
+    /** @internal */
+    onChipKeydown(event: KeyboardEvent, index: number): void;
+    /** @internal */
+    onRemoveClick(index: number): void;
+    /** @internal */
+    onPaste(event: ClipboardEvent): void;
+    writeValue(value: T[] | null | undefined): void;
+    registerOnChange(fn: (value: T[]) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /** @internal */
+    setDescribedByIds(ids: string[]): void;
+    /** @internal */
+    setLabelledByIds(ids: string[]): void;
+    /** @internal Clicking the form-field surface (outside the control) focuses the text input. Clicks inside the control are left alone so chip removal keeps its own focus restoration. */
+    onContainerClick(event: MouseEvent): void;
+    ngOnInit(): void;
+    private focusChip;
+    private focusInput;
+    private requestFocus;
+    private setInputText;
+    private announceMax;
+    private splitOnSeparators;
+    private hasAccessibleNameHint;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TagsInputComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TagsInputComponent<any>, "tw-tags-input", ["twTagsInput"], { "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "requiredInput": { "alias": "required"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "separatorKeys": { "alias": "separatorKeys"; "required": false; "isSignal": true; }; "addOnBlur": { "alias": "addOnBlur"; "required": false; "isSignal": true; }; "maxTags": { "alias": "maxTags"; "required": false; "isSignal": true; }; "allowDuplicates": { "alias": "allowDuplicates"; "required": false; "isSignal": true; }; "createTag": { "alias": "createTag"; "required": false; "isSignal": true; }; "tagLabel": { "alias": "tagLabel"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "idInput": { "alias": "id"; "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; }; }, { "valueChange": "valueChange"; "tagAdded": "tagAdded"; "tagRemoved": "tagRemoved"; }, never, never, true, never>;
+}
+
+export { TagsInputComponent };
+export type { TwTagAddedEvent, TwTagCompareFn, TwTagFactory, TwTagLabelFn, TwTagRemovedEvent };