@fusion.dev/helix-headless 0.165.0 → 0.167.0

package/dist/table/root/table-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, anchorAt, assignSlots, commaList, customElement, cycle, everyState, followLink, format, formatWords, HelixBeforeToggleEvent, HelixElement, HelixLoadMoreEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, HelixToggleEvent, inRowOrder, MixinCollection, onAndroid, parse, ReorderController, rangeAdd, reflectElements, requestChange, scrollingAncestor, sort, splitValues, toggleEvery, treeArrow, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorAt, assignSlots, auditName, commaList, customElement, cycle, everyState, followLink, format, formatWords, HelixBeforeToggleEvent, HelixElement, HelixLoadMoreEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, HelixToggleEvent, inRowOrder, MixinCollection, onAndroid, parse, ReorderController, rangeAdd, reflectElements, requestChange, scrollingAncestor, sort, splitValues, toggleEvery, treeArrow, VirtualizeController, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -46,6 +46,7 @@ const lengthOf = (element) => textOf(element).length;
 const numberOf = (value) => Number(value.replaceAll(',', ''));
 const STATUS = new Set(['empty', 'error', 'loading']);
 const NAMED = new Set([...STATUS, 'heading']);
+const ESTIMATE = 40;
 let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
@@ -78,9 +79,11 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.selectRowLabel = 'Select {row}';
         this.sortedLabel = '{direction, select, ascending {Sorted by {column}, ascending} descending {Sorted by {column}, descending} other {Sorted by {column}}}';
         this.unsortedLabel = 'Not sorted';
+        this.windowed = false;
         this.sortState = undefined;
         this.selectedState = undefined;
         this.expandedState = undefined;
+        this.memo = {};
         this.headed = false;
         this.aria = new AriaForwardController(this, {
             label: true,
@@ -95,9 +98,11 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             },
             columns: () => this.tableColumns.filter((column) => column.shown),
             disclose: (at, forward) => this.disclose(at, forward),
+            drawn: () => (this.windowed ? new Set(this.drawnRows) : undefined),
             lead: () => this.lead,
             on: () => this.grid,
             part: (name) => this.partNamed(name),
+            reveal: (row) => this.revealRow(row),
             rows: () => (this.childrenKnown ? this.arrangedRows : []),
             rowWords: () => this.arrangedRows.map((row) => textOf(row.children[0])),
             selectAll: () => this.selectable &&
@@ -105,6 +110,15 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
                 this.requestSelected(new Set([...this.chosen, ...this.enabledKeys])),
             selectRange: (to, from) => this.selectRange(to, from),
         });
+        this.virtualize = new VirtualizeController(this, {
+            container: () => (this.windowed ? this.partNamed('table') : null),
+            count: () => this.arrangedCount,
+            estimate: () => ESTIMATE,
+            measured: () => this.windowed,
+            rows: () => (this.windowed ? this.measuredRows() : []),
+        });
+        this.arrangedCount = 0;
+        this.drawnRows = [];
         this.reorder = new ReorderController(this, {
             axis: 'block',
             box: (key) => this.gripOf(this.rowFor(key))?.getBoundingClientRect(),
@@ -191,6 +205,11 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.watcher = undefined;
         this.alignment = undefined;
         this.aligned = '';
+        this.nearEnd = () => {
+            if (this.windowed && this.loadMore && this.virtualize.endInSight(this.arrangedCount)) {
+                this.askForMore();
+            }
+        };
         this.endInView = false;
     }
     static { this.words = 'helix-table'; }
@@ -219,7 +238,23 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.requestUpdate('sort', previous);
     }
     get nests() {
-        return this.childrenKnown && this.keyed.some(({ row }) => (row.parent ?? '') !== '');
+        return this.remember('nests', () => this.childrenKnown && this.keyed.some(({ row }) => (row.parent ?? '') !== ''));
+    }
+    remember(key, compute) {
+        const memo = this.memo;
+        if (Object.keys(memo).length === 0) {
+            queueMicrotask(() => {
+                if (this.memo === memo) {
+                    this.memo = {};
+                }
+            });
+        }
+        memo[key] ??= compute();
+        return memo[key];
+    }
+    requestUpdate(name, oldValue, options) {
+        this.memo = {};
+        super.requestUpdate(name, oldValue, options);
     }
     get open() {
         return new Set(commaList(this.expanded));
@@ -251,6 +286,44 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             row.dispatchEvent(new HelixToggleEvent({ checked: next }));
         }
     }
