@skra/ui 0.6.0 → 0.8.0

package/fesm2022/skra-ui-file-upload.mjs

@@ -0,0 +1,894 @@
+import * as i0 from '@angular/core';
+import { Directive, inject, Injectable, ElementRef, output, signal, computed, effect, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, DOCUMENT, contentChild, contentChildren, DestroyRef, input } from '@angular/core';
+import { IdGeneratorService, SkraFieldContext } from '@skra/ui/field';
+
+// Slot markers of the FileUpload family (ADR 020 Smart Slots v2.0). Each is detected
+// through a Signal Query so the owning component renders a slot's wrapper only when the
+// slot is filled — never an empty node. Entry-local (the Button / Accordion precedent)
+// to avoid a cross-entry marker dependency. Import the markers you use alongside the
+// component: projection works on the attribute alone, but slot DETECTION needs the class.
+// ─── <skra-file-upload> ──────────────────────────────────────────────────────
+/** Leading icon of `<skra-file-upload>`'s face. Decorative — the consumer marks it `aria-hidden`. */
+class SkraFileUploadStart {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileUploadStart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: SkraFileUploadStart, isStandalone: true, selector: "[skra-start]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileUploadStart, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skra-start]',
+                    standalone: true,
+                }]
+        }] });
+/**
+ * REQUIRED. The visible action text of `<skra-file-upload>` ("Choose a video"). It joins the
+ * native control's accessible name through `aria-labelledby` (ADR 0056 D4, WCAG 2.5.3), so a
+ * voice-control user can say what they see.
+ */
+class SkraFileUploadAction {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileUploadAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: SkraFileUploadAction, isStandalone: true, selector: "[skra-file-upload-action]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileUploadAction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skra-file-upload-action]',
+                    standalone: true,
+                }]
+        }] });
+/**
+ * The drop instruction ("or drag it here"). Its presence switches the face from the compact
+ * row to the drop-zone layout — an instruction is what invites dragging. Hidden on devices
+ * with no fine pointer, where "drag" means nothing.
+ */
+class SkraFileUploadInstruction {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileUploadInstruction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: SkraFileUploadInstruction, isStandalone: true, selector: "[skra-file-upload-instruction]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileUploadInstruction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skra-file-upload-instruction]',
+                    standalone: true,
+                }]
+        }] });
+/**
+ * The selection summary in the page's language ("recording.mp4, 2.3 GB"). Rendered inside the
+ * composite's always-present `role="status"` region and linked to the control as a description,
+ * so a change is announced and the user agent's browser-language status is not the only one.
+ */
+class SkraFileUploadStatus {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileUploadStatus, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: SkraFileUploadStatus, isStandalone: true, selector: "[skra-file-upload-status]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileUploadStatus, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skra-file-upload-status]',
+                    standalone: true,
+                }]
+        }] });
+// ─── li[skraFileItem] ────────────────────────────────────────────────────────
+/** Leading visual of a file row — an icon or a consumer-made thumbnail (`URL.createObjectURL`). */
+class SkraFileItemStart {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileItemStart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: SkraFileItemStart, isStandalone: true, selector: "[skra-start]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileItemStart, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skra-start]',
+                    standalone: true,
+                }]
+        }] });
+/** Row detail under the name — typically `progress[skraProgress]` or a status line. */
+class SkraFileItemDetail {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileItemDetail, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: SkraFileItemDetail, isStandalone: true, selector: "[skra-file-item-detail]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileItemDetail, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skra-file-item-detail]',
+                    standalone: true,
+                }]
+        }] });
+/**
+ * The row's error text. Its presence is what paints the row invalid
+ * (`data-skra-validation="invalid"`), so the colour never appears without the words
+ * (WCAG 1.4.1 by construction).
+ */
+class SkraFileItemError {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileItemError, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: SkraFileItemError, isStandalone: true, selector: "[skra-file-item-error]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileItemError, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skra-file-item-error]',
+                    standalone: true,
+                }]
+        }] });
+/** Trailing row actions — the consumer's `button[skraButton]`s (cancel / retry / remove). */
+class SkraFileItemEnd {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileItemEnd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: SkraFileItemEnd, isStandalone: true, selector: "[skra-end]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileItemEnd, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skra-end]',
+                    standalone: true,
+                }]
+        }] });
+
+// The two "How" helpers of the FileUpload family — pure, framework-free and SSR-safe (no
+// DOM access; `File` is used as a type and read through `name` / `type` only). Every
+// consumer otherwise reimplements them, and each has a subtle edge that is easy to get
+// wrong: 1000 vs 1024, a rounded value that crosses a unit boundary, the HTML `accept`
+// grammar, and files the platform reports with no MIME type at all.
+/** SI units, 1 kB = 1000 B — the `Intl` unit identifiers, and what macOS / iOS show. */
+const UNITS = [
+    'byte',
+    'kilobyte',
+    'megabyte',
+    'gigabyte',
+    'terabyte',
+    'petabyte',
+];
+/**
+ * Format a byte count for display in `locale` (`undefined` → the host default, the ADR 0050
+ * §5 precedent): `2,3 GB` in `pl`, `2.3 GB` in `en`, one fractional digit at most.
+ *
+ * SI units (1 kB = 1000 B) because `Intl` names only those and macOS / iOS report sizes the
+ * same way. The unit label is `Intl`'s own short form, so it is translated and pluralised by
+ * the platform's locale data, never by Skra (e.g. `999 byte` in English, `999 B` in Polish —
+ * CLDR's choice, not ours). A multi-GB `File.size` is a safe integer; nothing here rounds
+ * the input.
+ *
+ * @throws RangeError for a negative or non-finite count — a size that cannot exist is a bug
+ *   in the caller, and printing `NaN byte` would hide it.
+ */
+function skraFormatFileSize(bytes, locale) {
+    if (!Number.isFinite(bytes) || bytes < 0) {
+        throw new RangeError(`skraFormatFileSize: expected a finite, non-negative byte count, got ${bytes}.`);
+    }
+    let index = 0;
+    while (index < UNITS.length - 1 && bytes >= 1000 ** (index + 1))
+        index += 1;
+    // A value that ROUNDS up to 1000 of its unit reads as the next unit: 999 950 B is
+    // "1 MB", not "1,000 kB".
+    if (index < UNITS.length - 1 &&
+        Math.round((bytes / 1000 ** index) * 10) / 10 >= 1000) {
+        index += 1;
+    }
+    return new Intl.NumberFormat(locale, {
+        style: 'unit',
+        unit: UNITS[index],
+        unitDisplay: 'short',
+        maximumFractionDigits: 1,
+    }).format(bytes / 1000 ** index);
+}
+function parseAccept(accept) {
+    const tokens = [];
+    for (const raw of accept.split(',')) {
+        const token = raw.trim().toLowerCase();
+        if (token.length > 1 && token.startsWith('.')) {
+            tokens.push({ kind: 'extension', value: token });
+            continue;
+        }
+        // `type/subtype` or `type/*`; parameters (`;charset=…`) never take part in a match.
+        const mime = token.split(';')[0].trim();
+        const slash = mime.indexOf('/');
+        if (slash <= 0 || slash === mime.length - 1)
+            continue;
+        const subtype = mime.slice(slash + 1);
+        if (subtype === '*') {
+            tokens.push({ kind: 'wildcard', value: mime.slice(0, slash + 1) });
+        }
+        else {
+            tokens.push({ kind: 'mime', value: mime });
+        }
+    }
+    return tokens;
+}
+/**
+ * Does `file` satisfy `accept`, under the HTML attribute's own semantics?
+ *
+ * - `.ext` — a case-insensitive suffix of the file NAME;
+ * - `type/subtype` — the file's MIME type, case-insensitive, parameters ignored;
+ * - `type/*` — any subtype of `type`.
+ *
+ * An empty `accept`, or one with no token the grammar recognises, accepts everything — the
+ * picker applies no filter in that case either.
+ *
+ * **Typeless files** (`File.type === ''` — common for `.mkv` / `.heic` on some engines) are
+ * matched by extension tokens only, and PASS when `accept` has no extension token (spec Q-5).
+ * A false rejection of a legitimate 4 GB recording costs more than a junk file the consumer
+ * and the server reject anyway.
+ *
+ * `accept` is never a guarantee: every platform lets a user bypass it. Validate on the server.
+ */
+function skraFileMatchesAccept(file, accept) {
+    const tokens = parseAccept(accept);
+    if (!tokens.length)
+        return true;
+    const name = file.name.toLowerCase();
+    const type = file.type.trim().toLowerCase().split(';')[0].trim();
+    const extensions = tokens.filter((t) => t.kind === 'extension');
+    if (extensions.some((t) => name.endsWith(t.value)))
+        return true;
+    if (!type)
+        return extensions.length === 0;
+    return tokens.some((t) => (t.kind === 'mime' && t.value === type) ||
+        (t.kind === 'wildcard' && type.startsWith(t.value)));
+}
+
+/**
+ * Internal — NOT part of the public barrel. Partition one selection into accepted and
+ * rejected files, enforcing exactly what the platform's own picker enforces and nothing more
+ * (size, file count caps and duplicates are product policy — the consumer's, in `filesChange`).
+ *
+ * Precedence, one reason per file:
+ *  1. `directory` — a dropped folder is never a file;
+ *  2. `count` — more than one file on a control without `multiple` rejects ALL of them: a
+ *     single-file control never silently keeps one of N (spec Q-6);
+ *  3. `type` — the file does not satisfy `accept` (`skraFileMatchesAccept`, typeless → Q-5).
+ *
+ * Order is preserved within both lists.
+ */
+function partitionFiles(candidates, constraints) {
+    const accepted = [];
+    const rejected = [];
+    const tooMany = !constraints.multiple &&
+        candidates.filter((c) => !c.isDirectory).length > 1;
+    for (const { file, isDirectory } of candidates) {
+        if (isDirectory)
+            rejected.push({ file, reason: 'directory' });
+        else if (tooMany)
+            rejected.push({ file, reason: 'count' });
+        else if (skraFileMatchesAccept(file, constraints.accept))
+            accepted.push(file);
+        else
+            rejected.push({ file, reason: 'type' });
+    }
+    return { accepted, rejected };
+}
+
+/**
+ * Internal — provided by `<skra-file-upload>` per instance, injected `{ optional: true }` by
+ * the projected `input[skraFileInput]` (ADR 013 §3.6 contextual wiring). Carries ids only —
+ * never a value, never state (ADR 037; the composite owns no state, ADR 027 §3.8).
+ *
+ * Its PRESENCE is what puts the input into overlay mode (`data-skra-in-upload`, ADR 027
+ * §3.9b): Emulated encapsulation lets no parent style projected content, and DI keeps the
+ * rule in the atom's own stylesheet instead of a global slice (no O-8 bridge cost).
+ */
+class SkraFileUploadContext {
+    base = inject(IdGeneratorService).nextId('skra-file-upload');
+    /** The face's visible action text — the second half of the control's name (ADR 0056 D4). */
+    actionId = `${this.base}-action`;
+    /** The always-present status region — a description of the control, never its name. */
+    statusId = `${this.base}-status`;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileUploadContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileUploadContext });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileUploadContext, decorators: [{
+            type: Injectable
+        }] });
+
+/** True when a drag carries files from the OS — not text, not a link, not an in-page node. */
+function carriesFiles(event) {
+    const types = event.dataTransfer?.types;
+    return !!types && Array.from(types).includes('Files');
+}
+/**
+ * `input[type="file"][skraFileInput]` — the native file control (spec
+ * `component-file-upload-spec.md`; ADR 0056 Group B). A Component-on-a-native-host
+ * (ADR 040): `<input>` is void, so `template: ''`, and `file-input.scss` is scoped to the
+ * host by Emulated encapsulation — the box from `comp.field.*`, the user agent's
+ * `::file-selector-button` painted from `comp.field.file.*` (ADR 0056 B1–B5).
+ *
+ * **No inputs.** Every constraint is a NATIVE attribute on the consumer's own host —
+ * `accept`, `multiple`, `capture`, `required`, `disabled`, `name`, `webkitdirectory`
+ * (native-attr-first, Iron Boundary #9). Skra reads them at the moment of a selection; it
+ * never mirrors them.
+ *
+ * **Agnostic value (ADR 037).** The selection is REPORTED, never held: `filesChange` carries
+ * the normalised files, `filesRejected` what the normalisation turned down. Native
+ * `(change)` keeps working and reports the RAW selection; `filesChange` is the normalised one.
+ *
+ * **Normalisation** — Skra enforces exactly what the platform's own picker enforces, on
+ * every path, and nothing more (size / count caps / duplicates are product policy):
+ *
+ * | Rule | Picker (`change`) | Drop (`drop` on the host) |
+ * | --- | --- | --- |
+ * | `accept` mismatch → `type` | possible (Windows "All files", Android) | the browser applies no `accept` to drops |
+ * | >1 file without `multiple` → `count` | impossible | possible — ALL rejected |
+ * | a directory → `directory` | impossible | possible |
+ * | assignment | `input.files` left as the platform set it | `input.files` = the ACCEPTED files, then `input` + `change` are dispatched |
+ *
+ * A drop where nothing is accepted leaves the existing selection untouched and emits only
+ * `filesRejected` — like a cancelled picker, it is not a change.
+ *
+ * **Field wiring (ADR 013 §3.7)** — the `skraInput` wiring verbatim: optional
+ * `SkraFieldContext`; `id` / `disabled` written from guarded `effect()`s so a standalone
+ * consumer's own attributes survive; `aria-describedby` / `aria-invalid` / `aria-required`
+ * host bindings. Readonly: the native `readonly` attribute does not apply to `type="file"`
+ * (HTML) and `aria-readonly` is not exposed for its `button` role (G-4, measured), so it is
+ * `aria-disabled="true"` — the focusable soft-disable — plus a behaviour guard that blocks the
+ * picker (`click`, keys other than `Tab`) and drops.
+ *
+ * **Known limitation (G-4, measured in Chromium):** "required" cannot reach assistive
+ * technology on this control — neither `aria-required` (kept: harmless, and the field's
+ * contract) nor native `required` is exposed for the `button` role. Say "required" in visible
+ * text (the label or the hint) as well.
+ *
+ * **Inside `<skra-file-upload>`** (ADR 0056 Group D) the composite's context is injected:
+ * the host reflects `data-skra-in-upload` (ADR 027 §3.9b) and its own stylesheet makes it a
+ * transparent overlay over the painted face (`opacity: 0` only — D2); its name becomes
+ * "field label + visible action text" via `aria-labelledby` (D4, WCAG 2.5.3) and the
+ * composite's status region joins its description.
+ *
+ *   <skra-field>
+ *     <label skraLabelFor>Session recording</label>
+ *     <input skraFileInput type="file" accept="video/*" #picker (filesChange)="onFiles($event)" />
+ *   </skra-field>
+ */
+class SkraFileInput {
+    el = inject(ElementRef);
+    context = inject(SkraFieldContext, { optional: true });
+    upload = inject(SkraFileUploadContext, { optional: true });
+    /** User picked or dropped files. Fires on user interaction only, after normalisation. */
+    filesChange = output();
+    /** Files the normalisation rejected. Fires only when at least one was rejected. */
+    filesRejected = output();
+    inUpload = this.upload !== null;
+    dragOver = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragOver" }] : /* istanbul ignore next */ []));
+    // dragenter / dragleave also fire when the pointer crosses into the user agent's own
+    // button inside the control (retargeted to the host), and Safari reports a null
+    // `relatedTarget` on every dragleave — so a depth counter, not relatedTarget, decides
+    // when the drag has really left (spec G-5).
+    dragDepth = 0;
+    softDisabled = computed(() => !!this.context?.isReadonly() && !this.context.isDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "softDisabled" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => {
+        const ids = [this.context?.describedByIds(), this.upload?.statusId].filter(Boolean);
+        return ids.length ? ids.join(' ') : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    // ADR 0056 D4 — field label first, the face's action text second; the action alone when
+    // there is no field. Outside the composite the name is the consumer's `<label>` (Path 1).
+    labelledBy = computed(() => {
+        if (!this.upload)
+            return null;
+        return [this.context?.labelId(), this.upload.actionId]
+            .filter(Boolean)
+            .join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const el = this.el.nativeElement;
+        // Field-cascaded native properties — only bound when a field is present, so a
+        // standalone consumer keeps full control of its own `id` / `disabled` (ADR 013 §3.7).
+        if (this.context) {
+            const ctx = this.context;
+            effect(() => {
+                el.id = ctx.fieldId();
+            });
+            effect(() => {
+                el.disabled = ctx.isDisabled();
+            });
+        }
+        // Dev-only: inside the composite, `aria-labelledby` names the control and OVERRIDES a
+        // `<label for>` — so outside <skra-field> a consumer's own label would vanish from the
+        // name. A read of the rendered control, never a write.
+        if (this.upload &&
+            !this.context &&
+            (typeof ngDevMode === 'undefined' || ngDevMode)) {
+            afterNextRender(() => {
+                if (el.labels?.length) {
+                    console.warn('[skraFileInput] inside <skra-file-upload> without <skra-field>, the control is named by ' +
+                        'its visible action alone (aria-labelledby, ADR 0056 D4) — which overrides your ' +
+                        '<label for>. Wrap it in <skra-field> with label[skraLabelFor] to get "label + action".');
+                }
+            });
+        }
+    }
+    /**
+     * Reset the native selection (`value = ''`) so the same file can be picked again — the
+     * queue model (`filesChange` → enqueue → `clear()`). Programmatic: emits nothing.
+     * Reach it through a template reference: `#picker` on the host resolves to this component.
+     */
+    clear() {
+        this.el.nativeElement.value = '';
+    }
+    get blocked() {
+        return this.el.nativeElement.disabled || !!this.context?.isReadonly();
+    }
+    /**
+     * The native constraints, read at selection time. A `webkitdirectory` picker hands over
+     * EVERY file of the chosen folder whether or not `multiple` is set, so it counts as
+     * multiple — otherwise each folder pick would be rejected whole as `count`.
+     */
+    constraints() {
+        const el = this.el.nativeElement;
+        return { accept: el.accept, multiple: el.multiple || el.webkitdirectory };
+    }
+    /**
+     * The picker path — and the drop path's own dispatched `change`, already normalised.
+     *
+     * Order is part of the contract, the same on both paths: `filesChange` FIRST, then
+     * `filesRejected`. A consumer that clears its error on a new selection and sets it on a
+     * rejection then ends on the rejection message, not on a cleared one. A selection where
+     * EVERY file was rejected emits no `filesChange` at all (like a fully rejected drop): it
+     * changed nothing the consumer can use. An empty selection with no rejection (a picker
+     * that reports a cleared selection) still emits `filesChange([])`.
+     */
+    onChange() {
+        const el = this.el.nativeElement;
+        const { accepted, rejected } = partitionFiles(Array.from(el.files ?? [], (file) => ({ file, isDirectory: false })), this.constraints());
+        if (accepted.length || !rejected.length)
+            this.filesChange.emit(accepted);
+        if (rejected.length)
+            this.filesRejected.emit(rejected);
+    }
+    /** Readonly: `preventDefault` on `click` keeps the picker closed, for pointer and keyboard alike. */
+    blockWhenReadonly(event) {
+        if (this.context?.isReadonly())
+            event.preventDefault();
+    }
+    /** Readonly: block keyboard activation; let `Tab` through. */
+    blockKeyWhenReadonly(event) {
+        if (this.context?.isReadonly() && event.key !== 'Tab') {
+            event.preventDefault();
+        }
+    }
+    onDragEnter(event) {
+        if (!carriesFiles(event) || this.blocked)
+            return;
+        event.preventDefault();
+        this.dragDepth += 1;
+        this.dragOver.set(true);
+    }
+    onDragOver(event) {
+        if (!carriesFiles(event))
+            return;
+        // Always cancelled for a file drag: on a blocked control that is what stops the user
+        // agent's own drop handling (which would assign the files); `dropEffect` tells the
+        // user why nothing will happen.
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = this.blocked ? 'none' : 'copy';
+        }
+        if (!this.blocked) {
+            // A dragover with no counted dragenter (the control became enabled mid-drag) still
+            // owes the leave that clears it.
+            if (this.dragDepth === 0)
+                this.dragDepth = 1;
+            this.dragOver.set(true);
+        }
+    }
+    onDragLeave() {
+        if (this.dragDepth === 0)
+            return;
+        this.dragDepth -= 1;
+        if (this.dragDepth === 0)
+            this.dragOver.set(false);
+    }
+    resetDrag() {
+        this.dragDepth = 0;
+        this.dragOver.set(false);
+    }
+    /** The drop path — normalise, then assign the ACCEPTED files and replay the native events. */
+    onDrop(event) {
+        if (!carriesFiles(event))
+            return;
+        event.preventDefault();
+        this.resetDrag();
+        if (this.blocked || !event.dataTransfer)
+            return;
+        const el = this.el.nativeElement;
+        const { accepted, rejected } = partitionFiles(this.candidatesOf(event.dataTransfer), this.constraints());
+        if (accepted.length) {
+            const transfer = new DataTransfer();
+            for (const file of accepted)
+                transfer.items.add(file);
+            el.files = transfer.files;
+            // The native event stream stays the one source of truth: consumers bound through
+            // `(change)`, `[formControl]` or `[(ngModel)]` see a drop exactly like a pick, and
+            // `onChange()` emits `filesChange` once, from the same place for both paths.
+            el.dispatchEvent(new Event('input', { bubbles: true }));
+            el.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+        // Last, as on the picker path (see onChange).
+        if (rejected.length)
+            this.filesRejected.emit(rejected);
+    }
+    /**
+     * Directory detection has to happen INSIDE the `drop` handler: `webkitGetAsEntry()` is the
+     * only cross-engine signal (a dropped folder arrives as a `File` too), and the item list
+     * is emptied once the event returns.
+     */
+    candidatesOf(transfer) {
+        const items = transfer.items
+            ? Array.from(transfer.items).filter((i) => i.kind === 'file')
+            : [];
+        if (!items.length) {
+            return Array.from(transfer.files, (file) => ({
+                file,
+                isDirectory: false,
+            }));
+        }
+        const candidates = [];
+        for (const item of items) {
+            const file = item.getAsFile();
+            if (!file)
+                continue;
+            const entry = typeof item.webkitGetAsEntry === 'function'
+                ? item.webkitGetAsEntry()
+                : null;
+            candidates.push({ file, isDirectory: !!entry?.isDirectory });
+        }
+        return candidates;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: SkraFileInput, isStandalone: true, selector: "input[type=\"file\"][skraFileInput]", outputs: { filesChange: "filesChange", filesRejected: "filesRejected" }, host: { listeners: { "change": "onChange()", "click": "blockWhenReadonly($event)", "keydown": "blockKeyWhenReadonly($event)", "dragenter": "onDragEnter($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave()", "drop": "onDrop($event)", "dragend": "resetDrag()" }, properties: { "attr.aria-describedby": "describedBy()", "attr.aria-labelledby": "labelledBy()", "attr.aria-invalid": "context?.hasError() ? \"true\" : null", "attr.aria-required": "context?.isRequired() ? \"true\" : null", "attr.aria-disabled": "softDisabled() ? \"true\" : null", "attr.data-skra-dragover": "dragOver() ? \"\" : null", "attr.data-skra-in-upload": "inUpload ? \"\" : null" } }, ngImport: i0, template: '', isInline: true, styles: [":host{background:var(--skra-comp-field-background);color:var(--skra-comp-field-foreground);border-color:var(--skra-comp-field-border-color);border-width:var(--skra-comp-field-border-width);border-style:var(--skra-comp-field-border-style);border-radius:var(--skra-comp-field-radius);box-sizing:border-box;padding-block:calc(var(--skra-comp-field-padding-block) - var(--skra-comp-field-file-action-padding-block) - var(--skra-comp-field-file-action-border-width));min-block-size:calc(1lh + 2 * var(--skra-comp-field-padding-block) + 2 * var(--skra-comp-field-border-width));padding-inline:var(--skra-comp-field-padding-inline);box-shadow:var(--skra-comp-field-shadow);max-inline-size:100%;font:inherit;cursor:pointer;outline:none;transition:background-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),border-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing)}@media(hover:hover)and (pointer:fine){:host(:hover:not(:disabled):not([aria-disabled=true])){background:var(--skra-comp-field-background-hover);border-color:var(--skra-comp-field-border-color-hover)}:host(:hover:not(:disabled):not([aria-disabled=true]))::file-selector-button{background:var(--skra-comp-field-file-action-background-hover)}}:host(:focus-visible){border-color:var(--skra-comp-field-focus-ring-color);outline:var(--skra-comp-field-focus-ring-width) solid var(--skra-comp-field-focus-ring-color);outline-offset:0}:host([data-skra-dragover]){background:var(--skra-comp-field-file-background-dragover);border-color:var(--skra-comp-field-file-border-color-dragover);color:var(--skra-comp-field-file-foreground-dragover)}:host(:disabled){cursor:not-allowed;opacity:var(--skra-sys-opacity-disabled)}:host([aria-disabled=true]){background:var(--skra-comp-field-background-readonly);border-color:var(--skra-comp-field-border-color-readonly);cursor:default}:host([aria-invalid=true]){border-color:var(--skra-comp-field-error-color)}:host([aria-invalid=true]:focus-visible){outline-color:var(--skra-comp-field-error-color)}:host::file-selector-button{background:var(--skra-comp-field-file-action-background);color:var(--skra-comp-field-file-action-foreground);border-color:var(--skra-comp-field-file-action-border-color);border-width:var(--skra-comp-field-file-action-border-width);border-style:var(--skra-comp-field-file-action-border-style);border-radius:var(--skra-comp-field-file-action-radius);padding-block:var(--skra-comp-field-file-action-padding-block);padding-inline:var(--skra-comp-field-file-action-padding-inline);cursor:pointer;transition:background-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing)}:host(:active:not(:disabled):not([aria-disabled=true]))::file-selector-button{background:var(--skra-comp-field-file-action-background-active)}:host(:disabled)::file-selector-button{cursor:not-allowed}:host([aria-disabled=true])::file-selector-button{cursor:default}:host([data-skra-in-upload]){position:absolute;inset:0;box-sizing:border-box;inline-size:100%;block-size:100%;min-block-size:0;opacity:0;cursor:pointer}:host([data-skra-in-upload]:disabled){cursor:not-allowed}:host([data-skra-in-upload][aria-disabled=true]){cursor:default}@media(prefers-reduced-motion:reduce){:host{transition:none}:host::file-selector-button{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'input[type="file"][skraFileInput]', standalone: true, template: '', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
+                        // ARIA relationships — Skra-owned, present only while a field / the composite cascades them.
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                        '[attr.aria-invalid]': 'context?.hasError() ? "true" : null',
+                        '[attr.aria-required]': 'context?.isRequired() ? "true" : null',
+                        // Readonly → `aria-disabled` (spec Q-4's fallback, taken 2026-10-31 on the G-4
+                        // measurement): native `readonly` does not apply to type="file", and `aria-readonly` is
+                        // not exposed for the role a file input has (`button`) — a screen reader heard nothing.
+                        // `aria-disabled` alone is the sanctioned soft-disable (boundary #9 exception): the
+                        // control stays focusable, AT hears "unavailable", the guard below makes it true. Never
+                        // alongside native `disabled`, which already says it.
+                        '[attr.aria-disabled]': 'softDisabled() ? "true" : null',
+                        // ADR 027 §3.9a — a Pointer state with no pseudo-class (`:drop()` never shipped).
+                        '[attr.data-skra-dragover]': 'dragOver() ? "" : null',
+                        // ADR 027 §3.9b — structural placement marker, static for the instance's lifetime.
+                        '[attr.data-skra-in-upload]': 'inUpload ? "" : null',
+                        '(change)': 'onChange()',
+                        '(click)': 'blockWhenReadonly($event)',
+                        '(keydown)': 'blockKeyWhenReadonly($event)',
+                        '(dragenter)': 'onDragEnter($event)',
+                        '(dragover)': 'onDragOver($event)',
+                        '(dragleave)': 'onDragLeave()',
+                        '(drop)': 'onDrop($event)',
+                        '(dragend)': 'resetDrag()',
+                    }, styles: [":host{background:var(--skra-comp-field-background);color:var(--skra-comp-field-foreground);border-color:var(--skra-comp-field-border-color);border-width:var(--skra-comp-field-border-width);border-style:var(--skra-comp-field-border-style);border-radius:var(--skra-comp-field-radius);box-sizing:border-box;padding-block:calc(var(--skra-comp-field-padding-block) - var(--skra-comp-field-file-action-padding-block) - var(--skra-comp-field-file-action-border-width));min-block-size:calc(1lh + 2 * var(--skra-comp-field-padding-block) + 2 * var(--skra-comp-field-border-width));padding-inline:var(--skra-comp-field-padding-inline);box-shadow:var(--skra-comp-field-shadow);max-inline-size:100%;font:inherit;cursor:pointer;outline:none;transition:background-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),border-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing)}@media(hover:hover)and (pointer:fine){:host(:hover:not(:disabled):not([aria-disabled=true])){background:var(--skra-comp-field-background-hover);border-color:var(--skra-comp-field-border-color-hover)}:host(:hover:not(:disabled):not([aria-disabled=true]))::file-selector-button{background:var(--skra-comp-field-file-action-background-hover)}}:host(:focus-visible){border-color:var(--skra-comp-field-focus-ring-color);outline:var(--skra-comp-field-focus-ring-width) solid var(--skra-comp-field-focus-ring-color);outline-offset:0}:host([data-skra-dragover]){background:var(--skra-comp-field-file-background-dragover);border-color:var(--skra-comp-field-file-border-color-dragover);color:var(--skra-comp-field-file-foreground-dragover)}:host(:disabled){cursor:not-allowed;opacity:var(--skra-sys-opacity-disabled)}:host([aria-disabled=true]){background:var(--skra-comp-field-background-readonly);border-color:var(--skra-comp-field-border-color-readonly);cursor:default}:host([aria-invalid=true]){border-color:var(--skra-comp-field-error-color)}:host([aria-invalid=true]:focus-visible){outline-color:var(--skra-comp-field-error-color)}:host::file-selector-button{background:var(--skra-comp-field-file-action-background);color:var(--skra-comp-field-file-action-foreground);border-color:var(--skra-comp-field-file-action-border-color);border-width:var(--skra-comp-field-file-action-border-width);border-style:var(--skra-comp-field-file-action-border-style);border-radius:var(--skra-comp-field-file-action-radius);padding-block:var(--skra-comp-field-file-action-padding-block);padding-inline:var(--skra-comp-field-file-action-padding-inline);cursor:pointer;transition:background-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing)}:host(:active:not(:disabled):not([aria-disabled=true]))::file-selector-button{background:var(--skra-comp-field-file-action-background-active)}:host(:disabled)::file-selector-button{cursor:not-allowed}:host([aria-disabled=true])::file-selector-button{cursor:default}:host([data-skra-in-upload]){position:absolute;inset:0;box-sizing:border-box;inline-size:100%;block-size:100%;min-block-size:0;opacity:0;cursor:pointer}:host([data-skra-in-upload]:disabled){cursor:not-allowed}:host([data-skra-in-upload][aria-disabled=true]){cursor:default}@media(prefers-reduced-motion:reduce){:host{transition:none}:host::file-selector-button{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { filesChange: [{ type: i0.Output, args: ["filesChange"] }], filesRejected: [{ type: i0.Output, args: ["filesRejected"] }] } });
+
+/**
+ * Internal — NOT part of the public barrel. The page-navigation guard of the FileUpload
+ * family (spec Q-3, architect-reviewed 2026-10-31: spec-level, not an ADR).
+ *
+ * A file dropped a few pixels OUTSIDE a drop zone makes the browser navigate to it — midway
+ * through a multi-GB upload, that destroys the session. While at least one
+ * `<skra-file-upload>` is mounted, this cancels `dragover` / `drop` on the document, and only
+ * for drags that:
+ *  - carry `Files` (text, links and in-page drags are never touched);
+ *  - nothing nearer has already handled (`defaultPrevented` — every drop target, including
+ *    `input[skraFileInput]`, cancels the events it accepts);
+ *  - do not land on a target that accepts files natively: ANY `input[type="file"]` (Skra's or
+ *    not) and editable content keep their own drop behaviour.
+ *
+ * It is the library's FIRST document-level listener, so the rules are binding here: scoped
+ * exactly as above, ref-counted (installed once for any number of instances, removed with the
+ * last), browser-only (installed from `afterNextRender`, so never under SSR). A second
+ * component needing one lifts these rules into an ADR. react-dropzone ships the same default
+ * (`preventDropOnDocument`).
+ */
+class SkraFileDropGuard {
+    doc = inject(DOCUMENT);
+    holders = 0;
+    // Cancel ONLY — no `dropEffect` write. Cancelling `dragover` + `drop` is what stops the
+    // navigation; writing `dropEffect = 'none'` here would also silently kill a consumer's own
+    // page-wide drop target on `window` (or a later `document` listener) that cancels without
+    // setting `dropEffect` itself — the browser would never fire its `drop` (review 2026-11-01).
+    onDragOver = (event) => {
+        if (this.guards(event))
+            event.preventDefault();
+    };
+    onDrop = (event) => {
+        if (this.guards(event))
+            event.preventDefault();
+    };
+    /** One mounted composite more. Installs the listeners on the first. */
+    acquire() {
+        this.holders += 1;
+        if (this.holders > 1)
+            return;
+        this.doc.addEventListener('dragover', this.onDragOver);
+        this.doc.addEventListener('drop', this.onDrop);
+    }
+    /** One mounted composite fewer. Removes the listeners with the last. */
+    release() {
+        if (this.holders === 0)
+            return;
+        this.holders -= 1;
+        if (this.holders > 0)
+            return;
+        this.doc.removeEventListener('dragover', this.onDragOver);
+        this.doc.removeEventListener('drop', this.onDrop);
+    }
+    guards(event) {
+        if (event.defaultPrevented)
+            return false;
+        const types = event.dataTransfer?.types;
+        if (!types || !Array.from(types).includes('Files'))
+            return false;
+        const target = event.target;
+        if (target?.closest?.('input[type="file"]'))
+            return false;
+        if (target?.isContentEditable)
+            return false;
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileDropGuard, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileDropGuard, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileDropGuard, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * `<skra-file-upload>` — the optional enhancement over a projected `input[skraFileInput]`
+ * (spec `component-file-upload-spec.md`; ADR 0056 Group D). It paints a localisable face —
+ * the action and the instruction in the PAGE's language, from tokens — enlarges the control
+ * into a drop zone, and hosts the live selection-status region.
+ *
+ * Why it exists: the native control's two strings ("Choose File" / "No file chosen") come
+ * from the browser's UI language, not the page's `lang`, and no CSS or attribute can replace
+ * them (ADR 0056 §1.6). The native control stays THE control (D2): transparent
+ * (`opacity: 0`, its own stylesheet, switched on by this component's context), covering the
+ * whole face, it remains the focus target, the pointer target, the drop target and the node
+ * assistive technology reads — so `required`, `aria-invalid`, the validation bubble, label
+ * activation, form submission and the iOS camera / library sheet all keep working.
+ *
+ * **State-READING** (ADR 027 §3.8, ADR 055): no inputs, no outputs; every state it paints —
+ * hover, focus-visible, drag-over, disabled, readonly, invalid — is read from the projected
+ * control through `:has()`. It owns no state, so it mirrors no ARIA.
+ *
+ * **Layout follows content (ADR 020).** No `[skra-file-upload-instruction]` → a compact,
+ * field-like row (`[icon] [action] status`); with one → the drop-zone layout (stacked,
+ * centred, dashed). Both accept drops. There is no look input (skin philosophy).
+ *
+ * **Never project interactive content** into it — the transparent control covers the whole
+ * face and swallows the clicks (D3). The file list is a SIBLING.
+ *
+ * **Page-navigation guard.** While one is mounted, a FILE drag dropped outside every drop
+ * target is cancelled instead of navigating the page to the file (spec Q-3; text / link
+ * drags, native file inputs and editable content are untouched).
+ *
+ *   <skra-field [hasError]="!!error()">
+ *     <label skraLabelFor>Session recording</label>
+ *     <skra-file-upload>
+ *       <span skra-file-upload-action>Choose a video</span>
+ *       <span skra-file-upload-instruction>or drag it here</span>
+ *       <span skra-file-upload-status>{{ summary() }}</span>
+ *       <input skraFileInput type="file" accept="video/*" (filesChange)="onFiles($event)" />
+ *     </skra-file-upload>
+ *     <skra-error>{{ error() }}</skra-error>
+ *   </skra-field>
+ */
+class SkraFileUpload {
+    ctx = inject(SkraFileUploadContext);
+    host = inject(ElementRef);
+    // `descendants: false` — projection takes top-level content only, so detection must too
+    // (ADR 020: a slot marker nested deeper is never projected and must not render a wrapper).
+    start = contentChild(SkraFileUploadStart, { ...(ngDevMode ? { debugName: "start" } : /* istanbul ignore next */ {}), descendants: false });
+    action = contentChild(SkraFileUploadAction, { ...(ngDevMode ? { debugName: "action" } : /* istanbul ignore next */ {}), descendants: false });
+    instruction = contentChild(SkraFileUploadInstruction, { ...(ngDevMode ? { debugName: "instruction" } : /* istanbul ignore next */ {}), descendants: false });
+    status = contentChild(SkraFileUploadStatus, { ...(ngDevMode ? { debugName: "status" } : /* istanbul ignore next */ {}), descendants: false });
+    // Direct children only (the projection slot takes nothing else) vs anywhere inside.
+    inputs = contentChildren(SkraFileInput, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputs" }] : /* istanbul ignore next */ []));
+    nestedInputs = contentChildren(SkraFileInput, { ...(ngDevMode ? { debugName: "nestedInputs" } : /* istanbul ignore next */ {}), descendants: true });
+    hasStart = computed(() => !!this.start(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasStart" }] : /* istanbul ignore next */ []));
+    hasInstruction = computed(() => !!this.instruction(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasInstruction" }] : /* istanbul ignore next */ []));
+    hasStatus = computed(() => !!this.status(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasStatus" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // The page-navigation guard (spec Q-3): a missed drop must not navigate away from a
+        // multi-GB upload. Browser-only by construction — `afterNextRender` never runs under SSR
+        // — and ref-counted across every mounted composite.
+        const guard = inject(SkraFileDropGuard);
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            guard.acquire();
+            destroyRef.onDestroy(() => guard.release());
+        });
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            effect(() => this.warnMisuse());
+            afterNextRender(() => this.warnInteractiveFace());
+        }
+    }
+    /**
+     * Dev-only, ADR 0056 D3: the face is paint. Anything interactive projected into it sits
+     * UNDER the transparent control, so the control swallows its clicks — and inside the
+     * `aria-hidden` face it is hidden from assistive technology while still focusable. A read of
+     * the rendered face, never a write.
+     */
+    warnInteractiveFace() {
+        const face = this.host.nativeElement.querySelector('.skra-file-upload-face');
+        const offender = face?.querySelector('a[href], button, input, select, textarea, [tabindex], [contenteditable]');
+        if (offender) {
+            console.error(`[skra-file-upload] interactive content (<${offender.tagName.toLowerCase()}>) is ` +
+                'projected into the face. The transparent control covers the whole face and swallows ' +
+                'its clicks, and the face is aria-hidden (ADR 0056 D3). Put row actions in a SIBLING ' +
+                'list (ul[skraStack] of li[skraFileItem]).');
+        }
+    }
+    /** Dev-only: the composite cannot work without exactly one direct-child control and an action. */
+    warnMisuse() {
+        const direct = this.inputs().length;
+        const all = this.nestedInputs().length;
+        if (all === 0) {
+            console.error('[skra-file-upload] needs a direct-child <input type="file" skraFileInput> — it is the ' +
+                'control; the component only paints a face over it (ADR 0056 Group D). Import ' +
+                'SkraFileInput and project the input as a direct child.');
+        }
+        else if (direct !== all) {
+            console.error('[skra-file-upload] the input[skraFileInput] must be a DIRECT child — wrapped in another ' +
+                'element it is never projected, and nothing covers the face.');
+        }
+        else if (direct > 1) {
+            console.error('[skra-file-upload] takes exactly ONE input[skraFileInput]; use `multiple` on it for ' +
+                'several files.');
+        }
+        if (!this.action()) {
+            console.error('[skra-file-upload] needs a [skra-file-upload-action] (e.g. <span skra-file-upload-action>' +
+                'Choose a video</span>) — it is the visible action and half of the control’s accessible ' +
+                'name (ADR 0056 D4). Import SkraFileUploadAction so it can be detected.');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SkraFileUpload, isStandalone: true, selector: "skra-file-upload", host: { properties: { "attr.data-skra-has-start": "hasStart() ? \"\" : null", "attr.data-skra-has-instruction": "hasInstruction() ? \"\" : null", "attr.data-skra-has-status": "hasStatus() ? \"\" : null" } }, providers: [SkraFileUploadContext], queries: [{ propertyName: "start", first: true, predicate: SkraFileUploadStart, isSignal: true }, { propertyName: "action", first: true, predicate: SkraFileUploadAction, isSignal: true }, { propertyName: "instruction", first: true, predicate: SkraFileUploadInstruction, isSignal: true }, { propertyName: "status", first: true, predicate: SkraFileUploadStatus, isSignal: true }, { propertyName: "inputs", predicate: SkraFileInput, isSignal: true }, { propertyName: "nestedInputs", predicate: SkraFileInput, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  The FACE (ADR 0056 D3) \u2014 paint, not a widget: aria-hidden, nothing focusable. The native\r\n  control projected below covers all of it (D2) and is the only thing a user or AT operates.\r\n-->\r\n<span class=\"skra-file-upload-face\" aria-hidden=\"true\">\r\n  @if (hasStart()) {\r\n  <span class=\"skra-file-upload-icon\"\r\n    ><ng-content select=\"[skra-start]\"\r\n  /></span>\r\n  }\r\n  <!-- Referenced by the control's aria-labelledby (D4): the visible action text IS in the name. -->\r\n  <span class=\"skra-file-upload-action\" [id]=\"ctx.actionId\"\r\n    ><ng-content select=\"[skra-file-upload-action]\"\r\n  /></span>\r\n  @if (hasInstruction()) {\r\n  <span class=\"skra-file-upload-instruction\"\r\n    ><ng-content select=\"[skra-file-upload-instruction]\"\r\n  /></span>\r\n  }\r\n</span>\r\n<!--\r\n  ALWAYS rendered: a live region must exist before its content changes, or the first change is\r\n  not announced. Outside the aria-hidden face (D3's one exception) and linked to the control as a\r\n  description. Role only \u2014 the implicit `status` politeness, no explicit aria-live (ADR 0052).\r\n-->\r\n<span class=\"skra-file-upload-status\" role=\"status\" [id]=\"ctx.statusId\"\r\n  ><ng-content select=\"[skra-file-upload-status]\"\r\n/></span>\r\n<ng-content select=\"input[skraFileInput]\" />\r\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--skra-comp-field-file-gap);box-sizing:border-box;min-block-size:max(var(--skra-comp-field-file-min-block-size),1lh + 2 * var(--skra-comp-field-padding-block) + 2 * var(--skra-comp-field-border-width));max-inline-size:100%;background:var(--skra-comp-field-background);color:var(--skra-comp-field-file-status-color);border-radius:var(--skra-comp-field-radius);padding-block:calc(var(--skra-comp-field-padding-block) + var(--skra-comp-field-border-width) - var(--skra-comp-field-file-action-padding-block) - var(--skra-comp-field-file-action-border-width));padding-inline:calc(var(--skra-comp-field-padding-inline) + var(--skra-comp-field-border-width));box-shadow:var(--skra-comp-field-shadow);cursor:pointer;transition:background-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing)}:host:before{content:\"\";position:absolute;inset:0;border-color:var(--skra-comp-field-border-color);border-width:var(--skra-comp-field-border-width);border-style:var(--skra-comp-field-border-style);border-radius:inherit;pointer-events:none;transition:border-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing)}.skra-file-upload-face{display:inline-flex;flex:0 1 auto;align-items:center;gap:var(--skra-comp-field-file-gap);min-inline-size:0;max-inline-size:100%}.skra-file-upload-icon{display:inline-flex;flex:none;font-size:var(--skra-comp-field-file-icon-size);line-height:1}.skra-file-upload-action{flex:0 1 auto;min-inline-size:0;overflow-wrap:break-word;background:var(--skra-comp-field-file-action-background);color:var(--skra-comp-field-file-action-foreground);border-color:var(--skra-comp-field-file-action-border-color);border-width:var(--skra-comp-field-file-action-border-width);border-style:var(--skra-comp-field-file-action-border-style);border-radius:var(--skra-comp-field-file-action-radius);padding-block:var(--skra-comp-field-file-action-padding-block);padding-inline:var(--skra-comp-field-file-action-padding-inline);font-family:var(--skra-sys-typography-role-label-medium-font-family);font-size:var(--skra-sys-typography-role-label-medium-font-size);font-weight:var(--skra-sys-typography-role-label-medium-font-weight);line-height:var(--skra-sys-typography-role-label-medium-line-height);letter-spacing:var(--skra-sys-typography-role-label-medium-letter-spacing);transition:background-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing)}.skra-file-upload-instruction{color:var(--skra-comp-field-file-instruction-color);font-family:var(--skra-sys-typography-role-body-small-font-family);font-size:var(--skra-sys-typography-role-body-small-font-size);font-weight:var(--skra-sys-typography-role-body-small-font-weight);line-height:var(--skra-sys-typography-role-body-small-line-height);letter-spacing:var(--skra-sys-typography-role-body-small-letter-spacing)}.skra-file-upload-status{flex:1 1 50%;min-inline-size:0;overflow-wrap:anywhere;font-family:var(--skra-sys-typography-role-body-medium-font-family);font-size:var(--skra-sys-typography-role-body-medium-font-size);font-weight:var(--skra-sys-typography-role-body-medium-font-weight);line-height:var(--skra-sys-typography-role-body-medium-line-height);letter-spacing:var(--skra-sys-typography-role-body-medium-letter-spacing)}:host(:not([data-skra-has-status])) .skra-file-upload-status{display:none}:host([data-skra-has-instruction]){flex-direction:column;justify-content:center;gap:var(--skra-comp-field-file-zone-gap);padding-block:calc(var(--skra-comp-field-file-zone-padding-block) + var(--skra-comp-field-border-width));padding-inline:calc(var(--skra-comp-field-file-zone-padding-inline) + var(--skra-comp-field-border-width));text-align:center}:host([data-skra-has-instruction]):before{border-style:var(--skra-comp-field-file-zone-border-style)}:host([data-skra-has-instruction]) .skra-file-upload-status{flex:none;max-inline-size:100%}:host([data-skra-has-instruction]) .skra-file-upload-face{flex-direction:column;gap:var(--skra-comp-field-file-zone-gap)}@media not (any-pointer:fine){.skra-file-upload-instruction{display:none}}@media(hover:hover)and (pointer:fine){:host:hover:not(:has(input:disabled)):not(:has(input[aria-disabled=true])){background:var(--skra-comp-field-background-hover)}:host:hover:not(:has(input:disabled)):not(:has(input[aria-disabled=true])):before{border-color:var(--skra-comp-field-border-color-hover)}:host:hover:not(:has(input:disabled)):not(:has(input[aria-disabled=true])) .skra-file-upload-action{background:var(--skra-comp-field-file-action-background-hover)}}:host:has(input:focus-visible){outline:var(--skra-comp-field-focus-ring-width) solid var(--skra-comp-field-focus-ring-color);outline-offset:0}:host:has(input:focus-visible):before{border-color:var(--skra-comp-field-focus-ring-color)}:host:has(input[data-skra-dragover]){background:var(--skra-comp-field-file-background-dragover);color:var(--skra-comp-field-file-foreground-dragover)}:host:has(input[data-skra-dragover]):before{border-color:var(--skra-comp-field-file-border-color-dragover)}:host:has(input[data-skra-dragover]) .skra-file-upload-instruction{color:var(--skra-comp-field-file-foreground-dragover)}:host:has(input:disabled){cursor:not-allowed;opacity:var(--skra-sys-opacity-disabled)}:host:has(input[aria-disabled=true]){background:var(--skra-comp-field-background-readonly);cursor:default}:host:has(input[aria-disabled=true]):before{border-color:var(--skra-comp-field-border-color-readonly)}:host:has(input[aria-disabled=true]) .skra-file-upload-instruction{display:none;color:var(--skra-comp-field-file-status-color)}:host:has(input[aria-invalid=true]):before{border-color:var(--skra-comp-field-error-color)}:host:has(input[aria-invalid=true]:focus-visible){outline-color:var(--skra-comp-field-error-color)}@media(prefers-reduced-motion:reduce){:host,:host:before,.skra-file-upload-action{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileUpload, decorators: [{
+            type: Component,
+            args: [{ selector: 'skra-file-upload', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, providers: [SkraFileUploadContext], host: {
+                        // Slot presence (ADR 020 / ADR 027 §3.6 — exempt from the State Surface).
+                        '[attr.data-skra-has-start]': 'hasStart() ? "" : null',
+                        '[attr.data-skra-has-instruction]': 'hasInstruction() ? "" : null',
+                        '[attr.data-skra-has-status]': 'hasStatus() ? "" : null',
+                    }, template: "<!--\r\n  The FACE (ADR 0056 D3) \u2014 paint, not a widget: aria-hidden, nothing focusable. The native\r\n  control projected below covers all of it (D2) and is the only thing a user or AT operates.\r\n-->\r\n<span class=\"skra-file-upload-face\" aria-hidden=\"true\">\r\n  @if (hasStart()) {\r\n  <span class=\"skra-file-upload-icon\"\r\n    ><ng-content select=\"[skra-start]\"\r\n  /></span>\r\n  }\r\n  <!-- Referenced by the control's aria-labelledby (D4): the visible action text IS in the name. -->\r\n  <span class=\"skra-file-upload-action\" [id]=\"ctx.actionId\"\r\n    ><ng-content select=\"[skra-file-upload-action]\"\r\n  /></span>\r\n  @if (hasInstruction()) {\r\n  <span class=\"skra-file-upload-instruction\"\r\n    ><ng-content select=\"[skra-file-upload-instruction]\"\r\n  /></span>\r\n  }\r\n</span>\r\n<!--\r\n  ALWAYS rendered: a live region must exist before its content changes, or the first change is\r\n  not announced. Outside the aria-hidden face (D3's one exception) and linked to the control as a\r\n  description. Role only \u2014 the implicit `status` politeness, no explicit aria-live (ADR 0052).\r\n-->\r\n<span class=\"skra-file-upload-status\" role=\"status\" [id]=\"ctx.statusId\"\r\n  ><ng-content select=\"[skra-file-upload-status]\"\r\n/></span>\r\n<ng-content select=\"input[skraFileInput]\" />\r\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--skra-comp-field-file-gap);box-sizing:border-box;min-block-size:max(var(--skra-comp-field-file-min-block-size),1lh + 2 * var(--skra-comp-field-padding-block) + 2 * var(--skra-comp-field-border-width));max-inline-size:100%;background:var(--skra-comp-field-background);color:var(--skra-comp-field-file-status-color);border-radius:var(--skra-comp-field-radius);padding-block:calc(var(--skra-comp-field-padding-block) + var(--skra-comp-field-border-width) - var(--skra-comp-field-file-action-padding-block) - var(--skra-comp-field-file-action-border-width));padding-inline:calc(var(--skra-comp-field-padding-inline) + var(--skra-comp-field-border-width));box-shadow:var(--skra-comp-field-shadow);cursor:pointer;transition:background-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing),color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing)}:host:before{content:\"\";position:absolute;inset:0;border-color:var(--skra-comp-field-border-color);border-width:var(--skra-comp-field-border-width);border-style:var(--skra-comp-field-border-style);border-radius:inherit;pointer-events:none;transition:border-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing)}.skra-file-upload-face{display:inline-flex;flex:0 1 auto;align-items:center;gap:var(--skra-comp-field-file-gap);min-inline-size:0;max-inline-size:100%}.skra-file-upload-icon{display:inline-flex;flex:none;font-size:var(--skra-comp-field-file-icon-size);line-height:1}.skra-file-upload-action{flex:0 1 auto;min-inline-size:0;overflow-wrap:break-word;background:var(--skra-comp-field-file-action-background);color:var(--skra-comp-field-file-action-foreground);border-color:var(--skra-comp-field-file-action-border-color);border-width:var(--skra-comp-field-file-action-border-width);border-style:var(--skra-comp-field-file-action-border-style);border-radius:var(--skra-comp-field-file-action-radius);padding-block:var(--skra-comp-field-file-action-padding-block);padding-inline:var(--skra-comp-field-file-action-padding-inline);font-family:var(--skra-sys-typography-role-label-medium-font-family);font-size:var(--skra-sys-typography-role-label-medium-font-size);font-weight:var(--skra-sys-typography-role-label-medium-font-weight);line-height:var(--skra-sys-typography-role-label-medium-line-height);letter-spacing:var(--skra-sys-typography-role-label-medium-letter-spacing);transition:background-color var(--skra-comp-field-motion-duration) var(--skra-comp-field-motion-easing)}.skra-file-upload-instruction{color:var(--skra-comp-field-file-instruction-color);font-family:var(--skra-sys-typography-role-body-small-font-family);font-size:var(--skra-sys-typography-role-body-small-font-size);font-weight:var(--skra-sys-typography-role-body-small-font-weight);line-height:var(--skra-sys-typography-role-body-small-line-height);letter-spacing:var(--skra-sys-typography-role-body-small-letter-spacing)}.skra-file-upload-status{flex:1 1 50%;min-inline-size:0;overflow-wrap:anywhere;font-family:var(--skra-sys-typography-role-body-medium-font-family);font-size:var(--skra-sys-typography-role-body-medium-font-size);font-weight:var(--skra-sys-typography-role-body-medium-font-weight);line-height:var(--skra-sys-typography-role-body-medium-line-height);letter-spacing:var(--skra-sys-typography-role-body-medium-letter-spacing)}:host(:not([data-skra-has-status])) .skra-file-upload-status{display:none}:host([data-skra-has-instruction]){flex-direction:column;justify-content:center;gap:var(--skra-comp-field-file-zone-gap);padding-block:calc(var(--skra-comp-field-file-zone-padding-block) + var(--skra-comp-field-border-width));padding-inline:calc(var(--skra-comp-field-file-zone-padding-inline) + var(--skra-comp-field-border-width));text-align:center}:host([data-skra-has-instruction]):before{border-style:var(--skra-comp-field-file-zone-border-style)}:host([data-skra-has-instruction]) .skra-file-upload-status{flex:none;max-inline-size:100%}:host([data-skra-has-instruction]) .skra-file-upload-face{flex-direction:column;gap:var(--skra-comp-field-file-zone-gap)}@media not (any-pointer:fine){.skra-file-upload-instruction{display:none}}@media(hover:hover)and (pointer:fine){:host:hover:not(:has(input:disabled)):not(:has(input[aria-disabled=true])){background:var(--skra-comp-field-background-hover)}:host:hover:not(:has(input:disabled)):not(:has(input[aria-disabled=true])):before{border-color:var(--skra-comp-field-border-color-hover)}:host:hover:not(:has(input:disabled)):not(:has(input[aria-disabled=true])) .skra-file-upload-action{background:var(--skra-comp-field-file-action-background-hover)}}:host:has(input:focus-visible){outline:var(--skra-comp-field-focus-ring-width) solid var(--skra-comp-field-focus-ring-color);outline-offset:0}:host:has(input:focus-visible):before{border-color:var(--skra-comp-field-focus-ring-color)}:host:has(input[data-skra-dragover]){background:var(--skra-comp-field-file-background-dragover);color:var(--skra-comp-field-file-foreground-dragover)}:host:has(input[data-skra-dragover]):before{border-color:var(--skra-comp-field-file-border-color-dragover)}:host:has(input[data-skra-dragover]) .skra-file-upload-instruction{color:var(--skra-comp-field-file-foreground-dragover)}:host:has(input:disabled){cursor:not-allowed;opacity:var(--skra-sys-opacity-disabled)}:host:has(input[aria-disabled=true]){background:var(--skra-comp-field-background-readonly);cursor:default}:host:has(input[aria-disabled=true]):before{border-color:var(--skra-comp-field-border-color-readonly)}:host:has(input[aria-disabled=true]) .skra-file-upload-instruction{display:none;color:var(--skra-comp-field-file-status-color)}:host:has(input[aria-invalid=true]):before{border-color:var(--skra-comp-field-error-color)}:host:has(input[aria-invalid=true]:focus-visible){outline-color:var(--skra-comp-field-error-color)}@media(prefers-reduced-motion:reduce){:host,:host:before,.skra-file-upload-action{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { start: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkraFileUploadStart), { ...{
+                            descendants: false,
+                        }, isSignal: true }] }], action: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkraFileUploadAction), { ...{
+                            descendants: false,
+                        }, isSignal: true }] }], instruction: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkraFileUploadInstruction), { ...{
+                            descendants: false,
+                        }, isSignal: true }] }], status: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkraFileUploadStatus), { ...{
+                            descendants: false,
+                        }, isSignal: true }] }], inputs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SkraFileInput), { isSignal: true }] }], nestedInputs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SkraFileInput), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }] } });
+
+/**
+ * Internal — NOT part of the public barrel. Split a file name at its LAST dot, for display.
+ *
+ * - `clip.final.mp4` → `clip.final` + `.mp4` (only the last dot separates);
+ * - `.env` → no extension (a dotfile is all name — the dot is at index 0);
+ * - `README`, `x.` → no extension (none, or an empty one after a trailing dot).
+ *
+ * Purely visual: the row also renders the WHOLE name for assistive technology, so the split
+ * (and the ellipsis) is never heard.
+ */
+function splitFileName(name) {
+    const dot = name.lastIndexOf('.');
+    if (dot <= 0 || dot === name.length - 1)
+        return { stem: name, ext: '' };
+    return { stem: name.slice(0, dot), ext: name.slice(dot) };
+}
+
+/**
+ * `li[skraFileItem]` — a display row for ONE consumer-owned file (spec
+ * `component-file-upload-spec.md`). A Component-on-a-native-host (ADR 012 / ADR 040): the
+ * `<li>` keeps its list-item semantics inside the consumer's `ul[skraStack]`.
+ *
+ * Separate from `<skra-file-upload>` by SRP: a row outlives the selection (it tracks an
+ * upload), its source of truth is the consumer's queue — not `input.files` — and it is a
+ * display list item, not a form control. **Skra never uploads**: progress, retry, cancel and
+ * removal are the consumer's, projected into the row's slots.
+ *
+ * - **Name**, middle-truncated with the extension always visible — pure CSS, no measurement.
+ *   The visual split is `aria-hidden`; an `[skra-sr-only]` copy carries the whole name.
+ * - **Size** — `skraFormatFileSize(size, locale)`: SI units, `Intl` short labels, the
+ *   `locale` input or the host default (the ADR 0050 §5 precedent).
+ * - **Invalid is READ, never owned** (ADR 027 §3.8, spec Q-7): the row paints
+ *   `data-skra-validation="invalid"` only while `[skra-file-item-error]` text is projected, so
+ *   the colour never appears without the words (WCAG 1.4.1 by construction). No `aria-invalid`
+ *   — no role an `<li>` holds supports it.
+ *
+ *   <ul skraStack>
+ *     @for (u of uploads(); track u.id) {
+ *       <li skraFileItem [name]="u.file.name" [size]="u.file.size" locale="pl-PL">
+ *         <progress skraProgress skra-file-item-detail [value]="u.sent" [max]="u.file.size"
+ *                   [attr.aria-label]="'Uploading ' + u.file.name"></progress>
+ *         @if (u.error) { <span skra-file-item-error>{{ u.error }}</span> }
+ *         <button skraButton skra-end emphasis="low" (click)="cancel(u)">
+ *           Cancel<span skra-sr-only> {{ u.file.name }}</span>
+ *         </button>
+ *       </li>
+ *     }
+ *   </ul>
+ */
+class SkraFileItem {
+    /** The file name, shown as stem + extension. */
+    name = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Size in bytes, formatted for display. `undefined` → no size shown. */
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** `Intl` locale for the size. `undefined` → the host default (ADR 0050 §5 precedent). */
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    // `descendants: false` — `<ng-content select>` projects only TOP-LEVEL content, so detection
+    // must look no deeper: an icon marked `[skra-start]` inside an end-slot button would
+    // otherwise report a start slot and render an empty wrapper (ADR 020).
+    start = contentChild(SkraFileItemStart, { ...(ngDevMode ? { debugName: "start" } : /* istanbul ignore next */ {}), descendants: false });
+    detail = contentChild(SkraFileItemDetail, { ...(ngDevMode ? { debugName: "detail" } : /* istanbul ignore next */ {}), descendants: false });
+    error = contentChild(SkraFileItemError, { ...(ngDevMode ? { debugName: "error" } : /* istanbul ignore next */ {}), descendants: false });
+    end = contentChild(SkraFileItemEnd, { ...(ngDevMode ? { debugName: "end" } : /* istanbul ignore next */ {}), descendants: false });
+    hasStart = computed(() => !!this.start(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasStart" }] : /* istanbul ignore next */ []));
+    hasDetail = computed(() => !!this.detail(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasDetail" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => !!this.error(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    hasEnd = computed(() => !!this.end(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasEnd" }] : /* istanbul ignore next */ []));
+    parts = computed(() => splitFileName(this.name()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parts" }] : /* istanbul ignore next */ []));
+    // A size that cannot exist is shown as no size, not as an exception in the template:
+    // the row is display, and the helper's RangeError is for the caller who computes sizes.
+    sizeLabel = computed(() => {
+        const bytes = this.size();
+        if (bytes === undefined || !Number.isFinite(bytes) || bytes < 0)
+            return '';
+        return skraFormatFileSize(bytes, this.locale());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sizeLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SkraFileItem, isStandalone: true, selector: "li[skraFileItem]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-skra-has-start": "hasStart() ? \"\" : null", "attr.data-skra-has-detail": "hasDetail() ? \"\" : null", "attr.data-skra-has-end": "hasEnd() ? \"\" : null", "attr.data-skra-validation": "hasError() ? \"invalid\" : null" } }, queries: [{ propertyName: "start", first: true, predicate: SkraFileItemStart, isSignal: true }, { propertyName: "detail", first: true, predicate: SkraFileItemDetail, isSignal: true }, { propertyName: "error", first: true, predicate: SkraFileItemError, isSignal: true }, { propertyName: "end", first: true, predicate: SkraFileItemEnd, isSignal: true }], ngImport: i0, template: "@if (hasStart()) {\r\n<span class=\"skra-file-item-start\"><ng-content select=\"[skra-start]\" /></span>\r\n}\r\n<span class=\"skra-file-item-body\">\r\n  <!--\r\n    The name, middle-truncated with the extension always visible. The split pieces are\r\n    aria-hidden; the whole name is read from the sr-only copy, so a screen reader never hears\r\n    the split or the ellipsis. `dir=\"auto\"` lets an RTL name order its own pieces.\r\n  -->\r\n  <span class=\"skra-file-item-name\" dir=\"auto\">\r\n    <span class=\"skra-file-item-stem\" aria-hidden=\"true\"\r\n      >{{ parts().stem }}</span\r\n    >\r\n    @if (parts().ext) {\r\n    <span class=\"skra-file-item-ext\" aria-hidden=\"true\">{{ parts().ext }}</span>\r\n    }\r\n    <span skra-sr-only>{{ name() }}</span>\r\n  </span>\r\n  @if (sizeLabel()) {\r\n  <span class=\"skra-file-item-meta\">{{ sizeLabel() }}</span>\r\n  } @if (hasDetail()) {\r\n  <span class=\"skra-file-item-detail\"\r\n    ><ng-content select=\"[skra-file-item-detail]\"\r\n  /></span>\r\n  } @if (hasError()) {\r\n  <span class=\"skra-file-item-error\"\r\n    ><ng-content select=\"[skra-file-item-error]\"\r\n  /></span>\r\n  }\r\n</span>\r\n@if (hasEnd()) {\r\n<span class=\"skra-file-item-end\"><ng-content select=\"[skra-end]\" /></span>\r\n}\r\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:var(--skra-comp-file-item-gap);box-sizing:border-box;min-inline-size:0;background:var(--skra-comp-file-item-background);color:var(--skra-comp-file-item-foreground);border-color:var(--skra-comp-file-item-border-color);border-width:var(--skra-comp-file-item-border-width);border-style:var(--skra-comp-file-item-border-style);border-radius:var(--skra-comp-file-item-radius);padding-block:var(--skra-comp-file-item-padding-block);padding-inline:var(--skra-comp-file-item-padding-inline);box-shadow:var(--skra-comp-file-item-shadow);transition:border-color var(--skra-comp-file-item-motion-duration) var(--skra-comp-file-item-motion-easing)}.skra-file-item-start{display:inline-flex;flex:none;align-items:center;justify-content:center;font-size:var(--skra-comp-file-item-icon-size);line-height:1}.skra-file-item-body{display:flex;flex:1 1 50%;flex-direction:column;min-inline-size:0}.skra-file-item-name{display:flex;min-inline-size:0;white-space:nowrap;font-family:var(--skra-sys-typography-role-body-medium-font-family);font-size:var(--skra-sys-typography-role-body-medium-font-size);font-weight:var(--skra-sys-typography-role-body-medium-font-weight);line-height:var(--skra-sys-typography-role-body-medium-line-height);letter-spacing:var(--skra-sys-typography-role-body-medium-letter-spacing)}.skra-file-item-stem{flex:0 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis}.skra-file-item-ext{flex:none}.skra-file-item-meta{color:var(--skra-comp-file-item-meta-color);font-family:var(--skra-sys-typography-role-body-small-font-family);font-size:var(--skra-sys-typography-role-body-small-font-size);font-weight:var(--skra-sys-typography-role-body-small-font-weight);line-height:var(--skra-sys-typography-role-body-small-line-height);letter-spacing:var(--skra-sys-typography-role-body-small-letter-spacing)}.skra-file-item-detail{display:block;min-inline-size:0}.skra-file-item-error{color:var(--skra-comp-file-item-error-color);font-family:var(--skra-sys-typography-role-body-small-font-family);font-size:var(--skra-sys-typography-role-body-small-font-size);font-weight:var(--skra-sys-typography-role-body-small-font-weight);line-height:var(--skra-sys-typography-role-body-small-line-height);letter-spacing:var(--skra-sys-typography-role-body-small-letter-spacing)}.skra-file-item-end{display:inline-flex;flex:1 1 auto;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--skra-comp-file-item-gap);min-inline-size:0;max-inline-size:100%}:host([data-skra-validation=invalid]){border-color:var(--skra-comp-file-item-border-color-validation-invalid)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraFileItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'li[skraFileItem]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
+                        // Slot presence (ADR 020 / ADR 027 §3.6 — exempt).
+                        '[attr.data-skra-has-start]': 'hasStart() ? "" : null',
+                        '[attr.data-skra-has-detail]': 'hasDetail() ? "" : null',
+                        '[attr.data-skra-has-end]': 'hasEnd() ? "" : null',
+                        // Validation READ from the error slot (ADR 027 §3.8) — the canonical value, never
+                        // `data-skra-has-error` (ADR 027 iron boundary).
+                        '[attr.data-skra-validation]': 'hasError() ? "invalid" : null',
+                    }, template: "@if (hasStart()) {\r\n<span class=\"skra-file-item-start\"><ng-content select=\"[skra-start]\" /></span>\r\n}\r\n<span class=\"skra-file-item-body\">\r\n  <!--\r\n    The name, middle-truncated with the extension always visible. The split pieces are\r\n    aria-hidden; the whole name is read from the sr-only copy, so a screen reader never hears\r\n    the split or the ellipsis. `dir=\"auto\"` lets an RTL name order its own pieces.\r\n  -->\r\n  <span class=\"skra-file-item-name\" dir=\"auto\">\r\n    <span class=\"skra-file-item-stem\" aria-hidden=\"true\"\r\n      >{{ parts().stem }}</span\r\n    >\r\n    @if (parts().ext) {\r\n    <span class=\"skra-file-item-ext\" aria-hidden=\"true\">{{ parts().ext }}</span>\r\n    }\r\n    <span skra-sr-only>{{ name() }}</span>\r\n  </span>\r\n  @if (sizeLabel()) {\r\n  <span class=\"skra-file-item-meta\">{{ sizeLabel() }}</span>\r\n  } @if (hasDetail()) {\r\n  <span class=\"skra-file-item-detail\"\r\n    ><ng-content select=\"[skra-file-item-detail]\"\r\n  /></span>\r\n  } @if (hasError()) {\r\n  <span class=\"skra-file-item-error\"\r\n    ><ng-content select=\"[skra-file-item-error]\"\r\n  /></span>\r\n  }\r\n</span>\r\n@if (hasEnd()) {\r\n<span class=\"skra-file-item-end\"><ng-content select=\"[skra-end]\" /></span>\r\n}\r\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:var(--skra-comp-file-item-gap);box-sizing:border-box;min-inline-size:0;background:var(--skra-comp-file-item-background);color:var(--skra-comp-file-item-foreground);border-color:var(--skra-comp-file-item-border-color);border-width:var(--skra-comp-file-item-border-width);border-style:var(--skra-comp-file-item-border-style);border-radius:var(--skra-comp-file-item-radius);padding-block:var(--skra-comp-file-item-padding-block);padding-inline:var(--skra-comp-file-item-padding-inline);box-shadow:var(--skra-comp-file-item-shadow);transition:border-color var(--skra-comp-file-item-motion-duration) var(--skra-comp-file-item-motion-easing)}.skra-file-item-start{display:inline-flex;flex:none;align-items:center;justify-content:center;font-size:var(--skra-comp-file-item-icon-size);line-height:1}.skra-file-item-body{display:flex;flex:1 1 50%;flex-direction:column;min-inline-size:0}.skra-file-item-name{display:flex;min-inline-size:0;white-space:nowrap;font-family:var(--skra-sys-typography-role-body-medium-font-family);font-size:var(--skra-sys-typography-role-body-medium-font-size);font-weight:var(--skra-sys-typography-role-body-medium-font-weight);line-height:var(--skra-sys-typography-role-body-medium-line-height);letter-spacing:var(--skra-sys-typography-role-body-medium-letter-spacing)}.skra-file-item-stem{flex:0 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis}.skra-file-item-ext{flex:none}.skra-file-item-meta{color:var(--skra-comp-file-item-meta-color);font-family:var(--skra-sys-typography-role-body-small-font-family);font-size:var(--skra-sys-typography-role-body-small-font-size);font-weight:var(--skra-sys-typography-role-body-small-font-weight);line-height:var(--skra-sys-typography-role-body-small-line-height);letter-spacing:var(--skra-sys-typography-role-body-small-letter-spacing)}.skra-file-item-detail{display:block;min-inline-size:0}.skra-file-item-error{color:var(--skra-comp-file-item-error-color);font-family:var(--skra-sys-typography-role-body-small-font-family);font-size:var(--skra-sys-typography-role-body-small-font-size);font-weight:var(--skra-sys-typography-role-body-small-font-weight);line-height:var(--skra-sys-typography-role-body-small-line-height);letter-spacing:var(--skra-sys-typography-role-body-small-letter-spacing)}.skra-file-item-end{display:inline-flex;flex:1 1 auto;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--skra-comp-file-item-gap);min-inline-size:0;max-inline-size:100%}:host([data-skra-validation=invalid]){border-color:var(--skra-comp-file-item-border-color-validation-invalid)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], start: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkraFileItemStart), { ...{
+                            descendants: false,
+                        }, isSignal: true }] }], detail: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkraFileItemDetail), { ...{
+                            descendants: false,
+                        }, isSignal: true }] }], error: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkraFileItemError), { ...{
+                            descendants: false,
+                        }, isSignal: true }] }], end: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkraFileItemEnd), { ...{ descendants: false }, isSignal: true }] }] } });
+
+// Public API for @skra/ui/file-upload — the FileUpload family (spec
+// adr/specs/component-file-upload-spec.md; ADR 0056 Groups B + D).
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkraFileInput, SkraFileItem, SkraFileItemDetail, SkraFileItemEnd, SkraFileItemError, SkraFileItemStart, SkraFileUpload, SkraFileUploadAction, SkraFileUploadInstruction, SkraFileUploadStart, SkraFileUploadStatus, skraFileMatchesAccept, skraFormatFileSize };
+//# sourceMappingURL=skra-ui-file-upload.mjs.map