@fusion.dev/helix-headless 0.149.1 → 0.151.0

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

@@ -31,6 +31,9 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * | Escape | Closes the list and puts the chosen words back. On a closed field, a second Escape clears a single choice. |
  * | Tab | Closes the list and moves on. |
  * | Backspace | With `multiple`, on an empty field, removes the last tag. |
+ * | Left | With `multiple`, with the caret at the start of the text, moves to the last tag's remove button. Right on a right-to-left page. |
+ * | Left, Right on a tag | Move between the tags, and past the last back to the text. |
+ * | Delete, Backspace on a tag | Removes the tag. |
  * | Space, Home, End, letters | Edit the text. |
  *
  * **ARIA.** The input is the `combobox`, named by the label, with
@@ -46,7 +49,8 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * Set `autocomplete` to let a browser's autofill choose an option.
  *
  * With `multiple`, each chosen option is a tag in the field with its own remove
- * control. The panel stays open and the filter clears after each choice, so the
+ * control. The text is the field's one tab stop, and the arrow keys reach the
+ * tags from it. The panel stays open and the filter clears after each choice, so the
  * next choice starts from the whole list.
  *
  * With `creatable`, the combobox offers a create row and fires `helix-create`.
@@ -584,6 +588,13 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * tag does.
      */
     protected removeLastToken(): void;
