@fusion.dev/helix-headless 0.178.0 → 0.180.0

package/dist/heatmap/root/heatmap-root.js

@@ -4,16 +4,15 @@ 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, byRow, CHART_PLOT, commaList, customElement, drawTooltip, formatWords, HelixElement, HelixResizeEvent, MixinChartSource, markRegion, pressedValue, rangeAdd, requestValue, StatusController, words, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { AriaForwardController, byRow, CHART_PLOT, commaList, customElement, drawTooltip, formatWords, HelixElement, HelixReadingChangeEvent, HelixReadingPressEvent, HelixResizeEvent, MixinChartSource, MixinChartStatus, markRegion, pressedValue, rangeAdd, requestValue, StatusController, spokenReading, words, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
 import { fits, monthPage, overviewOf, toneOf } from './buckets.js';
-let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(HelixElement) {
+let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartStatus(MixinChartSource(HelixElement)) {
     constructor() {
         super(...arguments);
         this.busiestLabel = 'Busiest';
-        this.emptyText = 'No readings';
         this.gap = 2;
         this.minCell = 8;
         this.overviewLabel = '{busiestLabel}: {busiest}; {totalLabel} {total}.';
@@ -69,6 +68,16 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
             const index = Number(cell?.getAttribute('data-index') ?? -1);
             this.pointer.set(Number.isInteger(index) ? index : -1);
         };
+        this.onPointerUp = (event) => {
+            if (event.pointerType !== 'touch') {
+                return;
+            }
+            const cell = event.target?.closest?.('[part~="cell"]');
+            const index = Number(cell?.getAttribute('data-index') ?? -1);
+            if (cell && Number.isInteger(index) && index >= 0) {
+                this.pointer.tapTo(index);
+            }
+        };
         this.onPointerLeave = () => {
             if (!this.pointer.keyed) {
                 this.pointer.set(-1);
@@ -112,9 +121,6 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         }
         return byRow(series, this.sourceRows.length).map((point) => point ?? { value: undefined });
     }
-    get sourceKnown() {
-        return this.readingsKnown;
-    }
     get rowCount() {
         return Math.max(1, Math.floor(this.rows) || 1);
     }
@@ -160,6 +166,12 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
     }
     connectedCallback() {
         super.connectedCallback();
+        this.pointer.axis = 'none';
+        this.pointer.onReading = (heard, detail) => {
+            const row = detail.index < 0 ? -1 : this.points.length - this.drawn.length + detail.index;
+            const told = { ...detail, index: row, label: this.sourceRows[row]?.label ?? '' };
+            this.dispatchEvent(heard === 'press' ? new HelixReadingPressEvent(told) : new HelixReadingChangeEvent(told));
+        };
         this.addEventListener('keydown', this.onKeydown);
         if (typeof ResizeObserver !== 'undefined') {
             this.observer = new ResizeObserver((entries) => {
@@ -184,8 +196,6 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         super.updated(changed);
         this.markEmpty();
         this.measure();
-        this.toggleState('active', this.pointer.at >= 0);
-        this.toggleState('empty', this.drawn.length === 0 && this.sourceKnown);
         const showing = this.visible;
         const written = showing > 0 ? String(showing) : null;
         if (this.getAttribute('visible') !== written) {
@@ -206,41 +216,48 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         const palette = writtenList(this.tones);
         const cells = this.drawn;
         const readable = cells.length > 0;
+        const grid = readable && this.selectionMode !== undefined;
         const keys = this.selectionMode ? this.keysOf(cells) : [];
         const chosen = new Set(this.selectionMode ? commaList(this.value) : []);
+        const drawn = cells.map((reading, index) => {
+            const tone = toneOf(reading, bounds, palette);
+            const active = this.pointer.at === index;
+            const picked = chosen.has(keys[index] ?? '');
+            if (grid) {
+                return this.renderGridCell(index, active, picked, tone);
+            }
+            return tone === undefined
+                ? html `<span
+                      part="cell${active ? ' cell-active' : ''}${picked ? ' cell-selected' : ''}"
+                      data-index=${index}
+                    ></span>`
+                : html `<span
+                part="cell${active ? ' cell-active' : ''}${picked ? ' cell-selected' : ''}"
+                data-index=${index}
+                data-tone=${tone}
+                style="--heatmap-tone: var(--heatmap-tone-${tone})"
+              ></span>`;
+        });
+        const at = this.pointer.at;
         return html `<div
+        aria-activedescendant=${grid && at >= 0 ? `cell-${at}` : nothing}
         aria-describedby=${readable ? 'helix-chart-summary' : nothing}
         aria-label=${this.named || this.stripLabel}
-        part="strip"
+        aria-multiselectable=${grid && this.selectionMode === 'multiple' ? 'true' : nothing}
+        part="strip plot"
         id=${CHART_PLOT}
-        role=${readable ? 'application' : 'img'}
+        role=${grid ? 'grid' : readable ? 'application' : 'img'}
         style="--heatmap-rows: ${this.rowCount}"
         tabindex=${readable ? '0' : nothing}
         @click=${this.onClick}
         @pointerover=${this.onPointerOver}
         @pointerleave=${this.onPointerLeave}
+        @pointerup=${this.onPointerUp}
       >
-        ${cells.length === 0
-            ? nothing
-            : cells.map((reading, index) => {
-                const tone = toneOf(reading, bounds, palette);
-                const active = this.pointer.at === index;
-                const picked = chosen.has(keys[index] ?? '');
-                return tone === undefined
-                    ? html `<span
-                      part="cell${active ? ' cell-active' : ''}${picked ? ' cell-selected' : ''}"
-                      data-index=${index}
-                    ></span>`
-                    : html `<span
-                part="cell${active ? ' cell-active' : ''}${picked ? ' cell-selected' : ''}"
-                data-index=${index}
-                data-tone=${tone}
-                style="--heatmap-tone: var(--heatmap-tone-${tone})"
-              ></span>`;
-            })}
-        ${this.renderTooltip()}
+        ${grid ? this.renderRows(drawn) : drawn}
+        ${this.renderTooltip(grid)}
       </div>
-      ${cells.length === 0 && this.sourceKnown ? html `<p part="empty">${this.emptyText}</p>` : nothing}
+      ${cells.length === 0 ? this.renderStatus() : nothing}
       <div part="footer">
         <span part="start"><slot name="start"></slot></span>
         <span part="summary"><slot name="summary"></slot></span>
@@ -249,6 +266,28 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
             ? html `<span part="selection" role="status">${this.status.said}</span>`
             : nothing}${this.renderTable()}`;
     }
+    renderRows(cells) {
+        const size = this.rowCount === 1 ? cells.length : this.rowCount;
+        const rows = [];
+        for (let start = 0; start < cells.length; start += size) {
+            rows.push(html `<div part="row" role="row" style="display: contents">${cells.slice(start, start + size)}</div>`);
+        }
+        return rows;
+    }
+    renderGridCell(index, active, picked, tone) {
+        const row = this.sourceRows[this.points.length - this.drawn.length + index];
+        const name = row ? spokenReading(row) : '';
+        return html `<span
+      aria-label=${name || nothing}
+      aria-selected=${picked ? 'true' : 'false'}
+      data-index=${index}
+      data-tone=${tone ?? nothing}
+      id="cell-${index}"
+      part="cell${active ? ' cell-active' : ''}${picked ? ' cell-selected' : ''}"
+      role="gridcell"
+      style=${tone === undefined ? nothing : `--heatmap-tone: var(--heatmap-tone-${tone})`}
+    ></span>`;
+    }
     renderOverview(cells) {
         const rows = this.sourceRows;
         const offset = this.points.length - cells.length;
@@ -264,10 +303,10 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         });
         return html `<p id="helix-chart-summary" part="overview">${said}</p>`;
     }
-    renderTooltip() {
+    renderTooltip(grid = false) {
         const at = this.pointer.at;
         if (at < 0) {
-            return drawTooltip(this.sourceRows, -1, this.tag('tooltip'), undefined, undefined, this.pointer);
+            return drawTooltip(this.sourceRows, -1, this.tag('tooltip'), undefined, undefined, grid ? undefined : this.pointer);
         }
         const offset = this.points.length - this.drawn.length;
         const cell = this.cellPx;
@@ -278,34 +317,13 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
             placement: 'top',
             x: `${column * (cell + gap) + cell / 2}px`,
             y: `${row * (cell + gap)}px`,
-        }, undefined, this.reading(at));
-    }
-    reading(at) {
-        const pointer = this.pointer;
-        const key = this.keysOf(this.drawn)[at] ?? '';
-        if (!this.selectionMode || key === '' || this.selectedLabel === '') {
-            return pointer;
-        }
-        if (!commaList(this.value).includes(key)) {
-            return pointer;
-        }
-        return {
-            column: pointer.column,
-            keyed: pointer.keyed,
-            position: pointer.position,
-            shows: (cell) => pointer.shows(cell),
-            state: this.selectedLabel,
-        };
+        }, undefined, grid ? undefined : this.pointer);
     }
 };
 __decorate([
     words,
     property({ attribute: 'busiest-label' })
 ], HelixHeadlessHeatmap.prototype, "busiestLabel", void 0);
