@fusion.dev/helix-headless 0.146.0 → 0.147.0

package/dist/drilldown/item/drilldown-item.js

@@ -4,7 +4,7 @@ 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 { customElement, deepActiveElement, HelixElement, HelixSelectEvent, } from '@fusion.dev/helix-core';
+import { customElement, deepActiveElement, HelixElement, HelixSelectEvent, slotFilled, } from '@fusion.dev/helix-core';
 import { caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -16,24 +16,41 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
         this.focusable = false;
         this.isDrilldownItem = true;
         this.onPage = true;
+        this.onPath = false;
         this.showingPage = false;
         this.value = '';
         this.page = false;
+        this.description = false;
+        this.end = false;
         this.readPage = () => {
             const slot = this.renderRoot.querySelector('slot[name="page"]');
             this.page = (slot?.assignedElements().length ?? 0) > 0;
         };
+        this.readWords = () => {
+            const slot = (name) => this.renderRoot.querySelector(`slot[name="${name}"]`);
+            this.description = slotFilled(slot('description'));
+            this.end = slotFilled(slot('end'));
+        };
     }
     willUpdate(changed) {
         super.willUpdate(changed);
         if (this.childrenKnown) {
-            this.page = this.knownChildren.some((child) => child.slot === 'page');
+            const named = (name) => this.knownChildren.some((child) => child.slot === name);
+            this.page = named('page');
+            this.description = named('description');
+            this.end = named('end');
         }
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
     }
+    get describedBy() {
+        const ids = [this.description ? 'description' : '', this.end ? 'end' : '']
+            .filter((id) => id !== '')
+            .join(' ');
+        return ids === '' ? nothing : ids;
+    }
     focusItem() {
         this.partNamed('item')?.focus();
     }
@@ -58,7 +75,7 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
     >`;
     }
     render() {
-        if (this.showingPage) {
+        if (this.showingPage || this.onPath) {
             return html `<slot name="page" @slotchange=${this.readPage}></slot>`;
         }
         if (!this.onPage) {
@@ -68,14 +85,23 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
       part="item"
       type="button"
       role="menuitem"
+      aria-describedby=${this.describedBy}
       aria-disabled=${this.disabled ? 'true' : nothing}
       aria-haspopup=${this.page ? 'menu' : nothing}
       tabindex=${this.focusable ? '0' : '-1'}
+      ?data-described=${this.description}
       @click=${() => this.select()}
     >
       <slot name="start"></slot>
       <span part="label"><slot></slot></span>
-      <slot name="end"></slot>
+      <slot
+        id="description"
+        name="description"
+        aria-hidden="true"
+        ?data-empty=${!this.description}
+        @slotchange=${this.readWords}
+      ></slot>
+      <slot id="end" name="end" aria-hidden="true" @slotchange=${this.readWords}></slot>
       ${this.page ? this.renderMark() : nothing}
     </button>
     <div hidden><slot name="page" @slotchange=${this.readPage}></slot></div>`;
@@ -90,6 +116,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessDrilldownItem.prototype, "onPage", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessDrilldownItem.prototype, "onPath", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessDrilldownItem.prototype, "showingPage", void 0);
@@ -99,6 +128,12 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessDrilldownItem.prototype, "page", void 0);
+__decorate([
+    state()
+], HelixHeadlessDrilldownItem.prototype, "description", void 0);
+__decorate([
+    state()
+], HelixHeadlessDrilldownItem.prototype, "end", void 0);
 HelixHeadlessDrilldownItem = __decorate([
     customElement('helix-headless-drilldown-item')
 ], HelixHeadlessDrilldownItem);

package/dist/drilldown/root/drilldown-root.js

@@ -4,7 +4,7 @@ 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, DrilldownController, HelixElement, inlineStep, KeyboardNavigationController, keyClaimed, MixinCollection, slottedWords, typeaheadBy, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, DrilldownController, HelixElement, inlineStep, KeyboardNavigationController, keyClaimed, MixinCollection, slottedWords, typeaheadByWords, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -38,7 +38,7 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
             })),
             reserved: () => ['ArrowLeft', 'ArrowRight'],
             selects: () => false,