+    /** The tags, which the arrow keys reach from the text. */
+    protected tokenElements(): HTMLElement[];
+    /**
+     * Focus goes to the text field, the one tab stop, and never to a tag's remove
+     * button ahead of it, where Enter or Space would take a choice away.
+     */
+    protected get focusTarget(): HTMLElement | null;
     /** One tag asking to be taken out of the set. */
     private readonly handleDismiss;
     /**

package/dist/combobox/root/combobox-root.js

@@ -446,6 +446,12 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
             this.drop(last);
         }
     }
+    tokenElements() {
+        return [...this.renderRoot.querySelectorAll('[part="tag"]')];
+    }
+    get focusTarget() {
+        return this.partNamed('control') ?? super.focusTarget;
+    }
     sync() {
         if (this.multiple) {
             reportValues(this.internals, this.name, this.value === '' ? [] : this.value.split(','));
@@ -574,6 +580,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
                     data-value=${option.value}
                     dismiss-label=${formatWords(this, 'removeLabel', { name: option.text })}
                     ?dismissible=${!this.isDisabled && !this.readOnly}
+                    .dismissTabStop=${false}
                     @helix-dismiss=${this.handleDismiss}
                     >${option.text}</${this.tag('tag')}
                   >`;
@@ -619,6 +626,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
           aria-expanded=${this.open ? 'true' : 'false'}
           aria-describedby=${this.describedBy ?? nothing}
           aria-invalid=${this.invalidity ?? nothing}
+          aria-required=${this.required ? 'true' : nothing}
           placeholder=${(this.chosen.length > 0 || this.unresolved ? '' : this.placeholder) || nothing}
           ?disabled=${this.isDisabled}
           ?readonly=${this.readOnly}

package/dist/copy-button/root/copy-button-root.d.ts

@@ -29,8 +29,9 @@ import '../../tooltip/index.js';
  * **Keyboard.** Enter and Space copy, as they press a native button.
  *
  * The button is named `label`, or the host's `aria-label`, and its name
- * changes to `copied-label` or `error-label` for the moment after a press,
- * which is what a screen reader on it hears. The tooltip shows the same words.
+ * changes to `copied-label` or `error-label` for the moment after a press. The
+ * same words are said in a live region, so a screen reader hears the result,
+ * and the tooltip shows them.
  *
  * @since 0.1.0
  * @status stable
@@ -46,7 +47,7 @@ import '../../tooltip/index.js';
  * @event {HelixCopyErrorEvent} helix-copy-error - Fired when a press put nothing on the clipboard: the browser did not allow the write, or there was nothing to copy.
  *
  * @csspart button - The inner button.
- * @csspart live - The live region that says `pending-label` when the button becomes pending under focus. It is rendered from the first time the button is pending.
+ * @csspart live - The live region that says `copied-label` or `error-label` after a press, and `pending-label` when the button becomes pending under focus. It is rendered from the first time it says anything.
  * @csspart mark - The clipboard icon, and the confirmation icon that replaces it.
  * @csspart spinner - The ring a pending button turns, an empty element the styled button draws over the icon. It is rendered only while the button is pending.
  * @csspart tooltip - The tooltip bubble, forwarded from the tooltip inside the button.

package/dist/copy-button/root/copy-button-root.js

@@ -37,7 +37,11 @@ let HelixHeadlessCopyButton = class HelixHeadlessCopyButton extends HelixHeadles
             const copying = this.clipboard.copy(this.text);
             this.announcePress(event);
             const wrote = await copying;
-            if (!wrote && this.isConnected) {
+            if (!this.isConnected) {
+                return;
+            }
+            this.sayStatus(wrote ? this.copiedLabel : this.errorLabel);
+            if (!wrote) {
                 this.dispatchEvent(new HelixCopyErrorEvent());
             }
         };

package/dist/data-table/root/data-table-root.d.ts

@@ -40,6 +40,10 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  *   and shows a dash while only some are chosen.
  * - Shift with a press on a checkbox selects every row between it and the row
  *   last chosen.
+ * - `selection-behavior="replace"` makes a press or a move select the row
+ *   alone, as a file list does. Control or Command with a press adds or takes
+ *   out one row, and Shift with a press selects every row from the one last
+ *   chosen.
  *
  * To act on a single row, such as opening it, put a link or a button in a cell.
  *
@@ -56,7 +60,8 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * | Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. |
  * | Enter, Space on a sortable heading | Sorts by the column. |
  * | Enter, Space on the `load-more` row | Sends `helix-load-more`. |
- * | Space on a row | Selects the row, in a `selectable` table. |
+ * | Space on a row | Selects the row, in a `selectable` table. Under `selection-behavior="replace"`, selects it alone, and Control or Command with Space adds or takes out the row. |
+ * | Down, Up, Page Down, Page Up under `selection-behavior="replace"` | Selects the row it moves to alone. Control or Command with the key moves without selecting. |
  * | Shift with Down or Up | Selects the rows it moves across, in a `selectable` table. |
  * | Shift with Space | Selects every row from the one last chosen, in a `selectable` table. |
  * | Control or Command with A | Selects every row, in a `selectable` table. |
@@ -123,7 +128,9 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @documentation https://fusion.dev/helix/components/data-table
  *
  * @slot - The columns, as `TableColumn` elements.
+ * @slot empty - Content shown when there are no rows to show and none are loading, such as a picture and a link. Falls back to `empty-text`, which the live region still says.
  * @slot footer - Content below the grid. It replaces the built-in pagination.
+ * @slot loading - Content shown while the rows load, such as a spinner. Falls back to `loading-text`, which the live region still says.
  * @slot toolbar - Content above the grid, such as a search field or actions.
  *
  * @event {HelixActivateEvent} helix-activate - Fired after the page changes, with the new page as a string in `detail.value`.
@@ -216,6 +223,8 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * `registerWords('de', { 'helix-data-table': { nextLabel: 'Nächste Seite' } })`.
      */
     static words: string;
+    /** The empty and loading lines are the `empty` and `loading` slots. */
+    protected statusSlots: boolean;
     /**
      * The word for an ascending sort, in a `sorted-label` that writes `{order}`.
      *
@@ -490,6 +499,15 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * {# wybranych} other {# wybranego}}`.
      */
     selectedLabel: string;
+    /**
+     * What a key or a press on a row does to the rows already selected, in a
+     * `selectable` table. `toggle`, the default, keeps them: Space adds or takes
+     * out the row. `replace` selects the row alone, as a file list does: Down and
+     * Up carry the selection with them, and a press on a row selects it. Control
+     * or Command with a press or Space adds or takes out one row, and with a move
+     * goes without selecting. The checkboxes add or take out one row either way.
+     */
+    selectionBehavior: 'replace' | 'toggle';
     /**
      * The name of a row's checkbox. `{row}` is replaced with the row's value in
      * the first column that has a field, or with its key.
@@ -954,7 +972,7 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      */
     toggleSort(field: string): boolean;
     /**
-     * The columns into the header row, everything else into the toolbar and footer.
+     * The columns into the header row, everything else into the slot it names.
      *
      * Manual assignment, so a consumer's own markup is never written to.
      */
