@fusion.dev/helix-headless 0.142.1 → 0.143.0

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

@@ -26,17 +26,34 @@ const size = (bytes, locale) => {
     return `${written} ${unit}`;
 };
 const kind = (file) => {
-    const subtype = file.type.split('/')[1];
-    if (subtype) {
-        return subtype.replace(/^x-/, '').split('+')[0]?.toUpperCase() ?? 'File';
+    const extension = /\.([a-z0-9]{1,6})$/i.exec(file.name)?.[1];
+    if (extension) {
+        return extension.toUpperCase();
     }
-    const extension = file.name.includes('.') ? file.name.split('.').pop() : '';
-    return extension ? extension.toUpperCase() : 'File';
+    const subtype = file.type.split('/')[1]?.replace(/^x-/, '').split('+')[0] ?? '';
+    return /^[a-z0-9]{1,6}$/i.test(subtype) ? subtype.toUpperCase() : 'File';
+};
+const accepts = (file, accept) => {
+    const tokens = accept
+        .split(',')
+        .map((token) => token.trim().toLowerCase())
+        .filter(Boolean);
+    if (tokens.length === 0) {
+        return true;
+    }
+    const name = file.name.toLowerCase();
+    const type = file.type.toLowerCase();
+    return tokens.some((token) => token.startsWith('.')
+        ? name.endsWith(token)
+        : token.endsWith('/*')
+            ? type.startsWith(token.slice(0, -1))
+            : type === token);
 };
 let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(HelixFormElement) {
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
+            named: () => this.labeled,
             target: () => this.partNamed('control'),
         });
         this.accept = '';
@@ -67,7 +84,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
                 return;
             }
             event.preventDefault();
-            const dropped = [...event.dataTransfer.files];
+            const dropped = [...event.dataTransfer.files].filter((file) => accepts(file, this.accept));
             if (dropped.length === 0) {
                 return;
             }
@@ -75,9 +92,14 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         };
         this.handleRemove = (event) => {
             const at = Number(event.currentTarget.dataset.at);
-            if (Number.isFinite(at)) {
-                this.removeAt(at);
+            if (!Number.isFinite(at)) {
+                return;
             }
+            this.removeAt(at);
+            this.updateComplete.then(() => {
+                const buttons = [...this.renderRoot.querySelectorAll('[part="remove"]')];
+                (buttons[Math.min(at, buttons.length - 1)] ?? this.control)?.focus();
+            });
         };
     }
     get files() {
@@ -152,6 +174,10 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         this.committed = this.files;
         this.sync();
     }
+    updated(changed) {
+        super.updated(changed);
+        this.sync();
+    }
     focus(options) {
         this.control?.focus(options);
     }

package/dist/filter-input/menu/filter-menu.d.ts

