@fusion.dev/helix-headless 0.155.0 → 0.156.0

package/dist/command/root/command-root.js

@@ -8,18 +8,31 @@ import { customElement, HelixElement, HelixSelectEvent, MixinControllerOpen, mat
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
+import { optionsAmong } from '../../option/root/option-root.js';
 import '../../dialog/index.js';
 import '../../listbox/index.js';
+const says = (element, state) => {
+    try {
+        return element?.matches(`:state(${state})`) ?? false;
+    }
+    catch {
+        return false;
+    }
+};
 let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
         this.emptyText = 'No commands';
         this.filterDelay = 0;
         this.hotkey = 'mod+k';
+        this.inline = false;
+        this.items = undefined;
         this.label = 'Commands';
         this.loadError = '';
         this.loading = false;
         this.loadingText = 'Loading';
+        this.page = '';
+        this.trail = [];
         this.placeholder = 'Search commands';
         this.resultsLabel = '{count, plural, one {# command} other {# commands}}';
         this.footed = false;
@@ -28,6 +41,10 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
                 return;
             }
             event.preventDefault();
+            if (this.inline) {
+                this.searchField?.focus();
+                return;
+            }
             this.requestOpen(!this.open);
         };
         this.handleChange = (event) => {
@@ -37,10 +54,26 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
             if (!this.dispatchEvent(new HelixSelectEvent({ value }))) {
                 return;
             }
+            const opens = (this.listbox?.options ?? []).find((option) => option.value === value)?.opens;
+            if (opens) {
+                this.goTo([...this.trail, this.page], opens);
+                return;
+            }
             this.requestOpen(false);
         };
+        this.handleBack = (event) => {
+            if (event.key !== 'Backspace' ||
+                this.page === '' ||
+                event.composedPath()[0] !== this.searchField ||
+                this.searchField?.value !== '') {
+                return;
+            }
+            event.preventDefault();
+            const trail = [...this.trail];
+            this.goTo(trail, trail.pop() ?? '');
+        };
         this.handleAlternate = (event) => {
-            if (!(event.metaKey || event.ctrlKey) || !this.open) {
+            if (!(event.metaKey || event.ctrlKey) || !(this.open || this.inline)) {
                 return;
             }
             if (event instanceof KeyboardEvent && event.key !== 'Enter') {
@@ -74,11 +107,32 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
             }
             this.requestOpen(false);
         };
+        this.handleFilter = () => {
+            void Promise.resolve()
+                .then(() => this.listbox?.updateComplete)
+                .then(() => this.markStatus());
+        };
     }
     static { this.words = 'helix-command'; }
     get listbox() {
         return this.partNamed('listbox');
     }
+    get searchField() {
+        return (this.listbox?.renderRoot?.querySelector('[part="search-field"]') ?? null);
+    }
+    goTo(trail, page) {
+        this.trail = trail;
+        this.page = page;
+        this.listbox?.requestFilter('');
+        void this.updateComplete.then(() => this.searchField?.focus());
+    }
+    get listName() {
+        if (this.page === '') {
+            return this.label;
+        }
+        const opener = optionsAmong(this.knownChildren).find((option) => option.opens === this.page);
+        return opener?.text || this.label;
+    }
     get activeOption() {
         return (this.listbox?.options.find((option) => option.active && !option.hidden) ??
             this.querySelector('[data-active]'));
@@ -87,6 +141,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         super.connectedCallback();
         this.addEventListener('helix-select', this.swallowOptionSelect);
         this.addEventListener('keydown', this.handleAlternate, { capture: true });
+        this.addEventListener('keydown', this.handleBack);
         this.addEventListener('click', this.handleAlternate, { capture: true });
         document.addEventListener('keydown', this.handleHotkey);
     }
@@ -94,11 +149,16 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         super.disconnectedCallback();
         this.removeEventListener('helix-select', this.swallowOptionSelect);
         this.removeEventListener('keydown', this.handleAlternate, { capture: true });
+        this.removeEventListener('keydown', this.handleBack);
         this.removeEventListener('click', this.handleAlternate, { capture: true });
         document.removeEventListener('keydown', this.handleHotkey);
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        if (changed.get('open') === true && !this.open) {
+            this.trail = [];
+            this.page = '';
+        }
         if (this.childrenKnown) {
             this.footed = this.knownChildren.some((child) => child.slot === 'footer');
         }
@@ -107,15 +167,32 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         super.firstUpdated(changed);
         this.finishHydration();
     }