@@ -1124,6 +1142,20 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * request carries only the state it asks for.
      */
     private readonly notePress;
+    /** Whether a press or a move on a row selects it alone. */
+    private get replaces();
+    /**
+     * Selects the row at `row` on the page alone, and makes it where a range
+     * runs from. Asks nothing where it is already the only one selected.
+     */
+    private chooseOnly;
+    /**
+     * A press on a row under `selection-behavior="replace"`: it selects the row
+     * alone, Control or Command adds or takes out the row, and Shift selects
+     * every row from the one last chosen. A press on a control in a cell, or on
+     * the checkbox or grip column, is the control's.
+     */
+    private readonly handleRowClick;
     /**
      * A click on a sortable heading, anywhere but its grip or its edge.
      *

package/dist/data-table/root/data-table-root.js

@@ -30,6 +30,7 @@ const isControl = (element) => element.matches(CONTROL) || element.shadowRoot?.d
 let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
+        this.statusSlots = true;
         this.ascendingLabel = 'ascending';
         this.canceledLabel = 'Canceled';
         this.defaultExpanded = '';
@@ -64,6 +65,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.selectable = false;
         this.selectAllLabel = 'Select every row';
         this.selectedLabel = '{count} selected';
+        this.selectionBehavior = 'toggle';
         this.selectRowLabel = 'Select {row}';
         this.sortedLabel = '{direction, select, ascending {Sorted by {column}, ascending} descending {Sorted by {column}, descending} other {Sorted by {column}}}';
         this.total = 0;
@@ -178,6 +180,30 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.notePress = (event) => {
             this.shiftPressed = event.shiftKey;
         };
+        this.handleRowClick = (event) => {
+            if (!this.replaces || event.defaultPrevented) {
+                return;
+            }
+            const place = this.placeOf(event);
+            if (!place || place.row < 0 || place.row >= this.drawnPage.length || place.column < this.lead) {
+                return;
+            }
+            const origin = event.composedPath()[0];
+            if (origin instanceof Node && this.controlsIn(place).some((one) => deepContains(one, origin))) {
+                return;
+            }
+            if (event.shiftKey && this.anchorKey !== undefined) {
+                this.selectRange(place.row);
+                return;
+            }
+            if (event.ctrlKey || event.metaKey) {
+                const data = this.drawnPage[place.row];
+                const key = this.keyOf(data, this.rowIndex(place.row) - 2);
+                this.chooseRow(key, !this.chosen.has(key));
+                return;
+            }
+            this.chooseOnly(place.row);
+        };
         this.handleHeadClick = (event) => {
             if (this.partIn(event, 'grip') || this.partIn(event, 'resizer')) {
                 return;
@@ -251,14 +277,22 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             }
             const { column, row } = to;
             event.preventDefault();
+            const onRow = row >= 0 && row < this.drawnPage.length;
             if (event.shiftKey &&
                 this.selectable &&
                 (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&
                 place.row >= 0 &&
-                row >= 0 &&
-                row < this.drawnPage.length) {
+                onRow) {
                 this.selectRange(row, place.row);
             }
+            else if (this.replaces &&
+                onRow &&
+                row !== place.row &&
+                !event.shiftKey &&
+                !event.ctrlKey &&
+                !event.metaKey) {
+                this.chooseOnly(row);
+            }
             if (row !== place.row || column !== place.column) {
                 this.moveTo(row, column);
             }
@@ -878,6 +912,8 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         for (const [name, wanted] of [
             ['toolbar', true],
             ['footer', true],
+            ['empty', true],
+            ['loading', true],
         ]) {
             const slot = root.querySelector(`slot[name="${name}"]`);
             if (slot?.assign && wanted) {
@@ -1201,6 +1237,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('click', this.handleHeadClick);
+        this.addEventListener('click', this.handleRowClick);
         this.addEventListener('pointerdown', this.notePress, true);
         this.addEventListener('keydown', this.notePress, true);
         this.addEventListener('focusin', this.handleFocusIn);
@@ -1212,6 +1249,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('click', this.handleHeadClick);
+        this.removeEventListener('click', this.handleRowClick);
         this.removeEventListener('pointerdown', this.notePress, true);
         this.removeEventListener('keydown', this.notePress, true);
         this.removeEventListener('focusin', this.handleFocusIn);
@@ -1220,6 +1258,22 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.removeEventListener('keydown', this.handleGripKey);
         this.removeEventListener('helix-before-resize', this.handleResize);
     }
+    get replaces() {
+        return this.selectable && this.selectionBehavior === 'replace';
+    }
+    chooseOnly(row) {
+        const data = this.drawnPage[row];
+        if (!data) {
+            return;
+        }
+        const key = this.keyOf(data, this.rowIndex(row) - 2);
+        this.anchorKey = key;
+        const now = this.chosen;
+        if (now.size === 1 && now.has(key)) {
+            return;
+        }
+        this.requestSelected(new Set([key]));
+    }
     cellAt(row, column) {
         const offset = this.lead;
         if (row === -1) {
@@ -1402,6 +1456,10 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                     event.preventDefault();
                     this.selectRange(place.row);
                 }
+                else if (this.replaces && row && !event.ctrlKey && !event.metaKey) {
+                    event.preventDefault();
+                    this.chooseOnly(place.row);
+                }
                 else if (this.selectable && row) {
                     event.preventDefault();
                     const key = this.keyOf(row, this.rowIndex(place.row) - 2);
@@ -1595,6 +1653,9 @@ __decorate([
     words,
     property({ attribute: 'selected-label' })
 ], HelixHeadlessDataTable.prototype, "selectedLabel", void 0);
+__decorate([
+    property({ attribute: 'selection-behavior' })
+], HelixHeadlessDataTable.prototype, "selectionBehavior", void 0);
 __decorate([
     words,
     property({ attribute: 'select-row-label' })

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

@@ -35,6 +35,7 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  *
  * @slot feedback - The error message under the field.
  * @slot hint - The help text under the field.
+ * @slot label - The label, for content richer than the `label` text.
  * @slot next-icon - The icon on the calendar's next month control.
  * @slot panel-footer - Content in the panel under the calendar, such as a note or an action.
  * @slot panel-header - Content in the panel above the calendar, such as a heading or a shortcut.

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

@@ -12,9 +12,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * **The line is a separator**, as `<hr>` is, and as Radix Separator, React
  * Aria Separator, and Web Awesome's divider are. It is named by any content
  * set into it, so a screen reader says "Or, separator" where you wrote "Or" on
- * the line. Set `decorative` on a rule that separates nothing, such as one
- * under a heading or between the facts of a byline, and it leaves the
- * accessibility tree.
+ * the line, and the words are read once, as that name. Set words into a
+ * separator and no controls, which are hidden with them. Set `decorative` on
+ * a rule that separates nothing, such as one under a heading or between the
+ * facts of a byline, and it leaves the accessibility tree.
  *
  * Use `orientation="vertical"` between items on one line. A vertical divider
  * stretches to fit its flex parent and sets no height of its own.
@@ -44,9 +45,10 @@ export declare class HelixHeadlessDivider extends HelixElement {
      * Whether screen readers announce the line as a separator, which they now do
      * by default.
      *
-     * It dates from when the line was decorative by default. It is still read,
-     * and it wins over `decorative`, so a divider written with it stays a
-     * separator.
+     * @deprecated Remove it: a divider is a separator unless `decorative` is
+     * set. It dates from when the line was decorative by default, and it is
+     * still read and wins over `decorative`, so a divider written with it stays
+     * a separator.
      */
     announced: boolean;
     /**

package/dist/divider/root/divider-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 { customElement, HelixElement, markRegion, toolbarAround, toolbarAxis, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, markRegion, reportRuntime, toolbarAround, toolbarAxis, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessDivider = class HelixHeadlessDivider extends HelixElement {
@@ -38,6 +38,14 @@ let HelixHeadlessDivider = class HelixHeadlessDivider extends HelixElement {
     updated(changed) {
         super.updated(changed);
         this.markEmpty();
+        if (changed.has('announced') && this.announced && changed.get('announced') === undefined) {
+            reportRuntime({
+                kind: 'deprecated',
+                message: `<${this.localName} announced> is deprecated: remove it. A divider is a separator ` +
+                    'unless `decorative` is set.',
+                tag: this.localName,
+            });
+        }
     }
     render() {
         const separator = this.announced || !this.decorative;
@@ -47,7 +55,7 @@ let HelixHeadlessDivider = class HelixHeadlessDivider extends HelixElement {
       aria-labelledby=${separator ? 'content' : nothing}
       aria-orientation=${separator ? this.drawn : nothing}
     ></div>
-      <span id="content" part="content"><slot @slotchange=${() => this.markEmpty()}></slot></span>
+      <span id="content" part="content" aria-hidden=${separator ? 'true' : nothing}><slot @slotchange=${() => this.markEmpty()}></slot></span>
       <div part="line" role="presentation"></div>`;
     }
 };

package/dist/element-events.generated.js

@@ -3,7 +3,9 @@ registerElementEvents({
     'helix-headless-accordion-item': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-announcement': ['helix-dismiss'],
     'helix-headless-app-header': ['helix-scrolled'],
+    'helix-headless-area-chart': ['helix-reading-change', 'helix-reading-press'],
     'helix-headless-avatar': ['error', 'load'],
+    'helix-headless-bar-chart': ['helix-reading-change', 'helix-reading-press'],
     'helix-headless-button': ['helix-press'],
     'helix-headless-button-group': ['change', 'helix-before-change'],
     'helix-headless-callout': ['helix-dismiss'],
@@ -132,6 +134,7 @@ registerElementEvents({
         'helix-before-open',
         'toggle',
     ],
+    'helix-headless-line-chart': ['helix-reading-change', 'helix-reading-press'],
     'helix-headless-list': [
         'change',
         'helix-action',
@@ -208,6 +211,7 @@ registerElementEvents({
         'helix-preview',
         'input',
     ],
+    'helix-headless-scatter-chart': ['helix-reading-change', 'helix-reading-press'],
     'helix-headless-scroll-area': ['scroll', 'scrollend'],
     'helix-headless-select': [
         'change',
@@ -262,7 +266,7 @@ registerElementEvents({
     'helix-headless-time-picker': ['change', 'helix-before-change', 'input'],
     'helix-headless-toast': ['helix-dismiss'],
     'helix-headless-toast-item': ['helix-dismiss'],
-    'helix-headless-toggle': ['helix-select'],
+    'helix-headless-toggle': ['change', 'helix-select'],
     'helix-headless-toggle-group': ['change', 'helix-before-change', 'helix-select', 'input'],
     'helix-headless-tooltip': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-tour': [

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

@@ -29,7 +29,8 @@ declare const HelixHeadlessFilterChip_base: (new (...args: any[]) => import("@fu
  *
  * **Keyboard.** The remove button is a tab stop of its own, and Enter or Space
  * on it asks to remove the filter. In a `FilterInput`, Backspace in the empty
- * field asks to remove the last chip.
+ * field asks to remove the last chip, the arrow keys move between the field
+ * and the chips, and Delete or Backspace on a chip asks to remove it.
  *
  * The remove button is named `dismiss-label` followed by the chip's words,
  * such as "Remove filter Status is not open", so a row of chips says which

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

@@ -43,6 +43,9 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  * | Home, End | Highlights the first or the last suggestion while the panel is open. |
  * | Escape | Closes the panel and stops there, so a dialog around the field stays open. |
  * | Backspace | In an empty field, asks the last token to go. |
+ * | Left | With the caret at the start of the text, moves to the last token's remove button. Right on a right-to-left page. |
+ * | Left, Right on a token | Move between the tokens, and past the last back to the text. |
+ * | Delete, Backspace on a token | Asks the token to go. |
  *
  * **Typed filters.** The field parses only the fields you declare. Write
  * `FilterField` elements, usually inside the `FilterMenu` slotted into `start`,
@@ -425,6 +428,8 @@ export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_b
     private readonly handleLeading;
     /** The row again, whenever what is in it changes. */
     private readonly handleTokens;
