@fusion.dev/helix-headless 0.155.0 → 0.156.0

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

@@ -12,6 +12,9 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { decimals, formatGrain, strideOf } from '../grain.js';
 const SCRUB_PITCH = 4;
 const SCRUB_FINE = 16;
+const PLAIN = /^-?(\d+(\.\d*)?|\.\d+)$/;
+const REPEAT_DELAY = 400;
+const REPEAT_EVERY = 60;
 let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
@@ -28,6 +31,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         this.rangeOverflowMessage = 'Value must be {max} or less.';
         this.rangeUnderflowMessage = 'Value must be {min} or more.';
         this.readOnly = false;
+        this.roleLabel = 'number field';
         this.scrub = false;
         this.stepMismatchMessage = 'Please enter a valid value. The two nearest valid values are {below} and {above}.';
         this.valueText = '';
@@ -49,6 +53,53 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             this.editing = true;
         };
         this.touchApple = appleTouch(typeof navigator === 'undefined' ? undefined : navigator);
+        this.pressStepped = false;
+        this.handleStepperDown = (event) => {
+            if (event.button !== 0) {
+                return;
+            }
+            const button = event.currentTarget;
+            const up = button.getAttribute('part') === 'increment';
+            clearTimeout(this.repeat);
+            this.pressStepped = true;
+            button.setPointerCapture?.(event.pointerId);
+            const step = () => {
+                const before = this.value;
+                if (up) {
+                    this.stepUp();
+                }
+                else {
+                    this.stepDown();
+                }
+                this.repeat = this.value === before ? undefined : setTimeout(step, REPEAT_EVERY);
+            };
+            step();
+            if (this.repeat !== undefined) {
+                clearTimeout(this.repeat);
+                this.repeat = setTimeout(step, REPEAT_DELAY);
+            }
+        };
+        this.stopRepeat = () => {
+            clearTimeout(this.repeat);
+            this.repeat = undefined;
+            if (this.pressStepped) {
+                setTimeout(() => {
+                    this.pressStepped = false;
+                });
+            }
+        };
+        this.handleStepperClick = (event) => {
+            if (this.pressStepped) {
+                this.pressStepped = false;
+                return;
+            }
+            if (event.currentTarget.getAttribute('part') === 'increment') {
+                this.stepUp();
+            }
+            else {
+                this.stepDown();
+            }
+        };
         this.scrubFrom = 0;
         this.scrubValue = 0;
         this.scrubStart = '';
