@fusion.dev/helix-headless 0.146.0 → 0.147.0

package/dist/lightbox/root/lightbox-root.js

@@ -4,12 +4,13 @@ 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 { CommandController, customElement, deepActiveElement, deepContains, drawDismiss, drawDismissGlyph, FullscreenController, fillTemplate, HelixElement, hostAria, IdleController, inlineStep, isRtl, keyClaimed, lockScroll, MixinControllerActive, MixinControllerOpen, resolveActiveItem, SwipeController, swipeStep, unlockScroll, whenHydrated, } from '@fusion.dev/helix-core';
-import { caretLeft, caretRight } from '@fusion.dev/helix-icons';
+import { CommandController, customElement, DelayController, deepActiveElement, deepContains, drawDismiss, drawDismissGlyph, FullscreenController, fillTemplate, HelixElement, hostAria, IdleController, inlineStep, isRtl, keyClaimed, lockScroll, MixinControllerActive, MixinControllerOpen, resolveActiveItem, SwipeController, swipeStep, unlockScroll, whenHydrated, } from '@fusion.dev/helix-core';
+import { caretLeft, caretRight, minus, plus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { HelixHeadlessLightboxItem } from '../item/lightbox-item.js';
+import { percentOf } from '../zoom.js';
 import { ZoomController } from '../zoom-controller.js';
 let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerActive(MixinControllerOpen(HelixElement)) {
     constructor() {
@@ -26,9 +27,15 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         this.slideLabel = '{index} of {count}';
         this.slideRoleLabel = 'slide';
         this.statusLabel = '{index} of {count}';
+        this.zoomInLabel = 'Zoom in';
+        this.zoomOutLabel = 'Zoom out';
+        this.zoomStatusLabel = 'Zoomed to {percent}%';
         this.resting = false;
         this.filled = false;
         this.announcement = '';
+        this.zoomScale = 1;
+        this.zoomSaid = new DelayController(this, { renders: false });
+        this.quietZoom = false;
         this.swipes = new SwipeController(this, {
             axis: () => (this.open && !this.zoomer.engaged ? 'x' : undefined),
             end: (dx, _dy, vx) => {
@@ -126,13 +133,26 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         viewport?.style.setProperty('--lightbox-pan-y', zoomed ? `${Math.round(pan.y)}px` : '');
         this.toggleState('zoomed', zoomed);
         this.idle.stir();
+        if (scale !== this.zoomScale) {
+            this.zoomScale = scale;
+            this.sayZoom();
+        }
+    }
+    sayZoom() {
+        if (this.quietZoom || !this.open || this.zoomStatusLabel === '') {
+            this.zoomSaid.cancel();
+            return;
+        }
+        this.zoomSaid.start(400, () => {
+            this.announcement = fillTemplate(this.zoomStatusLabel, { percent: percentOf(this.zoomScale) });
+        });
     }
     zoomTo(scale) {
         this.zoomer.zoomTo(scale);
     }
     chromeHasFocus() {
         const active = deepActiveElement();
-        const own = this.shadowRoot?.activeElement?.matches('[part="previous"], [part="next"], [part="dismiss"]');
+        const own = this.shadowRoot?.activeElement?.matches('[part="previous"], [part="next"], [part="dismiss"], [part="zoom-in"], [part="zoom-out"]');
         return (own === true ||
             this.knownChildren.some((child) => (child.slot === 'header' || child.slot === 'footer') && deepContains(child, active)));
     }
@@ -178,12 +198,11 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         if (this.maxZoom <= 1) {
             return false;
         }
-        const scale = this.zoomer.scale;
         if (key === '+' || key === '=') {
-            this.zoomer.zoomTo(scale * 1.5);
+            this.zoomIn();
         }
         else if (key === '-') {
-            this.zoomer.zoomTo(scale / 1.5);
+            this.zoomOut();
         }
         else if (key === '0') {
             this.zoomer.reset();
@@ -193,6 +212,12 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         }
         return true;
     }
+    zoomIn() {
+        this.zoomer.zoomTo(this.zoomer.scale * 1.5);
+    }
+    zoomOut() {
+        this.zoomer.zoomTo(this.zoomer.scale / 1.5);
+    }
     toEnd(at) {
         const target = this.items[at];
         if (target && target !== this.shown) {
@@ -209,7 +234,9 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         this.toggleState('idle', this.resting);
         this.toggleState('zoomable', this.maxZoom > 1);
         if (changed.has('active') || (changed.has('open') && !this.open)) {
+            this.quietZoom = true;
             this.zoomer.reset();
+            this.quietZoom = false;
         }
         this.say(changed);
     }
@@ -305,11 +332,11 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
       @pointerleave=${this.idle.leave}
       @pointermove=${this.idle.stir}
     >
-      <slot name="header"></slot>
+      <slot name="header" part="header"></slot>
       <div part="viewport">
         <slot></slot>
       </div>
-      <slot name="footer"></slot>
+      <slot name="footer" part="footer"></slot>
       ${this.controls ? this.renderControls() : nothing}
       ${this.counter ? html `<span part="counter" aria-hidden="true">${this.place()}</span>` : nothing}
       <span part="live" role="status" aria-live="polite">${this.announcement || nothing}</span>
@@ -342,12 +369,41 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
           </svg>
         </slot>
       </button>
+      ${this.maxZoom > 1 ? this.renderZoomControls() : nothing}
       ${drawDismiss({
             label: this.dismissLabel,
             mark: html `<slot name="dismiss-icon">${drawDismissGlyph()}</slot>`,
             onDismiss: () => this.close(),
         })}`;
     }
+    renderZoomControls() {
+        return html `<button
+        part="zoom-out"
+        type="button"
+        aria-label=${this.zoomOutLabel}
+        aria-disabled=${this.zoomScale <= 1 ? 'true' : nothing}
+        @click=${() => this.zoomOut()}
+      >
+        <slot name="zoom-out-icon">
+          <svg part="zoom-out-mark" fill="currentColor" viewBox=${minus.viewBox} aria-hidden="true">
+            ${unsafeSVG(minus.content)}
+          </svg>
+        </slot>
+      </button>
+      <button
+        part="zoom-in"
+        type="button"
+        aria-label=${this.zoomInLabel}
+        aria-disabled=${this.zoomScale >= this.maxZoom ? 'true' : nothing}
+        @click=${() => this.zoomIn()}
+      >
+        <slot name="zoom-in-icon">
+          <svg part="zoom-in-mark" fill="currentColor" viewBox=${plus.viewBox} aria-hidden="true">
+            ${unsafeSVG(plus.content)}
+          </svg>
+        </slot>
+      </button>`;
+    }
 };
 __decorate([
     property({ reflect: true, type: Boolean })
@@ -385,6 +441,15 @@ __decorate([
 __decorate([
     property({ attribute: 'status-label' })
 ], HelixHeadlessLightbox.prototype, "statusLabel", void 0);
+__decorate([
+    property({ attribute: 'zoom-in-label' })
+], HelixHeadlessLightbox.prototype, "zoomInLabel", void 0);
+__decorate([
+    property({ attribute: 'zoom-out-label' })
+], HelixHeadlessLightbox.prototype, "zoomOutLabel", void 0);
+__decorate([
+    property({ attribute: 'zoom-status-label' })
+], HelixHeadlessLightbox.prototype, "zoomStatusLabel", void 0);
 __decorate([
     state()
 ], HelixHeadlessLightbox.prototype, "resting", void 0);
@@ -394,6 +459,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessLightbox.prototype, "announcement", void 0);
+__decorate([
+    state()
+], HelixHeadlessLightbox.prototype, "zoomScale", void 0);
 HelixHeadlessLightbox = __decorate([
     customElement('helix-headless-lightbox')
 ], HelixHeadlessLightbox);

package/dist/lightbox/zoom.d.ts

@@ -20,3 +20,5 @@ export declare const zoomAt: (at: Offset, from: number, to: number, pan: Offset)
 export declare const spread: (a: Offset, b: Offset) => number;
 /** The point halfway between two fingers. */
 export declare const between: (a: Offset, b: Offset) => Offset;
+/** A scale as a whole percent, which is how a reader hears it: 1.5 is 150. */
+export declare const percentOf: (scale: number) => number;

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,12 +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, HelixActionEvent, HelixBeforeChangeEvent, HelixElement, hostAria, inlineStep, KeyboardNavigationController, requestChange, rovingStop, 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';
+import { choiceValue, pageReach, rowStop, } from '../selection.js';
 const PRESSABLE = 'a[href], button, input, label, select, textarea, [tabindex]';
 let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
     constructor() {
@@ -23,15 +23,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 +47,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);
@@ -188,6 +197,18 @@ 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 room = this.scrollHeight > this.clientHeight + 1 ? this.clientHeight : window.innerHeight;
+        const target = rows[pageReach(edges, rows.indexOf(row), room, 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

@@ -27,7 +27,9 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * 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.
+ * In a filter field, Space, Home, End and letters edit the text, and with
+ * `multiple`, Control with Shift and Home or End adds every option from the
+ * highlight to that end.
  *
  * 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.
@@ -286,7 +288,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,7 +297,7 @@ 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;
+    private among;
     /** The groups, found the same way and for the same reason. */
     private get groups();
     /** The options a filter has left showing. */
@@ -455,8 +458,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. */

package/dist/listbox/root/listbox-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, countLabel, customElement, DelayController, DisabledCascadeController, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, MixinCollection, MixinControllerValue, MixinField, rangeAdd, reportValues, requestChange, scrollItemIntoView, Typeahead, typesCharacter, } from '@fusion.dev/helix-core';
+import { AriaForwardController, countLabel, customElement, DelayController, DisabledCascadeController, endInSight, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, MixinCollection, MixinControllerValue, MixinField, rangeAdd, reportValues, requestChange, scrollItemIntoView, selectsAll, Typeahead, typesCharacter, } from '@fusion.dev/helix-core';
 import { magnifyingGlass } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -119,11 +119,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
                 }
                 return;
             }
-            if (this.multiple &&
-                !typing &&
-                event.key.toLowerCase() === 'a' &&
-                (event.ctrlKey || event.metaKey) &&
-                !event.altKey) {
+            if (this.multiple && !typing && selectsAll(event)) {
                 event.preventDefault();
                 const reachable = shown.map((option) => option.value);
                 const all = reachable.every((value) => this.values.includes(value));
@@ -139,7 +135,12 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
                 }
                 return;
             }
-            if (!(typing ? FIELD_MOVES : MOVES).has(event.key)) {
+            const fieldRange = typing &&
+                this.multiple &&
+                event.shiftKey &&
+                (event.ctrlKey || event.metaKey) &&
+                (event.key === 'Home' || event.key === 'End');
+            if (!fieldRange && !(typing ? FIELD_MOVES : MOVES).has(event.key)) {
                 return;
             }
             event.preventDefault();
@@ -170,7 +171,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             if (target) {
                 this.arrive(target.value);
                 const ranged = event.key === 'Home' || event.key === 'End';
-                if (this.multiple && !typing && event.shiftKey && ranged) {
+                if (this.multiple && (!typing || fieldRange) && event.shiftKey && ranged) {
                     const taken = rangeAdd(this.values, shown.map((option) => option.value), at, next);
                     if (taken) {
                         this.requestValue(taken.join(','));
@@ -197,13 +198,17 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.handleScroll = (event) => {
             const items = event.currentTarget;
             const count = this.options.length;
-            if (this.loading || count === this.askedAt || items.clientHeight === 0) {
+            if (this.loading ||
+                !endInSight({
+                    askedAt: this.askedAt,
+                    count,
+                    remaining: items.scrollHeight - items.scrollTop - items.clientHeight,
+                    screen: items.clientHeight,
+                })) {
                 return;
             }
-            if (items.scrollHeight - items.scrollTop - items.clientHeight <= items.clientHeight) {
-                this.askedAt = count;
-                this.dispatchEvent(new HelixLoadMoreEvent());
-            }
+            this.askedAt = count;
+            this.dispatchEvent(new HelixLoadMoreEvent());
         };
         this.handleFilterKeydown = (event) => {
             if (event.key === 'Enter' || FIELD_MOVES.has(event.key)) {
@@ -293,40 +298,24 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         return this.multiple ? 'select-multiple' : 'select-one';
     }
     get options() {
-        return this.collect(this.children);
+        return this.among((node) => node instanceof HelixHeadlessOption, this.children);
     }
-    collect(nodes) {
+    among(is, nodes) {
         const found = [];
         for (const node of nodes) {
-            if (node instanceof HelixHeadlessOption) {
+            if (is(node)) {
                 found.push(node);
             }
-            else if (node instanceof HTMLSlotElement) {
-                found.push(...this.collect(node.assignedElements({ flatten: true })));
-            }
             else {
-                found.push(...this.collect(node.children));
+                found.push(...this.among(is, node instanceof HTMLSlotElement
+                    ? node.assignedElements({ flatten: true })
+                    : node.children));
             }
         }
         return found;
     }
     get groups() {
-        const found = [];
-        const walk = (nodes) => {
-            for (const node of nodes) {
-                if (node instanceof HelixHeadlessOptionGroup) {
-                    found.push(node);
-                }
-                if (node instanceof HTMLSlotElement) {
-                    walk(node.assignedElements({ flatten: true }));
-                }
-                else {
-                    walk(node.children);
-                }
-            }
-        };
-        walk(this.children);
-        return found;
+        return this.among((node) => node instanceof HelixHeadlessOptionGroup, this.children);
     }
     get shown() {
         return this.options.filter((option) => !option.hidden);
@@ -398,9 +387,12 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             option.selected = chosen.has(option.value);
         }
         for (const group of this.groups) {
-            const inside = this.collect(group.children);
+            const inside = this.among((node) => node instanceof HelixHeadlessOption, group.children);
             group.hidden = inside.length > 0 && inside.every((option) => option.hidden);
         }
+        for (const rule of this.among((node) => node.localName.endsWith('-option-separator'), this.children)) {
+            rule.hidden = needle !== '';
+        }
         const shown = this.shown;
         const rescue = !this.parked && (needle !== '' || this.activeValue !== '');
         if (rescue && !shown.some((option) => option.value === this.activeValue)) {