@fusion.dev/helix-headless 0.146.0 → 0.148.0

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

@@ -9,6 +9,7 @@ import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
 import { correlation, leastSquares } from '../fit.js';
+import { bubbleWeights, measuresOf } from '../measures.js';
 const REACH = 24;
 const COEFFICIENTS = new Map();
 const coefficientIn = (locale) => {
@@ -37,6 +38,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         super(...arguments);
         this.correlationLabel = 'correlation';
         this.pointsLabel = 'points';
+        this.sizeBy = '';
         this.trend = false;
         this.drawn = [];
         this.nearest = undefined;
@@ -82,8 +84,11 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         this.removeEventListener('pointerleave', this.handleLeave);
     }
     seriesOf(cell) {
-        const depth = this.plottedColumns.indexOf(cell);
-        return depth < 1 ? undefined : seriesIndex(depth - 1);
+        const depth = this.measures.ups.indexOf(cell);
+        return depth < 0 ? undefined : seriesIndex(depth);
+    }
+    get measures() {
+        return measuresOf(this.plottedColumns, (column) => this.columnName(column), this.sizeBy);
     }
     get rulesX() {
         return this.gridlines !== undefined && this.gridlines !== 'y';
@@ -93,9 +98,8 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
     }
     get field() {
         const rows = this.sourceRows;
-        const columns = this.plottedColumns;
-        const [across, ...ups] = columns;
-        const name = (column) => column === undefined ? '' : (rows.find((row) => row.cells[column])?.cells[column]?.name ?? '');
+        const { across, size, ups } = this.measures;
+        const name = (column) => column === undefined ? '' : this.columnName(column);
         const pairs = ups.map((column) => rows.flatMap((row, index) => {
             const x = across === undefined ? undefined : row.cells[across]?.value;
             const y = row.cells[column]?.value;
@@ -107,10 +111,17 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         const y = nice(extent(all.length > 0 ? all.map(([, one]) => one) : [0]));
         const along = linear(x, [0, PLOT_WIDTH]);
         const up = linear(y, [PLOT_HEIGHT, 0]);
+        const weights = bubbleWeights(rows.map((row) => (size === undefined ? undefined : row.cells[size]?.value)));
         return {
             pairs: pairs.map((series) => series.map(([one, two]) => [one, two])),
             points: pairs.flatMap((series, depth) => shown[depth]
-                ? series.map(([one, two, row]) => ({ depth, row, x: along(one), y: up(two) }))
+                ? series.map(([one, two, row]) => ({
+                    depth,
+                    row,
+                    weight: weights[row],
+                    x: along(one),
+                    y: up(two),
+                }))
                 : []),
             x,
             xName: name(across),
@@ -174,7 +185,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
           data-series=${index}
           ?data-active=${point.row === at}
           part="point${point.row === at ? ' point-active' : ''}"
-          style=${`--chart-series: var(--chart-series-${index}); --chart-point-x: ${point.x}%; --chart-point-y: ${point.y}%`}
+          style=${`--chart-series: var(--chart-series-${index}); --chart-point-x: ${point.x}%; --chart-point-y: ${point.y}%${point.weight === undefined ? '' : `; --chart-point-weight: ${point.weight}`}`}
         ></span>`;
         })}
       ${this.renderTooltip()}
@@ -243,6 +254,9 @@ __decorate([
 __decorate([
     property({ attribute: 'points-label' })
 ], HelixHeadlessScatterChart.prototype, "pointsLabel", void 0);
+__decorate([
+    property({ attribute: 'size-by' })
+], HelixHeadlessScatterChart.prototype, "sizeBy", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessScatterChart.prototype, "trend", void 0);

package/dist/scroll-area/scrollbar.d.ts

@@ -1,11 +1,3 @@
-/**
- * The arithmetic behind the scrollbars a scroll area draws under `scrollbars`.
- *
- * Every length here is along one axis and counted from that axis' start, which
- * is the right-hand edge on a right-to-left page for the horizontal one. The
- * component turns a pointer and a `scrollLeft` into those counts, so nothing
- * below has to know which way the line runs.
- */
 /** Which scrollbars are drawn, and when. Absent keeps the browser's own. */
 export type Scrollbars = 'always' | 'auto' | 'hover' | 'scroll';
 /** The two axes a scrollbar runs along. */

package/dist/scroll-area/scrollbar.js

@@ -1,4 +1,4 @@
-const clamp = (value, low, high) => Math.min(Math.max(value, low), high);
+import { clamp } from '@fusion.dev/helix-core';
 export const thumbFraction = ({ client, scroll }) => scroll <= 0 ? 1 : clamp(client / scroll, 0, 1);
 export const scrollFraction = ({ client, offset, scroll }) => {
     const room = scroll - client;

package/dist/select/align.d.ts

@@ -0,0 +1,47 @@
+/** A box on the screen, in viewport pixels. */
+export interface Box {
+    height: number;
+    left: number;
+    top: number;
+    width: number;
+}
+/** What places a list over its trigger. */
+export interface Over {
+    /** How far inside the screen's edges the list stays, in pixels. */
+    margin: number;
+    /** The option to sit on the trigger: its top within the list, and its height. */
+    option: {
+        height: number;
+        top: number;
+    };
+    /** The list's own size. */
+    panel: {
+        height: number;
+        width: number;
+    };
+    /** Whether the line of text runs right to left, which aligns the end edges. */
+    rtl: boolean;
+    /** The trigger. */
+    trigger: Box;
+    /** The screen. */
+    viewport: {
+        height: number;
+        width: number;
+    };
+}
+/**
+ * Where a list opened over its trigger goes, so the option it opens on sits
+ * where the trigger is: the native select's place on macOS, and Radix's
+ * `item-aligned`.
+ *
+ * The option's middle on the trigger's middle, then kept on the screen: a
+ * list that would run off the bottom moves up, and one that would run off the
+ * top moves down, so near an edge the option is beside the trigger rather than
+ * on it. A list taller than the screen starts at its top edge. The start edges
+ * line up, the left in English and the right in Arabic, kept on the screen the
+ * same way.
+ */
+export declare const over: ({ margin, option, panel, rtl, trigger, viewport, }: Over) => {
+    left: number;
+    top: number;
+};

package/dist/select/align.js

@@ -0,0 +1,7 @@
+export const over = ({ margin, option, panel, rtl, trigger, viewport, }) => {
+    const centered = trigger.top + trigger.height / 2 - (option.top + option.height / 2);
+    const top = Math.max(margin, Math.min(centered, viewport.height - margin - panel.height));
+    const start = rtl ? trigger.left + trigger.width - panel.width : trigger.left;
+    const left = Math.max(margin, Math.min(start, viewport.width - margin - panel.width));
+    return { left: Math.round(left), top: Math.round(top) };
+};

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

@@ -21,13 +21,36 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * Set `valueContent` to draw the trigger's content from the chosen options,
  * and several chosen options are written as a list in the reader's language.
  *
- * In the open list the arrow keys, Home, End, PageUp, PageDown and typed
- * letters move the highlight, and Enter, Space or a click chooses it and
- * closes the list. Tab closes the list and moves on. On the closed trigger,
- * ArrowDown, Enter and Space open the list on the chosen option, ArrowUp opens
- * it on the chosen or last option, Home and End open it on the first or last,
- * and typed letters choose the option whose words start with them, as a native
- * `<select>` does.
+ * **Keyboard.** On the closed trigger:
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down, Enter, Space | Opens the list on the chosen option, or the first. |
+ * | Up | Opens the list on the chosen option, or the last. |
+ * | Home, End | Opens the list on the first or the last option. |
+ * | Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does, in either direction of text. |
+ * | A letter or a word | Chooses the option whose words start with what you typed, as a native `<select>` does. With `multiple`, opens the list on it. |
+ *
+ * In the open list, which is a `Listbox`:
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down, Up, Home, End, Page Down, Page Up | Moves the highlight. |
+ * | A letter or a word | Moves the highlight to the next option whose words start with what you typed. |
+ * | Enter, Space | Chooses the highlighted option and closes the list. With `multiple`, toggles it and leaves the list open. |
+ * | Escape | Closes the list and puts focus back on the trigger. |
+ * | Tab | Closes the list and moves on. |
+ *
+ * A choice made on the closed trigger is said aloud on Apple devices, where
+ * VoiceOver does not read the trigger's new name.
+ *
+ * **ARIA.** The trigger is a `button` with `aria-haspopup="listbox"` and
+ * `aria-expanded`, named by the label and then the chosen words, as a native
+ * `<select>` is. The list is the listbox `Listbox` describes, named by the
+ * label, or by `list-label` where there is none.
+ *
+ * Set `autocomplete` to let a browser's autofill choose, as a native `<select>`
+ * with the same attribute would.
  *
  * @since 0.1.0
  * @status stable
@@ -69,15 +92,31 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * @csspart listbox-loading - The text shown while the options load.
  * @csspart listbox-search - The region that holds the filter field.
  * @csspart listbox-search-field - The filter field.
+ * @csspart live - The region a screen reader announces a choice made on the closed trigger from, drawn once there is one to say. Visually hidden in the styled tier.
  * @csspart surface - The floating panel.
  * @csspart trigger - The closed control, which shows the chosen value.
  * @csspart value - The chosen option's text inside the trigger.
  *
+ * @cssproperty --floating-anchor-inline-size - The trigger's width, written on the panel while it is open, as in `min-inline-size: var(--floating-anchor-inline-size)`. Read it; a value set here is written over.
+ * @cssproperty --floating-available-block-size - The room between the panel and the edge of the screen it opens toward, written on the panel while it is open. Read it; a value set here is written over.
+ *
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  * @cssstate open - While the list is open.
  */
 export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
     protected readonly aria: AriaForwardController;
+    /** The region a choice made on the closed trigger is said from. */
+    private readonly status;
+    /**
+     * What a browser's autofill may fill in, as a platform token such as
+     * `country` or `cc-exp-month`, as on a native `<select>`.
+     *
+     * Set, the select keeps a hidden native `<select>` with the same options for
+     * the browser to fill, as React Aria's `HiddenSelect` does, and takes the
+     * option the browser picks, by its value or its words, as the value. Empty
+     * draws no hidden select, and a browser fills nothing.
+     */
+    autocomplete: string;
     /**
      * The text shown when no options match the filter.
      */
@@ -89,6 +128,29 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * the filtering, the empty state and the keyboard.
      */
     filterable: boolean;
+    /**
+     * Whether the trigger holds its group's tab stop.
+     *
+     * A toolbar keeps one tab stop across its controls, and writing `tabindex`
+     * onto this element would change markup the consumer rendered, which a React
+     * consumer's hydration reports. A toolbar sets this property instead, and
+     * the stop moves on the trigger inside the shadow root, as Button's does.
+     *
+     * No attribute, because it is coordination between elements rather than
+     * anything a consumer sets.
+     */
+    focusable: boolean;
+    /**
+     * The open list's name where nothing names the Select, read by screen
+     * readers. The list has no visible name.
+     *
+     * A Select named by `label`, `aria-label`, `aria-labelledby` or a `<label>`
+     * gives its list that name, and this is not used. Unnamed, the Select is
+     * reported once by the missing-name warning, and its list is not reported a
+     * second time for a name the page never wrote: the list is this element's,
+     * and so is the fallback. Combobox calls its list the same.
+     */
+    listLabel: string;
     /**
      * Whether the options are still loading.
      *
@@ -109,6 +171,18 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * Shown on the trigger while nothing is chosen.
      */
     placeholder: string;
+    /**
+     * Where the list opens: `floating`, under the trigger and above it where
+     * there is no room, or `item-aligned`, over the trigger with the chosen
+     * option where the trigger is, as a native select does on macOS and Radix
+     * Select does by default.
+     *
+     * Over the trigger, a reader's eye stays on the answer as the list opens
+     * round it, and a short move reaches the options either side. Near an edge
+     * of the screen the list moves to stay on it, so the option may sit beside
+     * the trigger rather than on it. It follows the page as it scrolls.
+     */
+    position: 'floating' | 'item-aligned';
     /**
      * What the trigger shows for the chosen options: a function given them, in
      * the order they appear, that returns text, an element or a Lit template.
@@ -215,8 +289,26 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
     private readonly handleLinkFollowed;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Puts the open list over the trigger, with the option it opened on where
+     * the trigger is, for `position="item-aligned"`.
+     *
+     * Measured once the list has drawn and scrolled to that option, and again as
+     * the page scrolls or the window changes size. The offset of the option in
+     * the list is read from the boxes on screen and divided by the list's scale,
+     * since a styled list opens from a little under full size. Written as the
+     * floating controller writes a position, so the same entrance runs and the
+     * controller takes it back on close.
+     */
+    private readonly alignOver;
+    /** The option the open list was put over the trigger by. */
+    private alignedTo;
+    /** Stops following the page, once the list over the trigger closes. */
+    private stopAligning;
     /** Opens the list with the highlight where the opening key says. */
     private openAt;
+    /** Puts focus on the trigger, which is what a toolbar moving its stop here asks. */
+    focus(options?: FocusOptions): void;
     /** Closes the list and puts focus back where it came from. */
     private close;
     private readonly handleChange;
@@ -227,9 +319,21 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * Aria's Select do, so a reader who knows the answer types it. A Space in the
      * middle of those letters is one of them. With `multiple`, a letter opens the
      * list on the match instead, because adding to a set is a choice the reader
-     * makes in the list.
+     * makes in the list. ArrowLeft and ArrowRight choose the option before and
+     * after the chosen one.
      */
     private readonly handleTriggerKeydown;
+    /**
+     * Chooses from the closed trigger, and says the choice on Apple devices.
+     *
+     * The trigger is named by the label and the chosen words, so a choice made
+     * on it renames the control in focus. VoiceOver does not read a name that
+     * changes under focus, so a reader there heard nothing as a letter or an
+     * arrow changed the answer. The words are said in a live region, as React
+     * Aria says a combobox's choice for VoiceOver alone, since other screen
+     * readers read the new name.
+     */
+    private choose;
     /**
      * Tab closes the list and lets focus move on, as a native `<select>` does.
      *
@@ -279,9 +383,9 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      */
     protected renderIndicator(): TemplateResult;
     /**
-     * What names the list once it opens: the `label`, the host's `aria-label`,
-     * or the words of what names the host from outside, its `aria-labelledby`
-     * or a `<label>` for it.
+     * What names the list once it opens, read through core's `hostWords` in
+     * the order a browser names the host: its `aria-labelledby`, its
+     * `aria-label`, the `label`, then a `<label>` for it.
      *
      * **Words rather than a reference**, because the list is inside another
      * element's shadow root and neither an IDREF nor the host's labels reach it.

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, elementById, HelixFormElement, hostAria, MixinControllerOpen, MixinControllerValue, MixinField, PopoverController, reportValues, typesCharacter, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, customElement, drawAutofill, drawStatus, HelixFormElement, hostAria, hostWords, isRtl, MixinControllerOpen, MixinControllerValue, MixinField, onApple, PopoverController, reportValues, StatusController, typesCharacter, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -12,6 +12,7 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
 import { optionsAmong } from '../../option/root/option-root.js';
 import '../../listbox/index.js';
+import { over } from '../align.js';
 let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(MixinControllerValue(MixinField(HelixFormElement))) {
     constructor() {
         super(...arguments);
@@ -22,12 +23,17 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
             },
             target: () => this.partNamed('trigger'),
         });
+        this.status = new StatusController(this);
+        this.autocomplete = '';
         this.emptyText = 'No matches';
         this.filterable = false;
+        this.focusable = true;
+        this.listLabel = 'Options';
         this.loading = false;
         this.loadingText = 'Loading';
         this.multiple = false;
         this.placeholder = 'Choose';
+        this.position = 'floating';
         this.panel = new PopoverController(this, {
             anchor: () => this.partNamed('trigger'),
             boundary: () => [
@@ -37,6 +43,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
             offset: () => 4,
             onDismiss: () => this.close(),
             open: () => this.open,
+            place: () => this.position !== 'item-aligned',
             placement: 'bottom-start',
             surface: () => this.partNamed('surface'),
         });
@@ -46,6 +53,45 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         this.handleLinkFollowed = (event) => {
             afterLinkFollowed(event, () => this.requestOpen(false));
         };
+        this.alignOver = () => {
+            const surface = this.partNamed('surface');
+            const trigger = this.partNamed('trigger');
+            if (!this.open || this.position !== 'item-aligned' || !surface || !trigger) {
+                return;
+            }
+            const margin = 8;
+            const at = trigger.getBoundingClientRect();
+            surface.style.setProperty('--floating-anchor-inline-size', `${Math.round(at.width)}px`);
+            surface.style.setProperty('--floating-available-block-size', `${Math.max(0, window.innerHeight - margin * 2)}px`);
+            const shown = optionsAmong(this.knownChildren).filter((option) => !option.hidden);
+            this.alignedTo ??= shown.find((one) => one.active) ?? this.chosenOptions[0] ?? shown[0];
+            const option = this.alignedTo;
+            const box = surface.getBoundingClientRect();
+            const scale = surface.offsetHeight > 0 ? box.height / surface.offsetHeight : 1;
+            const row = option?.getBoundingClientRect();
+            const { left, top } = over({
+                margin,
+                option: row
+                    ? { height: row.height / scale, top: (row.top - box.top) / scale }
+                    : { height: 0, top: 0 },
+                panel: { height: surface.offsetHeight, width: surface.offsetWidth },
+                rtl: isRtl(this),
+                trigger: at,
+                viewport: { height: window.innerHeight, width: window.innerWidth },
+            });
+            for (const [edge, value] of [
+                ['bottom', 'auto'],
+                ['left', '0'],
+                ['right', 'auto'],
+                ['top', '0'],
+            ]) {
+                surface.style.setProperty(edge, value, 'important');
+            }
+            surface.style.position = 'fixed';
+            surface.style.translate = `${left}px ${top}px`;
+            surface.setAttribute('data-placed', '');
+        };
+        this.alignedTo = undefined;
         this.handleChange = (event) => {
             const next = event.detail.value;
             if (!this.requestValue(next)) {
@@ -70,7 +116,17 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
                     this.requestOpen(true);
                 }
                 else {
-                    this.requestValue(match);
+                    this.choose(match);
+                }
+                return;
+            }
+            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 next = reachable[Math.max(0, reachable.findIndex((one) => one.value === this.value) + step)];
+                if (next) {
+                    this.choose(next.value);
                 }
                 return;
             }
@@ -107,12 +163,11 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         return this.partNamed('listbox');
     }
     get display() {
-        const chosen = new Set(this.value === '' ? [] : this.value.split(','));
         const words = this.chosenOptions.map((option) => option.text);
         if (words.length > 0) {
             return new Intl.ListFormat(this.lang || undefined, { style: 'short', type: 'unit' }).format(words);
         }
-        return chosen.size > 0 && !this.childrenKnown ? nothing : this.placeholder;
+        return this.value !== '' && !this.childrenKnown ? nothing : this.placeholder;
     }
     get chosenOptions() {
         const chosen = new Set(this.value === '' ? [] : this.value.split(','));
@@ -138,16 +193,24 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.stopAligning();
         this.removeEventListener('helix-select', this.handleLinkFollowed);
         for (const watcher of this.watchers) {
             watcher.disconnect();
         }
         this.watchers = [];
     }
+    stopAligning() {
+        window.removeEventListener('resize', this.alignOver);
+        window.removeEventListener('scroll', this.alignOver, { capture: true });
+    }
     openAt(where) {
         this.opening = where;
         this.requestOpen(true);
     }
+    focus(options) {
+        this.partNamed('trigger')?.focus(options);
+    }
     close() {
         if (!this.open) {
             return;
@@ -155,6 +218,11 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         this.requestOpen(false);
         this.partNamed('trigger')?.focus();
     }
+    choose(value) {
+        if (this.requestValue(value) && onApple()) {
+            this.status.say(String(this.display));
+        }
+    }
     reconcileOptions() {
         const options = optionsAmong(this.knownChildren);
         if (this.defaultValue === '' && !this.hasAttribute('default-value')) {
@@ -202,9 +270,16 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
                 this.listbox?.highlight(this.opening);
                 this.opening = 'selected';
                 this.listbox?.focus();
+                if (this.position === 'item-aligned') {
+                    this.alignedTo = undefined;
+                    void this.listbox?.updateComplete.then(() => this.alignOver());
+                    window.addEventListener('resize', this.alignOver);
+                    window.addEventListener('scroll', this.alignOver, { capture: true, passive: true });
+                }
             }
         }
         else {
+            this.stopAligning();
             this.listbox?.requestFilter('');
         }
     }
@@ -222,14 +297,13 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
       ?multiple=${this.multiple}
       ?filterable=${this.filterable}
       manual
-      aria-label=${this.listName || nothing}
+      aria-label=${this.listName || this.listLabel || nothing}
       @keydown=${this.handleListKeydown}
+      .chosenAgain=${() => this.close()}
       @helix-before-change=${this.handleChange}
       @change=${this.stopInner}
       @input=${this.stopInner}
     >
-      <!-- An option arriving or leaving changes no property, so this is what
-           schedules the update that rereads the trigger's words. -->
       <slot @slotchange=${() => this.requestUpdate()}></slot>
     </${this.tag('listbox')}>`;
     }
@@ -241,16 +315,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
     </slot>`;
     }
     get listName() {
-        const own = this.label || this.getAttribute('aria-label');
-        if (own) {
-            return own;
-        }
-        const ids = (this.getAttribute('aria-labelledby') ?? '').split(/\s+/).filter(Boolean);
-        const named = ids.length > 0 ? ids.map((id) => elementById(this, id)) : [...(this.labels ?? [])];
-        return named
-            .map((one) => (one?.textContent ?? '').replace(/\s+/g, ' ').trim())
-            .filter(Boolean)
-            .join(' ');
+        return hostWords(this, this.label);
     }
     get triggerNames() {
         const outside = (this.internals.labels?.length ?? 0) > 0 && !this.labeled;
@@ -270,30 +335,46 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         aria-expanded=${this.open ? 'true' : 'false'}
         aria-describedby=${this.describedBy ?? nothing}
         aria-invalid=${this.invalidity ?? nothing}
+        tabindex=${this.focusable ? nothing : '-1'}
         ?disabled=${this.isDisabled}
         @click=${() => this.toggleOpen()}
         @keydown=${this.handleTriggerKeydown}
       >
         <slot name="start"></slot>
         <span part="value" id="value">${this.renderValue()}</span>
-        ${''}
         <slot name="end"></slot>
-        ${''}
         ${this.renderIndicator()}
       </button>
 
       <div part="surface" popover="manual" ?hidden=${!this.open}>
         ${this.renderListbox()}
       </div>
-      ${this.renderHint()}${this.renderFeedback()}`;
+      ${this.renderHint()}${this.renderFeedback()}${drawStatus(this.status)}
+      ${drawAutofill({
+            autocomplete: this.autocomplete,
+            disabled: this.isDisabled,
+            multiple: this.multiple,
+            onFill: (value) => this.requestValue(value),
+            options: optionsAmong(this.knownChildren),
+            value: this.value,
+        })}`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessSelect.prototype, "autocomplete", void 0);
 __decorate([
     property({ attribute: 'empty-text' })
 ], HelixHeadlessSelect.prototype, "emptyText", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessSelect.prototype, "filterable", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessSelect.prototype, "focusable", void 0);
+__decorate([
+    property({ attribute: 'list-label' })
+], HelixHeadlessSelect.prototype, "listLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessSelect.prototype, "loading", void 0);
@@ -306,6 +387,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessSelect.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], HelixHeadlessSelect.prototype, "position", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessSelect.prototype, "valueContent", void 0);

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

@@ -1,5 +1,5 @@
 import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A value chosen from a range by dragging.
@@ -77,7 +77,10 @@ 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 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-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.
@@ -193,6 +196,13 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
     showValue: boolean;
     /** How far one press of an arrow key moves the thumb. */
     step: number;
+    /**
+     * 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
+     * slider is under the pointer or holds focus. They repeat what each thumb
+     * already reports, so a screen reader skips them.
+     */
+    tooltip: boolean;
     /**
      * How many characters the readout has to be able to hold, widest case.
      *
@@ -307,6 +317,13 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
      * such as `{value} degrees`. Empty announces the number alone.
      */
     valueText: string;
+    /**
+     * 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 render(): TemplateResult;
 }
 declare global {