+    get hasRows() {
+        return (this.windowed && this.arrangedCount > 0) || super.hasRows;
+    }
+    measuredRows() {
+        const rows = this.arrangedRows;
+        const at = new Map(rows.map((row, index) => [row, index]));
+        return this.drawnRows.flatMap((row) => {
+            const cell = [...row.children].find((child) => child.getAttribute('hidden') === null && child.getAttribute('slot') === null);
+            const index = at.get(row);
+            return cell instanceof HTMLElement && index !== undefined ? [{ element: cell, index }] : [];
+        });
+    }
+    keptRow(rows) {
+        const { first, last } = this.virtualize.window;
+        const active = this.getRootNode().activeElement;
+        const focused = this.grid
+            ? this.gridKeys.current().row
+            : rows.findIndex((row) => active !== null && row.contains(active));
+        return focused >= 0 && (focused < first || focused >= last) ? focused : undefined;
+    }
+    windowOf(rows) {
+        const { first, last } = this.virtualize.window;
+        const drawn = rows.slice(first, last);
+        const kept = this.keptRow(rows);
+        const row = kept === undefined ? undefined : rows[kept];
+        if (kept !== undefined && row) {
+            return kept < first ? [row, ...drawn] : [...drawn, row];
+        }
+        return drawn;
+    }
+    revealRow(row) {
+        if (!this.windowed) {
+            return;
+        }
+        const heading = this.gridKeys.cellAt({ column: 0, row: -1 });
+        this.virtualize.reveal(row, heading?.getBoundingClientRect().height ?? 0);
+        this.virtualize.measure();
+    }
     get lead() {
         return [
             ...(this.reorderable ? ['grip'] : []),
@@ -282,6 +355,9 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         return this.requestSort(format(cycle(parse(this.sort), field)));
     }
     get arrangedRows() {
+        return this.remember('arranged', () => this.arrange());
+    }
+    arrange() {
         const rows = this.slotted;
         const spec = parse(this.sort);
         const declared = this.tableColumns;
@@ -381,10 +457,10 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         });
     }
     get keyed() {
-        return this.slotted.map((row, index) => ({
+        return this.remember('keyed', () => this.slotted.map((row, index) => ({
             key: row.value || String(index),
             row: row,
-        }));
+        })));
     }
     get chosen() {
         return new Set(commaList(this.selected));
@@ -538,10 +614,26 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         const tree = this.nests;
         const shapes = tree ? this.shape() : undefined;
         const open = this.open;
+        const drawn = this.windowed ? new Set(this.drawnRows) : undefined;
+        const places = drawn
+            ? new Map(this.arrangedRows.map((row, index) => [row, index + 2]))
+            : undefined;
         for (const { key, row } of this.keyed) {
             if (!row.isTableRow) {
                 continue;
             }
+            if (drawn && !drawn.has(row)) {
+                const shape = shapes?.get(key);
+                whenHydrated(row, () => {
+                    row.selectable = this.selectable;
+                    row.gripLabel = this.reorderable ? row.gripLabel || ' ' : '';
+                    row.level = shape?.level ?? 0;
+                    row.branch = shape?.branch ?? false;
+                    row.open = open.has(key);
+                });
+                continue;
+            }
+            const place = places?.get(row) ?? 0;
             const name = textOf(row.children[0]) || key;
             const label = formatWords(this, 'selectRowLabel', { row: name });
             const grip = this.reorderable ? formatWords(this, 'moveRowLabel', { row: name }) : '';
@@ -560,6 +652,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
                 row.open = open.has(key);
                 row.expandLabel = expand;
                 row.expandWith = tree ? () => this.toggleRow(key) : undefined;
+                row.rowIndex = place;
             });
         }
     }
