@fusion.dev/helix-headless 0.103.3 → 0.104.0

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);

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

@@ -55,28 +55,6 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @cssproperty --splitter-position - Where the divider sits, as a percentage of the box.
  */
 export declare class HelixHeadlessSplitter extends HelixElement {
-    /**
-     * How much of a shut pane is still shown, as a percentage.
-     *
-     * Zero by default, which is a pane fully gone. A tab strip or a title bar
-     * that should survive its own collapse says how much of itself to keep, and
-     * only whoever put it there knows that, which is the same reason `min` is a
-     * consumer's to set.
-     */
-    collapsedSize: number;
-    /**
-     * Where the divider sits, as a percentage of the whole.
-     *
-     * Reading gives where it is; writing declares it the consumer's, and
-     * `default-position` seeds one this element owns. The same accessor pair
-     * `Pagination.page` and the calendar's `month` carry.
-     */
-    get position(): number;
-    set position(next: number);
-    /**
-     * Accessible name for the handle where two dividers cross.
-     */
-    cornerLabel: string;
     /**
      * Which pane is shut, if either.
      *
@@ -92,6 +70,28 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      */
     get collapsed(): 'end' | 'start' | undefined;
     set collapsed(next: 'end' | 'start' | undefined);
+    /**
+     * What the divider says while a pane is shut, in place of a number.
+     *
+     * **A shut pane is off the scale the divider reports**, which is `min` to
+     * `max`, the sliver a drag keeps. The divider said a value outside its own
+     * range, 0 against a minimum of 20, which reads as broken rather than as
+     * shut. While shut it reports the whole 0 to 100 it sits on and says this.
+     */
+    collapsedLabel: string;
+    /**
+     * How much of a shut pane is still shown, as a percentage.
+     *
+     * Zero by default, which is a pane fully gone. A tab strip or a title bar
+     * that should survive its own collapse says how much of itself to keep, and
+     * only whoever put it there knows that, which is the same reason `min` is a
+     * consumer's to set.
+     */
+    collapsedSize: number;
+    /**
+     * Accessible name for the handle where two dividers cross.
+     */
+    cornerLabel: string;
     /**
      * Which pane starts shut, where nothing declared it.
      */
@@ -108,19 +108,6 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      * Nearest it may come to the end, on the same terms as `min`.
      */
     max: number | string;
-    /**
-     * Either kind of bound as a percentage of the box.
-     *
-     * Measured rather than cached: a length is only meaningful against the size
-     * the splitter is right now, and the drag that asks is already reading layout.
-     * Falls back where there is nothing to measure, which is the server and an
-     * element that is not displayed, so `aria-valuemin` is a number either way.
-     */
-    private toPercent;
-    /** `min` as a percentage, whichever way it was written. */
-    private get minPercent();
-    /** `max` as a percentage, whichever way it was written. */
-    private get maxPercent();
     /**
      * Nearest the divider may come to the start.
      *
@@ -141,6 +128,19 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      * passes through.
      */
     min: number | string;
+    /**
+     * Either kind of bound as a percentage of the box.
+     *
+     * Measured rather than cached: a length is only meaningful against the size
+     * the splitter is right now, and the drag that asks is already reading layout.
+     * Falls back where there is nothing to measure, which is the server and an
+     * element that is not displayed, so `aria-valuemin` is a number either way.
+     */
+    private toPercent;
+    /** `min` as a percentage, whichever way it was written. */
+    private get minPercent();
+    /** `max` as a percentage, whichever way it was written. */
+    private get maxPercent();
     /**
      * Which way the panes are laid out.
      *
@@ -168,6 +168,15 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      * has an honest answer.
      */
     orientation?: 'auto' | 'horizontal' | 'vertical';
+    /**
+     * Where the divider sits, as a percentage of the whole.
+     *
+     * Reading gives where it is; writing declares it the consumer's, and
+     * `default-position` seeds one this element owns. The same accessor pair
+     * `Pagination.page` and the calendar's `month` carry.
+     */
+    get position(): number;
+    set position(next: number);
     /**
      * How far one arrow press moves it, as a percentage.
      */

package/dist/splitter/root/splitter-root.js

@@ -6,12 +6,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var HelixHeadlessSplitter_1;
 import { capturePointer, closestInstance, customElement, HelixBeforeCollapseEvent, HelixBeforeResizeEvent, HelixElement, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 const STACK_BELOW = 512;
 let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitter extends HelixElement {
     constructor() {
         super(...arguments);
+        this.collapsedLabel = 'Collapsed';
         this.collapsedSize = 0;
         this.cornerLabel = 'Resize both';
         this.defaultPosition = 50;
@@ -181,19 +182,6 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
             this.leaveSeparator(event);
         };
     }
-    get position() {
-        const shut = this.collapsed;
-        if (shut) {
-            return shut === 'start' ? this.sliver : 100 - this.sliver;
-        }
-        return this.clamp(this.positionState ?? this.defaultPosition);
-    }
-    set position(next) {
-        const previous = this.position;
-        this.positionState = next;
-        this.reached = undefined;
-        this.requestUpdate('position', previous);
-    }
     get collapsed() {
         const held = this.collapsedState;
         if (held === undefined) {
@@ -236,6 +224,19 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
     get maxPercent() {
         return this.toPercent(this.max, 100);
     }
+    get position() {
+        const shut = this.collapsed;
+        if (shut) {
+            return shut === 'start' ? this.sliver : 100 - this.sliver;
+        }
+        return this.clamp(this.positionState ?? this.defaultPosition);
+    }
+    set position(next) {
+        const previous = this.position;
+        this.positionState = next;
+        this.reached = undefined;
+        this.requestUpdate('position', previous);
+    }
     get showing() {
         return this.reached === undefined ? this.position : this.clamp(this.reached);
     }
@@ -437,9 +438,10 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         tabindex="0"
         aria-label=${this.label}
         aria-orientation=${this.vertical ? 'horizontal' : 'vertical'}
-        aria-valuemax=${this.clamp(this.maxPercent)}
-        aria-valuemin=${this.clamp(this.minPercent)}
+        aria-valuemax=${this.collapsed ? 100 : this.clamp(this.maxPercent)}
+        aria-valuemin=${this.collapsed ? 0 : this.clamp(this.minPercent)}
         aria-valuenow=${Math.round(position)}
+        aria-valuetext=${this.collapsed ? this.collapsedLabel : nothing}
         ?data-dragging=${this.dragging}
         ?data-flush=${this.flush}
         @dblclick=${this.handleDoubleClick}
@@ -472,18 +474,18 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         ></div>`)}`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessSplitter.prototype, "collapsed", null);
+__decorate([
+    property({ attribute: 'collapsed-label' })
+], HelixHeadlessSplitter.prototype, "collapsedLabel", void 0);
 __decorate([
     property({ attribute: 'collapsed-size', type: Number })
 ], HelixHeadlessSplitter.prototype, "collapsedSize", void 0);
-__decorate([
-    property({ type: Number })
-], HelixHeadlessSplitter.prototype, "position", null);
 __decorate([
     property({ attribute: 'corner-label' })
 ], HelixHeadlessSplitter.prototype, "cornerLabel", void 0);
-__decorate([
-    property()
-], HelixHeadlessSplitter.prototype, "collapsed", null);
 __decorate([
     property({ attribute: 'default-collapsed' })
 ], HelixHeadlessSplitter.prototype, "defaultCollapsed", void 0);
@@ -502,6 +504,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessSplitter.prototype, "orientation", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessSplitter.prototype, "position", null);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessSplitter.prototype, "step", void 0);

package/dist/switch/root/switch-root.js

@@ -30,6 +30,7 @@ let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerCheck
         this.reportRequired(!this.checked, 'Turn this on to continue.', 'control');
     }
     formResetCallback() {
+        super.formResetCallback();
         this.resetChecked();
     }
     updated(changed) {

package/dist/table/column/table-column.d.ts

@@ -131,6 +131,14 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      * such a column is never sortable however it is marked.
      */
     field: string;
+    /**
+     * What the grip that moves the column is called, with the heading's words as
+     * `{name}`.
+     *
+     * **Every word a column speaks is a property**, so a table in another
+     * language hears its own rather than English around its own headings.
+     */
+    moveLabel: string;
     /**
      * Whether a reader may change this column's width.
      *
@@ -140,6 +148,11 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      * stores the widths can take the decision.
      */
     resizable: boolean;
+    /**
+     * What the separator that resizes the column is called, with the heading's
+     * words as `{name}`.
+     */
+    resizeLabel: string;
     /**
      * Whether a reader may reorder the set by this column.
      *
@@ -212,6 +225,10 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      * the overflow either way, that being paint, and gets the honest track list.
      */
     width: string;
+    /**
+     * How the separator reads out the column's width, with `{width}` filled in.
+     */
+    widthLabel: string;
     /**
      * @internal Read by a parent to identify its children across the light DOM,
      * which is cheaper than `instanceof` and is why this is public rather than

package/dist/table/column/table-column.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 HelixHeadlessTableColumn_1;
-import { customElement, HelixBeforeResizeEvent, HelixElement, hostAria, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, HelixBeforeResizeEvent, HelixElement, hostAria, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
 import { dotsThreeVertical } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -34,9 +34,12 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
         this.cell = undefined;
         this.compare = undefined;
         this.field = '';
+        this.moveLabel = 'Move {name}';
         this.resizable = false;
+        this.resizeLabel = 'Resize {name}';
         this.sortable = false;
         this.width = '';
+        this.widthLabel = '{width} pixels';
         this.isTableColumn = true;
         this.sorted = undefined;
         this.movable = false;
@@ -165,7 +168,7 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
     render() {
         const name = this.name;
         return html `<span part="column">${this.movable
-            ? html `<button part="grip" type="button" aria-label=${name ? `Move ${name}` : 'Move column'}>
+            ? html `<button part="grip" type="button" aria-label=${fillTemplate(this.moveLabel, { name: name || 'column' })}>
             <svg aria-hidden="true" fill="currentColor" part="grip-mark" viewBox=${dotsThreeVertical.viewBox}>
               ${unsafeSVG(dotsThreeVertical.content)}
             </svg>
@@ -177,12 +180,12 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
             part="resizer"
             role="separator"
             tabindex="0"
-            aria-label=${name ? `Resize ${name}` : 'Resize column'}
+            aria-label=${fillTemplate(this.resizeLabel, { name: name || 'column' })}
             aria-orientation="vertical"
             aria-valuemin=${HelixHeadlessTableColumn_1.NARROWEST}
             aria-valuemax="4096"
             aria-valuenow=${Math.max(HelixHeadlessTableColumn_1.NARROWEST, this.drawn)}
-            aria-valuetext=${`${this.drawn} pixels`}
+            aria-valuetext=${fillTemplate(this.widthLabel, { width: this.drawn })}
             @keydown=${this.handleResizeKey}
             @pointerdown=${this.handleResizeStart}
             @pointermove=${this.handleResizeMove}
@@ -201,9 +204,15 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTableColumn.prototype, "field", void 0);
+__decorate([
+    property({ attribute: 'move-label' })
+], HelixHeadlessTableColumn.prototype, "moveLabel", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessTableColumn.prototype, "resizable", void 0);
+__decorate([
+    property({ attribute: 'resize-label' })
+], HelixHeadlessTableColumn.prototype, "resizeLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessTableColumn.prototype, "sortable", void 0);
@@ -213,6 +222,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTableColumn.prototype, "width", void 0);
+__decorate([
+    property({ attribute: 'width-label' })
+], HelixHeadlessTableColumn.prototype, "widthLabel", void 0);
 __decorate([
     state()
 ], HelixHeadlessTableColumn.prototype, "sorted", void 0);