@fusion.dev/helix-headless 0.103.3 → 0.104.1

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

@@ -31,6 +31,7 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  *
  * @csspart empty - Shown when there are no rows to show.
  * @csspart head - The row the column headings sit in. `display: contents`, so it takes no space.
+ * @csspart live - The empty and loading lines again, in a region a screen reader hears when they change. Visually hidden in the styled tier.
  * @csspart loading - Shown while the rows are still on their way.
  * @csspart table - The grid.
  *

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

@@ -136,7 +136,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         }}
       ></slot>
       ${this.renderStatus(this.hasRows)}
-    </div>`;
+    </div>${this.renderLive(this.hasRows)}`;
     }
 };
 __decorate([

package/dist/textarea/root/textarea-root.js

@@ -108,7 +108,7 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
         if (!control) {
             return;
         }
-        this.internals.setValidity(control.validity, control.validationMessage, control);
+        this.copyValidity(control);
         this.refreshFeedback();
     }
     connectedCallback() {

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

@@ -56,6 +56,7 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-column-hint - Help under the list.
  * @csspart picker-column-items - The list itself.
  * @csspart picker-column-label - The question, over the list.
+ * @csspart picker-column-live - The inner column's `live`, the region a screen reader hears its empty and loading lines from.
  * @csspart picker-column-loading - Shown while the options are still on their way.
  * @csspart picker-column-search - The region holding the field that narrows the list.
  * @csspart picker-column-search-field - The field itself.
@@ -68,6 +69,7 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-list-hint - Help under the list.
  * @csspart picker-list-items - The list itself.
  * @csspart picker-list-label - The question, over the list.
+ * @csspart picker-list-live - The inner list's `live`, the region a screen reader hears its empty and loading lines from.
  * @csspart picker-list-loading - Shown while the options are still on their way.
  * @csspart picker-list-search - The region holding the field that narrows the list.
  * @csspart picker-list-search-field - The field itself.
@@ -128,6 +130,31 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * What the field says before a time is in it.
      */
     placeholder: string;
+    /**
+     * What a reader is told when a range holds more than two times.
+     *
+     * **Every sentence a control raises in the browser's bubble is a property**,
+     * so a form in another language speaks it. Absent is the control's own
+     * sentence, in English.
+     */
+    rangeLengthMessage?: string;
+    /**
+     * What a reader is told when a time is after `max`, with `{max}` filled in
+     * as the field writes it.
+     */
+    rangeOverflowMessage?: string;
+    /**
+     * What a reader is told when a time is before `min`, with `{min}` filled
+     * in as the field writes it.
+     */
+    rangeUnderflowMessage?: string;
+    /**
+     * What the control removing one time is called, with `{name}` filled in.
+     *
+     * **The name goes in**, so a row of them is heard as which one each
+     * removes rather than as "Remove" said once per time.
+     */
+    removeLabel: string;
     /**
      * How far apart the offered times are, in minutes.
      */
@@ -177,6 +204,8 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
     private get picked();
     private readonly handleInput;
     private readonly handlePicked;
+    /** Each time, where `mode` holds several, sent one entry each. */
+    protected get answers(): readonly string[] | undefined;
     /** What is wrong with the times, which the text input cannot say. */
     protected validate(): string;
     /**

package/dist/time-input/root/time-input-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, valueAsTime as asTime, customElement, timeAsValue as fromTime, HelixFormElement, isTimeValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinTokens, valueAsMinutes, writeTime, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsTime as asTime, customElement, fillTemplate, timeAsValue as fromTime, HelixFormElement, isTimeValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinTokens, valueAsMinutes, writeTime, } from '@fusion.dev/helix-core';
 import { clock } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -24,6 +24,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
         this.max = '23:59';
         this.min = '00:00';
         this.placeholder = 'HH:mm';
+        this.removeLabel = 'Remove {name}';
         this.step = 15;
         this.timeStyle = 'local';
         this.triggerLabel = 'Choose a time';
@@ -106,23 +107,31 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
         const held = this.held;
         return held.length > 0 && held.every(isTimeValue) ? held.join(',') : '';
     }
+    get answers() {
+        return this.mode === undefined ? undefined : this.held;
+    }
     validate() {
         const held = this.held;
         const floor = valueAsMinutes(this.min) ?? 0;
         const ceiling = valueAsMinutes(this.max) ?? 1439;
         if (held.length > 0 && !held.every(isTimeValue)) {
-            return this.mode === undefined
-                ? 'Enter a time as HH:mm.'
-                : 'Enter times as HH:mm, separated by commas.';
+            return (this.badInputMessage ||
+                (this.mode === undefined
+                    ? 'Enter a time as HH:mm.'
+                    : 'Enter times as HH:mm, separated by commas.'));
         }
         if (held.some((one) => (valueAsMinutes(one) ?? 0) < floor)) {
-            return `Choose a time at or after ${writeTime(this.min, this.locale)}.`;
+            return fillTemplate(this.rangeUnderflowMessage || 'Choose a time at or after {min}.', {
+                min: writeTime(this.min, this.locale),
+            });
         }
         if (held.some((one) => (valueAsMinutes(one) ?? 0) > ceiling)) {
-            return `Choose a time at or before ${writeTime(this.max, this.locale)}.`;
+            return fillTemplate(this.rangeOverflowMessage || 'Choose a time at or before {max}.', {
+                max: writeTime(this.max, this.locale),
+            });
         }
         if (this.mode === 'range' && held.length > 2) {
-            return 'A range is two times.';
+            return this.rangeLengthMessage || 'A range is two times.';
         }
         return '';
     }
@@ -139,12 +148,12 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
         column-feedback: picker-column-feedback, column-filter-icon: picker-column-filter-icon,
         column-filter-mark: picker-column-filter-mark, column-hint: picker-column-hint,
         column-items: picker-column-items, column-label: picker-column-label,
-        column-loading: picker-column-loading, column-search: picker-column-search,
+        column-live: picker-column-live, column-loading: picker-column-loading, column-search: picker-column-search,
         column-search-field: picker-column-search-field, columns: picker-columns, list: picker-list,
         list-empty: picker-list-empty, list-feedback: picker-list-feedback,
         list-filter-icon: picker-list-filter-icon, list-filter-mark: picker-list-filter-mark,
         list-hint: picker-list-hint, list-items: picker-list-items, list-label: picker-list-label,
-        list-loading: picker-list-loading, list-search: picker-list-search,
+        list-live: picker-list-live, list-loading: picker-list-loading, list-search: picker-list-search,
         list-search-field: picker-list-search-field, option: picker-option,
         option-between: picker-option-between, option-item-active: picker-option-item-active,
         option-item-selected: picker-option-item-selected,
@@ -169,7 +178,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
                   part="time"
       exportparts="dismiss: time-dismiss, dismiss-mark: time-dismiss-mark, start: time-start"
                   dismissible
-                  dismiss-label=${`Remove ${this.written(at)}`}
+                  dismiss-label=${fillTemplate(this.removeLabel, { name: this.written(at) })}
                   ?disabled=${this.isDisabled}
                   @helix-dismiss=${(event) => {
             event.stopPropagation();
@@ -256,6 +265,18 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTimeInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ attribute: 'range-length-message' })
+], HelixHeadlessTimeInput.prototype, "rangeLengthMessage", void 0);
+__decorate([
+    property({ attribute: 'range-overflow-message' })
+], HelixHeadlessTimeInput.prototype, "rangeOverflowMessage", void 0);
+__decorate([
+    property({ attribute: 'range-underflow-message' })
+], HelixHeadlessTimeInput.prototype, "rangeUnderflowMessage", void 0);
+__decorate([
+    property({ attribute: 'remove-label' })
+], HelixHeadlessTimeInput.prototype, "removeLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessTimeInput.prototype, "step", void 0);

package/dist/time-picker/root/time-picker-root.d.ts

@@ -57,6 +57,7 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * @csspart column-hint - Help under the list.
  * @csspart column-items - The list itself.
  * @csspart column-label - The question, over the list.
+ * @csspart column-live - The inner list's `live`, the region a screen reader hears its empty and loading lines from.
  * @csspart column-loading - Shown while the options are still on their way.
  * @csspart column-search - The region holding the field that narrows the list.
  * @csspart column-search-field - The field itself.
@@ -69,6 +70,7 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * @csspart list-hint - Help under the list.
  * @csspart list-items - The list itself.
  * @csspart list-label - The question, over the list.
+ * @csspart list-live - The inner list's `live`, the region a screen reader hears its empty and loading lines from.
  * @csspart list-loading - Shown while the options are still on their way.
  * @csspart list-search - The region holding the field that narrows the list.
  * @csspart list-search-field - The field itself.
@@ -82,6 +84,14 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * @csspart option-text - The words and the caption, as one column.
  */
 export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_base {
+    /**
+     * What a reader is told when the value holds something that is not a time.
+     *
+     * **Every sentence a control raises in the browser's bubble is a property**,
+     * named for the validity flag it reports, so a form in another language
+     * speaks it. Absent is the control's own sentence, in English.
+     */
+    badInputMessage?: string;
     /**
      * Times that cannot be chosen, comma separated, as `HH:mm`.
      *
@@ -261,6 +271,10 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
     step: number;
     /** Refuses every change while read-only. See `readOnly`. */
     requestValue(next: string): boolean;
+    /**
+     * What a reader is told when a time is required and none is chosen.
+     */
+    valueMissingMessage?: string;
     /**
      * Whether the times are one list or a column each.
      *

package/dist/time-picker/root/time-picker-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 { valueAsTime as asTime, customElement, timeAsValue as fromTime, HelixFormElement, MixinControllerValue, minutesAsValue, valueAsMinutes, writeTime, } from '@fusion.dev/helix-core';
+import { valueAsTime as asTime, customElement, timeAsValue as fromTime, HelixFormElement, MixinControllerValue, minutesAsValue, reportValues, valueAsMinutes, writeTime, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -151,29 +151,25 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
     reportRequired() {
         const anchor = this.partNamed('list') ?? undefined;
         if (this.required && this.value === '') {
-            this.internals.setValidity({ valueMissing: true }, 'Choose a time.', anchor);
+            this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage || 'Choose a time.', anchor);
             return;
         }
         const held = this.held;
         if (held.length > 0 && held.some((one) => asTime(one) === null)) {
-            this.internals.setValidity({ badInput: true }, this.mode === undefined
-                ? 'Enter a time as HH:mm.'
-                : 'Enter times as HH:mm, separated by commas.', anchor);
+            this.internals.setValidity({ badInput: true }, this.badInputMessage ||
+                (this.mode === undefined
+                    ? 'Enter a time as HH:mm.'
+                    : 'Enter times as HH:mm, separated by commas.'), anchor);
             return;
         }
         this.internals.setValidity({});
     }
     report() {
-        const times = this.held;
-        if (this.name === '' || this.disabled || times.length === 0) {
+        if (this.disabled) {
             this.internals.setFormValue(null);
             return;
         }
-        const data = new FormData();
-        for (const time of times) {
-            data.append(this.name, time);
-        }
-        this.internals.setFormValue(data);
+        reportValues(this.internals, this.name, this.held);
     }
     async revealWhenSettled() {
         const settling = [
@@ -208,7 +204,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
       data-column=${part}
       exportparts="empty: column-empty, feedback: column-feedback, filter-icon: column-filter-icon,
         filter-mark: column-filter-mark, hint: column-hint, items: column-items, label: column-label,
-        loading: column-loading, search: column-search, search-field: column-search-field"
+        live: column-live, loading: column-loading, search: column-search, search-field: column-search-field"
       aria-label=${label}
       ?disabled=${this.isDisabled}
       .value=${value}
@@ -250,7 +246,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
       part="list"
       exportparts="empty: list-empty, feedback: list-feedback, filter-icon: list-filter-icon,
         filter-mark: list-filter-mark, hint: list-hint, items: list-items, label: list-label,
-        loading: list-loading, search: list-search, search-field: list-search-field"
+        live: list-live, loading: list-loading, search: list-search, search-field: list-search-field"
       aria-label=${this.label}
       data-unset=${this.value === '' ? '' : nothing}
       ?disabled=${this.isDisabled}
@@ -295,6 +291,9 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         this.value = Number.isNaN(ms) ? '' : fromTime(new Date(ms));
     }
 };
+__decorate([
+    property({ attribute: 'bad-input-message' })
+], HelixHeadlessTimePicker.prototype, "badInputMessage", void 0);
 __decorate([
     property({ attribute: 'disable-times' })
 ], HelixHeadlessTimePicker.prototype, "disableTimes", void 0);
@@ -325,6 +324,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessTimePicker.prototype, "step", void 0);
+__decorate([
+    property({ attribute: 'value-missing-message' })
+], HelixHeadlessTimePicker.prototype, "valueMissingMessage", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTimePicker.prototype, "variant", void 0);

package/dist/toast/item/toast-item.d.ts

@@ -50,17 +50,6 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
      * restart a message the reader is already partway through.
      */
     duration?: number;
-    /**
-     * What kind of message it is, which picks the mark and its name.
-     *
-     * A subset of the tone axis: a toast reports a status and never a brand role.
-     */
-    tone?: 'danger' | 'info' | 'success' | 'warning';
-    /** When the current run of the timer began, or nothing while it is paused. */
-    private startedAt;
-    /** What is left of the duration, so resuming continues rather than restarts. */
-    private remaining;
-    private timer;
     /**
      * Whether the message is still showing.
      *
@@ -76,6 +65,17 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
      */
     get open(): boolean;
     set open(next: boolean);
+    /** When the current run of the timer began, or nothing while it is paused. */
+    private startedAt;
+    /** What is left of the duration, so resuming continues rather than restarts. */
+    private remaining;
+    private timer;
+    /**
+     * What kind of message it is, which picks the mark and its name.
+     *
+     * A subset of the tone axis: a toast reports a status and never a brand role.
+     */
+    tone?: 'danger' | 'info' | 'success' | 'warning';
     /** Whether it is showing, whoever said so, and `undefined` until somebody has. */
     private openState;
     /**
@@ -104,6 +104,7 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
     private holds;
     private readonly handlePause;
     private readonly handleResume;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;

package/dist/toast/item/toast-item.js

@@ -71,10 +71,16 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
             this.dismiss();
         }, this.remaining);
     }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.hasUpdated && this.open) {
+            this.resume();
+        }
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
-        clearTimeout(this.timer);
-        this.timer = undefined;
+        this.pause();
+        this.holds = 0;
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -146,12 +152,12 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
 __decorate([
     property({ type: Number })
 ], HelixHeadlessToastItem.prototype, "duration", void 0);
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessToastItem.prototype, "tone", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessToastItem.prototype, "open", null);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessToastItem.prototype, "tone", void 0);
 HelixHeadlessToastItem = __decorate([
     customElement('helix-headless-toast-item')
 ], HelixHeadlessToastItem);

package/dist/toolbar/root/toolbar-root.js

@@ -4,25 +4,11 @@ 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, inlineStep } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, inlineStep, keyClaimed } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 const KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);
 const ownsTabStop = (node) => 'focusable' in node;
-const CARETLESS = new Set(['button', 'checkbox', 'color', 'file', 'image', 'reset', 'submit']);
-const claimed = (event) => {
-    if (event.defaultPrevented) {
-        return true;
-    }
-    const inner = event.composedPath()[0];
-    if (!(inner instanceof HTMLElement)) {
-        return false;
-    }
-    if (inner.isContentEditable || inner.localName === 'textarea' || inner.localName === 'select') {
-        return true;
-    }
-    return inner.localName === 'input' && !CARETLESS.has(inner.type);
-};
 let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
     constructor() {
         super(...arguments);
@@ -41,7 +27,7 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
             }
         };
         this.handleKeydown = (event) => {
-            if (!KEYS.has(event.key) || claimed(event)) {
+            if (!KEYS.has(event.key) || keyClaimed(event)) {
                 return;
             }
             const along = inlineStep(this, event.key);

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

@@ -348,6 +348,7 @@ export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
      * this should not be the thing to settle it.
      */
     private auditDescription;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;

package/dist/tooltip/root/tooltip-root.js

@@ -199,6 +199,12 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
             '`aria-describedby="<that id>"` to the element it names. Written in your own markup ' +
             'it survives server rendering, which is why this element will not write it for you.');
     }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.hasUpdated) {
+            this.bind();
+        }
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.unbind();

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

