@cdevhub/ngx-tw 0.2.0

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

@@ -0,0 +1,210 @@
+import * as i0 from '@angular/core';
+import { Signal, AfterContentInit, ElementRef, InjectionToken } from '@angular/core';
+import { TwSize, TwColor } from '@cdevhub/ngx-tw/core';
+
+/** Visual appearance of the form-field container. */
+type FormFieldAppearance = 'outline' | 'filled';
+/** Floating label behavior. `'never'` disables floating entirely; the label wrapper is not rendered and the wrapped control's placeholder is always visible. */
+type FloatLabel = 'auto' | 'always' | 'never';
+/** Subscript (hint/error row) sizing strategy. `'fixed'` always reserves vertical space; `'dynamic'` collapses the row when no hint/error is projected. */
+type SubscriptSizing = 'fixed' | 'dynamic';
+/**
+ * Contract every ngx-tw form-field-compatible control must implement. A
+ * concrete control provides itself under {@link TW_FORM_FIELD_CONTROL} so the
+ * surrounding `FormFieldComponent` can mirror its state and wire ARIA.
+ */
+declare abstract class FormFieldControl<T = unknown> {
+    /** Unique id on the control's host element. Used by the form-field label `for` attribute and `aria-describedby` wiring. */
+    abstract readonly id: Signal<string>;
+    /** Current value of the control. */
+    abstract readonly value: Signal<T | null>;
+    /** Whether the control currently has focus. Typically driven by CDK `FocusMonitor`. */
+    abstract readonly focused: Signal<boolean>;
+    /** Whether the control's value is considered empty. Drives the floating-label state. */
+    abstract readonly empty: Signal<boolean>;
+    /** Whether the control is disabled. */
+    abstract readonly disabled: Signal<boolean>;
+    /** Whether the control is marked required. */
+    abstract readonly required: Signal<boolean>;
+    /** Whether the control should be rendered as invalid. Usually derived from `NgControl.invalid` combined with `touched`/`submitted`. */
+    abstract readonly errorState: Signal<boolean>;
+    /** Active validation errors map keyed by validator name (e.g. `{ required: true, email: true }`). Returns `null` when the control has no validation errors. Drives `[twError match="…"]` filtering inside the form-field. Optional — controls without a backing `NgControl` may omit it. */
+    readonly errors?: Signal<Record<string, unknown> | null>;
+    /** Optional control-type identifier (e.g. `'input'`, `'select'`). When set, the form-field appends `tw-form-field-type-{controlType}` to its host for styling hooks. */
+    abstract readonly controlType?: string;
+    /** Optional consumer-supplied `aria-describedby` ids the form-field preserves when merging in hint/error ids. */
+    abstract readonly userAriaDescribedBy?: Signal<string | undefined>;
+    /** Optional consumer-supplied `aria-labelledby` ids the form-field preserves when merging in the projected label id. Controls that consume label pushdown (non-native triggers) override this. */
+    readonly userAriaLabelledby?: Signal<string | undefined>;
+    /** Called by the form-field to push the merged `aria-describedby` ids back onto the control's host element. */
+    abstract setDescribedByIds(ids: string[]): void;
+    /** Called when the form-field container is clicked. Concrete controls typically focus their underlying native element or open a panel. */
+    abstract onContainerClick(event: MouseEvent): void;
+    /**
+     * Called by the form-field to push the merged `aria-labelledby` ids onto the control's host element.
+     * Default is a no-op — native `<input>` controls rely on the label's `for=` attribute for the canonical association.
+     * Non-native controls (combobox triggers, date-pickers, etc.) override this to set the attribute explicitly.
+     */
+    setLabelledByIds(_ids: string[]): void;
+}
+/**
+ * Injection token matching {@link FormFieldControl}. Controls register via
+ * `providers: [{ provide: TW_FORM_FIELD_CONTROL, useExisting: MyControl }]`.
+ */
+declare const TW_FORM_FIELD_CONTROL: InjectionToken<FormFieldControl<unknown>>;
+declare class LabelDirective {
+    private readonly formField;
+    private readonly elementRef;
+    /** @internal */
+    readonly id: string;
+    /** @internal */
+    readonly controlId: Signal<string | null>;
+    /** @internal */
+    readonly classes: Signal<string>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<LabelDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<LabelDirective, "[twLabel]", never, {}, {}, never, never, true, never>;
+}
+declare class HintDirective {
+    private readonly formField;
+    /** @internal */
+    readonly id: string;
+    /** Alignment within the subscript row. `'end'` pushes the hint to the right. When unset, the form-field's `hintAlign` input supplies the default. */
+    readonly align: i0.InputSignal<"start" | "end" | undefined>;
+    /** @internal */
+    readonly effectiveAlign: Signal<"start" | "end">;
+    /** @internal */
+    readonly classes: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HintDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HintDirective, "[twHint]", never, { "align": { "alias": "align"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare class ErrorDirective {
+    private readonly formField;
+    /** @internal */
+    readonly id: string;
+    /** Validation error key this message is bound to (e.g. `'required'`, `'email'`, `'minlength'`). When set, the error renders only while the surrounding control reports that key in its active validation errors. When omitted, the error displays whenever the form-field is in an error state — useful as a generic fallback. */
+    readonly match: i0.InputSignal<string | undefined>;
+    /** @internal Whether this error should display given the control's active error keys. */
+    readonly shouldShow: Signal<boolean>;
+    /** @internal */
+    readonly classes: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ErrorDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ErrorDirective, "[twError]", never, { "match": { "alias": "match"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare class PrefixDirective {
+    protected readonly formField: FormFieldComponent;
+    /** @internal Used by the form-field to measure the prefix area and align the resting label after it. */
+    readonly elementRef: ElementRef<any>;
+    /** @internal */
+    readonly prefixClasses: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrefixDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PrefixDirective, "[twPrefix]", never, {}, {}, never, never, true, never>;
+}
+declare class SuffixDirective {
+    protected readonly formField: FormFieldComponent;
+    /** @internal */
+    readonly suffixClasses: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SuffixDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SuffixDirective, "[twSuffix]", never, {}, {}, never, never, true, never>;
+}
+declare class PrefixIconDirective extends PrefixDirective {
+    /** @internal */
+    readonly prefixClasses: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrefixIconDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PrefixIconDirective, "[twPrefixIcon]", never, {}, {}, never, never, true, never>;
+}
+declare class SuffixIconDirective extends SuffixDirective {
+    /** @internal */
+    readonly suffixClasses: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SuffixIconDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SuffixIconDirective, "[twSuffixIcon]", never, {}, {}, never, never, true, never>;
+}
+declare class FormFieldComponent implements AfterContentInit {
+    /** 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'`. */
+    readonly size: i0.InputSignal<TwSize>;
+    /** Floating label behavior. `'auto'` floats when focused or non-empty; `'always'` stays floated; `'never'` disables floating entirely (the label wrapper is not rendered and the wrapped control's placeholder is always visible). Defaults to `'auto'`. */
+    readonly floatLabel: i0.InputSignal<FloatLabel>;
+    /** Subscript sizing strategy. `'fixed'` always reserves a 20px row for hints/errors so adjacent fields align; `'dynamic'` collapses the row when no hint/error is projected. Defaults to `'fixed'`. */
+    readonly subscriptSizing: i0.InputSignal<SubscriptSizing>;
+    /** Hides the visual required marker (`*`) even when the wrapped control is required. `aria-required` on the control is unaffected. Defaults to `false`. */
+    readonly hideRequiredMarker: i0.InputSignal<boolean>;
+    /** Semantic color for focused/active accents (focused border, floated label). Defaults to `'primary'`. */
+    readonly color: i0.InputSignal<TwColor>;
+    /** Default alignment for a `twHint` element that does not specify its own `align`. Defaults to `'start'`. */
+    readonly hintAlign: i0.InputSignal<"start" | "end">;
+    /** @internal */
+    readonly control: Signal<FormFieldControl<unknown> | undefined>;
+    /** @internal */
+    readonly labelChild: Signal<LabelDirective | undefined>;
+    /** @internal */
+    readonly hintChildren: Signal<readonly HintDirective[]>;
+    /** @internal */
+    readonly errorChildren: Signal<readonly ErrorDirective[]>;
+    /** @internal */
+    readonly prefixChildren: Signal<readonly PrefixDirective[]>;
+    /** @internal */
+    readonly infixRef: Signal<ElementRef<HTMLElement> | undefined>;
+    /** @internal */
+    readonly hasLabel: Signal<boolean>;
+    /** @internal */
+    readonly hasPrefix: Signal<boolean>;
+    /** @internal Resting-label left offset in pixels, mirroring the infix's `offsetLeft` so the label sits right after any prefix. */
+    private readonly restingLabelOffset;
+    /** @internal */
+    readonly isFocused: Signal<boolean>;
+    /** @internal */
+    readonly isInvalid: Signal<boolean>;
+    /** @internal */
+    readonly isDisabled: Signal<boolean>;
+    /** @internal */
+    readonly isRequired: Signal<boolean>;
+    /** @internal Whether the floating label wrapper should render at all. `'never'` opts out entirely. */
+    readonly shouldRenderLabelWrapper: Signal<boolean>;
+    /** @internal */
+    readonly shouldLabelFloat: Signal<boolean>;
+    /** @internal Inline `left` value for the label wrapper. Floated labels pin to the container edge; resting labels align with the infix's left (after any prefix). */
+    readonly labelLeft: Signal<string>;
+    /** @internal */
+    readonly subscriptMode: Signal<"hint" | "error">;
+    /** @internal Set of validation error keys currently active on the bound control (e.g. `Set('required', 'email')`). Empty when the control has no `errors` signal or no active errors. Read by `[twError match="…"]` to decide whether to display. */
+    readonly activeErrorKeys: Signal<ReadonlySet<string>>;
+    /** @internal Whether the subscript row has anything to render right now. */
+    readonly hasSubscriptContent: Signal<boolean>;
+    /** @internal Whether the subscript wrapper renders. In `'fixed'` mode it always renders to reserve vertical space; in `'dynamic'` mode it collapses when empty. */
+    readonly shouldRenderSubscript: Signal<boolean>;
+    private readonly controlTypeClass;
+    private readonly variantResult;
+    /** @internal */
+    readonly rootClasses: Signal<string>;
+    /** @internal */
+    readonly controlWrapperClasses: Signal<string>;
+    /** @internal */
+    readonly infixClasses: Signal<string>;
+    /** @internal */
+    readonly labelWrapperClasses: Signal<string>;
+    /** @internal */
+    readonly labelClasses: Signal<string>;
+    /** @internal */
+    readonly requiredMarkerClasses: Signal<string>;
+    /** @internal */
+    readonly prefixClasses: Signal<string>;
+    /** @internal */
+    readonly suffixClasses: Signal<string>;
+    /** @internal */
+    readonly subscriptWrapperClasses: Signal<string>;
+    /** @internal */
+    readonly hintClasses: Signal<string>;
+    /** @internal */
+    readonly errorClasses: Signal<string>;
+    constructor();
+    ngAfterContentInit(): void;
+    /** @internal */
+    _onContainerClick(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldComponent, never>;
+    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 };

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

@@ -0,0 +1,29 @@
+import { Provider } from '@angular/core';
+import { LucideIconData, LucideIcons } from 'lucide-angular';
+import { TwIconData } from '@cdevhub/ngx-tw/icon';
+
+/**
+ * Converts a single Lucide icon to the generic `TwIconData` format.
+ *
+ * Lucide's `LucideIconData` is structurally identical to `TwIconData`.
+ * This function exists for type-level conversion and explicit intent.
+ */
+declare function fromLucideIcon(icon: LucideIconData): TwIconData;
+/**
+ * Registers Lucide icons for use with `tw-icon`.
+ *
+ * Drop-in replacement for `provideTwIcons` that accepts Lucide icon imports directly.
+ *
+ * @example
+ * ```ts
+ * import { provideTwLucideIcons } from '@cdevhub/ngx-tw/icon/lucide';
+ * import { ChevronRight, Star, Check } from 'lucide-angular';
+ *
+ * export const appConfig = {
+ *   providers: [provideTwLucideIcons({ ChevronRight, Star, Check })]
+ * };
+ * ```
+ */
+declare function provideTwLucideIcons(icons: LucideIcons): Provider[];
+
+export { fromLucideIcon, provideTwLucideIcons };

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

@@ -0,0 +1,134 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken, Provider } from '@angular/core';
+import { TwColor, TwSize } from '@cdevhub/ngx-tw/core';
+
+/** A single SVG element: [tagName, attributes]. */
+type TwIconNode = readonly [string, Readonly<Record<string, string | number>>];
+/** Icon data: array of SVG child elements rendered inside the `<svg>` wrapper. */
+type TwIconData = readonly TwIconNode[];
+/** Map of PascalCase icon names to their SVG data. */
+type TwIconMap = Record<string, TwIconData>;
+/** Color options for the icon component: any semantic color plus `'current'` for color inheritance. */
+type TwIconColor = TwColor | 'current';
+/**
+ * SVG-author configuration grouped into a single input to keep the icon's
+ * top-level surface small. All fields are optional; unset fields fall back to
+ * sensible defaults (`strokeWidth: 2`, `absoluteStrokeWidth: false`,
+ * `viewBox: '0 0 24 24'`).
+ */
+interface TwIconSvgConfig {
+    /** SVG stroke width. Defaults to `2`. */
+    readonly strokeWidth?: number;
+    /** When true, stroke width scales inversely with icon size to maintain consistent visual weight. Defaults to `false`. */
+    readonly absoluteStrokeWidth?: boolean;
+    /** SVG viewBox attribute. Defaults to `'0 0 24 24'`. */
+    readonly viewBox?: string;
+}
+
+/**
+ * Renders SVG icons from a registry or from direct icon data.
+ *
+ * Icons inherit `currentColor` by default. Use the `color` input for semantic
+ * color variants that respond to theme changes.
+ *
+ * Register icons tree-shakably via `provideTwIcons()` (raw SVG data) or
+ * `provideTwLucideIcons()` from `ngx-tw/icon/lucide` (Lucide adapter).
+ *
+ * @example
+ * ```html
+ * <tw-icon name="star" />
+ * <tw-icon name="check" color="success" size="lg" />
+ * <tw-icon name="alert-triangle" color="warning" ariaLabel="Warning" />
+ * <tw-icon name="star" [svg]="{ strokeWidth: 1.5, absoluteStrokeWidth: true }" />
+ * ```
+ */
+declare class IconComponent {
+    private readonly doc;
+    private readonly renderer;
+    private readonly elRef;
+    private readonly registry;
+    private readonly _registrar;
+    /** Icon name in kebab-case (e.g. `'chevron-right'`). Resolved via the registry. Defaults to `undefined`. */
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    /** Direct icon data (SVG element tuples). Takes precedence over `name`. Defaults to `undefined`. */
+    readonly img: _angular_core.InputSignal<TwIconData | undefined>;
+    /** Semantic color. `'current'` inherits from parent text color. Defaults to `'current'`. */
+    readonly color: _angular_core.InputSignal<TwIconColor>;
+    /** Icon size. Defaults to `'md'` (20px). */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    /** Accessible label. When set, removes `aria-hidden` and applies `aria-label` to the SVG. Defaults to `undefined` (icon is decorative, `aria-hidden="true"`). */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * SVG-author configuration: `strokeWidth`, `absoluteStrokeWidth`, `viewBox`.
+     * Unset fields fall back to `{ strokeWidth: 2, absoluteStrokeWidth: false, viewBox: '0 0 24 24' }`.
+     */
+    readonly svg: _angular_core.InputSignal<TwIconSvgConfig | undefined>;
+    /** Resolves icon data from `img` (priority) or `name` (registry lookup). */
+    protected readonly resolvedIcon: _angular_core.Signal<TwIconData | undefined>;
+    /** Pixel size for the current `size` input. */
+    protected readonly sizeInPx: _angular_core.Signal<number>;
+    /** Effective stroke width, accounting for `absoluteStrokeWidth`. */
+    protected readonly effectiveStrokeWidth: _angular_core.Signal<number>;
+    /** Effective viewBox. */
+    protected readonly effectiveViewBox: _angular_core.Signal<string>;
+    /** Host class string from tv(). */
+    readonly classes: _angular_core.Signal<string>;
+    /** Tracks the previous render state to avoid unnecessary DOM rebuilds. */
+    private prevIconData;
+    private prevStrokeWidth;
+    private prevViewBox;
+    private prevAriaLabel;
+    private currentSvg;
+    constructor();
+    private renderSvg;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<IconComponent, "tw-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "img": { "alias": "img"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "svg": { "alias": "svg"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Stores icon data (SVG element tuples) for use by `tw-icon`.
+ *
+ * Not provided in root — use `provideTwIcons()` or `provideTwLucideIcons()`
+ * to register icons and supply this service.
+ */
+declare class IconRegistry {
+    private readonly icons;
+    /** Merges the given icons into the registry. */
+    register(icons: TwIconMap): void;
+    /** Returns the icon data for the given PascalCase name, or `null` if not registered. */
+    get(name: string): TwIconData | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IconRegistry, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<IconRegistry>;
+}
+
+/**
+ * Multi-provider token whose factories register icons into the `IconRegistry`.
+ * Injected by `IconComponent` to trigger factory execution. The token value is never read.
+ */
+declare const TW_ICON_REGISTRAR: InjectionToken<void[]>;
+/**
+ * Registers icons for use with `tw-icon`.
+ *
+ * Returns an array of providers that includes the `IconRegistry` service
+ * and a multi-provider factory that merges the given icons into it.
+ * Angular deduplicates the class provider, so multiple calls are safe.
+ *
+ * Works at all injector levels: app root, lazy route, and component.
+ *
+ * @example
+ * ```ts
+ * import { provideTwIcons } from '@cdevhub/ngx-tw/icon';
+ *
+ * const myIcons = {
+ *   Star: [['polygon', { points: '12 2 15.09 8.26 ...' }]],
+ * };
+ *
+ * export const appConfig = {
+ *   providers: [provideTwIcons(myIcons)]
+ * };
+ * ```
+ */
+declare function provideTwIcons(icons: TwIconMap): Provider[];
+
+export { IconComponent, IconRegistry, TW_ICON_REGISTRAR, provideTwIcons };
+export type { TwIconColor, TwIconData, TwIconMap, TwIconNode, TwIconSvgConfig };

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

@@ -0,0 +1,110 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, Signal, InjectionToken, WritableSignal } from '@angular/core';
+import { TwSize, ErrorStateMatcher } from '@cdevhub/ngx-tw/core';
+import { FormFieldControl } from '@cdevhub/ngx-tw/form-field';
+
+/**
+ * Extension point for directives that wrap an `<input twInput>` and need to
+ * own how its value is read and written. The directive's `value` property can
+ * be a plain object slot (`{ value: T }`) or a `WritableSignal<T>`. Mirrors
+ * Angular Material's `MAT_INPUT_VALUE_ACCESSOR`.
+ */
+declare const TW_INPUT_VALUE_ACCESSOR: InjectionToken<{
+    value: unknown | WritableSignal<unknown>;
+}>;
+/**
+ * Adapts a native `<input>` or `<textarea>` into an ngx-tw form-field-compatible
+ * control. Works standalone (applies its own border and focus styling) or
+ * inside a `<tw-form-field>` (strips its chrome and provides signals the
+ * form-field uses to float the label and wire `aria-describedby`).
+ *
+ * Extension points:
+ * - Implement a completely custom control → extend {@link FormFieldControl}
+ *   and provide under `TW_FORM_FIELD_CONTROL`.
+ * - Swap value storage for an existing `<input twInput>` (masked input,
+ *   date parser, etc.) → provide {@link TW_INPUT_VALUE_ACCESSOR}.
+ * - Change when errors show → override {@link TW_ERROR_STATE_MATCHER} at any
+ *   injector level, or pass `errorStateMatcher` per instance.
+ *
+ * Forms integration is inherited: Angular's native value accessors attach to
+ * the underlying element, so the directive works with template-driven,
+ * reactive, and signal-based forms without additional glue.
+ */
+declare class InputDirective extends FormFieldControl<string> implements OnInit {
+    private readonly elementRef;
+    private readonly focusMonitor;
+    private readonly autofillMonitor;
+    private readonly platform;
+    private readonly destroyRef;
+    private readonly formField;
+    private readonly ngControl;
+    private readonly parentForm;
+    private readonly parentFormGroup;
+    private readonly defaultMatcher;
+    private readonly valueAccessor;
+    /** @internal */
+    readonly _isTextarea: boolean;
+    /** Contract value — `'input'` for `<input>` and `'textarea'` for `<textarea>`. Form-field appends it as `tw-form-field-type-*` for styling hooks. */
+    readonly controlType: string;
+    private readonly uid;
+    /** Id on the underlying element. Auto-generated as `tw-input-N` when not provided. Used by the form-field's `<label for>` attribute. */
+    readonly idInput: _angular_core.InputSignal<string | undefined>;
+    /** Native HTML input `type`. Defaults to `'text'`. Dev-mode throws on unsupported values (`checkbox`, `radio`, `submit`, etc.) — use the dedicated component instead. Ignored on `<textarea>`. */
+    readonly type: _angular_core.InputSignal<string>;
+    /** Density of a standalone field. Maps to the inline-padding scale (`px-2 py-1` xs … `px-6 py-3` xl) and font scale (`text-xs` xs, `text-sm` sm/md, `text-base` lg/xl). Ignored inside a `<tw-form-field>` — the wrapper's `size` carries density. Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    /** Disables the control. Also reflects `ngControl.disabled` when the element is bound to a reactive form. Defaults to `false`. */
+    readonly disabledInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Marks the control as required. Also inferred from `Validators.required` on a bound `NgControl`. Defaults to `false`. */
+    readonly requiredInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Makes the control read-only (native `readonly` attribute). Defaults to `false`. */
+    readonly readonlyInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Per-instance override of the {@link ErrorStateMatcher}. When omitted, the directive uses the `TW_ERROR_STATE_MATCHER` token's value. */
+    readonly errorStateMatcher: _angular_core.InputSignal<ErrorStateMatcher | undefined>;
+    /** Consumer-supplied `aria-describedby` ids. The form-field preserves these when merging hint and error ids. Alias: `aria-describedby`. */
+    readonly userAriaDescribedBy: _angular_core.InputSignal<string | undefined>;
+    /** Consumer-supplied `aria-labelledby` ids. The form-field preserves these when merging in the projected label id. Alias: `aria-labelledby`. */
+    readonly userAriaLabelledby: _angular_core.InputSignal<string | undefined>;
+    private readonly _value;
+    private readonly _focused;
+    private readonly _autofilled;
+    private readonly _ngControlRev;
+    private readonly _formSubmitRev;
+    /** @internal */
+    readonly id: Signal<string>;
+    /** @internal */
+    readonly value: Signal<string | null>;
+    /** @internal */
+    readonly focused: Signal<boolean>;
+    /** @internal */
+    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 `NgControl` (or `null` when the control reports none / is unbound). Recomputes on every `_ngControlRev` tick so `[twError match="…"]` reacts to validator transitions, including rules that fire/clear without flipping `VALID`/`INVALID`. */
+    readonly errors: Signal<Record<string, unknown> | null>;
+    /** @internal */
+    readonly classes: Signal<string>;
+    constructor();
+    ngOnInit(): void;
+    /** Moves focus to the underlying element. */
+    focus(options?: FocusOptions): void;
+    /** @internal Called when `<tw-form-field>` has computed the merged describedby ids. */
+    setDescribedByIds(ids: string[]): void;
+    /** @internal Called when `<tw-form-field>` has computed the merged labelledby ids. The native `<label for>` association covers most cases; this attribute is mainly useful when a consumer also supplies `aria-labelledby` for an external label. */
+    setLabelledByIds(ids: string[]): void;
+    /** @internal Called when the form-field container is clicked. */
+    onContainerClick(_event: MouseEvent): void;
+    /** @internal */
+    _onInput(): void;
+    private _currentValue;
+    private _readInitialValue;
+    private _stringify;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<InputDirective, "input[twInput], textarea[twInput]", ["twInput"], { "idInput": { "alias": "id"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "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; }; "readonlyInput": { "alias": "readonly"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "userAriaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "userAriaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { InputDirective, TW_INPUT_VALUE_ACCESSOR };

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

@@ -0,0 +1,70 @@
+import * as _angular_core from '@angular/core';
+import { OnInit } from '@angular/core';
+import { TwSize } from '@cdevhub/ngx-tw/core';
+
+/** Density / typography scale for `tw-item`. A narrower subset of `TwSize` — the three sizes that match real use cases (table row, list item, section header). */
+type ItemSize = Extract<TwSize, 'sm' | 'md' | 'lg'>;
+/** Vertical alignment of the leading and trailing slots relative to the title/description stack. */
+type ItemAlign = 'start' | 'center';
+declare class ItemComponent implements OnInit {
+    /** Density and typography scale. `'sm'` is compact with truncated single-line title and description (table rows). `'md'` is the default list-item size. `'lg'` is the section-header scale with a larger title. Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<ItemSize>;
+    /** Vertical alignment of the leading and trailing slots relative to the content stack. `'start'` aligns them with the title baseline (recommended when a description is present). `'center'` vertically centers them on the whole block (recommended for single-line items). Defaults to `'start'`. */
+    readonly align: _angular_core.InputSignal<ItemAlign>;
+    /**
+     * When `true`, the item is keyboard-activatable: adds `role="button"`, `tabindex="0"`, a hover background, pointer cursor, and a visible focus ring. Click and Enter/Space emit `selected`. Defaults to `false`.
+     *
+     * Do not project additional focusable elements (buttons, links, inputs) into `[twItemLeading]` or `[twItemTrailing]` when this is `true` — they create nested interactive controls that fail AXE. For action-row patterns, keep `interactive` as `false` and let the projected control carry the semantics instead.
+     *
+     * For `role="menuitem"`, `role="option"`, or other listbox/menu semantics, do not use `tw-item` — the menu, select, and command-palette components own those roles and the keyboard contracts that come with them.
+     */
+    readonly interactive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Disables an interactive item. Applies `opacity-50`, `pointer-events-none`, and sets `aria-disabled`. Only meaningful when `interactive` is `true`. Defaults to `false`. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** When `true`, marks the item as the visually highlighted "current" row (e.g. selected list entry, active settings tab). Applies a low-prominence primary tint, an inset ring, and `aria-current="true"`. Stacks cleanly with `interactive` (the focus ring sits on top of the current ring). Defaults to `false`. */
+    readonly current: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Fires when an interactive item is activated via click, Enter, or Space. Payload is the originating DOM event. Does not emit when `interactive` is `false` or `disabled` is `true`. */
+    readonly selected: _angular_core.OutputEmitterRef<Event>;
+    private readonly elementRef;
+    private readonly focusMonitor;
+    private readonly destroyRef;
+    private readonly variantResult;
+    readonly rootClasses: _angular_core.Signal<string>;
+    readonly leadingClasses: _angular_core.Signal<string>;
+    readonly contentClasses: _angular_core.Signal<string>;
+    readonly titleClasses: _angular_core.Signal<string>;
+    readonly descriptionClasses: _angular_core.Signal<string>;
+    readonly trailingClasses: _angular_core.Signal<string>;
+    ngOnInit(): void;
+    onActivate(event: Event): void;
+    onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ItemComponent, "tw-item", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; }, { "selected": "selected"; }, never, ["[twItemLeading]", "[twItemTitle]", "[twItemDescription]", "[twItemTrailing]"], true, never>;
+}
+declare class ItemLeadingDirective {
+    private readonly item;
+    readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ItemLeadingDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ItemLeadingDirective, "[twItemLeading]", never, {}, {}, never, never, true, never>;
+}
+declare class ItemTitleDirective {
+    private readonly item;
+    readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ItemTitleDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ItemTitleDirective, "[twItemTitle]", never, {}, {}, never, never, true, never>;
+}
+declare class ItemDescriptionDirective {
+    private readonly item;
+    readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ItemDescriptionDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ItemDescriptionDirective, "[twItemDescription]", never, {}, {}, never, never, true, never>;
+}
+declare class ItemTrailingDirective {
+    private readonly item;
+    readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ItemTrailingDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ItemTrailingDirective, "[twItemTrailing]", never, {}, {}, never, never, true, never>;
+}
+
+export { ItemComponent, ItemDescriptionDirective, ItemLeadingDirective, ItemTitleDirective, ItemTrailingDirective };
+export type { ItemAlign, ItemSize };