@@ -151,6 +151,15 @@ export declare class HelixHeadlessFilterMenu extends HelixElement {
      * a filter is never left looking at a menu that says it took.
      */
     apply(field: string, values: readonly string[], operator?: string): boolean;
+    /**
+     * Keeps each choice row's tick where this element puts it.
+     *
+     * A choice row checks itself after `helix-before-toggle`, and this element
+     * already sets `checked` on every row from its own state. The request is
+     * refused, so a tick moves only when the choice is applied, and stopped, so
+     * it does not reach a page that never placed the row.
+     */
+    private readonly keepTick;
     /**
      * A row was chosen: a value to tick, or a comparison to use.
      *

package/dist/filter-input/menu/filter-menu.js

@@ -17,6 +17,12 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
         this.label = 'Filter';
         this.picked = new Map();
         this.comparisons = new Map();
+        this.keepTick = (event) => {
+            if (event.target === event.currentTarget) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
         this.handleSelect = (event) => {
             const row = event.composedPath()[0];
             if (!(row instanceof HTMLElement)) {
@@ -152,6 +158,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
                       checkable
                       exclusive
                       ?checked=${operator.name === using?.name}
+                      @helix-before-toggle=${this.keepTick}
                       data-facet="operator"
                       data-field=${name}
                       data-value=${operator.name}
@@ -173,6 +180,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
               checkable
               ?exclusive=${using?.arity === 'one'}
               ?checked=${ticked.has(option.value)}
+              @helix-before-toggle=${this.keepTick}
               data-facet="value"
               data-field=${name}
               data-value=${option.value}

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

@@ -1,6 +1,6 @@
 import { AriaForwardController, HelixFormElement, PopoverController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-import type { HelixHeadlessFilterField } from '../field/filter-field.js';
+import { HelixHeadlessFilterField } from '../field/filter-field.js';
 declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinTokensInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A text field for filters, with the active filters shown in it as tokens.
@@ -69,6 +69,9 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  * @documentation https://fusion.dev/helix/components/filter-input
  *
  * @slot end - Content after the text, such as a count or a control.
+ * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
+ * @slot hint - Help under the control, for content richer than the `hint` text.
+ * @slot label - The label, for content richer than the `label` text.
  * @slot start - Content before the text, such as a search icon.
  * @slot suggestions - Suggestions for what to type next, as `Option`s and `Option.Group`s.
  * @slot tags - The active filters, as `FilterChip`s or `Tag`s.
@@ -81,7 +84,7 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  * @event {HelixFacetEvent} helix-facet - Fired when a filter changes, whether it was typed, picked, or removed. Cancelable: call `preventDefault()` to leave the text and the chip as they were.
  * @event {HelixSelectEvent} helix-select - Fired by an option in `suggestions` when it is chosen, and bubbles out of the field. Cancelable: call `preventDefault()` to stop other listeners acting on it. The field takes no action on a choice; you decide what it does.
  * @event {Event} input - Fired when the text changes.
- * @event {Event} toggle - Fired when the suggestions panel opens or closes, with `newState` and `oldState`.
+ * @event {ToggleEvent} toggle - Fired when the suggestions panel opens or closes, with `newState` and `oldState`.
  *
  * @csspart clear - The button that empties the field.
  * @csspart control - The input itself.

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

@@ -8,7 +8,9 @@ import { AriaForwardController, customElement, drawIcon, HelixFacetEvent, HelixF
 import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { HelixHeadlessFilterField } from '../field/filter-field.js';
 import { readFilterText } from '../grammar.js';
+import { HelixHeadlessFilterMenu } from '../menu/filter-menu.js';
 const asksToGo = (node) => typeof node?.dismiss === 'function';
 const isOption = (node) => 'active' in node && 'value' in node;
 let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinControllerOpen(MixinTokens(MixinControllerValue(MixinField(HelixFormElement)))) {
@@ -66,7 +68,9 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
             menu.apply(field, []);
         };
         this.handleClear = () => {
-            this.requestValue('');
+            if (this.value !== '' && this.requestValue('')) {
+                this.announceChange();
+            }
             const control = this.control;
             if (control) {
                 restoreValue(control, this.value);
@@ -192,12 +196,13 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         this.control?.setSelectionRange(start, end, direction);
     }
     get fields() {
-        return [
-            ...this.querySelectorAll('helix-headless-filter-field, helix-filter-field'),
-        ];
+        return [...this.querySelectorAll('*')].filter((element) => element instanceof HelixHeadlessFilterField);
     }
     menuFor(field) {
-        for (const menu of this.querySelectorAll('helix-headless-filter-menu, helix-filter-menu')) {
+        for (const menu of this.querySelectorAll('*')) {
+            if (!(menu instanceof HelixHeadlessFilterMenu)) {
+                continue;
+            }
             if (menu.fields.some((declared) => (declared.name ?? '') === field)) {
                 return menu;
             }
@@ -264,7 +269,10 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         this.activeAt = this.activeAt < options.length ? this.activeAt : -1;
     }
     removeLastToken() {
-        const last = this.tokens?.assignedElements({ flatten: true }).at(-1);
+        const last = this.tokens
+            ?.assignedElements({ flatten: true })
+            .filter((token) => !token.hidden)
+            .at(-1);
         if (asksToGo(last)) {
             last.dismiss();
         }
@@ -373,7 +381,14 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
          built only once there were options could never learn that there are
          any. A manual popover puts it in the top layer, so it is not clipped by
          a scrolling table or an overflow on an ancestor. -->
-    <div part="surface" id="suggestions" role="listbox" popover="manual" ?hidden=${!this.open}>
+    <div
+      part="surface"
+      id="suggestions"
+      role="listbox"
+      aria-labelledby=${this.labeled ? this.labelId : nothing}
+      popover="manual"
+      ?hidden=${!this.open}
+    >
       <slot name="suggestions" @slotchange=${this.handleSuggestions}></slot>
     </div>
     ${this.renderHint()}${this.renderFeedback()}`;

package/dist/format-date/root/format-date-root.d.ts

@@ -16,9 +16,15 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * schedules an update for when its current reading expires, and an element
  * showing a date schedules none, so a long feed left open costs almost nothing.
  *
- * **The output is always `<time datetime>`**, so screen readers, copy and
- * paste, and scripts parsing the page get the exact instant, whatever the
- * visible text says.
+ * **The output is always `<time datetime>`**, so copy and paste and scripts
+ * parsing the page get the exact instant, whatever the visible text says. A
+ * screen reader reads the text, so an `elapsed` reading is named in full, such
+ * as "3 hours ago", and carries the whole date as its title.
+ *
+ * **A date with no time, such as `2026-08-04`, is that day everywhere.** It is
+ * formatted in UTC unless `time-zone` says otherwise, as Date Input and Date
+ * Picker format their dates, so a reader west of UTC sees August 4 and not
+ * August 3.
  *
  * @since 0.1.0
  * @status stable
@@ -114,6 +120,8 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
     private written;
     private stopTicking;
     private watching;
+    /** Whether the timestamp is a day with no time, which is formatted in UTC. */
+    private get dateOnly();
     /** The timestamp, or nothing where there is not one to read. */
     private get moment();
     /** Every `Intl.DateTimeFormat` option a consumer set, and none they did not. */

package/dist/format-date/root/format-date-root.js

@@ -4,9 +4,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, elapsedTime, HelixElement, subscribe } from '@fusion.dev/helix-core';
+import { customElement, elapsedTime, HelixElement, relativeTime, subscribe, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
 let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement {
     constructor() {
         super(...arguments);
@@ -18,6 +19,9 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         this.stopTicking = undefined;
         this.watching = undefined;
     }
+    get dateOnly() {
+        return DATE_ONLY.test((this.date || this.written).trim());
+    }
     get moment() {
         const source = this.date || this.written;
         if (source === '') {
@@ -46,6 +50,9 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         if (this.timeZone) {
             asked.timeZone = this.timeZone;
         }
+        else if (this.dateOnly) {
+            asked.timeZone = 'UTC';
+        }
         if (this.timeZoneName) {
             asked.timeZoneName = this.timeZoneName;
         }
@@ -120,10 +127,24 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         if (!moment) {
             return nothing;
         }
-        const text = this.elapsed
-            ? elapsedTime(this.locale)(moment, new Date(this.clock ?? Date.now())).text
-            : new Intl.DateTimeFormat(this.locale || undefined, this.options).format(moment);
-        return html `<time part="time" datetime=${moment.toISOString()}>${text}</time>`;
+        const datetime = this.dateOnly ? (this.date || this.written).trim() : moment.toISOString();
+        if (!this.elapsed) {
+            const text = new Intl.DateTimeFormat(this.locale || undefined, this.options).format(moment);
+            return html `<time part="time" datetime=${datetime}>${text}</time>`;
+        }
+        const now = new Date(this.clock ?? Date.now());
+        const zone = this.timeZone || (this.dateOnly ? 'UTC' : undefined);
+        const whole = new Intl.DateTimeFormat(this.locale || undefined, {
+            dateStyle: 'long',
+            ...(this.dateOnly ? {} : { timeStyle: 'short' }),
+            ...(zone ? { timeZone: zone } : {}),
+        }).format(moment);
+        return html `<time
+      part="time"
+      datetime=${datetime}
+      aria-label=${relativeTime(this.locale)(moment, now).text}
+      title=${whole}
+    >${elapsedTime(this.locale)(moment, now).text}</time>`;
     }
 };
 __decorate([

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

@@ -232,16 +232,37 @@ export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
     /**
      * Moves the keyboard to a row, and the list to show it.
      *
-     * **Scrolled by the row's own box where it is drawn, and by the estimate
-     * where it is not**, so a jump to the end of ten thousand notes lands there
-     * and the row is drawn by the update the scroll asks for.
+     * **The row the keys are on is always drawn**, beside the window where it is
+     * outside it, so `aria-activedescendant` names a row that exists. The list
+     * then scrolls to it, see `revealCursor`.
      */
     private moveTo;
+    /**
+     * Brings the cursor's row into the list's box.
+     *
+     * **By the row's own box once it is in the window, and by the window
+     * otherwise.** The offset of a row that has not been drawn is a guess at its
+     * height, and a guess at 32 pixels was where End and Page Down sent the list
+     * when rows were taller: the list landed far from the row, which then was
+     * not drawn. So the window is moved toward the row, the rows it draws are
+     * measured, and the next try starts from there, a few times at most.
+     */
+    private revealCursor;
+    /** The cursor's row, where it is outside the window and drawn beside it. */
+    private get keptRow();
     /**
      * The keys in the list. **Kept from the frame**, whose arrows pan the
      * drawing: a reader moving through the list was moving the graph under it.
      */
     private readonly handleListKeydown;
+    /** What has been typed toward a note's name, and when the last letter came. */
+    private typed;
+    /**
+     * Moves to the next note whose name starts with what was typed, as a
+     * listbox does. Letters within half a second of each other run together,
+     * and a repeated letter steps through the names that start with it.
+     */
+    private typeahead;
     /**
      * The search field's keys, which belong to the field and never pan the
      * graph. Escape empties a search that has words in it, and passes through

package/dist/graph/root/graph-root.js

@@ -4,10 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, fillTemplate, formatNumbers, HelixElement, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, MixinControllerActive, MixinViewport, VirtualizeController, } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, formatNumbers, HelixElement, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, MixinControllerActive, MixinViewport, scrollItemIntoView, VirtualizeController, } from '@fusion.dev/helix-core';
 import { list, magnifyingGlass } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { adjacencyOf, entriesOf, groupsOf, nameOf, sortedOf, within, withoutGroups, } from './graph-model.js';
 const PAGE = 10;
@@ -65,8 +66,15 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
                 event.preventDefault();
                 event.stopPropagation();
                 this.choose(this.cursor);
+                return;
+            }
+            if (event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.typeahead(event.key);
             }
         };
+        this.typed = { at: 0, text: '' };
         this.handleSearchKeydown = (event) => {
             if (event.key === 'ArrowDown') {
                 event.preventDefault();
@@ -236,18 +244,50 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
     moveTo(index) {
         const last = this.entries.length - 1;
         this.cursor = Math.min(Math.max(index, 0), Math.max(last, 0));
+        void this.updateComplete.then(() => this.revealCursor());
+    }
+    revealCursor(attempts = 8) {
         const list = this.partNamed('list');
         if (!list) {
             return;
         }
-        const row = this.renderRoot.querySelector?.(`[data-index="${this.cursor}"]`);
-        if (row) {
-            row.scrollIntoView?.({ block: 'nearest' });
+        const { first, last } = this.virtualize.window;
+        if (this.cursor >= first && this.cursor < last) {
+            const row = this.renderRoot.querySelector?.(`[data-index="${this.cursor}"]`);
+            if (row) {
+                scrollItemIntoView(row, { scroller: list });
+            }
+            return;
         }
-        else {
-            list.scrollTop = this.cursor * 32;
+        if (attempts === 0) {
+            return;
         }
+        this.virtualize.reveal(this.cursor);
         this.virtualize.measure();
+        void this.updateComplete.then(() => this.revealCursor(attempts - 1));
+    }
+    get keptRow() {
+        const { first, last } = this.virtualize.window;
+        const cursor = this.cursor;
+        return this.entries.length > 0 && (cursor < first || cursor >= last) ? cursor : undefined;
+    }
+    typeahead(letter) {
+        const now = Date.now();
+        const text = now - this.typed.at < 500 ? this.typed.text + letter : letter;
+        this.typed = { at: now, text };
+        const wanted = text.toLocaleLowerCase();
+        const repeated = [...wanted].every((one) => one === wanted[0]);
+        const prefix = repeated ? (wanted[0] ?? '') : wanted;
+        const entries = this.entries;
+        const start = repeated ? this.cursor + 1 : this.cursor;
+        for (let step = 0; step < entries.length; step += 1) {
+            const at = (start + step) % entries.length;
+            const entry = entries[at];
+            if (entry && nameOf(entry.node).toLocaleLowerCase().startsWith(prefix)) {
+                this.moveTo(at);
+                return;
+            }
+        }
     }
     togglePanel(open = !this.panelOpen) {
         const inside = this.panelOpen && this.partNamed('panel')?.contains(this.shadowRoot?.activeElement ?? null);
@@ -290,8 +330,18 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
     renderRows() {
         const { first, last } = this.virtualize.window;
         const total = this.entries.length;
-        return this.entries.slice(first, last).map((entry, offset) => {
-            const index = first + offset;
+        const indices = Array.from({ length: Math.max(0, Math.min(last, total) - first) }, (_, at) => first + at);
+        const kept = this.keptRow;
+        if (kept !== undefined && kept < total) {
+            if (kept < first) {
+                indices.unshift(kept);
+            }
+            else {
+                indices.push(kept);
+            }
+        }
+        return html `${repeat(indices, (index) => index, (index) => {
+            const entry = this.entries[index];
             const relation = this.relationText(entry);
             const chosen = entry.relation === 'selected';
             return html `<div
@@ -311,10 +361,14 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
         <span part="note-name">${nameOf(entry.node)}</span>
         ${relation ? html `<span part="note-relation" aria-hidden="true">${relation}</span>` : nothing}
       </div>`;
-        });
+        })}`;
     }
     render() {
-        const { after, before } = this.virtualize.window;
+        const window = this.virtualize.window;
+        const kept = this.keptRow;
+        const room = kept === undefined ? 0 : this.virtualize.sizeOf(kept);
+        const before = Math.max(0, window.before - (kept !== undefined && kept < window.first ? room : 0));
+        const after = Math.max(0, window.after - (kept !== undefined && kept >= window.last ? room : 0));
         const cursor = this.entries.length > 0 ? `note-${this.cursor}` : nothing;
         return html `<div
       part="region"
@@ -368,9 +422,9 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
             @keydown=${this.handleListKeydown}
             @scroll=${() => this.virtualize.measure()}
           >
-            <div part="before" style="block-size: ${before}px"></div>
+            <div part="before" role="presentation" style="block-size: ${before}px"></div>
             ${this.renderRows()}
-            <div part="after" style="block-size: ${after}px"></div>
+            <div part="after" role="presentation" style="block-size: ${after}px"></div>
           </div>
         </div>
       </div>

package/dist/heatmap/root/buckets.d.ts

@@ -10,7 +10,8 @@
 /** A reading, reduced to what the bucketing needs. */
 export interface Reading {
     tone?: string | undefined;
-    value: number;
+    /** The number, or undefined for a row whose cell was blank. */
+    value: number | undefined;
 }
 /**
  * The tone for one reading, from its own `data-tone` or from the thresholds.

package/dist/heatmap/root/buckets.js

@@ -6,8 +6,12 @@ export const toneOf = (reading, thresholds, tones) => {
         return undefined;
     }
     let chosen;
+    const value = reading.value;
+    if (value === undefined) {
+        return undefined;
+    }
     for (const [index, bound] of thresholds.entries()) {
-        if (reading.value >= bound) {
+        if (value >= bound) {
             chosen = tones[index] ?? chosen;
         }
     }

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixElement } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import '../../tooltip/index.js';
 declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface);
@@ -44,7 +44,7 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * @csspart footer - The three-slot row under the strip.
  * @csspart mark - The invisible point the tooltip is anchored to.
  * @csspart start - The leading slot's box.
- * @csspart strip - The grid of cells.
+ * @csspart strip - The grid of cells. It is an image, named by the host's `aria-labelledby` or `aria-label`, then by `label`, then by the caption of the table.
  * @csspart summary - The middle slot's box.
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
@@ -188,14 +188,37 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * none.
      */
     private hovered;
+    /**
+     * Carries a host `aria-labelledby` and `aria-describedby` to the strip, the
+     * image a reader lands on. The host is a generic around it.
+     */
+    protected readonly aria: AriaForwardController;
+    /**
+     * Hears an `aria-label` written on the element, which no property mirrors.
+     *
+     * Lit observes the attributes of its own properties only, and `ariaLabel`
+     * belongs to the platform.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Called by the browser when an observed attribute changes. A new
+     * `aria-label` asks for an update, because it names the strip.
+     */
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
     private observer;
     private announced;
     /**
-     * Every reading in the table, oldest first, as the table is written.
+     * Every row in the table, oldest first, as the table is written, with its
+     * reading where the row has one.
      *
      * **Not `readings`, which the mixin already has and which means a count.**
      * Two members of the same name meaning a number and an array is the kind of
      * collision that type-checks in one direction and reads wrong in both.
+     *
+     * **One cell per row, and a blank row is a cell with no reading.** Taken from
+     * the series alone, a blank dropped its day and every day after it moved one
+     * cell along, while the tooltip still counted rows and named the day beside
+     * the one under the pointer.
      */
     private get points();
     /**
@@ -262,7 +285,6 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
     private get drawn();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected willUpdate(changed: PropertyValues): void;
     /**
      * Says on the footer whether any of its three slots holds anything.
      *
@@ -303,8 +325,7 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      *
      * `pointerover` on the strip rather than a listener per cell: the event
      * bubbles, so one handler covers however many cells there are, and unlike
-     * `mouseover` it is delivered for a pen and for the touch that follows a long
-     * press.
+     * `mouseover` it is delivered for a pen.
      */
     private readonly onPointerOver;
     private readonly onPointerLeave;

package/dist/heatmap/root/heatmap-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 { CHART_PLOT, customElement, drawTooltip, HelixElement, HelixResizeEvent, hostAria, MixinChartSource, markRegion, searchableById, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { AriaForwardController, byRow, CHART_PLOT, customElement, drawTooltip, HelixElement, HelixResizeEvent, MixinChartSource, markRegion, searchableById, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -21,9 +21,15 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         this.width = undefined;
         this.metrics = undefined;
         this.hovered = -1;
+        this.aria = new AriaForwardController(this, {
+            target: () => this.partNamed('strip'),
+        });
         this.observer = undefined;
         this.announced = undefined;
         this.onPointerOver = (event) => {
+            if (!this.pointer.accepts(event)) {
+                return;
+            }
             const cell = event.target?.closest?.('[part="cell"]');
             const index = Number(cell?.getAttribute('data-index') ?? -1);
             this.hovered = Number.isInteger(index) ? index : -1;
@@ -35,8 +41,21 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
     get visible() {
         return Math.min(this.points.length, this.room);
     }
+    static get observedAttributes() {
+        return [...super.observedAttributes, 'aria-label'];
+    }
+    attributeChangedCallback(name, old, value) {
+        super.attributeChangedCallback(name, old, value);
+        if (name === 'aria-label') {
+            this.requestUpdate();
+        }
+    }
     get points() {
-        return this.series[0]?.points ?? [];
+        const series = this.series[0];
+        if (!series) {
+            return [];
+        }
+        return byRow(series, this.sourceRows.length).map((point) => point ?? { value: undefined });
     }
     get sourceKnown() {
         if (this.for === '') {
@@ -96,10 +115,6 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         this.observer?.disconnect();
         this.observer = undefined;
     }
-    willUpdate(changed) {
-        super.willUpdate(changed);
-        hostAria(this.internals, { label: this.label || 'Heatmap', role: 'img' });
-    }
     markEmpty() {
         markRegion(this.renderRoot, 'footer', ['start', 'summary', 'end']);
     }
@@ -127,8 +142,10 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         const palette = writtenList(this.tones);
         const cells = this.drawn;
         return html `<div
+        aria-label=${this.getAttribute?.('aria-label') || this.named || 'Heatmap'}
         part="strip"
         id=${CHART_PLOT}
+        role="img"
         style="--heatmap-rows: ${this.rowCount}"
         @pointerover=${this.onPointerOver}
         @pointerleave=${this.onPointerLeave}