@fusion.dev/helix-headless 0.155.0 → 0.157.0

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, deepActiveElement, HelixElement, HelixSelectEvent, slotFilled, slotNamed, } from '@fusion.dev/helix-core';
+import { auditName, customElement, deepActiveElement, HelixElement, HelixSelectEvent, hostAria, slotFilled, slotNamed, } from '@fusion.dev/helix-core';
 import { caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -13,11 +13,16 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
     constructor() {
         super(...arguments);
         this.disabled = false;
+        this.download = false;
         this.focusable = false;
+        this.href = '';
+        this.listed = false;
         this.isDrilldownItem = true;
         this.onPage = true;
         this.onPath = false;
+        this.rel = '';
         this.showingPage = false;
+        this.target = '';
         this.value = '';
         this.page = false;
         this.description = false;
@@ -30,9 +35,23 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
             this.description = slotFilled(slotNamed(this.renderRoot, 'description'));
             this.end = slotFilled(slotNamed(this.renderRoot, 'end'));
         };
+        this.handleClick = (event) => {
+            if (!this.choose() && this.linked) {
+                event.preventDefault();
+            }
+        };
+        this.handleLinkKeydown = (event) => {
+            if (event.key !== ' ') {
+                return;
+            }
+            event.preventDefault();
+            event.currentTarget.click();
+        };
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        const item = this.listed && this.onPage && !this.showingPage && !this.onPath;
+        hostAria(this.internals, { role: item ? 'listitem' : '' });
         if (this.childrenKnown) {
             const named = (name) => this.knownChildren.some((child) => child.slot === name);
             this.page = named('page');
@@ -40,6 +59,12 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
             this.end = named('end');
         }
     }
+    updated(changed) {
+        super.updated(changed);
+        if (this.partNamed('item')) {
+            auditName(this, () => this.partNamed('item'), 'Give the row words in its default slot, or a label on the icon it holds.');
+        }
+    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
@@ -61,10 +86,16 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
         return this.active;
     }
     select() {
+        this.choose();
+    }
+    choose() {
         if (this.disabled) {
-            return;
+            return false;
         }
-        this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
+        return this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
+    }
+    get linked() {
+        return this.href !== '' && !this.disabled && !this.page;
     }
     renderMark() {
         return html `<slot name="chevron" aria-hidden="true"
@@ -80,18 +111,7 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
         if (!this.onPage) {
             return nothing;
         }
-        return html `<button
-      part="item"
-      type="button"
-      role="menuitem"
-      aria-describedby=${this.describedBy}
-      aria-disabled=${this.disabled ? 'true' : nothing}
-      aria-haspopup=${this.page ? 'menu' : nothing}
-      tabindex=${this.focusable ? '0' : '-1'}
-      ?data-described=${this.description}
-      @click=${() => this.select()}
-    >
-      <slot name="start"></slot>
+        const inside = html `<slot name="start"></slot>
       <span part="label"><slot></slot></span>
       <slot
         id="description"
@@ -101,26 +121,66 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
         @slotchange=${this.readWords}
       ></slot>
       <slot id="end" name="end" aria-hidden="true" @slotchange=${this.readWords}></slot>
-      ${this.page ? this.renderMark() : nothing}
-    </button>
+      ${this.page ? this.renderMark() : nothing}`;
+        const row = this.linked
+            ? html `<a
+          part="item"
+          href=${this.href}
+          target=${this.target || nothing}
+          rel=${this.rel || nothing}
+          ?download=${this.download}
+          role=${this.listed ? nothing : 'menuitem'}
+          aria-describedby=${this.describedBy}
+          tabindex=${this.focusable ? '0' : '-1'}
+          ?data-described=${this.description}
+          @click=${this.handleClick}
+          @keydown=${this.handleLinkKeydown}
+        >${inside}</a>`
+            : html `<button
+          part="item"
+          type="button"
+          role=${this.listed ? nothing : 'menuitem'}
+          aria-describedby=${this.describedBy}
+          aria-disabled=${this.disabled ? 'true' : nothing}
+          aria-haspopup=${this.page && !this.listed ? 'menu' : nothing}
+          tabindex=${this.focusable ? '0' : '-1'}
+          ?data-described=${this.description}
+          @click=${this.handleClick}
+        >${inside}</button>`;
+        return html `${row}
     <div hidden><slot name="page" @slotchange=${this.readPage}></slot></div>`;
     }
 };
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessDrilldownItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessDrilldownItem.prototype, "download", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessDrilldownItem.prototype, "focusable", void 0);
+__decorate([
+    property()
+], HelixHeadlessDrilldownItem.prototype, "href", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessDrilldownItem.prototype, "listed", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessDrilldownItem.prototype, "onPage", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessDrilldownItem.prototype, "onPath", void 0);
+__decorate([
+    property()
+], HelixHeadlessDrilldownItem.prototype, "rel", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessDrilldownItem.prototype, "showingPage", void 0);
+__decorate([
+    property()
+], HelixHeadlessDrilldownItem.prototype, "target", void 0);
 __decorate([
     property()
 ], HelixHeadlessDrilldownItem.prototype, "value", void 0);

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