-__decorate([
-    words,
-    property({ attribute: 'empty-text' })
-], HelixHeadlessHeatmap.prototype, "emptyText", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessHeatmap.prototype, "gap", void 0);

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

@@ -1,6 +1,6 @@
 import { AriaForwardController, type DataOptionItem, DisabledCascadeController, HelixFormElement, UpgradeController } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
-import { HelixHeadlessOption } from '../../option/root/option-root.js';
+import type { HelixHeadlessOption } from '../../option/root/option-root.js';
 declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A list of options, from which you choose one or several.
@@ -76,6 +76,19 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  *   filter narrows the list, under `layout="grid"`, or while the list is
  *   disabled.
  *
+ * **The options are an import of their own.** An option you write is the Option
+ * family's, which the list does not register, so a page that writes one imports
+ * it beside the list:
+ *
+ * ```js
+ * import '@fusion.dev/helix/listbox'
+ * import '@fusion.dev/helix/option'
+ * ```
+ *
+ * In development, a list holding an option nobody registered says so once the
+ * page has loaded, with the line to add. The options `items` draws are this
+ * Option too, and need the same import.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -218,7 +231,8 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      *
      * **The list needs a height to scroll in**: the styled tier's
      * `--listbox-max-block-size`, or a `max-block-size` on `::part(items)` in the
