@cdevhub/ngx-tw 0.4.0 → 0.6.0

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 }] }] } });
 
 /**