@@ -20,6 +20,11 @@ declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fus
  * and reads the rest from the DOM. The behavior lives in `DrilldownController`,
  * which `Menu` shares.
  *
+ * **`page` is the page showing**, as the `value` of the row that opens it,
+ * and empty on the top page. Set it to show a page, such as one a link to a
+ * settings screen names. A reader's move updates it, and `helix-navigate`
+ * comes first, so you can refuse the move or take it yourself.
+ *
  * After each move the host carries `data-direction`, `forward` into a page or
  * `back` out of one, and records `:state(forward)` or `:state(back)`, so a
  * stylesheet can slide the new page in from the side the reader is going. Both
@@ -27,13 +32,25 @@ declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fus
  * page, two moves the same way included. The styled tier slides the page and
  * swaps it at once under `prefers-reduced-motion`.
  *
- * Keys, on a row: Up and Down Arrow move between the rows, Home and End go to
- * the first and the last, and a typed letter moves to the next row whose name
- * starts with it. Enter, Space, or Right Arrow opens a row's page, and Left
- * Arrow or Escape goes back, the two arrows swapping on a right-to-left page.
+ * **Keyboard.** The drilldown is one tab stop, on the row last focused.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down Arrow, Up Arrow | Moves to the next or the previous row. |
+ * | Home, End | Moves to the first or the last row. |
+ * | A letter | Moves to the next row whose name starts with it. |
+ * | Enter, Space | Chooses the row: opens its page, follows its link, or sends `helix-select`. |
+ * | Right Arrow | Opens the row's page. Left Arrow on a right-to-left page. |
+ * | Left Arrow, Escape | Goes back one page, with focus on the row that opened it. Right Arrow on a right-to-left page. |
  *
  * The rows of the page showing are a `menu`, named by `label` on the top page
- * and by the page's title below it. The back button and the title sit above
+ * and by the page's title below it.
+ *
+ * **`navigation` makes it a site's navigation.** The host is a `navigation`
+ * landmark named by `label`, each page is a list, and each row is a list item
+ * holding a link or a button, as the APG's disclosure navigation is built,
+ * so a reader meets places to go in place of a menu of commands. The keys stay
+ * the same. The back button and the title sit above
  * the menu. Disabled rows stay reachable with the arrow keys, and typing a
  * letter moves to the next row whose name starts with it.
  *
@@ -46,6 +63,7 @@ declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fus
  * @slot - The rows of the top page.
  * @slot back-icon - Replaces the icon on the back button.
  *
+ * @event {HelixNavigateEvent} helix-navigate - Fired before a reader moves into a page or back out of one. `detail.value` is the `value` of the row whose page is about to show, empty for the top page. Cancelable: cancel it to stay on the page showing.
  * @event {HelixSelectEvent} helix-select - Fired when a row with no page is chosen. Cancelable: canceling it stops the change and leaves the decision to you.
  *
  * @csspart back - The button that goes back one page.
