@cdevhub/ngx-tw 0.2.1 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdevhub/ngx-tw",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "Angular component library for Tailwind CSS v4 — accessible, signal-based, built on Angular CDK.",
   "keywords": [
     "angular",
@@ -24,26 +24,8 @@
   "bugs": {
     "url": "https://github.com/avs2001/ngx-tw/issues"
   },
-  "peerDependencies": {
-    "@angular/common": "^21.2.0",
-    "@angular/core": "^21.2.0",
-    "@angular/cdk": "^21.0.0",
-    "tailwindcss": "^4.0.0",
-    "tailwind-variants": "^0.3.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "engines": {
-    "node": ">=20.19.0 || >=22.12.0"
-  },
-  "sideEffects": false,
-  "publishConfig": {
-    "access": "public"
-  },
-  "module": "fesm2022/cdevhub-ngx-tw.mjs",
-  "typings": "types/cdevhub-ngx-tw.d.ts",
   "exports": {
+    "./theme/*.css": "./theme/*.css",
     "./package.json": {
       "default": "./package.json"
     },
@@ -59,6 +41,10 @@
       "types": "./types/cdevhub-ngx-tw-alert.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-alert.mjs"
     },
+    "./aspect-ratio": {
+      "types": "./types/cdevhub-ngx-tw-aspect-ratio.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-aspect-ratio.mjs"
+    },
     "./avatar": {
       "types": "./types/cdevhub-ngx-tw-avatar.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-avatar.mjs"
@@ -135,6 +121,10 @@
       "types": "./types/cdevhub-ngx-tw-empty-state.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-empty-state.mjs"
     },
+    "./file-upload": {
+      "types": "./types/cdevhub-ngx-tw-file-upload.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-file-upload.mjs"
+    },
     "./flip-card": {
       "types": "./types/cdevhub-ngx-tw-flip-card.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-flip-card.mjs"
@@ -163,6 +153,10 @@
       "types": "./types/cdevhub-ngx-tw-menu.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-menu.mjs"
     },
+    "./number-input": {
+      "types": "./types/cdevhub-ngx-tw-number-input.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-number-input.mjs"
+    },
     "./paginator": {
       "types": "./types/cdevhub-ngx-tw-paginator.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-paginator.mjs"
@@ -239,6 +233,10 @@
       "types": "./types/cdevhub-ngx-tw-tabs.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-tabs.mjs"
     },
+    "./tags-input": {
+      "types": "./types/cdevhub-ngx-tw-tags-input.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-tags-input.mjs"
+    },
     "./textarea": {
       "types": "./types/cdevhub-ngx-tw-textarea.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-textarea.mjs"
@@ -262,7 +260,34 @@
     "./tooltip": {
       "types": "./types/cdevhub-ngx-tw-tooltip.d.ts",
       "default": "./fesm2022/cdevhub-ngx-tw-tooltip.mjs"
+    },
+    "./transfer": {
+      "types": "./types/cdevhub-ngx-tw-transfer.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-transfer.mjs"
+    },
+    "./tree": {
+      "types": "./types/cdevhub-ngx-tw-tree.d.ts",
+      "default": "./fesm2022/cdevhub-ngx-tw-tree.mjs"
     }
   },
+  "peerDependencies": {
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/cdk": "^22.0.0",
+    "tailwindcss": "^4.0.0",
+    "tailwind-variants": "^0.3.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "engines": {
+    "node": "^22.22.3 || ^24.15.0 || >=26.0.0"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "fesm2022/cdevhub-ngx-tw.mjs",
+  "typings": "types/cdevhub-ngx-tw.d.ts",
   "type": "module"
 }

package/theme/index.css

@@ -25,8 +25,16 @@
   }
 }
 
