@fusion.dev/helix-headless 0.155.0 → 0.157.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/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.