@@ -40,6 +40,16 @@ export declare class HelixHeadlessTour extends HelixElement {
      * Label for the control that goes back, handed to every stop.
      */
     backLabel: string;
+    /**
+     * Stop to start on, where nothing declared one.
+     */
+    defaultIndex: number;
+    /**
+     * Label for the control that goes on from the last stop.
+     */
+    doneLabel: string;
+    /** The stop being shown, whoever set it, and `undefined` until somebody has. */
+    private indexState;
     /**
      * Which stop the reader is on.
      *
@@ -54,16 +64,6 @@ export declare class HelixHeadlessTour extends HelixElement {
      */
     get index(): number;
     set index(next: number);
-    /**
-     * Stop to start on, where nothing declared one.
-     */
-    defaultIndex: number;
-    /** The stop being shown, whoever set it, and `undefined` until somebody has. */
-    private indexState;
-    /**
-     * Label for the control that goes on from the last stop.
-     */
-    doneLabel: string;
     /**
      * Accessible name for the run, such as "Getting started".
      */

package/dist/tour/root/tour-root.js

@@ -12,8 +12,8 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
         super(...arguments);
         this.backLabel = '';
         this.defaultIndex = 0;
-        this.indexState = undefined;
         this.doneLabel = '';
+        this.indexState = undefined;
         this.label = '';
         this.nextLabel = '';
         this.open = false;
@@ -34,7 +34,7 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
             }
         };
         this.handleKeydown = (event) => {
-            if (this.open && event.key === 'Escape') {
+            if (this.open && event.key === 'Escape' && !event.defaultPrevented) {
                 event.preventDefault();
                 this.skip();
             }
@@ -200,15 +200,15 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
 __decorate([
     property({ attribute: 'back-label' })
 ], HelixHeadlessTour.prototype, "backLabel", void 0);
-__decorate([
-    property({ type: Number })
-], HelixHeadlessTour.prototype, "index", null);
 __decorate([
     property({ attribute: 'default-index', type: Number })
 ], HelixHeadlessTour.prototype, "defaultIndex", void 0);
 __decorate([
     property({ attribute: 'done-label' })
 ], HelixHeadlessTour.prototype, "doneLabel", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessTour.prototype, "index", null);
 __decorate([
     property()
 ], HelixHeadlessTour.prototype, "label", void 0);

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

@@ -26,6 +26,7 @@ declare const HelixHeadlessTree_base: (new (...args: any[]) => import("@fusion.d
  * @event {HelixSelectEvent} helix-select - Fired when an item is chosen. Dispatched by the item and listened for here, because the tree is what a consumer holds a reference to. Cancelable: refusing it takes the decision and nothing moves.
  *
  * @csspart empty - Shown when there are no rows to show.
+ * @csspart live - The empty and loading lines again, in a region a screen reader hears when they change. Visually hidden in the styled tier.
  * @csspart loading - Shown while the rows are still on their way.
  * @csspart tree - The tree container.
  */

package/dist/tree/root/tree-root.js

@@ -176,7 +176,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
         }}
       ></slot>
       ${this.renderStatus(this.hasRows)}
-    </div>`;
+    </div>${this.renderLive(this.hasRows)}`;
     }
 };
 __decorate([