@fusion.dev/helix-headless 0.145.0 → 0.147.0

package/dist/empty/root/empty-root.d.ts

@@ -11,12 +11,19 @@ import { type TemplateResult } from 'lit';
  * was loading, and the announcement tells a screen reader user that the search
  * returned nothing. It is announced from a status region of its own, which is
  * rendered empty and filled a frame after the view appears. Screen readers read
- * a region that arrives with its text already in it inconsistently.
+ * a region that arrives with its text already in it inconsistently. For the
+ * seven seconds the region holds its copy, the heading and the message are
+ * hidden from screen readers, so the words are in the page once.
  *
  * Every region is a bare slot. There is no `empty-state-heading` or
  * `empty-state-actions` element: assign your own heading and actions to the
  * slots.
  *
+ * **Or give the heading as words.** `heading` draws them in a `heading` part
+ * that is a heading at `heading-level`, 3 where it is not set, so a page
+ * rendering from data or on a server gets a heading a reader finds in the
+ * outline without writing the element. A heading slotted in replaces it.
+ *
  * @since 0.1.0
  * @status stable
  * @category feedback
@@ -25,12 +32,27 @@ import { type TemplateResult } from 'lit';
  *
  * @slot - The message: why the region is empty, and what to do about it.
  * @slot actions - The action that would put something in the region.
- * @slot heading - The heading, which names what is missing. Slot a heading element, such as an `<h3>`, so a reader can find it in the page's outline.
+ * @slot heading - The heading, which names what is missing. Slot a heading element, such as an `<h3>`, so a reader can find it in the page's outline. Replaces the one `heading` draws.
  * @slot icon - An icon above the heading.
  *