-     * headless tier. Import the Option family as well, whose elements are drawn.
+     * headless tier. The options drawn are this tier's Option, which the page
+     * imports, as it imports the options it writes.
      * A server sends the list empty, and the options are drawn once it hydrates.
      */
     items: readonly DataOptionItem[] | undefined;

package/dist/listbox/root/listbox-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 { AriaForwardController, centerInView, chosenValues, columnStep, countLabel, customElement, DelayController, DisabledCascadeController, drawAutofill, endInSight, filterKeeps, formatWords, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, inlineStep, MixinCollection, MixinControllerValue, MixinField, markMatches, OptionWindowController, onApple, pageRows, rangeAdd, reportValues, requestChange, scrollItemIntoView, selectsAll, Typeahead, toggleEvery, typesCharacter, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, auditChildren, centerInView, chosenValues, columnStep, countLabel, customElement, DelayController, DisabledCascadeController, drawAutofill, endInSight, filterKeeps, formatWords, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, inlineStep, MixinCollection, MixinControllerValue, MixinField, markMatches, OptionWindowController, onApple, pageRows, rangeAdd, reportValues, requestChange, scrollItemIntoView, selectsAll, Typeahead, toggleEvery, typesCharacter, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { magnifyingGlass } 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 { HelixHeadlessOption } from '../../option/root/option-root.js';
+import { isOption } from '../../option/among.js';
 const FIELD_MOVES = new Set(['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp']);
 const MOVES = new Set([...FIELD_MOVES, 'End', 'Home']);
 const PAGE = 10;
@@ -306,7 +306,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         return this.multiple ? 'select-multiple' : 'select-one';
     }
     get options() {
-        return this.among((node) => node instanceof HelixHeadlessOption, this.children);
+        return this.among(isOption, this.children);
     }
     among(is, nodes) {
         const found = [];
@@ -421,7 +421,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             option.selected = chosen.has(option.value);
         }
         for (const group of this.groups) {
-            const inside = this.among((node) => node instanceof HelixHeadlessOption, group.children);
+            const inside = this.among(isOption, 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)) {
@@ -479,6 +479,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.addEventListener('helix-select', this.handleSelection);
         this.addEventListener('keydown', this.handleKeydown);
         this.addEventListener('click', this.handleClick, true);
+        auditChildren(this, 'option', 'option', 'the list offers no choices');
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -500,6 +501,9 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         if (this.childrenKnown) {
             this.seedDeclared();
         }
+        if (changed.has('items') && this.items) {
+            auditChildren(this, 'option', 'option', 'the items draw no choices', true);
+        }
         if (this.childrenKnown) {
             this.place();
             this.tell(changed);

package/dist/menu/item/menu-item.d.ts

@@ -436,6 +436,12 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
     protected renderMark(submenu: boolean): TemplateResult | typeof nothing;
     /** Whether the row says what it is from its host, for a field's `aria-activedescendant`. */
     private get onHost();
+    /**
+     * Presses the row, as `click()` presses a native button: passed to the
+     * control inside, which is what answers a click, so a script's `click()`
+     * chooses the row, or follows its link, once.
+     */
+    click(): void;
     protected render(): TemplateResult | typeof nothing;
 }
 declare global {

package/dist/menu/item/menu-item.js

@@ -240,6 +240,15 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
     get onHost() {
         return this.virtual && this.onPage && !this.showingSubmenu;
     }
+    click() {
+        const control = this.partNamed('item');
+        if (control) {
+            control.click();
+        }
+        else {
+            super.click();
+        }
+    }
     render() {
         const submenu = this.hasSubmenu;
         const ticks = this.choice;

package/dist/meter/root/meter-root.js

@@ -83,8 +83,7 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
         this.internals.ariaValueMin = String(min);
         this.internals.ariaValueMax = String(max);
         this.internals.ariaValueNow = String(this.reading);
-        this.internals.ariaValueText =
-            this.valueText || this.formatOptions !== undefined || this.beyond ? this.text : null;
+        this.internals.ariaValueText = this.text;
         const band = this.computedBand;
         const beyond = this.beyond;
         this.toggleState('fair', band === 'fair');

package/dist/notifications/notification/notification.d.ts

@@ -89,6 +89,15 @@ export declare class HelixHeadlessNotification extends HelixHeadlessNotification
      * Whether the notification starts as read, used until `read` is set.
      */
     defaultRead: boolean;
+    /**
+     * The dismiss control's name, read by screen readers, with `{label}` for the
+     * row's own words.
+     *
+     * One sentence with the words in it, so a translation puts them where its
+     * language does: `registerWords('de', { 'helix-notification': { dismissLabel:
+     * '{label} schließen' } })`.
+     */
+    dismissLabel: string;
     /**
      * Locale for the timestamp.
      *
@@ -129,13 +138,6 @@ export declare class HelixHeadlessNotification extends HelixHeadlessNotification
      * the first render on the client is the server's.
      */
     stop: boolean;
-    /**
-     * What a screen reader hears before an unread notification's text.
-     *
-     * The unread mark is drawn, so a reader who cannot see it hears this word in
-     * its place. Translate it with the rest of your interface.
-     */
-    unreadLabel: string;
     /**
      * @internal Read by the list to identify its children across the light DOM,
      * which is cheaper than `instanceof` and is why this is public rather than
@@ -231,11 +233,37 @@ export declare class HelixHeadlessNotification extends HelixHeadlessNotification
      */
     private renderTime;
     protected render(): TemplateResult;
+    /**
+     * What a screen reader hears before an unread notification's text.
+     *
+     * The unread mark is drawn, so a reader who cannot see it hears this word in
+     * its place. Translate it with the rest of your interface.
+     */
+    unreadLabel: string;
+    /**
+     * The dismiss control's name: `dismissLabel` with the row's words.
+     *
+     * **Named for its row**, because a feed of rows each with a control named
+     * Dismiss is a list of buttons that says nothing about which notice each one
+     * ends. The words are the default slot's, the ones `helix-dismiss` reports,
+     * so a row's actions are not read into it. A page's own `dismiss-label` with
+     * no `{label}` is followed by them, unless it holds them already, as `Tag`
+     * names its remove button. Read from the children, so the verb alone on a
+     * server, until the update after.
+     */
+    private get dismissName();
+    protected firstUpdated(changed: PropertyValues): void;
     private readonly handleActions;
     private readonly handleDismiss;
     /**
-     * Where focus goes when this row leaves: the next row's first control, the
-     * one before, then the first control left in the feed.
+     * Where focus goes when this row leaves: the next row, the one before, then
+     * the first control left in the feed.
+     *
+     * **The row itself, and not a control in it**, because the row is what a
+     * reader moves through the feed by, and every row takes focus. Sent to the
+     * next dismiss control, focus passed over each row with no controls between,
+     * and to Load more where no row after had one. Focused, the row becomes the
+     * feed's stop, as one reached with the arrows does.
      */
     private neighbor;
 }

package/dist/notifications/notification/notification.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 { customElement, deepActiveElement, deepContains, focusableElements, HelixElement, HelixReadEvent, MixinDismissible, requestChange, slotFilled, words, } from '@fusion.dev/helix-core';
+import { customElement, deepActiveElement, deepContains, focusableElements, formatWords, HelixElement, HelixReadEvent, MixinDismissible, requestChange, slotFilled, slottedWords, words, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -16,13 +16,14 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
         super(...arguments);
         this.at = '';
         this.defaultRead = false;
+        this.dismissLabel = 'Dismiss {label}';
         this.locale = '';
         this.position = 0;
         this.setSize = 0;
         this.stop = true;
-        this.unreadLabel = 'Unread';
         this.isNotification = true;
         this.readState = undefined;
+        this.unreadLabel = 'Unread';
         this.handleActions = () => {
             this.markActions();
         };
@@ -30,8 +31,14 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
             event.stopPropagation();
             if (this.dismiss()) {
                 const next = deepContains(this, deepActiveElement()) ? this.neighbor() : null;
+                const holder = this.parentElement;
                 this.remove();
                 next?.focus();
+                if (next && next.getRootNode().activeElement !== next) {
+                    void Promise.resolve()
+                        .then(() => holder?.updateComplete)
+                        .then(() => next.focus());
+                }
             }
         };
     }
@@ -82,7 +89,7 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
         return html `<button
       part="dismiss"
       type="button"
-      aria-label=${this.dismissLabel}
+      aria-label=${this.dismissName}
       @click=${this.handleDismiss}
     >
       <slot name="dismiss">
@@ -132,6 +139,18 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
       </div>
     </div>`;
     }