@@ -676,7 +769,11 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         const columns = new Set(this.tableColumns);
         const headings = new Set(this.headings);
         const status = [...(this.children ?? [])].filter((child) => STATUS.has(child.getAttribute('slot') ?? ''));
-        assignSlots(this.renderRoot, [...columns, ...headings, ...status, ...this.arrangedRows], (child) => columns.has(child)
+        const arranged = this.arrangedRows;
+        this.arrangedCount = arranged.length;
+        const rows = this.windowed ? this.windowOf(arranged) : arranged;
+        this.drawnRows = this.windowed ? rows : [];
+        assignSlots(this.renderRoot, [...columns, ...headings, ...status, ...rows], (child) => columns.has(child)
             ? 'columns'
             : headings.has(child)
                 ? 'heading'
@@ -719,14 +816,22 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.markSorted();
         this.markSelected();
         this.nameByHeading();
+        auditName(this, () => null, 'Give it a `label`, or put a heading in its `heading` slot, that says what the rows are.', () => this.label !== '' || this.headings.length > 0);
         if (this.childrenKnown) {
             this.gridKeys.mark();
             this.gridKeys.place();
         }
+        if (this.windowed) {
+            this.virtualize.measure();
+            this.virtualize.settle();
+        }
         this.watchEnd();
     }
     watchEnd() {
-        const end = this.loadMore ? this.renderRoot.querySelector('[data-end]') : null;
+        if (this.windowed) {
+            this.nearEnd();
+        }
+        const end = this.loadMore && !this.windowed ? this.renderRoot.querySelector('[data-end]') : null;
         if (end === this.watchedEnd) {
             if (this.endInView) {
                 this.askForMore();
@@ -810,6 +915,9 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
     render() {
         const template = this.template;
         const grid = this.grid;
+        const windowed = this.windowed && this.childrenKnown;
+        const count = windowed ? this.arrangedRows.length : 0;
+        const room = windowed ? this.virtualize.spacers(this.keptRow(this.arrangedRows)) : undefined;
         const start = grid ? html `<span part="grid-start" tabindex="-1"></span>` : nothing;
         const end = grid ? html `<span part="grid-end" tabindex="-1"></span>` : nothing;
         return html `<slot name="heading"></slot>${start}<div
@@ -818,15 +926,19 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
       aria-multiselectable=${grid && this.selectable ? (this.single ? 'false' : 'true') : nothing}
       aria-busy=${this.loading ? 'true' : nothing}
       aria-label=${this.label || this.fallbackLabel}
+      aria-rowcount=${windowed ? count + 1 : nothing}
       style=${template ? `--table-template: ${template}` : ''}
+      @scroll=${this.nearEnd}
     >
-      <div part="head" role="row">${this.renderGripHead()}${this.renderSelectAll()}${this.renderExpandHead()}<slot name="columns"></slot></div>
+      <div part="head" role="row" aria-rowindex=${windowed ? 1 : nothing}>${this.renderGripHead()}${this.renderSelectAll()}${this.renderExpandHead()}<slot name="columns"></slot></div>
+      ${room ? html `<div part="before" role="presentation" style="block-size: ${room.before}px"></div>` : nothing}
       <slot
         @slotchange=${(event) => {
             this.countRows(event);
             this.handleSlotChange();
         }}
       ></slot>
+      ${room ? html `<div part="after" role="presentation" style="block-size: ${room.after}px"></div>` : nothing}
       ${this.errorText === ''
             ? this.renderStatus(this.hasRows, grid ? 'gridcell' : 'cell')
             : html `<p part="error" role="row"><span role=${grid ? 'gridcell' : 'cell'}><slot name="error">${this.errorText}</slot></span></p>`}
@@ -948,6 +1060,9 @@ __decorate([
     words,
     property({ attribute: 'unsorted-label' })
 ], HelixHeadlessTable.prototype, "unsortedLabel", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessTable.prototype, "windowed", void 0);
 __decorate([
     state()
 ], HelixHeadlessTable.prototype, "sortState", void 0);

package/dist/table/row/table-row.d.ts

@@ -157,6 +157,12 @@ export declare class HelixHeadlessTableRow extends HelixElement {
      * table. Not a consumer's to set.
      */
     level: number;
+    /**
+     * @internal The row's place among the table's rows, the headings being 1,
+     * in a `windowed` table, which draws only some of them, and 0 otherwise.
+     * Written by the table. Not a consumer's to set.
+     */
+    rowIndex: number;
     /** @internal Whether rows sit under this one. Written by the table. */
     branch: boolean;
     /** @internal Whether the rows under this one are shown. Written by the table. */
@@ -177,6 +183,17 @@ export declare class HelixHeadlessTableRow extends HelixElement {
      */
     alignCells(rules: CSSStyleSheet): void;
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * Names the row by its header cell, the cell with `header` among cells of
+     * values, or by its first cell where it has none, as React Aria's rows are
+     * named.
+     *
+     * **Named from its contents, a row read out its checkbox's name too**, "Select
+     * 412 412 main Passed" in a `selectable` table, since the checkbox is a cell of
+     * the row's own. Not on a server, which has no cells to point at, and not
+     * where a page named the row itself.
+     */
+    private nameByHeader;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /**

package/dist/table/row/table-row.js

@@ -31,6 +31,7 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         this.gridCell = false;
         this.selectStop = false;
         this.level = 0;
+        this.rowIndex = 0;
         this.branch = false;
         this.open = false;
         this.expandLabel = '';
@@ -53,6 +54,7 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
             followLink(this.ownerDocument, { href: this.href, rel: this.rel, target: this.target }, event);
         };
         this.handleSlotChange = () => {
+            this.requestUpdate();
             for (const cell of this.children) {
                 if ('isTableCell' in cell) {
                     ;
@@ -75,8 +77,10 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'row' });
+        this.nameByHeader();
         this.internals.ariaSelected = this.gridCell && this.selectable ? String(this.selected) : null;
         this.internals.ariaDisabled = this.disabled ? 'true' : null;
+        this.internals.ariaRowIndex = this.rowIndex > 0 ? String(this.rowIndex) : null;
         const tree = this.gridCell && this.level > 0;
         this.internals.ariaLevel = tree ? String(this.level) : null;
         this.internals.ariaExpanded = tree && this.branch ? String(this.open) : null;
@@ -87,6 +91,22 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         this.toggleState('drop-after', this.move === 'drop-after');
         this.toggleState('drop-before', this.move === 'drop-before');
     }
+    nameByHeader() {
+        const cells = this.childrenKnown
+            ? this.knownChildren.filter((child) => 'isTableCell' in child && !child.hasAttribute('hidden'))
+            : [];
+        const values = cells.some((cell) => !cell.hasAttribute('header'));
+        const header = (values ? cells.find((cell) => cell.hasAttribute('header')) : undefined) ?? cells[0];
+        const own = this.hasAttribute('aria-label') || this.hasAttribute('aria-labelledby');
+        if ('ariaLabelledByElements' in this.internals) {
+            hostAria(this.internals, { labelledBy: header && !own ? [header] : [] });
+        }
+        else {
+            hostAria(this.internals, {
+                label: header && !own ? (header.textContent ?? '').replace(/\s+/g, ' ').trim() : '',
+            });
+        }
+    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('click', this.handleClick);
@@ -210,6 +230,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessTableRow.prototype, "level", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "rowIndex", void 0);
 __decorate([
     state()
 ], HelixHeadlessTableRow.prototype, "branch", void 0);

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

@@ -56,7 +56,7 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * | 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. |
  * | A letter on the half of the day | Picks the half whose name starts with it, such as A for AM. |
- * | Backspace, Delete on a segment | Empty the segment. |
+ * | Backspace, Delete on a segment | Take off its last digit, or move to the segment before where it is empty. |
  * | Left, Right on a segment | Move to the previous or the next segment, along the line of text. |
  *
  * In the list, the keys are `TimePicker`'s.
@@ -123,6 +123,7 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-list-loading - The text shown while the options load.
  * @csspart picker-list-search - The region that holds the filter field.
  * @csspart picker-list-search-field - The filter field.
+ * @csspart picker-now - The picker's button that chooses the current time, which Time Input does not draw.
  * @csspart picker-option - One time in the picker. Carries `data-between` inside a range.
  * @csspart picker-option-between - A time inside a chosen range, between its two ends. Set together with `picker-option`.
  * @csspart picker-option-description - The caption under the label, when there is one.

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

@@ -233,7 +233,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         list-filter-icon: picker-list-filter-icon, list-filter-mark: picker-list-filter-mark,
         list-hint: picker-list-hint, list-items: picker-list-items, list-label: picker-list-label,
         list-live: picker-list-live, list-loading: picker-list-loading, list-search: picker-list-search,
-        list-search-field: picker-list-search-field, option: picker-option,
+        list-search-field: picker-list-search-field, now: picker-now, option: picker-option,
         option-between: picker-option-between, option-item-active: picker-option-item-active,
         option-item-selected: picker-option-item-selected,
         option-description: picker-option-description, option-item: picker-option-item,

package/dist/time-picker/root/time-picker-root.d.ts

@@ -14,7 +14,9 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * between the wheels, and Tab does too.
  *
  * `hour-cycle` writes every time on a twelve or a twenty-four hour clock
- * whatever the locale, and `seconds` holds times to the second.
+ * whatever the locale, and `seconds` holds times to the second. `show-now`
+ * draws a button that chooses the current time, on the step and inside the
+ * bounds.
  *
  * The step keeps the list usable. At the default of 15 minutes a day is 96
  * rows, which people can scroll or type into. At 1 minute it is 1,440. Use the
@@ -103,6 +105,7 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * @csspart list-loading - The text shown while the options load.
  * @csspart list-search - The region that holds the filter field.
  * @csspart list-search-field - The filter field.
+ * @csspart now - The button that chooses the current time, drawn with `show-now`.
  * @csspart option - One time in the list. It carries `data-between` inside a range, and inside the run to the time under the pointer while a range waits for its second end.
  * @csspart option-between - A time inside a chosen range, excluding its ends, beside `option`.
  * @csspart option-description - The caption under the time's label, when there is one.
@@ -242,6 +245,11 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * whenever a mode is set.
      */
     mode?: 'multiple' | 'range';
+    /**
+     * The words on the button that chooses the current time, drawn with
+     * `show-now`.
+     */
+    nowLabel: string;
     /**
      * The validation message for a time after `max`. `{max}` is replaced with
      * `max`, written in `locale`.
@@ -322,6 +330,35 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * sequence.
      */
     private readonly handleChange;
+    /**
+     * Requests the times a pick announced, kept to what the mode allows, and
+     * returns whether the value changed.
+     */
+    private choose;
+    /**
+     * Chooses the current time, as a press on the `show-now` button does, and
+     * returns whether the value changed.
+     *
+     * The time is read off the reader's clock and moved to the nearest time on
+     * offer that is not barred, so it falls on the `step` and inside `min` and
+     * `max`. It is requested as a pick is, so `helix-before-change` can cancel
+     * it. With a `mode` the time joins the times held, and a range that holds
+     * two starts over from it, as a third pick does.
+     */
+    selectNow(): boolean;
+    /**
+     * Puts the list's highlight on the offered time nearest one held between two
+     * steps, so the arrows move from there.
+     *
+     * No row holds `14:07` at a step of 15, so the list had nothing to move
+     * from: Down went to the top of the list, and in a list that chooses as it
+     * moves, the value became 00:00. Down now goes to 14:15.
+     */
+    private highlightNearest;
+    private readonly handleListFocus;
+    private readonly handleNow;
+    /** The button that chooses the current time, drawn with `show-now`. */
+    private renderNow;
     /**
      * The time under the pointer while a range holds one end, which the list
      * bands the range to before it is chosen, as Date Picker does.
@@ -409,6 +446,16 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * the wheels.
      */
     seconds: boolean;
+    /**
+     * Draws a button under the times that chooses the current time, as
+     * `selectNow()` does.
+     *
+     * For a form about something happening now, such as a shift starting or a
+     * dose taken, where the reader would otherwise scroll to the time on the
+     * clock. The button is a tab stop after the times, and its words are
+     * `now-label`.
+     */
+    showNow: boolean;
     /**
      * How far apart the offered times are, in minutes, or in seconds with
      * `seconds`.

package/dist/time-picker/root/time-picker-root.js

@@ -23,6 +23,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
         this.manual = false;
         this.max = '23:59';
         this.min = '00:00';
+        this.nowLabel = 'Now';
         this.rangeOverflowMessage = 'Choose a time at or before {max}.';
         this.rangeUnderflowMessage = 'Choose a time at or after {min}.';
         this.handleListInput = (event) => {
@@ -33,25 +34,13 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
             if (this.isDisabled) {
                 return;
             }
-            const announced = event.detail.value;
-            if (announced.split(',').some((one) => this.barred(one.trim()))) {
-                return;
-            }
-            if (this.mode !== 'range') {
-                this.requestValue(announced);
-                return;
-            }
-            const next = announced
-                .split(',')
-                .map((one) => one.trim())
-                .filter(Boolean);
-            if (next.length <= 2) {
-                this.requestValue(next.sort().join(','));
-                return;
-            }
-            const before = new Set(this.held);
-            const added = next.find((one) => !before.has(one));
-            this.requestValue(added ?? '');
+            this.choose(event.detail.value);
+        };
+        this.handleListFocus = () => {
+            this.highlightNearest();
+        };
+        this.handleNow = () => {
+            this.selectNow();
         };
         this.previewed = '';
         this.handleListHover = (event) => {
@@ -93,6 +82,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
         this.readOnly = false;
         this.required = false;
         this.seconds = false;
+        this.showNow = false;
         this.step = 15;
         this.stepMismatchMessage = 'Choose one of the times on offer.';
         this.unavailableMessage = 'Choose a time that is available.';
@@ -155,6 +145,65 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
     get held() {
         return commaList(this.value);
     }
+    choose(announced) {
+        if (announced.split(',').some((one) => this.barred(one.trim()))) {
+            return false;
+        }
+        if (this.mode !== 'range') {
+            return this.requestValue(announced);
+        }
+        const next = announced
+            .split(',')
+            .map((one) => one.trim())
+            .filter(Boolean);
+        if (next.length <= 2) {
+            return this.requestValue(next.sort().join(','));
+        }
+        const before = new Set(this.held);
+        const added = next.find((one) => !before.has(one));
+        return this.requestValue(added ?? '');
+    }
+    selectNow() {
+        if (this.isDisabled) {
+            return false;
+        }
+        const clock = new Date();
+        const at = clock.getHours() * 3600 + clock.getMinutes() * 60 + clock.getSeconds();
+        const open = this.times.filter((time) => !this.barredAt(time));
+        if (open.length === 0) {
+            return false;
+        }
+        const now = this.valueFor(nearestTime(open, at));
+        if (this.mode === undefined) {
+            return this.requestValue(now);
+        }
+        if (this.held.includes(now)) {
+            return false;
+        }
+        return this.choose([...this.held, now].join(','));
+    }
+    highlightNearest() {
+        const at = this.mode === undefined ? valueAsSeconds(this.value) : null;
+        if (at === null || this.times.includes(at)) {
+            return;
+        }
+        const open = this.times.filter((time) => !this.barredAt(time));
+        if (open.length === 0) {
+            return;
+        }
+        this.partNamed('list')?.highlightValue?.(this.valueFor(nearestTime(open, at)));
+    }
+    renderNow() {
+        if (!this.showNow) {
+            return nothing;
+        }
+        return html `<button
+      part="now"
+      type="button"
+      ?disabled=${this.isDisabled || this.readOnly}
+      @click=${this.handleNow}
+    >${this.nowLabel}</button>`;
+    }
     between(at) {
         if (this.mode !== 'range') {
             return false;
@@ -191,6 +240,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
             return;
         }
         if (this.variant !== 'wheels') {
+            this.highlightNearest();
             this.partNamed('list')?.reveal?.();
             return;
         }
@@ -421,6 +471,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
       ?manual=${this.manual}
       ?multiple=${this.mode !== undefined}
       .value=${this.value}
+      @focusin=${this.handleListFocus}
       @helix-before-change=${this.handleChange}
       @input=${this.handleListInput}
       @pointerleave=${this.handleListLeave}
@@ -446,9 +497,9 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
     }
     render() {
         if (this.variant === 'wheels' && this.mode === undefined) {
-            return html `${this.renderSlottedLabel()}${this.renderSpinner()}${this.renderHint()}${this.renderPickerFeedback()}`;
+            return html `${this.renderSlottedLabel()}${this.renderSpinner()}${this.renderNow()}${this.renderHint()}${this.renderPickerFeedback()}`;
         }
-        return html `${this.renderSlottedLabel()}${this.renderList()}${this.renderHint()}${this.renderPickerFeedback()}`;
+        return html `${this.renderSlottedLabel()}${this.renderList()}${this.renderNow()}${this.renderHint()}${this.renderPickerFeedback()}`;
     }
     get valueAsDate() {
         const at = valueAsSeconds(this.value);
@@ -512,6 +563,10 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTimePicker.prototype, "mode", void 0);
+__decorate([
+    words,
+    property({ attribute: 'now-label' })
+], HelixHeadlessTimePicker.prototype, "nowLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'range-overflow-message' })
@@ -535,6 +590,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessTimePicker.prototype, "seconds", void 0);
+__decorate([
+    property({ attribute: 'show-now', type: Boolean })
+], HelixHeadlessTimePicker.prototype, "showNow", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessTimePicker.prototype, "step", void 0);

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

@@ -115,6 +115,7 @@ import '../../menu/index.js';
  * @csspart captions-menu-header - The bar above a submenu, holding the way back and its name.
  * @csspart captions-menu-live - The inner menu's `live` part, a live region that repeats the empty and loading text for screen readers.
  * @csspart captions-menu-loading - The text shown while the items are loading.
+ * @csspart captions-menu-search-field - The inner menu's filter field, drawn with `filterable`.
  * @csspart captions-menu-surface - The floating panel the menu is drawn on.
  * @csspart captions-menu-title - The name of the submenu that is showing.
  * @csspart controls - The control bar along the bottom.
@@ -148,6 +149,7 @@ import '../../menu/index.js';
  * @csspart overflow-header - The bar above a submenu, holding the way back and its name.
  * @csspart overflow-live - The inner menu's `live` part, a live region that repeats the empty and loading text for screen readers.
  * @csspart overflow-loading - The text shown while the items are loading.
+ * @csspart overflow-search-field - The inner menu's filter field, drawn with `filterable`.
  * @csspart overflow-surface - The floating panel the menu is drawn on.
  * @csspart overflow-title - The name of the submenu that is showing.
  * @csspart pip - The picture-in-picture button, when `extra-controls` includes it and the browser supports it.