@fusion.dev/helix-headless 0.154.0 → 0.156.0

package/dist/date-picker/root/date-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 { addDays, addMonths, valueAsDate as asDate, barredBy, calendarLocale, customElement, formatWords, dateAsValue as fromDate, HelixFormElement, HelixNavigateEvent, handedLocale, hostAria, inlineStep, commaList as list, localToday, MixinControllerValue, MixinPickerFeedback, monthOf, monthOut, periodCells, periodKey, reportValues, requestChange, sameMonth, weekStartOf, words, wordsLocale, YEARS_SHOWN, yearOut, yearPageOf, } from '@fusion.dev/helix-core';
+import { addDays, addMonths, valueAsDate as asDate, barredBy, calendarLocale, customElement, formatWords, dateAsValue as fromDate, HelixFormElement, HelixNavigateEvent, handedLocale, hostAria, inlineStep, commaList as list, MixinControllerValue, MixinPickerFeedback, MONTH_CALENDARS, monthOf, monthOut, monthSystem, periodCells, periodKey, reportValues, requestChange, todayIn, weekendOf, weekStartOf, words, wordsLocale, YEARS_SHOWN, yearOut, yearPageOf, } from '@fusion.dev/helix-core';
 import { caretLeft, caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -46,7 +46,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         this.focused = '';
         this.choosing = false;
         this.handleKeydown = (event) => {
-            if (this.view !== 'day') {
+            if (this.view !== 'day' && !this.ownMonths) {
                 this.handlePeriodKeydown(event);
                 return;
             }
@@ -80,7 +80,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
             }
             else {
                 const step = event.key === 'PageUp' ? -1 : 1;
-                this.moveTo(addMonths(from, event.shiftKey ? step * 12 : step));
+                this.moveTo(this.system.add(from, event.shiftKey ? step * 12 : step));
             }
             event.preventDefault();
         };
@@ -105,6 +105,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         this.required = false;
         this.step = 1;
         this.stepMismatchMessage = 'Choose one of the dates the calendar offers.';
+        this.timeZone = '';
         this.unavailableMessage = 'Choose a date that is available.';
         this.valueMissingMessage = 'Choose a date.';
         this.view = 'day';
@@ -115,7 +116,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         return wordsLocale(this);
     }
     get month() {
-        return this.monthState ?? (this.defaultMonth || fromDate(this.derivedMonth).slice(0, 7));
+        return this.monthState ?? (this.defaultMonth || this.system.key(this.derivedMonth));
     }
     set month(next) {
         const previous = this.month;
@@ -125,6 +126,9 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
     get selected() {
         return list(this.value);
     }
+    get weekend() {
+        return handedLocale(this) === '' ? [0, 6] : weekendOf(this.language);
+    }
     get weekStart() {
         if (this.firstDayOfWeek !== undefined && Number.isFinite(this.firstDayOfWeek)) {
             return ((Math.floor(this.firstDayOfWeek) % 7) + 7) % 7;
@@ -147,24 +151,31 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         return this.selected.includes(iso);
     }
     get shown() {
-        const explicit = /^(\d{4})-(\d{2})$/.exec(this.monthState ?? this.defaultMonth);
+        const explicit = /^(\d{4})-(\d{2})(?:-(\d{2}))?$/.exec(this.monthState ?? this.defaultMonth);
         if (explicit) {
-            return firstOf(Number(explicit[1]), Number(explicit[2]) - 1);
+            const first = firstOf(Number(explicit[1]), Number(explicit[2]) - 1);
+            return this.system.start(explicit[3] ? addDays(first, Number(explicit[3]) - 1) : first);
         }
         return this.derivedMonth;
     }
+    get system() {
+        return monthSystem(this.calendar);
+    }
+    get ownMonths() {
+        return MONTH_CALENDARS.includes(this.calendar ?? '');
+    }
     get derivedMonth() {
-        const from = asDate(this.selected[0] ?? '') ?? asDate(localToday()) ?? new Date();
-        return firstOf(from.getUTCFullYear(), from.getUTCMonth());
+        const from = asDate(this.selected[0] ?? '') ?? asDate(todayIn(this.timeZone)) ?? new Date();
+        return this.system.start(from);
     }
     get anchor() {
         const shown = this.shown;
         for (const candidate of [
             asDate(this.focused),
             asDate(this.selected[0] ?? ''),
-            asDate(localToday()),
+            asDate(todayIn(this.timeZone)),
         ]) {
-            if (candidate && sameMonth(candidate, shown)) {
+            if (candidate && this.system.same(candidate, shown)) {
                 return candidate;
             }
         }
@@ -198,17 +209,17 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         return date;
     }
     get atStart() {
-        return asDate(this.min) !== null && monthOf(addMonths(this.shown, -1)) < this.min.slice(0, 7);
+        return asDate(this.min) !== null && fromDate(addDays(this.shown, -1)) < this.min;
     }
     get atEnd() {
         return (asDate(this.max) !== null &&
-            monthOf(addMonths(this.shown, this.monthCount)) > this.max.slice(0, 7));
+            fromDate(this.system.start(this.system.add(this.shown, this.monthCount))) > this.max);
     }
     show(date) {
         if (this.isDisabled) {
             return;
         }
-        const next = monthOf(date);
+        const next = this.system.key(date);
         if (next === this.month) {
             return;
         }
@@ -437,7 +448,9 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         return Math.max(1, Math.floor(this.months) || 1);
     }
     get formats() {
-        const language = calendarLocale(this.language, this.calendar);
+        const language = this.ownMonths
+            ? `${new Intl.Locale(this.language || new Intl.DateTimeFormat().resolvedOptions().locale, { calendar: this.calendar ?? 'gregory' })}`
+            : calendarLocale(this.language, this.calendar);
         if (this.cachedFormats?.locale === language) {
             return this.cachedFormats;
         }
@@ -450,6 +463,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
             monthName: utc({ month: 'short' }),
             monthYear: utc({ month: 'short', year: 'numeric' }),
             weekday: utc({ weekday: 'short' }),
+            weekdayName: utc({ weekday: 'long' }),
             year: utc({ year: 'numeric' }),
         };
         this.cachedFormats = built;
@@ -470,12 +484,13 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
     </slot>`;
     }
     renderMonth(month, index) {
-        const { full, heading: named, weekday } = this.formats;
+        const { full, heading: named, weekday, weekdayName } = this.formats;
         const heading = named.format(month);
         const weeks = this.weeksOf(month);
         const anchor = fromDate(this.anchor);
-        const today = localToday();
+        const today = todayIn(this.timeZone);
         const range = this.range;
+        const weekend = this.weekend;
         const first = index === 0;
         const last = index === this.monthCount - 1;
         return html `<div part="month">
@@ -486,7 +501,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
                 type="button"
                 aria-label=${this.previousLabel}
                 ?disabled=${this.isDisabled || this.atStart}
-                @click=${() => this.show(addMonths(this.shown, -1))}
+                @click=${() => this.show(this.system.add(this.shown, -1))}
               >
                 ${this.renderPreviousMark()}
               </button>`
@@ -501,7 +516,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
                 type="button"
                 aria-label=${this.nextLabel}
                 ?disabled=${this.isDisabled || this.atEnd}
-                @click=${() => this.show(addMonths(this.shown, 1))}
+                @click=${() => this.show(this.system.add(this.shown, 1))}
               >
                 ${this.renderNextMark()}
               </button>`
@@ -515,14 +530,16 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         data-unset=${this.value === '' ? '' : nothing}
       >
         <div part="week" role="row">
-          ${weeks[0]?.map((date) => html `<span part="weekday" role="columnheader">${weekday.format(date)}</span>`)}
+          ${weeks[0]?.map((date) => html `<span part="weekday" role="columnheader" aria-label=${weekdayName.format(date)}
+                >${weekday.format(date)}</span
+              >`)}
         </div>
         ${weeks.map((week) => html `<div part="week" role="row">
             ${week.map((date) => {
             const iso = fromDate(date);
             const disabled = this.barred(date);
             const selected = this.isSelected(iso);
-            const outside = !sameMonth(date, month);
+            const outside = !this.system.same(date, month);
             const start = !outside && range !== null && iso === range[0];
             const end = !outside && range !== null && iso === range[1];
             const middle = !outside && range !== null && iso > range[0] && iso < range[1];
@@ -538,10 +555,11 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
                 data-range-middle=${middle ? '' : nothing}
                 data-range-start=${start ? '' : nothing}
                 data-today=${iso === today ? '' : nothing}
+                data-weekend=${weekend.includes(date.getUTCDay()) ? '' : nothing}
                 tabindex=${!outside && iso === anchor && !this.isDisabled ? '0' : '-1'}
                 @click=${outside ? nothing : () => this.select(date)}
                 ><span
-                  part="day${!outside && selected && !middle ? ' day-selected' : ''}${iso === today ? ' day-today' : ''}${outside ? ' day-outside' : ''}${disabled ? ' day-disabled' : ''}"
+                  part="day${!outside && selected && !middle ? ' day-selected' : ''}${iso === today ? ' day-today' : ''}${outside ? ' day-outside' : ''}${disabled ? ' day-disabled' : ''}${weekend.includes(date.getUTCDay()) ? ' day-weekend' : ''}"
                   >${this.renderDay(date, outside)}</span
                 ></span
               >`;
@@ -551,10 +569,11 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
     </div>`;
     }
     renderDay(date, outside) {
-        return this.dayContent && !outside ? this.dayContent(fromDate(date)) : date.getUTCDate();
+        return this.dayContent && !outside ? this.dayContent(fromDate(date)) : this.system.day(date);
     }
     renderHeadingText(text, label) {
         const steps = this.maxView !== undefined &&
+            !this.ownMonths &&
             (this.view === 'day' || (this.view === 'month' && this.maxView === 'year'));
         if (!steps) {
             return text;
@@ -580,7 +599,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
             min: this.min,
             page: this.periodYear,
             shown: this.shown,
-            today: localToday(),
+            today: todayIn(this.timeZone),
             view: years ? 'year' : 'month',
         }).map(({ at, chosen, current, first, out }) => {
             const words = years ? yearName.format(first) : monthName.format(first);
@@ -625,17 +644,18 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
     </div>`;
     }
     render() {
-        if (this.view !== 'day') {
-            return html `<div part="months" style="--date-picker-column-count: 1">
-          ${this.renderPeriods()}
-        </div>
-        ${this.renderPickerFeedback()}`;
+        if (this.view !== 'day' && !this.ownMonths) {
+            return html `<slot name="header"></slot>
+        <div part="months" style="--date-picker-column-count: 1">${this.renderPeriods()}</div>
+        <slot name="footer"></slot>${this.renderPickerFeedback()}`;
         }
         const shown = this.shown;
         const count = this.monthCount;
-        return html `<div part="months" style="--date-picker-column-count: ${Math.min(count, 2)}">
-      ${Array.from({ length: count }, (_, index) => this.renderMonth(addMonths(shown, index), index))}
-    </div>${this.renderPickerFeedback()}`;
+        return html `<slot name="header"></slot>
+      <div part="months" style="--date-picker-column-count: ${Math.min(count, 2)}">
+        ${Array.from({ length: count }, (_, index) => this.renderMonth(this.system.add(shown, index), index))}
+      </div>
+      <slot name="footer"></slot>${this.renderPickerFeedback()}`;
     }
     get valueAsDate() {
         return asDate(this.value);
@@ -758,6 +778,9 @@ __decorate([
     words,
     property({ attribute: 'step-mismatch-message' })
 ], HelixHeadlessDatePicker.prototype, "stepMismatchMessage", void 0);
+__decorate([
+    property({ attribute: 'time-zone' })
+], HelixHeadlessDatePicker.prototype, "timeZone", void 0);
 __decorate([
     words,
     property({ attribute: 'unavailable-message' })

package/dist/element-events.generated.js

@@ -6,6 +6,7 @@ registerElementEvents({
     'helix-headless-area-chart': ['helix-reading-change', 'helix-reading-press'],
     'helix-headless-avatar': ['error', 'load'],
     'helix-headless-bar-chart': ['helix-reading-change', 'helix-reading-press'],
+    'helix-headless-breadcrumb': ['helix-select'],
     'helix-headless-button': ['helix-press'],
     'helix-headless-button-group': ['change', 'helix-before-change'],
     'helix-headless-callout': ['helix-dismiss'],
@@ -140,6 +141,7 @@ registerElementEvents({
         'helix-action',
         'helix-before-change',
         'helix-before-reorder',
+        'helix-load-more',
         'helix-reorder',
     ],
     'helix-headless-list-item': ['helix-action'],
@@ -241,7 +243,7 @@ registerElementEvents({
     'helix-headless-step': ['helix-select'],
     'helix-headless-steps': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-headless-switch': ['change', 'helix-before-toggle', 'input'],
-    'helix-headless-tab': ['helix-select'],
+    'helix-headless-tab': ['helix-dismiss', 'helix-select'],
     'helix-headless-table': [
         'helix-before-reorder',
         'helix-reorder',

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

@@ -39,6 +39,7 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * @documentation https://fusion.dev/helix/components/graph
  *
  * @slot - The renderer's box, which the drawing is made in.
+ * @slot empty - What the panel shows when the list holds no notes. Defaults to `empty-label`.
  * @slot filter-icon - The icon in the search field. Defaults to a magnifying glass.
  * @slot footer - Content below the graph.
  * @slot fullscreen-icon - Replaces the glyph inside the fullscreen button.
@@ -65,6 +66,7 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * @csspart body - The drawing beside the list, or above it where the frame is narrow.
  * @csspart controls - The group the pan and zoom buttons sit in.
  * @csspart count - How many notes the list holds, which a search narrows, at the end of the search bar.
+ * @csspart empty - The box in place of the list when it holds no notes, holding the `empty` slot.
  * @csspart filter-icon - The icon beside the search field.
  * @csspart filter-mark - The default icon beside the search field, shown when none is slotted.
  * @csspart footer - The strip below the graph.
@@ -135,6 +137,11 @@ export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
      * shows every note. The list holds what the drawing shows.
      */
     depth?: number;
+    /**
+     * What the panel shows when the list holds no notes: the graph has none, or
+     * a search or the legend hid them all. A slotted `empty` replaces it.
+     */
+    emptyLabel: string;
     /**
      * The graph's name where `label` is empty and the host has no
      * `aria-label`.
@@ -180,6 +187,12 @@ export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
     noPanel: boolean;
     /** The list's name, read by screen readers, and the name of the button that opens it with `no-panel`. */
     notesLabel: string;
+    /**
+     * What a screen reader calls the graph in place of its role, after its
+     * name: "Research notes, graph". Said only where the graph has a name of its
+     * own, since the fallback name is the same word. Empty leaves the role.
+     */
+    roleLabel: string;
     /** The search field's name. */
     searchLabel: string;
     /** How the selected note is described in the list. */

package/dist/graph/root/graph-root.js

@@ -17,6 +17,7 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
         this.activateHintLabel = 'Press the graph to use it';
         this.controlsLabel = 'Graph controls';
         this.countLabel = '{count, plural, one {# note} other {# notes}}';
+        this.emptyLabel = 'No notes';
         this.fallbackLabel = 'Graph';
         this.hiddenGroups = [];
         this.label = '';
@@ -33,6 +34,7 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
         this.nodes = [];
         this.noPanel = false;
         this.notesLabel = 'Notes';
+        this.roleLabel = 'graph';
         this.searchLabel = 'Find a note';
         this.selectedLabel = 'Selected';
         this.twoFingerHintLabel = 'Use two fingers to move the graph';
@@ -409,6 +411,8 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
       part="region"
       role="group"
       aria-label=${this.label || this.getAttribute?.('aria-label') || this.fallbackLabel}
+      aria-roledescription=${(this.label || this.getAttribute?.('aria-label')) && this.roleLabel ? this.roleLabel : nothing}
+      aria-keyshortcuts="ArrowUp ArrowDown ArrowLeft ArrowRight Plus Minus"
       tabindex="0"
       @focusin=${this.idle.stir}
       @keydown=${this.handleKeydown}
@@ -454,6 +458,7 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
             data-scroller
             aria-label=${this.notesLabel}
             aria-activedescendant=${cursor}
+            aria-keyshortcuts="ArrowUp ArrowDown Home End PageUp PageDown Enter Space"
             @keydown=${this.handleListKeydown}
             @scroll=${() => this.virtualize.measure()}
           >
@@ -461,6 +466,9 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
             ${this.renderRows()}
             <div part="after" role="presentation" style="block-size: ${after}px"></div>
           </div>
+          ${this.entries.length === 0
+            ? html `<div part="empty"><slot name="empty">${this.emptyLabel}</slot></div>`
+            : nothing}
         </div>
       </div>
       <div part="footer">
@@ -485,6 +493,10 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessGraph.prototype, "depth", void 0);
+__decorate([
+    words,
+    property({ attribute: 'empty-label' })
+], HelixHeadlessGraph.prototype, "emptyLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'fallback-label' })
@@ -543,6 +555,10 @@ __decorate([
     words,
     property({ attribute: 'notes-label' })
 ], HelixHeadlessGraph.prototype, "notesLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'role-label' })
+], HelixHeadlessGraph.prototype, "roleLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'search-label' })

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

@@ -69,6 +69,23 @@ import { type ListSelectionBehavior, type ListSelectionMode } from '../selection
  * no `start` counts down from the number of rows, which a server cannot know,
  * so served markup counts from one until the list runs.
  *
+ * **An empty list.** Set `empty-label`, or put your own content in the `empty`
+ * slot, for a row shown while the list has no rows and none are loading, such
+ * as "No files yet" and a link to add one. Without either, an empty list shows
+ * nothing. The list takes the `empty` state while it has no rows, whatever it
+ * shows.
+ *
+ * **Loading more.** `load-more` sends `helix-load-more` once the end of the
+ * list comes within a screen of view, in the box that scrolls it or the page,
+ * once for each number of rows: add rows and it can send it again. While you
+ * fetch, set `loading`: the list is busy, and a row after the last says
+ * "Loading more" (`loading-label`, or your own content in the `loading`
+ * slot). The list asks for nothing while `loading` is set.
+ *
+ * An interactive list with no name is reported once in a development build,
+ * since a screen reader announces it as a grid and nothing more. Name it with
+ * `label` or `aria-label`.
+ *
  * @since 0.1.0
  * @status stable
  * @category data
@@ -76,18 +93,26 @@ import { type ListSelectionBehavior, type ListSelectionMode } from '../selection
  * @documentation https://fusion.dev/helix/components/list
  *
  * @slot - The rows.
+ * @slot empty - Content for the row shown while the list has no rows and none are loading. Falls back to `empty-label`.
+ * @slot loading - Content for the row after the last while `loading` is set. Falls back to `loading-label`.
  *
  * @event {Event} change - Fired once a press has changed which rows are selected.
  * @event {HelixActionEvent} helix-action - Sent from a row when the reader acts on it: Enter, or a press in a list that selects nothing. Read the row from `target`. A row with `href` follows its link instead.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired before a press changes which rows are selected, with the `value` it would leave. Cancelable.
  * @event {HelixBeforeReorderEvent} helix-before-reorder - Fired when a row is dropped at a new place, in a `reorderable` list, with every row's value in the new order. Cancelable: cancel it to keep the row where it is.
+ * @event {HelixLoadMoreEvent} helix-load-more - Fired, in a list with `load-more`, when the end of the list comes within a screen of view, once for each number of rows.
  * @event {HelixReorderEvent} helix-reorder - Fired after `helix-before-reorder` when nobody canceled it. Move your rows to the order in `keys`. Cancelable: cancel it to say the move did not happen.
  *
  * @csspart drag-preview - A copy of the row a pointer drags, which follows the pointer in the top layer until the row is let go, in a `reorderable` list. Hidden from assistive technology.
+ * @csspart empty - The row shown while the list has no rows and none are loading, where `empty-label` or the `empty` slot gives it content. A grid row with one cell in a list that selects.
  * @csspart live - The region that says each step of a move to screen readers, in a `reorderable` list. Drawn from the first move. Visually hidden in the styled tier.
+ * @csspart loading - The row after the last while `loading` is set. A grid row with one cell in a list that selects.
  *
  * @cssproperty --list-first - The number of the first row, written where `start` or `reversed` moves it.
  * @cssproperty --list-step - What each row adds to the number before it: `1`, or `-1` where `reversed`.
+ *
+ * @cssstate empty - While the list has no rows.
+ * @cssstate loading - While `loading` is set.
  */
 export declare class HelixHeadlessList extends HelixElement {
     /**
@@ -102,6 +127,11 @@ export declare class HelixHeadlessList extends HelixElement {
     canceledLabel: string;
     /** What screen readers hear when a row is dropped, in a `reorderable` list. */
     droppedLabel: string;
+    /**
+     * The text of the row shown while the list has no rows, where the `empty`
+     * slot is empty. Empty, the default, shows no row.
+     */
+    emptyLabel: string;
     /**
      * The kind of list, which follows from the content.
      *
@@ -129,6 +159,18 @@ export declare class HelixHeadlessList extends HelixElement {
      * The list's name, read by screen readers.
      */
     label: string;
+    /**
+     * Marks the list as busy fetching more rows, and draws a row after the last
+     * that says so. The list asks for no more while it is set.
+     */
+    loading: boolean;
+    /** The text of the row drawn while `loading` is set, where the `loading` slot is empty. */
+    loadingLabel: string;
+    /**
+     * Sends `helix-load-more` once the end of the list comes within a screen of
+     * view, so you can add the next rows as a reader nears them.
+     */
+    loadMore: boolean;
     /**
      * What screen readers hear each time an arrow key moves a held row, in a
      * `reorderable` list. `{name}` is the row's words, `{position}` the place it
@@ -185,7 +227,7 @@ export declare class HelixHeadlessList extends HelixElement {
      */
     type?: '1' | 'a' | 'A' | 'i' | 'I';
     /**
-     * The selected rows' values, separated by commas, in a list that selects.
+     * The selected rows' values, separated by commas with no spaces, such as `a,c`, in a list that selects.
      *
      * Set it to start with rows selected. A row's value is its `value`, or its
      * words where it has none.
@@ -303,6 +345,37 @@ export declare class HelixHeadlessList extends HelixElement {
      */
     private get numbers();
     protected render(): TemplateResult;
+    /**
+     * The row shown while the list has no rows: a list item, or a grid row with
+     * one cell in a list that selects. Drawn only once the children are known,
+     * so a server and a hydrating render never claim an empty list, and hidden
+     * while it has neither `empty-label` nor content in the `empty` slot.
+     */
+    private drawEmpty;
+    /**
+     * The row after the last while `loading` is set: a list item, or a grid row
+     * with one cell in a list that selects. It is not one of the rows, so it
+     * carries no value and a key never lands on it.
+     */
+    private drawLoading;
+    /** Watches the end of a `load-more` list coming near the box that scrolls it. */
+    private endWatcher;
+    /** The end being watched, so a new one is watched again. */
+    private watchedEnd;
+    /** Whether the end of the list was in reach when last measured. */
+    private endInView;
+    /** The number of rows `helix-load-more` was last sent for. */
+    private askedAt;
+    /**
+     * Starts or stops watching the end of the list. The box it is measured
+     * against is the one that scrolls the list, or the page, and a screen of
+     * room is added below it, so the next rows are asked for before a reader
+     * reaches the last.
+     */
+    private watchEnd;
+    /** Sends `helix-load-more`, once for each number of rows, and never while loading. */
+    private askForMore;
+    private readonly handleEmptyChange;
     private readonly handleSlotChange;
 }
 declare global {