@fusion.dev/helix-headless 0.166.0 → 0.167.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/virtual-list/root/virtual-list-root.d.ts

@@ -8,6 +8,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * `const row: VirtualListRenderer<Person> = (person) => person.name`.
  */
 export type VirtualListRenderer<Item = unknown> = (item: Item, index: number) => unknown;
+/**
+ * Draws one section's header, for a list given `sectionField`, given the
+ * section's name and its place among the sections. Returns anything Lit
+ * renders.
+ */
+export type VirtualListSectionRenderer = (name: string, index: number) => unknown;
 /** Where `scrollToIndex` puts an item, and how it gets there. */
 export interface VirtualListScrollOptions {
     /**
@@ -55,12 +61,26 @@ export interface VirtualListRange {
  * smallest item size, and follows the box as it resizes. `gap` spaces the rows, and the columns
  * of a grid, by a number of pixels the list counts in each row's place.
  *
+ * **Across.** `orientation="horizontal"` lays the items out along a line and
+ * scrolls it sideways, as a strip of cards does, windowed the same way:
+ * `estimate` is then an item's width, and the box needs an inline size.
+ *
+ * **Sections.** `section-field` names the field of each item that says which
+ * section it is in, and the list draws a header before each section's items,
+ * as React Aria's list box sections do. Each section is an element with the
+ * `group` role, named by its header, which is its first child and carries
+ * `data-header`, so your stylesheet styles it, such as with `position:
+ * sticky`. A section starts wherever the field changes, so give the items in
+ * order. The window counts the headers with the items, and a section the
+ * window starts inside is drawn with its header. `renderSection` draws a
+ * header of your own.
+ *
  * **Keyboard.** The list is one tab stop.
  *
  * | Key | What it does |
  * |---|---|
  * | Down, Up | Moves to the next or the previous item, or in a grid to the item in the same column on the next or the previous line. |
- * | Right, Left | In a grid, moves to the next or the previous item along the line, the other way round on a right-to-left page. |
+ * | Right, Left | In a grid, moves to the next or the previous item along the line, the other way round on a right-to-left page. In a list that runs across, moves to the next or the previous item the same way, and Down and Up are left to the row. |
  * | Home, End | Moves to the first or the last item. |
  * | Page Down, Page Up | Moves by the number of items, or of lines in a grid, on screen. |
  * | A letter or a word | Moves to the next item whose text starts with what you typed. |
@@ -153,6 +173,7 @@ export interface VirtualListRange {
  * @csspart viewport - The scrolling box. On this tier, it needs only a block size.
  *
  * @cssstate empty - While the list has read its items and holds none.
+ * @cssstate horizontal - While the list runs across, with `orientation="horizontal"`.
  * @cssstate loading - While `loading` is set.
  */
 export declare class HelixHeadlessVirtualList extends HelixElement {
@@ -247,6 +268,13 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * follows the box as it resizes, which `columns` then does not decide.
      */
     minColumnWidth: number;
+    /**
+     * Which way the list runs. `horizontal` lays the items out along a line
+     * and scrolls it sideways: Left and Right move between items, the other
+     * way round on a right-to-left page, and `estimate` is an item's width. A
+     * grid always runs down.
+     */
+    orientation: 'horizontal' | 'vertical';
     /**
      * Draws one item into its row, given the item and its index. Set it as a
      * property.
@@ -256,6 +284,20 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * and place in the set. Where it is unset, the row `<template>` is used.
      */
     renderItem: VirtualListRenderer<any> | undefined;
+    /**
+     * Draws each section's header, given its name and its place among the
+     * sections, for a list given `section-field`. Set it as a property. Where
+     * it is unset, the header is the name as text.
+     */
+    renderSection: VirtualListSectionRenderer | undefined;
+    /**
+     * The field of each item that names its section, as a key or a path of
+     * keys. Set, the items are drawn in sections: a header, then the items, in
+     * an element with the `group` role that the header names. A section starts
+     * wherever the field changes, so give the items in order. A list of one
+     * column only.
+     */
+    sectionField: string;
     /**
      * What a press does to the items already chosen: `toggle` adds or takes out
      * the item, and `replace` selects it alone and lets the arrow keys carry the
@@ -358,6 +400,14 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
     private watchWidth;
     /** The items a span of lines holds. */
     private itemsOn;
+    /** The line item `at` is on: its entry in a list with sections. */
+    private lineOf;
+    /** Whether the list runs across, which a grid never does. */
+    private get horizontal();
+    /** The sections and the items they were read from, kept until either changes. */
+    private sectionsRead;
+    /** The sections `section-field` divides the items into, in a list of one column. */
+    private get sections();
     /**
      * Scrolls the list to show the item at `index`.
      *
@@ -443,6 +493,8 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
     private isDisabled;
     /** The item a row element drew, for an element that is one of the rows. */
     private indexOf;
+    /** Whether a node is one of the rows: a child, or a child of a section. */
+    private isRow;
     /** The row that holds the tab stop for item `index`, where it is drawn. */
     private rowFor;
     /**
@@ -541,7 +593,23 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * buttons are in the tab order, and those of every other row wait.
      */
     private place;
-    /** The spacers' heights: the window's, with the line kept for focus taking its own room. */
+    /** The sections the rows were last placed in. */
+    private placedSections;
+    /** The function the drawn headers were drawn by, so a new one draws them again. */
+    private headedBy;
+    /** Ties each header's id to this list. */
+    private readonly sectionId;
+    /**
+     * The section elements a pass draws rows into, by section, for the
+     * sections of the wanted items: each a `group` named by its header, which
+     * is its first child. The ones no wanted item is in leave, and all of them
+     * do when the sections change.
+     */
+    private groups;
+    /**
+     * The spacers' sizes: the window's, with the line kept for focus taking its
+     * own room, and so do the headers drawn with their sections from outside it.
+     */
     private spacerSizes;
     protected render(): TemplateResult;
 }