+    markStatus() {
+        const list = this.listbox;
+        const options = list?.options ?? [];
+        const shown = options.some((option) => !option.hidden);
+        const settled = list !== null && !this.loading;
+        this.toggleState('loading', this.loading);
+        this.toggleState('error', Boolean(this.loadError));
+        if (this.items !== undefined) {
+            this.toggleState('empty', settled && says(list, 'empty'));
+            this.toggleState('no-results', settled && says(list, 'no-results'));
+            return;
+        }
+        this.toggleState('empty', settled && !shown);
+        this.toggleState('no-results', settled && list.filter !== '' && options.length > 0 && !shown);
+    }
+    fills(name) {
+        return this.querySelector?.(`:scope > [slot="${name}"]`) != null;
+    }
     updated(changed) {
         super.updated?.(changed);
+        void (this.listbox?.updateComplete ?? Promise.resolve()).then(() => this.markStatus());
         if (!changed.has('open')) {
             return;
         }
         if (this.open) {
-            this.partNamed('listbox')
-                ?.renderRoot?.querySelector('[part="search-field"]')
-                ?.focus();
+            this.searchField?.focus();
         }
         else {
             this.listbox?.requestFilter('');
@@ -133,13 +210,25 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
             }
         }}
     >
-      <${this.tag('listbox')}
+      ${this.renderListbox()}
+      <!-- Handed on only while something fills it, as the list's slots are,
+           so an empty header draws nothing in the dialog. -->
+      <slot
+        name="header"
+        slot=${this.fills('header') ? 'header' : nothing}
+        @slotchange=${() => this.requestUpdate()}
+      ></slot>
+      ${this.renderFooter('footer')}
+    </${this.tag('dialog')}>`;
+    }
+    renderListbox() {
+        return html `<${this.tag('listbox')}
         part="listbox"
         exportparts="empty: listbox-empty, error: listbox-error, feedback: listbox-feedback,
           filter-icon: listbox-filter-icon, filter-mark: listbox-filter-mark, hint: listbox-hint,
           items: listbox-items, label: listbox-label, live: listbox-live, loading: listbox-loading,
           search: listbox-search, search-field: listbox-search-field"
-        aria-label=${this.label}
+        aria-label=${this.listName}
         empty-text=${this.emptyText}
         filter-delay=${this.filterDelay}
         filter-label=${this.placeholder}
@@ -149,12 +238,14 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         result-label=${this.resultLabel ?? ''}
         results-label=${this.resultsLabel}
         ?loading=${this.loading}
+        .items=${this.items}
         filterable
         @helix-before-change=${this.handleChange}
+        @helix-filter=${this.handleFilter}
         @change=${this.stopInner}
         @input=${this.stopInner}
       >
-        <slot></slot>
+        ${this.page === '' ? html `<slot></slot>` : html `<slot name=${`page:${this.page}`}></slot>`}
         <!-- Handed on with the text as the fallback, for the reason Combobox
              gives: the list's own fallback never shows behind a passed slot. -->
         <slot name="empty" slot="empty">${this.emptyText}</slot>
@@ -164,21 +255,30 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
              list's own fallback, which is no-results-text or empty-text. -->
         <slot
           name="no-results"
-          slot=${this.querySelector?.(':scope > [slot="no-results"]') ? 'no-results' : nothing}
+          slot=${this.fills('no-results') ? 'no-results' : nothing}
           @slotchange=${() => this.requestUpdate()}
         ></slot>
-      </${this.tag('listbox')}>
-      <div ?hidden=${!this.footed} part="footer" slot="footer">
         <slot
-          name="footer"
-          @slotchange=${(event) => {
+          name="filter-icon"
+          slot=${this.fills('filter-icon') ? 'filter-icon' : nothing}
+          @slotchange=${() => this.requestUpdate()}
+        ></slot>
+      </${this.tag('listbox')}>`;
+    }
+    renderFooter(slot) {
+        return html `<div ?hidden=${!this.footed} part="footer" slot=${slot}>
+      <slot
+        name="footer"
+        @slotchange=${(event) => {
             this.footed = event.target.assignedNodes().length > 0;
         }}
-        ></slot>
-      </div>
-    </${this.tag('dialog')}>`;
+      ></slot>
+    </div>`;
     }
     render() {
+        if (this.inline) {
+            return html `<slot name="header"></slot>${this.renderListbox()}${this.renderFooter(nothing)}`;
+        }
         return html `${this.renderDialog()}`;
     }
 };