+    get dismissName() {
+        const { dismissLabel } = this;
+        const label = this.childrenKnown ? slottedWords(this, ['']) : '';
+        if (dismissLabel.includes('{label}')) {
+            return formatWords(this, 'dismissLabel', { label }).trim();
+        }
+        return label === '' || dismissLabel.includes(label) ? dismissLabel : `${dismissLabel} ${label}`;
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.renderRoot.addEventListener('slotchange', () => this.requestUpdate());
+    }
     neighbor() {
         let feed = this.parentElement;
         while (feed && !('markEveryoneRead' in feed)) {
@@ -141,9 +160,16 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
             ? feed.items
             : [...(this.parentElement?.children ?? [])].filter((one) => 'isNotification' in one);
         const at = rows.indexOf(this);
-        const order = [...rows.slice(at + 1), ...rows.slice(0, Math.max(at, 0)).reverse()];
+        const group = this.parentElement;
+        const promoted = group && 'isNotificationGroup' in group && this.assignedSlot !== null
+            ? [...group.children].find((one) => one !== this && 'isNotification' in one)
+            : undefined;
+        const drawn = (row) => !('isNotificationGroup' in (row.parentElement ?? {})) ||
+            row.assignedSlot !== null ||
+            row === promoted;
+        const order = [...rows.slice(at + 1), ...rows.slice(0, Math.max(at, 0)).reverse()].filter(drawn);
         for (const row of order) {
-            const target = row.shadowRoot?.querySelector('[part="dismiss"]') ?? focusableElements(row)[0];
+            const target = row.shadowRoot?.querySelector('[part="item"]');
             if (target) {
                 return target;
             }
@@ -162,6 +188,10 @@ __decorate([
 __decorate([
     property({ attribute: 'default-read', type: Boolean })
 ], HelixHeadlessNotification.prototype, "defaultRead", void 0);
+__decorate([
+    words,
+    property({ attribute: 'dismiss-label' })
+], HelixHeadlessNotification.prototype, "dismissLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessNotification.prototype, "locale", void 0);

package/dist/option/among.d.ts

@@ -0,0 +1,23 @@
+import type { HelixHeadlessOption } from './root/option-root.js';
+/**
+ * Whether an element is an option, by its shape.
+ *
+ * **Not by `instanceof`.** A tag is defined once, by whichever copy of this
+ * class registered it first, and a second copy in the same document tests
+ * against a class no element on the page has: every option failed it, and a
+ * select said "Choose" over its value. Two copies are a consumer with a
+ * duplicated dependency, or the browser specs, where each family's bundle
+ * carries its own and they share one page. An option nobody registered has no
+ * such shape, and is no option until its entry is imported.
+ */
+export declare const isOption: (element: Element) => element is HelixHeadlessOption;
+/**
+ * The options among some elements, reaching one level into a group.
+ *
+ * What a control holding options reads its words from, off its own children
+ * rather than off the listbox they are slotted into: the slot exists only once a
+ * render has made it, so the listbox has none on a first render, and on a page a
+ * server rendered the `slotchange` that would correct it fires before anything
+ * listens.
+ */
+export declare const optionsAmong: (elements: readonly Element[]) => HelixHeadlessOption[];

package/dist/option/among.js

@@ -0,0 +1,2 @@
+export const isOption = (element) => 'text' in element && 'value' in element && 'selected' in element;
+export const optionsAmong = (elements) => elements.flatMap((element) => isOption(element) ? [element] : [...element.children].filter(isOption));

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

@@ -1,22 +1,6 @@
 import { HelixElement, type LinkModifiers } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-/**
- * The options among some elements, reaching one level into a group.
- *
- * What a control holding options reads its words from, off its own children
- * rather than off the listbox they are slotted into: the slot exists only once a
- * render has made it, so the listbox has none on a first render, and on a page a
- * server rendered the `slotchange` that would correct it fires before anything
- * listens.
- *
- * **An option by its shape, not by `instanceof`.** A tag is defined once, by
- * whichever copy of this class registered it first, and a second copy in the
- * same document tests against a class no element on the page has: every option
- * failed it, and a select said "Choose" over its value. Two copies are a
- * consumer with a duplicated dependency, or the browser specs, where each
- * family's bundle carries its own and they share one page.
- */
-export declare const optionsAmong: (elements: readonly Element[]) => HelixHeadlessOption[];
+export { isOption, optionsAmong } from '../among.js';
 /**
  * @summary One choice in a listbox.
  *

package/dist/option/root/option-root.js

@@ -7,10 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, followLink, HelixElement, HelixSelectEvent, hostAria, slotFilled, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-export const optionsAmong = (elements) => {
-    const isOption = (element) => 'text' in element && 'value' in element && 'selected' in element;
-    return elements.flatMap((element) => isOption(element) ? [element] : [...element.children].filter(isOption));
-};
+export { isOption, optionsAmong } from '../among.js';
 let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
     constructor() {
         super(...arguments);

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

@@ -62,9 +62,10 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  *
  * The plot runs left to right in every text direction, as a number line does.
  * The plot, its axes, and the axis names sit in a `plane` part with
- * `dir="ltr"`. The axis names carry `dir="auto"`, so a name in Arabic or Hebrew
- * reads in its own direction. The summary and the tooltip bubble follow the
- * page's direction.
+ * `dir="ltr"`, and the arrow keys follow the drawing: Right moves to the next
+ * point on a right-to-left page too. The axis names carry `dir="auto"`, so a
+ * name in Arabic or Hebrew reads in its own direction. The summary and the
+ * tooltip bubble follow the page's direction.
  *
  * **A tap shows the reading under it**, and keeps it until a tap lands
  * elsewhere. `helix-reading-change` says each move of the reading, by pointer,
@@ -86,7 +87,7 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * | Key | What it does |
  * |---|---|
  * | Tab | Moves focus to the plot and shows the first reading. |
- * | Right, Left | Moves to the next or the previous point, left to right across the plot. On a right-to-left page, Left moves to the next. |
+ * | Right, Left | Moves to the next or the previous point, left to right across the plot, on a right-to-left page too. |
  * | Down, Up | Moves among the series of the point. With one series, moves to the next or the previous point. |
  * | Home, End | Moves to the first or the last point. |
  * | Page Down, Page Up | Moves a tenth of the points on or back. |

package/dist/scatter-chart/root/scatter-chart-root.js

@@ -76,6 +76,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
     connectedCallback() {
         super.connectedCallback();
         this.pointer.axis = 'none';
+        this.pointer.drawnLtr = true;
         this.pointer.onReading = (heard, detail) => this.dispatchEvent(heard === 'press'
             ? new HelixReadingPressEvent(detail)
             : new HelixReadingChangeEvent(detail));

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

@@ -1,8 +1,7 @@
 import { AriaForwardController, type DataOptionItem, HelixFormElement, PopoverController, UpgradeController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-import { type HelixHeadlessOption } from '../../option/root/option-root.js';
+import type { HelixHeadlessOption } from '../../option/root/option-root.js';
 import '../../listbox/index.js';
-import '../../option/index.js';
 declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A control that opens a list of options to choose from.
@@ -60,6 +59,18 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * Set `autocomplete` to let a browser's autofill choose, as a native `<select>`
  * with the same attribute would.
  *
+ * **The options are an import of their own.** An option is the Option family's,
+ * which the select does not register, so a page that writes one imports it
+ * beside the select:
+ *
+ * ```js
+ * import '@fusion.dev/helix/select'
+ * import '@fusion.dev/helix/option'
+ * ```
+ *
+ * In development, a select holding an option nobody registered says so once the
+ * page has loaded, with the line to add.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms