@fusion.dev/helix-headless 0.156.0 → 0.158.0

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

@@ -39,8 +39,9 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
  *
  * Choosing the opener says `helix-select` with its value, and canceling it
  * keeps the page that is shown. The list then shows the page, named by the
- * opener's words, and Backspace in an empty filter goes back. `page` says
- * which page is shown.
+ * opener's words, and a screen reader hears those words. Backspace in an empty
+ * filter goes back, and a screen reader hears the name of the page it goes
+ * back to. `page` says which page is shown.
  *
  * The filter is cleared when the palette closes, so each opening starts from
  * the full list. Combobox and Select do the same. As typing narrows the list, a
@@ -62,9 +63,10 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
  * | Tab | Stays in the palette, which is modal. With `inline`, moves on through the page. |
  *
  * **ARIA.** The palette is a modal `dialog` named by `label`, or with
- * `inline` no dialog at all. Inside it the filter field is a `combobox` with
- * `aria-activedescendant` on the highlighted command, and the commands are a
- * `listbox` of `option`s. How many commands typing left, the empty text and
+ * `inline` no dialog at all. Inside it the filter field is a text field with
+ * `aria-autocomplete="list"`, `aria-controls` on the list, and
+ * `aria-activedescendant` on the highlighted command, as the field of React
+ * Aria's `Autocomplete` is. The commands are a `listbox` of `option`s. How many commands typing left, the empty text and
  * the loading text are said in a polite live region.
  *
  * @since 0.1.0
@@ -109,6 +111,7 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
  * @csspart listbox-loading - The text shown while the commands are loading.
  * @csspart listbox-search - The region that holds the filter field.
  * @csspart listbox-search-field - The filter field.
+ * @csspart live - The region a screen reader announces the page shown from, by the words of the command that opens it, drawn once there is one to say. Visually hidden in the styled tier.
  *
  * @cssstate empty - The list shows no commands: there are none, or typing hid every one.
  * @cssstate error - While `load-error` is set.
@@ -132,6 +135,15 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
      * `0` filters on every keystroke. See Listbox's `filter-delay`.
      */
     filterDelay: number;
+    /**
+     * Whether a command is kept by the filter: a function given the command's
+     * words and the filter, trimmed, that returns `true` to keep it showing, as
+     * React Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
+     *
+     * Absent, a command is kept where its words hold the filter, in any case. A
+     * property only, there being no way to write a function in markup.
+     */
+    filterMatch?: ((text: string, filter: string) => boolean) | undefined;
     /**
      * The key that opens the palette, written as `mod+k`, `shift+p`, or `k`,
      * in Kbd's chord spelling: `mod` is Command or Control, `ctrl`, `cmd`,
@@ -270,6 +282,8 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
      * filter starts empty, as it does on opening, and the field keeps focus.
      */
     private goTo;