+    /** The tokens slotted in `tags`, which the arrow keys reach from the text. */
+    protected tokenElements(): HTMLElement[];
     /**
      * Asks the last token to go, rather than taking it.
      *

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

@@ -84,6 +84,9 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
             }
         };
         this.handleKeydown = (event) => {
+            if (event.isComposing) {
+                return;
+            }
             if (this.tokenKeydown(event, this.value)) {
                 return;
             }
@@ -310,6 +313,9 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         this.suggesting = options.length > 0;
         this.activeAt = this.activeAt < options.length ? this.activeAt : -1;
     }
+    tokenElements() {
+        return (this.tokens?.assignedElements({ flatten: true }) ?? []);
+    }
     removeLastToken() {
         const last = this.tokens
             ?.assignedElements({ flatten: true })
@@ -368,6 +374,7 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         const active = this.open ? options[this.activeAt] : undefined;
         for (const [at, option] of options.entries()) {
             option.active = this.open && at === this.activeAt;
+            option.selectionFollowsActive = true;
         }
         const control = this.control;
         if (control && 'ariaActiveDescendantElement' in control) {

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

@@ -23,6 +23,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * the shortcut with the control. A chord the page wrote there itself is left
  * alone, and the key takes back only what it added.
  *
+ * A chord is drawn with the platform's modifiers first, in its order, so one
+ * `keys` value is right everywhere: `mod+shift+p` is `⇧⌘P` on an Apple
+ * keyboard and `Ctrl+Shift+P` elsewhere. Where it is drawn in glyphs, it is
+ * read in words, such as `Shift Command P`.
+ *
  * `caps` draws a chord as a key per key: each is a `key` part and the `+`
  * between two a `separator` part, so a sheet can draw a cap for each.
  * `key-labels` renames any key, on every platform, such as
@@ -141,7 +146,8 @@ export declare class HelixHeadlessKbd extends HelixElement {
     /**
      * The chord under `caps`, a part for each key and for each `+` between two,
      * so a sheet can draw a cap per key. Written with no space between, so a
-     * chord reads as the one label it was.
+     * chord reads as the one label it was. Where the chord is said in words,
+     * the parts are hidden from a screen reader, which reads the words.
      */
     protected renderChord(): TemplateResult;
 }