+ * @csspart heading - The heading `heading` draws, a heading at `heading-level`. Drawn only while `heading` holds words and nothing is slotted into `heading`.
  * @csspart live - A copy of the heading and the message, in a live region that screen readers announce when the view appears. Visually hidden in the styled tier.
  */
 export declare class HelixHeadlessEmpty extends HelixElement {
+    /**
+     * The heading as words, such as "No results", drawn as a heading when
+     * nothing is slotted into `heading`.
+     *
+     * Absent draws none, and the `heading` slot is the only heading.
+     */
+    heading: string;
+    /**
+     * The level of the heading `heading` draws, from 1 to 6.
+     *
+     * Absent is 3, the level of a heading inside a page's section. Set it to fit
+     * the outline the empty view sits in. A slotted heading keeps its own.
+     */
+    headingLevel?: number;
     /**
      * Whether the state is announced when it appears.
      *
@@ -40,6 +62,16 @@ export declare class HelixHeadlessEmpty extends HelixElement {
      */
     noAnnounce: boolean;
     protected readonly arrival: ArrivalController;
+    /**
+     * The `heading` slot, with the heading `heading` draws as its fallback, so
+     * one slotted in replaces it; no fallback while `heading` holds no words.
+     *
+     * A method, so a tier above can draw its own, as the slot lets a page.
+     *
+     * @param hidden Whether the live copy holds the heading's words, which
+     * hides them from readers until it empties.
+     */
+    protected renderHeading(hidden: boolean): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/empty/root/empty-root.js

@@ -4,29 +4,51 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { ArrivalController, customElement, HelixElement, slottedWords, } from '@fusion.dev/helix-core';
+import { ArrivalController, customElement, HelixElement, headingLevel, slottedWords, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessEmpty = class HelixHeadlessEmpty extends HelixElement {
     constructor() {
         super(...arguments);
+        this.heading = '';
         this.noAnnounce = false;
         this.arrival = new ArrivalController(this, {
             arriving: () => !this.serverRendered && document.readyState === 'complete',
-            text: () => slottedWords(this, ['heading', '']),
+            text: () => [slottedWords(this, ['heading']) || this.heading.trim(), slottedWords(this, [''])]
+                .filter(Boolean)
+                .join(' '),
         });
     }
+    renderHeading(hidden) {
+        return html `<slot
+      aria-hidden=${hidden ? 'true' : nothing}
+      name="heading"
+      @slotchange=${() => this.arrival.say()}
+      >${this.heading.trim()
+            ? html `<div aria-level=${headingLevel(this.headingLevel)} part="heading" role="heading">
+              ${this.heading}
+            </div>`
+            : nothing}</slot
+    >`;
+    }
     render() {
         const say = () => this.arrival.say();
+        const held = this.arrival.said !== '' && !this.noAnnounce;
         return html `<slot name="icon"></slot>
-      <slot name="heading" @slotchange=${say}></slot>
-      <slot @slotchange=${say}></slot>
+      ${this.renderHeading(held)}
+      <slot aria-hidden=${held ? 'true' : nothing} @slotchange=${say}></slot>
       <slot name="actions"></slot>
       ${this.noAnnounce
             ? nothing
             : html `<span part="live" role="status">${this.arrival.said}</span>`}`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessEmpty.prototype, "heading", void 0);
+__decorate([
+    property({ attribute: 'heading-level', type: Number })
+], HelixHeadlessEmpty.prototype, "headingLevel", void 0);
 __decorate([
     property({ attribute: 'no-announce', reflect: true, type: Boolean })
 ], HelixHeadlessEmpty.prototype, "noAnnounce", void 0);

package/dist/file-input/root/file-input-root.d.ts

@@ -1,5 +1,7 @@
 import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+import { type FileStatus } from '../status.js';
+export type { FileStatus } from '../status.js';
 import '../../tag/index.js';
 declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
@@ -20,7 +22,22 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
  * is screened: `accept`, `max-file-size`, `max-files` and your own `validate`
  * can refuse it. A refused file is left out, `helix-reject` lists each one with
  * its reason, and a reader hears `rejected-text` with the names filled in.
- * `directory` asks the picker for a folder.
+ * A reader also hears `added-text` for the files a drop or a paste adds, and
+ * `removed-text` for a file a remove button takes out, since neither moves
+ * focus or says anything on its own. `directory` asks the picker for a folder. `transformFiles` changes the files
+ * a field takes before it holds them, such as shrinking an image.
+ *
+ * Each chosen file is a row: its name, its size and type as tags, and a
+ * remove button. `renderFile` draws the row's details your own way, and the
+ * `remove-icon` slot replaces the button's icon.
+ *
+ * **Keyboard.** The input is the tab stop, and each file's remove button is
+ * one more.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Enter, Space | On the input, opens the picker. On a remove button, removes that file and moves focus to the button of the file in its place, or back to the input. |
+ * | Control+V, Command+V | Takes files from the clipboard, as a drop does. |
  *
  * @since 0.1.0
  * @status stable
@@ -31,6 +48,7 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
  * @slot feedback - The message that says what is wrong with the chosen files.
  * @slot hint - Help under the field.
  * @slot label - The label, for content richer than the `label` text.
+ * @slot remove-icon - The icon on each file's remove button, in place of the bin. Each button shows a copy.
  * @slot trigger - The content that opens the picker when pressed.
  *
  * @event {Event} change - Fired after the value changes.
@@ -43,6 +61,9 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
  * @csspart feedback - The message that says what is wrong.
  * @csspart field - The box you press or drop files on.
  * @csspart file - One chosen file.
+ * @csspart file-done - A file whose upload `setFileStatus` says is done. Set together with `file`.
+ * @csspart file-error - A file whose upload `setFileStatus` says failed. Set together with `file`.
+ * @csspart file-uploading - A file whose upload `setFileStatus` says is under way. Set together with `file`.
  * @csspart hint - Help under the field, while nothing is wrong.
  * @csspart kind - A file's type.
  * @csspart kind-cell - The grid cell around the tag, rendered only when the tag sits in a `Tag.Group`.
@@ -53,9 +74,10 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
  * @csspart kind-start - The category before the label.
  * @csspart label - The label above the field.
  * @csspart list - The chosen files.
- * @csspart live - The live region that says `rejected-text` when files are refused. It is rendered from the first refusal.
+ * @csspart live - The live region that says `added-text`, `rejected-text`, and `removed-text`. It is rendered from the first time it has something to say.
  * @csspart meta - The row that holds a file's size and type.
  * @csspart name - A file's name.
+ * @csspart progress - A file's upload bar, a `<progress>`, while `setFileStatus` gives it a measure or says it is under way.
  * @csspart remove - The control that removes a file.
  * @csspart size - A file's size.
  * @csspart size-cell - The grid cell around the tag, rendered only when the tag sits in a `Tag.Group`.
@@ -64,8 +86,12 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
  * @csspart size-label - The label, trimmed to its capitals and baseline.
  * @csspart size-link - The link around the label, when the tag has an `href`.
  * @csspart size-start - The category before the label.
+ * @csspart status - How a file's upload is going, from `setFileStatus`: the bar and the words.
+ * @csspart status-text - The words `setFileStatus` gives a file, such as the reason it failed.
  * @csspart trigger - The label that opens the picker.
  *
+ * @cssstate dropping - Files are being dragged over the field.
+ * @cssstate has-files - The field holds at least one file.
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base {
@@ -77,6 +103,11 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      * filter is the only check the platform makes and a drop never meets it.
      */
     accept: string;
+    /**
+     * What a reader hears when a drop or a paste adds files, with `{names}` and
+     * `{count}` filled in.
+     */
+    addedText: string;
     /**
      * Which camera or microphone a mobile picker should offer, if any.
      */
@@ -105,11 +136,20 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      * Whether more than one file can be chosen.
      */
     multiple: boolean;
+    /**
+     * The name of a file's progress bar, read by screen readers, with `{name}`
+     * filled in. A label with no `{name}` has it added after it.
+     */
+    progressLabel: string;
     /**
      * What a reader hears when files are refused, with `{count}` and `{names}`
      * filled in.
      */
     rejectedText: string;
+    /**
+     * What a reader hears when a file is removed, with `{name}` filled in.
+     */
+    removedText: string;
     /**
      * The accessible name of the control that removes a file. `{name}` is
      * replaced with the file's name.
@@ -119,6 +159,19 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      * `{name}` has it added after it.
      */
     removeLabel: string;
+    /**
+     * Draws a file's row in place of its name, size, and type: a Lit template, a
+     * string, or a DOM node, given the file and its place in the list. The
+     * remove button stays beside it.
+     */
+    renderFile?: (file: File, index: number) => unknown;
+    /**
+     * Your own step between taking files and holding them, such as shrinking an
+     * image, as Zag's file upload `transformFiles`. It is given the files taken
+     * from one pick, drop, or paste and returns the files to hold, or a promise
+     * of them. A promise that rejects refuses those files, with its message.
+     */
+    transformFiles?: (files: File[]) => File[] | Promise<File[]>;
     /**
      * The trigger's text when nothing is slotted into it.
      */
@@ -128,15 +181,49 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      * nothing to take it. A property, since a function cannot be an attribute.
      */
     validate?: (file: File) => string | null | undefined;
-    /** The live region, rendered from the first refusal. */
+    /** The live region, rendered from the first time it has something to say. */
     private readonly status;
+    /** What the page has said of each file's upload, by file. */
+    private readonly statuses;
+    /**
+     * Shows how a file's upload is going, in its row: a bar for `progress`,
+     * from 0 to 1, or a bar without a measure while `state` is `uploading`, and
+     * `text` beside it. `state` names the row `file-uploading`, `file-done` or
+     * `file-error` beside `file`, and a reader hears `text` when the state
+     * becomes `done` or `error`. `null` clears it.
+     *
+     * The field uploads nothing, as Zag's file upload does not: your page sends
+     * the file and says here how it is going.
+     */
+    setFileStatus(file: File, status: FileStatus | null): void;
     /**
      * Screens arriving files and commits what is taken, after the files the
-     * field keeps. Refused files are announced and said.
+     * field keeps, through `transformFiles` where it is set.
      */
     private take;
-    /** Sends `helix-reject` and says which files were left out. */
-    private refuse;
+    /**
+     * Commits what an arrival leaves, sends `helix-reject` for what it refused,
+     * and says both.
+     *
+     * Nothing taken and nothing moved, as when every dropped file is refused, is
+     * no change to announce. A pick is the platform's own `change`, relayed
+     * whatever it holds, and the picker itself tells a reader what was chosen,
+     * so `added-text` is said for a drop or a paste only.
+     */
+    private finish;
+    /**
+     * A sentence about some files, with `{count}` and `{names}` filled in.
+     *
+     * The names as the page's language lists them, which in English is the comma
+     * list it always was: `unit` and `short` join with commas and no "and". The
+     * count is written as the language writes a number.
+     */
+    private listed;
+    /** The element slotted into `remove-icon`, one copy per row's remove button. */
+    private readonly removeIcon;
+    private readonly handleRemoveIcon;
+    /** The icon on one row's remove button: a copy of `remove-icon`, or the bin. */
+    private removeMark;
     /** Takes files pasted onto the field, as a drop takes them. */
     private readonly handlePaste;
     /**
@@ -279,6 +366,11 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      * renders the styled one from the same template.
      */
     protected renderMeta(file: File): TemplateResult;
+    /**
+     * How a file's upload is going, from `setFileStatus`, behind a seam a tier
+     * can move: a `<progress>` named by `progress-label` and the status words.
+     */
+    protected renderFileStatus(file: File): TemplateResult | typeof nothing;
     protected render(): TemplateResult;
 }
 declare global {
@@ -286,4 +378,3 @@ declare global {
         'helix-headless-file-input': HelixHeadlessFileInput;
     }
 }
-export {};

package/dist/file-input/root/file-input-root.js

@@ -4,12 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, drawIcon, drawStatus, fillTemplate, formatNumbers, HelixBeforeChangeEvent, HelixFormElement, HelixRejectEvent, MixinField, requestChange, restoreValue, StatusController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, drawIcon, drawStatus, fillTemplate, formatNumbers, HelixBeforeChangeEvent, HelixFormElement, HelixRejectEvent, MixinField, requestChange, restoreValue, SlottedGlyph, StatusController, } from '@fusion.dev/helix-core';
 import { trash } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import { screenFiles } from '../screen.js';
+import { barOf, saysStatus } from '../status.js';
 import '../../tag/index.js';
 const named = (label, name) => label.includes('{name}') ? fillTemplate(label, { name }) : `${label} ${name}`;
 const size = (bytes, locale) => {
@@ -42,20 +43,29 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
             target: () => this.partNamed('control'),
         });
         this.accept = '';
+        this.addedText = 'Added: {names}';
         this.directory = false;
         this.locale = '';
         this.multiple = false;
+        this.progressLabel = 'Uploading {name}';
         this.rejectedText = 'Not added: {names}';
+        this.removedText = 'Removed: {name}';
         this.removeLabel = 'Remove {name}';
         this.triggerLabel = 'Choose files';
         this.status = new StatusController(this);
+        this.statuses = new WeakMap();
+        this.removeIcon = new SlottedGlyph();
+        this.handleRemoveIcon = (event) => {
+            this.removeIcon.read(event.target);
+            this.requestUpdate();
+        };
         this.handlePaste = (event) => {
             const pasted = [...(event.clipboardData?.files ?? [])];
             if (this.isDisabled || pasted.length === 0) {
                 return;
             }
             event.preventDefault();
-            this.take(pasted, this.multiple ? this.files : []);
+            this.take(pasted, this.files);
         };
         this.dropping = false;
         this.committed = [];
@@ -84,7 +94,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
             if (dropped.length === 0) {
                 return;
             }
-            this.take(dropped, this.multiple ? this.files : []);
+            this.take(dropped, this.files);
         };
         this.handleRemove = (event) => {
             const at = Number(event.currentTarget.dataset.at);
@@ -98,6 +108,19 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
             });
         };
     }
