@fusion.dev/helix-headless 0.154.0 → 0.155.0

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, afterLinkFollowed, customElement, drawAutofill, drawStatus, HelixFormElement, hostAria, hostWords, isRtl, MixinControllerOpen, MixinControllerValue, MixinField, onApple, PopoverController, reportValues, StatusController, typesCharacter, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, customElement, dataOptions, drawAutofill, drawStatus, HelixFormElement, hostAria, hostWords, isRtl, MixinControllerOpen, MixinControllerValue, MixinField, onApple, PopoverController, reportValues, StatusController, sideOf, typesCharacter, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -28,6 +28,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         this.emptyText = 'No matches';
         this.filterable = false;
         this.focusable = true;
+        this.items = undefined;
         this.listLabel = 'Options';
         this.loading = false;
         this.loadingText = 'Loading';
@@ -43,6 +44,11 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
             ],
             offset: () => 4,
             onDismiss: () => this.close(),
+            onPlace: (placement) => {
+                const side = sideOf(placement);
+                this.toggleState('placed-bottom', side === 'bottom');
+                this.toggleState('placed-top', side === 'top');
+            },
             open: () => this.open,
             place: () => this.position !== 'item-aligned',
             placement: 'bottom-start',
@@ -124,7 +130,9 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
             const step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
             if (step !== 0 && !this.multiple && !(event.altKey || event.ctrlKey || event.metaKey)) {
                 event.preventDefault();
-                const reachable = listbox?.options.filter((option) => !option.hidden && !option.disabled) ?? [];
+                const reachable = this.items
+                    ? this.entries.filter((option) => !option.disabled)
+                    : (listbox?.options.filter((option) => !option.hidden && !option.disabled) ?? []);
                 const next = reachable[Math.max(0, reachable.findIndex((one) => one.value === this.value) + step)];
                 if (next) {
                     this.choose(next.value);
@@ -165,16 +173,29 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         return this.partNamed('listbox');
     }
     get display() {
-        const words = this.chosenOptions.map((option) => option.text);
+        const chosen = new Set(this.value === '' ? [] : this.value.split(','));
+        const words = this.entries.filter((option) => chosen.has(option.value)).map((one) => one.text);
         if (words.length > 0) {
             return new Intl.ListFormat(wordsLocale(this), { style: 'short', type: 'unit' }).format(words);
         }
-        return this.value !== '' && !this.childrenKnown ? nothing : this.placeholder;
+        return this.value !== '' && !this.childrenKnown && !this.items ? nothing : this.placeholder;
     }
     get chosenOptions() {
+        if (this.items) {
+            return [];
+        }
         const chosen = new Set(this.value === '' ? [] : this.value.split(','));
         return optionsAmong(this.knownChildren).filter((option) => chosen.has(option.value));
     }
+    get entries() {
+        if (!this.items) {
+            return optionsAmong(this.knownChildren);
+        }
+        if (this.data?.from !== this.items) {
+            this.data = { from: this.items, options: dataOptions(this.items) };
+        }
+        return this.data.options;
+    }
     renderValue() {
         const chosen = this.chosenOptions;
         return this.valueContent && chosen.length > 0 ? this.valueContent(chosen) : this.display;
@@ -226,9 +247,9 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         }
     }
     reconcileOptions() {
-        const options = optionsAmong(this.knownChildren);
-        if (this.defaultValue === '' && !this.hasAttribute('default-value')) {
-            const declared = options
+        const options = this.entries;
+        if (!this.items && this.defaultValue === '' && !this.hasAttribute('default-value')) {
+            const declared = optionsAmong(this.knownChildren)
                 .filter((option) => option.defaultSelected)
                 .map((option) => option.value);
             if (declared.length > 0) {
@@ -255,7 +276,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label });
-        if (this.childrenKnown) {
+        if (this.childrenKnown || this.items) {
             this.reconcileOptions();
         }
     }
@@ -298,6 +319,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
       .value=${this.value}
       ?multiple=${this.multiple}
       ?filterable=${this.filterable}
+      .items=${this.items}
       manual
       aria-label=${this.listName || this.listLabel || nothing}
       @keydown=${this.handleListKeydown}
@@ -357,7 +379,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
             disabled: this.isDisabled,
             multiple: this.multiple,
             onFill: (value) => this.requestValue(value),
-            options: optionsAmong(this.knownChildren),
+            options: this.entries,
             value: this.value,
         })}`;
     }
@@ -375,6 +397,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessSelect.prototype, "focusable", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessSelect.prototype, "items", void 0);
 __decorate([
     words,
     property({ attribute: 'list-label' })

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

@@ -19,7 +19,12 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  * does not draw a hundred and one marks by accident.
  *
  * A range with two thumbs is two inputs stacked on one track, because there is
- * no native two-thumb range. Each thumb keeps its own value.
+ * no native two-thumb range. Each thumb keeps its own value, and a named range
+ * submits one entry per thumb under its name, the lowest first. A range given
+ * more than two values, such as `default-value="20,50,80"`, has a thumb for
+ * each, as React Aria's slider takes any number of thumbs: each stops at its
+ * neighbors, and the ones between the first and the last are named by
+ * `thumb-label`.
  * `min-steps-between-thumbs` keeps them that many steps apart, and the readout
  * joins the two as `range-text` writes them.
  *
@@ -50,6 +55,8 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  * | Page Up, Page Down | Moves the thumb by a larger step. |
  * | Home, End | Moves the thumb to its lowest or highest value. |
  *
+ * Under `readonly` none of these move the thumb, and Tab still reaches it.
+ *
  * Each thumb is an `<input type="range">` with `aria-valuetext` where the value
  * is formatted or worded. A range's thumbs say they stop at each other with
  * `aria-valuemin` and `aria-valuemax`.
@@ -63,12 +70,14 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
  * @slot hint - Help under the control, for content richer than the `hint` text.
  * @slot label - The label, for content richer than the `label` text.
+ * @slot thumb - Content drawn on the thumb, such as a glyph: a single slider's thumb, or a range's lower one. It is decoration, hidden from a screen reader.
+ * @slot thumb-end - Content drawn on a range's upper thumb.
  *
  * @event {Event} change - Fired when the user releases the thumb.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired as the value changes. Cancelable: call `preventDefault()` to keep the current value.
  * @event {Event} input - Fired after the value changes.
  *
- * @csspart control - The range input.
+ * @csspart control - The range input, one per thumb. On a range each carries `data-thumb`, `start`, `middle`, or `end`, and `data-index`, its place from the lowest.
  * @csspart feedback - The error message under the track.
  * @csspart field - The row that holds the control and its readout.
  * @csspart hint - The help text under the track, shown while there is no error.
@@ -77,10 +86,12 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  * @csspart marker-label - The value a mark stands at, when `marker-labels` is set.
  * @csspart markers - The row of marks along the track.
  * @csspart output - The current value, shown beside the track.
- * @csspart tooltip - One thumb's value in a bubble beside it, under `tooltip`. It carries `data-thumb` on a range, `start` or `end`, and `--slider-at`, where its thumb is as a fraction of the track.
+ * @csspart thumb - One thumb's own box over the track, which holds the `thumb` or `thumb-end` slot. It carries `data-thumb` on a range, `start`, `middle`, or `end`, and `--slider-at`, where its thumb is as a fraction of the track. Draw your own thumb here and hide the native one, or leave it empty.
+ * @csspart thumbs - The layer over the track that holds each `thumb`. It is `hidden` until a thumb slot has content, and then `[part="field"]` carries `data-thumbs`.
+ * @csspart tooltip - One thumb's value in a bubble beside it, under `tooltip`. It carries `data-thumb` on a range, `start`, `middle`, or `end`, and `--slider-at`, where its thumb is as a fraction of the track.
  * @csspart tooltips - The layer over the track that holds the bubbles, under `tooltip`.
  *
- * @cssproperty --slider-at - Where a bubble's thumb is, as a fraction of the track, 0 to 1. Set on each `tooltip` part.
+ * @cssproperty --slider-at - Where a bubble's or a thumb box's thumb is, as a fraction of the track, 0 to 1. Set on each `tooltip` and `thumb` part.
  * @cssproperty --slider-fraction - The value as a fraction of the range, 0 to 1.
  * @cssproperty --slider-from - Where the filled span starts, as a fraction of the track, 0 to 1: a range's lower thumb, or a single thumb's `origin`.
  * @cssproperty --slider-marker-at - Where one marker sits, as a percentage of the track.
@@ -185,9 +196,11 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
     /**
      * Adds a second thumb, so the value is a pair.
      *
-     * The pair is one string, `"10,50"`, which is what a form submits and what
-     * `MixinControllerValue` already holds. `valueAsNumber` reads the lower of
-     * the two, since a range has no single number.
+     * The pair is one string, `"10,50"`, which is what `value` and
+     * `MixinControllerValue` hold. A form receives two entries under the name,
+     * `price=10&price=50`, as React Aria's two thumbs send theirs.
+     * `valueAsNumber` reads the lower of the two, since a range has no single
+     * number.
      */
     range: boolean;
     /**
@@ -195,12 +208,27 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
      * filled in. Write it in the page's language, such as `{start} bis {end}`.
      */
     rangeText: string;
+    /**
+     * Whether a reader can see and focus the value and cannot change it. A
+     * read-only slider still submits its value.
+     *
+     * React Aria's `isReadOnly`. Each thumb stays a tab stop and says
+     * `aria-readonly`. The arrow keys, the page keys, Home, End, and a drag
+     * leave the value where it is. A script can still set `value`.
+     */
+    readOnly: boolean;
     /**
      * Shows the chosen value beside the track.
      */
     showValue: boolean;
     /** How far one press of an arrow key moves the thumb. */
     step: number;
+    /**
+     * The name of a thumb between a range's first and last, read after the
+     * slider's label, with `{index}` filled in: its place, counted from 1. The
+     * first is `minimum-label` and the last `maximum-label`.
+     */
+    thumbLabel: string;
     /**
      * Whether each thumb shows its value in a bubble beside it, as Web
      * Awesome's `with-tooltip`. The styled slider shows the bubbles while the
@@ -258,12 +286,29 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
      * is what a filter with nothing filtered out looks like.
      */
     private get bounds();
+    /**
+     * A range's values, one per thumb, as numbers in order.
+     *
+     * A lone number is not a range, so it is not read as one. `willUpdate`
+     * seeds and sanitizes a range to two values or more, and anything else that
+     * arrives between the two opens fully wide, which is what "nothing filtered
+     * out" looks like.
+     */
+    private get points();
     /** Where one value sits along the track, as a fraction of it. */
     private along;
     private readonly handleInput;
     /** Relayed, because `change` does not cross a shadow boundary on its own. */
     private readonly handleChange;
-    /** Reports the value. */
+    /**
+     * Keeps a read-only thumb still under the keys that move it. Tab and every
+     * other key pass, so focus moves on.
+     */
+    private readonly handleKeydown;
+    /**
+     * Reports the value: one entry, or for a named range one entry per thumb.
+     * The joined pair is the state the browser restores.
+     */
     private sync;
     /**
      * How far along the track the thumb sits, as a fraction.
@@ -325,18 +370,35 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
     /** What a screen reader says for one thumb, where `value-text` asks. */
     private spoken;
     protected updated(changed: PropertyValues): void;
+    /** Draws, once a served slider has hydrated, what its children ask for. */
+    protected firstUpdated(changed: PropertyValues): void;
     /**
      * What a screen reader says for a thumb's value, with `{value}` filled in,
      * such as `{value} degrees`. Empty announces the number alone.
      */
     valueText: string;
+    /**
+     * Whether a `thumb` or `thumb-end` slot has content, read off the children
+     * rather than heard from `slotchange`: a declarative shadow root fires that
+     * before anything listens, so a served slider kept its layer hidden.
+     */
+    private get thumbContent();
+    private readonly handleThumbSlot;
+    /**
+     * A box for each thumb, over the track at the thumb's place, holding the
+     * `thumb` slot: a range's upper thumb holds `thumb-end`. Hidden from the
+     * accessibility tree, since each thumb is already a range with a name and a
+     * value, and `hidden` while no slot has content, so an empty layer takes no
+     * room in the row.
+     */
+    protected renderThumbs(): TemplateResult;
     /**
      * A bubble for each thumb, under `tooltip`, saying its value where it is.
      * After the thumbs, so a stylesheet can reach a bubble from a focused
      * thumb, and hidden from the accessibility tree for the reason the readout
      * is: each thumb already reports its value.
      */
-    protected renderTooltips(start: number, end: number): TemplateResult | typeof nothing;
+    protected renderTooltips(): TemplateResult | typeof nothing;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -4,9 +4,19 @@ 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, formatNumber, formatWords, HelixFormElement, MixinControllerValue, MixinField, restoreValue, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, formatNumber, formatWords, HelixFormElement, MixinControllerValue, MixinField, reportValues, restoreValue, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+const SLIDER_KEYS = new Set([
+    'ArrowDown',
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'End',
+    'Home',
+    'PageDown',
+    'PageUp',
+]);
 let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
@@ -24,21 +34,29 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         this.minStepsBetweenThumbs = 0;
         this.range = false;
         this.rangeText = '{start} to {end}';
+        this.readOnly = false;
         this.showValue = false;
         this.step = 1;
+        this.thumbLabel = 'thumb {index}';
         this.tooltip = false;
         this.handleInput = (event) => {
             event.stopPropagation();
             const control = event.target;
+            const at = Number(control.dataset.index ?? 0);
+            if (this.readOnly) {
+                restoreValue(control, this.range ? String(this.points[at]) : this.value);
+                return;
+            }
             if (this.range) {
-                const [start, end] = this.bounds;
+                const points = this.points;
                 const moved = Number(control.value);
                 const gap = this.gap;
-                const pair = control.dataset.thumb === 'start'
-                    ? [Math.min(moved, end - gap), end]
-                    : [start, Math.max(moved, start + gap)];
-                this.requestValue(pair.join(','));
-                restoreValue(control, String(control.dataset.thumb === 'start' ? this.bounds[0] : this.bounds[1]));
+                const low = at > 0 ? (points[at - 1] ?? this.min) + gap : Number.NEGATIVE_INFINITY;
+                const high = at < points.length - 1 ? (points[at + 1] ?? this.max) - gap : Number.POSITIVE_INFINITY;
+                this.requestValue(points
+                    .map((one, index) => (index === at ? Math.min(high, Math.max(low, moved)) : one))
+                    .join(','));
+                restoreValue(control, String(this.points[at]));
                 return;
             }
             const next = control.value;
@@ -47,16 +65,30 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         };
         this.handleChange = (event) => {
             event.stopPropagation();
-            this.announceChange();
+            if (!this.readOnly) {
+                this.announceChange();
+            }
+        };
+        this.handleKeydown = (event) => {
+            if (this.readOnly && SLIDER_KEYS.has(event.key)) {
+                event.preventDefault();
+            }
         };
         this.valueText = '';
+        this.handleThumbSlot = () => {
+            this.requestUpdate();
+        };
     }
     static { this.words = 'helix-slider'; }
     get reserve() {
         const widest = Math.max(this.said(this.min).length, this.said(this.max).length);
-        return this.range
-            ? widest * 2 + formatWords(this, 'rangeText', { end: '', start: '' }).length
-            : widest;
+        const count = this.points.length;
+        if (!this.range) {
+            return widest;
+        }
+        return count > 2
+            ? widest * count + 2 * (count - 1) + 4
+            : widest * 2 + formatWords(this, 'rangeText', { end: '', start: '' }).length;
     }
     get precision() {
         return String(this.step).split('.')[1]?.length ?? 0;
@@ -83,13 +115,15 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         delegatesFocus: true,
     }; }
     get bounds() {
-        const parts = this.value.split(',');
-        const from = Number.parseFloat(parts[0] ?? '');
-        const to = Number.parseFloat(parts[1] ?? '');
-        if (!Number.isFinite(from) || !Number.isFinite(to)) {
+        const points = this.points;
+        return [points[0] ?? this.min, points.at(-1) ?? this.max];
+    }
+    get points() {
+        const parts = this.value.split(',').map((part) => Number.parseFloat(part));
+        if (parts.length < 2 || parts.some((part) => !Number.isFinite(part))) {
             return [this.min, this.max];
         }
-        return [Math.min(from, to), Math.max(from, to)];
+        return parts.sort((left, right) => left - right);
     }
     along(at) {
         const span = this.max - this.min;
@@ -99,7 +133,12 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         return Math.min(1, Math.max(0, (at - this.min) / span));
     }
     sync() {
-        this.internals.setFormValue(this.value);
+        if (this.range && this.name) {
+            reportValues(this.internals, this.name, this.points.map(String));
+        }
+        else {
+            this.internals.setFormValue(this.value);
+        }
         this.refreshFeedback();
     }
     get fraction() {
@@ -146,15 +185,14 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
     }
     sanitize(text) {
         if (this.range) {
-            const [from, to] = text.split(',').map((part) => Number.parseFloat(part));
-            if (from === undefined ||
-                to === undefined ||
-                !Number.isFinite(from) ||
-                !Number.isFinite(to)) {
+            const values = text.split(',').map((part) => Number.parseFloat(part));
+            if (values.length < 2 || values.some((one) => !Number.isFinite(one))) {
                 return `${this.min},${this.max}`;
             }
-            const ends = [this.settled(from), this.settled(to)].sort((a, b) => a - b);
-            return ends.join(',');
+            return values
+                .map((one) => this.settled(one))
+                .sort((a, b) => a - b)
+                .join(',');
         }
         const parsed = Number.parseFloat(text);
         const at = Number.isFinite(parsed) ? parsed : this.min + (this.max - this.min) / 2;
@@ -188,7 +226,31 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         super.updated(changed);
         this.sync();
     }
-    renderTooltips(start, end) {
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
+    get thumbContent() {
+        return this.knownChildren.some((child) => child.slot === 'thumb' || child.slot === 'thumb-end');
+    }
+    renderThumbs() {
+        const slot = (end) => end
+            ? html `<slot name="thumb-end" @slotchange=${this.handleThumbSlot}></slot>`
+            : html `<slot name="thumb" @slotchange=${this.handleThumbSlot}></slot>`;
+        const box = (fraction, end, thumb) => html `<span part="thumb" data-thumb=${thumb ?? nothing} style="--slider-at: ${fraction}"
+        >${slot(end)}</span
+      >`;
+        return html `<div part="thumbs" aria-hidden="true" ?hidden=${!this.thumbContent}>
+      ${this.range
+            ? this.points.map((at, index, all) => index === 0
+                ? box(this.along(at), false, 'start')
+                : index === all.length - 1
+                    ? box(this.along(at), true, 'end')
+                    : html `<span part="thumb" data-thumb="middle" style="--slider-at: ${this.along(at)}"></span>`)
+            : box(this.fraction, false)}
+    </div>`;
+    }
+    renderTooltips() {
         if (!this.tooltip) {
             return nothing;
         }
@@ -197,49 +259,60 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
       >`;
         return html `<div part="tooltips" aria-hidden="true">
       ${this.range
-            ? [
-                bubble(this.along(start), this.said(start), 'start'),
-                bubble(this.along(end), this.said(end), 'end'),
-            ]
+            ? this.points.map((at, index, all) => bubble(this.along(at), this.said(at), index === 0 ? 'start' : index === all.length - 1 ? 'end' : 'middle'))
             : bubble(this.fraction, this.said(this.value))}
     </div>`;
     }
     render() {
         const [start, end] = this.bounds;
-        const thumb = (which, at) => html `<input
+        const ids = this.points.map((_, index, all) => index === 0 ? 'control' : index === all.length - 1 ? 'control-end' : `control-${index}`);
+        const points = this.points;
+        const last = points.length - 1;
+        const thumb = (at, index) => {
+            const which = index === 0 ? 'start' : index === last ? 'end' : 'middle';
+            const named = which === 'middle' ? `thumb-name-${index}` : `${which}-name`;
+            const before = points[index - 1];
+            const after = points[index + 1];
+            return html `<input
         part="control"
-        id=${which === 'start' ? 'control' : 'control-end'}
+        id=${ids[index] ?? nothing}
         data-thumb=${which}
+        data-index=${index}
         type="range"
         style="--slider-from: ${this.along(start)}; --slider-to: ${this.along(end)}${this.axis}"
         min=${this.min}
         max=${this.max}
         step=${this.step}
         .value=${String(at)}
-        aria-labelledby=${this.labeled ? `${this.labelId} ${which}-name` : `${which}-name`}
-        aria-valuemin=${which === 'end' ? start + this.gap : nothing}
-        aria-valuemax=${which === 'start' ? end - this.gap : nothing}
+        aria-labelledby=${this.labeled ? `${this.labelId} ${named}` : named}
+        aria-valuemin=${before === undefined ? nothing : before + this.gap}
+        aria-valuemax=${after === undefined ? nothing : after - this.gap}
         aria-valuetext=${this.spoken(at)}
         aria-describedby=${this.describedBy ?? nothing}
         aria-invalid=${this.invalidity ?? nothing}
+        aria-readonly=${this.readOnly ? 'true' : nothing}
         ?disabled=${this.isDisabled}
         @input=${this.handleInput}
         @change=${this.handleChange}
+        @keydown=${this.handleKeydown}
       />`;
+        };
         return html `${this.renderLabel()}
     ${this.range
             ? html `<span id="start-name" hidden>${this.minimumLabel}</span
-            ><span id="end-name" hidden>${this.maximumLabel}</span>`
+            >${this.points.slice(1, -1).map((_, index) => html `<span id=${`thumb-name-${index + 1}`} hidden
+                  >${formatWords(this, 'thumbLabel', { index: index + 2 })}</span
+                >`)}<span id="end-name" hidden>${this.maximumLabel}</span>`
             : nothing}
     <div
       part="field"
       data-markers=${this.markerValues.length > 0 ? '' : nothing}
       data-range=${this.range ? '' : nothing}
+      data-thumbs=${this.thumbContent ? '' : nothing}
       data-tooltip=${this.tooltip ? '' : nothing}
       style="--slider-fraction: ${this.fraction}; --slider-from: ${this.along(start)}; --slider-to: ${this.along(end)}"
     >
-      ${this.range ? thumb('start', start) : nothing}
-      ${this.range ? thumb('end', end) : nothing}
+      ${this.range ? this.points.map((at, index) => thumb(at, index)) : nothing}
       ${this.range
             ? nothing
             : html `<input
@@ -256,9 +329,11 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
               aria-valuetext=${this.spoken(this.value)}
               aria-describedby=${this.describedBy ?? nothing}
               aria-invalid=${this.invalidity ?? nothing}
+              aria-readonly=${this.readOnly ? 'true' : nothing}
               ?disabled=${this.isDisabled}
               @input=${this.handleInput}
               @change=${this.handleChange}
+              @keydown=${this.handleKeydown}
             />`}
       ${this.markers > 1
             ? html `<div part="markers" aria-hidden="true">
@@ -271,16 +346,21 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
                   >`)}
             </div>`
             : nothing}
-      ${this.renderTooltips(start, end)}
+      ${this.renderThumbs()} ${this.renderTooltips()}
       ${this.showValue
             ? html `<output
               part="output"
-              for=${this.range ? 'control control-end' : 'control'}
+              for=${this.range ? ids.join(' ') : 'control'}
               aria-hidden="true"
               style=${`--_slider-output-reserve: ${this.reserve}ch`}
-              >${this.range
-                ? formatWords(this, 'rangeText', { end: this.said(end), start: this.said(start) })
-                : this.said(this.value)}</output
+              >${!this.range
+                ? this.said(this.value)
+                : this.points.length > 2
+                    ? new Intl.ListFormat(wordsLocale(this), { type: 'conjunction' }).format(this.points.map((at) => this.said(at)))
+                    : formatWords(this, 'rangeText', {
+                        end: this.said(end),
+                        start: this.said(start),
+                    })}</output
             >`
             : nothing}
     </div>
@@ -332,12 +412,19 @@ __decorate([
     words,
     property({ attribute: 'range-text' })
 ], HelixHeadlessSlider.prototype, "rangeText", void 0);
+__decorate([
+    property({ attribute: 'readonly', reflect: true, type: Boolean })
+], HelixHeadlessSlider.prototype, "readOnly", void 0);
 __decorate([
     property({ attribute: 'show-value', reflect: true, type: Boolean })
 ], HelixHeadlessSlider.prototype, "showValue", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessSlider.prototype, "step", void 0);
+__decorate([
+    words,
+    property({ attribute: 'thumb-label' })
+], HelixHeadlessSlider.prototype, "thumbLabel", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessSlider.prototype, "tooltip", void 0);

package/dist/speed-dial/item/speed-dial-item.d.ts

@@ -19,6 +19,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * Put a `Kbd` in the `shortcut` slot to draw it as keys instead; the dial
  * imports no `Kbd` of its own. Showing a shortcut does not bind it.
  *
+ * `href` makes the action a link, as Menu's rows take one: the `item` part is
+ * then an `<a>` carrying `menuitem`, so the browser follows it, opens it in a
+ * new tab on a middle press, and offers its own menu for it. Choosing it still
+ * sends `helix-select` and closes the dial. A disabled action draws no link.
+ *
  * @since 0.1.0
  * @status stable
  * @category actions
@@ -32,7 +37,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @event {HelixSelectEvent} helix-select - The action was chosen. Cancelable: cancel it to keep the dial open.
  *
  * @csspart icon - The box that holds the icon.
- * @csspart item - The control for the action.
+ * @csspart item - The control for the action, which is an `<a>` where `href` is set.
  * @csspart label - The action's name, beside the icon.
  * @csspart shortcut - The box after the name that holds the shortcut, shown while `shortcut` is set or something is in the `shortcut` slot.
  */
@@ -41,12 +46,30 @@ export declare class HelixHeadlessSpeedDialItem extends HelixElement {
      * Whether the action is disabled, so it cannot be chosen.
      */
     disabled: boolean;
+    /**
+     * Whether the link downloads the file when the action is chosen. Only
+     * meaningful beside an `href`, and only for a file served from the page's
+     * origin.
+     */
+    download: boolean;
+    /**
+     * The URL the action links to. Setting it draws the action as a link.
+     */
+    href: string;
+    /**
+     * The link's `rel`. Set it whenever you set `target="_blank"`.
+     */
+    rel: string;
     /**
      * The action's keyboard shortcut as a chord, such as `mod+s`, carried as
      * `aria-keyshortcuts` and drawn after the name. `mod` is Command on an Apple
      * keyboard and Control elsewhere. Showing a shortcut does not bind it.
      */
     shortcut: string;
+    /**
+     * Where the link opens, such as `_blank` for a new tab.
+     */
+    target: string;
     /**
      * The action's value, sent in `helix-select` when the action is chosen.
      */
@@ -86,6 +109,11 @@ export declare class HelixHeadlessSpeedDialItem extends HelixElement {
     private readonly readShortcut;
     private choose;
     private readonly handleClick;
+    /**
+     * Space presses a linked action, which an anchor ignores, and the click that
+     * comes back both announces and follows the link. Enter is the anchor's own.
+     */
+    private readonly handleKeydown;
     protected render(): TemplateResult;
     /**
      * The `shortcut` slot, holding the shortcut drawn after the name as Kbd