@fusion.dev/helix-core 0.159.0 → 0.161.0

package/dist/controllers/virtualize-controller/virtualize-controller.d.ts

@@ -7,6 +7,12 @@ export interface VirtualizeOptions {
     count: () => number;
     /** How tall one item is along the scroll axis, in pixels. */
     estimate: () => number;
+    /**
+     * The space between two items along the scroll axis, in pixels, which the
+     * host draws, such as a flex or grid `gap`. Each item counts it as part of
+     * its own size. Zero by default.
+     */
+    gap?: () => number;
     /**
      * Rows kept either side of what fits, so a scroll reveals something drawn
      * rather than something blank. Four by default.
@@ -213,6 +219,20 @@ export declare class VirtualizeController implements ReactiveController {
      * last move is out of date.
      */
     scrolling(): boolean;
+    /**
+     * Takes the offset as the box's own where the box moved it up only because
+     * the set below it got shorter, which the browser does to keep the offset
+     * inside the content, and answers where it was before.
+     *
+     * **Not a reader scrolling.** Rows at the end of the set measured shorter
+     * than their estimates shrink the content, and the box pulls its offset back
+     * to the new bottom before any `scroll` event arrives. Read as a scroll, the
+     * difference went into the spacer as drift and was then paid a second time:
+     * in Chromium, End on 2,000 rows of one to five lines left the window 292
+     * pixels above the last item, which stayed drawn below the box as the row
+     * holding focus.
+     */
+    private noteClamp;
     /** Squares the spacer and the scroll offset once the box is still. */
     private readonly rest;
     /**
@@ -264,6 +284,8 @@ export declare class VirtualizeController implements ReactiveController {
      * Reading the drawn rows once corrects the slope, and it is still a line.
      */
     private line;
+    /** The space the host draws between two items, which each item counts. */
+    private gap;
     /**
      * Reads the drawn rows' height once for the straight line, for a host that
      * offers `rows` and does not measure.

package/dist/controllers/virtualize-controller/virtualize-controller.js

@@ -17,7 +17,11 @@ export class VirtualizeController {
         this.touching = false;
         this.uneven = false;
         this.handleScroll = () => {
-            const top = this.options.container()?.scrollTop ?? 0;
+            const box = this.options.container();
+            if (box) {
+                this.noteClamp(box);
+            }
+            const top = box?.scrollTop ?? 0;
             if (top !== this.lastTop) {
                 this.heading = top > this.lastTop ? 1 : -1;
                 this.lastTop = top;
@@ -95,6 +99,15 @@ export class VirtualizeController {
             this.resting !== undefined ||
             (this.options.container()?.scrollTop ?? this.lastTop) !== this.lastTop);
     }
+    noteClamp(box) {
+        const was = this.lastTop;
+        if (!this.touching &&
+            box.scrollTop < was &&
+            box.scrollTop >= box.scrollHeight - box.clientHeight - 1) {
+            this.lastTop = box.scrollTop;
+        }
+        return was;
+    }
     square() {
         const box = this.options.container();
         if (this.drift > 0 && box) {
@@ -161,7 +174,10 @@ export class VirtualizeController {
     }
     line() {
         const estimate = Math.max(1, this.options.estimate());
-        return this.sample?.estimate === estimate ? this.sample.size : estimate;
+        return this.sample?.estimate === estimate ? this.sample.size : estimate + this.gap();
+    }
+    gap() {
+        return Math.max(0, this.options.gap?.() ?? 0);
     }
     sampleRows() {
         const estimate = Math.max(1, this.options.estimate());
@@ -176,7 +192,7 @@ export class VirtualizeController {
         const uneven = Math.max(...seen) - Math.min(...seen) > 1;
         if (this.sample?.estimate !== estimate) {
             const was = this.line();
-            const size = Math.max(1, seen.reduce((sum, height) => sum + height, 0) / seen.length);
+            const size = Math.max(1, seen.reduce((sum, height) => sum + height, 0) / seen.length) + this.gap();
             this.sample = { estimate, size };
             if (Math.abs(size - was) >= 0.5) {
                 const box = this.options.container();
@@ -291,12 +307,13 @@ export class VirtualizeController {
         }
         const total = Math.max(0, this.options.count());
         const box = this.options.container();
+        const from = box ? this.noteClamp(box) : this.lastTop;
         const top = box ? this.offset(box) : 0;
         const anchor = this.target ?? this.heights.indexAt(top, total);
         const was = this.heights.before(anchor, total);
         let news = false;
         for (const { element, index } of rows) {
-            if (this.heights.record(index, element.getBoundingClientRect().height)) {
+            if (this.heights.record(index, element.getBoundingClientRect().height + this.gap())) {
                 news = true;
             }
         }
@@ -310,7 +327,7 @@ export class VirtualizeController {
                 this.drift -= moved;
             }
             else {
-                box.scrollTop += moved;
+                box.scrollTop = from + moved;
                 this.lastTop = box.scrollTop;
             }
         }

package/dist/events/details.d.ts

@@ -258,6 +258,12 @@ export interface TourAskDetail {
  * that `event.target` does not.
  */
 export interface ChangeDetail {
+    /**
+     * Why the change was asked for, where a family names its causes. Video
+     * Playlist sends `ended`, `next`, `press`, `previous`, and `removed` on
+     * `helix-before-activate`.
+     */
+    cause?: string;
     /** The value after the change. */
     value: string;
 }

package/dist/index.d.ts

@@ -46,7 +46,7 @@ export { MixinControllerValue, type MixinControllerValueInterface, } from './mix
 export { type DismissibleElement, MixinDismissible, } from './mixins/mixin-dismissible/mixin-dismissible.js';
 export { MixinField, type MixinFieldInterface } from './mixins/mixin-field/mixin-field.js';
 export { MixinPickerEditing, type MixinPickerEditingInterface, } from './mixins/mixin-picker-editing/mixin-picker-editing.js';
-export { MixinPickerFeedback, type MixinPickerFeedbackInterface, } from './mixins/mixin-picker-feedback/mixin-picker-feedback.js';
+export { MixinPickerFeedback, type MixinPickerFeedbackInterface, type PickerFailure, } from './mixins/mixin-picker-feedback/mixin-picker-feedback.js';
 export { MixinPickerField, type MixinPickerFieldInterface, } from './mixins/mixin-picker-field/mixin-picker-field.js';
 export { MixinSegmentedField, type MixinSegmentedFieldInterface, } from './mixins/mixin-segmented-field/mixin-segmented-field.js';
 export { MixinSelectableItem, type MixinSelectableItemInterface, } from './mixins/mixin-selectable-item/mixin-selectable-item.js';
@@ -56,7 +56,7 @@ export { anchorElement } from './utils/anchor-element/anchor-element.js';
 export { arrowReach, sideOf } from './utils/arrow/arrow.js';
 export { assignSlots } from './utils/assign-slots/assign-slots.js';
 export { type DrawAutofillOptions, drawAutofill, } from './utils/autofill-select/autofill-select.js';
-export { addDays, addMonths, type Barring, barredBy, type CalendarView, calendarLocale, type DateCalendar, localToday, MONTH_CALENDARS, type MonthCalendar, type MonthSystem, monthOf, monthOut, monthSystem, type PeriodCell, type PeriodPage, periodCells, periodKey, periodMove, sameMonth, todayIn, weekendOf, weekStartOf, YEARS_SHOWN, yearOut, yearPageOf, } from './utils/calendar/calendar.js';
+export { addDays, addMonths, type Barring, barredBy, type CalendarParts, type CalendarView, calendarLocale, type DateCalendar, localToday, MONTH_CALENDARS, type MonthCalendar, type MonthSystem, monthOf, monthOut, monthSystem, type PeriodCell, type PeriodPage, periodCells, periodKey, periodMove, sameMonth, todayIn, weekendOf, weekStartOf, YEARS_SHOWN, yearOut, yearPageOf, } from './utils/calendar/calendar.js';
 export { capturePointer } from './utils/capture-pointer/capture-pointer.js';
 export { centerInView } from './utils/center-in-view/center-in-view.js';
 export { ariaChord, type ChordPress, chordParts, matchesChord, printableChord, selectsAll, } from './utils/chord/chord.js';
@@ -72,7 +72,7 @@ export { createSheet } from './utils/create-sheet/create-sheet.js';
 export { type Color, type ColorFormat, formatColor, parseColor, toCss, toHsl, toOklch, toRgb, } from './utils/css-color/css-color.js';
 export { customElement, definedTags, duplicateRegistrations, } from './utils/custom-element/custom-element.js';
 export { type DataOption, type DataOptionItem, dataOptions, drawOptions, windowOf, } from './utils/data-options/data-options.js';
-export { segmentName } from './utils/date-segments/date-segments.js';
+export { readWrittenDate, readWrittenTime, segmentName, } from './utils/date-segments/date-segments.js';
 export { type DrawDismissOptions, drawDismiss, drawDismissGlyph, } from './utils/draw-dismiss/draw-dismiss.js';
 export { type DrawIconOptions, drawIcon } from './utils/draw-icon/draw-icon.js';
 export { CHART_PLOT, drawTooltip, type ReadingCursor } from './utils/draw-tooltip/draw-tooltip.js';

package/dist/index.js

@@ -72,7 +72,7 @@ export { createSheet } from './utils/create-sheet/create-sheet.js';
 export { formatColor, parseColor, toCss, toHsl, toOklch, toRgb, } from './utils/css-color/css-color.js';
 export { customElement, definedTags, duplicateRegistrations, } from './utils/custom-element/custom-element.js';
 export { dataOptions, drawOptions, windowOf, } from './utils/data-options/data-options.js';
-export { segmentName } from './utils/date-segments/date-segments.js';
+export { readWrittenDate, readWrittenTime, segmentName, } from './utils/date-segments/date-segments.js';
 export { drawDismiss, drawDismissGlyph, } from './utils/draw-dismiss/draw-dismiss.js';
 export { drawIcon } from './utils/draw-icon/draw-icon.js';
 export { CHART_PLOT, drawTooltip } from './utils/draw-tooltip/draw-tooltip.js';

package/dist/mixins/mixin-controller-active/mixin-controller-active.d.ts

@@ -21,8 +21,12 @@ export declare class MixinControllerActiveInterface {
      * is written.
      */
     defaultActive: string;
-    /** Requests a new current item, and returns whether the change was applied. */
-    requestActive(next: string): boolean;
+    /**
+     * Requests a new current item, and returns whether the change was applied.
+     * `cause` says why, where the family names its causes, and reaches
+     * `helix-before-activate` as `detail.cause`.
+     */
+    requestActive(next: string, cause?: string): boolean;
     /**
      * Which item is current, given what there is to choose from.
      *

package/dist/mixins/mixin-controller-active/mixin-controller-active.js

@@ -23,7 +23,7 @@ export const MixinControllerActive = (Base) => {
             this.activeState = next;
             this.requestUpdate('active', previous);
         }
-        requestActive(next) {
+        requestActive(next, cause) {
             if (next === this.active) {
                 return true;
             }
@@ -34,7 +34,7 @@ export const MixinControllerActive = (Base) => {
                     this.activeState = value;
                     this.requestUpdate('active', previous);
                 },
-                event: (value) => new HelixBeforeActivateEvent({ value }),
+                event: (value) => new HelixBeforeActivateEvent(cause === undefined ? { value } : { cause, value }),
                 host: this,
                 next,
             });

package/dist/mixins/mixin-field/mixin-field.js

@@ -151,7 +151,8 @@ export const MixinField = (Base) => {
             super.willUpdate(changed);
             this.shownFeedback = this.resolvedFeedback;
             this.toggleState('invalid', this.shownFeedback !== '');
-            this.internals.ariaInvalid = this.shownFeedback === '' ? null : 'true';
+            this.internals.ariaInvalid =
+                this.shownFeedback !== '' ? 'true' : this.validates ? 'false' : null;
         }
         formResetCallback() {
             ;

package/dist/mixins/mixin-picker-feedback/mixin-picker-feedback.d.ts

@@ -19,11 +19,23 @@ export declare class MixinPickerFeedbackInterface {
      * picker and says why.
      */
     invalid: boolean;
-    /** Whether a reader is told the answer is wrong: `invalid`, or `feedback`. */
+    /**
+     * Whether a reader is told the answer is wrong: `invalid`, `feedback`, a
+     * held answer the picker refuses, or a missing answer once the reader has
+     * committed one or a form has refused the picker.
+     */
     protected get marked(): boolean;
+    /**
+     * What the picker's own validation finds: `missing` for a required picker
+     * with nothing chosen, `refused` for an answer it holds and refuses, or
+     * nothing. Read in `willUpdate`, so a picker answers it from its properties.
+     */
+    protected get failure(): PickerFailure | undefined;
     /** The `feedback` line, or nothing while there is none. */
     protected renderPickerFeedback(): TemplateResult | typeof nothing;
 }
+/** What a picker's own validation finds, which `marked` reads. */
+export type PickerFailure = 'missing' | 'refused';
 /**
  * `feedback` and `invalid` for a picker that stands on its own as a form
  * control: Color Picker, Date Picker and Time Picker.

package/dist/mixins/mixin-picker-feedback/mixin-picker-feedback.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { hostAria } from '../../utils/host-aria/host-aria.js';
 export const MixinPickerFeedback = (Base) => {
     class PickerFeedbackElement extends Base {
@@ -13,16 +13,36 @@ export const MixinPickerFeedback = (Base) => {
             super(...arguments);
             this.feedback = '';
             this.invalid = false;
+            this.touched = false;
         }
         get marked() {
-            return this.invalid || this.feedback !== '';
+            if (this.invalid || this.feedback !== '') {
+                return true;
+            }
+            const failure = this.failure;
+            return failure === 'refused' || (failure === 'missing' && this.touched);
+        }
+        get failure() {
+            return undefined;
+        }
+        formResetCallback() {
+            super.formResetCallback();
+            this.touched = false;
+        }
+        firstUpdated(changed) {
+            super.firstUpdated(changed);
+            const touch = () => {
+                this.touched = true;
+            };
+            this.addEventListener('invalid', touch);
+            this.addEventListener('change', touch);
         }
         get validityFeedback() {
             return this.feedback;
         }
         willUpdate(changed) {
             super.willUpdate(changed);
-            this.internals.ariaInvalid = this.marked ? 'true' : null;
+            this.internals.ariaInvalid = this.marked ? 'true' : 'false';
             this.toggleState('invalid', this.marked);
         }
         updated(changed) {
@@ -42,5 +62,8 @@ export const MixinPickerFeedback = (Base) => {
     __decorate([
         property({ reflect: true, type: Boolean })
     ], PickerFeedbackElement.prototype, "invalid", void 0);
+    __decorate([
+        state()
+    ], PickerFeedbackElement.prototype, "touched", void 0);
     return PickerFeedbackElement;
 };

package/dist/mixins/mixin-segmented-field/mixin-segmented-field.d.ts

@@ -1,5 +1,6 @@
 import { type TemplateResult } from 'lit';
 import type { HelixFormElement } from '../../helix-form-element/helix-form-element.js';
+import type { MonthSystem } from '../../utils/calendar/calendar.js';
 import { type SegmentedKind, type SegmentOptions } from '../../utils/date-segments/date-segments.js';
 import type { MixinControllerOpenInterface } from '../mixin-controller-open/mixin-controller-open.js';
 import type { MixinControllerValueInterface } from '../mixin-controller-value/mixin-controller-value.js';
@@ -34,8 +35,17 @@ export declare class MixinSegmentedFieldInterface {
      * time, in place of a line of text.
      */
     segmented: boolean;
+    /**
+     * What a screen reader hears before the segments of a range's first date or
+     * time, after each segment's own name.
+     */
+    rangeStartLabel: string;
+    /** What a screen reader hears before the segments of a range's second date or time. */
+    rangeEndLabel: string;
     /** Whether the segments are drawn: `segmented`, where the family can hold them. */
     protected get segmentsShown(): boolean;
+    /** How many rows of segments the value takes: two for a range, one otherwise. */
+    protected get segmentGroups(): number;
     /** The row of segments, the group a description is carried to, or `null` while none is drawn. */
     protected get segmentGroup(): HTMLElement | null;
     /** Whether this family can show segments in its current shape. */
@@ -46,6 +56,8 @@ export declare class MixinSegmentedFieldInterface {
     protected get segmentLocale(): string;
     /** The clock and the seconds a time is laid out with. */
     protected get segmentOptions(): SegmentOptions;
+    /** The calendar a date's parts are counted in, or `undefined` for the Gregorian calendar. */
+    protected get segmentSystem(): MonthSystem | undefined;
     /** The row of segments, in the locale's order, with what it writes between them. */
     protected renderSegments(): TemplateResult;
 }

package/dist/mixins/mixin-segmented-field/mixin-segmented-field.js

@@ -18,18 +18,23 @@ export const MixinSegmentedField = (Base) => {
             this.emptyMessage = '{kind, select, date {Enter a date.} other {Enter a time.}}';
             this.emptySegmentLabel = 'Empty';
             this.incompleteMessage = '{kind, select, date {Enter a whole date.} other {Enter a whole time.}}';
+            this.rangeEndLabel = 'End';
+            this.rangeStartLabel = 'Start';
             this.segmented = false;
-            this.parts = {};
+            this.parts = [{}];
             this.typed = '';
             this.own = false;
             this.touchApple = appleTouch(typeof navigator === 'undefined' ? undefined : navigator);
             this.entered = undefined;
+            this.opener = undefined;
             this.handleSegmentKeydown = (event) => {
                 const element = event.currentTarget;
                 const kind = element.dataset.segment;
+                const row = Number(element.dataset.row ?? 0);
                 const twelve = isTwelveHourLayout(this.layout);
                 if (event.key === 'ArrowDown' && event.altKey) {
                     event.preventDefault();
+                    this.opener = element;
                     this.handleTriggerClick();
                     return;
                 }
@@ -57,14 +62,15 @@ export const MixinSegmentedField = (Base) => {
                 const edit = segmentKey(event.key, {
                     kind,
                     locale: this.segmentLocale,
-                    segments: this.parts,
+                    segments: this.parts[row] ?? {},
+                    system: this.segmentSystem,
                     twelve,
                     typed: this.typed,
                 });
                 if (edit) {
                     event.preventDefault();
                     this.typed = edit.typed;
-                    this.take(edit.segments);
+                    this.take(row, edit.segments);
                     if (edit.advance) {
                         this.moveFocus(element, 1);
                     }
@@ -96,12 +102,34 @@ export const MixinSegmentedField = (Base) => {
             };
         }
         static { this.words = ''; }
+        returnFocus() {
+            const opener = this.opener;
+            this.opener = undefined;
+            if (opener?.isConnected && this.segmentsShown) {
+                this.returning = true;
+                opener.focus();
+                this.returning = false;
+                return;
+            }
+            super.returnFocus();
+        }
         get segmentable() {
             return true;
         }
         get segmentsShown() {
             return this.segmented && this.segmentable;
         }
+        get segmentGroups() {
+            return 1;
+        }
+        joined(rows) {
+            const values = rows.map((one) => segmentsValue(this.segmentedKind, one, this.layout, this.segmentSystem));
+            return values.some((one) => one === '') ? '' : values.join(',');
+        }
+        rowsOf(value) {
+            const values = this.segmentGroups > 1 ? value.split(',') : [value];
+            return Array.from({ length: this.segmentGroups }, (_, row) => segmentsOf(this.segmentedKind, (values[row] ?? '').trim(), this.segmentSystem));
+        }
         get segmentedKind() {
             return 'date';
         }
@@ -111,6 +139,9 @@ export const MixinSegmentedField = (Base) => {
         get segmentOptions() {
             return {};
         }
+        get segmentSystem() {
+            return undefined;
+        }
         get layout() {
             return segmentLayout(this.segmentedKind, this.segmentLocale, this.segmentOptions);
         }
@@ -126,9 +157,9 @@ export const MixinSegmentedField = (Base) => {
         get segmentElements() {
             return [...(this.renderRoot?.querySelectorAll('[part~="segment"]') ?? [])];
         }
-        take(next) {
-            this.parts = next;
-            const value = segmentsValue(this.segmentedKind, next, this.layout);
+        take(row, next) {
+            this.parts = this.parts.map((one, index) => (index === row ? next : one));
+            const value = this.joined(this.parts);
             if (value === this.value) {
                 this.sync();
                 return;
@@ -136,7 +167,7 @@ export const MixinSegmentedField = (Base) => {
             this.own = true;
             if (!this.requestValue(value)) {
                 this.own = false;
-                this.parts = segmentsOf(this.segmentedKind, this.value);
+                this.parts = this.rowsOf(this.value);
             }
         }
         moveFocus(from, by) {
@@ -149,13 +180,13 @@ export const MixinSegmentedField = (Base) => {
             this.own = false;
             if (!own &&
                 this.segmentsShown &&
-                segmentsValue(this.segmentedKind, this.parts, this.layout) !== this.value) {
-                this.parts = segmentsOf(this.segmentedKind, this.value);
+                (this.parts.length !== this.segmentGroups || this.joined(this.parts) !== this.value)) {
+                this.parts = this.rowsOf(this.value);
             }
         }
         formResetCallback() {
             super.formResetCallback();
-            this.parts = {};
+            this.parts = this.rowsOf('');
             this.typed = '';
         }
         connectedCallback() {
@@ -175,7 +206,9 @@ export const MixinSegmentedField = (Base) => {
                 return;
             }
             const anchor = this.anchor ?? undefined;
-            const partial = isPartial(this.segmentedKind, this.parts, this.layout);
+            const partial = this.parts.some((one) => isPartial(this.segmentedKind, one, this.layout, this.segmentSystem)) ||
+                (this.value === '' &&
+                    this.parts.some((one) => Object.values(one).some((part) => part !== undefined)));
             const fault = verdictFlags(this.validate());
             if (partial) {
                 this.internals.setValidity({ badInput: true }, this.badInputMessage ||
@@ -197,51 +230,67 @@ export const MixinSegmentedField = (Base) => {
             const layout = this.layout;
             const twelve = isTwelveHourLayout(layout);
             const locale = this.segmentLocale;
-            return html `<div
-        part="segments"
-        id=${this.controlId}
-        role="group"
-        aria-labelledby=${this.labeled ? this.labelId : nothing}
-        aria-describedby=${this.describedBy ?? nothing}
-        aria-invalid=${this.invalidity ?? nothing}
-        @focusin=${this.handleSegmentsFocusIn}
-        @focusout=${this.handleSegmentsFocusOut}
-        @keypress=${this.handleKeypress}
-      >
-        ${layout.map((slot) => {
-                if ('literal' in slot) {
-                    return html `<span part="literal" aria-hidden="true">${slot.literal}</span>`;
-                }
-                const kind = slot.kind;
-                const shown = shownValue(kind, this.parts, twelve);
-                const { max, min } = segmentRange(kind, this.parts, twelve);
-                const text = segmentText(kind, this.parts, twelve, locale);
-                const empty = shown === undefined;
-                const id = `${this.controlId}-${kind}`;
-                const editable = !this.isDisabled && !this.readOnly;
-                const spin = !this.touchApple;
-                return html `<span
+            const system = this.segmentSystem;
+            const rows = this.segmentGroups;
+            const row = (index) => {
+                const parts = this.parts[index] ?? {};
+                const prefix = index === 0 ? this.controlId : `${this.controlId}-end`;
+                const rowName = rows > 1 ? `${prefix}-row` : '';
+                return html `${rows > 1
+                    ? html `<span id=${rowName} hidden
+                >${index === 0 ? this.rangeStartLabel : this.rangeEndLabel}</span
+              >`
+                    : nothing}${layout.map((slot) => {
+                    if ('literal' in slot) {
+                        return html `<span part="literal" aria-hidden="true">${slot.literal}</span>`;
+                    }
+                    const kind = slot.kind;
+                    const shown = shownValue(kind, parts, twelve);
+                    const { max, min } = segmentRange(kind, parts, twelve, system);
+                    const text = segmentText(kind, parts, twelve, locale);
+                    const empty = shown === undefined;
+                    const id = `${prefix}-${kind}`;
+                    const editable = !this.isDisabled && !this.readOnly;
+                    const spin = !this.touchApple;
+                    const named = [id, rowName, this.labeled ? this.labelId : ''].filter(Boolean).join(' ');
+                    return html `<span
             part="segment${empty ? ' segment-placeholder' : ''}"
             id=${id}
+            data-row=${rows > 1 ? index : nothing}
             data-segment=${kind}
             role=${spin ? 'spinbutton' : 'textbox'}
             tabindex=${this.isDisabled ? '-1' : '0'}
             inputmode=${kind === 'dayPeriod' ? nothing : 'numeric'}
             enterkeyhint=${editable ? 'next' : nothing}
-            aria-label=${this.labeled ? `${segmentName(kind, locale)},` : segmentName(kind, locale)}
-            aria-labelledby=${this.labeled ? `${id} ${this.labelId}` : nothing}
+            aria-label=${named === id ? segmentName(kind, locale) : `${segmentName(kind, locale)},`}
+            aria-labelledby=${named === id ? nothing : named}
             aria-invalid=${this.invalidity ?? nothing}
             aria-valuemin=${spin ? min : nothing}
             aria-valuemax=${spin ? max : nothing}
             aria-valuenow=${spin ? (shown ?? nothing) : nothing}
-            aria-valuetext=${spin ? (empty ? this.emptySegmentLabel : segmentValueText(kind, this.parts, twelve, locale)) : nothing}
+            aria-valuetext=${spin ? (empty ? this.emptySegmentLabel : segmentValueText(kind, parts, twelve, locale, system)) : nothing}
             aria-disabled=${this.isDisabled ? 'true' : nothing}
             aria-required=${this.required ? 'true' : nothing}
             aria-readonly=${this.readOnly ? 'true' : nothing}
             @keydown=${this.handleSegmentKeydown}
             >${text}</span
           >`;
-            })}
+                })}`;
+            };
+            return html `<div
+        part="segments"
+        id=${this.controlId}
+        role="group"
+        aria-labelledby=${this.labeled ? this.labelId : nothing}
+        aria-describedby=${this.describedBy ?? nothing}
+        aria-invalid=${this.invalidity ?? nothing}
+        @focusin=${this.handleSegmentsFocusIn}
+        @focusout=${this.handleSegmentsFocusOut}
+        @keypress=${this.handleKeypress}
+      >
+        ${Array.from({ length: rows }, (_, index) => index === 0
+                ? row(0)
+                : html `<span part="literal range-separator" aria-hidden="true"> – </span>${row(index)}`)}
       </div>`;
         }
     }
@@ -257,6 +306,14 @@ export const MixinSegmentedField = (Base) => {
         words,
         property({ attribute: 'incomplete-message' })
     ], SegmentedFieldElement.prototype, "incompleteMessage", void 0);
+    __decorate([
+        words,
+        property({ attribute: 'range-end-label' })
+    ], SegmentedFieldElement.prototype, "rangeEndLabel", void 0);
+    __decorate([
+        words,
+        property({ attribute: 'range-start-label' })
+    ], SegmentedFieldElement.prototype, "rangeStartLabel", void 0);
     __decorate([
         property({ type: Boolean })
     ], SegmentedFieldElement.prototype, "segmented", void 0);