-/* Scan library source for Tailwind class usage */
-@source "../src/**/*.ts";
+/* ===== Library class scanning =====
+   Paths here resolve relative to THIS file's location in the *published*
+   package (`node_modules/@cdevhub/ngx-tw/theme/`), because that is the only
+   copy a consumer ever imports. The published tarball ships compiled bundles
+   (`fesm2022/*.mjs`) and no `.ts` source, and Tailwind v4 never auto-scans
+   `node_modules` — so without this line a consumer's build emits the semantic
+   tokens and base layer but *zero* component utilities, silently. Tailwind
+   does not error on a glob that matches nothing, so a wrong path here fails
+   invisibly — `npm run verify:package` is what guards it. */
+@source "../fesm2022/**/*.mjs";
 
 /* ===== Slot-token utility safelist =====
    Components consume role slot utilities (`bg-info-soft`, `text-info-fg`, …)

package/types/cdevhub-ngx-tw-aspect-ratio.d.ts

@@ -0,0 +1,40 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Sets the native CSS `aspect-ratio` property on its host element, standardizing
+ * the `aspect-[16/9]` pattern consumers otherwise hand-roll across cards,
+ * thumbnails, video, and image grids.
+ *
+ * The directive sets **only** `aspect-ratio` — it does not set `width`,
+ * `display`, or any other layout property (matching Tailwind's `aspect-*`
+ * utility). Block-level hosts already fill their container width; for replaced
+ * elements (`<img>`, `<video>`) pair it with `w-full` / `object-cover` so the
+ * box has a definite cross-axis size.
+ *
+ * Purely presentational: it adds no `role` or `aria-*` and leaves the host
+ * media's own accessibility (`alt`, `aria-*`, `title`) untouched.
+ *
+ * @example
+ * ```html
+ * <div twAspectRatio class="w-full bg-surface-muted"></div>
+ * <img twAspectRatio="16/9" class="w-full object-cover rounded-lg" [src]="thumb" alt="Preview" />
+ * <div [twAspectRatio]="4 / 3" class="w-full"></div>
+ * <video twAspectRatio="21:9" class="w-full" [src]="clip"></video>
+ * ```
+ */
+declare class AspectRatioDirective {
+    /**
+     * Sets the host's aspect ratio. Accepts a unitless number (e.g. `1.7777`) or a
+     * ratio string using `/` or `:` (e.g. `'16/9'` or `'16:9'`). The value is
+     * normalized to CSS `'<w> / <h>'` form (a bare number `n` becomes `'n / 1'`).
+     * Invalid or non-positive values fall back to the default. Defaults to a
+     * square (`1 / 1`).
+     */
+    readonly twAspectRatio: _angular_core.InputSignal<string | number>;
+    /** The coerced, CSS-valid `aspect-ratio` value applied to the host. */
+    readonly ratio: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AspectRatioDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AspectRatioDirective, "[twAspectRatio]", ["twAspectRatio"], { "twAspectRatio": { "alias": "twAspectRatio"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { AspectRatioDirective };

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Provider, InjectionToken, Type, OnInit, ModelSignal, InputSignal, TemplateRef, OutputEmitterRef, Signal, WritableSignal, EnvironmentProviders } from '@angular/core';
+import { Provider, InjectionToken, Type, OnInit, InputSignal, WritableSignal, TemplateRef, OutputEmitterRef, Signal, ModelSignal, EnvironmentProviders } from '@angular/core';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
 import { RangeBehaviorConfig } from '@cdevhub/ngx-tw/core';
 import { FormValueControl, ValidationError, WithOptionalFieldTree, DisabledReason } from '@angular/forms/signals';
@@ -523,12 +523,14 @@ declare class CalendarComponent<M extends CalendarMode = 'single', D = Date, TOu
      */
     private readonly localStrategies;
     /** Selection mode (§5). Changing this at runtime clears the value and emits `modeChange`. */
-    readonly mode: ModelSignal<CalendarMode>;
+    readonly modeInput: InputSignal<CalendarMode>;
+    readonly mode: WritableSignal<CalendarMode>;
     /**
      * Consumer-bound value. Shape narrows by `M`: `D | null` for single,
      * `D[]` for multiple, `{ start; end }` for range.
      */
-    readonly value: ModelSignal<CalendarValue<M, D>>;
+    readonly valueInput: InputSignal<CalendarValue<M, D>>;
+    readonly value: WritableSignal<CalendarValue<M, D>>;
     /** Anchor date for the displayed view. Defaults to today on mount. */
     readonly startAt: InputSignal<D | null>;
     /** Minimum selectable date. */
@@ -826,14 +828,43 @@ declare class CalendarComponent<M extends CalendarMode = 'single', D = Date, TOu
     clearSelection(): void;
     /** Resets to initial state — value + view + active date per `resetBehavior`. Phase 3 extends this with form-reset integration. */
     reset(): void;
-    /** Revalidates constraints + cell filters (Phase 4 wires it). */
+    /**
+     * Re-runs validation against the current constraints and cell filters.
+     *
+     * Call this after mutating a constraint imperatively (rather than through an
+     * input binding), so the bound control's errors reflect the new rules.
+     */
     revalidate(): void;
-    /** Opens the overlay. Phase 10 wires the CDK overlay; inline mode is a no-op. */
+    /**
+     * Opens the overlay.
+     *
+     * @deprecated Not implemented. `tw-calendar` is inline-only today; the overlay
+     * is part of the phased v1 cutover. Use `tw-date-picker` or
+     * `tw-date-range-picker` for an overlay-mounted calendar. Throws in dev mode.
+     */
     open(): void;
-    /** Closes the overlay. */
+    /**
+     * Closes the overlay.
+     *
+     * @deprecated Not implemented — see {@link open}. Throws in dev mode.
+     */
     close(): void;
-    /** Toggles the overlay. */
+    /**
+     * Toggles the overlay.
+     *
+     * @deprecated Not implemented — see {@link open}. Throws in dev mode.
+     */
     toggle(): void;
+    /**
+     * Fails loudly in development for the unimplemented overlay API.
+     *
+     * These three shipped as silent no-ops with JSDoc that described them as
+     * working ("Closes the overlay."), which Compodoc rendered straight into the
+     * published API table. A consumer calling `calendar.open()` got no overlay, no
+     * error, and no clue. Dev-mode throw turns that into an immediate, explainable
+     * failure while leaving production builds untouched.
+     */
+    private warnOverlayUnsupported;
     /** Imperatively focuses the currently active cell. */
     focusActiveCell(): void;
     /** @internal */
@@ -917,7 +948,7 @@ declare class CalendarComponent<M extends CalendarMode = 'single', D = Date, TOu
     /** Locale-aware long-form date format used in announcements (e.g. "Wednesday, April 15, 2026"). */
     private formatDate;
     static ɵfac: i0.ɵɵFactoryDeclaration<CalendarComponent<any, any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarComponent<any, any, any>, "tw-calendar", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "disabledDaysOfWeek": { "alias": "disabledDaysOfWeek"; "required": false; "isSignal": true; }; "constraints": { "alias": "constraints"; "required": false; "isSignal": true; }; "minRangeLength": { "alias": "minRangeLength"; "required": false; "isSignal": true; }; "maxRangeLength": { "alias": "maxRangeLength"; "required": false; "isSignal": true; }; "maxSelections": { "alias": "maxSelections"; "required": false; "isSignal": true; }; "maxSelectionBehavior": { "alias": "maxSelectionBehavior"; "required": false; "isSignal": true; }; "errorAriaDescribedBy": { "alias": "errorAriaDescribedBy"; "required": false; "isSignal": true; }; "rangeClickBehavior": { "alias": "rangeClickBehavior"; "required": false; "isSignal": true; }; "rangeBehavior": { "alias": "rangeBehavior"; "required": false; "isSignal": true; }; "dateClass": { "alias": "dateClass"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "monthColumns": { "alias": "monthColumns"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "resetBehavior": { "alias": "resetBehavior"; "required": false; "isSignal": true; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "intl": { "alias": "intl"; "required": false; "isSignal": true; }; }, { "mode": "modeChange"; "value": "valueChange"; "valueChange": "valueChange"; "selectionStart": "selectionStart"; "rangePreview": "rangePreview"; "selectionComplete": "selectionComplete"; "selectionRestart": "selectionRestart"; "selectionCleared": "selectionCleared"; "selectionLimitReached": "selectionLimitReached"; "presetChange": "presetChange"; "viewChange": "viewChange"; "activeDateChange": "activeDateChange"; "monthChange": "monthChange"; "yearChange": "yearChange"; "cellClick": "cellClick"; "cellHover": "cellHover"; "modeChange": "modeChange"; }, never, ["[twCalendarPresets]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarComponent<any, any, any>, "tw-calendar", never, { "modeInput": { "alias": "mode"; "required": false; "isSignal": true; }; "valueInput": { "alias": "value"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "disabledDaysOfWeek": { "alias": "disabledDaysOfWeek"; "required": false; "isSignal": true; }; "constraints": { "alias": "constraints"; "required": false; "isSignal": true; }; "minRangeLength": { "alias": "minRangeLength"; "required": false; "isSignal": true; }; "maxRangeLength": { "alias": "maxRangeLength"; "required": false; "isSignal": true; }; "maxSelections": { "alias": "maxSelections"; "required": false; "isSignal": true; }; "maxSelectionBehavior": { "alias": "maxSelectionBehavior"; "required": false; "isSignal": true; }; "errorAriaDescribedBy": { "alias": "errorAriaDescribedBy"; "required": false; "isSignal": true; }; "rangeClickBehavior": { "alias": "rangeClickBehavior"; "required": false; "isSignal": true; }; "rangeBehavior": { "alias": "rangeBehavior"; "required": false; "isSignal": true; }; "dateClass": { "alias": "dateClass"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "monthColumns": { "alias": "monthColumns"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "resetBehavior": { "alias": "resetBehavior"; "required": false; "isSignal": true; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "intl": { "alias": "intl"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "selectionStart": "selectionStart"; "rangePreview": "rangePreview"; "selectionComplete": "selectionComplete"; "selectionRestart": "selectionRestart"; "selectionCleared": "selectionCleared"; "selectionLimitReached": "selectionLimitReached"; "presetChange": "presetChange"; "viewChange": "viewChange"; "activeDateChange": "activeDateChange"; "monthChange": "monthChange"; "yearChange": "yearChange"; "cellClick": "cellClick"; "cellHover": "cellHover"; "modeChange": "modeChange"; }, never, ["[twCalendarPresets]"], true, never>;
 }
 
 /**

package/types/cdevhub-ngx-tw-command-palette.d.ts

@@ -205,6 +205,13 @@ declare class CommandPaletteComponent {
     private setupFocusTrap;
     private destroyFocusTrap;
     private disposeOverlay;
+    /**
+     * Aborts an in-flight close, leaving the palette open.
+     *
+     * The overlay is still attached (only the detach is deferred), so this
+     * restores the focus trap that `closePalette` tore down up front.
+     */
+    private cancelPendingClose;
     private clearCloseTimer;
     private clearAnnounceTimer;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CommandPaletteComponent, never>;

package/types/cdevhub-ngx-tw-date-picker.d.ts

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { OnInit, TemplateRef, Signal } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 import { TwSize, TwColor, TimePickerFormat, ErrorStateMatcher } from '@cdevhub/ngx-tw/core';
 export { TimePickerFormat } from '@cdevhub/ngx-tw/core';
 import { FormFieldControl } from '@cdevhub/ngx-tw/form-field';
@@ -72,14 +72,14 @@ interface DatePickerTimeConfig<D = Date> {
  * All date operations go through the injected `DateAdapter<D>`; call
  * `provideNativeDateAdapter()` in your app providers to bootstrap the default.
  */
-declare class DatePickerComponent<D = Date> extends FormFieldControl<D> implements ControlValueAccessor, OnInit {
+declare class DatePickerComponent<D = Date> extends FormFieldControl<D> implements ControlValueAccessor, Validator, OnInit {
     /** Id on the date-picker's input element. Auto-generated when not provided. Used by the form-field's `<label for>` attribute. */
     readonly idInput: _angular_core.InputSignal<string | undefined>;
-    /** Minimum selectable date. Typed input earlier than this sets `errorState` and the calendar disables the cell. Defaults to `null`. */
+    /** Minimum selectable date. Typed input earlier than this commits the value and marks the bound control invalid with `calendarMinDate`; the calendar disables the cell. Defaults to `null`. */
     readonly minDate: _angular_core.InputSignal<D | null>;
-    /** Maximum selectable date. Typed input later than this sets `errorState` and the calendar disables the cell. Defaults to `null`. */
+    /** Maximum selectable date. Typed input later than this commits the value and marks the bound control invalid with `calendarMaxDate`; the calendar disables the cell. Defaults to `null`. */
     readonly maxDate: _angular_core.InputSignal<D | null>;
-    /** Per-date predicate — return `false` to disable. Applied in both the calendar and the text-parse path. */
+    /** Per-date predicate — return `false` to disable. Applied in the calendar, the text-parse path, and the `calendarDisabledDate` validation error. */
     readonly dateFilter: _angular_core.InputSignal<DateFilterFn<D> | null>;
     /** Which calendar view opens first — `'day'`, `'month'`, or `'year'`. Defaults to `'day'`. */
     readonly startView: _angular_core.InputSignal<CalendarViewState>;
@@ -173,7 +173,7 @@ declare class DatePickerComponent<D = Date> extends FormFieldControl<D> implemen
     private readonly injector;
     private readonly destroyRef;
     private readonly formField;
-    private readonly ngControl;
+    private ngControl;
     private readonly parentForm;
     private readonly parentFormGroup;
     private readonly defaultMatcher;
@@ -190,10 +190,31 @@ declare class DatePickerComponent<D = Date> extends FormFieldControl<D> implemen
     readonly internalValue: _angular_core.WritableSignal<D | null>;
     /** @internal */
     readonly rawInputText: _angular_core.WritableSignal<string>;
-    /** @internal */
-    readonly parseError: _angular_core.WritableSignal<boolean>;
-    /** @internal */
-    readonly rangeError: _angular_core.WritableSignal<boolean>;
+    /**
+     * @internal The text the user typed that could not be parsed into a date,
+     * or `null` when the current entry parsed cleanly.
+     *
+     * This is the single source of truth for "the typed text is bad". It drives
+     * both the visual error state (via `parseError` below) and the form error
+     * (via `validate()`, which feeds it to `calendarValidator` as
+     * `lastInvalidFormValue`). Keeping one field instead of a boolean flag plus a
+     * separate string is what stops the two from disagreeing.
+     */
+    private readonly unparseableText;
+    /** @internal Whether the current input text failed to parse. */
+    readonly parseError: Signal<boolean>;
+    /**
+     * @internal Whether the committed value violates `minDate` / `maxDate` /
+     * `dateFilter`.
+     *
+     * Derived, not a flag. An out-of-range entry is committed to the form (so the
+     * control holds what the user typed and is *invalid*, rather than silently
+     * keeping an older value), which means the value-sync effect below runs and
+     * would immediately clear any manually-set flag. Deriving it also keeps the
+     * error correct when the consumer moves a constraint after the fact, which a
+     * flag set once at commit time cannot do.
+     */
+    readonly rangeError: Signal<boolean>;
     /** @internal */
     readonly focusedSignal: _angular_core.WritableSignal<boolean>;
     private readonly cvaDisabled;
@@ -305,6 +326,11 @@ declare class DatePickerComponent<D = Date> extends FormFieldControl<D> implemen
     registerOnChange(fn: (value: D | null) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
+    private validatorOnChange;
+    /** @internal */
+    validate(control: AbstractControl): ValidationErrors | null;
+    /** @internal */
+    registerOnValidatorChange(fn: () => void): void;
     /** @internal */
     setDescribedByIds(ids: string[]): void;
     /** @internal */

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 };