@fusion.dev/helix-headless 0.143.0 → 0.144.0

package/dist/notifications/notification/notification.js

@@ -17,6 +17,9 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
         this.at = '';
         this.defaultRead = false;
         this.locale = '';
+        this.position = 0;
+        this.setSize = 0;
+        this.stop = true;
         this.unreadLabel = 'Unread';
         this.isNotification = true;
         this.readState = undefined;
@@ -58,6 +61,8 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'listitem' });
+        this.internals.ariaPosInSet = this.position > 0 ? String(this.position) : null;
+        this.internals.ariaSetSize = this.setSize === 0 ? null : String(this.setSize);
         this.toggleState('read', this.read);
     }
     updated(changed) {
@@ -105,10 +110,15 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
     ></${stamp}>`;
     }
     render() {
-        return html `<div part="item">
+        return html `<div
+      part="item"
+      role="group"
+      aria-labelledby="label"
+      tabindex=${this.stop ? 0 : -1}
+    >
       <span part="media"><slot name="media"></slot></span>
       <div part="body">
-        <div part="label">${this.read ? nothing : html `<span role="img" aria-label=${this.unreadLabel}></span>`}<slot></slot></div>
+        <div id="label" part="label">${this.read ? nothing : html `<span role="img" aria-label=${this.unreadLabel}></span>`}<slot></slot></div>
         <slot name="description"></slot>
         <slot name="detail"></slot>
         <span part="actions"><slot name="actions" @slotchange=${this.handleActions}></slot></span>
@@ -152,9 +162,18 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessNotification.prototype, "locale", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessNotification.prototype, "position", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessNotification.prototype, "read", null);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessNotification.prototype, "setSize", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessNotification.prototype, "stop", void 0);
 __decorate([
     property({ attribute: 'unread-label' })
 ], HelixHeadlessNotification.prototype, "unreadLabel", void 0);

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

@@ -21,6 +21,14 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * the items and written to an attribute, so a stylesheet and a badge can both
  * use it without counting.
  *
+ * **The feed is one `Tab` stop for its rows.** Each row takes focus itself and
+ * is read by its label. `ArrowDown` and `ArrowUp` move to the next and the
+ * previous row, `Home` and `End` to the first and the last, and `PageDown` and
+ * `PageUp` move a row on or back from anywhere inside one, as in the APG feed
+ * pattern. The controls inside a row stay in the `Tab` order. Set `total` when
+ * the feed holds one page of a longer list, and each row says its place in the
+ * whole of it.
+ *
  * @since 0.1.0
  * @status stable
  * @category feedback
@@ -67,6 +75,14 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
      * Label for the mark-all control.
      */
     markAllLabel: string;
+    /**
+     * How many notifications there are in all, where the feed holds only some of
+     * them, read as each row's `aria-setsize`. `-1` says the count is unknown.
+     *
+     * Unset, the browser counts the rows it can see, which is right for a feed
+     * that holds everything.
+     */
+    total?: number;
     /**
      * How many items are unread, counted from the items themselves.
      *
@@ -158,6 +174,32 @@ export declare class HelixHeadlessNotifications extends HelixHeadlessNotificatio
      */
     private readonly handleRead;
     private assign;
+    /** The row `Tab` stops on, once a reader has been to one. */
+    private stopRow;
+    /**
+     * The rows a reader can reach with the keys: every row in the feed, in order,
+     * less the ones a folded group renders nowhere.
+     */
+    private get reachable();
+    /** The row whose own box is the element focus is on, if it is one. */
+    private rowFocused;
+    /** A row taking focus becomes the feed's stop, so `Tab` comes back to it. */
+    private readonly handleFocusIn;
+    /**
+     * Moves between rows.
+     *
+     * The arrows and `Home` and `End` only from a row's own box, so a control in
+     * a row keeps its keys. `PageDown` and `PageUp` from anywhere in a row, which
+     * is how the APG feed pattern moves on from inside an article.
+     */
+    private readonly handleKeydown;
+    /**
+     * Tells each row whether it is the stop, and where it sits in the feed.
+     *
+     * Through each row's own properties, written once it has hydrated, so a
+     * server's markup stays the server's: every row is a stop until this runs.
+     */
+    private rove;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;

package/dist/notifications/root/notifications-root.js

@@ -4,9 +4,10 @@ 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, focusableElements, HelixElement, HelixReadEvent, hostAria, MixinCollection, markRegion, } from '@fusion.dev/helix-core';
+import { customElement, deepContains, focusableElements, HelixElement, HelixReadEvent, hostAria, MixinCollection, markRegion, rovingStop, whenHydrated, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { feedStep } from '../feed-keys.js';
 let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
@@ -20,6 +21,36 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
         this.handleRead = () => {
             queueMicrotask(() => this.requestUpdate());
         };
+        this.handleFocusIn = (event) => {
+            const row = this.rowFocused(event.composedPath()[0]);
+            if (row && row !== this.stopRow) {
+                this.stopRow = row;
+                this.rove();
+            }
+        };
+        this.handleKeydown = (event) => {
+            if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) {
+                return;
+            }
+            const rows = this.reachable;
+            const from = event.composedPath()[0];
+            const own = this.rowFocused(from);
+            const inside = own ?? rows.find((row) => from instanceof Node && deepContains(row, from));
+            if (!inside) {
+                return;
+            }
+            const to = feedStep(event.key, rows.indexOf(inside), rows.length, own !== undefined);
+            if (to === undefined) {
+                return;
+            }
+            event.preventDefault();
+            const next = rows[to];
+            if (next) {
+                this.stopRow = next;
+                this.rove();
+                rowBox(next)?.focus();
+            }
+        };
         this.handleMarkAll = (event) => {
             const button = event.currentTarget;
             const focused = this.shadowRoot?.activeElement === button;
@@ -106,13 +137,36 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
             slot?.assign?.(...[...this.children].filter((child) => child.getAttribute('slot') === name));
         }
     }
+    get reachable() {
+        return this.items.filter((row) => !('assignedSlot' in row) || row.assignedSlot !== null);
+    }
+    rowFocused(target) {
+        return this.reachable.find((row) => rowBox(row) === target);
+    }
+    rove() {
+        const rows = this.reachable;
+        const stop = rovingStop(rows, this.stopRow);
+        const direct = this.rows;
+        for (const row of this.items) {
+            const position = direct.indexOf(row) + 1;
+            whenHydrated(row, () => {
+                row.stop = row === stop;
+                row.position = this.total === undefined ? 0 : position;
+                row.setSize = this.total ?? 0;
+            });
+        }
+    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-read', this.handleRead);
+        this.addEventListener('focusin', this.handleFocusIn);
+        this.addEventListener('keydown', this.handleKeydown);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-read', this.handleRead);
+        this.removeEventListener('focusin', this.handleFocusIn);
+        this.removeEventListener('keydown', this.handleKeydown);
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -130,6 +184,7 @@ let HelixHeadlessNotifications = class HelixHeadlessNotifications extends MixinC
         this.assign();
         this.markEmpty();
         this.markMedia();
+        this.rove();
         const unread = this.unread > 0 ? String(this.unread) : null;
         if (this.getAttribute('unread') !== unread) {
             if (unread === null) {
@@ -167,7 +222,11 @@ __decorate([
 __decorate([
     property({ attribute: 'mark-all-label' })
 ], HelixHeadlessNotifications.prototype, "markAllLabel", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessNotifications.prototype, "total", void 0);
 HelixHeadlessNotifications = __decorate([
     customElement('helix-headless-notifications')
 ], HelixHeadlessNotifications);
 export { HelixHeadlessNotifications };
+const rowBox = (row) => row.shadowRoot?.querySelector('[part="item"]') ?? null;

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

@@ -18,6 +18,17 @@ declare const HelixHeadlessNumberInput_base: (new (...args: any[]) => import("@f
  *
  * `inputmode="decimal"` keeps the numeric keypad on phones.
  *
+ * `format-options` shows the number with `Intl.NumberFormat` in `locale`, as a
+ * currency, a percent or a unit, while the field is not being edited. Focus
+ * shows the number itself, and a typed `$1,200` or `25%` is read back with the
+ * same options. The value stays the plain number: `1200`, or `0.25` for 25%.
+ * The locale's group separators are read in every field, so `1,234` is a
+ * number in `en-US`.
+ *
+ * On iOS and iPadOS the field is a text field described as a number field,
+ * with no `role="spinbutton"`, which VoiceOver reads as a slider you cannot
+ * type in. React Aria's NumberField does the same.
+ *
  * Validity follows the platform's rules: `min`, `max`, and `step` are checked
  * and reported through the host's own `setValidity`, under the platform's flag
  * names.
@@ -80,6 +91,16 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * The name of the step down button, read by screen readers.
      */
     decrementLabel: string;
+    /**
+     * `Intl.NumberFormat` options the number is shown with while the field is
+     * not being edited: a currency, a percent, a unit, or a number of decimals.
+     * Written as JSON in the attribute.
+     *
+     * ```html
+     * <helix-number-input format-options='{"style":"currency","currency":"EUR"}'></helix-number-input>
+     * ```
+     */
+    formatOptions?: Intl.NumberFormatOptions;
     /**
      * The name of the step up button, read by screen readers.
      */
@@ -133,6 +154,11 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * Prevents editing. The value is still submitted with the form.
      */
     readOnly: boolean;
+    /**
+     * What the field is described as on iOS and iPadOS, where it carries no
+     * spinbutton role. See the class description.
+     */
+    roleDescription: string;
     /**
      * Makes the label a grip that changes the value when it is dragged.
      *
@@ -163,6 +189,27 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * number alone.
      */
     valueText: string;
+    /**
+     * Whether the mouse wheel steps the number while the field has focus, as
+     * React Aria's NumberField does unless told not to. Off, the wheel scrolls
+     * the page, which is what a reader passing over a form expects.
+     */
+    wheel: boolean;
+    /** Whether the field has focus, so it shows the number itself and not its format. */
+    private editing;
+    /**
+     * What the field shows: the value as written while it is edited, and with
+     * `format-options` once it is not.
+     */
+    private get shown();
+    /** Steps on the wheel, where asked, while the field has focus. */
+    private readonly handleWheel;
+    private readonly handleFocus;
+    /**
+     * Whether this is an iPhone or an iPad, read once on the client. A server
+     * has no navigator and renders the spinbutton.
+     */
+    private readonly touchApple;
     private get control();
     /** The value as a number, or `null` where the field holds nothing usable. */
     private get numeric();

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

@@ -4,10 +4,10 @@ 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, valueAsNumber as asNumber, customElement, fillTemplate, numberAsValue as fromNumber, HelixFormElement, holdCaret, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
+import { AriaForwardController, appleTouch, valueAsNumber as asNumber, customElement, fillTemplate, formatNumber, numberAsValue as fromNumber, HelixFormElement, holdCaret, MixinControllerValue, MixinField, parseNumber, restoreValue, } from '@fusion.dev/helix-core';
 import { minus, plus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 const SCRUB_PITCH = 4;
 const SCRUB_FINE = 16;
@@ -24,9 +24,28 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         this.locale = '';
         this.placeholder = '';
         this.readOnly = false;
+        this.roleDescription = 'number field';
         this.scrub = false;
         this.step = 1;
         this.valueText = '';
+        this.wheel = false;
+        this.editing = false;
+        this.handleWheel = (event) => {
+            if (!this.wheel || !this.editing || event.deltaY === 0) {
+                return;
+            }
+            event.preventDefault();
+            if (event.deltaY < 0) {
+                this.stepUp();
+            }
+            else {
+                this.stepDown();
+            }
+        };
+        this.handleFocus = () => {
+            this.editing = true;
+        };
+        this.touchApple = appleTouch(typeof navigator === 'undefined' ? undefined : navigator);
         this.scrubFrom = 0;
         this.scrubValue = 0;
         this.scrubStart = '';
@@ -77,6 +96,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             restoreValue(control, this.value);
         };
         this.handleBlur = () => {
+            this.editing = false;
             if (this.settle()) {
                 this.announceChange();
             }
@@ -122,6 +142,13 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             }
         };
     }
+    get shown() {
+        const parsed = this.numeric;
+        if (this.editing || this.formatOptions === undefined || parsed === null) {
+            return this.value;
+        }
+        return formatNumber(parsed, this.locale, this.formatOptions);
+    }
     get control() {
         return this.partNamed('control');
     }
@@ -130,11 +157,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         if (text === '') {
             return null;
         }
-        const read = decimalComma(this.locale) && text.includes(',') && !text.includes('.')
-            ? text.replace(',', '.')
-            : text;
-        const parsed = read.includes(',') ? Number.NaN : Number(read);
-        return Number.isFinite(parsed) ? parsed : null;
+        return parseNumber(text, this.locale, this.formatOptions);
     }
     onStep(value) {
         const step = Math.abs(this.step) || 1;
@@ -291,9 +314,10 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         <input
           part="control"
           id=${this.controlId}
-          .value=${this.value}
+          .value=${this.shown}
           type="text"
-          role="spinbutton"
+          role=${this.touchApple ? nothing : 'spinbutton'}
+          aria-roledescription=${this.touchApple ? this.roleDescription : nothing}
           inputmode="decimal"
           autocomplete=${this.autocomplete || nothing}
           name=${this.name || nothing}
@@ -303,17 +327,27 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
           aria-valuemin=${this.min ?? nothing}
           aria-valuemax=${this.max ?? nothing}
           aria-valuenow=${parsed ?? nothing}
-          aria-valuetext=${this.valueText && parsed !== null
-            ? fillTemplate(this.valueText, { value: this.value })
-            : nothing}
+          aria-valuetext=${parsed === null
+            ? nothing
+            : this.valueText
+                ? fillTemplate(this.valueText, {
+                    value: this.formatOptions
+                        ? formatNumber(parsed, this.locale, this.formatOptions)
+                        : this.value,
+                })
+                : this.formatOptions
+                    ? formatNumber(parsed, this.locale, this.formatOptions)
+                    : nothing}
           ?disabled=${this.isDisabled}
           ?readonly=${this.readOnly}
           ?required=${this.required}
           @blur=${this.handleBlur}
           @change=${this.handleChange}
+          @focus=${this.handleFocus}
           @input=${this.handleInput}
           @keydown=${this.handleKeydown}
           @keypress=${this.handleKeypress}
+          @wheel=${this.handleWheel}
         />
         <slot name="end"></slot>
         <button
@@ -347,6 +381,9 @@ __decorate([
 __decorate([
     property({ attribute: 'decrement-label' })
 ], HelixHeadlessNumberInput.prototype, "decrementLabel", void 0);
+__decorate([
+    property({ attribute: 'format-options', type: Object })
+], HelixHeadlessNumberInput.prototype, "formatOptions", void 0);
 __decorate([
     property({ attribute: 'increment-label' })
 ], HelixHeadlessNumberInput.prototype, "incrementLabel", void 0);
@@ -374,6 +411,9 @@ __decorate([
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessNumberInput.prototype, "readOnly", void 0);
+__decorate([
+    property({ attribute: 'role-description' })
+], HelixHeadlessNumberInput.prototype, "roleDescription", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessNumberInput.prototype, "scrub", void 0);
@@ -386,20 +426,16 @@ __decorate([
 __decorate([
     property({ attribute: 'value-text' })
 ], HelixHeadlessNumberInput.prototype, "valueText", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessNumberInput.prototype, "wheel", void 0);
+__decorate([
+    state()
+], HelixHeadlessNumberInput.prototype, "editing", void 0);
 HelixHeadlessNumberInput = __decorate([
     customElement('helix-headless-number-input')
 ], HelixHeadlessNumberInput);
 export { HelixHeadlessNumberInput };
-const commas = new Map();
-const decimalComma = (locale) => {
-    let comma = commas.get(locale);
-    if (comma === undefined) {
-        const parts = new Intl.NumberFormat(locale || undefined).formatToParts(1.5);
-        comma = parts.find((part) => part.type === 'decimal')?.value === ',';
-        commas.set(locale, comma);
-    }
-    return comma;
-};
 const decimals = (value) => {
     const text = String(value);
     const exponent = /e-(\d+)$/.exec(text);

package/dist/object-inspector/root/object-inspector-root.d.ts

@@ -60,6 +60,7 @@ interface Row {
  * @csspart boolean - A `true` or `false`.
  * @csspart copy - The copy button, which copies the active row.
  * @csspart copy-button - The button inside the copy control.
+ * @csspart copy-live - The live region inside the copy button, which says its `pending-label` when the copy becomes pending under focus.
  * @csspart copy-mark - The clipboard icon, and the confirmation icon that replaces it.
  * @csspart copy-text - The words on that button, trimmed to their capitals and baseline.
  * @csspart copy-tooltip - The tooltip, forwarded from the copy button's tooltip.

package/dist/object-inspector/root/object-inspector-root.js

@@ -353,7 +353,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
     renderCopyButton(row) {
         return staticHtml `<${this.tag('copy-button')}
       part="copy"
-      exportparts="button: copy-button, text: copy-text, mark: copy-mark, tooltip: copy-tooltip,
+      exportparts="button: copy-button, live: copy-live, text: copy-text, mark: copy-mark, tooltip: copy-tooltip,
         tooltip-arrow: copy-tooltip-arrow, tooltip-arrow-bottom: copy-tooltip-arrow-bottom,
         tooltip-arrow-left: copy-tooltip-arrow-left, tooltip-arrow-right: copy-tooltip-arrow-right,
         tooltip-arrow-top: copy-tooltip-arrow-top, tooltip-bottom: copy-tooltip-bottom,

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { HelixElement, type LinkModifiers } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * The options among some elements, reaching one level into a group.
@@ -34,6 +34,9 @@ export declare const optionsAmong: (elements: readonly Element[]) => HelixHeadle
  * Filtering belongs to the owner, which hides an option with `hidden`. What
  * counts as a match differs between a select and a command palette.
  *
+ * An option with `href` is a link: choosing it follows the link and selects
+ * nothing, as an entry in a command palette that goes to a page does.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -44,7 +47,7 @@ export declare const optionsAmong: (elements: readonly Element[]) => HelixHeadle
  * @slot end - Content after the label, such as a shortcut or a count.
  * @slot start - Content before the label, such as an icon or an avatar.
  *
- * @event {HelixSelectEvent} helix-select - The option was chosen. Cancelable: canceling it leaves the selection as it was.
+ * @event {HelixSelectEvent} helix-select - The option was chosen. Cancelable: canceling it leaves the selection as it was, and keeps the browser from following an option's `href`.
  *
  * @csspart description - The description under the label, when there is one.
  * @csspart item - The row.
@@ -148,6 +151,28 @@ export declare class HelixHeadlessOption extends HelixElement {
      * Prevents the option from being chosen.
      */
     disabled: boolean;
+    /**
+     * Whether following the link downloads what it names. Only meaningful
+     * beside an `href`.
+     */
+    download: boolean;
+    /**
+     * The URL the option links to. Setting it makes the option a link: choosing
+     * it, with a press, Enter or a click, follows the link and selects nothing,
+     * as React Aria's items with `href` do. Command, Control and Shift open it
+     * where they open a link, in a new tab or a new window.
+     *
+     * `helix-select` is said first with the `href` in it, and canceling it keeps
+     * the browser from following, so a client-side router follows it instead.
+     *
+     * **The option stays an option**, and an anchor is never drawn inside it:
+     * `role="option"` sits on the host, where a listbox's
+     * `aria-activedescendant` can name it, and an `<a>` inside would be exposed
+     * as a link within the option and take its name (Menu Item's `href` records
+     * the measurement). The link is followed through an anchor made for the
+     * moment, which `followLink` describes.
+     */
+    href: string;
     /**
      * A shorter name for this choice, for where the row does not fit.
      *
@@ -161,12 +186,30 @@ export declare class HelixHeadlessOption extends HelixElement {
      * nothing for every choice.
      */
     label: string;
+    /**
+     * The link's `rel`. Set it whenever you set `target="_blank"`.
+     */
+    rel: string;
     /**
      * Whether this choice is currently chosen.
      *
      * Written by the listbox.
      */
     selected: boolean;
+    /**
+     * Where the link opens, such as `_blank`, for an option with an `href`.
+     */
+    target: string;
+    /**
+     * The words a reader types to reach this choice, where the row's own words
+     * are not them: typeahead, a filter and a combobox match against it, and a
+     * select's trigger shows it.
+     *
+     * For a row whose content is a picture, an avatar beside a name and a role,
+     * or a name written in another script, as React Aria's `textValue`. Empty
+     * reads the row's words, then `label`.
+     */
+    textValue: string;
     /**
      * The value that identifies the option, and that a form submits.
      */
@@ -210,11 +253,17 @@ export declare class HelixHeadlessOption extends HelixElement {
      * it is in every comparison too.
      *
      * **The `label` where the slot holds nothing**, which is what the row shows
-     * then, so the six read the words a reader sees.
+     * then, so the six read the words a reader sees. `text-value` wins over both,
+     * being the consumer saying outright what the words are.
      */
     get text(): string;
-    /** Sends `helix-select` for this option. Does nothing when it is disabled. */
-    select(): void;
+    /**
+     * Sends `helix-select` for this option. Does nothing when it is disabled.
+     *
+     * An option with an `href` then follows its link, unless the event was
+     * canceled, with the keys `modifiers` names held.
+     */
+    select(modifiers?: LinkModifiers): void;
     /**
      * Mirrors the chosen state where a stylesheet can select on it.
      *