package/dist/kbd/root/kbd-root.js

@@ -135,12 +135,16 @@ let HelixHeadlessKbd = class HelixHeadlessKbd extends HelixElement {
         if (this.keys === '') {
             return html `<kbd part="kbd"><slot></slot></kbd>`;
         }
-        const { keys, separator } = this.label;
-        return html `<kbd part="kbd">${this.caps ? this.renderChord() : keys.join(separator)}</kbd>`;
+        const { keys, separator, spoken } = this.label;
+        if (spoken === '') {
+            return html `<kbd part="kbd">${this.caps ? this.renderChord() : keys.join(separator)}</kbd>`;
+        }
+        return html `<kbd part="kbd">${this.caps ? this.renderChord() : html `<span aria-hidden="true">${keys.join(separator)}</span>`}<span data-spoken>${spoken}</span></kbd>`;
     }
     renderChord() {
-        const { keys, separator } = this.label;
-        return html `${keys.map((key, index) => html `${index > 0 && separator !== '' ? html `<span part="separator">${separator}</span>` : nothing}<span part="key">${key}</span>`)}`;
+        const { keys, separator, spoken } = this.label;
+        const hidden = spoken === '' ? nothing : 'true';
+        return html `${keys.map((key, index) => html `${index > 0 && separator !== '' ? html `<span part="separator" aria-hidden=${hidden}>${separator}</span>` : nothing}<span part="key" aria-hidden=${hidden}>${key}</span>`)}`;
     }
 };
 __decorate([

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

@@ -27,6 +27,9 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * `<svg>` that fills its box scales with the box, so the same `font-size` can
  * render at 10px in a narrow chart and 43px in a wide one.
  *
+ * `value-axis` draws the scale's numbers beside the plot, at the levels
+ * `gridlines` rules, written in `locale`.
+ *
  * The table is the accessible representation, and the drawing is hidden from
  * screen readers, who get the numbers. The `summary` part names the chart, from
  * `label` or the table's caption, and gives each series' latest reading.
@@ -37,13 +40,22 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * a reading. The tooltip follows, the `live` part says the reading in words,
  * and Escape puts the tooltip away.
  *
+ * **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,
+ * tap or key, and `helix-reading-press` says a reading was clicked, tapped, or
+ * pressed with Enter or Space, for a page that opens what a reading stands for.
+ *
  * @since 0.1.0
  * @status stable
  * @category charts
  * @aliases Time Series, Trend Chart, Multi-line Chart
  * @documentation https://fusion.dev/helix/components/line-chart
  *
+ * @event {HelixReadingChangeEvent} helix-reading-change - The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it.
+ * @event {HelixReadingPressEvent} helix-reading-press - A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
+ *
  * @csspart area - The wash under one line, where `area` is set.
+ * @csspart axis - The numbers of the scale beside the plot, under `value-axis`.
  * @csspart band - The band around the reading under the pointer.
  * @csspart baseline - The rule at zero, where zero is inside the range.
  * @csspart gridline - One rule across the plot, under `gridlines`.
@@ -60,6 +72,7 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * @csspart summary - The chart's name and each series' latest reading, written as a sentence for screen readers. Hide it visually.
  * @csspart svg - The drawing surface the lines and areas sit on.
  * @csspart terminus - The mark on one series' last reading.
+ * @csspart tick - One number on the axis, placed with `inset-block-start` at its level.
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
  * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
@@ -79,6 +92,7 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  *
  * @cssproperty --chart-terminus-x - Where a series' last reading sits horizontally, as a percentage. Written by the component.
  * @cssproperty --chart-terminus-y - Where a series' last reading sits vertically, as a percentage. Written by the component.
+ * @cssproperty --line-chart-axis - The width of the axis, in `ch`, set from the widest number on it. Written by the component on the axis.
  */
 export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base {
     /**
@@ -86,6 +100,13 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
      * `registerWords('de', { 'helix-line-chart': { positionLabel: '{position} von {count}' } })`.
      */
     static words: string;
+    /**
+     * Sends the reading's moves and presses as `helix-reading-change` and
+     * `helix-reading-press`, which the pointer hears. Here and not in a
+     * constructor, where the manifest's analyzer reads the assignment as a
+     * member of this class.
+     */
+    connectedCallback(): void;
     /**
      * Draws a wash under each line, down to the floor of the plot. The washes
      * overlap and do not add up, so for parts that make a total, use
@@ -202,6 +223,15 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
      * layers; a single `mask-image` would only ever cut the last one.
      */
     terminus?: 'none' | 'ring' | 'square' | 'triangle';
+    /**
+     * Draws the scale's numbers beside the plot, the `axis` part, at the levels
+     * `gridlines` rules, so a reading can be measured off the drawing as well
+     * as read from the tooltip.
+     *
+     * Absent draws none: a line read for its shape needs no numbers beside it,
+     * and the tooltip and the table hold every reading.
+     */
+    valueAxis: boolean;
     /** The domain every series is drawn against, which the tooltip also needs. */
     private range;
     /**
@@ -223,6 +253,12 @@ export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base
      */
     private ends;
     protected render(): TemplateResult;
+    /**
+     * The scale's numbers beside the plot, under `value-axis`, written in the
+     * chart's locale. A seam, so a subclass can write the numbers its own way,
+     * such as a currency.
+     */
+    protected renderAxis(y: (value: number) => number, domain: [number, number]): TemplateResult;
     /**
      * What a reader who cannot see the lines is told: the chart's name and the
      * latest reading of each series.