@@ -240,6 +291,10 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
     stepDown(large = false) {
         this.nudge(large ? -(this.largeStep ?? 10) : -1);
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.stopRepeat();
+    }
     renderLabel() {
         if (!this.scrub || !this.labeled) {
             return super.renderLabel();
@@ -267,13 +322,20 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         restoreValue(control, this.shown);
         return this.value !== before;
     }
+    submitted(parsed) {
+        const text = this.value.trim();
+        if (parsed === null) {
+            return '';
+        }
+        return PLAIN.test(text) ? text : String(parsed);
+    }
     sync() {
         const control = this.control;
-        this.internals.setFormValue(this.value);
+        const parsed = this.numeric;
+        this.internals.setFormValue(this.submitted(parsed), this.value);
         if (!control) {
             return;
         }
-        const parsed = this.numeric;
         if (this.readOnly) {
             this.internals.setValidity({});
         }
@@ -329,23 +391,39 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
     get blocksImplicitSubmission() {
         return true;
     }
+    renderDecrementIcon() {
+        return html `<slot name="decrement-icon" aria-hidden="true"
+      ><svg part="decrement-mark" fill="currentColor" viewBox=${minus.viewBox} aria-hidden="true">
+        ${unsafeSVG(minus.content)}
+      </svg></slot
+    >`;
+    }
+    renderIncrementIcon() {
+        return html `<slot name="increment-icon" aria-hidden="true"
+      ><svg part="increment-mark" fill="currentColor" viewBox=${plus.viewBox} aria-hidden="true">
+        ${unsafeSVG(plus.content)}
+      </svg></slot
+    >`;
+    }
     render() {
         const parsed = this.numeric;
         const atMin = parsed !== null && this.min !== undefined && parsed <= this.min;
         const atMax = parsed !== null && this.max !== undefined && parsed >= this.max;
         return html `${this.renderLabel()}
-      <div part="field">
+      <div part="field" role="group">
         <button
           part="decrement"
           type="button"
           aria-label=${this.decrementLabel}
           tabindex="-1"
           ?disabled=${this.isDisabled || this.readOnly || atMin}
-          @click=${() => this.stepDown()}
+          @click=${this.handleStepperClick}
+          @lostpointercapture=${this.stopRepeat}
+          @pointercancel=${this.stopRepeat}
+          @pointerdown=${this.handleStepperDown}
+          @pointerup=${this.stopRepeat}
         >
-          <svg part="decrement-mark" fill="currentColor" viewBox=${minus.viewBox} aria-hidden="true">
-            ${unsafeSVG(minus.content)}
-          </svg>
+          ${this.renderDecrementIcon()}
         </button>
         <slot name="start"></slot>
         ${''}
@@ -355,6 +433,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
           .value=${this.shown}
           type="text"
           role=${this.touchApple ? nothing : 'spinbutton'}
+          aria-roledescription=${this.touchApple || this.roleLabel === '' ? nothing : this.roleLabel}
           inputmode="decimal"
           autocomplete=${this.autocomplete || nothing}
           name=${this.name || nothing}
@@ -393,11 +472,13 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
           aria-label=${this.incrementLabel}
           tabindex="-1"
           ?disabled=${this.isDisabled || this.readOnly || atMax}
-          @click=${() => this.stepUp()}
+          @click=${this.handleStepperClick}
+          @lostpointercapture=${this.stopRepeat}
+          @pointercancel=${this.stopRepeat}
+          @pointerdown=${this.handleStepperDown}
+          @pointerup=${this.stopRepeat}
         >
-          <svg part="increment-mark" fill="currentColor" viewBox=${plus.viewBox} aria-hidden="true">
-            ${unsafeSVG(plus.content)}
-          </svg>
+          ${this.renderIncrementIcon()}
         </button>
       </div>
       ${this.renderHint()}${this.renderFeedback()}`;
@@ -453,6 +534,10 @@ __decorate([
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessNumberInput.prototype, "readOnly", void 0);
+__decorate([
+    words,
+    property({ attribute: 'role-label' })
+], HelixHeadlessNumberInput.prototype, "roleLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessNumberInput.prototype, "scrub", void 0);

package/dist/object-inspector/root/object-inspector-root.d.ts

@@ -2,6 +2,24 @@ import { AriaForwardController, HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../copy-button/index.js';
 import { type Row } from '../rows.js';
+/** What a `renderValue` function is told about the entry it draws. */
+export interface ObjectInspectorEntry {
+    /** How deep the entry is, from 0 at the root. */
+    depth: number;
+    /** The property name or array index the value is under, absent for the root. */
+    key: string | undefined;
+    /** The entry's path, as `active` writes it: `/meta/tags/0`. */
+    path: string;
+    /** What kind of value it is, as JSON names it: `array`, `boolean`, `null`, `number`, `object` or `string`. Anything else is `other`. */
+    type: 'array' | 'boolean' | 'null' | 'number' | 'object' | 'other' | 'string';
+}
+/**
+ * Draws one entry's value, for an inspector given `renderValue`.
+ *
+ * Returns anything Lit renders, such as a template from `html`, a string, or a
+ * DOM node, or `undefined` to draw the value as the inspector does.
+ */
+export type ObjectInspectorRenderer = (value: unknown, entry: ObjectInspectorEntry) => unknown;
 /**
  * @summary A structured value shown as a tree, where you can close branches,
  * see how many entries each holds, and copy any part.
@@ -65,6 +83,12 @@ import { type Row } from '../rows.js';
  * selected. The button sits beside the tree, because assistive technology
  * cannot reliably reach a button inside a tree item.
  *
+ * **Your own drawing of a value.** `renderValue` is a function from a value and
+ * its entry, its path, key, depth and type, to what Lit renders, such as a
+ * link for a URL or a swatch for a color. Return `undefined` to draw the value
+ * as the inspector does. What you draw sits in the `value` part, after the
+ * key. Filtering and copying still read the value itself.
+ *
  * `windowed` draws only the rows in view, for values with thousands of entries.
  * The box needs a height for windowing to work. The styled tier sets one, and
  * in the headless tier you set it yourself.
@@ -119,6 +143,7 @@ import { type Row } from '../rows.js';
  * @csspart summary - The brackets that stand for a branch's contents.
  * @csspart toggle - The caret on a branch. It points down when the branch is open and sideways when it is closed.
  * @csspart tree - The tree grid that holds the rows.
+ * @csspart value - What `renderValue` drew for an entry, in place of its own drawing.
  *
  * @cssproperty --object-inspector-level - How deep a row is, from 0 at the root, for indenting it.
  */
@@ -229,6 +254,16 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
      * reach a value.
      */
     noCopy: boolean;
+    /**
+     * Draws an entry's value your way, given the value and its entry. Set it as
+     * a property.
+     *
+     * It returns what Lit renders: a template from `html`, a string, or a DOM
+     * node. `undefined` draws the value as the inspector does, so a function can
+     * draw some entries and leave the rest, such as only the strings under
+     * `/links`.
+     */
+    renderValue: ObjectInspectorRenderer | undefined;
     /**
      * What a screen reader hears when a filter matches one entry, where
      * `results-label` should not say it. `{count}` is the count.
@@ -397,7 +432,7 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     private readonly handleFilterInput;
     /** Down from the filter field goes to the active row, where the matches are. */
     private readonly handleFilterKeydown;
-    private renderValue;
+    private drawValue;
     /**
      * One entry, named for its state where it holds one.
      *

package/dist/object-inspector/root/object-inspector-root.js

@@ -14,6 +14,18 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html as staticHtml } from 'lit/static-html.js';
 import '../../copy-button/index.js';
 import { cursorFor, entries, flatten, search, seed, siblingBranches, withAncestors, } from '../rows.js';
+const kindOf = (value) => {
+    if (value === null) {
+        return 'null';
+    }
+    if (Array.isArray(value)) {
+        return 'array';
+    }
+    const type = typeof value;
+    return type === 'boolean' || type === 'number' || type === 'object' || type === 'string'
+        ? type
+        : 'other';
+};
 let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends HelixElement {
     constructor() {
         super(...arguments);
@@ -393,8 +405,17 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             this.toggle(row);
         }
     }
-    renderValue(row) {
+    drawValue(row) {
         const { value } = row;
+        const drawn = this.renderValue?.(value, {
+            depth: row.depth,
+            key: row.key,
+            path: row.path,
+            type: kindOf(value),
+        });
+        if (drawn !== undefined) {
+            return html `<span part="value">${drawn}</span>`;
+        }
         if (row.branch) {
             const count = entries(value).length;
             const array = Array.isArray(value);
@@ -439,7 +460,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             >
               ${unsafeSVG((row.open ? caretDown : caretRight).content)}
             </svg>`
-            : nothing}${row.key === undefined ? nothing : html `<span part="key">${row.key}</span>: `}${this.renderValue(row)}</div>
+            : nothing}${row.key === undefined ? nothing : html `<span part="key">${row.key}</span>: `}${this.drawValue(row)}</div>
     </div>`;
     }
     hasFocusedRow() {
@@ -563,6 +584,9 @@ __decorate([
 __decorate([
     property({ attribute: 'no-copy', type: Boolean })
 ], HelixHeadlessObjectInspector.prototype, "noCopy", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessObjectInspector.prototype, "renderValue", void 0);
 __decorate([
     property({ attribute: 'result-label' })
 ], HelixHeadlessObjectInspector.prototype, "resultLabel", void 0);

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

@@ -37,6 +37,12 @@ export declare const optionsAmong: (elements: readonly Element[]) => HelixHeadle
  * An option with `href` is a link: choosing it follows the link and selects
  * nothing, as an entry in a command palette that goes to a page does.
  *
+ * The option's name is its label alone, as React Aria's `slot="label"` makes
+ * it: what is in `start` and `end`, an avatar's initials or a shortcut, is
+ * drawn and not read as part of the name. The description is read as the
+ * option's description. A name you give with `aria-label` or
+ * `aria-labelledby` wins over both.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -61,6 +67,8 @@ export declare const optionsAmong: (elements: readonly Element[]) => HelixHeadle
  * @cssstate active - While the keyboard is on the option, which is the option `aria-activedescendant` names.
  * @cssstate disabled - While the option cannot be chosen.
  * @cssstate has-indicator - An icon is slotted into `indicator`.
+ * @cssstate hovered - While a mouse or a pen is over the option. A touch sets no hover, as React Aria's `data-hovered` does not.
+ * @cssstate pressed - While a pointer presses the option, from the press to the release.
  * @cssstate selected - While the option is chosen.
  */
 export declare class HelixHeadlessOption extends HelixElement {
@@ -188,6 +196,17 @@ export declare class HelixHeadlessOption extends HelixElement {
      * nothing for every choice.
      */
     label: string;
+    /**
+     * The page of commands this option opens, by name, where choosing it would
+     * otherwise run it.
+     *
+     * Declared here and acted on by whatever owns the list, as `alternate` is.
+     * `Command` is the only owner that reads it: choosing the option shows the
+     * commands slotted as `page:` and the name, such as `slot="page:theme"`,
+     * and Backspace in an empty filter goes back. Empty is an option that opens
+     * nothing, which is nearly every option.
+     */
+    opens: string;
     /**
      * The link's `rel`. Set it whenever you set `target="_blank"`.
      */
@@ -291,6 +310,19 @@ export declare class HelixHeadlessOption extends HelixElement {
      * consumer's markup means. What stops is the write back.
      */
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * The name is the label part and the description the description part, by
+     * reference, because the host's own content runs `start` and `end` into its
+     * name: an option with initials and a shortcut was called `P Priya Shah ⌘P`.
+     * The alternate destination is part of the description where there is a
+     * caption to read with it. A name the consumer wrote on the host wins.
+     */
+    protected updated(changed: PropertyValues): void;
+    /** A hover from a mouse or a pen, which a touch does not make. */
+    private readonly handlePointerEnter;
+    private readonly handlePointerLeave;
+    private readonly handlePointerDown;
+    private readonly handlePointerUp;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/option/root/option-root.js

@@ -4,8 +4,8 @@ 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, followLink, HelixElement, HelixSelectEvent, slotFilled, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { customElement, followLink, HelixElement, HelixSelectEvent, hostAria, slotFilled, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 export const optionsAmong = (elements) => {
     const isOption = (element) => 'text' in element && 'value' in element && 'selected' in element;
@@ -21,12 +21,26 @@ let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
         this.download = false;
         this.href = '';
         this.label = '';
+        this.opens = '';
         this.rel = '';
         this.selected = false;
         this.selectionFollowsActive = false;
         this.target = '';
         this.textValue = '';
         this.value = '';
+        this.handlePointerEnter = (event) => {
+            this.toggleState('hovered', event.pointerType !== 'touch');
+        };
+        this.handlePointerLeave = () => {
+            this.toggleState('hovered', false);
+            this.toggleState('pressed', false);
+        };
+        this.handlePointerDown = (event) => {
+            this.toggleState('pressed', event.button === 0 && !this.disabled);
+        };
+        this.handlePointerUp = () => {
+            this.toggleState('pressed', false);
+        };
     }
     get defaultSelected() {
         return this.hasAttribute('selected');
@@ -62,6 +76,21 @@ let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
         this.toggleState('active', this.active);
         this.toggleState('disabled', this.disabled);
     }
+    updated(changed) {
+        super.updated(changed);
+        const named = this.hasAttribute('aria-label') || this.hasAttribute('aria-labelledby');
+        const label = this.partNamed('label');
+        const caption = this.partNamed('description');
+        const alternate = this.renderRoot.querySelector('[data-alternate]');
+        const described = [
+            ...(caption ? [caption] : this.knownChildren.filter((child) => child.slot === 'description')),
+            ...(alternate ? [alternate] : []),
+        ];
+        hostAria(this.internals, {
+            describedBy: described,
+            labelledBy: named || !label ? [] : [label],
+        });
+    }
     render() {
         this.internals.role = 'option';
         this.internals.ariaSelected =
@@ -69,19 +98,26 @@ let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
                 ? String(this.selected || (this.selectionFollowsActive && this.active))
                 : null;
         this.internals.ariaDisabled = this.disabled ? 'true' : null;
-        this.internals.ariaDescription =
-            this.alternate !== '' && this.alternateLabel !== '' ? this.alternateLabel : null;
+        const alternate = this.alternate !== '' && this.alternateLabel !== '';
+        const captioned = Boolean(this.description) || this.knownChildren.some((child) => child.slot === 'description');
+        this.internals.ariaDescription = alternate && !captioned ? this.alternateLabel : null;
         return html `<div
       part="item${this.selected ? ' item-selected' : ''}${this.active ? ' item-active' : ''}"
       @click=${(event) => this.select(event)}
+      @pointercancel=${this.handlePointerUp}
+      @pointerdown=${this.handlePointerDown}
+      @pointerenter=${this.handlePointerEnter}
+      @pointerleave=${this.handlePointerLeave}
+      @pointerup=${this.handlePointerUp}
     >
       <slot name="start"></slot>
       <span part="text">
         <span part="label"><slot>${this.label}</slot></span>
         ${this.description
             ? html `<span part="description"><slot name="description">${this.description}</slot></span>`
-            : html `<slot name="description"></slot>`}
+            : html `<slot name="description" @slotchange=${() => this.requestUpdate()}></slot>`}
       </span>
+      ${alternate && captioned ? html `<span data-alternate hidden>${this.alternateLabel}</span>` : nothing}
       <slot name="end"></slot>
       <slot
         name="indicator"
@@ -114,6 +150,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessOption.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixHeadlessOption.prototype, "opens", void 0);
 __decorate([
     property()
 ], HelixHeadlessOption.prototype, "rel", void 0);

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

@@ -48,11 +48,15 @@ import { type Branch } from '../levels.js';
  *
  * @slot - The links, as anchors with fragment hrefs, or lists holding them.
  * @slot heading - A heading above the links, such as "On this page". It names the navigation.
+ * @slot indicator - A mark of your own, drawn inside the `indicator` part, where `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and `--indicator-block-size` reach it.
  *
  * @event {HelixActivateEvent} helix-activate - Fired when the section in view changes, with its id as the value. It reports the scroll position and cannot be prevented.
  *
  * @csspart heading - The box holding the `heading` slot, above the navigation.
- * @csspart indicator - The mark that moves to the section in view.
+ * @csspart indicator - The mark that moves to the link of the section in view. It carries that link's
+ *   place and size as `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and
+ *   `--indicator-block-size`, and `data-placed` once it has been placed, for a mark you draw
+ *   and animate yourself.
  * @csspart nav - The navigation landmark.
  */
 export declare class HelixHeadlessOutline extends HelixElement {
@@ -150,7 +154,7 @@ export declare class HelixHeadlessOutline extends HelixElement {
      * nothing was announced, and nothing said why.
      */
     private get links();
-    /** The children that are the content, which is all of them but the heading. */
+    /** The children that are the content, which is all of them but the heading and the mark. */
     private get content();
     /**
      * The links of a flat run, which the render puts into lists, or `undefined`

package/dist/outline/root/outline-root.js

@@ -8,6 +8,7 @@ import { customElement, elementById, HelixActivateEvent, HelixElement, Indicator
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { levelOf, nest } from '../levels.js';
+const OWN_SLOTS = new Set(['heading', 'indicator']);
 const isFragment = (element) => element instanceof HTMLAnchorElement && element.getAttribute('href')?.startsWith('#') === true;
 let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
     constructor() {
@@ -97,7 +98,7 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
             : [...element.querySelectorAll('a[href^="#"]')].filter(isFragment));
     }
     get content() {
-        return this.knownChildren.filter((child) => child.slot !== 'heading');
+        return this.knownChildren.filter((child) => !OWN_SLOTS.has(child.slot));
     }
     get run() {
         const content = this.content;
@@ -238,6 +239,9 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
         const root = this.renderRoot;
         const heading = root?.querySelector?.('slot[name="heading"]');
         heading?.assign?.(...this.knownChildren.filter((child) => child.slot === 'heading'));
+        root
+            ?.querySelector?.('slot[name="indicator"]')
+            ?.assign?.(...this.knownChildren.filter((child) => child.slot === 'indicator'));
         const run = this.run;
         if (run) {
             for (const slot of root?.querySelectorAll?.('slot[data-link]') ?? []) {
@@ -249,7 +253,7 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
             return;
         }
         const plain = root?.querySelector?.('nav > slot:not([role])');
-        plain?.assign?.(...[...this.childNodes].filter((node) => node instanceof Element ? node.slot !== 'heading' : node instanceof Text));
+        plain?.assign?.(...[...this.childNodes].filter((node) => node instanceof Element ? !OWN_SLOTS.has(node.slot) : node instanceof Text));
     }
     updated(changed) {
         super.updated(changed);
@@ -269,7 +273,7 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
         return html `<div part="heading"><slot name="heading" @slotchange=${this.nameByHeading}></slot></div>
       <nav part="nav" aria-label=${this.label} @slotchange=${this.handleSlotChange}>
       ${run ? this.renderList(nest(run.map((link) => levelOf(link.getAttribute('data-level'))))) : html `<slot></slot>`}
-      <span part="indicator" aria-hidden="true"></span>
+      <span part="indicator" aria-hidden="true"><slot name="indicator"></slot></span>
     </nav>`;
     }
     renderList(branches) {

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

@@ -96,6 +96,11 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * | A letter or a word | Moves to the next row whose first cell starts with what you typed. |
  * | Tab | Leaves the table. |
  *
+ * When the rows did not load, set `error-text`, such as "The orders did not
+ * load", and put a button that tries again in the `error` slot. The line shows
+ * after the rows in place of the empty and loading lines, the live region says
+ * it, and the table takes the `error` state. Clear it once you try again.
+ *
  * The CSS custom properties listed for this component are written by it and
  * read by the stylesheet that draws it. Do not set them. Each holds a number
  * the component computes and CSS cannot, so the stylesheet can draw the table
@@ -109,6 +114,7 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  *
  * @slot - The table's rows.
  * @slot empty - Content shown when there are no rows and none are loading, such as a picture and a link. Falls back to `empty-text`, which the live region still says.
+ * @slot error - Content shown while `error-text` is set, such as a button that tries again. Falls back to `error-text`, which the live region still says.
  * @slot heading - Words that name the table, shown above it, such as a heading.
  * @slot loading - Content shown while the rows load, such as a spinner. Falls back to `loading-text`, which the live region still says.
  *
@@ -132,6 +138,7 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * @csspart checkbox-mark-indeterminate - Added to `checkbox-mark` while only some rows are selected.
  * @csspart drag-preview - A copy of the row a pointer drags by its grip, which follows the pointer in the top layer until the row is let go, in a `reorderable` table. Hidden from assistive technology.
  * @csspart empty - The text shown when there are no rows.
+ * @csspart error - The line shown after the rows while `error-text` is set, in place of the empty and loading text.
  * @csspart grid-end - An empty box after the rows, in a `grid` table. Tab focuses it on its way out of the table, so the key leaves from the end.
  * @csspart grid-start - An empty box before the rows, in a `grid` table. Shift with Tab focuses it on its way out of the table.
  * @csspart grip-head - The heading over the row grips, in a `reorderable` table.
@@ -142,6 +149,9 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * @csspart table - The grid.
  *
  * @cssproperty --table-template - The column track list the table works out from its columns. The component writes it inline on the element that reads it, so setting it has no effect. Set `columns` to change the tracks.
+ *
+ * @cssstate empty - While there are no rows and none are loading.
+ * @cssstate error - While `error-text` is set.
  */
 export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     /**
@@ -214,6 +224,16 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     descendingLabel: string;
     /** What screen readers hear when a held row is dropped, in a `reorderable` table. */
     droppedLabel: string;
+    /**
+     * The text shown and announced when the rows could not load. Set it when a
+     * fetch fails, and clear it once you try again. Empty, the default, shows
+     * nothing.
+     *
+     * While it is set, a line after the rows shows it, or your own content in the
+     * `error` slot, in place of the empty and loading lines, and the live region
+     * says it.
+     */
+    errorText: string;
     /**
      * The table's name where neither `label` nor an `aria-label` or
      * `aria-labelledby` on the host gives it one.

package/dist/table/root/table-root.js

@@ -44,7 +44,7 @@ const SAMPLE = 200;
 const textOf = (element) => (element?.textContent ?? '').replace(/\s+/g, ' ').trim();
 const lengthOf = (element) => textOf(element).length;
 const numberOf = (value) => Number(value.replaceAll(',', ''));
-const STATUS = new Set(['empty', 'loading']);
+const STATUS = new Set(['empty', 'error', 'loading']);
 const NAMED = new Set([...STATUS, 'heading']);
 let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixElement) {
     constructor() {
@@ -57,6 +57,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.defaultSort = '';
         this.descendingLabel = 'descending';
         this.droppedLabel = 'Dropped';
+        this.errorText = '';
         this.fallbackLabel = 'Table';
         this.grid = false;
         this.label = '';
@@ -496,6 +497,8 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
     }
     updated(changed) {
         super.updated(changed);
+        this.toggleState('error', this.errorText !== '');
+        this.toggleState('empty', !this.loading && !this.hasRows);
         this.assign();
         this.alignCells();
         this.markSorted();
@@ -561,8 +564,12 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             this.handleSlotChange();
         }}
       ></slot>
-      ${this.renderStatus(this.hasRows, grid ? 'gridcell' : 'cell')}
-    </div>${end}${this.renderLive(this.hasRows)}${this.reorder.drawDragPreview()}`;
+      ${this.errorText === ''
+            ? this.renderStatus(this.hasRows, grid ? 'gridcell' : 'cell')
+            : html `<p part="error" role="row"><span role=${grid ? 'gridcell' : 'cell'}><slot name="error">${this.errorText}</slot></span></p>`}
+    </div>${end}${this.errorText === ''
+            ? this.renderLive(this.hasRows)
+            : html `<span part="live" role="status">${this.errorText}</span>`}${this.reorder.drawDragPreview()}`;
     }
 };
 __decorate([
@@ -590,6 +597,9 @@ __decorate([
     words,
     property({ attribute: 'dropped-label' })
 ], HelixHeadlessTable.prototype, "droppedLabel", void 0);
+__decorate([
+    property({ attribute: 'error-text' })
+], HelixHeadlessTable.prototype, "errorText", void 0);
 __decorate([
     words,
     property({ attribute: 'fallback-label' })