@@ -192,6 +292,12 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessCommand.prototype, "hotkey", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessCommand.prototype, "inline", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessCommand.prototype, "items", void 0);
 __decorate([
     words,
     property()
@@ -209,6 +315,9 @@ __decorate([
 __decorate([
     property({ attribute: 'no-results-text' })
 ], HelixHeadlessCommand.prototype, "noResultsText", void 0);
+__decorate([
+    property()
+], HelixHeadlessCommand.prototype, "page", void 0);
 __decorate([
     words,
     property()

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

@@ -89,6 +89,11 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * scrolls within one screen of the end, once for each number of rows. Add the
  * next rows to `rows`, and set `loading` while they are on their way.
  *
+ * When a fetch fails, set `error-text`, such as "The files 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 controls inside the cells leave the tab order, so Tab moves past the
  * whole grid. A windowed table keeps the row holding focus drawn while the
  * rest scroll away.
@@ -129,6 +134,7 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  *
  * @slot - The columns, as `TableColumn` elements.
  * @slot empty - Content shown when there are no rows to show 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 footer - Content below the grid. It replaces the built-in pagination.
  * @slot loading - Content shown while the rows load, such as a spinner. Falls back to `loading-text`, which the live region still says.
  * @slot toolbar - Content above the grid, such as a search field or actions.
@@ -165,6 +171,7 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @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, with `reorderable-rows`. A column's grip moves the column itself. Hidden from assistive technology.
  * @csspart empty - Shown when there are no rows, because none arrived or the filter matches none. While rows are loading, the `loading` part is shown in its place.
+ * @csspart error - Shown after the rows while `error-text` is set, in place of the empty and loading lines.
  * @csspart footer - The region below the grid.
  * @csspart grip-head - The heading over the row grips, with `reorderable-rows`.
  * @csspart head - The row that holds the column headings. It is `display: contents`, so it takes no space.
@@ -205,6 +212,9 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @cssproperty --data-table-cell-align - The alignment of the cell's column: `start`, `center`, or `end`. Unset when the column sets none. The component writes it on each cell it draws, and the stylesheet reads it. `Table` sets `--table-cell-align` for the same purpose.
  * @cssproperty --data-table-level - How deep a row is in a tree grid, from 1. The component writes it on each row header cell, and the stylesheet indents by it.
  * @cssproperty --data-table-template - The column track list, worked out from the columns. The component writes it inline on the element that reads it, so setting it has no effect. Set a column's `width` to change it.
+ *
+ * @cssstate empty - While there are no rows to show and none are loading.
+ * @cssstate error - While `error-text` is set.
  */
 export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base {
     /**
@@ -286,6 +296,16 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
     descendingLabel: string;
     /** What screen readers hear when a row is dropped, with `reorderable-rows`. */
     droppedLabel: string;
+    /**
+     * The text shown and announced when the rows could not load, such as "The
+     * files did 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 estimated height of a row before it is drawn, in pixels.
      *
@@ -1119,6 +1139,11 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * after the last row and Enter or Space on it asks.
      */
     private renderMore;
+    /**
+     * The line shown while `error-text` is set: a row holding one cell, as the
+     * empty and loading lines are, since a grid holds rows and nothing else.
+     */
+    private renderError;
     protected render(): TemplateResult;
     /**
      * Listens on the host, not on the slot the columns are assigned to.

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

@@ -42,6 +42,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.defaultSort = '';
         this.descendingLabel = 'descending';
         this.droppedLabel = 'Dropped';
+        this.errorText = '';
         this.estimate = 32;
         this.gapLabel = 'Skip to page {page}';
         this.label = '';
@@ -913,6 +914,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             ['toolbar', true],
             ['footer', true],
             ['empty', true],
+            ['error', true],
             ['loading', true],
         ]) {
             const slot = root.querySelector(`slot[name="${name}"]`);
@@ -980,6 +982,8 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.internals.ariaColCount =
             this.counts.columns === undefined ? null : String(this.counts.columns);
         this.markEmpty();
+        this.toggleState('error', this.errorText !== '');
+        this.toggleState('empty', !this.loading && !this.hasRows);
         this.assign();
         this.announceSort();
         this.quietControls();
@@ -1173,10 +1177,13 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
       >
     </div>`;
     }
+    renderError() {
+        return html `<p part="error" role="row"><span role="gridcell"><slot name="error">${this.errorText}</slot></span></p>`;
+    }
     render() {
         const { available, matched, page } = this.view;
         this.drawnPage = page;
-        this.moreDrawn = this.loadMore && !this.loading && page.length > 0;
+        this.moreDrawn = this.loadMore && !this.loading && this.errorText === '' && page.length > 0;
         const rows = this.windowOf(page);
         const kept = this.keptRow(page);
         const headStop = this.currentRow(page) === -1;
@@ -1206,9 +1213,9 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             : html `<slot name="columns" @slotchange=${this.handleSlotChange}></slot>`}
         </div>
         ${this.renderSpacer('before', kept)}${this.renderRows(rows, page)}${this.renderSpacer('after', kept)}
-        ${this.renderMore(page)}${this.renderStatus(filled, 'gridcell')}
+        ${this.renderMore(page)}${this.errorText === '' ? this.renderStatus(filled, 'gridcell') : this.renderError()}
       </div>
-      ${this.renderLive(filled)}
+      ${this.errorText === '' ? this.renderLive(filled) : html `<span part="live" role="status">${this.errorText}</span>`}
       <div part="footer">
         <slot name="footer"></slot>
         ${this.paginated
@@ -1547,6 +1554,9 @@ __decorate([
     words,
     property({ attribute: 'dropped-label' })
 ], HelixHeadlessDataTable.prototype, "droppedLabel", void 0);
+__decorate([
+    property({ attribute: 'error-text' })
+], HelixHeadlessDataTable.prototype, "errorText", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDataTable.prototype, "estimate", void 0);

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

@@ -27,12 +27,37 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * month, a day and a year in the order the locale writes them, each set with
  * digits or the arrow keys. Alt+Down opens the calendar from a segment.
  *
+ * Text that is not a date gives the form an empty value, as a native date
+ * field does, and `value` keeps the text so it can be corrected.
+ *
+ * **Keyboard.** The field is one tab stop, or each segment is with
+ * `segmented`, and the trigger is one more.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down | In the text field, opens the calendar with focus on the chosen day. |
+ * | Alt with Down | Opens the calendar, from the text field or a segment. |
+ * | Enter | In the text field, takes the typed date and submits the form, as a native field does. |
+ * | Escape | Closes the calendar and puts focus back in the field. |
+ * | Tab | In the open calendar, moves between its controls. Out of the field, closes it. |
+ * | Up, Down on a segment | Steps the segment by one, round from its last value to its first. |
+ * | Page Up, Page Down on a segment | Steps by a page: a week of days, two months, or five years. |
+ * | Home, End on a segment | Goes to the segment's first or last value. |
+ * | Digits on a segment | Fill it, and move to the next once it can take no more. |
+ * | Backspace, Delete on a segment | Empty the segment. |
+ * | Left, Right on a segment | Move to the previous or the next segment, along the line of text. |
+ *
+ * In the calendar, the keys are `DatePicker`'s: the arrows move by a day or a
+ * week, Page Up and Page Down by a month, with Shift by a year, and Home and
+ * End to the start and the end of the week.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
  * @aliases DatePicker, DateField, InputDate
  * @documentation https://fusion.dev/helix/components/date-input
  *
+ * @slot end - Content after the date, before the trigger, such as a clear button.
  * @slot feedback - The error message under the field.
  * @slot hint - The help text under the field.
  * @slot label - The label, for content richer than the `label` text.
@@ -40,6 +65,7 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @slot panel-footer - Content in the panel under the calendar, such as a note or an action.
  * @slot panel-header - Content in the panel above the calendar, such as a heading or a shortcut.
  * @slot previous-icon - The icon on the calendar's previous month control.
+ * @slot start - Content before the date, such as an icon.
  * @slot trigger - The icon on the button that opens the calendar.
  *
  * @event {Event} change - Fired after the value changes.
@@ -384,7 +410,12 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
     /** Takes one date back out of the set. */
     private readonly removeDate;
     private readonly handleCalendarChange;
-    /** Each date, where `mode` holds several, sent one entry each. */
+    /**
+     * Each date, where `mode` holds several, sent one entry each.
+     *
+     * One date that is text and no date, such as `August 5`, is sent as an empty
+     * entry, as a native date field sends a date it cannot read.
+     */
     protected get answers(): readonly string[] | undefined;
     /** What is wrong with the dates, which the text input cannot say. */
     protected validate(): string | readonly [keyof ValidityStateFlags, string];

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

@@ -175,7 +175,11 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         return Math.max(0, dates(this.value).length - this.shownDates.length);
     }
     get answers() {
-        return this.mode === undefined ? undefined : dates(this.value);
+        if (this.mode !== undefined) {
+            return dates(this.value);
+        }
+        const text = this.value.trim();
+        return text === '' || isDateValue(text) ? undefined : [''];
     }
     validate() {
         const held = dates(this.value);
@@ -314,10 +318,12 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
     render() {
         return html `${this.renderLabel()}
       <div part="field" @keydown=${this.handleKeydown}>
+        <slot name="start"></slot>
         ${this.mode === 'multiple'
             ? this.renderTokenRow(this.shownDates.map((date) => this.renderTag(date)), this.restCount)
             : nothing}
         ${this.segmentsShown ? this.renderSegments() : this.renderControl()}
+        <slot name="end"></slot>
         <button
           part="trigger"
           type="button"

package/dist/element-events.generated.js

@@ -141,6 +141,7 @@ registerElementEvents({
         'helix-action',
         'helix-before-change',
         'helix-before-reorder',
+        'helix-load-more',
         'helix-reorder',
     ],
     'helix-headless-list-item': ['helix-action'],

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' })