@@ -79,6 +97,18 @@ export declare class HelixHeadlessDrilldown extends HelixHeadlessDrilldown_base
      * The text of the back button.
      */
     backLabel: string;
+    /**
+     * Whether the drilldown is a site's navigation: a `navigation` landmark
+     * named by `label`, whose pages are lists of links. Without it, each page is
+     * a `menu`.
+     */
+    navigation: boolean;
+    /**
+     * The page showing, as the `value` of the row that opens it. Empty is the
+     * top page. Setting it shows that page, and a value no row with a page has
+     * shows the top page.
+     */
+    page: string;
     /**
      * Which way the last move went, for whatever animates the change.
      *
@@ -138,6 +168,13 @@ export declare class HelixHeadlessDrilldown extends HelixHeadlessDrilldown_base
      * actually showing.
      */
     private placeTabStop;
+    /**
+     * Asks before a reader's move to a page, the row's or the top one, and
+     * returns whether the move may go ahead.
+     */
+    private navigate;
+    /** The row whose page holds a row, or null for the top page. */
+    private holderOf;
     /** Shows a row's page, and puts focus on the first row of it. */
     private enter;
     /**
@@ -149,11 +186,14 @@ export declare class HelixHeadlessDrilldown extends HelixHeadlessDrilldown_base
      * list they have already read.
      */
     back(): boolean;