+    /** The region the page shown is said from as it changes. */
+    private readonly status;
     /** Backspace in an empty filter, on a page, goes back to the page before. */
     private readonly handleBack;
     /**

package/dist/command/root/command-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 { customElement, HelixElement, HelixSelectEvent, MixinControllerOpen, matchesChord, words, } from '@fusion.dev/helix-core';
+import { customElement, drawStatus, HelixElement, HelixSelectEvent, MixinControllerOpen, matchesChord, StatusController, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -61,6 +61,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
             }
             this.requestOpen(false);
         };
+        this.status = new StatusController(this);
         this.handleBack = (event) => {
             if (event.key !== 'Backspace' ||
                 this.page === '' ||
@@ -124,7 +125,12 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         this.trail = trail;
         this.page = page;
         this.listbox?.requestFilter('');
-        void this.updateComplete.then(() => this.searchField?.focus());
+        void this.updateComplete.then(() => {
+            this.searchField?.focus();
+            if (this.listName !== '') {
+                this.status.say(this.listName);
+            }
+        });
     }
     get listName() {
         if (this.page === '') {
@@ -210,7 +216,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
             }
         }}
     >
-      ${this.renderListbox()}
+      ${this.renderListbox()}${drawStatus(this.status)}
       <!-- Handed on only while something fills it, as the list's slots are,
            so an empty header draws nothing in the dialog. -->
       <slot
@@ -231,6 +237,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         aria-label=${this.listName}
         empty-text=${this.emptyText}
         filter-delay=${this.filterDelay}
+        .filterMatch=${this.filterMatch}
         filter-label=${this.placeholder}
         load-error=${this.loadError}
         loading-text=${this.loadingText}
@@ -277,7 +284,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
     }
     render() {
         if (this.inline) {
-            return html `<slot name="header"></slot>${this.renderListbox()}${this.renderFooter(nothing)}`;
+            return html `<slot name="header"></slot>${this.renderListbox()}${drawStatus(this.status)}${this.renderFooter(nothing)}`;
         }
         return html `${this.renderDialog()}`;
     }
@@ -289,6 +296,9 @@ __decorate([
 __decorate([
     property({ attribute: 'filter-delay', type: Number })
 ], HelixHeadlessCommand.prototype, "filterDelay", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessCommand.prototype, "filterMatch", void 0);
 __decorate([
     property()
 ], HelixHeadlessCommand.prototype, "hotkey", void 0);

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

@@ -1015,7 +1015,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                     : '';
         }
     }
-    renderCell(column, row, picked, place, stop, header) {
+    renderCell(column, row, picked, place, stop, header, id) {
         const edge = edgeOf(column.textAlign);
         const placed = header && this.childField ? this.tree().placed.get(row) : undefined;
         const style = [
@@ -1027,6 +1027,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         return html `<span
       part="cell${picked ? ' cell-selected' : ''}${header ? ' cell-header' : ''}"
       role=${header ? 'rowheader' : 'gridcell'}
+      id=${id ?? nothing}
       tabindex=${stop ? '0' : '-1'}
       data-column=${place}
       style=${style || nothing}
@@ -1083,10 +1084,12 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             const stop = (place) => index === stopRow && place === stopColumn;
             const moveKey = grips ? this.moveKeyOf(row) : '';
             const marked = mark?.key === moveKey ? mark.edge : undefined;
+            const header = named ? `row-header-${index}` : undefined;
             return html `<div
           part="row${held?.key === moveKey ? ' row-dragging' : ''}${marked === 'before' ? ' row-drop-before' : ''}${marked === 'after' ? ' row-drop-after' : ''}"
           role="row"
           aria-rowindex=${this.rowIndex(index)}
+          aria-labelledby=${header ?? nothing}
           aria-selected=${chosen ? String(picked) : nothing}
           aria-level=${placed ? placed.level : nothing}
           aria-posinset=${placed ? placed.position : nothing}
@@ -1103,7 +1106,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                   data-column=${this.selectAt}
                   >${this.renderCheckbox(formatWords(this, 'selectRowLabel', { row: this.rowName(row, key) }), picked, false, (event) => this.toggleRow(key, event))}</span
                 >`
-                : nothing}${columns.map((column, place) => this.renderCell(column, row, picked, place + offset, stop(place + offset), column === named))}
+                : nothing}${columns.map((column, place) => this.renderCell(column, row, picked, place + offset, stop(place + offset), column === named, column === named ? header : undefined))}
         </div>`;
         })}`;
     }

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

@@ -25,6 +25,16 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * `aria-haspopup`, the same way `Menu` marks a row with a submenu. The server
  * render leaves both out, because the server cannot see the children.
  *
+ * **A row with an `href` is a link.** The row itself renders as an `<a>`
+ * carrying `menuitem`, as `Menu.Item` does, so a middle click, a modified
+ * click and the status bar keep working. Enter follows it, and Space does too.
+ * Choosing it fires `helix-select` first: cancel the event and the link is not
+ * followed, so a router can take the navigation. A row that opens a page, or a
+ * disabled row, renders no link.
+ *
+ * A development build warns when a row has no words to be named by, such as a
+ * row holding only an icon with no label.
+ *
  * The row is named by its label alone. Words in `description`, a line under
  * the label, and in `end` describe it instead, through `aria-describedby`, as
  * `Menu.Item` does: a reader hears "Theme", then "Dark".
@@ -43,7 +53,7 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  *
  * @event {HelixSelectEvent} helix-select - Fired when the row is chosen. Cancelable: canceling it stops the change and leaves the decision to you.
  *
- * @csspart item - The row itself.
+ * @csspart item - The row itself, which is an `<a>` where `href` is set.
  * @csspart label - The row's label.
  * @csspart mark - The caret at the end of a row that opens a page, after the `end` slot. The caret points, so a stylesheet mirrors it in a right-to-left document.
  */
@@ -52,6 +62,11 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
      * Whether the row can be reached at all.
      */
     disabled: boolean;
+    /**
+     * Whether the link downloads the file when the row is chosen. Only
+     * meaningful beside an `href`, and only for a file served from this origin.
+     */
+    download: boolean;
     /**
      * Whether this row holds the region's tab stop. Set by the drill-down.
      *
@@ -66,6 +81,16 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
      * lands inside this shadow root instead.
      */
     focusable: boolean;
+    /**
+     * The URL the row links to. Setting it renders the row as a link, unless the
+     * row opens a page or is disabled.
+     */
+    href: string;
+    /**
+     * @internal Whether the row is a list item of a drilldown with
+     * `navigation`. Written by the stack.
+     */
+    listed: boolean;
     /**
      * @internal Read by a parent to identify its children across the light DOM,
      * which is cheaper than `instanceof` and is why this is public rather than
@@ -83,11 +108,19 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
      * level. Written by the stack.
      */
     onPath: boolean;
+    /**
+     * The link's `rel`. Set it whenever you set `target="_blank"`.
+     */
+    rel: string;
     /**
      * @internal Whether this row's own page is the one showing. Written by the
      * stack.
      */
     showingPage: boolean;
+    /**
+     * Where the link opens, for rows that should open outside the current page.
+     */
+    target: string;
     /**
      * Identifies the row to your event listeners.
      */
@@ -113,6 +146,7 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
      * that skipped.
      */
     protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
     /**
      * Re-reads whether a page is slotted, from whichever `page` slot is current.
@@ -154,6 +188,20 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
     get selected(): boolean;
     /** Fires `helix-select` for this row. */
     select(): void;
+    /** Fires `helix-select`, and returns whether the choice stood. */
+    private choose;
+    /**
+     * A press on the row. On a link, a refused `helix-select` stops the link
+     * from being followed, so a router can take the navigation.
+     */
+    private readonly handleClick;
+    /**
+     * Space on a link presses it, which an anchor does not do on its own. Enter
+     * is the anchor's, which fires a click and follows the link.
+     */
+    private readonly handleLinkKeydown;
+    /** Whether the row renders as a link. */
+    private get linked();
     /**
      * The caret of a row that opens a page, as the `chevron` slot's fallback, so
      * an icon of your own replaces it by being slotted.

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'],