@fusion.dev/helix-headless 0.146.0 → 0.148.0

package/dist/lightbox/zoom.js

@@ -1,9 +1,10 @@
-const clamp = (value, low, high) => Math.min(Math.max(value, low), high) || 0;
-export const clampScale = (scale, max) => clamp(scale, 1, Math.max(max, 1));
+import { clamp } from '@fusion.dev/helix-core';
+const held = (value, low, high) => clamp(value, low, high) || 0;
+export const clampScale = (scale, max) => held(scale, 1, Math.max(max, 1));
 export const clampPan = (pan, scale, width, height) => {
     const x = ((scale - 1) * width) / 2;
     const y = ((scale - 1) * height) / 2;
-    return { x: clamp(pan.x, -x, x), y: clamp(pan.y, -y, y) };
+    return { x: held(pan.x, -x, x), y: held(pan.y, -y, y) };
 };
 export const zoomAt = (at, from, to, pan) => ({
     x: at.x - ((at.x - pan.x) * to) / from,
@@ -14,3 +15,4 @@ export const between = (a, b) => ({
     x: (a.x + b.x) / 2,
     y: (a.y + b.y) / 2,
 });
+export const percentOf = (scale) => Math.round(scale * 100);

package/dist/line-chart/root/line-chart-root.d.ts

@@ -15,6 +15,10 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  *
  * Every series shares one scale, as in the bar chart.
  *
+ * `dashed` names the series drawn as a dashed line, such as a forecast or a
+ * target beside the readings: `dashed="Forecast"`. Each takes a
+ * `line-dashed` part beside `line`.
+ *
  * `area` fills each series down to the floor on its own, so the fills overlap.
  * For a total made of parts, use `Area Chart`, which stacks the series so the
  * top edge is the total and each band is a share.
@@ -47,6 +51,7 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * @csspart label - One reading's name.
  * @csspart labels - The row of reading names.
  * @csspart line - The line for one series.
+ * @csspart line-dashed - A `line` whose series `dashed` names. Set alongside `line`.
  * @csspart live - The readout: a polite live region that says the reading the keys moved to. Hide it visually.
  * @csspart mark - The invisible point the tooltip is anchored to.
  * @csspart marker - The mark on one reading, under `markers`, and on a reading with a blank on either side. Placed with `inset-inline-start` and `inset-block-start`, and carries its series color as `--chart-series`.
@@ -112,6 +117,15 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
      * here, which is what lets a line take the reading aid.
      */
     curve?: Curve;
+    /**
+     * The series drawn as a dashed line, by their headings, separated by
+     * commas: `dashed="Forecast, Target"`.
+     *
+     * For a series that is not a reading, such as a forecast or a goal, drawn
+     * beside the ones that are. Each takes a `line-dashed` part beside `line`,
+     * which a stylesheet draws dashed. Absent, every line is solid.
+     */
+    dashed: string;
     /**
      * Which rules are drawn across the plot, if any.
      *
@@ -276,6 +290,8 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
      * start, as the drawing is mirrored.
      */
     protected renderMarkers(series: Series[], x: (value: number) => number, y: (value: number) => number): TemplateResult | typeof nothing;
+    /** Whether `dashed` names this series, matched as a heading is. */
+    private dashes;
     /**
      * One series, its wash first so the line is drawn over its own fill.
      *

package/dist/line-chart/root/line-chart-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 { byRow, CHART_PLOT, customElement, drawTooltip, extent, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, ticks, unbroken, } from '@fusion.dev/helix-core';
+import { byRow, CHART_PLOT, commaList, customElement, drawTooltip, extent, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, ticks, unbroken, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -12,6 +12,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
     constructor() {
         super(...arguments);
         this.area = false;
+        this.dashed = '';
         this.markers = false;
         this.zero = false;
     }
@@ -166,6 +167,10 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
           style=${`--chart-series: var(--chart-series-${seriesIndex(depth)}); inset-inline-start: ${(x(point.at) / PLOT_WIDTH) * 100}%; inset-block-start: ${(y(point.value) / PLOT_HEIGHT) * 100}%`}
         ></span>`)}`;
     }
+    dashes(name) {
+        const key = seriesKey(name);
+        return this.dashed !== '' && commaList(this.dashed).some((one) => seriesKey(one) === key);
+    }
     renderSeries(one, depth, x, y) {
         if (!this.showsSeries(one.name)) {
             return html `${nothing}`;
@@ -199,7 +204,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
       d=${path}
       data-series=${index}
       fill="none"
-      part="line"
+      part="line${this.dashes(one.name) ? ' line-dashed' : ''}"
       style="--chart-series: var(--chart-series-${index})"
     />`;
     }
@@ -235,6 +240,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessLineChart.prototype, "curve", void 0);
+__decorate([
+    property()
+], HelixHeadlessLineChart.prototype, "dashed", void 0);
 __decorate([
     property()
 ], HelixHeadlessLineChart.prototype, "gridlines", void 0);

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

@@ -27,12 +27,14 @@ import { type ListSelectionBehavior, type ListSelectionMode } from '../selection
  * |---|---|
  * | Down, Up | Moves to the next or the previous row. Under `replace`, selects it. |
  * | Home, End | Moves to the first or the last row. Under `replace`, selects it. |
+ * | Page Down, Page Up | Moves a box's height of rows, so the row at one edge lands at the other. Under `replace`, selects the row it lands on. |
  * | A letter or a word | Moves to the next row whose words start with what you typed. |
  * | Left, Right | Moves between the row and the controls in its `end` slot. |
  * | Space | Selects the row, or lets it go. |
- * | Shift with Down, Up, Home, End or Space | Selects every row from the last one pressed, in `multiple`. |
- * | Control or Command with Down, Up, Home or End | Moves without selecting, under `replace`. |
+ * | Shift with Down, Up, Home, End, Page Down, Page Up or Space | Selects every row from the last one pressed, in `multiple`. |
+ * | Control or Command with Down, Up, Home, End, Page Down or Page Up | Moves without selecting, under `replace`. |
  * | Control or Command with A | Selects every row, in `multiple`. |
+ * | Escape | Lets go of every selected row, asking first, and keeps the key from the dialog or menu around the list. With nothing selected, the key goes on to them. |
  * | Enter | Acts on the row: follows its link, or sends `helix-action` from it. |
  *
  * A press with Shift selects every row from the last one pressed, and a press
@@ -185,6 +187,12 @@ export declare class HelixHeadlessList extends HelixElement {
      * nothing was pressed yet.
      */
     private arrive;
+    /**
+     * Page Down or Page Up from the row: focus moves a box's height of rows, the
+     * list's own where it scrolls and the window's where it does not, and lands
+     * the way an arrow does, so `replace` and Shift choose as they do there.
+     */
+    private page;
     /** Acts on the row: follows its link, or says it was acted on. */
     protected act(row: HelixHeadlessListItem): void;
     /** Left and Right inside a row: the cell, then each control in `end`, and back. */

package/dist/list/root/list-root.js

@@ -4,13 +4,12 @@ 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 { commaList, customElement, HelixActionEvent, HelixBeforeChangeEvent, HelixElement, hostAria, inlineStep, KeyboardNavigationController, requestChange, rovingStop, typeaheadBy, whenHydrated, } from '@fusion.dev/helix-core';
+import { commaList, customElement, focusItemOf, HelixActionEvent, HelixElement, hostAria, inlineStep, KeyboardNavigationController, pressedOwnControl, requestValue, rovingStop, scrollRoom, selectsAll, typeaheadByWords, whenHydrated, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessListItem } from '../item/list-item.js';
 import { numbering } from '../numbering.js';
-import { choiceValue, rowStop, } from '../selection.js';
-const PRESSABLE = 'a[href], button, input, label, select, textarea, [tabindex]';
+import { choiceValue, pageReach, rowStop, } from '../selection.js';
 let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
     constructor() {
         super(...arguments);
@@ -23,15 +22,19 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
             origin: 'focus',
             reserved: () => ['ArrowLeft', 'ArrowRight'],
             selects: () => false,
-            typeahead: typeaheadBy((item) => item.words),
+            typeahead: typeaheadByWords(),
             wrap: false,
         });
         this.handleKeyCapture = (event) => {
             this.moving = { extend: event.shiftKey, toggle: event.ctrlKey || event.metaKey };
         };
         this.handleKeydown = (event) => {
-            this.moving = undefined;
             const row = this.interactive ? this.rowOf(event) : undefined;
+            if (row && !row.disabled && !event.altKey && /^Page(Down|Up)$/.test(event.key)) {
+                event.preventDefault();
+                this.page(row, event.key === 'PageDown' ? 1 : -1);
+            }
+            this.moving = undefined;
             if (!row || row.disabled || event.altKey) {
                 return;
             }
@@ -43,11 +46,16 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
             if (event.composedPath()[0] !== row.cell) {
                 return;
             }
-            if (toggle && event.key.toLowerCase() === 'a' && this.selectionMode === 'multiple') {
+            if (selectsAll(event) && this.selectionMode === 'multiple') {
                 event.preventDefault();
                 const every = this.reachable.map((one) => this.valueFor(one)).join(', ');
                 this.choose(every === this.value ? null : every);
             }
+            else if (event.key === 'Escape' && this.value !== '' && this.selectionMode !== 'none') {
+                event.preventDefault();
+                event.stopPropagation();
+                this.choose('');
+            }
             else if (event.key === 'Enter' && !toggle) {
                 event.preventDefault();
                 this.act(row);
@@ -62,11 +70,8 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
             if (!row) {
                 return;
             }
-            const path = event.composedPath();
             const cell = row.cell;
-            const end = cell && path.includes(cell) ? path.indexOf(cell) : path.indexOf(row);
-            const inner = path.slice(0, Math.max(0, end));
-            if (inner.some((node) => node instanceof HTMLElement && node.matches(PRESSABLE))) {
+            if (pressedOwnControl(event, cell && event.composedPath().includes(cell) ? cell : row)) {
                 return;
             }
             if (this.selectionMode === 'none') {
@@ -101,14 +106,11 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         return this.interactive ? this.rows.filter((row) => !row.disabled) : [];
     }
     navigable(row) {
-        return {
-            contains: (node) => row.contains(node),
+        return focusItemOf(row, {
             disabled: row.disabled,
-            focusItem: () => row.focusItem(),
-            select: () => { },
-            selected: false,
+            focus: () => row.focusItem(),
             words: row.words,
-        };
+        });
     }
     valueFor(row) {
         return row.value || row.words;
@@ -140,14 +142,8 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         if (next === null) {
             return;
         }
-        requestChange({
-            apply: (value) => {
-                this.value = value;
-                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-            },
-            event: (value) => new HelixBeforeChangeEvent({ value }),
-            host: this,
-            next,
+        requestValue(this, next, (value) => {
+            this.value = value;
         });
     }
     choice(row, extend, toggle, arrived) {
@@ -188,6 +184,17 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         }
         this.choose(next);
     }
+    page(row, step) {
+        const rows = this.reachable;
+        const edges = rows.map((one) => {
+            const box = one.getBoundingClientRect();
+            return { bottom: box.bottom, top: box.top };
+        });
+        const target = rows[pageReach(edges, rows.indexOf(row), scrollRoom(this), step)];
+        if (target && target !== row) {
+            target.focusItem();
+        }
+    }
     act(row) {
         if (row.disabled) {
             return;

package/dist/list/selection.d.ts

@@ -47,3 +47,20 @@ export declare const choiceValue: ({ anchor, arrived, behavior, extend, mode, pr
  * and from the cell going back reaches the last control.
  */
 export declare const rowStop: (count: number, at: number, step: -1 | 1) => number;
+/** Where a row sits along the list, in pixels, as the page keys measure it. */
+export interface RowEdges {
+    /** The row's top edge. */
+    top: number;
+    /** The row's bottom edge. */
+    bottom: number;
+}
+/**
+ * Where Page Down (`step` 1) or Page Up (`step` -1) goes from row `at`: the
+ * farthest row that fits whole in `room` pixels together with row `at`, so the
+ * row at one edge of the box lands at the other, and at least the next row.
+ *
+ * Measured rather than counted, because a list's rows differ in height. Rows of
+ * one height `h` move `floor(room / h) - 1` rows, which is what Data Table and
+ * Virtual List move. At either end it stays on row `at`.
+ */
+export declare const pageReach: (rows: readonly RowEdges[], at: number, room: number, step: -1 | 1) => number;

package/dist/list/selection.js

@@ -28,3 +28,19 @@ export const rowStop = (count, at, step) => {
     }
     return next < 0 ? count - 1 : next;
 };
+export const pageReach = (rows, at, room, step) => {
+    const from = rows[at];
+    if (!from) {
+        return at;
+    }
+    let reach = at;
+    for (let next = at + step; next >= 0 && next < rows.length; next += step) {
+        const row = rows[next];
+        const span = step === 1 ? row.bottom - from.top : from.bottom - row.top;
+        if (span > room && next !== at + step) {
+            break;
+        }
+        reach = next;
+    }
+    return reach;
+};

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, DisabledCascadeController, HelixFormElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, type DataOptionItem, DisabledCascadeController, HelixFormElement } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import { HelixHeadlessOption } from '../../option/root/option-root.js';
 declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
@@ -20,14 +20,31 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * active option is where the keyboard is: the arrow keys move it, and
  * `aria-activedescendant` points to it while focus stays on the list.
  *
- * The arrow keys, Home, End, PageUp and PageDown move the highlight, and typed
- * letters move it to the next option whose words start with them. In a
- * single-choice list the highlight is the choice unless `manual` is set; then
- * Enter, Space or a click chooses. With `multiple`, Space toggles the
- * highlighted option, Shift with an arrow adds the option it moves to, Shift
- * with Home or End adds every option from the highlight to that end, and
- * Control+A or Command+A chooses every option, or none where all are chosen.
- * In a filter field, Space, Home, End and letters edit the text.
+ * **Keyboard.** The list is one tab stop, or its filter field is where there
+ * is one. In a single-choice list the highlight is the choice unless `manual`
+ * is set; then Enter, Space or a click chooses.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down, Up | Moves the highlight to the next or the previous option, round from the last to the first. With `layout="grid"`, to the option below or above, stopping at the edge. |
+ * | Right, Left | With `layout="grid"`, moves to the next or the previous option, mirrored right to left. In a filter field, moves the caret. |
+ * | Home, End | Moves to the first or the last option. In a filter field, moves the caret. |
+ * | Page Down, Page Up | Moves by as many options as the list shows at once. |
+ * | A letter or a word | Moves to the next option whose words start with what you typed. In a filter field, types it. |
+ * | Enter | Chooses the highlighted option, or follows it where it is a link. |
+ * | Space | Chooses the highlighted option, or with `multiple` toggles it. In a filter field, types a space. |
+ * | Shift with Down or Up | With `multiple`, adds the option the highlight moves to. In a filter field, moves the highlight and leaves the value. |
+ * | Shift with Space | With `multiple`, adds every option from the one last chosen to the highlighted one. In a filter field, types a space. |
+ * | Shift with Home or End | With `multiple`, adds every option from the highlight to that end. In a filter field, hold Control as well. |
+ * | Control or Command with A | With `multiple`, chooses every option, or none where all are chosen. In a filter field, selects the text. |
+ * | Escape | In a filter field, clears the filter. |
+ *
+ * **ARIA.** The `items` part is the `listbox`, named by the label and
+ * described by the hint and the message, with `aria-multiselectable` under
+ * `multiple`, `aria-required`, `aria-invalid`, and `aria-busy` while loading.
+ * Each option is an `option` with `aria-selected`. The list, or its filter
+ * field, points `aria-activedescendant` at the highlighted option; the field
+ * is `aria-autocomplete="list"` and controls the list.
  *
  * An option with `href` is a link: Enter or a press follows it and selects
  * nothing, and moving onto it with the arrows does not follow it.
@@ -80,12 +97,16 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
 export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     protected readonly aria: AriaForwardController;
     /**
-     * What the browser may autofill in the text field, as a platform token.
+     * What a browser's autofill may choose, as a platform token such as
+     * `country` or `cc-exp-month`, as a native `<select>` takes it.
+     *
+     * Set, the list draws a hidden native `<select>` with the same options for
+     * the browser to fill, as React Aria's `HiddenSelect` does, and a fill
+     * chooses the option. `off`, the default, draws none.
      *
-     * **Defaults to `off`, which is not the platform's default and is the
-     * point.** The field filters a list rather than collecting a value, so a
-     * browser offering to fill it with a saved address is competing for the same
-     * keystrokes as the listbox. A consumer who wants autofill can still ask.
+     * **The filter field is never filled.** It narrows the list rather than
+     * collecting a value, so a browser offering it a saved address competes
+     * with the reader for the same keystrokes: it is always `off`.
      */
     autocomplete: string;
     /**
@@ -136,14 +157,49 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * Placeholder text for the filter field.
      */
     filterLabel: string;
+    /**
+     * The options as data, for a list too long to draw whole: each a value,
+     * which is also its words, or a record with a `value`, a `label` and
+     * `disabled`. Set, the list draws only the options in sight, and the ones
+     * you write as children are not read.
+     *
+     * **Every option is still reachable.** The keyboard, the typeahead, the
+     * filter and the value work over the whole set, and the option the keyboard
+     * is on is drawn wherever it is, so a screen reader is told about it. Each
+     * drawn option says its place in the set (`aria-posinset`, `aria-setsize`).
+     * React Aria virtualizes a `ListBox` with its `Virtualizer`; this is core's
+     * `VirtualizeController`.
+     *
+     * **The list needs a height to scroll in**: the styled tier's
+     * `--listbox-max-block-size`, or a `max-block-size` on `::part(items)` in the
+     * headless tier. Import the Option family as well, whose elements are drawn.
+     * A server sends the list empty, and the options are drawn once it hydrates.
+     */
+    items: readonly DataOptionItem[] | undefined;
+    /**
+     * How the options are laid out, which the arrow keys follow: `stack`, one
+     * under another, or `grid`, in rows and columns, as React Aria's `ListBox`
+     * lays out cards or photos. With `grid`, Up and Down move within a column,
+     * and Left and Right along the list, mirrored right to left.
+     *
+     * The columns are the stylesheet's: the styled tier draws them at
+     * `--listbox-column-min-inline-size` or wider, and a headless list lays out
+     * `::part(items)` as it likes, since the keys read where each option is
+     * drawn. A list of `items` stays a stack. Left out, the list is a stack,
+     * and the host carries no attribute for it.
+     */
+    layout?: 'grid' | 'stack';
+    /** Draws `items` a window at a time. See core's `OptionWindowController`. */
+    private readonly data;
     /**
      * What the list says when its options could not be loaded, such as after a
-     * request to a server fails. Empty is no error.
+     * request to a server fails. Empty, null or no attribute is no error, so
+     * removing the attribute clears it.
      *
      * Set, it shows under any options there are, in place of `empty-text` and
      * `loading-text`, and a screen reader hears it. Clear it when you ask again.
      */
-    loadError: string;
+    loadError: string | null;
     /**
      * Stops the arrow keys from choosing each option they move to. Enter, Space
      * or a click chooses the highlighted option.
@@ -178,6 +234,11 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * writes the rest here.
      */
     resultsLabel: string;
+    /**
+     * What VoiceOver hears as the highlight reaches a chosen option from the
+     * filter field, on Apple devices. `{name}` is the option's words.
+     */
+    selectedLabel: string;
     /**
      * Which option the keyboard is on, which is not what is chosen.
      */
@@ -187,6 +248,8 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * it back on the first match.
      */
     private parked;
+    /** The option last chosen, which Shift with Space extends from. */
+    private anchor;
     /** The letters typed at the list, which move the highlight to a match. */
     private readonly typeahead;
     /**
@@ -210,6 +273,9 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * markup, so the hiding is done to them in `willUpdate` and the render reads
      * the answer it left here. Counted during render instead, a filter matching
      * nothing left an empty box with no message in it.
+     *
+     * Plain rather than reactive: `place` writes it inside an update, which
+     * draws it, and a slot change asks for that update.
      */
     private hasMatches;
     /**
@@ -219,7 +285,7 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * count: without this the list shipped "Nothing to show" over markup that was
      * about to have options in it, which is the one thing an empty state must
      * never do. `place` does not run on the server, so this is false exactly
-     * when the answer is unknown.
+     * when the answer is unknown. Plain, for the reason `hasMatches` is.
      */
     private counted;
     protected readonly cascade: DisabledCascadeController;
@@ -258,6 +324,17 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * which the region says in place of this.
      */
     private tell;
+    /**
+     * Says the option the arrows reached from the filter field, on Apple devices.
+     *
+     * **VoiceOver does not read the option `aria-activedescendant` points to**
+     * while focus is in a text field, so a filterable list moved its highlight
+     * in silence there. React Aria's combobox says the option on Apple devices,
+     * with "selected" where it is chosen; the field here is the same pattern.
+     * Only while the field has focus, so a highlight placed as the list opens
+     * or seeded from the value says nothing until the reader moves it.
+     */
+    private tellActive;
     /**
      * @internal Moves the highlight to the option whose words start with the
      * letters typed, and returns its value, or nothing where none matches.
@@ -267,6 +344,13 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * `<select>` does.
      */
     typeaheadTo(key: string): string | undefined;
+    /**
+     * @internal Called when the option already chosen is chosen again, which
+     * changes nothing here and answers the question for the control that opened
+     * the list. Select and Combobox close their panel on it, as a native
+     * `<select>` closes when its own answer is pressed.
+     */
+    chosenAgain: (() => void) | undefined;
     /** @internal Whether letters typed in the last moment are still one search. */
     get typing(): boolean;
     /**
@@ -286,7 +370,8 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      */
     get options(): HelixHeadlessOption[];
     /**
-     * Walks the tree, and walks *through* a slot when it meets one.
+     * The elements of one kind in the list: its options, its groups or its
+     * rules. Walks the tree, and walks *through* a slot when it meets one.
      *
      * Through a slot because that is how this gets composed. `Select` renders a
      * listbox in its own shadow root with a slot inside it, so the options are
@@ -294,9 +379,17 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * `querySelectorAll` finds the slot and no options at all, and the whole
      * component comes up empty.
      */
-    private collect;
-    /** The groups, found the same way and for the same reason. */
+    private among;
+    /**
+     * The groups, found the same way and for the same reason, and by their
+     * name rather than their class, as the rules are: a list that holds no group
+     * does not carry the group's code, and either tier's tag ends the same way.
+     */
     private get groups();
+    /** Every option the list reads: the records of `items`, or the elements. */
+    private get entries();
+    /** The option elements on the page: the ones drawn for `items`, or the children. */
+    private get elements();
     /** The options a filter has left showing. */
     private get shown();
     /** The chosen values, as an array whether or not `multiple` is set. */
@@ -309,6 +402,11 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      */
     private choose;
     private readonly handleSelection;
+    /**
+     * Adds every option a reader can reach from the one last chosen to `to`,
+     * APG's Shift with Space. With none chosen yet, it adds `to` alone.
+     */
+    private extend;
     /**
      * Moves the keyboard, and chooses with it only where that is the pattern.
      *
@@ -377,10 +475,8 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * read as a dial rather than scanned as a list, which is what Time Picker's
      * wheels do with three of these.
      *
-     * A delta from the two boxes rather than `offsetTop`. An option is a slotted
-     * light DOM child, so its `offsetParent` is whatever is positioned above it,
-     * which is not this list and is not guaranteed to be anything: measuring both
-     * rects and moving by the difference needs no such assumption.
+     * Measured by core's `centerInView`, or, for a list of `items`, by the
+     * arithmetic, since the chosen option may not be drawn.
      */
     reveal(): void;
     /** Hides what the filter excludes, and writes the rest onto the options. */
@@ -455,8 +551,9 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     private askedAt;
     /**
      * Asks for more once the reader is within a screen of the end, React Aria's
-     * `onLoadMore`: once for each number of options, so a scroll that goes on
-     * asks again only after the next page arrived, and never while loading.
+     * `onLoadMore`, by core's `endInSight`, the rule Virtual List asks too: once
+     * for each number of options, so a scroll that goes on asks again only after
+     * the next page arrived, and never while loading.
      */
     private readonly handleScroll;
     /** Requests a new filter, and returns whether the request went through. */
@@ -519,6 +616,8 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * different thing to say from a list that has none.
      */
     private get noResults();
+    /** Whether `load-error` holds words, which a removed attribute does not. */
+    private get failed();
     /** The error, or what a filter that hid everything says, before the shared words. */
     protected renderLive(hasContent: boolean): TemplateResult;
     protected render(): TemplateResult;