@fusion.dev/helix-headless 0.103.2 → 0.104.0

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

@@ -69,6 +69,15 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * consumer to ask for it.
      */
     autocomplete: string;
+    /**
+     * What a reader is told when the field holds something that is not a number.
+     *
+     * **Every sentence a control raises in the browser's bubble is a property**,
+     * named for the validity flag it reports, so a form in another language
+     * speaks it: `feedback` replaces the message under the field and does not
+     * reach the bubble. Absent is the control's own sentence, in English.
+     */
+    badInputMessage?: string;
     /**
      * Accessible name for the control that steps down.
      */
@@ -103,6 +112,14 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
      * Not a label: it goes when typing starts.
      */
     placeholder: string;
+    /**
+     * What a reader is told when the number is above `max`, with `{max}` filled in.
+     */
+    rangeOverflowMessage?: string;
+    /**
+     * What a reader is told when the number is below `min`, with `{min}` filled in.
+     */
+    rangeUnderflowMessage?: string;
     /**
      * Whether the field refuses input while still submitting its value.
      */

package/dist/number-input/root/number-input-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, numberAsValue as fromNumber, HelixFormElement, holdCaret, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsNumber as asNumber, customElement, fillTemplate, numberAsValue as fromNumber, HelixFormElement, holdCaret, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
 import { minus, plus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -193,17 +193,24 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
             return;
         }
         const parsed = this.numeric;
-        if (this.required && this.value.trim() === '') {
-            this.internals.setValidity({ valueMissing: true }, 'Please fill in this field.', control);
+        if (this.readOnly) {
+            this.internals.setValidity({});
+        }
+        else if (this.required && this.value.trim() === '') {
+            this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage || 'Please fill in this field.', control);
         }
         else if (this.value.trim() !== '' && parsed === null) {
-            this.internals.setValidity({ badInput: true }, 'Please enter a number.', control);
+            this.internals.setValidity({ badInput: true }, this.badInputMessage || 'Please enter a number.', control);
         }
         else if (parsed !== null && this.min !== undefined && parsed < this.min) {
-            this.internals.setValidity({ rangeUnderflow: true }, `Value must be ${this.min} or more.`, control);
+            this.internals.setValidity({ rangeUnderflow: true }, fillTemplate(this.rangeUnderflowMessage || 'Value must be {min} or more.', {
+                min: this.min,
+            }), control);
         }
         else if (parsed !== null && this.max !== undefined && parsed > this.max) {
-            this.internals.setValidity({ rangeOverflow: true }, `Value must be ${this.max} or less.`, control);
+            this.internals.setValidity({ rangeOverflow: true }, fillTemplate(this.rangeOverflowMessage || 'Value must be {max} or less.', {
+                max: this.max,
+            }), control);
         }
         else {
             this.internals.setValidity({}, '', control);
@@ -300,6 +307,9 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
 __decorate([
     property()
 ], HelixHeadlessNumberInput.prototype, "autocomplete", void 0);
+__decorate([
+    property({ attribute: 'bad-input-message' })
+], HelixHeadlessNumberInput.prototype, "badInputMessage", void 0);
 __decorate([
     property({ attribute: 'decrement-label' })
 ], HelixHeadlessNumberInput.prototype, "decrementLabel", void 0);
@@ -318,6 +328,12 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessNumberInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ attribute: 'range-overflow-message' })
+], HelixHeadlessNumberInput.prototype, "rangeOverflowMessage", void 0);
+__decorate([
+    property({ attribute: 'range-underflow-message' })
+], HelixHeadlessNumberInput.prototype, "rangeUnderflowMessage", void 0);
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessNumberInput.prototype, "readOnly", void 0);

package/dist/object-inspector/root/object-inspector-root.d.ts

