@cdevhub/ngx-tw 0.2.0 → 0.3.0

package/types/cdevhub-ngx-tw-file-upload.d.ts

@@ -0,0 +1,250 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, Signal, TemplateRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { TwSize, ErrorStateMatcher } from '@cdevhub/ngx-tw/core';
+import { FormFieldControl } from '@cdevhub/ngx-tw/form-field';
+
+/** Lifecycle status of a single selected file. */
+type FileUploadStatus = 'pending' | 'uploading' | 'success' | 'error';
+/** Visual variant of the drop zone container. */
+type FileUploadVariant = 'outline' | 'soft';
+/** Reason a file was rejected during validation. */
+type FileUploadRejectionReason = 'accept' | 'size' | 'count';
+/** A single tracked entry in the file-upload's internal state. */
+interface FileUploadItem {
+    /** Stable opaque id for this entry. Generated by the component on add. Use as the key when calling `setItemProgress` / `setItemStatus`. */
+    readonly id: string;
+    /** The underlying `File` object as provided by the browser (or by `writeValue`). */
+    readonly file: File;
+    /** Current upload progress, integer 0–100. `0` when no progress has been reported. */
+    readonly progress: number;
+    /** Current lifecycle status. Defaults to `'pending'`. */
+    readonly status: FileUploadStatus;
+    /** Optional error message attached when `status === 'error'`. Displayed in the file row and announced via `LiveAnnouncer`. */
+    readonly error?: string;
+}
+/** Payload emitted on `fileRejected`. */
+interface FileUploadRejection {
+    /** The browser-supplied `File` that was rejected. */
+    readonly file: File;
+    /** Why the file was rejected. */
+    readonly reason: FileUploadRejectionReason;
+    /** Human-readable message suitable for assistive-tech announcement and inline display. */
+    readonly message: string;
+}
+/**
+ * Structural directive that captures a template used to render each item row.
+ * Apply with `*twFileUploadItem="let item"` to override the default row layout.
+ *
+ * The template context exposes the current `FileUploadItem` as both `$implicit`
+ * and `item`, so both `let-item` and `let-item="item"` work.
+ */
+declare class FileUploadItemDirective {
+    /** @internal Reference to the captured template — read by the host component. */
+    readonly templateRef: TemplateRef<{
+        $implicit: FileUploadItem;
+        item: FileUploadItem;
+    }>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FileUploadItemDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FileUploadItemDirective, "ng-template[twFileUploadItem]", never, {}, {}, never, never, true, never>;
+}
+declare class FileUploadComponent extends FormFieldControl<File[]> implements ControlValueAccessor, OnInit {
+    /** When true, the user can select more than one file. Mirrors to the hidden `<input multiple>` attribute. Defaults to `false`. */
+    readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Comma-separated list of accepted file types using the native `<input accept>` syntax (e.g., `'image/*,.pdf'`). Forwarded to the hidden input and used to reject dropped files that do not match. Defaults to `undefined` (accept any). */
+    readonly accept: _angular_core.InputSignal<string | undefined>;
+    /** Maximum size per file, in bytes. Files exceeding this are rejected with reason `'size'` and never reach `value`. Defaults to `undefined` (no limit). */
+    readonly maxSize: _angular_core.InputSignal<number | undefined>;
+    /** Maximum total file count. Drops that would push the count over this limit are rejected with reason `'count'`. Ignored when `multiple` is `false` (the limit is always 1). Defaults to `undefined` (no limit). */
+    readonly maxFiles: _angular_core.InputSignal<number | undefined>;
+    /** Visual style of the drop zone. `'outline'` renders a dashed-bordered transparent region; `'soft'` renders a filled muted background. Defaults to `'outline'`. */
+    readonly variant: _angular_core.InputSignal<FileUploadVariant>;
+    /** Controls overall density: drop-zone padding, icon scale, headline typography. Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    /** When true, blocks file selection (button, click, drop, keyboard) and applies muted styling. Reactive forms also propagate `disabled` via `setDisabledState`. Defaults to `false`. */
+    readonly disabledInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Marks the control as required. Mirrors to `aria-required`. Also inferred from `Validators.required` on a bound `NgControl`. Defaults to `false`. */
+    readonly requiredInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Headline text rendered inside the drop zone (e.g., `'Drag files here'`). Projected `[twFileUploadHeadline]` content takes precedence over this input. */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Secondary text rendered under the label (e.g., `'PDF up to 10MB'`). Projected `[twFileUploadDescription]` content takes precedence. */
+    readonly description: _angular_core.InputSignal<string | undefined>;
+    /** Label rendered inside the trigger button. Defaults to `'Choose files'`. Use `'Choose file'` when `multiple` is `false` (consumer responsibility). */
+    readonly triggerLabel: _angular_core.InputSignal<string>;
+    /** Accessible name applied to the host when no visible label is projected. 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>;
+    /** Optional `name` attribute on the hidden `<input type="file">` for native form submissions. */
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    /** Id on the host element. Auto-generated as `tw-file-upload-N` when not provided. Used by the form-field's `<label for>` attribute. */
+    readonly idInput: _angular_core.InputSignal<string | undefined>;
+    /** Per-instance override of the {@link ErrorStateMatcher}. When omitted, the component uses the `TW_ERROR_STATE_MATCHER` token's value. */
+    readonly errorStateMatcher: _angular_core.InputSignal<ErrorStateMatcher | undefined>;
+    /** Fires once per add operation with the items that were accepted and appended. Does not fire for rejected files (see `fileRejected`). Does not fire on `writeValue`. */
+    readonly filesAdded: _angular_core.OutputEmitterRef<FileUploadItem[]>;
+    /** Fires when a file is removed via the remove button or programmatic `remove()`. Does not fire on `writeValue`. */
+    readonly fileRemoved: _angular_core.OutputEmitterRef<FileUploadItem>;
+    /** Fires for each file that failed validation during add. Payload includes a human-readable message suitable for assistive-tech announcement. */
+    readonly fileRejected: _angular_core.OutputEmitterRef<FileUploadRejection>;
+    /** Fires when all files are cleared at once via programmatic `clear()`. Does not fire on `writeValue`, even when the new value is empty. */
+    readonly cleared: _angular_core.OutputEmitterRef<void>;
+    private readonly elementRef;
+    private readonly focusMonitor;
+    private readonly liveAnnouncer;
+    private readonly destroyRef;
+    private readonly ngControl;
+    private readonly parentForm;
+    private readonly parentFormGroup;
+    private readonly defaultMatcher;
+    private readonly itemsSignal;
+    private readonly cvaDisabled;
+    private readonly isDraggingSignal;
+    private readonly dragHasInvalidFilesSignal;
+    private readonly _focused;
+    private readonly _ngControlRev;
+    private readonly _formSubmitRev;
+    private readonly describedByIdsSignal;
+    private readonly labelledByIdsSignal;
+    private dragCounter;
+    private onChange;
+    private onTouched;
+    /** @internal Captured custom-item template (from `*twFileUploadItem`). When absent, the default row template renders. */
+    readonly itemSlot: Signal<FileUploadItemDirective | undefined>;
+    /** @internal Dropzone wrapper — used to scope the form-field container-click guard. */
+    private readonly dropzoneRef;
+    /** @internal The visible trigger button — the keyboard-operable control that receives focus on container click and after the last item is removed. */
+    private readonly triggerRef;
+    /** @internal Hidden native input — used as the OS picker trigger. */
+    private readonly hiddenInputRef;
+    private readonly uid;
+    /** @internal Auto-generated host id used when `[id]` is not supplied. */
+    readonly hostId: string;
+    /** @internal */
+    readonly headlineId: string;
+    /** @internal */
+    readonly descriptionId: string;
+    /** @internal */
+    readonly hiddenInputId: string;
+    /** Current items with their progress and status. Snapshot of internal state. */
+    readonly items: Signal<readonly FileUploadItem[]>;
+    /** True while a valid file drag is over the drop zone. */
+    readonly isDragging: Signal<boolean>;
+    /** Convenience alias for `items().length`. Useful for counter hints. */
+    readonly valueLength: Signal<number>;
+    /** @internal */
+    readonly id: Signal<string>;
+    /** @internal */
+    readonly value: Signal<File[] | 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 Validation errors map from the bound `NgControl`. */
+    readonly errors: Signal<Record<string, unknown> | null>;
+    /** @internal */
+    readonly controlType = "file-upload";
+    /** @internal */
+    readonly userAriaDescribedBy: Signal<string | undefined>;
+    /** @internal */
+    readonly userAriaLabelledby: Signal<string | undefined>;
+    /** @internal */
+    readonly effectiveAriaLabelledby: Signal<string | undefined>;
+    /** @internal */
+    readonly effectiveAriaDescribedby: Signal<string | undefined>;
+    private readonly stateVariant;
+    private readonly variantResult;
+    /** @internal */
+    readonly rootClasses: Signal<string>;
+    /** @internal */
+    readonly dropzoneClasses: Signal<string>;
+    /** @internal */
+    readonly dropzoneInnerClasses: Signal<string>;
+    /** @internal */
+    readonly illustrationClasses: Signal<string>;
+    /** @internal */
+    readonly headlineClasses: Signal<string>;
+    /** @internal */
+    readonly descriptionClasses: Signal<string>;
+    /** @internal */
+    readonly listClasses: Signal<string>;
+    /** @internal */
+    readonly itemClasses: Signal<string>;
+    /** @internal */
+    readonly itemIconClasses: Signal<string>;
+    /** @internal */
+    readonly itemBodyClasses: Signal<string>;
+    /** @internal */
+    readonly itemNameClasses: Signal<string>;
+    /** @internal */
+    readonly itemMetaClasses: Signal<string>;
+    /** @internal */
+    readonly itemProgressClasses: Signal<string>;
+    /** @internal */
+    readonly itemActionsClasses: Signal<string>;
+    /** @internal Mapping component size → icon size for the illustration. */
+    readonly iconSize: Signal<TwSize>;
+    constructor();
+    /** Programmatically opens the OS file picker. No-op when disabled. */
+    open(): void;
+    /** Removes the item with the given id. Emits `fileRemoved`. No-op when the id is unknown or the component is disabled. */
+    remove(id: string): void;
+    /** Removes all items. Emits `cleared` and calls `onChange([])`. No-op when already empty or disabled. */
+    clear(): void;
+    /** Updates the per-item progress (0–100, clamped). Does not change status. No-op when the id is unknown. */
+    setItemProgress(id: string, percent: number): void;
+    /** Updates the per-item status and (optionally) the error message. Announces status transitions via `LiveAnnouncer`. No-op when the id is unknown. */
+    setItemStatus(id: string, status: FileUploadStatus, error?: string): void;
+    /** @internal */
+    onDragEnter(event: DragEvent): void;
+    /** @internal */
+    onDragOver(event: DragEvent): void;
+    /** @internal */
+    onDragLeave(event: DragEvent): void;
+    /** @internal */
+    onDrop(event: DragEvent): void;
+    /** @internal */
+    onTriggerClick(event: MouseEvent): void;
+    /** @internal Called by the hidden `<input type="file">` `change` event. */
+    onNativeChange(event: Event): void;
+    private addFiles;
+    private wrapFile;
+    private reject;
+    private rejectionMessage;
+    private isFileDrag;
+    private computeDragInvalid;
+    writeValue(value: File[] | File | null | undefined): void;
+    registerOnChange(fn: (value: File[]) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    private emitChange;
+    /** @internal */
+    setDescribedByIds(ids: string[]): void;
+    /** @internal */
+    setLabelledByIds(ids: string[]): void;
+    /** @internal */
+    onContainerClick(event: MouseEvent): void;
+    /** @internal */
+    iconNameFor(item: FileUploadItem): string;
+    /** @internal */
+    shouldShowProgress(item: FileUploadItem): boolean;
+    /** @internal */
+    progressColorFor(item: FileUploadItem): 'primary' | 'success' | 'error';
+    /** @internal */
+    metaTextFor(item: FileUploadItem): string;
+    ngOnInit(): void;
+    private hasAccessibleNameHint;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FileUploadComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FileUploadComponent, "tw-file-upload", ["twFileUpload"], { "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "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; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "triggerLabel": { "alias": "triggerLabel"; "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; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "idInput": { "alias": "id"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; }, { "filesAdded": "filesAdded"; "fileRemoved": "fileRemoved"; "fileRejected": "fileRejected"; "cleared": "cleared"; }, ["itemSlot"], ["[twFileUploadIcon]", "[twFileUploadHeadline]", "[twFileUploadDescription]"], true, never>;
+}
+
+export { FileUploadComponent, FileUploadItemDirective };
+export type { FileUploadItem, FileUploadRejection, FileUploadRejectionReason, FileUploadStatus, FileUploadVariant };

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-select.d.ts

@@ -75,7 +75,7 @@ interface TwSelectTriggerContext<T, O = TwSelectOption<T>> {
     selectedOptions: readonly O[];
 }
 /** Rendered row in the panel — either a group-label header or an option. */
-type SelectRenderedRow<T, O = unknown> = {
+type SelectRenderedRow<_T, O = unknown> = {
     readonly kind: 'group-label';
     readonly group: string;
 } | {

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 */