@fusion.dev/helix-headless 0.142.1 → 0.144.0

package/dist/radio/group/radio-group.d.ts

@@ -23,12 +23,20 @@ declare const HelixHeadlessRadioGroup_base: (new (...args: any[]) => import("@fu
  * the value until something is chosen, and where a reset returns. The two work
  * like `checked` and `defaultChecked`.
  *
+ * A choice sends its events in this order: `helix-select` from the radio, then,
+ * a microtask later and only if nobody refused it, `helix-before-change` from
+ * the group, and once the value has moved, `input` and `change`. The microtask
+ * is what lets a listener you add to the group after it connected refuse the
+ * `helix-select`. A native radio sends `input` and `change` in the same task as
+ * the click.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases RadioButtons, Choice group
  * @documentation https://fusion.dev/helix/components/radio
  *
  * @slot - The radios.
+ * @slot feedback - The error message, for content richer than a string. It shows while there is a message.
  * @slot hint - The help text under the group, for content richer than a string.
  * @slot label - The group's label, for a question that needs more than a string.
  *
@@ -45,6 +53,18 @@ declare const HelixHeadlessRadioGroup_base: (new (...args: any[]) => import("@fu
  * @cssstate invalid - The group has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessRadioGroup extends HelixHeadlessRadioGroup_base {
+    /**
+     * Whether the group holds a tab stop of its own.
+     *
+     * A toolbar is one tab stop, so a toolbar the group sits in sets this to
+     * `false` while its stop is on another control, and every radio, the chosen
+     * one too, is then out of the tab order. The arrow keys inside the group
+     * work as before once focus is in it.
+     *
+     * No attribute: it is coordination between elements, and a consumer has no
+     * reason to set it.
+     */
+    focusable: boolean;
     /**
      * The direction the choices run. `vertical` puts one choice on each line.
      *
@@ -56,6 +76,22 @@ export declare class HelixHeadlessRadioGroup extends HelixHeadlessRadioGroup_bas
      * only `horizontal` has to be named.
      */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * Whether a reader can see and focus the answer and cannot change it. A
+     * read-only group still submits its value.
+     *
+     * React Aria's `isReadOnly`. A press on a radio is refused, and the arrow
+     * keys, Home and End leave focus on the answer, so Tab still reaches it and
+     * a reader hears it with the group's name. The group says `aria-readonly`.
+     * A script can still set `value`.
+     */
+    readOnly: boolean;
+    /**
+     * Keeps the keys that would move the answer from the keyboard controller
+     * while the group is read-only. A capture listener on the host runs ahead of
+     * the controller's own on the same target.
+     */
+    private readonly holdKeys;
     protected readonly keys: KeyboardNavigationController;
     protected readonly cascade: DisabledCascadeController;
     /** The radios, in light-DOM order. Client only: the server has no tree. */
@@ -76,8 +112,36 @@ export declare class HelixHeadlessRadioGroup extends HelixHeadlessRadioGroup_bas
      * the item's is the one that was doing nothing.
      */
     private readonly handleSelection;
+    /**
+     * The radio holding the answer, or nothing.
+     *
+     * Nothing where `value` names no radio here: a chosen radio that was removed
+     * is no longer an answer, as a native group drops it from the form. `value`
+     * keeps the name, so a value written before its radios arrive takes once they
+     * do.
+     */
+    private get answer();
+    /** Whether the group holds an answer the form can submit. */
+    private get answered();
+    /**
+     * Takes the answer from a radio whose markup says `selected`, where nothing
+     * else declared one.
+     *
+     * As `Toggle.Group` does, so `<helix-radio selected>` preselects as
+     * `<option selected>` and `<helix-toggle selected>` do, and a reset returns
+     * to it. Client only: the server's element shim has no children to read.
+     */
+    private adopt;
     /** Writes the answer onto the items, and nothing onto the host. */
     private place;
+    /** The radio that holds the group's tab stop: the answer, or the first that can be chosen. */
+    private entry;
+    /**
+     * Focus goes to the radio that holds the stop, and to the radio that would
+     * hold it while a toolbar holds the stop instead, so a label press or a
+     * refused submission still lands in the group.
+     */
+    protected get focusTarget(): HTMLElement | null;
     /** Reports the answer and the verdict on it. */
     private sync;
     connectedCallback(): void;

package/dist/radio/group/radio-group.js

@@ -8,55 +8,103 @@ import { customElement, DisabledCascadeController, HelixFormElement, hostAria, K
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessRadio } from '../root/radio-root.js';
+const MOVING_KEYS = new Set(['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'End', 'Home']);
 let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
+        this.focusable = true;
+        this.readOnly = false;
+        this.holdKeys = (event) => {
+            if (this.readOnly && MOVING_KEYS.has(event.key)) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+            }
+        };
         this.keys = new KeyboardNavigationController(this, { items: () => this.items });
         this.cascade = new DisabledCascadeController(this, {
             items: () => this.items,
         });
         this.handleSelection = (event) => {
             event.stopPropagation();
-            if (event.defaultPrevented) {
-                return;
-            }
-            const next = event.detail.value;
-            if (next === this.value) {
+            if (this.readOnly) {
+                event.preventDefault();
                 return;
             }
-            this.requestValue(next);
+            queueMicrotask(() => {
+                if (event.defaultPrevented) {
+                    return;
+                }
+                const next = event.detail.value;
+                if (next === this.value) {
+                    return;
+                }
+                this.requestValue(next);
+            });
         };
     }
     get items() {
-        return [...this.children].filter((child) => child instanceof HelixHeadlessRadio);
+        return [...(this.children ?? [])].filter((child) => child instanceof HelixHeadlessRadio);
+    }
+    get answer() {
+        return this.items.find((item) => item.value === this.value);
+    }
+    get answered() {
+        if (this.value === '') {
+            return false;
+        }
+        const items = this.items;
+        return items.length === 0 || items.some((item) => item.value === this.value);
+    }
+    adopt() {
+        if (this.value !== '' || this.children === undefined) {
+            return;
+        }
+        const declared = this.items.find((item) => item.defaultSelected);
+        if (declared) {
+            this.defaultValue = declared.value;
+        }
     }
     place() {
         const items = this.items;
-        const answer = items.find((item) => item.value === this.value);
+        const answer = this.answer;
         for (const item of items) {
             item.selected = item === answer;
         }
-        const entry = answer ? undefined : items.find((item) => !item.disabled);
+        const entry = this.focusable ? this.entry() : undefined;
         for (const item of items) {
             item.focusable = item === entry;
         }
     }
+    entry() {
+        const answer = this.answer;
+        return answer && !answer.disabled ? answer : this.items.find((item) => !item.disabled);
+    }
+    get focusTarget() {
+        return (super.focusTarget ??
+            this.entry()?.shadowRoot?.querySelector('[part="item"]') ??
+            null);
+    }
     sync() {
-        this.internals.setFormValue(this.value === '' ? null : this.value);
-        this.reportRequired(this.value === '', 'Choose one to continue.', 'items');
+        const answered = this.answered;
+        this.internals.setFormValue(answered ? this.value : null);
+        this.reportRequired(!answered, 'Choose one to continue.', 'items');
     }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelection);
+        this.addEventListener('keydown', this.holdKeys, { capture: true });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-select', this.handleSelection);
+        this.removeEventListener('keydown', this.holdKeys, { capture: true });
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        this.adopt();
         hostAria(this.internals, { label: this.label, role: 'radiogroup' });
         this.internals.ariaRequired = this.required ? 'true' : null;
+        this.internals.ariaReadOnly = this.readOnly ? 'true' : null;
     }
     updated(changed) {
         super.updated(changed);
@@ -67,14 +115,20 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
     render() {
         return html `${this.renderGroupLabel()}
       <div part="items">
-        <slot @slotchange=${() => this.place()}></slot>
+        <slot @slotchange=${() => this.requestUpdate()}></slot>
       </div>
       ${this.renderHint()}${this.renderFeedback()}`;
     }
 };
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessRadioGroup.prototype, "focusable", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessRadioGroup.prototype, "orientation", void 0);
+__decorate([
+    property({ attribute: 'readonly', reflect: true, type: Boolean })
+], HelixHeadlessRadioGroup.prototype, "readOnly", void 0);
 HelixHeadlessRadioGroup = __decorate([
     customElement('helix-headless-radio-group')
 ], HelixHeadlessRadioGroup);

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

@@ -73,11 +73,14 @@ export declare class HelixHeadlessRadio extends HelixHeadlessRadio_base {
     get defaultSelected(): boolean;
     set defaultSelected(next: boolean);
     /**
-     * Whether the radio holds the group's tab stop while nothing is chosen.
+     * Whether the radio holds the group's tab stop. Unset, the chosen radio
+     * holds it.
      *
      * The stop rides on the selection, and an unanswered group has no selection,
      * so without this every choice is `tabindex="-1"` and the keyboard cannot
-     * enter the set at all.
+     * enter the set at all. The group writes `true` for the chosen radio, or for
+     * the first that can be chosen while nothing is, and `false` for every radio,
+     * the chosen one too, while a toolbar the group sits in holds the stop.
      *
      * **Written by the group, with no attribute, and it reaches the control
      * rather than the host.** A `tabindex` on the host is two faults at once: it
@@ -88,15 +91,15 @@ export declare class HelixHeadlessRadio extends HelixHeadlessRadio_base {
      * them an unchecked radio. `Toggle.Root` carries the same property for the
      * same reason.
      */
-    focusable: boolean;
+    focusable?: boolean;
     /**
      * Asks for the render that follows a hydration, so the stop stops being every
      * choice's.
      *
      * `tabindex` reads `childrenKnown` and a hydrating render is one where that is
      * false, which is what keeps the hydrating render the server's. Nothing else
-     * would ask: the group writes an already-false `focusable` onto every choice
-     * but one, which changes nothing and so re-renders nothing.
+     * is sure to ask: a write from the group that leaves `focusable` as it was
+     * re-renders nothing.
      */
     protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;

package/dist/radio/root/radio-root.js

@@ -11,7 +11,6 @@ let HelixHeadlessRadio = class HelixHeadlessRadio extends MixinSelectableItem(He
     constructor() {
         super(...arguments);
         this.clicks = new HostClickController(this, () => this.partNamed('item'));
-        this.focusable = false;
     }
     get defaultSelected() {
         return this.hasAttribute('selected');
@@ -30,7 +29,7 @@ let HelixHeadlessRadio = class HelixHeadlessRadio extends MixinSelectableItem(He
       role="radio"
       aria-checked=${this.selected ? 'true' : 'false'}
       ?disabled=${this.disabled}
-      tabindex=${this.selected || this.focusable || !this.childrenKnown ? '0' : '-1'}
+      tabindex=${(this.focusable ?? this.selected) || !this.childrenKnown ? '0' : '-1'}
       @click=${() => this.select()}
     >
       <span part="box"></span>

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

@@ -1,4 +1,4 @@
-import { HelixFormElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixFormElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
@@ -15,14 +15,23 @@ declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion
  * A read-only rating displays a score, which is the most common use. It is
  * announced as a displayed value and does not look disabled.
  *
+ * With `clearable`, pressing the chosen score again, or Backspace or Delete on
+ * the marks, takes the rating back to unrated and sends `helix-clear`.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
  * @aliases Stars, Score, Review score
  * @documentation https://fusion.dev/helix/components/rating
  *
+ * @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 mark - The shape of a mark, copied into every position.
+ *
  * @event {Event} change - The score was chosen. Sent together with `input`, because each choice commits the score.
  * @event {HelixBeforeChangeEvent} helix-before-change - The score is about to change. Cancelable: cancel it to keep the current score.
+ * @event {Event} helix-clear - The rating went back to unrated, under `clearable`. Sent after `input` and `change`.
  * @event {Event} input - The score changed.
  *
  * @csspart feedback - The message that says what is wrong.
@@ -45,6 +54,12 @@ declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion
  */
 export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
     protected readonly announcesInput = false;
+    /**
+     * Whether a reader can take the rating back to unrated: by pressing the
+     * chosen score again, or with Backspace or Delete. Zag's rating group
+     * clears the same way.
+     */
+    clearable: boolean;
     /**
      * How many marks there are.
      */
@@ -92,6 +107,14 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
      * nonsense is the fault this pays off, so neither case is quietly ignored.
      */
     min: number;
+    /**
+     * The name of each mark a reader can choose, with `{score}` and `{max}`
+     * filled in. Set it to translate "3 out of 5".
+     *
+     * Also what a read-only rating says for its score where `value-text` is
+     * empty.
+     */
+    optionLabel: string;
     /**
      * Shows the score without letting users change it.
      *
@@ -128,6 +151,9 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
      * and each of its options by the score that option is.
      */
     valueText: string;
+    protected readonly aria: AriaForwardController;
+    /** @internal The element a missing name is checked on: the set of stars, so the name of one star does not count as the name of the rating. */
+    protected get namedControl(): HTMLElement | null;
     /**
      * The shape a consumer slotted, if they slotted one.
      *
@@ -222,8 +248,17 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
      * or off the element entirely, has asked for nothing.
      */
     private readonly handleDragStart;
+    /** The score a press began on, so releasing on the chosen one can clear it. */
+    private pressedOn;
+    /**
+     * Whether a drag has just chosen, so the click a browser may send after it
+     * does not choose again. Cleared a task later, since the click may not come.
+     */
+    private dragChose;
     private readonly handleDragMove;
     private readonly handleDragEnd;
+    /** Whether a press on `score` takes a clearable rating back to unrated. */
+    private clearsAt;
     private readonly handleDragCancel;
     /**
      * Reports the value, and whether the form may go without one.
@@ -246,6 +281,10 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
      */
     private sync;
     private readonly handleOptionClick;
+    /** Backspace and Delete take a clearable rating back to unrated. */
+    private readonly handleClearKey;
+    /** Back to unrated, through the same cancelable request as a score, and said. */
+    private clear;
     private readonly handleOptionEnter;
     private readonly handleLeave;
     connectedCallback(): void;
@@ -255,6 +294,15 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
     protected updated(changed: PropertyValues): void;
     protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
+    /** The name of one score, as `optionLabel` writes it. */
+    private nameFor;
+    /**
+     * The option holding the tab stop: the chosen one, or for a score between
+     * steps, such as an average of 3.5 on whole marks, the step below it, and
+     * the first while nothing is chosen. Between steps no option matched, and
+     * the rating left the tab order.
+     */
+    private stopAt;
     protected render(): TemplateResult;
     /**
      * The value as a number, or `NaN` while the control is empty.

package/dist/rating/root/rating-root.js

@@ -4,19 +4,24 @@ 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 { valueAsNumber as asNumber, customElement, numberAsValue as fromNumber, HelixFormElement, KeyboardNavigationController, MixinControllerValue, MixinField, reportRuntime, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsNumber as asNumber, customElement, fillTemplate, numberAsValue as fromNumber, HelixFormElement, KeyboardNavigationController, MixinControllerValue, MixinField, reportRuntime, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
         this.announcesInput = false;
+        this.clearable = false;
         this.max = 5;
         this.min = 0;
+        this.optionLabel = '{score} out of {max}';
         this.readOnly = false;
         this.showValue = false;
         this.step = 1;
         this.valueText = '';
+        this.aria = new AriaForwardController(this, {
+            target: () => this.partNamed('marks'),
+        });
         this.markSource = undefined;
         this.markRead = false;
         this.previewing = undefined;
@@ -46,8 +51,11 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
             catch {
             }
             this.dragging = event.pointerId;
+            this.pressedOn = score;
             this.previewing = Number.parseFloat(score);
         };
+        this.pressedOn = undefined;
+        this.dragChose = false;
         this.handleDragMove = (event) => {
             if (this.dragging !== event.pointerId) {
                 return;
@@ -64,9 +72,18 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
             this.dragging = undefined;
             this.previewing = undefined;
             const score = this.scoreAt(event.clientX);
-            if (score !== undefined) {
-                this.requestValue(score);
+            if (score === undefined) {
+                return;
+            }
+            this.dragChose = true;
+            setTimeout(() => {
+                this.dragChose = false;
+            }, 0);
+            if (this.clearsAt(score) && score === this.pressedOn) {
+                this.clear();
+                return;
             }
+            this.requestValue(score);
         };
         this.handleDragCancel = (event) => {
             if (this.dragging !== event.pointerId) {
@@ -76,8 +93,22 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
             this.previewing = undefined;
         };
         this.handleOptionClick = (event) => {
+            if (this.dragChose) {
+                return;
+            }
             const option = event.currentTarget;
-            this.requestValue(option.dataset.score ?? '');
+            const score = option.dataset.score ?? '';
+            if (this.clearsAt(score)) {
+                this.clear();
+                return;
+            }
+            this.requestValue(score);
+        };
+        this.handleClearKey = (event) => {
+            if (this.clearable && (event.key === 'Backspace' || event.key === 'Delete')) {
+                event.preventDefault();
+                this.clear();
+            }
         };
         this.handleOptionEnter = (event) => {
             if (this.isDisabled) {
@@ -91,6 +122,9 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         };
         this.warned = false;
     }
+    get namedControl() {
+        return this.partNamed('marks');
+    }
     get floor() {
         if (!Number.isFinite(this.min)) {
             return 0;
@@ -152,10 +186,18 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         }
         return nearest;
     }
+    clearsAt(score) {
+        return this.clearable && this.value !== '' && Number(score) === Number(this.value);
+    }
     sync() {
         this.internals.setFormValue(this.value === '' ? null : this.value);
         this.reportRequired(this.value === '', 'Choose a rating to continue.', 'marks');
     }
+    clear() {
+        if (this.value !== '' && !this.readOnly && !this.isDisabled && this.requestValue('')) {
+            this.dispatchEvent(new Event('helix-clear', { bubbles: true, composed: true }));
+        }
+    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('pointerleave', this.handleLeave);
@@ -190,11 +232,23 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         this.finishHydration();
         this.sync();
     }
+    nameFor(score) {
+        return fillTemplate(this.optionLabel, { max: this.max, score });
+    }
+    stopAt(answered, first) {
+        if (!answered) {
+            return first;
+        }
+        const below = this.steps.filter((score) => score <= this.score);
+        return below.at(-1) ?? first;
+    }
     render() {
         const showing = this.previewing ?? this.score;
-        const said = this.valueText || `${this.score} out of ${this.max}`;
+        const said = this.valueText || this.nameFor(this.score);
         const count = Math.max(0, Math.round(this.max));
         const first = this.steps[0];
+        const answered = this.value !== '' && Number.isFinite(Number.parseFloat(this.value));
+        const stop = this.stopAt(answered, first);
         const mark = (layer, index) => html `<span part="mark">${this.markFor(layer, index)}</span>`;
         const marksIn = (layer) => Array.from({ length: count }, (_, index) => mark(layer, index));
         return html `${this.renderGroupLabel()}
@@ -210,6 +264,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
       data-slotted=${this.markSource ? '' : nothing}
       style=${`--rating-full: ${Math.floor(showing)}; --rating-part: ${showing - Math.floor(showing)}; --rating-steps: ${this.positions.length}`}
       @pointercancel=${this.handleDragCancel}
+      @keydown=${this.handleClearKey}
       @pointerdown=${this.handleDragStart}
       @pointermove=${this.handleDragMove}
       @pointerup=${this.handleDragEnd}
@@ -240,14 +295,12 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
                 part="option"
                 role="radio"
                 type="button"
-                aria-checked=${this.score === score ? 'true' : 'false'}
-                aria-label=${`${score} out of ${this.max}`}
+                aria-checked=${answered && this.score === score ? 'true' : 'false'}
+                aria-label=${this.nameFor(score)}
                 data-score=${String(score)}
                 style=${`--rating-step: ${index + 1}`}
                 ?disabled=${this.isDisabled}
-                tabindex=${this.score === score || (this.score === this.floor && score === first)
-                        ? '0'
-                        : '-1'}
+                tabindex=${score === stop ? '0' : '-1'}
                 @click=${this.handleOptionClick}
                 @pointerenter=${this.handleOptionEnter}
               ></button>`)}
@@ -269,12 +322,18 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         this.value = fromNumber(count);
     }
 };
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessRating.prototype, "clearable", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessRating.prototype, "max", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessRating.prototype, "min", void 0);
+__decorate([
+    property({ attribute: 'option-label' })
+], HelixHeadlessRating.prototype, "optionLabel", void 0);
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessRating.prototype, "readOnly", void 0);

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

@@ -33,7 +33,14 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * round numbers, and the range extends to them.
  *
  * The summary gives each series' correlation coefficient and its number of
- * points. The table has every number, and the drawing is `aria-hidden`.
+ * points. The table has every number, and the drawing is hidden from screen
+ * readers.
+ *
+ * **The plot is read by key.** It takes focus, named by `label` or the caption.
+ * The left and right arrows move from row to row in the table's order, Home
+ * and End go to the first and the last, and the up and down arrows move among
+ * the series of a row. The tooltip sits on that point, the `live` part says the
+ * row in words, and Escape puts the tooltip away.
  *
  * Each point is a `<span>` placed by percentage over the drawing, as
  * `LineChart` places its end points, so points stay round when the drawing
@@ -52,9 +59,10 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * @documentation https://fusion.dev/helix/components/scatter-chart
  *
  * @csspart gridline - One line across the plot, drawn when `gridlines` is set.
+ * @csspart live - The readout: a polite live region that says the row the keys moved to. Hide it visually.
  * @csspart mark - The invisible point the tooltip is anchored to.
  * @csspart plane - The grid that holds the plot, both axes, and their names. It runs left to right on every page.
- * @csspart plot - The drawing.
+ * @csspart plot - The drawing, which takes focus to be read by key.
  * @csspart point - One row, as a point.
  * @csspart point-active - A point in the row under the pointer. Set alongside `point`.
  * @csspart summary - The text that says how strongly the measures relate, for people who cannot see the points.
@@ -68,6 +76,7 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * @csspart tooltip-arrow-top - The point while the bubble is above the reading, on its bottom edge. Set alongside `tooltip-arrow`.
  * @csspart tooltip-bottom - The bubble while it is below the reading. Set alongside `tooltip`.
  * @csspart tooltip-cell - One column's name and value inside the tooltip.
+ * @csspart tooltip-cell-current - The cell the up and down arrows rest on, while they rest there. Set alongside `tooltip-cell`.
  * @csspart tooltip-label - The row's own name inside the tooltip.
  * @csspart tooltip-left - The bubble while it is left of the reading. Set alongside `tooltip`.
  * @csspart tooltip-name - A column's name inside the tooltip.
@@ -149,7 +158,12 @@ export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart
      * absent where there are fewer than three points or no spread to measure.
      */
     protected renderSummary(field: ScatterField): TemplateResult;
-    /** The row a pointer is resting on, over the point it is nearest. */
+    /**
+     * The row a pointer is resting on, over the point it is nearest.
+     *
+     * A row reached by key has no nearest point, so the bubble sits on the
+     * point of the series the keys rest on, or on the row's first point.
+     */
     protected renderTooltip(): TemplateResult | typeof nothing;
     /**
      * The point a pointer is nearest, within reach.