@cdevhub/ngx-tw 0.5.0 → 0.6.1

package/fesm2022/cdevhub-ngx-tw-file-upload-testing.mjs

@@ -0,0 +1,149 @@
+import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+
+/**
+ * Harness for a single attached file in a `tw-file-upload`'s list.
+ *
+ * Reach these through {@link FileUploadHarness.getFiles}.
+ *
+ * Everything here reads the *default* row rendering. A consumer who projects a
+ * `*twFileUploadItem` template replaces the row wholesale — including the
+ * remove control this harness drives — so {@link getName} and {@link remove}
+ * apply only to the built-in row.
+ */
+class FileUploadFileHarness extends ComponentHarness {
+    static hostSelector = 'ul[role="list"] > li';
+    removeButton = this.locatorFor('[data-tw-file-upload-remove]');
+    /** Predicate for `locatorFor` / `locatorForAll`. */
+    static with(options = {}) {
+        return new HarnessPredicate(FileUploadFileHarness, options).addOption('name', options.name, async (h, name) => HarnessPredicate.stringMatches(await h.getName(), name));
+    }
+    /**
+     * The attached file's name, read from the remove control's accessible name
+     * (`Remove <name>`). That is the one place the name is exposed through an
+     * accessibility contract rather than through presentational markup.
+     */
+    async getName() {
+        const label = (await (await this.removeButton()).getAttribute('aria-label')) ?? '';
+        return label.replace(/^Remove /, '');
+    }
+    /**
+     * The row's full rendered text, whitespace-collapsed.
+     *
+     * The name and the meta line sit in adjacent `<span>`s with only a
+     * whitespace-only text node between them, which Angular strips, so they run
+     * together here (`notes.txt10 B`). Prefer {@link getName} and
+     * {@link getMetaText} for the parts; this is the raw read that still says
+     * something about a row rendered from a projected template.
+     */
+    async getText() {
+        return (await (await this.host()).text()).replace(/\s+/g, ' ').trim();
+    }
+    /**
+     * The row's meta line — the formatted size, plus the status and error text
+     * once the item leaves `pending` (`10 B`, `10 B · Uploading`,
+     * `10 B · Failed — <error>`).
+     *
+     * This string is the only place per-item status and error surface in the
+     * DOM: there is no `data-status` hook, and the status otherwise shows up
+     * only in Tailwind classes, which a harness must not read. Derived by
+     * subtracting {@link getName} from {@link getText} for the same reason.
+     */
+    async getMetaText() {
+        const text = await this.getText();
+        const name = await this.getName();
+        return text.startsWith(name) ? text.slice(name.length).trim() : text;
+    }
+    /**
+     * Clicks the row's remove control.
+     *
+     * The component retargets focus in an `afterNextRender` — deliberately, so
+     * that the list has re-rendered before focus moves — so the focus assertion
+     * a caller makes after this resolves is the post-render one.
+     */
+    async remove() {
+        await (await this.removeButton()).click();
+        await this.waitForTasksOutsideAngular();
+    }
+}
+
+/**
+ * Harness for `tw-file-upload`.
+ *
+ * ## What this harness deliberately cannot do
+ *
+ * It cannot attach a file. Selecting a file means populating
+ * `HTMLInputElement.files`, which is read-only to script and which CDK's
+ * `TestElement` — the whole reason a harness runs unchanged against a real
+ * browser — has no operation for. The only way to do it is
+ * `Object.defineProperty` on the raw DOM node, which exists solely in the
+ * Testbed environment. Exposing that would make the harness silently
+ * unusable in every other environment, so attaching stays the caller's job:
+ * seed files through the bound form control (`writeValue` takes a `File[]`),
+ * or through the component's own API, and use this harness for everything
+ * downstream of the attachment.
+ *
+ * Nothing here needs a CDK overlay, so the ordinary fixture loader is enough.
+ *
+ * Note where the ARIA lives: the host is a `role="group"`, which ARIA 1.2 does
+ * not allow to carry `aria-required` / `aria-invalid`, so both sit on the
+ * hidden `<input type="file">` — the element that actually owns the value.
+ * {@link isRequired} and {@link isInvalid} read them from there;
+ * {@link isDisabled} reads `aria-disabled` from the group, which is allowed.
+ */
+class FileUploadHarness extends ComponentHarness {
+    static hostSelector = 'tw-file-upload';
+    /** The hidden native control. It carries the value-owning ARIA and state. */
+    nativeInput = this.locatorFor('input[type="file"]');
+    /** Predicate for `locatorFor` / `locatorForAll`. */
+    static with(options = {}) {
+        return new HarnessPredicate(FileUploadHarness, options)
+            .addOption('label', options.label, async (h, label) => HarnessPredicate.stringMatches(await h.getLabel(), label))
+            .addOption('disabled', options.disabled, async (h, disabled) => (await h.isDisabled()) === disabled);
+    }
+    /** The control's accessible name, from `aria-label` when one is set. */
+    async getLabel() {
+        return (await this.host()).getAttribute('aria-label');
+    }
+    /** Whether the group reports `aria-disabled="true"`. */
+    async isDisabled() {
+        return (await (await this.host()).getAttribute('aria-disabled')) === 'true';
+    }
+    /** Whether the native file input is marked required. */
+    async isRequired() {
+        return (await this.nativeInput()).getProperty('required');
+    }
+    /** Whether the native file input reports `aria-invalid="true"`. */
+    async isInvalid() {
+        return (await (await this.nativeInput()).getAttribute('aria-invalid')) === 'true';
+    }
+    /**
+     * Every attached file, in list order. Returns `[]` when nothing is attached
+     * — the list element is always rendered, just empty.
+     */
+    async getFiles(filters = {}) {
+        return this.locatorForAll(FileUploadFileHarness.with(filters))();
+    }
+    /** The name of every attached file, in list order. */
+    async getFileNames() {
+        const files = await this.getFiles();
+        return Promise.all(files.map((file) => file.getName()));
+    }
+    /**
+     * Removes the first attached file whose name matches. Throws when nothing
+     * matches, rather than failing silently.
+     */
+    async removeFile(name) {
+        const matches = await this.getFiles({ name });
+        if (matches.length === 0) {
+            throw new Error(`FileUploadHarness.removeFile: no attached file matching ${String(name)}.`);
+        }
+        await matches[0].remove();
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FileUploadFileHarness, FileUploadHarness };
+//# sourceMappingURL=cdevhub-ngx-tw-file-upload-testing.mjs.map

package/fesm2022/cdevhub-ngx-tw-file-upload-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cdevhub-ngx-tw-file-upload-testing.mjs","sources":["../../../projects/ngx-tw/file-upload/testing/file-upload-file-harness.ts","../../../projects/ngx-tw/file-upload/testing/file-upload-harness.ts","../../../projects/ngx-tw/file-upload/testing/cdevhub-ngx-tw-file-upload-testing.ts"],"sourcesContent":["import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';\nimport type { BaseHarnessFilters } from '@angular/cdk/testing';\n\n/** Filters accepted by `FileUploadFileHarness.with`. */\nexport interface FileUploadFileHarnessFilters extends BaseHarnessFilters {\n  /** Match by the attached file's name. */\n  name?: string | RegExp;\n}\n\n/**\n * Harness for a single attached file in a `tw-file-upload`'s list.\n *\n * Reach these through {@link FileUploadHarness.getFiles}.\n *\n * Everything here reads the *default* row rendering. A consumer who projects a\n * `*twFileUploadItem` template replaces the row wholesale — including the\n * remove control this harness drives — so {@link getName} and {@link remove}\n * apply only to the built-in row.\n */\nexport class FileUploadFileHarness extends ComponentHarness {\n  static hostSelector = 'ul[role=\"list\"] > li';\n\n  private readonly removeButton = this.locatorFor('[data-tw-file-upload-remove]');\n\n  /** Predicate for `locatorFor` / `locatorForAll`. */\n  static with(\n    options: FileUploadFileHarnessFilters = {},\n  ): HarnessPredicate<FileUploadFileHarness> {\n    return new HarnessPredicate(FileUploadFileHarness, options).addOption(\n      'name',\n      options.name,\n      async (h, name) => HarnessPredicate.stringMatches(await h.getName(), name),\n    );\n  }\n\n  /**\n   * The attached file's name, read from the remove control's accessible name\n   * (`Remove <name>`). That is the one place the name is exposed through an\n   * accessibility contract rather than through presentational markup.\n   */\n  async getName(): Promise<string> {\n    const label = (await (await this.removeButton()).getAttribute('aria-label')) ?? '';\n    return label.replace(/^Remove /, '');\n  }\n\n  /**\n   * The row's full rendered text, whitespace-collapsed.\n   *\n   * The name and the meta line sit in adjacent `<span>`s with only a\n   * whitespace-only text node between them, which Angular strips, so they run\n   * together here (`notes.txt10 B`). Prefer {@link getName} and\n   * {@link getMetaText} for the parts; this is the raw read that still says\n   * something about a row rendered from a projected template.\n   */\n  async getText(): Promise<string> {\n    return (await (await this.host()).text()).replace(/\\s+/g, ' ').trim();\n  }\n\n  /**\n   * The row's meta line — the formatted size, plus the status and error text\n   * once the item leaves `pending` (`10 B`, `10 B · Uploading`,\n   * `10 B · Failed — <error>`).\n   *\n   * This string is the only place per-item status and error surface in the\n   * DOM: there is no `data-status` hook, and the status otherwise shows up\n   * only in Tailwind classes, which a harness must not read. Derived by\n   * subtracting {@link getName} from {@link getText} for the same reason.\n   */\n  async getMetaText(): Promise<string> {\n    const text = await this.getText();\n    const name = await this.getName();\n    return text.startsWith(name) ? text.slice(name.length).trim() : text;\n  }\n\n  /**\n   * Clicks the row's remove control.\n   *\n   * The component retargets focus in an `afterNextRender` — deliberately, so\n   * that the list has re-rendered before focus moves — so the focus assertion\n   * a caller makes after this resolves is the post-render one.\n   */\n  async remove(): Promise<void> {\n    await (await this.removeButton()).click();\n    await this.waitForTasksOutsideAngular();\n  }\n}\n","import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';\nimport type { BaseHarnessFilters } from '@angular/cdk/testing';\nimport {\n  FileUploadFileHarness,\n  type FileUploadFileHarnessFilters,\n} from './file-upload-file-harness';\n\n/** Filters accepted by `FileUploadHarness.with`. */\nexport interface FileUploadHarnessFilters extends BaseHarnessFilters {\n  /** Match by the control's accessible name (its `aria-label`). */\n  label?: string | RegExp;\n  /** Match disabled / enabled controls. */\n  disabled?: boolean;\n}\n\n/**\n * Harness for `tw-file-upload`.\n *\n * ## What this harness deliberately cannot do\n *\n * It cannot attach a file. Selecting a file means populating\n * `HTMLInputElement.files`, which is read-only to script and which CDK's\n * `TestElement` — the whole reason a harness runs unchanged against a real\n * browser — has no operation for. The only way to do it is\n * `Object.defineProperty` on the raw DOM node, which exists solely in the\n * Testbed environment. Exposing that would make the harness silently\n * unusable in every other environment, so attaching stays the caller's job:\n * seed files through the bound form control (`writeValue` takes a `File[]`),\n * or through the component's own API, and use this harness for everything\n * downstream of the attachment.\n *\n * Nothing here needs a CDK overlay, so the ordinary fixture loader is enough.\n *\n * Note where the ARIA lives: the host is a `role=\"group\"`, which ARIA 1.2 does\n * not allow to carry `aria-required` / `aria-invalid`, so both sit on the\n * hidden `<input type=\"file\">` — the element that actually owns the value.\n * {@link isRequired} and {@link isInvalid} read them from there;\n * {@link isDisabled} reads `aria-disabled` from the group, which is allowed.\n */\nexport class FileUploadHarness extends ComponentHarness {\n  static hostSelector = 'tw-file-upload';\n\n  /** The hidden native control. It carries the value-owning ARIA and state. */\n  private readonly nativeInput = this.locatorFor('input[type=\"file\"]');\n\n  /** Predicate for `locatorFor` / `locatorForAll`. */\n  static with(\n    options: FileUploadHarnessFilters = {},\n  ): HarnessPredicate<FileUploadHarness> {\n    return new HarnessPredicate(FileUploadHarness, options)\n      .addOption('label', options.label, async (h, label) =>\n        HarnessPredicate.stringMatches(await h.getLabel(), label),\n      )\n      .addOption(\n        'disabled',\n        options.disabled,\n        async (h, disabled) => (await h.isDisabled()) === disabled,\n      );\n  }\n\n  /** The control's accessible name, from `aria-label` when one is set. */\n  async getLabel(): Promise<string | null> {\n    return (await this.host()).getAttribute('aria-label');\n  }\n\n  /** Whether the group reports `aria-disabled=\"true\"`. */\n  async isDisabled(): Promise<boolean> {\n    return (await (await this.host()).getAttribute('aria-disabled')) === 'true';\n  }\n\n  /** Whether the native file input is marked required. */\n  async isRequired(): Promise<boolean> {\n    return (await this.nativeInput()).getProperty<boolean>('required');\n  }\n\n  /** Whether the native file input reports `aria-invalid=\"true\"`. */\n  async isInvalid(): Promise<boolean> {\n    return (await (await this.nativeInput()).getAttribute('aria-invalid')) === 'true';\n  }\n\n  /**\n   * Every attached file, in list order. Returns `[]` when nothing is attached\n   * — the list element is always rendered, just empty.\n   */\n  async getFiles(\n    filters: FileUploadFileHarnessFilters = {},\n  ): Promise<FileUploadFileHarness[]> {\n    return this.locatorForAll(FileUploadFileHarness.with(filters))();\n  }\n\n  /** The name of every attached file, in list order. */\n  async getFileNames(): Promise<string[]> {\n    const files = await this.getFiles();\n    return Promise.all(files.map((file) => file.getName()));\n  }\n\n  /**\n   * Removes the first attached file whose name matches. Throws when nothing\n   * matches, rather than failing silently.\n   */\n  async removeFile(name: string | RegExp): Promise<void> {\n    const matches = await this.getFiles({ name });\n    if (matches.length === 0) {\n      throw new Error(\n        `FileUploadHarness.removeFile: no attached file matching ${String(name)}.`,\n      );\n    }\n    await matches[0].remove();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/cdevhub-ngx-tw-file-upload.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, Directive, input, booleanAttribute, output, ElementRef, DestroyRef, signal, contentChild, viewChild, computed, afterNextRender, isDevMode, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, TemplateRef, Directive, input, booleanAttribute, output, ElementRef, Injector, DestroyRef, signal, contentChild, viewChild, computed, afterNextRender, isDevMode, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
-import { NgControl, NgForm, FormGroupDirective, Validators } from '@angular/forms';
+import { NgControl } from '@angular/forms';
 import { FocusMonitor, LiveAnnouncer } from '@angular/cdk/a11y';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { isObservable, merge } from 'rxjs';
+import { isObservable } from 'rxjs';
 import { tv } from 'tailwind-variants';
-import { TW_ERROR_STATE_MATCHER } from '@cdevhub/ngx-tw/core';
+import { wireErrorState } from '@cdevhub/ngx-tw/core';
 import { FormFieldControl, TW_FORM_FIELD_CONTROL } from '@cdevhub/ngx-tw/form-field';
 import { ButtonDirective } from '@cdevhub/ngx-tw/button';
 import { IconComponent } from '@cdevhub/ngx-tw/icon';
@@ -89,11 +89,18 @@ const fileUploadVariants = tv({
             idle: {},
             // 1% scale-up — below Tailwind's smallest `scale-95` step but visually
             // correct for a subtle drag-over lift; the alternative is no lift.
+            // No `dark:` variant here, deliberately. The theme layer already
+            // inverts the ramp: `_dark.css` maps `--color-primary-50` onto
+            // `blue-950`, so `bg-primary-soft` IS the dark wash in dark mode. A
+            // `dark:bg-primary-900/20` override on top resolved to `blue-100` —
+            // near-white — and turned the drag-over affordance into a bright flash
+            // over a `gray-950` dropzone. These were the only two `dark:` utilities
+            // in the library, and both were wrong for this reason.
             draggingValid: {
-                dropzone: 'border-primary-500 bg-primary-50 dark:bg-primary-900/20 scale-[1.01]',
+                dropzone: 'border-primary-500 bg-primary-soft scale-[1.01]',
             },
             draggingInvalid: {
-                dropzone: 'border-error-500 bg-error-50 dark:bg-error-900/20',
+                dropzone: 'border-error-500 bg-error-soft',
             },
             error: { dropzone: 'border-error-500' },
         },
@@ -200,20 +207,20 @@ class FileUploadComponent extends FormFieldControl {
     /** Marks the control as required. Mirrors to `aria-required`. Also inferred from `Validators.required` on a bound `NgControl`. Defaults to `false`. */
     requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : /* istanbul ignore next */ {}), alias: 'required',
         transform: booleanAttribute });
-    /** Headline text rendered inside the drop zone (e.g., `'Drag files here'`). Projected `[twFileUploadHeadline]` content takes precedence over this input. */
+    /** Headline text rendered inside the drop zone (e.g., `'Drag files here'`). Projected `[twFileUploadHeadline]` content takes precedence over this input. Defaults to `undefined`. */
     label = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    /** Secondary text rendered under the label (e.g., `'PDF up to 10MB'`). Projected `[twFileUploadDescription]` content takes precedence. */
+    /** Secondary text rendered under the label (e.g., `'PDF up to 10MB'`). Projected `[twFileUploadDescription]` content takes precedence. Defaults to `undefined`. */
     description = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
     /** Label rendered inside the trigger button. Defaults to `'Choose files'`. Use `'Choose file'` when `multiple` is `false` (consumer responsibility). */
     triggerLabel = input('Choose files', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
-    /** Accessible name applied to the host when no visible label is projected. Mirrored to `aria-label`. */
+    /** Accessible name applied to the host when no visible label is projected. Mirrored to `aria-label`. Defaults to `undefined`. */
     ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
-    /** ID of an external element that labels the control. Mirrored to `aria-labelledby`. */
+    /** ID of an external element that labels the control. Mirrored to `aria-labelledby`. Defaults to `undefined`. */
     ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
-    /** ID of an external element that describes the control. Form-field merges its hint/error ids alongside. */
+    /** ID of an external element that describes the control. Form-field merges its hint/error ids alongside. Defaults to `undefined`. Alias: `aria-describedby`. */
     ariaDescribedby = input(undefined, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
     /** Optional `name` attribute on the hidden `<input type="file">` for native form submissions. */
     name = input(undefined, /* @ts-ignore */
@@ -234,13 +241,11 @@ class FileUploadComponent extends FormFieldControl {
     cleared = output();
     // ── Injections ──
     elementRef = inject((ElementRef));
+    injector = inject(Injector);
     focusMonitor = inject(FocusMonitor);
     liveAnnouncer = inject(LiveAnnouncer);
     destroyRef = inject(DestroyRef);
     ngControl = inject(NgControl, { optional: true, self: true });
-    parentForm = inject(NgForm, { optional: true });
-    parentFormGroup = inject(FormGroupDirective, { optional: true });
-    defaultMatcher = inject(TW_ERROR_STATE_MATCHER);
     // ── Internal mutable state ──
     itemsSignal = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "itemsSignal" }] : /* istanbul ignore next */ []));
@@ -252,10 +257,13 @@ class FileUploadComponent extends FormFieldControl {
     ...(ngDevMode ? [{ debugName: "dragHasInvalidFilesSignal" }] : /* istanbul ignore next */ []));
     _focused = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
-    _ngControlRev = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_ngControlRev" }] : /* istanbul ignore next */ []));
-    _formSubmitRev = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_formSubmitRev" }] : /* istanbul ignore next */ []));
+    /** @internal Shared `errorState` / `required` / `errors` derivation — see `wireErrorState`. */
+    errorWiring = wireErrorState({
+        ngControl: () => this.ngControl,
+        matcher: () => this.errorStateMatcher(),
+        required: () => this.requiredInput(),
+        track: [() => this._focused()],
+    });
     describedByIdsSignal = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
     labelledByIdsSignal = signal([], /* @ts-ignore */
@@ -311,36 +319,16 @@ class FileUploadComponent extends FormFieldControl {
     ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
     /** @internal */
     disabled = computed(() => {
-        this._ngControlRev();
+        this.errorWiring.rev();
         return this.disabledInput() || this.cvaDisabled() || !!this.ngControl?.disabled;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /** @internal */
-    required = computed(() => {
-        this._ngControlRev();
-        if (this.requiredInput())
-            return true;
-        const ctrl = this.ngControl?.control;
-        return !!ctrl?.hasValidator(Validators.required);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-    /** @internal */
-    errorState = computed(() => {
-        this._ngControlRev();
-        this._formSubmitRev();
-        this._focused();
-        const matcher = this.errorStateMatcher() ?? this.defaultMatcher;
-        const form = this.parentFormGroup ??
-            this.parentForm;
-        return matcher.isErrorState(this.ngControl?.control ?? null, form);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
+    required = this.errorWiring.required;
+    /** @internal */
+    errorState = this.errorWiring.errorState;
     /** @internal Validation errors map from the bound `NgControl`. */
-    errors = computed(() => {
-        this._ngControlRev();
-        return this.ngControl?.control?.errors ?? null;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    errors = this.errorWiring.errors;
     /** @internal */
     controlType = 'file-upload';
     /** @internal */
@@ -491,8 +479,21 @@ class FileUploadComponent extends FormFieldControl {
         this.emitChange();
         this.fileRemoved.emit(removed);
         this.liveAnnouncer.announce(`${removed.file.name} removed.`, 'polite');
-        // Move focus to the next remove button, or to the trigger button when none remain.
-        queueMicrotask(() => {
+        // Move focus to the next remove button, or to the trigger button when none
+        // remain.
+        //
+        // This MUST wait for the render, not merely for the microtask queue. A
+        // `queueMicrotask` here (what this used to be) runs before Angular's
+        // zoneless scheduler has re-rendered the list, so `nextButtons` was still
+        // the PRE-removal node list: the "next" button we focused was the one about
+        // to be destroyed, and focus fell to `<body>`. Removing the last item took
+        // the `length === 0` branch for the same reason — the count was stale, so
+        // the trigger never got focus either.
+        //
+        // It survived unit testing because a spec that calls `detectChanges()`
+        // between the click and the assertion has already re-rendered by the time
+        // the microtask runs, which is the opposite order from a real browser.
+        afterNextRender(() => {
             const host = this.elementRef.nativeElement;
             const nextButtons = host.querySelectorAll('[data-tw-file-upload-remove]');
             if (nextButtons.length === 0) {
@@ -502,7 +503,7 @@ class FileUploadComponent extends FormFieldControl {
                 const fallback = nextButtons[Math.min(idx, nextButtons.length - 1)];
                 fallback?.focus();
             }
-        });
+        }, { injector: this.injector });
     }
     /** Removes all items. Emits `cleared` and calls `onChange([])`. No-op when already empty or disabled. */
     clear() {
@@ -839,28 +840,14 @@ class FileUploadComponent extends FormFieldControl {
                 this._focused.set(!!origin);
                 if (wasFocused && !origin) {
                     this.onTouched();
-                    this._ngControlRev.update((n) => n + 1);
+                    this.errorWiring.bump();
                 }
             });
         }
         this.destroyRef.onDestroy(() => {
             this.focusMonitor.stopMonitoring(this.elementRef);
         });
-        const ctrl = this.ngControl?.control;
-        if (ctrl) {
-            const streams = [ctrl.statusChanges, ctrl.valueChanges].filter((s) => !!s);
-            if (streams.length) {
-                merge(...streams)
-                    .pipe(takeUntilDestroyed(this.destroyRef))
-                    .subscribe(() => this._ngControlRev.update((n) => n + 1));
-            }
-        }
-        const submit = this.parentFormGroup?.ngSubmit ?? this.parentForm?.ngSubmit;
-        if (submit) {
-            submit
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe(() => this._formSubmitRev.update((n) => n + 1));
-        }
+        this.errorWiring.connect();
     }
     // ── Helpers ──
     hasAccessibleNameHint() {
@@ -870,12 +857,12 @@ class FileUploadComponent extends FormFieldControl {
         return !!host.textContent && host.textContent.trim().length > 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: FileUploadComponent, isStandalone: true, selector: "tw-file-upload", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesAdded: "filesAdded", fileRemoved: "fileRemoved", fileRejected: "fileRejected", cleared: "cleared" }, host: { attributes: { "role": "group" }, properties: { "id": "id()", "class": "rootClasses()", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "effectiveAriaLabelledby() || null", "attr.aria-describedby": "effectiveAriaDescribedby() || null", "attr.aria-disabled": "disabled() || null", "attr.aria-required": "required() || null", "attr.aria-invalid": "errorState() || null" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: FileUploadComponent, isStandalone: true, selector: "tw-file-upload", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesAdded: "filesAdded", fileRemoved: "fileRemoved", fileRejected: "fileRejected", cleared: "cleared" }, host: { attributes: { "role": "group" }, properties: { "id": "id()", "class": "rootClasses()", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "effectiveAriaLabelledby() || null", "attr.aria-describedby": "effectiveAriaDescribedby() || null", "attr.aria-disabled": "disabled() || null" } }, providers: [
             {
                 provide: TW_FORM_FIELD_CONTROL,
                 useExisting: forwardRef(() => FileUploadComponent),
             },
-        ], queries: [{ propertyName: "itemSlot", first: true, predicate: FileUploadItemDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropzoneRef", first: true, predicate: ["dropzone"], descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "hiddenInputRef", first: true, predicate: ["hiddenInput"], descendants: true, isSignal: true }], exportAs: ["twFileUpload"], usesInheritance: true, ngImport: i0, template: "<input\n  #hiddenInput\n  type=\"file\"\n  class=\"sr-only\"\n  tabindex=\"-1\"\n  [id]=\"hiddenInputId\"\n  [attr.aria-label]=\"ariaLabel() ?? label() ?? triggerLabel()\"\n  [attr.name]=\"name() || null\"\n  [attr.accept]=\"accept() || null\"\n  [multiple]=\"multiple()\"\n  [disabled]=\"disabled()\"\n  [required]=\"required()\"\n  (change)=\"onNativeChange($event)\"\n/>\n\n<!-- The dropzone is a mouse click/drop convenience target, intentionally NOT a\n     focusable control: the inner trigger <button> owns keyboard operability, so\n     adding tabindex/keydown here would create a nested-interactive structure.\n     No keyboard user is locked out, so the rules' concern does not apply. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<div\n  #dropzone\n  [class]=\"dropzoneClasses()\"\n  (click)=\"open()\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <div [class]=\"dropzoneInnerClasses()\">\n    <div [class]=\"illustrationClasses()\">\n      <ng-content select=\"[twFileUploadIcon]\">\n        <tw-icon name=\"upload-cloud\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n      </ng-content>\n    </div>\n\n    <span [id]=\"headlineId\" [class]=\"headlineClasses()\">\n      <ng-content select=\"[twFileUploadHeadline]\">\n        @if (label(); as l) {\n          {{ l }}\n        } @else {\n          Drag files here or click to browse\n        }\n      </ng-content>\n    </span>\n\n    <span [id]=\"descriptionId\" [class]=\"descriptionClasses()\">\n      <ng-content select=\"[twFileUploadDescription]\">\n        @if (description(); as d) {\n          {{ d }}\n        }\n      </ng-content>\n    </span>\n\n    <button\n      #trigger\n      type=\"button\"\n      twButton\n      variant=\"outline\"\n      color=\"neutral\"\n      [size]=\"size()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-describedby]=\"effectiveAriaDescribedby() || null\"\n      (click)=\"onTriggerClick($event)\"\n    >\n      {{ triggerLabel() }}\n    </button>\n  </div>\n</div>\n\n<ul [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id) {\n    <li>\n      @if (itemSlot(); as slot) {\n        <ng-container\n          [ngTemplateOutlet]=\"slot.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, item: item }\"\n        />\n      } @else {\n        <div [class]=\"itemClasses()\">\n          <tw-icon\n            [name]=\"iconNameFor(item)\"\n            size=\"md\"\n            [class]=\"itemIconClasses()\"\n            aria-hidden=\"true\"\n          />\n          <div [class]=\"itemBodyClasses()\">\n            <span [class]=\"itemNameClasses()\">{{ item.file.name }}</span>\n            <span [class]=\"itemMetaClasses()\">{{ metaTextFor(item) }}</span>\n            @if (shouldShowProgress(item)) {\n              <tw-progress-bar\n                [class]=\"itemProgressClasses()\"\n                [value]=\"item.progress\"\n                size=\"sm\"\n                [color]=\"progressColorFor(item)\"\n              />\n            }\n          </div>\n          <div [class]=\"itemActionsClasses()\">\n            <button\n              type=\"button\"\n              twButton\n              variant=\"ghost\"\n              color=\"neutral\"\n              size=\"sm\"\n              data-tw-file-upload-remove\n              [attr.aria-label]=\"'Remove ' + item.file.name\"\n              (click)=\"remove(item.id)\"\n            >\n              <tw-icon twButtonIcon name=\"x\" />\n            </button>\n          </div>\n        </div>\n      }\n    </li>\n  }\n</ul>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonDirective, selector: "[twButton]", inputs: ["variant", "color", "size", "disabled", "loading"], exportAs: ["twButton"] }, { kind: "component", type: IconComponent, selector: "tw-icon", inputs: ["name", "img", "color", "size", "ariaLabel", "svg"] }, { kind: "component", type: ProgressBarComponent, selector: "tw-progress-bar", inputs: ["value", "variant", "color", "size", "label", "options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "itemSlot", first: true, predicate: FileUploadItemDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropzoneRef", first: true, predicate: ["dropzone"], descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "hiddenInputRef", first: true, predicate: ["hiddenInput"], descendants: true, isSignal: true }], exportAs: ["twFileUpload"], usesInheritance: true, ngImport: i0, template: "<input\n  #hiddenInput\n  type=\"file\"\n  class=\"sr-only\"\n  tabindex=\"-1\"\n  [id]=\"hiddenInputId\"\n  [attr.aria-label]=\"ariaLabel() ?? label() ?? triggerLabel()\"\n  [attr.name]=\"name() || null\"\n  [attr.accept]=\"accept() || null\"\n  [multiple]=\"multiple()\"\n  [disabled]=\"disabled()\"\n  [required]=\"required()\"\n  [attr.aria-invalid]=\"errorState() || null\"\n  (change)=\"onNativeChange($event)\"\n/>\n\n<!-- The dropzone is a mouse click/drop convenience target, intentionally NOT a\n     focusable control: the inner trigger <button> owns keyboard operability, so\n     adding tabindex/keydown here would create a nested-interactive structure.\n     No keyboard user is locked out, so the rules' concern does not apply. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<div\n  #dropzone\n  [class]=\"dropzoneClasses()\"\n  (click)=\"open()\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <div [class]=\"dropzoneInnerClasses()\">\n    <div [class]=\"illustrationClasses()\">\n      <ng-content select=\"[twFileUploadIcon]\">\n        <tw-icon name=\"upload-cloud\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n      </ng-content>\n    </div>\n\n    <span [id]=\"headlineId\" [class]=\"headlineClasses()\">\n      <ng-content select=\"[twFileUploadHeadline]\">\n        @if (label(); as l) {\n          {{ l }}\n        } @else {\n          Drag files here or click to browse\n        }\n      </ng-content>\n    </span>\n\n    <span [id]=\"descriptionId\" [class]=\"descriptionClasses()\">\n      <ng-content select=\"[twFileUploadDescription]\">\n        @if (description(); as d) {\n          {{ d }}\n        }\n      </ng-content>\n    </span>\n\n    <button\n      #trigger\n      type=\"button\"\n      twButton\n      variant=\"outline\"\n      color=\"neutral\"\n      [size]=\"size()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-describedby]=\"effectiveAriaDescribedby() || null\"\n      (click)=\"onTriggerClick($event)\"\n    >\n      {{ triggerLabel() }}\n    </button>\n  </div>\n</div>\n\n<ul [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id) {\n    <li>\n      @if (itemSlot(); as slot) {\n        <ng-container\n          [ngTemplateOutlet]=\"slot.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, item: item }\"\n        />\n      } @else {\n        <div [class]=\"itemClasses()\">\n          <tw-icon\n            [name]=\"iconNameFor(item)\"\n            size=\"md\"\n            [class]=\"itemIconClasses()\"\n            aria-hidden=\"true\"\n          />\n          <div [class]=\"itemBodyClasses()\">\n            <span [class]=\"itemNameClasses()\">{{ item.file.name }}</span>\n            <span [class]=\"itemMetaClasses()\">{{ metaTextFor(item) }}</span>\n            @if (shouldShowProgress(item)) {\n              <tw-progress-bar\n                [class]=\"itemProgressClasses()\"\n                [value]=\"item.progress\"\n                size=\"sm\"\n                [color]=\"progressColorFor(item)\"\n              />\n            }\n          </div>\n          <div [class]=\"itemActionsClasses()\">\n            <button\n              type=\"button\"\n              twButton\n              variant=\"ghost\"\n              color=\"neutral\"\n              size=\"sm\"\n              data-tw-file-upload-remove\n              [attr.aria-label]=\"'Remove ' + item.file.name\"\n              (click)=\"remove(item.id)\"\n            >\n              <tw-icon twButtonIcon name=\"x\" />\n            </button>\n          </div>\n        </div>\n      }\n    </li>\n  }\n</ul>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonDirective, selector: "[twButton]", inputs: ["variant", "color", "size", "disabled", "loading"], exportAs: ["twButton"] }, { kind: "component", type: IconComponent, selector: "tw-icon", inputs: ["name", "img", "color", "size", "aria-label", "svg"] }, { kind: "component", type: ProgressBarComponent, selector: "tw-progress-bar", inputs: ["value", "variant", "color", "size", "label", "options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
@@ -892,9 +879,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[attr.aria-labelledby]': 'effectiveAriaLabelledby() || null',
                         '[attr.aria-describedby]': 'effectiveAriaDescribedby() || null',
                         '[attr.aria-disabled]': 'disabled() || null',
-                        '[attr.aria-required]': 'required() || null',
-                        '[attr.aria-invalid]': 'errorState() || null',
-                    }, template: "<input\n  #hiddenInput\n  type=\"file\"\n  class=\"sr-only\"\n  tabindex=\"-1\"\n  [id]=\"hiddenInputId\"\n  [attr.aria-label]=\"ariaLabel() ?? label() ?? triggerLabel()\"\n  [attr.name]=\"name() || null\"\n  [attr.accept]=\"accept() || null\"\n  [multiple]=\"multiple()\"\n  [disabled]=\"disabled()\"\n  [required]=\"required()\"\n  (change)=\"onNativeChange($event)\"\n/>\n\n<!-- The dropzone is a mouse click/drop convenience target, intentionally NOT a\n     focusable control: the inner trigger <button> owns keyboard operability, so\n     adding tabindex/keydown here would create a nested-interactive structure.\n     No keyboard user is locked out, so the rules' concern does not apply. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<div\n  #dropzone\n  [class]=\"dropzoneClasses()\"\n  (click)=\"open()\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <div [class]=\"dropzoneInnerClasses()\">\n    <div [class]=\"illustrationClasses()\">\n      <ng-content select=\"[twFileUploadIcon]\">\n        <tw-icon name=\"upload-cloud\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n      </ng-content>\n    </div>\n\n    <span [id]=\"headlineId\" [class]=\"headlineClasses()\">\n      <ng-content select=\"[twFileUploadHeadline]\">\n        @if (label(); as l) {\n          {{ l }}\n        } @else {\n          Drag files here or click to browse\n        }\n      </ng-content>\n    </span>\n\n    <span [id]=\"descriptionId\" [class]=\"descriptionClasses()\">\n      <ng-content select=\"[twFileUploadDescription]\">\n        @if (description(); as d) {\n          {{ d }}\n        }\n      </ng-content>\n    </span>\n\n    <button\n      #trigger\n      type=\"button\"\n      twButton\n      variant=\"outline\"\n      color=\"neutral\"\n      [size]=\"size()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-describedby]=\"effectiveAriaDescribedby() || null\"\n      (click)=\"onTriggerClick($event)\"\n    >\n      {{ triggerLabel() }}\n    </button>\n  </div>\n</div>\n\n<ul [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id) {\n    <li>\n      @if (itemSlot(); as slot) {\n        <ng-container\n          [ngTemplateOutlet]=\"slot.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, item: item }\"\n        />\n      } @else {\n        <div [class]=\"itemClasses()\">\n          <tw-icon\n            [name]=\"iconNameFor(item)\"\n            size=\"md\"\n            [class]=\"itemIconClasses()\"\n            aria-hidden=\"true\"\n          />\n          <div [class]=\"itemBodyClasses()\">\n            <span [class]=\"itemNameClasses()\">{{ item.file.name }}</span>\n            <span [class]=\"itemMetaClasses()\">{{ metaTextFor(item) }}</span>\n            @if (shouldShowProgress(item)) {\n              <tw-progress-bar\n                [class]=\"itemProgressClasses()\"\n                [value]=\"item.progress\"\n                size=\"sm\"\n                [color]=\"progressColorFor(item)\"\n              />\n            }\n          </div>\n          <div [class]=\"itemActionsClasses()\">\n            <button\n              type=\"button\"\n              twButton\n              variant=\"ghost\"\n              color=\"neutral\"\n              size=\"sm\"\n              data-tw-file-upload-remove\n              [attr.aria-label]=\"'Remove ' + item.file.name\"\n              (click)=\"remove(item.id)\"\n            >\n              <tw-icon twButtonIcon name=\"x\" />\n            </button>\n          </div>\n        </div>\n      }\n    </li>\n  }\n</ul>\n" }]
+                        // NOTE: `aria-required` and `aria-invalid` are NOT set here. ARIA 1.2 does
+                        // not allow either on `role="group"`, and axe flags it as a *critical*
+                        // `aria-allowed-attr` violation. Both belong on the control that carries
+                        // the value: the hidden `<input type="file">` takes native `required` and
+                        // `aria-invalid` in `file-upload.html`.
+                    }, template: "<input\n  #hiddenInput\n  type=\"file\"\n  class=\"sr-only\"\n  tabindex=\"-1\"\n  [id]=\"hiddenInputId\"\n  [attr.aria-label]=\"ariaLabel() ?? label() ?? triggerLabel()\"\n  [attr.name]=\"name() || null\"\n  [attr.accept]=\"accept() || null\"\n  [multiple]=\"multiple()\"\n  [disabled]=\"disabled()\"\n  [required]=\"required()\"\n  [attr.aria-invalid]=\"errorState() || null\"\n  (change)=\"onNativeChange($event)\"\n/>\n\n<!-- The dropzone is a mouse click/drop convenience target, intentionally NOT a\n     focusable control: the inner trigger <button> owns keyboard operability, so\n     adding tabindex/keydown here would create a nested-interactive structure.\n     No keyboard user is locked out, so the rules' concern does not apply. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<div\n  #dropzone\n  [class]=\"dropzoneClasses()\"\n  (click)=\"open()\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <div [class]=\"dropzoneInnerClasses()\">\n    <div [class]=\"illustrationClasses()\">\n      <ng-content select=\"[twFileUploadIcon]\">\n        <tw-icon name=\"upload-cloud\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n      </ng-content>\n    </div>\n\n    <span [id]=\"headlineId\" [class]=\"headlineClasses()\">\n      <ng-content select=\"[twFileUploadHeadline]\">\n        @if (label(); as l) {\n          {{ l }}\n        } @else {\n          Drag files here or click to browse\n        }\n      </ng-content>\n    </span>\n\n    <span [id]=\"descriptionId\" [class]=\"descriptionClasses()\">\n      <ng-content select=\"[twFileUploadDescription]\">\n        @if (description(); as d) {\n          {{ d }}\n        }\n      </ng-content>\n    </span>\n\n    <button\n      #trigger\n      type=\"button\"\n      twButton\n      variant=\"outline\"\n      color=\"neutral\"\n      [size]=\"size()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-describedby]=\"effectiveAriaDescribedby() || null\"\n      (click)=\"onTriggerClick($event)\"\n    >\n      {{ triggerLabel() }}\n    </button>\n  </div>\n</div>\n\n<ul [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id) {\n    <li>\n      @if (itemSlot(); as slot) {\n        <ng-container\n          [ngTemplateOutlet]=\"slot.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, item: item }\"\n        />\n      } @else {\n        <div [class]=\"itemClasses()\">\n          <tw-icon\n            [name]=\"iconNameFor(item)\"\n            size=\"md\"\n            [class]=\"itemIconClasses()\"\n            aria-hidden=\"true\"\n          />\n          <div [class]=\"itemBodyClasses()\">\n            <span [class]=\"itemNameClasses()\">{{ item.file.name }}</span>\n            <span [class]=\"itemMetaClasses()\">{{ metaTextFor(item) }}</span>\n            @if (shouldShowProgress(item)) {\n              <tw-progress-bar\n                [class]=\"itemProgressClasses()\"\n                [value]=\"item.progress\"\n                size=\"sm\"\n                [color]=\"progressColorFor(item)\"\n              />\n            }\n          </div>\n          <div [class]=\"itemActionsClasses()\">\n            <button\n              type=\"button\"\n              twButton\n              variant=\"ghost\"\n              color=\"neutral\"\n              size=\"sm\"\n              data-tw-file-upload-remove\n              [attr.aria-label]=\"'Remove ' + item.file.name\"\n              (click)=\"remove(item.id)\"\n            >\n              <tw-icon twButtonIcon name=\"x\" />\n            </button>\n          </div>\n        </div>\n      }\n    </li>\n  }\n</ul>\n" }]
         }], ctorParameters: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], filesAdded: [{ type: i0.Output, args: ["filesAdded"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }], fileRejected: [{ type: i0.Output, args: ["fileRejected"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], itemSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FileUploadItemDirective), { isSignal: true }] }], dropzoneRef: [{ type: i0.ViewChild, args: ['dropzone', { isSignal: true }] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], hiddenInputRef: [{ type: i0.ViewChild, args: ['hiddenInput', { isSignal: true }] }] } });
 
 /**