+    setFileStatus(file, status) {
+        const was = this.statuses.get(file);
+        if (status) {
+            this.statuses.set(file, status);
+            if (saysStatus(status, was)) {
+                this.status.say(status.text ?? '');
+            }
+        }
+        else {
+            this.statuses.delete(file);
+        }
+        this.requestUpdate();
+    }
     take(arriving, keeping, picked = false) {
         const { kept, refused } = screenFiles(arriving, keeping, {
             accept: this.accept,
@@ -106,21 +129,45 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
             multiple: this.multiple || picked,
             validate: this.validate,
         });
-        const same = (one, two) => one.length === two.length && one.every((file, at) => file === two[at]);
-        if (picked || !(same(kept, this.committed) && same(kept, this.files))) {
-            this.commit(kept);
+        const taken = kept.filter((file) => !keeping.includes(file));
+        const transform = this.transformFiles;
+        if (!transform || taken.length === 0) {
+            this.finish(kept, taken, refused, picked);
+            return;
         }
+        const held = kept.filter((file) => keeping.includes(file));
+        Promise.resolve()
+            .then(() => transform(taken))
+            .then((made) => this.finish([...held, ...made], made, refused, picked), (error) => {
+            const message = error instanceof Error ? error.message : String(error);
+            this.finish(held, [], [...refused, ...taken.map((file) => ({ file, message, reason: 'invalid' }))], picked);
+        });
+    }
+    finish(next, added, refused, picked) {
+        const same = (one, two) => one.length === two.length && one.every((file, at) => file === two[at]);
+        const moved = picked || !(same(next, this.committed) && same(next, this.files));
+        const applied = moved && this.commit(next);
         if (refused.length > 0) {
-            this.refuse(refused);
+            this.dispatchEvent(new HelixRejectEvent({ files: refused }));
+        }
+        const words = [
+            applied && !picked && added.length > 0 ? this.listed(this.addedText, added) : '',
+            refused.length > 0
+                ? this.listed(this.rejectedText, refused.map((one) => one.file))
+                : '',
+        ].filter((one) => one !== '');
+        if (words.length > 0) {
+            this.status.say(words.join(' '));
         }
     }
-    refuse(refused) {
-        this.dispatchEvent(new HelixRejectEvent({ files: refused }));
-        const words = fillTemplate(this.rejectedText, {
-            count: formatNumbers(this.lang)(refused.length),
-            names: new Intl.ListFormat(this.lang || undefined, { style: 'short', type: 'unit' }).format(refused.map((one) => one.file.name)),
+    listed(sentence, files) {
+        return fillTemplate(sentence, {
+            count: formatNumbers(this.lang)(files.length),
+            names: new Intl.ListFormat(this.lang || undefined, { style: 'short', type: 'unit' }).format(files.map((file) => file.name)),
         });
-        this.status.say(words);
+    }
+    removeMark(at) {
+        return this.removeIcon.copyFor(at) ?? drawIcon(trash);
     }
     get files() {
         return [...(this.control?.files ?? [])];
@@ -132,12 +179,15 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         this.commit([]);
     }
     removeAt(at) {
-        this.commit(this.files.filter((_, index) => index !== at));
+        const gone = this.files[at];
+        if (gone && this.commit(this.files.filter((_, index) => index !== at))) {
+            this.status.say(fillTemplate(this.removedText, { name: gone.name }));
+        }
     }
     commit(next) {
         const control = this.control;
         if (!control) {
-            return;
+            return false;
         }
         const previous = this.committed;
         const applied = requestChange({
@@ -152,6 +202,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         if (!applied) {
             this.put(control, previous);
         }
+        return applied;
     }
     put(control, files) {
         if (files.length === 0) {
@@ -197,6 +248,8 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
     updated(changed) {
         super.updated(changed);
         this.sync();
+        this.toggleState('dropping', this.dropping);
+        this.toggleState('has-files', this.files.length > 0);
     }
     focus(options) {
         this.control?.focus(options);
@@ -215,6 +268,23 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         part="kind"
       exportparts="cell: kind-cell, dismiss: kind-dismiss, dismiss-mark: kind-dismiss-mark, label: kind-label, link: kind-link, start: kind-start">${kind(file)}</${this.tag('tag')}>`;
     }
+    renderFileStatus(file) {
+        const status = this.statuses.get(file);
+        if (!status) {
+            return nothing;
+        }
+        const bar = barOf(status);
+        return html `<span part="status"
+      >${bar === undefined
+            ? nothing
+            : html `<progress
+              part="progress"
+              max="1"
+              value=${bar === 'unmeasured' ? nothing : bar}
+              aria-label=${named(this.progressLabel, file.name)}
+            ></progress>`}${status.text ? html `<span part="status-text">${status.text}</span>` : nothing}</span
+    >`;
+    }
     render() {
         const files = this.files;
         return html `${this.renderLabel()}
@@ -246,6 +316,9 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
           <slot name="trigger">${this.triggerLabel}</slot>
         </label>
       </div>
+      <!-- Hidden, because this is where the icon arrives: each remove button
+           shows a copy. -->
+      <slot name="remove-icon" hidden @slotchange=${this.handleRemoveIcon}></slot>
       <!-- The hint sits under the field and the list goes last, which is the
            one ordering decision this component makes differently from the way it
            reads. Reasoning above renderMeta. -->
@@ -254,12 +327,21 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
       ${files.length === 0
             ? nothing
             : html `<ul part="list">
-              ${files.map((file, at) => html `<li part="file">
+              ${files.map((file, at) => {
+                const state = this.statuses.get(file)?.state;
+                const done = state === 'done';
+                const failed = state === 'error';
+                const sending = state === 'uploading';
+                return html `<li
+                  part="file${done ? ' file-done' : ''}${failed ? ' file-error' : ''}${sending ? ' file-uploading' : ''}"
+                >
                   <span part="detail">
-                    <span part="name">${file.name}</span>
-                    <span part="meta">
-                      ${this.renderMeta(file)}
-                    </span>
+                    ${this.renderFile
+                    ? this.renderFile(file, at)
+                    : html `<span part="name">${file.name}</span>
+                          <span part="meta">
+                            ${this.renderMeta(file)}
+                          </span>`}${this.renderFileStatus(file)}
                   </span>
                   <button
                     part="remove"
@@ -269,15 +351,19 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
                     ?disabled=${this.isDisabled}
                     @click=${this.handleRemove}
                   >
-                    ${drawIcon(trash)}
+                    ${this.removeMark(at)}
                   </button>
-                </li>`)}
+                </li>`;
+            })}
             </ul>`}`;
     }
 };
 __decorate([
     property()
 ], HelixHeadlessFileInput.prototype, "accept", void 0);
+__decorate([
+    property({ attribute: 'added-text' })
+], HelixHeadlessFileInput.prototype, "addedText", void 0);
 __decorate([
     property()
 ], HelixHeadlessFileInput.prototype, "capture", void 0);
@@ -296,12 +382,24 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessFileInput.prototype, "multiple", void 0);
+__decorate([
+    property({ attribute: 'progress-label' })
+], HelixHeadlessFileInput.prototype, "progressLabel", void 0);
 __decorate([
     property({ attribute: 'rejected-text' })
 ], HelixHeadlessFileInput.prototype, "rejectedText", void 0);
+__decorate([
+    property({ attribute: 'removed-text' })
+], HelixHeadlessFileInput.prototype, "removedText", void 0);
 __decorate([
     property({ attribute: 'remove-label' })
 ], HelixHeadlessFileInput.prototype, "removeLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessFileInput.prototype, "renderFile", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessFileInput.prototype, "transformFiles", void 0);
 __decorate([
     property({ attribute: 'trigger-label' })
 ], HelixHeadlessFileInput.prototype, "triggerLabel", void 0);

package/dist/file-input/screen.d.ts

@@ -27,7 +27,8 @@ export declare const accepts: (file: File, accept: string) => boolean;
 /**
  * Screens arriving files against the rules, given the files the field keeps.
  * `kept` is what the field holds afterward: the files it keeps and the
- * arrivals it took, or for a single-file field the last arrival it took.
+ * arrivals it took, or for a single-file field the last arrival it took, and
+ * the file it keeps when it took none.
  */
 export declare const screenFiles: (arriving: File[], keeping: File[], rules: ScreenRules) => {
     kept: File[];

package/dist/file-input/status.d.ts

@@ -0,0 +1,24 @@
+/**
+ * How one file's upload is going, as a page reports it to File Input. The
+ * field does not upload anything: the page does, and says how it is going.
+ */
+export interface FileStatus {
+    /** How much is done, from 0 to 1. Left out, the bar moves without a measure while `state` is `uploading`. */
+    readonly progress?: number | undefined;
+    /** Where the upload is: under way, finished, or failed. */
+    readonly state?: 'done' | 'error' | 'uploading' | undefined;
+    /** Words beside the bar, such as "Uploaded" or the reason it failed. */
+    readonly text?: string | undefined;
+}
+/**
+ * The bar's value, held between 0 and 1, or nothing for a bar without a
+ * measure, and no bar at all for a status that is neither measured nor under
+ * way.
+ */
+export declare const barOf: (status: FileStatus) => number | 'unmeasured' | undefined;
+/**
+ * Whether a new status is worth saying: a finish or a failure with words, the
+ * first time the file reaches it. Progress is shown and not said, since a
+ * reader hearing every percent hears nothing else.
+ */
+export declare const saysStatus: (next: FileStatus, was: FileStatus | undefined) => boolean;

package/dist/file-input/status.js

@@ -0,0 +1,10 @@
+export const barOf = (status) => {
+    const { progress, state } = status;
+    if (typeof progress === 'number' && Number.isFinite(progress)) {
+        return Math.min(1, Math.max(0, progress));
+    }
+    return state === 'uploading' ? 'unmeasured' : undefined;
+};
+export const saysStatus = (next, was) => Boolean(next.text) &&
+    (next.state === 'done' || next.state === 'error') &&
+    next.state !== was?.state;