-            typeahead: typeaheadBy((item) => item.words),
+            typeahead: typeaheadByWords(),
         });
         this.handleFocusIn = (event) => {
             const item = this.drilldown.rows.find((row) => row.contains(event.target));
@@ -162,6 +162,7 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
     mark(item, page, onPage) {
         item.onPage = onPage;
         item.showingPage = item === page;
+        item.onPath = page !== null && item !== page && item.contains(page);
         for (const child of item.children) {
             if (child instanceof HelixHeadlessDrilldownItem && child.slot === 'page') {
                 this.mark(child, page, item === page);

package/dist/element-events.generated.js

@@ -115,7 +115,7 @@ registerElementEvents({
         'helix-graph-signal',
         'helix-graph-zoom',
     ],
-    'helix-headless-heatmap': ['helix-resize'],
+    'helix-headless-heatmap': ['change', 'helix-before-change', 'helix-resize'],
     'helix-headless-icon': ['error', 'load'],
     'helix-headless-icon-button': ['helix-press'],
     'helix-headless-image': ['error', 'load'],
@@ -166,6 +166,7 @@ registerElementEvents({
     'helix-headless-megamenu': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-menu': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
     'helix-headless-menu-item': ['helix-before-toggle', 'helix-select'],
+    'helix-headless-meter': ['helix-band'],
     'helix-headless-notification': ['helix-dismiss', 'helix-read'],
     'helix-headless-notification-group': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-notifications': ['helix-dismiss', 'helix-load-more', 'helix-read'],
@@ -186,6 +187,7 @@ registerElementEvents({
     'helix-headless-pagination-size': ['change', 'helix-before-change', 'input'],
     'helix-headless-pin-input': ['change', 'helix-before-change', 'helix-complete', 'input'],
     'helix-headless-popover': ['helix-before-close', 'helix-before-open', 'toggle'],
+    'helix-headless-progress': ['helix-complete'],
     'helix-headless-qr-code': ['error'],
     'helix-headless-radio': ['helix-select'],
     'helix-headless-radio-group': ['change', 'helix-before-change', 'helix-select', 'input'],
@@ -220,6 +222,7 @@ registerElementEvents({
         'helix-before-resize',
         'helix-collapse',
         'helix-resized',
+        'input',
     ],
     'helix-headless-step': ['helix-select'],
     'helix-headless-steps': ['helix-activate', 'helix-before-activate', 'helix-select'],

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

@@ -19,6 +19,11 @@ import { type TemplateResult } from 'lit';
  * `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
@@ -27,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.
      *
@@ -42,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,30 +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 copied = this.arrival.said !== '' && !this.noAnnounce ? 'true' : nothing;
+        const held = this.arrival.said !== '' && !this.noAnnounce;
         return html `<slot name="icon"></slot>
-      <slot aria-hidden=${copied} name="heading" @slotchange=${say}></slot>
-      <slot aria-hidden=${copied} @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;
 /**
@@ -59,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`.
@@ -72,6 +77,7 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
  * @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`.
@@ -80,6 +86,8 @@ 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.
@@ -128,6 +136,11 @@ 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.
@@ -170,6 +183,19 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
     validate?: (file: File) => string | null | undefined;
     /** 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, through `transformFiles` where it is set.
@@ -193,10 +219,8 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      * count is written as the language writes a number.
      */
     private listed;
-    /** The element slotted into `remove-icon`, which each remove button copies. */
-    private removeIcon;
-    /** One copy of `removeIcon` per row, kept so a render does not replace it. */
-    private readonly removeIcons;
+    /** 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;
@@ -342,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 {
@@ -349,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) => {
@@ -46,16 +47,17 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         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.removeIcon = undefined;
-        this.removeIcons = new Map();
+        this.statuses = new WeakMap();
+        this.removeIcon = new SlottedGlyph();
         this.handleRemoveIcon = (event) => {
-            this.removeIcons.clear();
-            this.removeIcon = event.target.assignedElements({ flatten: true })[0];
+            this.removeIcon.read(event.target);
+            this.requestUpdate();
         };
         this.handlePaste = (event) => {
             const pasted = [...(event.clipboardData?.files ?? [])];
@@ -106,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,
@@ -152,12 +167,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         });
     }
     removeMark(at) {
-        if (!this.removeIcon) {
-            return drawIcon(trash);
-        }
-        const held = this.removeIcons.get(at) ?? this.removeIcon.cloneNode(true);
-        this.removeIcons.set(at, held);
-        return held;
+        return this.removeIcon.copyFor(at) ?? drawIcon(trash);
     }
     get files() {
         return [...(this.control?.files ?? [])];
@@ -258,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()}
@@ -300,14 +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">
                     ${this.renderFile
-                ? this.renderFile(file, at)
-                : html `<span part="name">${file.name}</span>
+                    ? this.renderFile(file, at)
+                    : html `<span part="name">${file.name}</span>
                           <span part="meta">
                             ${this.renderMeta(file)}
-                          </span>`}
+                          </span>`}${this.renderFileStatus(file)}
                   </span>
                   <button
                     part="remove"
@@ -319,7 +353,8 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
                   >
                     ${this.removeMark(at)}
                   </button>
-                </li>`)}
+                </li>`;
+            })}
             </ul>`}`;
     }
 };
@@ -347,6 +382,9 @@ __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);
@@ -368,9 +406,6 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessFileInput.prototype, "validate", void 0);
-__decorate([
-    state()
-], HelixHeadlessFileInput.prototype, "removeIcon", void 0);
 __decorate([
     state()
 ], HelixHeadlessFileInput.prototype, "dropping", void 0);

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;

package/dist/filter-input/chip/filter-chip.d.ts

@@ -27,6 +27,15 @@ declare const HelixHeadlessFilterChip_base: (new (...args: any[]) => import("@fu
  * dismissal, which is also how you take control of the interaction for one
  * press. `requestChange` documents the pattern.
  *
+ * **Keyboard.** The remove button is a tab stop of its own, and Enter or Space
+ * on it asks to remove the filter. In a `FilterInput`, Backspace in the empty
+ * field asks to remove the last chip.
+ *
+ * The remove button is named `dismiss-label` followed by the chip's words,
+ * such as "Remove filter Status is not open", so a row of chips says which
+ * filter each button removes. Write `{label}` in `dismiss-label` to put the
+ * words elsewhere.
+ *
  * To let the user change the operator, slot a menu trigger into `operator`.
  * With the text fallback, the operator is a label. The chip does not interpret
  * operators: their meaning belongs to your domain, as `FilterOperator`
@@ -100,6 +109,20 @@ export declare class HelixHeadlessFilterChip extends HelixHeadlessFilterChip_bas
      * makes an unusual filter look unusual.
      */
     operatorLabel: string;
+    /**
+     * The remove button's name: `dismissLabel` with the chip's words, its field,
+     * its comparison and its values, such as "Remove filter Status is not open".
+     *
+     * **Named for its chip**, as File Input names each remove button for its
+     * file: a row of buttons each called "Remove filter" says nothing about
+     * which filter each one takes away. `{label}` in `dismiss-label` says where
+     * the words go, and without it they follow the label.
+     *
+     * Each word is read from what is slotted and otherwise from `label` and
+     * `operator-label`, which is all a server and a hydrating render can read,
+     * so the values join the update after.
+     */
+    private get removeName();
     protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }

package/dist/filter-input/chip/filter-chip.js

@@ -4,7 +4,7 @@ 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 { customElement, HelixElement, MixinDismissible } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, MixinDismissible, slottedWords } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -16,8 +16,17 @@ let HelixHeadlessFilterChip = class HelixHeadlessFilterChip extends MixinDismiss
         this.label = '';
         this.operatorLabel = '';
     }
+    get removeName() {
+        const read = (slot, fallback) => (this.childrenKnown && slottedWords(this, [slot])) || fallback;
+        const words = [read('field', this.label), read('operator', this.operatorLabel), read('', '')]
+            .filter(Boolean)
+            .join(' ');
+        const label = this.dismissLabel;
+        return label.includes('{label}') ? label.replace('{label}', words) : `${label} ${words}`.trim();
+    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
+        this.renderRoot.addEventListener('slotchange', () => this.requestUpdate());
         this.finishHydration();
     }
     render() {
@@ -33,7 +42,7 @@ let HelixHeadlessFilterChip = class HelixHeadlessFilterChip extends MixinDismiss
             ? html `<button
               part="dismiss"
               type="button"
-              aria-label=${this.dismissLabel}
+              aria-label=${this.removeName}
               @click=${() => this.dismiss()}
             >
               <svg part="dismiss-mark" fill="currentColor" viewBox=${x.viewBox} aria-hidden="true">