@@ -94,6 +94,16 @@ interface Row {
  * @cssproperty --object-inspector-level - How deep a row is, from 0 at the root, for indenting it.
  */
 export declare class HelixHeadlessObjectInspector extends HelixElement {
+    /**
+     * What the copy control is called on a row with a key, with the key as
+     * `{name}`.
+     *
+     * **Every word the inspector speaks is a property**, so a page in another
+     * language hears its own rather than English around its own keys.
+     */
+    copyLabel: string;
+    /** What the copy control is called where there is no key, on the value itself. */
+    copyValueLabel: string;
     /**
      * How many levels start open.
      *

package/dist/object-inspector/root/object-inspector-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessObjectInspector_1;
-import { CopyController, customElement, elementById, HelixElement, inlineStep, scrollItemIntoView, searchableById, VirtualizeController, } from '@fusion.dev/helix-core';
+import { CopyController, customElement, elementById, fillTemplate, HelixElement, inlineStep, scrollItemIntoView, searchableById, VirtualizeController, } from '@fusion.dev/helix-core';
 import { caretDown, caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -18,6 +18,8 @@ const child = (path, key) => `${path}/${key.replaceAll('~', '~0').replaceAll('/'
 let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends HelixElement {
     constructor() {
         super(...arguments);
+        this.copyLabel = 'Copy {name}';
+        this.copyValueLabel = 'Copy value';
         this.defaultDepth = 1;
         this.for = '';
         this.label = '';
@@ -291,7 +293,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         tooltip-arrow-left: copy-tooltip-arrow-left, tooltip-arrow-right: copy-tooltip-arrow-right,
         tooltip-arrow-top: copy-tooltip-arrow-top, tooltip-bottom: copy-tooltip-bottom,
         tooltip-left: copy-tooltip-left, tooltip-right: copy-tooltip-right, tooltip-top: copy-tooltip-top"
-      label=${row?.key === undefined ? 'Copy value' : `Copy ${row.key}`}
+      label=${row?.key === undefined ? this.copyValueLabel : fillTemplate(this.copyLabel, { name: row.key })}
       .value=${this.copyable(row)}
     ></${this.tag('copy-button')}>`;
     }
@@ -321,6 +323,12 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
       </div>`;
     }
 };
+__decorate([
+    property({ attribute: 'copy-label' })
+], HelixHeadlessObjectInspector.prototype, "copyLabel", void 0);
+__decorate([
+    property({ attribute: 'copy-value-label' })
+], HelixHeadlessObjectInspector.prototype, "copyValueLabel", void 0);
 __decorate([
     property({ attribute: 'default-depth', type: Number })
 ], HelixHeadlessObjectInspector.prototype, "defaultDepth", void 0);

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

@@ -79,6 +79,11 @@ export declare class HelixHeadlessOutline extends HelixElement {
     get current(): string;
     /**
      * What `current` reports, which only `mark` writes.
+     *
+     * **A field, not state.** Nothing renders it: the links carry `aria-current`
+     * and the mark is placed by measuring them, so a render on its change drew
+     * the same template again. It also made the first measurement, which can only
+     * happen after the first render, schedule a second one from `firstUpdated`.
      */
     private reading;
     private observer;
@@ -146,6 +151,8 @@ export declare class HelixHeadlessOutline extends HelixElement {
     private landing;
     /** The guard behind `scrollend`, in case it never comes. */
     private landed;
+    /** What `scrollend` calls when the scroll a click started lands, while it is awaited. */
+    private arrive;
     /**
      * The two things an `IntersectionObserver` cannot see, and one listener for
      * both.
@@ -221,6 +228,14 @@ export declare class HelixHeadlessOutline extends HelixElement {
      */
     private readonly handleSlotChange;
     disconnectedCallback(): void;
+    /**
+     * Stops waiting for a scroll to land, both halves of the wait.
+     *
+     * The `scrollend` listener is on the document, so it is taken off as well as
+     * the timer: left on, every click that did not wait for the last landing
+     * added one more.
+     */
+    private unland;
     connectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;

package/dist/outline/root/outline-root.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement, elementById, HelixActivateEvent, HelixElement, IndicatorController, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
     constructor() {
         super(...arguments);
@@ -43,13 +43,13 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
             }
             this.landing = section;
             this.markTo(section);
-            clearTimeout(this.landed);
+            this.unland();
             const arrive = () => {
-                clearTimeout(this.landed);
+                this.unland();
                 this.landing = undefined;
-                document.removeEventListener('scrollend', arrive, true);
                 this.mark();
             };
+            this.arrive = arrive;
             document.addEventListener('scrollend', arrive, { capture: true, once: true });
             this.landed = setTimeout(arrive, 1200);
             if (this.behavior === 'auto') {
@@ -115,6 +115,7 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
         const next = active?.target.id ?? '';
         if (next !== this.reading) {
             this.reading = next;
+            this.indicator.place();
             this.dispatchEvent(new HelixActivateEvent({ value: next }));
         }
     }
@@ -168,8 +169,15 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
         }
         this.observer?.disconnect();
         this.observer = undefined;
+        this.unland();
+    }
+    unland() {
         clearTimeout(this.landed);
         this.landed = undefined;
+        if (this.arrive) {
+            document.removeEventListener('scrollend', this.arrive, true);
+            this.arrive = undefined;
+        }
     }
     connectedCallback() {
         super.connectedCallback();
@@ -213,9 +221,6 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessOutline.prototype, "offset", void 0);
-__decorate([
-    state()
-], HelixHeadlessOutline.prototype, "reading", void 0);
 HelixHeadlessOutline = __decorate([
     customElement('helix-headless-outline')
 ], HelixHeadlessOutline);

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

@@ -97,24 +97,6 @@ export declare class HelixHeadlessPagination extends HelixElement {
      * written onto a host at upgrade that a server's output never had.
      */
     ends: boolean;
-    /**
-     * The page on show, one-based.
-     *
-     * An accessor pair, the same shape as the calendar's `month`. Reading gives
-     * the page on show; writing sets it, and `default-page` seeds one the element
-     * keeps until somebody does.
-     *
-     * **Clamped on the way out, because "the page on show" is what it says it
-     * gives.** Returning whatever was written means `default-page="99"` on a
-     * ten-page result renders page 10, marks page 10 with `aria-current`, and
-     * reports 99, so a consumer syncing their query from this reads a page that
-     * does not exist while the control in front of them says otherwise. Not a
-     * far-fetched value: it is a bookmarked link after the result shrank.
-     *
-     * Rounded here too, so `2.7` reads as the 2 it renders.
-     */
-    get page(): number;
-    set page(next: number);
     /**
      * Accessible name for the control that jumps to the first page.
      */
@@ -157,6 +139,24 @@ export declare class HelixHeadlessPagination extends HelixElement {
      * Accessible name for the control that moves forward.
      */
     nextLabel: string;
+    /**
+     * The page on show, one-based.
+     *
+     * An accessor pair, the same shape as the calendar's `month`. Reading gives
+     * the page on show; writing sets it, and `default-page` seeds one the element
+     * keeps until somebody does.
+     *
+     * **Clamped on the way out, because "the page on show" is what it says it
+     * gives.** Returning whatever was written means `default-page="99"` on a
+     * ten-page result renders page 10, marks page 10 with `aria-current`, and
+     * reports 99, so a consumer syncing their query from this reads a page that
+     * does not exist while the control in front of them says otherwise. Not a
+     * far-fetched value: it is a bookmarked link after the result shrank.
+     *
+     * Rounded here too, so `2.7` reads as the 2 it renders.
+     */
+    get page(): number;
+    set page(next: number);
     /**
      * Accessible name for one page, with `{page}` and `{pages}` filled in.
      */

package/dist/pagination/root/pagination-root.js

@@ -4,12 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, formatNumbers, HelixElement, HelixNavigateEvent, hostAria, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, formatNumbers, HelixElement, HelixNavigateEvent, hostAria, requestChange, } from '@fusion.dev/helix-core';
 import { caretDoubleLeft, caretDoubleRight, caretLeft, caretRight, } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-const fill = (template, page, pages, format = String) => template.replaceAll('{page}', format(page)).replaceAll('{pages}', format(pages));
+const fill = (template, page, pages, format = String) => fillTemplate(template, { page: format(page), pages: format(pages) });
 let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement {
     constructor() {
         super(...arguments);
@@ -273,9 +273,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessPagination.prototype, "ends", void 0);
-__decorate([
-    property({ type: Number })
-], HelixHeadlessPagination.prototype, "page", null);
 __decorate([
     property({ attribute: 'first-label' })
 ], HelixHeadlessPagination.prototype, "firstLabel", void 0);
@@ -297,6 +294,9 @@ __decorate([
 __decorate([
     property({ attribute: 'next-label' })
 ], HelixHeadlessPagination.prototype, "nextLabel", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessPagination.prototype, "page", null);
 __decorate([
     property({ attribute: 'page-label' })
 ], HelixHeadlessPagination.prototype, "pageLabel", void 0);

package/dist/pagination/size/pagination-size.d.ts

@@ -53,6 +53,7 @@ import '../../select/index.js';
  * @csspart control-listbox-hint - Help under the list.
  * @csspart control-listbox-items - The list itself.
  * @csspart control-listbox-label - The question, over the list.
+ * @csspart control-listbox-live - The inner listbox's `live`, the region a screen reader hears its empty and loading lines from.
  * @csspart control-listbox-loading - Shown while the options are still on their way.
  * @csspart control-listbox-search - The region holding the field that narrows the list.
  * @csspart control-listbox-search-field - The field itself.
@@ -74,15 +75,6 @@ export declare class HelixHeadlessPaginationSize extends HelixElement {
      * Size to start on, where nothing declared one.
      */
     defaultValue: number;
-    /**
-     * The size in force.
-     *
-     * Reading gives the real one; writing declares it the consumer's, and
-     * `default-value` seeds one this element owns. Same accessor pair as
-     * `Pagination.page` and the calendar's `month`.
-     */
-    get value(): number;
-    set value(next: number);
     /**
      * The words beside the control.
      */
@@ -101,6 +93,15 @@ export declare class HelixHeadlessPaginationSize extends HelixElement {
      * is dropped rather than rendered as an option that cannot mean anything.
      */
     sizes: string;
+    /**
+     * The size in force.
+     *
+     * Reading gives the real one; writing declares it the consumer's, and
+     * `default-value` seeds one this element owns. Same accessor pair as
+     * `Pagination.page` and the calendar's `month`.
+     */
+    get value(): number;
+    set value(next: number);
     /** The size, whoever set it, and `undefined` until somebody has. */
     private valueState;
     /** Held across every component asking for the same locale. */

package/dist/pagination/size/pagination-size.js

@@ -77,7 +77,7 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
         listbox-feedback: control-listbox-feedback, listbox-filter-icon: control-listbox-filter-icon,
         listbox-filter-mark: control-listbox-filter-mark, listbox-hint: control-listbox-hint,
         listbox-items: control-listbox-items, listbox-label: control-listbox-label,
-        listbox-loading: control-listbox-loading, listbox-search: control-listbox-search,
+        listbox-live: control-listbox-live, listbox-loading: control-listbox-loading, listbox-search: control-listbox-search,
         listbox-search-field: control-listbox-search-field, surface: control-surface,
         trigger: control-trigger, value: control-value"
       label=${this.label}
@@ -104,9 +104,6 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
 __decorate([
     property({ attribute: 'default-value', type: Number })
 ], HelixHeadlessPaginationSize.prototype, "defaultValue", void 0);
-__decorate([
-    property({ type: Number })
-], HelixHeadlessPaginationSize.prototype, "value", null);
 __decorate([
     property()
 ], HelixHeadlessPaginationSize.prototype, "label", void 0);
@@ -116,6 +113,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessPaginationSize.prototype, "sizes", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessPaginationSize.prototype, "value", null);
 HelixHeadlessPaginationSize = __decorate([
     customElement('helix-headless-pagination-size')
 ], HelixHeadlessPaginationSize);

package/dist/pagination/summary/pagination-summary.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, formatNumbers, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, formatNumbers, HelixElement } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessPaginationSummary = class HelixHeadlessPaginationSummary extends HelixElement {
@@ -28,10 +28,11 @@ let HelixHeadlessPaginationSummary = class HelixHeadlessPaginationSummary extend
         const page = Math.min(pages, Math.max(1, Math.floor(this.page) || 1));
         const from = (page - 1) * size + 1;
         const to = Math.min(this.total, from + size - 1);
-        return html `${this.format
-            .replaceAll('{from}', this.numbers(from))
-            .replaceAll('{to}', this.numbers(to))
-            .replaceAll('{total}', this.numbers(this.total))}`;
+        return html `${fillTemplate(this.format, {
+            from: this.numbers(from),
+            to: this.numbers(to),
+            total: this.numbers(this.total),
+        })}`;
     }
 };
 __decorate([

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

@@ -93,6 +93,11 @@ export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
      * Whether the boxes refuse input while still submitting their value.
      */
     readOnly: boolean;
+    /**
+     * What a reader is told when the code is started and not finished, with
+     * `{length}` filled in. Absent is the control's own sentence, in English.
+     */
+    tooShortMessage?: string;
     /**
      * What a box accepts, which decides the keyboard a phone offers.
      *

package/dist/pin-input/root/pin-input-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, customElement, HelixCompleteEvent, HelixFormElement, MixinControllerValue, MixinField, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, fillTemplate, HelixCompleteEvent, HelixFormElement, MixinControllerValue, MixinField, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerValue(MixinField(HelixFormElement)) {
@@ -165,10 +165,12 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
             return;
         }
         if (this.required && this.value === '') {
-            this.internals.setValidity({ valueMissing: true }, 'Please fill in this field.', first);
+            this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage || 'Please fill in this field.', first);
         }
         else if (this.value !== '' && this.value.length < this.count) {
-            this.internals.setValidity({ tooShort: true }, `Please enter all ${this.count} characters.`, first);
+            this.internals.setValidity({ tooShort: true }, fillTemplate(this.tooShortMessage || 'Please enter all {length} characters.', {
+                length: this.count,
+            }), first);
         }
         else {
             this.internals.setValidity({}, '', first);
@@ -204,6 +206,7 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
         part="field"
         role="group"
         aria-describedby=${this.describedBy ?? nothing}
+        aria-labelledby=${this.labeled ? this.labelId : nothing}
         @focusin=${this.handleFocusIn}
         @focusout=${this.handleFocusOut}
       >
@@ -214,9 +217,7 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
             placeholder=${this.placeholder || nothing}
             inputmode=${this.type === 'numeric' ? 'numeric' : 'text'}
             autocomplete=${at === 0 ? this.autocomplete || nothing : 'off'}
-            aria-label=${this.cellLabel
-            .replaceAll('{index}', String(at + 1))
-            .replaceAll('{length}', String(this.count))}
+            aria-label=${fillTemplate(this.cellLabel, { index: at + 1, length: this.count })}
             ?disabled=${this.isDisabled}
             ?readonly=${this.readOnly}
             @focus=${this.handleFocus}
@@ -246,6 +247,9 @@ __decorate([
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessPinInput.prototype, "readOnly", void 0);
+__decorate([
+    property({ attribute: 'too-short-message' })
+], HelixHeadlessPinInput.prototype, "tooShortMessage", void 0);
 __decorate([
     property()
 ], HelixHeadlessPinInput.prototype, "type", void 0);

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

@@ -153,7 +153,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         return nearest;
     }
     sync() {
-        this.internals.setFormValue(this.value);
+        this.internals.setFormValue(this.value === '' ? null : this.value);
         this.reportRequired(this.value === '', 'Choose a rating to continue.', 'marks');
     }
     connectedCallback() {
@@ -198,7 +198,8 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
     <div
       part="marks"
       role=${this.readOnly ? 'img' : 'radiogroup'}
-      aria-label=${this.readOnly ? said : this.label || nothing}
+      aria-label=${this.readOnly ? said : nothing}
+      aria-labelledby=${!this.readOnly && this.labeled ? this.labelId : nothing}
       aria-describedby=${this.describedBy ?? nothing}
       aria-required=${this.required && !this.readOnly ? 'true' : nothing}
       data-slotted=${this.markSource ? '' : nothing}

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

@@ -52,6 +52,7 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * @csspart listbox-hint - Help under the list.
  * @csspart listbox-items - The list itself.
  * @csspart listbox-label - The question, over the list.
+ * @csspart listbox-live - The inner list's `live`, the region a screen reader hears its empty and loading lines from.
  * @csspart listbox-loading - Shown while the options are still on their way.
  * @csspart listbox-search - The region holding the field that narrows the list.
  * @csspart listbox-search-field - The field itself.

package/dist/select/root/select-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, customElement, HelixFormElement, hostAria, MixinControllerOpen, MixinControllerValue, MixinField, PopoverController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixFormElement, hostAria, MixinControllerOpen, MixinControllerValue, MixinField, PopoverController, reportValues, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -87,7 +87,12 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         this.partNamed('trigger')?.focus();
     }
     sync() {
-        this.internals.setFormValue(this.value === '' ? null : this.value);
+        if (this.multiple) {
+            reportValues(this.internals, this.name, this.value === '' ? [] : this.value.split(','));
+        }
+        else {
+            this.internals.setFormValue(this.value === '' ? null : this.value);
+        }
         this.reportRequired(this.value === '', 'Choose one to continue.', 'trigger');
     }
     willUpdate(changed) {
@@ -119,7 +124,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
       part="listbox"
       exportparts="empty: listbox-empty, feedback: listbox-feedback, filter-icon: listbox-filter-icon,
         filter-mark: listbox-filter-mark, hint: listbox-hint, items: listbox-items,
-        label: listbox-label, loading: listbox-loading, search: listbox-search,
+        label: listbox-label, live: listbox-live, loading: listbox-loading, search: listbox-search,
         search-field: listbox-search-field"
       .value=${this.value}
       ?multiple=${this.multiple}

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

@@ -85,10 +85,22 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
      * The largest value the reader can choose.
      */
     max: number;
+    /**
+     * What the upper thumb of a range is called, after the slider's own label.
+     *
+     * **Named with the label rather than instead of it.** Each thumb was
+     * `aria-label="${label} maximum"`, which overrode the `<label>` and read the
+     * `label` string only, so a slider named by a slotted label or `aria-label`
+     * had thumbs called "minimum" and "maximum" and nothing else. The word is a
+     * property, like every other word a control speaks.
+     */
+    maximumLabel: string;
     /**
      * The smallest value the reader can choose.
      */
     min: number;
+    /** What the lower thumb of a range is called, after the slider's own label. */
+    minimumLabel: string;
     /**
      * Which way the track runs, `vertical` standing it on end.
      *

package/dist/slider/root/slider-root.js

@@ -17,7 +17,9 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         this.markerLabels = false;
         this.markers = 0;
         this.max = 100;
+        this.maximumLabel = 'maximum';
         this.min = 0;
+        this.minimumLabel = 'minimum';
         this.range = false;
         this.showValue = false;
         this.handleInput = (event) => {
@@ -127,13 +129,17 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         max=${this.max}
         step=${this.step}
         .value=${String(at)}
-        aria-label=${`${this.label} ${which === 'start' ? 'minimum' : 'maximum'}`}
+        aria-labelledby=${this.labeled ? `${this.labelId} ${which}-name` : `${which}-name`}
         aria-describedby=${this.describedBy ?? nothing}
         ?disabled=${this.isDisabled}
         @input=${this.handleInput}
         @change=${this.handleChange}
       />`;
         return html `${this.renderLabel()}
+    ${this.range
+            ? html `<span id="start-name" hidden>${this.minimumLabel}</span
+            ><span id="end-name" hidden>${this.maximumLabel}</span>`
+            : nothing}
     <div
       part="field"
       data-markers=${this.markerValues.length > 0 ? '' : nothing}
@@ -190,9 +196,15 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessSlider.prototype, "max", void 0);
+__decorate([
+    property({ attribute: 'maximum-label' })
+], HelixHeadlessSlider.prototype, "maximumLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessSlider.prototype, "min", void 0);
+__decorate([
+    property({ attribute: 'minimum-label' })
+], HelixHeadlessSlider.prototype, "minimumLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessSlider.prototype, "orientation", void 0);