+    /** Shows the page of the row with a value, or the top page where no row with a page has it. */
+    private showPage;
     private readonly handleFocusIn;
     private readonly handleSelect;
     private readonly handleKeydown;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /**
      * Writes which way the last move went. After a move, the marks come off and

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, DrilldownController, HelixElement, inlineStep, KeyboardNavigationController, keyClaimed, MixinCollection, slottedWords, typeaheadByWords, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, DrilldownController, HelixElement, HelixNavigateEvent, hostAria, inlineStep, KeyboardNavigationController, keyClaimed, MixinCollection, slottedWords, typeaheadByWords, words, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -15,6 +15,8 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
         super(...arguments);
         this.label = 'Navigation';
         this.backLabel = 'Back';
+        this.navigation = false;
+        this.page = '';
         this.moved = false;
         this.drilldown = new DrilldownController(this, {
             isRow: (element) => 'isDrilldownItem' in element && element.isDrilldownItem === true,
@@ -97,24 +99,50 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
             item.focusable = item === stop;
         }
     }
+    navigate(to) {
+        return this.dispatchEvent(new HelixNavigateEvent({ value: to?.value ?? '' }));
+    }
+    holderOf(row) {
+        const parent = row.parentElement;
+        return row.slot === 'page' && parent instanceof HelixHeadlessDrilldownItem ? parent : null;
+    }
     enter(item) {
-        if (!this.drilldown.enter(item)) {
+        if (!this.drilldown.hasPage(item) || !this.navigate(item) || !this.drilldown.enter(item)) {
             return;
         }
+        this.page = item.value;
         this.direction = 'forward';
         this.moved = true;
         this.updateComplete.then(() => this.items[0]?.focusItem());
     }
     back() {
         const leaving = this.drilldown.page;
-        if (!this.drilldown.back()) {
+        if (leaving === null) {
+            return false;
+        }
+        const to = this.holderOf(leaving);
+        if (!this.navigate(to) || !this.drilldown.back()) {
             return false;
         }
+        this.page = to?.value ?? '';
         this.direction = 'back';
         this.moved = true;
         this.updateComplete.then(() => leaving?.focusItem());
         return true;
     }
+    showPage(value) {
+        const row = value === ''
+            ? undefined
+            : [...this.querySelectorAll('*')].find((one) => one instanceof HelixHeadlessDrilldownItem &&
+                one.value === value &&
+                this.drilldown.hasPage(one));
+        if (row) {
+            this.drilldown.enter(row);
+        }
+        else {
+            this.drilldown.reset();
+        }
+    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelect, true);
@@ -127,6 +155,17 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
         this.removeEventListener('keydown', this.handleKeydown);
         this.removeEventListener('focusin', this.handleFocusIn);
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (changed.has('page') && (this.drilldown.page?.value ?? '') !== this.page) {
+            this.showPage(this.page);
+            this.page = this.drilldown.page?.value ?? '';
+        }
+        hostAria(this.internals, {
+            label: this.navigation ? this.label : '',
+            role: this.navigation ? 'navigation' : '',
+        });
+    }
     updated(changed) {
         super.updated(changed);
         const page = this.drilldown.page;
@@ -162,6 +201,7 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
     }
     mark(item, page, onPage) {
         item.onPage = onPage;
+        item.listed = this.navigation;
         item.showingPage = item === page;
         item.onPath = page !== null && item !== page && item.contains(page);
         for (const child of item.children) {
@@ -188,10 +228,10 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
           </div>`}
       <div
         aria-busy=${this.loading ? 'true' : nothing}
-        aria-label=${this.drilldown.atRoot ? this.label || nothing : nothing}
+        aria-label=${this.drilldown.atRoot && !this.navigation ? this.label || nothing : nothing}
         aria-labelledby=${this.drilldown.atRoot ? nothing : 'title'}
         part="page"
-        role="menu"
+        role=${this.navigation ? 'list' : 'menu'}
       >
         <slot @slotchange=${(event) => this.countRows(event)}></slot>
         ${this.renderStatus(this.hasRows)}
@@ -206,6 +246,12 @@ __decorate([
     words,
     property({ attribute: 'back-label' })
 ], HelixHeadlessDrilldown.prototype, "backLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessDrilldown.prototype, "navigation", void 0);
+__decorate([
+    property()
+], HelixHeadlessDrilldown.prototype, "page", void 0);
 __decorate([
     state()
 ], HelixHeadlessDrilldown.prototype, "direction", void 0);

package/dist/element-events.generated.js

@@ -93,7 +93,7 @@ registerElementEvents({
     'helix-headless-date-picker': ['change', 'helix-before-change', 'helix-navigate', 'input'],
     'helix-headless-dialog': ['close', 'helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-drawer': ['close', 'helix-before-close', 'helix-before-open', 'toggle'],
-    'helix-headless-drilldown': ['helix-select'],
+    'helix-headless-drilldown': ['helix-navigate', 'helix-select'],
     'helix-headless-drilldown-item': ['helix-select'],
     'helix-headless-file-input': ['change', 'helix-before-change', 'helix-reject', 'input'],
     'helix-headless-filter-chip': ['helix-dismiss'],
@@ -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/filter-input/menu/filter-menu.d.ts

@@ -74,6 +74,7 @@ import '../../menu/index.js';
  * @csspart entry-shortcut-key - One key of the shortcut's chord.
  * @csspart entry-shortcut-separator - The `+` between two keys of the shortcut, where the platform writes one.
  * @csspart entry-start - The leading column.
+ * @csspart entry-surface - The panel a row's submenu opens in beside it. The filter menu's rows have none.
  * @csspart menu - The menu the fields are offered in.
  * @csspart menu-back - The button that goes back from a field's page.
  * @csspart menu-back-mark - The icon on the back button.

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

@@ -141,7 +141,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
           exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
             shortcut-kbd: entry-shortcut-kbd,
             shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
-            start: entry-start"
+            start: entry-start, surface: entry-surface"
           data-facet="field"
           data-field=${name}
         >
@@ -152,7 +152,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
                   exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
             shortcut-kbd: entry-shortcut-kbd,
             shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
-            start: entry-start"
+            start: entry-start, surface: entry-surface"
                   slot="submenu"
                   data-facet="comparison"
                   data-field=${name}
@@ -163,7 +163,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
                       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
             shortcut-kbd: entry-shortcut-kbd,
             shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
-            start: entry-start"
+            start: entry-start, surface: entry-surface"
                       slot="submenu"
                       checkable
                       exclusive
@@ -188,7 +188,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
               exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
             shortcut-kbd: entry-shortcut-kbd,
             shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
-            start: entry-start"
+            start: entry-start, surface: entry-surface"
               slot="submenu"
               checkable
               ?exclusive=${using?.arity === 'one'}

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