@fusion.dev/helix-headless 0.147.0 → 0.149.0

package/dist/qr-code/root/qr-code-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, rgbOf } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixElement, reportRuntime, rgbOf, slotFilled, words, } from '@fusion.dev/helix-core';
 import { html, nothing, svg, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { encode } from 'uqr';
@@ -77,12 +77,15 @@ const pathFor = (matrix, style, only = 'all') => {
 let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
     constructor() {
         super(...arguments);
+        this.addressLabel = '{code}, {address}';
         this.codeLabel = 'QR code';
         this.label = '';
         this.value = '';
         this.logo = false;
+        this.toldLogo = false;
         this.overflowed = '';
     }
+    static { this.words = 'helix-qr-code'; }
     willUpdate(changed) {
         super.willUpdate(changed);
         if (this.childrenKnown) {
@@ -96,6 +99,17 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
     get level() {
         return this.correction ?? (this.logo ? 'H' : 'M');
     }
+    auditLogo() {
+        if (this.toldLogo || !this.logo || (this.correction ?? 'H') === 'H') {
+            return;
+        }
+        this.toldLogo = true;
+        reportRuntime({
+            kind: 'unscannable-logo',
+            message: `<${this.localName}> holds a logo at correction "${this.correction}", which may keep it from scanning. Set \`correction\` to "H", or leave it unset.`,
+            tag: this.localName,
+        });
+    }
     encoded() {
         try {
             return encode(this.value, { border: 0, ecc: this.level });
@@ -109,6 +123,7 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
     }
     updated(changed) {
         super.updated(changed);
+        this.auditLogo();
         const key = `${this.level}:${this.value}`;
         const overflow = this.value !== '' && this.encoded() === undefined;
         this.toggleState('overflow', overflow);
@@ -186,11 +201,12 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
         return new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
     }
     async download(filename = 'qr-code.png', size = 512) {
-        const png = await this.toPng(size);
-        if (!png) {
+        const svg = /\.svg$/i.test(filename) ? this.toSvg(size) : '';
+        const file = svg ? new Blob([svg], { type: 'image/svg+xml' }) : await this.toPng(size);
+        if (!file) {
             return;
         }
-        const url = URL.createObjectURL(png);
+        const url = URL.createObjectURL(file);
         const link = document.createElement('a');
         link.href = url;
         link.download = filename;
@@ -210,7 +226,7 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
       viewBox="0 0 ${box} ${box}"
       xmlns="http://www.w3.org/2000/svg"
       role="img"
-      aria-label=${qrName(this.label, this.value, this.codeLabel)}
+      aria-label=${qrName(this.label, this.value, this.codeLabel, (address) => formatWords(this, 'addressLabel', { address, code: this.codeLabel }))}
       shape-rendering="crispEdges"
     >
       <path
@@ -235,7 +251,7 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
       <slot
         name="logo"
         @slotchange=${(event) => {
-            const next = event.target.assignedNodes().length > 0;
+            const next = slotFilled(event.target);
             if (next !== this.logo) {
                 this.logo = next;
                 this.requestUpdate();
@@ -246,6 +262,11 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
     }
 };
 __decorate([
+    words,
+    property({ attribute: 'address-label' })
+], HelixHeadlessQrCode.prototype, "addressLabel", void 0);
+__decorate([
+    words,
     property({ attribute: 'code-label' })
 ], HelixHeadlessQrCode.prototype, "codeLabel", void 0);
 __decorate([

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

@@ -68,6 +68,11 @@ 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 {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-radio-group': { valueMissingMessage: '...' } })`.
+     */
+    static words: string;
     /**
      * Whether the group holds a tab stop of its own.
      *
@@ -101,6 +106,12 @@ export declare class HelixHeadlessRadioGroup extends HelixHeadlessRadioGroup_bas
      * `aria-readonly`. A script can still set `value`.
      */
     readOnly: boolean;
+    /**
+     * The message reported when the field is required and no option is chosen.
+     * Absent, or empty, is this sentence, or the words registered for the page's
+     * locale.
+     */
+    valueMissingMessage: string;
     protected readonly keys: KeyboardNavigationController;
     protected readonly cascade: DisabledCascadeController;
     /** The radios, in light-DOM order. Client only: the server has no tree. */

package/dist/radio/group/radio-group.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, DisabledCascadeController, HelixFormElement, hostAria, KeyboardNavigationController, MixinControllerValue, MixinField, } from '@fusion.dev/helix-core';
+import { customElement, DisabledCascadeController, HelixFormElement, hostAria, KeyboardNavigationController, MixinControllerValue, MixinField, words, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessRadio } from '../root/radio-root.js';
@@ -13,6 +13,7 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
         super(...arguments);
         this.focusable = true;
         this.readOnly = false;
+        this.valueMissingMessage = 'Choose one to continue.';
         this.keys = new KeyboardNavigationController(this, {
             items: () => this.items,
             origin: () => (this.readOnly ? 'focus' : 'selection'),
@@ -39,6 +40,7 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
             });
         };
     }
+    static { this.words = 'helix-radio-group'; }
     get items() {
         return [...(this.children ?? [])].filter((child) => child instanceof HelixHeadlessRadio);
     }
@@ -84,7 +86,7 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
     sync() {
         const answered = this.answered;
         this.internals.setFormValue(answered ? this.value : null);
-        this.reportRequired(!answered, 'Choose one to continue.', 'items');
+        this.reportRequired(!answered, this.valueMissingMessage, 'items');
     }
     connectedCallback() {
         super.connectedCallback();
@@ -124,6 +126,10 @@ __decorate([
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessRadioGroup.prototype, "readOnly", void 0);
+__decorate([
+    words,
+    property({ attribute: 'value-missing-message' })
+], HelixHeadlessRadioGroup.prototype, "valueMissingMessage", void 0);
 HelixHeadlessRadioGroup = __decorate([
     customElement('helix-headless-radio-group')
 ], HelixHeadlessRadioGroup);

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

@@ -69,6 +69,11 @@ declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-rating': { optionLabel: '{score} von {max}' } })`.
+     */
+    static words: string;
     protected readonly announcesInput = false;
     /**
      * Whether a reader can take the rating back to unrated: by pressing the
@@ -125,7 +130,7 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
     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".
+     * filled in, written in the locale. Set it to translate "3 out of 5".
      *
      * Also what a read-only rating says for its score where `value-text` is
      * empty.
@@ -158,6 +163,12 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
      * than an index: with halves, five marks are ten answers.
      */
     step: number;
+    /**
+     * The message reported when the field is required and no rating is chosen.
+     * Absent, or empty, is this sentence, or the words registered for the page's
+     * locale.
+     */
+    valueMissingMessage: string;
     /**
      * The text screen readers read for the score, in place of "3.5 out of 5".
      *

package/dist/rating/root/rating-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 { AriaForwardController, valueAsNumber as asNumber, customElement, fillTemplate, numberAsValue as fromNumber, HelixClearEvent, HelixFormElement, HelixPreviewEvent, KeyboardNavigationController, MixinControllerValue, MixinField, nearest, reportRuntime, SlottedGlyph, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsNumber as asNumber, customElement, formatWords, numberAsValue as fromNumber, HelixClearEvent, HelixFormElement, HelixPreviewEvent, KeyboardNavigationController, MixinControllerValue, MixinField, nearest, reportRuntime, SlottedGlyph, words, } 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)) {
@@ -18,6 +18,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         this.readOnly = false;
         this.showValue = false;
         this.step = 1;
+        this.valueMissingMessage = 'Choose a rating to continue.';
         this.valueText = '';
         this.aria = new AriaForwardController(this, {
             target: () => this.partNamed('marks'),
@@ -123,6 +124,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         };
         this.warned = false;
     }
+    static { this.words = 'helix-rating'; }
     get namedControl() {
         return this.partNamed('marks');
     }
@@ -183,7 +185,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
     }
     sync() {
         this.internals.setFormValue(this.value === '' ? null : this.value);
-        this.reportRequired(this.value === '', 'Choose a rating to continue.', 'marks');
+        this.reportRequired(this.value === '', this.valueMissingMessage, 'marks');
     }
     clear() {
         if (this.value !== '' && !this.readOnly && !this.isDisabled && this.requestValue('')) {
@@ -231,7 +233,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         this.sync();
     }
     nameFor(score) {
-        return fillTemplate(this.optionLabel, { max: this.max, score });
+        return formatWords(this, 'optionLabel', { max: this.max, score });
     }
     stopAt(answered, first) {
         if (!answered) {
@@ -335,6 +337,7 @@ __decorate([
     property({ type: Number })
 ], HelixHeadlessRating.prototype, "min", void 0);
 __decorate([
+    words,
     property({ attribute: 'option-label' })
 ], HelixHeadlessRating.prototype, "optionLabel", void 0);
 __decorate([
@@ -346,6 +349,10 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessRating.prototype, "step", void 0);
+__decorate([
+    words,
+    property({ attribute: 'value-missing-message' })
+], HelixHeadlessRating.prototype, "valueMissingMessage", void 0);
 __decorate([
     property({ attribute: 'value-text' })
 ], HelixHeadlessRating.prototype, "valueText", void 0);

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

@@ -0,0 +1,22 @@
+/** The numeric columns by what they measure. */
+export interface Measures {
+    /** The column across, the first one that is not the size. */
+    across: number | undefined;
+    /** The column `size-by` names, which sizes the points. */
+    size: number | undefined;
+    /** Every other column, each a series up. */
+    ups: number[];
+}
+/**
+ * The numeric columns by what they measure: the column whose heading
+ * `sizeBy` names as the size, by its series key, then the first of the rest
+ * across and every other one up.
+ */
+export declare const measuresOf: (columns: readonly number[], name: (column: number) => string, sizeBy: string) => Measures;
+/**
+ * Each row's point size from its reading in the size column, by area, so a
+ * point twice the measure is twice the ink: the square root of its share of
+ * the largest. A size below zero is none, and a row with no size, or a column
+ * whose largest is not above zero, has no weight.
+ */
+export declare const bubbleWeights: (sizes: readonly (number | undefined)[]) => (number | undefined)[];

package/dist/scatter-chart/measures.js

@@ -0,0 +1,11 @@
+import { seriesKey } from '@fusion.dev/helix-core';
+export const measuresOf = (columns, name, sizeBy) => {
+    const key = seriesKey(sizeBy);
+    const size = key === '' ? undefined : columns.find((column) => seriesKey(name(column)) === key);
+    const [across, ...ups] = columns.filter((column) => column !== size);
+    return { across, size, ups };
+};
+export const bubbleWeights = (sizes) => {
+    const largest = Math.max(0, ...sizes.map((one) => one ?? 0));
+    return sizes.map((one) => one === undefined || largest <= 0 ? undefined : Math.sqrt(Math.max(0, one) / largest));
+};

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

@@ -1,6 +1,7 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { nothing, type TemplateResult } from 'lit';
 import '../../tooltip/index.js';
+import { type Measures } from '../measures.js';
 /** One row drawn as a point: which row, which series, and where, in percent of the plot. */
 export interface ScatterPoint {
     depth: number;
@@ -111,7 +112,13 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  */
 export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart_base {
     /**
-     * The word the summary uses for the strength of the relation.
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-scatter-chart': { seriesLabel: '…' } })`.
+     */
+    static words: string;
+    /**
+     * The word for the strength of the relation, `{correlationLabel}` in
+     * `series-label`.
      */
     correlationLabel: string;
     /**
@@ -124,9 +131,21 @@ export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart
      */
     gridlines?: 'both' | 'x' | 'y';
     /**
-     * The word the summary uses for a row when it counts them.
+     * The word for the rows a series rests on, `{pointsLabel}` in
+     * `series-label`. `{count}` is how many, so the word takes its plural
+     * forms: `{count, plural, one {punkt} few {punkty} other {punktów}}`.
      */
     pointsLabel: string;
+    /**
+     * What the summary says of each series. `{y}` is what the series measures up,
+     * `{x}` what the chart measures across, `{count}` how many rows it rests on,
+     * written in the locale, `{pointsLabel}` the word for them, and
+     * `{correlation}` its correlation, or `none` where there are fewer than
+     * three points or no spread to measure, so each case is a whole sentence:
+     * `{correlation, select, none {...} other {...}}`. `{correlationLabel}` is
+     * `correlation-label`.
+     */
+    seriesLabel: string;
     /**
      * The heading of a column whose numbers size the points, such as
      * `Population`, which makes the chart a bubble chart.
@@ -172,12 +191,7 @@ export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart
      * The numeric columns by what they measure: the first across, the column
      * `size-by` names as the size, and every other one up, as a series.
      */
-    protected get measures(): {
-        across: number | undefined;
-        size: number | undefined;
-        ups: number[];
-    };
-    showsColumn(cell: number): boolean;
+    protected get measures(): Measures;
     /** Whether the levels across are ruled. */
     protected get rulesX(): boolean;
     /** Whether the levels up are ruled. */

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

@@ -4,11 +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 { CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, HelixElement, isRtl, linear, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, ticks, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, formatWords, HelixElement, isRtl, linear, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, ticks, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
 import { correlation, leastSquares } from '../fit.js';
+import { bubbleWeights, measuresOf } from '../measures.js';
 const REACH = 24;
 const COEFFICIENTS = new Map();
 const coefficientIn = (locale) => {
@@ -36,7 +37,8 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
     constructor() {
         super(...arguments);
         this.correlationLabel = 'correlation';
-        this.pointsLabel = 'points';
+        this.pointsLabel = '{count, plural, one {point} other {points}}';
+        this.seriesLabel = '{correlation, select, none {{y} / {x}: {count} {pointsLabel}} other {{y} / {x}: {count} {pointsLabel}, {correlationLabel} {correlation}}}';
         this.sizeBy = '';
         this.trend = false;
         this.drawn = [];
@@ -71,6 +73,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
             this.nearest = undefined;
         };
     }
+    static { this.words = 'helix-scatter-chart'; }
     connectedCallback() {
         super.connectedCallback();
         this.pointer.axis = 'none';
@@ -87,16 +90,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         return depth < 0 ? undefined : seriesIndex(depth);
     }
     get measures() {
-        const rows = this.sourceRows;
-        const key = seriesKey(this.sizeBy);
-        const size = key === ''
-            ? undefined
-            : this.plottedColumns.find((column) => seriesKey(rows.find((row) => row.cells[column])?.cells[column]?.name ?? '') === key);
-        const [across, ...ups] = this.plottedColumns.filter((column) => column !== size);
-        return { across, size, ups };
-    }
-    showsColumn(cell) {
-        return cell !== this.measures.size && super.showsColumn(cell);
+        return measuresOf(this.plottedColumns, (column) => this.columnName(column), this.sizeBy);
     }
     get rulesX() {
         return this.gridlines !== undefined && this.gridlines !== 'y';
@@ -107,7 +101,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
     get field() {
         const rows = this.sourceRows;
         const { across, size, ups } = this.measures;
-        const name = (column) => column === undefined ? '' : (rows.find((row) => row.cells[column])?.cells[column]?.name ?? '');
+        const name = (column) => column === undefined ? '' : this.columnName(column);
         const pairs = ups.map((column) => rows.flatMap((row, index) => {
             const x = across === undefined ? undefined : row.cells[across]?.value;
             const y = row.cells[column]?.value;
@@ -119,19 +113,14 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         const y = nice(extent(all.length > 0 ? all.map(([, one]) => one) : [0]));
         const along = linear(x, [0, PLOT_WIDTH]);
         const up = linear(y, [PLOT_HEIGHT, 0]);
-        const sizes = rows.map((row) => (size === undefined ? undefined : row.cells[size]?.value));
-        const largest = Math.max(0, ...sizes.map((one) => one ?? 0));
-        const weight = (row) => {
-            const one = sizes[row];
-            return one === undefined || largest <= 0 ? undefined : Math.sqrt(Math.max(0, one) / largest);
-        };
+        const weights = bubbleWeights(rows.map((row) => (size === undefined ? undefined : row.cells[size]?.value)));
         return {
             pairs: pairs.map((series) => series.map(([one, two]) => [one, two])),
             points: pairs.flatMap((series, depth) => shown[depth]
                 ? series.map(([one, two, row]) => ({
                     depth,
                     row,
-                    weight: weight(row),
+                    weight: weights[row],
                     x: along(one),
                     y: up(two),
                 }))
@@ -150,7 +139,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         <div id=${CHART_PLOT} part="plot"></div>
       </div>`;
         }
-        const format = formatNumbers(this.locale);
+        const format = formatNumbers(wordsLocale(this));
         const along = linear(field.x, [0, PLOT_WIDTH]);
         const up = linear(field.y, [PLOT_HEIGHT, 0]);
         return html `<div dir="ltr" part="plane">
@@ -229,11 +218,18 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         });
     }
     renderSummary(field) {
+        const coefficient = coefficientIn(wordsLocale(this));
         const clauses = field.yNames.map((name, depth) => {
             const pairs = field.pairs[depth] ?? [];
             const r = correlation(pairs);
-            const strength = r === undefined ? '' : `, ${this.correlationLabel} ${coefficientIn(this.locale).format(r)}`;
-            return `${name} / ${field.xName}: ${pairs.length} ${this.pointsLabel}${strength}`;
+            return formatWords(this, 'seriesLabel', {
+                correlation: r === undefined ? 'none' : coefficient.format(r),
+                correlationLabel: this.correlationLabel,
+                count: pairs.length,
+                pointsLabel: formatWords(this, 'pointsLabel', { count: pairs.length }),
+                x: field.xName,
+                y: name,
+            });
         });
         const named = this.named ? `${this.named}. ` : '';
         return html `<p id="helix-chart-summary" part="summary">${named}${clauses.join('; ')}.</p>`;
@@ -259,14 +255,20 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
     }
 };
 __decorate([
+    words,
     property({ attribute: 'correlation-label' })
 ], HelixHeadlessScatterChart.prototype, "correlationLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessScatterChart.prototype, "gridlines", void 0);
 __decorate([
+    words,
     property({ attribute: 'points-label' })
 ], HelixHeadlessScatterChart.prototype, "pointsLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'series-label' })
+], HelixHeadlessScatterChart.prototype, "seriesLabel", void 0);
 __decorate([
     property({ attribute: 'size-by' })
 ], HelixHeadlessScatterChart.prototype, "sizeBy", void 0);

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

@@ -21,13 +21,36 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * Set `valueContent` to draw the trigger's content from the chosen options,
  * and several chosen options are written as a list in the reader's language.
  *
- * In the open list the arrow keys, Home, End, PageUp, PageDown and typed
- * letters move the highlight, and Enter, Space or a click chooses it and
- * closes the list. Tab closes the list and moves on. On the closed trigger,
- * ArrowDown, Enter and Space open the list on the chosen option, ArrowUp opens
- * it on the chosen or last option, Home and End open it on the first or last,
- * and typed letters choose the option whose words start with them, as a native
- * `<select>` does.
+ * **Keyboard.** On the closed trigger:
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down, Enter, Space | Opens the list on the chosen option, or the first. |
+ * | Up | Opens the list on the chosen option, or the last. |
+ * | Home, End | Opens the list on the first or the last option. |
+ * | Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does, in either direction of text. |
+ * | A letter or a word | Chooses the option whose words start with what you typed, as a native `<select>` does. With `multiple`, opens the list on it. |
+ *
+ * In the open list, which is a `Listbox`:
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down, Up, Home, End, Page Down, Page Up | Moves the highlight. |
+ * | A letter or a word | Moves the highlight to the next option whose words start with what you typed. |
+ * | Enter, Space | Chooses the highlighted option and closes the list. With `multiple`, toggles it and leaves the list open. |
+ * | Escape | Closes the list and puts focus back on the trigger. |
+ * | Tab | Closes the list and moves on. |
+ *
+ * A choice made on the closed trigger is said aloud on Apple devices, where
+ * VoiceOver does not read the trigger's new name.
+ *
+ * **ARIA.** The trigger is a `button` with `aria-haspopup="listbox"` and
+ * `aria-expanded`, named by the label and then the chosen words, as a native
+ * `<select>` is. The list is the listbox `Listbox` describes, named by the
+ * label, or by `list-label` where there is none.
+ *
+ * Set `autocomplete` to let a browser's autofill choose, as a native `<select>`
+ * with the same attribute would.
  *
  * @since 0.1.0
  * @status stable
@@ -69,6 +92,7 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * @csspart listbox-loading - The text shown while the options load.
  * @csspart listbox-search - The region that holds the filter field.
  * @csspart listbox-search-field - The filter field.
+ * @csspart live - The region a screen reader announces a choice made on the closed trigger from, drawn once there is one to say. Visually hidden in the styled tier.
  * @csspart surface - The floating panel.
  * @csspart trigger - The closed control, which shows the chosen value.
  * @csspart value - The chosen option's text inside the trigger.
@@ -80,7 +104,24 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * @cssstate open - While the list is open.
  */
 export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-select': { placeholder: 'Auswählen' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
+    /** The region a choice made on the closed trigger is said from. */
+    private readonly status;
+    /**
+     * What a browser's autofill may fill in, as a platform token such as
+     * `country` or `cc-exp-month`, as on a native `<select>`.
+     *
+     * Set, the select keeps a hidden native `<select>` with the same options for
+     * the browser to fill, as React Aria's `HiddenSelect` does, and takes the
+     * option the browser picks, by its value or its words, as the value. Empty
+     * draws no hidden select, and a browser fills nothing.
+     */
+    autocomplete: string;
     /**
      * The text shown when no options match the filter.
      */
@@ -158,6 +199,12 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * write a function in markup.
      */
     valueContent?: ((chosen: readonly HelixHeadlessOption[]) => unknown) | undefined;
+    /**
+     * The message reported when the field is required and nothing is chosen.
+     * Absent, or empty, is this sentence, or the words registered for the page's
+     * locale.
+     */
+    valueMissingMessage: string;
     /**
      * Which option is chosen, as an index, or `-1` where none is.
      *
@@ -283,9 +330,21 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * Aria's Select do, so a reader who knows the answer types it. A Space in the
      * middle of those letters is one of them. With `multiple`, a letter opens the
      * list on the match instead, because adding to a set is a choice the reader
-     * makes in the list.
+     * makes in the list. ArrowLeft and ArrowRight choose the option before and
+     * after the chosen one.
      */
     private readonly handleTriggerKeydown;
+    /**
+     * Chooses from the closed trigger, and says the choice on Apple devices.
+     *
+     * The trigger is named by the label and the chosen words, so a choice made
+     * on it renames the control in focus. VoiceOver does not read a name that
+     * changes under focus, so a reader there heard nothing as a letter or an
+     * arrow changed the answer. The words are said in a live region, as React
+     * Aria says a combobox's choice for VoiceOver alone, since other screen
+     * readers read the new name.
+     */
+    private choose;
     /**
      * Tab closes the list and lets focus move on, as a native `<select>` does.
      *