ngwr 14.3.0 → 14.4.0

package/fesm2022/ngwr-file-upload.mjs

@@ -1,6 +1,6 @@
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { input, model, output, viewChild, signal, computed, inject, LOCALE_ID, effect, untracked, ViewEncapsulation, Component } from '@angular/core';
+import { input, computed, model, output, viewChild, signal, inject, LOCALE_ID, effect, untracked, ViewEncapsulation, Component } from '@angular/core';
 import { useFormFieldAria } from 'ngwr/form';
 import { useI18nText, useI18nFormatter, readI18nText } from 'ngwr/i18n';
 
@@ -86,6 +86,19 @@ class WrFileUpload {
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
     /** The surrounding `<wr-form-field>`'s error state. @internal */
     fieldAria = useFormFieldAria();
+    /**
+     * The field's label names the drop zone, when there is one.
+     *
+     * The zone is a `div[role="button"]`, so `<wr-form-field>`'s `<label for>`
+     * cannot reach it and named nothing at all — the zone announced only its own
+     * generic "drop files here" copy. `aria-labelledby` is the direction that
+     * works for a role. The zone copy stays as the label when no field wraps it.
+     */
+    labelledBy = computed(() => this.fieldAria.labelledBy(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    /** `null` while the field's label carries the name, or both are announced. */
+    zoneName = computed(() => (this.labelledBy() ? null : this.resolvedDropZone()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoneName" }] : /* istanbul ignore next */ []));
     /** Primary call-to-action label. Falls back to `fileUpload.browse`. */
     pickLabel = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pickLabel" }] : /* istanbul ignore next */ []));
@@ -303,12 +316,12 @@ class WrFileUpload {
             this.value.set(list.length > 0 ? list[0] : null);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrFileUpload, isStandalone: true, selector: "wr-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 }, showList: { classPropertyName: "showList", publicName: "showList", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, pickLabel: { classPropertyName: "pickLabel", publicName: "pickLabel", isSignal: true, isRequired: false, transformFunction: null }, dropLabel: { classPropertyName: "dropLabel", publicName: "dropLabel", isSignal: true, isRequired: false, transformFunction: null }, dropZoneLabel: { classPropertyName: "dropZoneLabel", publicName: "dropZoneLabel", isSignal: true, isRequired: false, transformFunction: null }, removeFileLabel: { classPropertyName: "removeFileLabel", publicName: "removeFileLabel", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", rejected: "rejected", touch: "touch" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"wr-file-upload__zone\"\n  role=\"button\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"resolvedDropZone()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  (click)=\"openPicker()\"\n  (keydown)=\"onZoneKey($event)\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <svg class=\"wr-file-upload__icon\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path\n      d=\"M12 16V4M12 4l-4 4M12 4l4 4M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n  <div class=\"wr-file-upload__hint\">\n    <strong>{{ resolvedPick() }}</strong>\n    <span>{{ resolvedDrop() }}</span>\n    @if (helperText()) {\n      <small>{{ helperText() }}</small>\n    }\n  </div>\n</div>\n\n<!--\n  The real <input type=\"file\"> is never operated directly \u2014 the zone above is\n  the control and forwards clicks here, so the input is visually hidden and kept\n  OUTSIDE the zone: inside, it nested one interactive element within another\n  (the zone is role=\"button\") and put two tab stops where users see one. It is\n  positioned absolutely and clipped, so being a sibling changes nothing visually.\n  aria-hidden must be paired with tabindex=\"-1\", or hiding a focusable element is\n  itself a violation.\n-->\n<input\n  #picker\n  class=\"wr-file-upload__picker\"\n  type=\"file\"\n  aria-hidden=\"true\"\n  tabindex=\"-1\"\n  [attr.accept]=\"accept() || null\"\n  [attr.multiple]=\"multiple() ? '' : null\"\n  [disabled]=\"disabled() || readonly()\"\n  (change)=\"onPickerChange($event)\"\n/>\n\n@if (showList() && files().length > 0) {\n  <ul class=\"wr-file-upload__list\">\n    @for (file of files(); track $index) {\n      <li class=\"wr-file-upload__item\">\n        <span class=\"wr-file-upload__name\" [title]=\"file.name\">{{ file.name }}</span>\n        <span class=\"wr-file-upload__size\">{{ formatBytes(file.size) }}</span>\n        <button\n          type=\"button\"\n          class=\"wr-file-upload__remove\"\n          [attr.aria-label]=\"resolvedRemove()\"\n          [disabled]=\"disabled() || readonly()\"\n          (click)=\"removeAt($index)\"\n        >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n            <path\n              d=\"M2 2 L10 10 M10 2 L2 10\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </button>\n      </li>\n    }\n  </ul>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrFileUpload, isStandalone: true, selector: "wr-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 }, showList: { classPropertyName: "showList", publicName: "showList", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, pickLabel: { classPropertyName: "pickLabel", publicName: "pickLabel", isSignal: true, isRequired: false, transformFunction: null }, dropLabel: { classPropertyName: "dropLabel", publicName: "dropLabel", isSignal: true, isRequired: false, transformFunction: null }, dropZoneLabel: { classPropertyName: "dropZoneLabel", publicName: "dropZoneLabel", isSignal: true, isRequired: false, transformFunction: null }, removeFileLabel: { classPropertyName: "removeFileLabel", publicName: "removeFileLabel", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", rejected: "rejected", touch: "touch" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"wr-file-upload__zone\"\n  role=\"button\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"zoneName()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  (click)=\"openPicker()\"\n  (keydown)=\"onZoneKey($event)\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <svg class=\"wr-file-upload__icon\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path\n      d=\"M12 16V4M12 4l-4 4M12 4l4 4M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n  <div class=\"wr-file-upload__hint\">\n    <strong>{{ resolvedPick() }}</strong>\n    <span>{{ resolvedDrop() }}</span>\n    @if (helperText()) {\n      <small>{{ helperText() }}</small>\n    }\n  </div>\n</div>\n\n<!--\n  The real <input type=\"file\"> is never operated directly \u2014 the zone above is\n  the control and forwards clicks here, so the input is visually hidden and kept\n  OUTSIDE the zone: inside, it nested one interactive element within another\n  (the zone is role=\"button\") and put two tab stops where users see one. It is\n  positioned absolutely and clipped, so being a sibling changes nothing visually.\n  aria-hidden must be paired with tabindex=\"-1\", or hiding a focusable element is\n  itself a violation.\n-->\n<input\n  #picker\n  class=\"wr-file-upload__picker\"\n  type=\"file\"\n  aria-hidden=\"true\"\n  tabindex=\"-1\"\n  [attr.accept]=\"accept() || null\"\n  [attr.multiple]=\"multiple() ? '' : null\"\n  [disabled]=\"disabled() || readonly()\"\n  (change)=\"onPickerChange($event)\"\n/>\n\n@if (showList() && files().length > 0) {\n  <ul class=\"wr-file-upload__list\">\n    @for (file of files(); track $index) {\n      <li class=\"wr-file-upload__item\">\n        <span class=\"wr-file-upload__name\" [title]=\"file.name\">{{ file.name }}</span>\n        <span class=\"wr-file-upload__size\">{{ formatBytes(file.size) }}</span>\n        <button\n          type=\"button\"\n          class=\"wr-file-upload__remove\"\n          [attr.aria-label]=\"resolvedRemove()\"\n          [disabled]=\"disabled() || readonly()\"\n          (click)=\"removeAt($index)\"\n        >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n            <path\n              d=\"M2 2 L10 10 M10 2 L2 10\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </button>\n      </li>\n    }\n  </ul>\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrFileUpload, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrFileUpload, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-file-upload', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [], template: "<div\n  class=\"wr-file-upload__zone\"\n  role=\"button\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"resolvedDropZone()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  (click)=\"openPicker()\"\n  (keydown)=\"onZoneKey($event)\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <svg class=\"wr-file-upload__icon\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path\n      d=\"M12 16V4M12 4l-4 4M12 4l4 4M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n  <div class=\"wr-file-upload__hint\">\n    <strong>{{ resolvedPick() }}</strong>\n    <span>{{ resolvedDrop() }}</span>\n    @if (helperText()) {\n      <small>{{ helperText() }}</small>\n    }\n  </div>\n</div>\n\n<!--\n  The real <input type=\"file\"> is never operated directly \u2014 the zone above is\n  the control and forwards clicks here, so the input is visually hidden and kept\n  OUTSIDE the zone: inside, it nested one interactive element within another\n  (the zone is role=\"button\") and put two tab stops where users see one. It is\n  positioned absolutely and clipped, so being a sibling changes nothing visually.\n  aria-hidden must be paired with tabindex=\"-1\", or hiding a focusable element is\n  itself a violation.\n-->\n<input\n  #picker\n  class=\"wr-file-upload__picker\"\n  type=\"file\"\n  aria-hidden=\"true\"\n  tabindex=\"-1\"\n  [attr.accept]=\"accept() || null\"\n  [attr.multiple]=\"multiple() ? '' : null\"\n  [disabled]=\"disabled() || readonly()\"\n  (change)=\"onPickerChange($event)\"\n/>\n\n@if (showList() && files().length > 0) {\n  <ul class=\"wr-file-upload__list\">\n    @for (file of files(); track $index) {\n      <li class=\"wr-file-upload__item\">\n        <span class=\"wr-file-upload__name\" [title]=\"file.name\">{{ file.name }}</span>\n        <span class=\"wr-file-upload__size\">{{ formatBytes(file.size) }}</span>\n        <button\n          type=\"button\"\n          class=\"wr-file-upload__remove\"\n          [attr.aria-label]=\"resolvedRemove()\"\n          [disabled]=\"disabled() || readonly()\"\n          (click)=\"removeAt($index)\"\n        >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n            <path\n              d=\"M2 2 L10 10 M10 2 L2 10\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </button>\n      </li>\n    }\n  </ul>\n}\n" }]
+            args: [{ selector: 'wr-file-upload', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [], template: "<div\n  class=\"wr-file-upload__zone\"\n  role=\"button\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"zoneName()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  (click)=\"openPicker()\"\n  (keydown)=\"onZoneKey($event)\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <svg class=\"wr-file-upload__icon\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path\n      d=\"M12 16V4M12 4l-4 4M12 4l4 4M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n  <div class=\"wr-file-upload__hint\">\n    <strong>{{ resolvedPick() }}</strong>\n    <span>{{ resolvedDrop() }}</span>\n    @if (helperText()) {\n      <small>{{ helperText() }}</small>\n    }\n  </div>\n</div>\n\n<!--\n  The real <input type=\"file\"> is never operated directly \u2014 the zone above is\n  the control and forwards clicks here, so the input is visually hidden and kept\n  OUTSIDE the zone: inside, it nested one interactive element within another\n  (the zone is role=\"button\") and put two tab stops where users see one. It is\n  positioned absolutely and clipped, so being a sibling changes nothing visually.\n  aria-hidden must be paired with tabindex=\"-1\", or hiding a focusable element is\n  itself a violation.\n-->\n<input\n  #picker\n  class=\"wr-file-upload__picker\"\n  type=\"file\"\n  aria-hidden=\"true\"\n  tabindex=\"-1\"\n  [attr.accept]=\"accept() || null\"\n  [attr.multiple]=\"multiple() ? '' : null\"\n  [disabled]=\"disabled() || readonly()\"\n  (change)=\"onPickerChange($event)\"\n/>\n\n@if (showList() && files().length > 0) {\n  <ul class=\"wr-file-upload__list\">\n    @for (file of files(); track $index) {\n      <li class=\"wr-file-upload__item\">\n        <span class=\"wr-file-upload__name\" [title]=\"file.name\">{{ file.name }}</span>\n        <span class=\"wr-file-upload__size\">{{ formatBytes(file.size) }}</span>\n        <button\n          type=\"button\"\n          class=\"wr-file-upload__remove\"\n          [attr.aria-label]=\"resolvedRemove()\"\n          [disabled]=\"disabled() || readonly()\"\n          (click)=\"removeAt($index)\"\n        >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n            <path\n              d=\"M2 2 L10 10 M10 2 L2 10\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </button>\n      </li>\n    }\n  </ul>\n}\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 }] }], showList: [{ type: i0.Input, args: [{ isSignal: true, alias: "showList", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], pickLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickLabel", required: false }] }], dropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropLabel", required: false }] }], dropZoneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropZoneLabel", required: false }] }], removeFileLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeFileLabel", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], touch: [{ type: i0.Output, args: ["touch"] }], picker: [{ type: i0.ViewChild, args: ['picker', { isSignal: true }] }] } });
 
 /**

package/fesm2022/ngwr-file-upload.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-file-upload.mjs","sources":["../../../projects/lib/file-upload/file-upload.ts","../../../projects/lib/file-upload/file-upload.html","../../../projects/lib/file-upload/ngwr-file-upload.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport {\n  Component,\n  type ElementRef,\n  LOCALE_ID,\n  ViewEncapsulation,\n  computed,\n  effect,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n  untracked,\n  viewChild,\n} from '@angular/core';\nimport type { FormValueControl } from '@angular/forms/signals';\n\nimport { useFormFieldAria } from 'ngwr/form';\nimport { readI18nText, useI18nFormatter, useI18nText } from 'ngwr/i18n';\n\nimport type { WrFileUploadRejection, WrFileUploadRejectionReason } from './interfaces';\n\n/** Does `file` match the `accept` attribute (extensions or MIME globs)? */\nfunction matchesAccept(file: File, accept: string): boolean {\n  if (!accept) return true;\n  const tokens = accept\n    .split(',')\n    .map(t => t.trim().toLowerCase())\n    .filter(Boolean);\n  if (tokens.length === 0) return true;\n  const name = file.name.toLowerCase();\n  const mime = file.type.toLowerCase();\n  return tokens.some(token => {\n    if (token.startsWith('.')) return name.endsWith(token);\n    if (token.endsWith('/*')) return mime.startsWith(token.slice(0, -1));\n    return mime === token;\n  });\n}\n\n/**\n * Drag-and-drop file upload zone. Click to browse, drag-and-drop to add,\n * with an optional file list + remove buttons.\n *\n * A signal-forms native control: it implements\n * `FormValueControl<File | readonly File[] | null>`, so `[formField]` binds\n * straight to its `value` model — no `ControlValueAccessor` in between.\n * `[(value)]` works standalone. The value shape follows `multiple`: a single\n * `File` (or `null`), or a `File[]` array.\n *\n * @example\n * ```html\n * <!-- signal forms -->\n * <wr-file-upload [formField]=\"form.files\" [multiple]=\"true\" accept=\"image/*\" />\n *\n * <!-- standalone two-way binding -->\n * <wr-file-upload [(value)]=\"avatar\" accept=\".png,.jpg\" [maxSize]=\"2 * 1024 * 1024\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/file-upload\n */\n@Component({\n  selector: 'wr-file-upload',\n  templateUrl: './file-upload.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n  imports: [],\n})\nexport class WrFileUpload implements FormValueControl<File | readonly File[] | null> {\n  /** Allow multiple files. Single mode replaces on each add. @default false */\n  readonly multiple = input(false, { transform: coerceBooleanProperty });\n\n  /** `accept` attribute — comma-separated MIME types or extensions. @default '' */\n  readonly accept = input<string>('');\n\n  /** Max bytes per file. `0` disables the check. @default 0 */\n  readonly maxSize = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /** Max files (multi mode only). `0` disables the check. @default 0 */\n  readonly maxFiles = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /** Render the picked-files list below the zone. @default true */\n  readonly showList = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * Disable interaction. Bound automatically from the field's disabled state\n   * when used with `[formField]`.\n   *\n   * @default false\n   */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Refuse changes to the selection while the zone stays focusable and the files\n   * still submit. Bound automatically from the field's readonly state when used\n   * with `[formField]`.\n   *\n   * The zone stops opening the picker, a drop is refused and the per-file remove\n   * buttons go inert — but the list stays readable, which is the point. No\n   * `aria-readonly`: the zone is a `role=\"button\"`, and ARIA does not define the\n   * state for that role, so `aria-disabled` would be the only mirror available\n   * and it would say the wrong thing.\n   *\n   * @default false\n   */\n  readonly readonly = input(false, { transform: coerceBooleanProperty });\n\n  /** The surrounding `<wr-form-field>`'s error state. @internal */\n  protected readonly fieldAria = useFormFieldAria();\n\n  /** Primary call-to-action label. Falls back to `fileUpload.browse`. */\n  readonly pickLabel = input<string | null>(null);\n\n  /** Secondary instruction below the CTA. Falls back to `fileUpload.dropZone`. */\n  readonly dropLabel = input<string | null>(null);\n\n  /** Drop-zone host aria-label. Falls back to `fileUpload.dropZoneLabel`. */\n  readonly dropZoneLabel = input<string | null>(null);\n\n  /** Remove-file button aria-label. Falls back to `fileUpload.removeFile`. */\n  readonly removeFileLabel = input<string | null>(null);\n\n  protected readonly resolvedPick = useI18nText(this.pickLabel, 'fileUpload.browse', 'Click to browse');\n  protected readonly resolvedDrop = useI18nText(this.dropLabel, 'fileUpload.dropZone', 'or drop files here');\n  protected readonly resolvedDropZone = useI18nText(\n    this.dropZoneLabel,\n    'fileUpload.dropZoneLabel',\n    'File upload drop zone — click or drop files'\n  );\n  protected readonly resolvedRemove = useI18nText(this.removeFileLabel, 'fileUpload.removeFile', 'Remove file');\n\n  /** Optional helper text shown below the labels (e.g. accepted formats). */\n  readonly helperText = input<string>('');\n\n  /**\n   * Selected file(s). Bound by `[formField]`, or two-way via `[(value)]`. Shape\n   * follows `multiple`: a single `File` (or `null`), or a `File[]` array.\n   */\n  readonly value = model<File | readonly File[] | null>(null);\n\n  /** Emitted when files are rejected for type / size / count reasons. */\n  readonly rejected = output<readonly WrFileUploadRejection[]>();\n\n  /** Emitted on commit so a bound field can mark itself touched. */\n  readonly touch = output<void>();\n\n  protected readonly picker = viewChild.required<ElementRef<HTMLInputElement>>('picker');\n\n  protected readonly files = signal<readonly File[]>([]);\n  protected readonly dragging = signal(false);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-file-upload'];\n    if (this.dragging()) parts.push('wr-file-upload--dragging');\n    if (this.disabled()) parts.push('wr-file-upload--disabled');\n    else if (this.readonly()) parts.push('wr-file-upload--readonly');\n    return parts.join(' ');\n  });\n\n  /**\n   * Human-readable file size (e.g. `1.2 MB`).\n   *\n   * Every piece of this used to be English and unreachable: a module-level unit\n   * table with no catalog key, and `toFixed()`, which writes an ASCII decimal\n   * point whatever `LOCALE_ID` says. A Russian page showed translated drop-zone\n   * copy above `3.4 KB`. The number now goes through `Intl.NumberFormat` and the\n   * unit through the catalog, joined by a template the catalog also owns — so a\n   * locale controls the separator, the digits and whether a space sits before\n   * the unit.\n   *\n   * Not a `computed`: it is called per file, with the file's size as its\n   * argument. It still re-runs on a locale switch, because the formatters it\n   * calls are signals read during the same change detection that renders the row.\n   */\n  protected formatBytes(bytes: number): string {\n    if (!Number.isFinite(bytes) || bytes <= 0) {\n      return this.sizeText({ value: this.number(0, 0), unit: this.unitTexts[0]() });\n    }\n    const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), this.unitTexts.length - 1);\n    const v = bytes / 1024 ** i;\n    const digits = v >= 100 || i === 0 ? 0 : 1;\n    return this.sizeText({ value: this.number(v, digits), unit: this.unitTexts[i]() });\n  }\n\n  /** `{{value}} {{unit}}` — the join, so a locale owns the space too. */\n  private readonly sizeText = useI18nFormatter('fileUpload.size', '{{value}} {{unit}}');\n\n  /**\n   * One resolved signal per binary unit, indexed by the power of 1024 the\n   * arithmetic lands on.\n   *\n   * Spelled out rather than built from a key list: `i18n.spec.ts` reads every\n   * catalog key the library asks for out of the SOURCE, by matching a quoted\n   * dotted string inside the call, so a key built by interpolation is invisible\n   * to it. That spec fails rather than passing quietly, but either way the key\n   * would stop being checked.\n   */\n  private readonly unitTexts = [\n    readI18nText('fileUpload.unitByte', 'B'),\n    readI18nText('fileUpload.unitKb', 'KB'),\n    readI18nText('fileUpload.unitMb', 'MB'),\n    readI18nText('fileUpload.unitGb', 'GB'),\n    readI18nText('fileUpload.unitTb', 'TB'),\n  ] as const;\n\n  private readonly locale = inject(LOCALE_ID);\n\n  private number(value: number, digits: number): string {\n    return new Intl.NumberFormat(this.locale, {\n      minimumFractionDigits: digits,\n      maximumFractionDigits: digits,\n    }).format(value);\n  }\n\n  constructor() {\n    // Rebuild the internal file list from an external `value` write (mirrors the\n    // old `writeValue`). Skipped when the value is merely the echo of an\n    // in-component edit, so re-syncing can never clobber a live selection.\n    effect(() => {\n      const v = this.value();\n      untracked(() => {\n        // Coerce null/undefined to `[]` — a classic-forms binding can write\n        // null, which the old `writeValue(v: … | null)` accepted too.\n        const next: readonly File[] = v === null || v === undefined ? [] : Array.isArray(v) ? v : [v as File];\n        const current = this.files();\n        if (current.length === next.length && current.every((file, i) => file === next[i])) return;\n        this.files.set(next);\n      });\n    });\n  }\n\n  // Template handlers\n\n  protected openPicker(): void {\n    if (this.disabled() || this.readonly()) return;\n    this.picker().nativeElement.click();\n  }\n\n  protected onZoneKey(event: KeyboardEvent): void {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.openPicker();\n    }\n  }\n\n  protected onPickerChange(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    if (target.files) this.acceptFiles(Array.from(target.files));\n    // Reset so picking the same file twice re-fires `change`.\n    target.value = '';\n  }\n\n  protected onDragEnter(event: DragEvent): void {\n    if (this.disabled() || this.readonly()) return;\n    event.preventDefault();\n    this.dragging.set(true);\n  }\n\n  protected onDragOver(event: DragEvent): void {\n    if (this.disabled() || this.readonly()) return;\n    event.preventDefault();\n    if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy';\n  }\n\n  protected onDragLeave(event: DragEvent): void {\n    // Only clear when leaving the zone itself, not internal children.\n    if (event.currentTarget === event.target) this.dragging.set(false);\n  }\n\n  protected onDrop(event: DragEvent): void {\n    event.preventDefault();\n    this.dragging.set(false);\n    if (this.disabled() || this.readonly()) return;\n    const dropped = event.dataTransfer?.files ? Array.from(event.dataTransfer.files) : [];\n    if (dropped.length > 0) this.acceptFiles(dropped);\n  }\n\n  protected removeAt(index: number): void {\n    if (this.disabled() || this.readonly()) return;\n    const next = this.files().filter((_, i) => i !== index);\n    this.files.set(next);\n    this.emit();\n  }\n\n  // Internals\n\n  private acceptFiles(incoming: readonly File[]): void {\n    if (this.disabled() || this.readonly()) return;\n    const accept = this.accept();\n    const maxSize = this.maxSize();\n    const rejections: WrFileUploadRejection[] = [];\n    const accepted: File[] = [];\n\n    for (const file of incoming) {\n      const reason = this.reject(file, accept, maxSize);\n      if (reason) rejections.push({ file, reason });\n      else accepted.push(file);\n    }\n\n    let next: File[];\n    if (this.multiple()) {\n      next = [...this.files(), ...accepted];\n      const maxFiles = this.maxFiles();\n      if (maxFiles > 0 && next.length > maxFiles) {\n        const overflow = next.splice(maxFiles);\n        for (const file of overflow) rejections.push({ file, reason: 'count' });\n      }\n    } else {\n      // Single mode — last accepted wins, prior selection cleared.\n      next = accepted.length > 0 ? [accepted[accepted.length - 1]] : [...this.files()];\n    }\n\n    this.files.set(next);\n    this.touch.emit();\n    this.emit();\n    if (rejections.length > 0) this.rejected.emit(rejections);\n  }\n\n  private reject(file: File, accept: string, maxSize: number): WrFileUploadRejectionReason | null {\n    if (accept && !matchesAccept(file, accept)) return 'type';\n    if (maxSize > 0 && file.size > maxSize) return 'size';\n    return null;\n  }\n\n  private emit(): void {\n    const list = this.files();\n    if (this.multiple()) {\n      this.value.set(list);\n    } else {\n      this.value.set(list.length > 0 ? list[0] : null);\n    }\n  }\n}\n","<div\n  class=\"wr-file-upload__zone\"\n  role=\"button\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"resolvedDropZone()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  (click)=\"openPicker()\"\n  (keydown)=\"onZoneKey($event)\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <svg class=\"wr-file-upload__icon\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path\n      d=\"M12 16V4M12 4l-4 4M12 4l4 4M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n  <div class=\"wr-file-upload__hint\">\n    <strong>{{ resolvedPick() }}</strong>\n    <span>{{ resolvedDrop() }}</span>\n    @if (helperText()) {\n      <small>{{ helperText() }}</small>\n    }\n  </div>\n</div>\n\n<!--\n  The real <input type=\"file\"> is never operated directly — the zone above is\n  the control and forwards clicks here, so the input is visually hidden and kept\n  OUTSIDE the zone: inside, it nested one interactive element within another\n  (the zone is role=\"button\") and put two tab stops where users see one. It is\n  positioned absolutely and clipped, so being a sibling changes nothing visually.\n  aria-hidden must be paired with tabindex=\"-1\", or hiding a focusable element is\n  itself a violation.\n-->\n<input\n  #picker\n  class=\"wr-file-upload__picker\"\n  type=\"file\"\n  aria-hidden=\"true\"\n  tabindex=\"-1\"\n  [attr.accept]=\"accept() || null\"\n  [attr.multiple]=\"multiple() ? '' : null\"\n  [disabled]=\"disabled() || readonly()\"\n  (change)=\"onPickerChange($event)\"\n/>\n\n@if (showList() && files().length > 0) {\n  <ul class=\"wr-file-upload__list\">\n    @for (file of files(); track $index) {\n      <li class=\"wr-file-upload__item\">\n        <span class=\"wr-file-upload__name\" [title]=\"file.name\">{{ file.name }}</span>\n        <span class=\"wr-file-upload__size\">{{ formatBytes(file.size) }}</span>\n        <button\n          type=\"button\"\n          class=\"wr-file-upload__remove\"\n          [attr.aria-label]=\"resolvedRemove()\"\n          [disabled]=\"disabled() || readonly()\"\n          (click)=\"removeAt($index)\"\n        >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n            <path\n              d=\"M2 2 L10 10 M10 2 L2 10\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </button>\n      </li>\n    }\n  </ul>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-file-upload.mjs","sources":["../../../projects/lib/file-upload/file-upload.ts","../../../projects/lib/file-upload/file-upload.html","../../../projects/lib/file-upload/ngwr-file-upload.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport {\n  Component,\n  type ElementRef,\n  LOCALE_ID,\n  ViewEncapsulation,\n  computed,\n  effect,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n  untracked,\n  viewChild,\n} from '@angular/core';\nimport type { FormValueControl } from '@angular/forms/signals';\n\nimport { useFormFieldAria } from 'ngwr/form';\nimport { readI18nText, useI18nFormatter, useI18nText } from 'ngwr/i18n';\n\nimport type { WrFileUploadRejection, WrFileUploadRejectionReason } from './interfaces';\n\n/** Does `file` match the `accept` attribute (extensions or MIME globs)? */\nfunction matchesAccept(file: File, accept: string): boolean {\n  if (!accept) return true;\n  const tokens = accept\n    .split(',')\n    .map(t => t.trim().toLowerCase())\n    .filter(Boolean);\n  if (tokens.length === 0) return true;\n  const name = file.name.toLowerCase();\n  const mime = file.type.toLowerCase();\n  return tokens.some(token => {\n    if (token.startsWith('.')) return name.endsWith(token);\n    if (token.endsWith('/*')) return mime.startsWith(token.slice(0, -1));\n    return mime === token;\n  });\n}\n\n/**\n * Drag-and-drop file upload zone. Click to browse, drag-and-drop to add,\n * with an optional file list + remove buttons.\n *\n * A signal-forms native control: it implements\n * `FormValueControl<File | readonly File[] | null>`, so `[formField]` binds\n * straight to its `value` model — no `ControlValueAccessor` in between.\n * `[(value)]` works standalone. The value shape follows `multiple`: a single\n * `File` (or `null`), or a `File[]` array.\n *\n * @example\n * ```html\n * <!-- signal forms -->\n * <wr-file-upload [formField]=\"form.files\" [multiple]=\"true\" accept=\"image/*\" />\n *\n * <!-- standalone two-way binding -->\n * <wr-file-upload [(value)]=\"avatar\" accept=\".png,.jpg\" [maxSize]=\"2 * 1024 * 1024\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/file-upload\n */\n@Component({\n  selector: 'wr-file-upload',\n  templateUrl: './file-upload.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n  imports: [],\n})\nexport class WrFileUpload implements FormValueControl<File | readonly File[] | null> {\n  /** Allow multiple files. Single mode replaces on each add. @default false */\n  readonly multiple = input(false, { transform: coerceBooleanProperty });\n\n  /** `accept` attribute — comma-separated MIME types or extensions. @default '' */\n  readonly accept = input<string>('');\n\n  /** Max bytes per file. `0` disables the check. @default 0 */\n  readonly maxSize = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /** Max files (multi mode only). `0` disables the check. @default 0 */\n  readonly maxFiles = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /** Render the picked-files list below the zone. @default true */\n  readonly showList = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * Disable interaction. Bound automatically from the field's disabled state\n   * when used with `[formField]`.\n   *\n   * @default false\n   */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Refuse changes to the selection while the zone stays focusable and the files\n   * still submit. Bound automatically from the field's readonly state when used\n   * with `[formField]`.\n   *\n   * The zone stops opening the picker, a drop is refused and the per-file remove\n   * buttons go inert — but the list stays readable, which is the point. No\n   * `aria-readonly`: the zone is a `role=\"button\"`, and ARIA does not define the\n   * state for that role, so `aria-disabled` would be the only mirror available\n   * and it would say the wrong thing.\n   *\n   * @default false\n   */\n  readonly readonly = input(false, { transform: coerceBooleanProperty });\n\n  /** The surrounding `<wr-form-field>`'s error state. @internal */\n  protected readonly fieldAria = useFormFieldAria();\n\n  /**\n   * The field's label names the drop zone, when there is one.\n   *\n   * The zone is a `div[role=\"button\"]`, so `<wr-form-field>`'s `<label for>`\n   * cannot reach it and named nothing at all — the zone announced only its own\n   * generic \"drop files here\" copy. `aria-labelledby` is the direction that\n   * works for a role. The zone copy stays as the label when no field wraps it.\n   */\n  protected readonly labelledBy = computed(() => this.fieldAria.labelledBy());\n\n  /** `null` while the field's label carries the name, or both are announced. */\n  protected readonly zoneName = computed(() => (this.labelledBy() ? null : this.resolvedDropZone()));\n\n  /** Primary call-to-action label. Falls back to `fileUpload.browse`. */\n  readonly pickLabel = input<string | null>(null);\n\n  /** Secondary instruction below the CTA. Falls back to `fileUpload.dropZone`. */\n  readonly dropLabel = input<string | null>(null);\n\n  /** Drop-zone host aria-label. Falls back to `fileUpload.dropZoneLabel`. */\n  readonly dropZoneLabel = input<string | null>(null);\n\n  /** Remove-file button aria-label. Falls back to `fileUpload.removeFile`. */\n  readonly removeFileLabel = input<string | null>(null);\n\n  protected readonly resolvedPick = useI18nText(this.pickLabel, 'fileUpload.browse', 'Click to browse');\n  protected readonly resolvedDrop = useI18nText(this.dropLabel, 'fileUpload.dropZone', 'or drop files here');\n  protected readonly resolvedDropZone = useI18nText(\n    this.dropZoneLabel,\n    'fileUpload.dropZoneLabel',\n    'File upload drop zone — click or drop files'\n  );\n  protected readonly resolvedRemove = useI18nText(this.removeFileLabel, 'fileUpload.removeFile', 'Remove file');\n\n  /** Optional helper text shown below the labels (e.g. accepted formats). */\n  readonly helperText = input<string>('');\n\n  /**\n   * Selected file(s). Bound by `[formField]`, or two-way via `[(value)]`. Shape\n   * follows `multiple`: a single `File` (or `null`), or a `File[]` array.\n   */\n  readonly value = model<File | readonly File[] | null>(null);\n\n  /** Emitted when files are rejected for type / size / count reasons. */\n  readonly rejected = output<readonly WrFileUploadRejection[]>();\n\n  /** Emitted on commit so a bound field can mark itself touched. */\n  readonly touch = output<void>();\n\n  protected readonly picker = viewChild.required<ElementRef<HTMLInputElement>>('picker');\n\n  protected readonly files = signal<readonly File[]>([]);\n  protected readonly dragging = signal(false);\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-file-upload'];\n    if (this.dragging()) parts.push('wr-file-upload--dragging');\n    if (this.disabled()) parts.push('wr-file-upload--disabled');\n    else if (this.readonly()) parts.push('wr-file-upload--readonly');\n    return parts.join(' ');\n  });\n\n  /**\n   * Human-readable file size (e.g. `1.2 MB`).\n   *\n   * Every piece of this used to be English and unreachable: a module-level unit\n   * table with no catalog key, and `toFixed()`, which writes an ASCII decimal\n   * point whatever `LOCALE_ID` says. A Russian page showed translated drop-zone\n   * copy above `3.4 KB`. The number now goes through `Intl.NumberFormat` and the\n   * unit through the catalog, joined by a template the catalog also owns — so a\n   * locale controls the separator, the digits and whether a space sits before\n   * the unit.\n   *\n   * Not a `computed`: it is called per file, with the file's size as its\n   * argument. It still re-runs on a locale switch, because the formatters it\n   * calls are signals read during the same change detection that renders the row.\n   */\n  protected formatBytes(bytes: number): string {\n    if (!Number.isFinite(bytes) || bytes <= 0) {\n      return this.sizeText({ value: this.number(0, 0), unit: this.unitTexts[0]() });\n    }\n    const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), this.unitTexts.length - 1);\n    const v = bytes / 1024 ** i;\n    const digits = v >= 100 || i === 0 ? 0 : 1;\n    return this.sizeText({ value: this.number(v, digits), unit: this.unitTexts[i]() });\n  }\n\n  /** `{{value}} {{unit}}` — the join, so a locale owns the space too. */\n  private readonly sizeText = useI18nFormatter('fileUpload.size', '{{value}} {{unit}}');\n\n  /**\n   * One resolved signal per binary unit, indexed by the power of 1024 the\n   * arithmetic lands on.\n   *\n   * Spelled out rather than built from a key list: `i18n.spec.ts` reads every\n   * catalog key the library asks for out of the SOURCE, by matching a quoted\n   * dotted string inside the call, so a key built by interpolation is invisible\n   * to it. That spec fails rather than passing quietly, but either way the key\n   * would stop being checked.\n   */\n  private readonly unitTexts = [\n    readI18nText('fileUpload.unitByte', 'B'),\n    readI18nText('fileUpload.unitKb', 'KB'),\n    readI18nText('fileUpload.unitMb', 'MB'),\n    readI18nText('fileUpload.unitGb', 'GB'),\n    readI18nText('fileUpload.unitTb', 'TB'),\n  ] as const;\n\n  private readonly locale = inject(LOCALE_ID);\n\n  private number(value: number, digits: number): string {\n    return new Intl.NumberFormat(this.locale, {\n      minimumFractionDigits: digits,\n      maximumFractionDigits: digits,\n    }).format(value);\n  }\n\n  constructor() {\n    // Rebuild the internal file list from an external `value` write (mirrors the\n    // old `writeValue`). Skipped when the value is merely the echo of an\n    // in-component edit, so re-syncing can never clobber a live selection.\n    effect(() => {\n      const v = this.value();\n      untracked(() => {\n        // Coerce null/undefined to `[]` — a classic-forms binding can write\n        // null, which the old `writeValue(v: … | null)` accepted too.\n        const next: readonly File[] = v === null || v === undefined ? [] : Array.isArray(v) ? v : [v as File];\n        const current = this.files();\n        if (current.length === next.length && current.every((file, i) => file === next[i])) return;\n        this.files.set(next);\n      });\n    });\n  }\n\n  // Template handlers\n\n  protected openPicker(): void {\n    if (this.disabled() || this.readonly()) return;\n    this.picker().nativeElement.click();\n  }\n\n  protected onZoneKey(event: KeyboardEvent): void {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.openPicker();\n    }\n  }\n\n  protected onPickerChange(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    if (target.files) this.acceptFiles(Array.from(target.files));\n    // Reset so picking the same file twice re-fires `change`.\n    target.value = '';\n  }\n\n  protected onDragEnter(event: DragEvent): void {\n    if (this.disabled() || this.readonly()) return;\n    event.preventDefault();\n    this.dragging.set(true);\n  }\n\n  protected onDragOver(event: DragEvent): void {\n    if (this.disabled() || this.readonly()) return;\n    event.preventDefault();\n    if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy';\n  }\n\n  protected onDragLeave(event: DragEvent): void {\n    // Only clear when leaving the zone itself, not internal children.\n    if (event.currentTarget === event.target) this.dragging.set(false);\n  }\n\n  protected onDrop(event: DragEvent): void {\n    event.preventDefault();\n    this.dragging.set(false);\n    if (this.disabled() || this.readonly()) return;\n    const dropped = event.dataTransfer?.files ? Array.from(event.dataTransfer.files) : [];\n    if (dropped.length > 0) this.acceptFiles(dropped);\n  }\n\n  protected removeAt(index: number): void {\n    if (this.disabled() || this.readonly()) return;\n    const next = this.files().filter((_, i) => i !== index);\n    this.files.set(next);\n    this.emit();\n  }\n\n  // Internals\n\n  private acceptFiles(incoming: readonly File[]): void {\n    if (this.disabled() || this.readonly()) return;\n    const accept = this.accept();\n    const maxSize = this.maxSize();\n    const rejections: WrFileUploadRejection[] = [];\n    const accepted: File[] = [];\n\n    for (const file of incoming) {\n      const reason = this.reject(file, accept, maxSize);\n      if (reason) rejections.push({ file, reason });\n      else accepted.push(file);\n    }\n\n    let next: File[];\n    if (this.multiple()) {\n      next = [...this.files(), ...accepted];\n      const maxFiles = this.maxFiles();\n      if (maxFiles > 0 && next.length > maxFiles) {\n        const overflow = next.splice(maxFiles);\n        for (const file of overflow) rejections.push({ file, reason: 'count' });\n      }\n    } else {\n      // Single mode — last accepted wins, prior selection cleared.\n      next = accepted.length > 0 ? [accepted[accepted.length - 1]] : [...this.files()];\n    }\n\n    this.files.set(next);\n    this.touch.emit();\n    this.emit();\n    if (rejections.length > 0) this.rejected.emit(rejections);\n  }\n\n  private reject(file: File, accept: string, maxSize: number): WrFileUploadRejectionReason | null {\n    if (accept && !matchesAccept(file, accept)) return 'type';\n    if (maxSize > 0 && file.size > maxSize) return 'size';\n    return null;\n  }\n\n  private emit(): void {\n    const list = this.files();\n    if (this.multiple()) {\n      this.value.set(list);\n    } else {\n      this.value.set(list.length > 0 ? list[0] : null);\n    }\n  }\n}\n","<div\n  class=\"wr-file-upload__zone\"\n  role=\"button\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"zoneName()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-invalid]=\"fieldAria.ariaInvalid()\"\n  [attr.aria-describedby]=\"fieldAria.describedBy()\"\n  (click)=\"openPicker()\"\n  (keydown)=\"onZoneKey($event)\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <svg class=\"wr-file-upload__icon\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path\n      d=\"M12 16V4M12 4l-4 4M12 4l4 4M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n  <div class=\"wr-file-upload__hint\">\n    <strong>{{ resolvedPick() }}</strong>\n    <span>{{ resolvedDrop() }}</span>\n    @if (helperText()) {\n      <small>{{ helperText() }}</small>\n    }\n  </div>\n</div>\n\n<!--\n  The real <input type=\"file\"> is never operated directly — the zone above is\n  the control and forwards clicks here, so the input is visually hidden and kept\n  OUTSIDE the zone: inside, it nested one interactive element within another\n  (the zone is role=\"button\") and put two tab stops where users see one. It is\n  positioned absolutely and clipped, so being a sibling changes nothing visually.\n  aria-hidden must be paired with tabindex=\"-1\", or hiding a focusable element is\n  itself a violation.\n-->\n<input\n  #picker\n  class=\"wr-file-upload__picker\"\n  type=\"file\"\n  aria-hidden=\"true\"\n  tabindex=\"-1\"\n  [attr.accept]=\"accept() || null\"\n  [attr.multiple]=\"multiple() ? '' : null\"\n  [disabled]=\"disabled() || readonly()\"\n  (change)=\"onPickerChange($event)\"\n/>\n\n@if (showList() && files().length > 0) {\n  <ul class=\"wr-file-upload__list\">\n    @for (file of files(); track $index) {\n      <li class=\"wr-file-upload__item\">\n        <span class=\"wr-file-upload__name\" [title]=\"file.name\">{{ file.name }}</span>\n        <span class=\"wr-file-upload__size\">{{ formatBytes(file.size) }}</span>\n        <button\n          type=\"button\"\n          class=\"wr-file-upload__remove\"\n          [attr.aria-label]=\"resolvedRemove()\"\n          [disabled]=\"disabled() || readonly()\"\n          (click)=\"removeAt($index)\"\n        >\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n            <path\n              d=\"M2 2 L10 10 M10 2 L2 10\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </button>\n      </li>\n    }\n  </ul>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-form.mjs

@@ -43,10 +43,10 @@ class WrFormItem {
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrFormItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: WrFormItem, isStandalone: true, selector: "wr-form-item", inputs: { hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrFormItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: WrFormItem, isStandalone: true, selector: "wr-form-item", inputs: { hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrFormItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrFormItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-form-item',
@@ -116,8 +116,11 @@ const WR_FORM_ERROR_FALLBACKS = {
     required: 'This field is required.',
     requiredTrue: 'This field must be checked.',
     email: 'Enter a valid email address.',
-    minlength: ({ error }) => `Enter at least ${num(error, 'requiredLength')} characters.`,
-    maxlength: ({ error }) => `Enter at most ${num(error, 'requiredLength')} characters.`,
+    // The number goes LAST, so the sentence reads the same at 1 as at 80. A noun
+    // straight after a count needs plural machinery this layer deliberately does
+    // not have — see the note beside the same two keys in `ngwr/i18n/en`.
+    minlength: ({ error }) => `Minimum length is ${num(error, 'requiredLength')}.`,
+    maxlength: ({ error }) => `Maximum length is ${num(error, 'requiredLength')}.`,
     min: ({ error }) => `Enter ${num(error, 'min')} or more.`,
     max: ({ error }) => `Enter ${num(error, 'max')} or less.`,
     pattern: 'This value is not in the expected format.',
@@ -162,6 +165,41 @@ function render(message, key, error, label) {
 function toParams(error) {
     return error && typeof error === 'object' ? error : undefined;
 }
+/**
+ * The two Signal Forms kinds whose spelling and payload differ from the classic
+ * validator that means the same thing.
+ *
+ * Reactive forms emit `minlength` / `maxlength` carrying `requiredLength`;
+ * Signal Forms emit `minLength` / `maxLength` carrying `minLength` / `maxLength`.
+ * Nothing bridged them, so the library's FLAGSHIP forms flavour rendered an
+ * empty error block for both: the key missed every message source in turn — the
+ * app's own map, all twenty-two i18n catalogs, and the built-in fallbacks — and
+ * `resolve` returns `''` for a miss, which the caller then filters out. A field
+ * over its length limit was invalid, marked invalid, and said nothing.
+ *
+ * Normalised here rather than by adding two keys to twenty-two catalogs,
+ * because the message is the SAME message: one sentence about a length, reached
+ * by two spellings of one rule.
+ */
+const SIGNAL_FORMS_ALIASES = {
+    minLength: { key: 'minlength', from: 'minLength' },
+    maxLength: { key: 'maxlength', from: 'maxLength' },
+};
+/**
+ * A Signal Forms length error, restated in the classic shape every message
+ * source already understands. Anything else passes through untouched.
+ */
+function normalizeError(key, error) {
+    const alias = SIGNAL_FORMS_ALIASES[key];
+    if (!alias)
+        return { key, error };
+    const params = toParams(error);
+    const bound = params?.[alias.from];
+    return {
+        key: alias.key,
+        error: bound === undefined ? error : { ...params, requiredLength: bound },
+    };
+}
 /**
  * One error message tied to a validator key. Renders only when the parent
  * form-field has a matching error in `control.errors`, and only once the
@@ -201,10 +239,10 @@ class WrFormError {
         return this.field.errorKeys().includes(key);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrFormError, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: WrFormError, isStandalone: true, selector: "wr-form-error", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "alert" }, properties: { "attr.data-key": "key() ?? null", "class.wr-form-field__error--hidden": "!visible()" }, classAttribute: "wr-form-error wr-form-field__error" }, ngImport: i0, template: `<ng-content />`, isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrFormError, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: WrFormError, isStandalone: true, selector: "wr-form-error", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "alert" }, properties: { "attr.data-key": "key() ?? null", "class.wr-form-field__error--hidden": "!visible()" }, classAttribute: "wr-form-error wr-form-field__error" }, ngImport: i0, template: `<ng-content />`, isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrFormError, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrFormError, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-form-error',
@@ -354,6 +392,9 @@ class WrFormField {
      */
     hintId = computed(() => (!this.hasError() && this.hint() ? `${this.controlId()}-hint` : null), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
+    /** @internal `WrFormFieldContext` — the id a role-based control points `aria-labelledby` at. */
+    labelId = computed(() => (this.label() ? `${this.controlId()}-label` : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
     /**
      * Render a catalog message for any error the markup does not already answer.
      *
@@ -387,7 +428,14 @@ class WrFormField {
             .filter(m => m.text.length > 0);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "autoMessages" }] : /* istanbul ignore next */ []));
-    resolve(key, error) {
+    resolve(rawKey, rawError) {
+        // A consumer's own map is consulted under BOTH spellings — theirs first, so
+        // someone who already worked around this by writing `minLength` keeps
+        // winning, and the normalised one after.
+        const appRaw = this.appMessages[rawKey];
+        if (appRaw !== undefined)
+            return render(appRaw, rawKey, rawError, this.label());
+        const { key, error } = normalizeError(rawKey, rawError);
         const app = this.appMessages[key];
         if (app !== undefined)
             return render(app, key, error, this.label());
@@ -408,16 +456,16 @@ class WrFormField {
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrFormField, isStandalone: true, selector: "wr-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, autoErrors: { classPropertyName: "autoErrors", publicName: "autoErrors", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrFormField, isStandalone: true, selector: "wr-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, optionalLabel: { classPropertyName: "optionalLabel", publicName: "optionalLabel", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, autoErrors: { classPropertyName: "autoErrors", publicName: "autoErrors", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, providers: [
             {
                 provide: WR_FORM_FIELD,
                 // eslint-disable-next-line @angular-eslint/no-forward-ref
                 useExisting: forwardRef(() => WrFormField),
             },
-        ], queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }, { propertyName: "projectedErrors", predicate: WrFormError, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label class=\"wr-form-field__label\" [attr.for]=\"labelFor()\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"wr-form-field__required\" aria-hidden=\"true\">*</span>\n    } @else if (optional()) {\n      <span class=\"wr-form-field__optional\">({{ resolvedOptional() }})</span>\n    }\n  </label>\n}\n\n<div class=\"wr-form-field__control\"><ng-content /></div>\n\n@if (hasError()) {\n  <div class=\"wr-form-field__errors\" [attr.id]=\"describedBy()\">\n    <ng-content select=\"wr-form-error\" />\n    @for (message of autoMessages(); track message.key) {\n      <div class=\"wr-form-error wr-form-field__error\" role=\"alert\" [attr.data-key]=\"message.key\">\n        {{ message.text }}\n      </div>\n    }\n  </div>\n} @else if (hint()) {\n  <small class=\"wr-form-field__hint\" [attr.id]=\"hintId()\">{{ hint() }}</small>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }, { propertyName: "projectedErrors", predicate: WrFormError, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label class=\"wr-form-field__label\" [attr.id]=\"labelId()\" [attr.for]=\"labelFor()\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"wr-form-field__required\" aria-hidden=\"true\">*</span>\n    } @else if (optional()) {\n      <span class=\"wr-form-field__optional\">({{ resolvedOptional() }})</span>\n    }\n  </label>\n}\n\n<div class=\"wr-form-field__control\"><ng-content /></div>\n\n@if (hasError()) {\n  <div class=\"wr-form-field__errors\" [attr.id]=\"describedBy()\">\n    <ng-content select=\"wr-form-error\" />\n    @for (message of autoMessages(); track message.key) {\n      <div class=\"wr-form-error wr-form-field__error\" role=\"alert\" [attr.data-key]=\"message.key\">\n        {{ message.text }}\n      </div>\n    }\n  </div>\n} @else if (hint()) {\n  <small class=\"wr-form-field__hint\" [attr.id]=\"hintId()\">{{ hint() }}</small>\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrFormField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrFormField, decorators: [{
             type: Component,
             args: [{ selector: 'wr-form-field', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, providers: [
                         {
@@ -425,7 +473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                             // eslint-disable-next-line @angular-eslint/no-forward-ref
                             useExisting: forwardRef(() => WrFormField),
                         },
-                    ], template: "@if (label()) {\n  <label class=\"wr-form-field__label\" [attr.for]=\"labelFor()\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"wr-form-field__required\" aria-hidden=\"true\">*</span>\n    } @else if (optional()) {\n      <span class=\"wr-form-field__optional\">({{ resolvedOptional() }})</span>\n    }\n  </label>\n}\n\n<div class=\"wr-form-field__control\"><ng-content /></div>\n\n@if (hasError()) {\n  <div class=\"wr-form-field__errors\" [attr.id]=\"describedBy()\">\n    <ng-content select=\"wr-form-error\" />\n    @for (message of autoMessages(); track message.key) {\n      <div class=\"wr-form-error wr-form-field__error\" role=\"alert\" [attr.data-key]=\"message.key\">\n        {{ message.text }}\n      </div>\n    }\n  </div>\n} @else if (hint()) {\n  <small class=\"wr-form-field__hint\" [attr.id]=\"hintId()\">{{ hint() }}</small>\n}\n" }]
+                    ], template: "@if (label()) {\n  <label class=\"wr-form-field__label\" [attr.id]=\"labelId()\" [attr.for]=\"labelFor()\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"wr-form-field__required\" aria-hidden=\"true\">*</span>\n    } @else if (optional()) {\n      <span class=\"wr-form-field__optional\">({{ resolvedOptional() }})</span>\n    }\n  </label>\n}\n\n<div class=\"wr-form-field__control\"><ng-content /></div>\n\n@if (hasError()) {\n  <div class=\"wr-form-field__errors\" [attr.id]=\"describedBy()\">\n    <ng-content select=\"wr-form-error\" />\n    @for (message of autoMessages(); track message.key) {\n      <div class=\"wr-form-error wr-form-field__error\" role=\"alert\" [attr.data-key]=\"message.key\">\n        {{ message.text }}\n      </div>\n    }\n  </div>\n} @else if (hint()) {\n  <small class=\"wr-form-field__hint\" [attr.id]=\"hintId()\">{{ hint() }}</small>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], optionalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalLabel", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], ngControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { isSignal: true }] }], autoErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoErrors", required: false }] }], projectedErrors: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WrFormError), { isSignal: true }] }] } });
 
 /**
@@ -476,6 +524,10 @@ function useFormFieldAria(options) {
         // compiling; one without it describes nothing but its errors, as before.
         describedBy: computed(() => field?.describedBy() ?? field?.hintId?.() ?? null),
         ariaInvalid: computed(() => ((field?.errorKeys().length ?? 0) > 0 ? 'true' : null)),
+        // `null` for a control that `<label for>` already reaches — pointing at the
+        // same label twice would name it twice. Only the role-based controls read
+        // this, and only because `for` cannot bind to a role.
+        labelledBy: computed(() => field?.labelId?.() ?? null),
     };
 }