@fusion.dev/helix-headless 0.142.0 → 0.143.0

package/dist/radio/group/radio-group.js

@@ -11,39 +11,71 @@ import { HelixHeadlessRadio } from '../root/radio-root.js';
 let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
+        this.focusable = true;
         this.keys = new KeyboardNavigationController(this, { items: () => this.items });
         this.cascade = new DisabledCascadeController(this, {
             items: () => this.items,
         });
         this.handleSelection = (event) => {
             event.stopPropagation();
-            if (event.defaultPrevented) {
-                return;
-            }
-            const next = event.detail.value;
-            if (next === this.value) {
-                return;
-            }
-            this.requestValue(next);
+            queueMicrotask(() => {
+                if (event.defaultPrevented) {
+                    return;
+                }
+                const next = event.detail.value;
+                if (next === this.value) {
+                    return;
+                }
+                this.requestValue(next);
+            });
         };
     }
     get items() {
-        return [...this.children].filter((child) => child instanceof HelixHeadlessRadio);
+        return [...(this.children ?? [])].filter((child) => child instanceof HelixHeadlessRadio);
+    }
+    get answer() {
+        return this.items.find((item) => item.value === this.value);
+    }
+    get answered() {
+        if (this.value === '') {
+            return false;
+        }
+        const items = this.items;
+        return items.length === 0 || items.some((item) => item.value === this.value);
+    }
+    adopt() {
+        if (this.value !== '' || this.children === undefined) {
+            return;
+        }
+        const declared = this.items.find((item) => item.defaultSelected);
+        if (declared) {
+            this.defaultValue = declared.value;
+        }
     }
     place() {
         const items = this.items;
-        const answer = items.find((item) => item.value === this.value);
+        const answer = this.answer;
         for (const item of items) {
             item.selected = item === answer;
         }
-        const entry = answer ? undefined : items.find((item) => !item.disabled);
+        const entry = this.focusable ? this.entry() : undefined;
         for (const item of items) {
             item.focusable = item === entry;
         }
     }
+    entry() {
+        const answer = this.answer;
+        return answer && !answer.disabled ? answer : this.items.find((item) => !item.disabled);
+    }
+    get focusTarget() {
+        return (super.focusTarget ??
+            this.entry()?.shadowRoot?.querySelector('[part="item"]') ??
+            null);
+    }
     sync() {
-        this.internals.setFormValue(this.value === '' ? null : this.value);
-        this.reportRequired(this.value === '', 'Choose one to continue.', 'items');
+        const answered = this.answered;
+        this.internals.setFormValue(answered ? this.value : null);
+        this.reportRequired(!answered, 'Choose one to continue.', 'items');
     }
     connectedCallback() {
         super.connectedCallback();
@@ -55,6 +87,7 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        this.adopt();
         hostAria(this.internals, { label: this.label, role: 'radiogroup' });
         this.internals.ariaRequired = this.required ? 'true' : null;
     }
@@ -67,11 +100,14 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
     render() {
         return html `${this.renderGroupLabel()}
       <div part="items">
-        <slot @slotchange=${() => this.place()}></slot>
+        <slot @slotchange=${() => this.requestUpdate()}></slot>
       </div>
       ${this.renderHint()}${this.renderFeedback()}`;
     }
 };
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessRadioGroup.prototype, "focusable", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessRadioGroup.prototype, "orientation", void 0);

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

@@ -73,11 +73,14 @@ export declare class HelixHeadlessRadio extends HelixHeadlessRadio_base {
     get defaultSelected(): boolean;
     set defaultSelected(next: boolean);
     /**
-     * Whether the radio holds the group's tab stop while nothing is chosen.
+     * Whether the radio holds the group's tab stop. Unset, the chosen radio
+     * holds it.
      *
      * The stop rides on the selection, and an unanswered group has no selection,
      * so without this every choice is `tabindex="-1"` and the keyboard cannot
-     * enter the set at all.
+     * enter the set at all. The group writes `true` for the chosen radio, or for
+     * the first that can be chosen while nothing is, and `false` for every radio,
+     * the chosen one too, while a toolbar the group sits in holds the stop.
      *
      * **Written by the group, with no attribute, and it reaches the control
      * rather than the host.** A `tabindex` on the host is two faults at once: it
@@ -88,15 +91,15 @@ export declare class HelixHeadlessRadio extends HelixHeadlessRadio_base {
      * them an unchecked radio. `Toggle.Root` carries the same property for the
      * same reason.
      */
-    focusable: boolean;
+    focusable?: boolean;
     /**
      * Asks for the render that follows a hydration, so the stop stops being every
      * choice's.
      *
      * `tabindex` reads `childrenKnown` and a hydrating render is one where that is
      * false, which is what keeps the hydrating render the server's. Nothing else
-     * would ask: the group writes an already-false `focusable` onto every choice
-     * but one, which changes nothing and so re-renders nothing.
+     * is sure to ask: a write from the group that leaves `focusable` as it was
+     * re-renders nothing.
      */
     protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;

package/dist/radio/root/radio-root.js

@@ -11,7 +11,6 @@ let HelixHeadlessRadio = class HelixHeadlessRadio extends MixinSelectableItem(He
     constructor() {
         super(...arguments);
         this.clicks = new HostClickController(this, () => this.partNamed('item'));
-        this.focusable = false;
     }
     get defaultSelected() {
         return this.hasAttribute('selected');
@@ -30,7 +29,7 @@ let HelixHeadlessRadio = class HelixHeadlessRadio extends MixinSelectableItem(He
       role="radio"
       aria-checked=${this.selected ? 'true' : 'false'}
       ?disabled=${this.disabled}
-      tabindex=${this.selected || this.focusable || !this.childrenKnown ? '0' : '-1'}
+      tabindex=${(this.focusable ?? this.selected) || !this.childrenKnown ? '0' : '-1'}
       @click=${() => this.select()}
     >
       <span part="box"></span>

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

@@ -1,4 +1,4 @@
-import { HelixFormElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixFormElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
@@ -21,6 +21,11 @@ declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion
  * @aliases Stars, Score, Review score
  * @documentation https://fusion.dev/helix/components/rating
  *
+ * @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 mark - The shape of a mark, copied into every position.
+ *
  * @event {Event} change - The score was chosen. Sent together with `input`, because each choice commits the score.
  * @event {HelixBeforeChangeEvent} helix-before-change - The score is about to change. Cancelable: cancel it to keep the current score.
  * @event {Event} input - The score changed.
@@ -92,6 +97,14 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
      * nonsense is the fault this pays off, so neither case is quietly ignored.
      */
     min: number;
+    /**
+     * The name of each mark a reader can choose, with `{score}` and `{max}`
+     * filled in. Set it to translate "3 out of 5".
+     *
+     * Also what a read-only rating says for its score where `value-text` is
+     * empty.
+     */
+    optionLabel: string;
     /**
      * Shows the score without letting users change it.
      *
@@ -128,6 +141,7 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
      * and each of its options by the score that option is.
      */
     valueText: string;
+    protected readonly aria: AriaForwardController;
     /**
      * The shape a consumer slotted, if they slotted one.
      *
@@ -255,6 +269,15 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
     protected updated(changed: PropertyValues): void;
     protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
+    /** The name of one score, as `optionLabel` writes it. */
+    private nameFor;
+    /**
+     * The option holding the tab stop: the chosen one, or for a score between
+     * steps, such as an average of 3.5 on whole marks, the step below it, and
+     * the first while nothing is chosen. Between steps no option matched, and
+     * the rating left the tab order.
+     */
+    private stopAt;
     protected render(): TemplateResult;
     /**
      * The value as a number, or `NaN` while the control is empty.

package/dist/rating/root/rating-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 { valueAsNumber as asNumber, customElement, numberAsValue as fromNumber, HelixFormElement, KeyboardNavigationController, MixinControllerValue, MixinField, reportRuntime, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsNumber as asNumber, customElement, fillTemplate, numberAsValue as fromNumber, HelixFormElement, KeyboardNavigationController, MixinControllerValue, MixinField, reportRuntime, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue(MixinField(HelixFormElement)) {
@@ -13,10 +13,14 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         this.announcesInput = false;
         this.max = 5;
         this.min = 0;
+        this.optionLabel = '{score} out of {max}';
         this.readOnly = false;
         this.showValue = false;
         this.step = 1;
         this.valueText = '';
+        this.aria = new AriaForwardController(this, {
+            target: () => this.partNamed('marks'),
+        });
         this.markSource = undefined;
         this.markRead = false;
         this.previewing = undefined;
@@ -190,11 +194,23 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         this.finishHydration();
         this.sync();
     }
+    nameFor(score) {
+        return fillTemplate(this.optionLabel, { max: this.max, score });
+    }
+    stopAt(answered, first) {
+        if (!answered) {
+            return first;
+        }
+        const below = this.steps.filter((score) => score <= this.score);
+        return below.at(-1) ?? first;
+    }
     render() {
         const showing = this.previewing ?? this.score;
-        const said = this.valueText || `${this.score} out of ${this.max}`;
+        const said = this.valueText || this.nameFor(this.score);
         const count = Math.max(0, Math.round(this.max));
         const first = this.steps[0];
+        const answered = this.value !== '' && Number.isFinite(Number.parseFloat(this.value));
+        const stop = this.stopAt(answered, first);
         const mark = (layer, index) => html `<span part="mark">${this.markFor(layer, index)}</span>`;
         const marksIn = (layer) => Array.from({ length: count }, (_, index) => mark(layer, index));
         return html `${this.renderGroupLabel()}
@@ -240,14 +256,12 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
                 part="option"
                 role="radio"
                 type="button"
-                aria-checked=${this.score === score ? 'true' : 'false'}
-                aria-label=${`${score} out of ${this.max}`}
+                aria-checked=${answered && this.score === score ? 'true' : 'false'}
+                aria-label=${this.nameFor(score)}
                 data-score=${String(score)}
                 style=${`--rating-step: ${index + 1}`}
                 ?disabled=${this.isDisabled}
-                tabindex=${this.score === score || (this.score === this.floor && score === first)
-                        ? '0'
-                        : '-1'}
+                tabindex=${score === stop ? '0' : '-1'}
                 @click=${this.handleOptionClick}
                 @pointerenter=${this.handleOptionEnter}
               ></button>`)}
@@ -275,6 +289,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessRating.prototype, "min", void 0);
+__decorate([
+    property({ attribute: 'option-label' })
+], HelixHeadlessRating.prototype, "optionLabel", void 0);
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessRating.prototype, "readOnly", void 0);

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

@@ -9,11 +9,19 @@ import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
 const REACH = 24;
-const coefficient = new Intl.NumberFormat(undefined, {
-    maximumFractionDigits: 2,
-    minimumFractionDigits: 2,
-    signDisplay: 'exceptZero',
-});
+const COEFFICIENTS = new Map();
+const coefficientIn = (locale) => {
+    let found = COEFFICIENTS.get(locale);
+    if (!found) {
+        found = new Intl.NumberFormat(locale || undefined, {
+            maximumFractionDigits: 2,
+            minimumFractionDigits: 2,
+            signDisplay: 'exceptZero',
+        });
+        COEFFICIENTS.set(locale, found);
+    }
+    return found;
+};
 const nice = ([low, high]) => {
     if (low === high) {
         return [low - 1, high + 1];
@@ -130,7 +138,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         <div id=${CHART_PLOT} part="plot"></div>
       </div>`;
         }
-        const format = formatNumbers('');
+        const format = formatNumbers(this.locale);
         const along = linear(field.x, [0, PLOT_WIDTH]);
         const up = linear(field.y, [PLOT_HEIGHT, 0]);
         return html `<div dir="ltr" part="plane">
@@ -177,7 +185,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         const clauses = field.yNames.map((name, depth) => {
             const pairs = field.pairs[depth] ?? [];
             const r = correlation(pairs);
-            const strength = r === undefined ? '' : `, ${this.correlationLabel} ${coefficient.format(r)}`;
+            const strength = r === undefined ? '' : `, ${this.correlationLabel} ${coefficientIn(this.locale).format(r)}`;
             return `${name} / ${field.xName}: ${pairs.length} ${this.pointsLabel}${strength}`;
         });
         const named = this.named ? `${this.named}. ` : '';

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

@@ -17,6 +17,14 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * `Select` owns the value, passes it down to the listbox, and takes changes
  * back, so the value lives in one place.
  *
+ * 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.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -25,6 +33,7 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  *
  * @slot - The options, and any groups of them.
  * @slot end - Content after the chosen value, such as a count, a unit, or a clear button.
+ * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
  * @slot hint - The hint, for content richer than plain text.
  * @slot indicator - The icon on the trigger that shows it opens, usually a caret.
  * @slot label - The label, for content richer than plain text.
@@ -34,8 +43,9 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * @event {HelixBeforeChangeEvent} helix-before-change - Relayed from the listbox when the value is about to change. Cancelable: canceling it stops the change and leaves the decision to you.
  * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the list closes. Cancelable: canceling it keeps the list open and leaves the decision to you.
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the list opens. Cancelable: canceling it keeps the list closed and leaves the decision to you.
+ * @event {HelixFilterEvent} helix-filter - Fired as the user types in the filter field of a `filterable` select, with the text the list is filtered by. Cancelable: cancel it to leave the list unfiltered and filter the options yourself.
  * @event {Event} input - Fired after the value changes.
- * @event {Event} toggle - Fired after the list opens or closes, with `newState` and `oldState`.
+ * @event {ToggleEvent} toggle - Fired after the list opens or closes, with `newState` and `oldState`.
  *
  * @csspart feedback - The message that says what is wrong with the value.
  * @csspart hint - Help under the trigger.
@@ -158,10 +168,64 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * the commit creates the text node it needs.
      */
     private get display();
+    /** Where the highlight goes when the list opens, set by the key that opened it. */
+    private opening;
+    /**
+     * The values of the options seen on the last update, so an option that
+     * leaves can be told apart from one that has not arrived yet.
+     */
+    private seen;
+    /**
+     * Hears an option's words change, which no slot reports, and the host's
+     * `aria-labelledby` change, which `triggerNames` reads.
+     *
+     * The trigger shows the chosen option's words, read at render time. A slot
+     * reports an option arriving or leaving and says nothing when the text of
+     * one already there changes, so a relabeled option left the old words on the
+     * trigger. `label` and `value` are attributes that change the words too.
+     *
+     * Made on connection, there being no `MutationObserver` on a server.
+     */
+    private watchers;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Opens the list with the highlight where the opening key says. */
+    private openAt;
     /** Closes the list and puts focus back where it came from. */
     private close;
     private readonly handleChange;
+    /**
+     * The keys of the closed trigger.
+     *
+     * Letters choose without opening, the way a native `<select>` and React
+     * 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.
+     */
     private readonly handleTriggerKeydown;
+    /**
+     * Tab closes the list and lets focus move on, as a native `<select>` does.
+     *
+     * Measured before this: Tab moved focus to the next control and left the
+     * panel open over the page, because the panel closes on a press outside or
+     * on Escape and nothing closed it when focus left.
+     */
+    private readonly handleListKeydown;
+    /**
+     * Takes `<helix-option selected>` as the default value, and an option that
+     * has left out of the value.
+     *
+     * The first is what a native `<select>` does with `<option selected>`, and
+     * what `Option.defaultSelected` says: a form reset returns to it. A
+     * `default-value` on the select wins.
+     *
+     * The second keeps the trigger and the form in agreement. Measured before
+     * this: removing the chosen option made the trigger say "Choose" while the
+     * form still submitted the removed value. Only an option seen before is
+     * dropped, so a value set ahead of options that load later is kept.
+     */
+    private reconcileOptions;
     /** Reports the answer and the verdict on it. */
     private sync;
     protected willUpdate(changed: PropertyValues): void;
@@ -198,8 +262,10 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * native `<select>` says both, and this names the trigger by both, the label
      * and then the value, in that order.
      *
-     * A consumer's own `aria-labelledby` on the host wins, carried to the trigger
-     * by `AriaForwardController`, so nothing is written here to fight it.
+     * A consumer's own `aria-labelledby` on the host wins, and so does a
+     * `<label>` that names the host where there is no `label`. Both are carried
+     * to the trigger by `AriaForwardController`, which reads the value after
+     * them, so nothing is written here to fight it.
      */
     private get triggerNames();
     protected render(): TemplateResult;

package/dist/select/root/select-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, HelixFormElement, hostAria, MixinControllerOpen, MixinControllerValue, MixinField, PopoverController, reportValues, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixFormElement, hostAria, MixinControllerOpen, MixinControllerValue, MixinField, PopoverController, reportValues, typesCharacter, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -16,6 +16,10 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
+            labelledByAfter: () => {
+                const value = this.partNamed('value');
+                return value ? [value] : [];
+            },
             target: () => this.partNamed('trigger'),
         });
         this.emptyText = 'No matches';
@@ -36,6 +40,9 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
             placement: 'bottom-start',
             surface: () => this.partNamed('surface'),
         });
+        this.opening = 'selected';
+        this.seen = new Set();
+        this.watchers = [];
         this.handleChange = (event) => {
             const next = event.detail.value;
             if (!this.requestValue(next)) {
@@ -48,9 +55,39 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
             event.stopPropagation();
         };
         this.handleTriggerKeydown = (event) => {
-            if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+            const listbox = this.listbox;
+            if (typesCharacter(event) && (event.key !== ' ' || listbox?.typing)) {
                 event.preventDefault();
-                this.requestOpen(true);
+                const match = listbox?.typeaheadTo(event.key);
+                if (match === undefined) {
+                    return;
+                }
+                if (this.multiple) {
+                    this.opening = 'selected';
+                    this.requestOpen(true);
+                }
+                else {
+                    this.requestValue(match);
+                }
+                return;
+            }
+            const opens = {
+                ' ': 'selected',
+                ArrowDown: 'selected',
+                ArrowUp: 'last',
+                End: 'last',
+                Enter: 'selected',
+                Home: 'first',
+            };
+            const where = opens[event.key];
+            if (where !== undefined) {
+                event.preventDefault();
+                this.openAt(where === 'last' && event.key === 'ArrowUp' && this.value !== '' ? 'selected' : where);
+            }
+        };
+        this.handleListKeydown = (event) => {
+            if (event.key === 'Tab' && this.open) {
+                this.requestOpen(false);
             }
         };
     }
@@ -58,10 +95,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         return this.listbox?.selectedIndex ?? -1;
     }
     set selectedIndex(at) {
-        const listbox = this.listbox;
-        if (listbox) {
-            listbox.selectedIndex = at;
-        }
+        this.value = this.listbox?.options[at]?.value ?? '';
     }
     get type() {
         return this.multiple ? 'select-multiple' : 'select-one';
@@ -79,6 +113,30 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         }
         return chosen.size > 0 && !this.childrenKnown ? nothing : this.placeholder;
     }
+    connectedCallback() {
+        super.connectedCallback();
+        const words = new MutationObserver(() => this.requestUpdate());
+        words.observe(this, {
+            attributeFilter: ['label', 'value'],
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+        const naming = new MutationObserver(() => this.requestUpdate());
+        naming.observe(this, { attributeFilter: ['aria-labelledby'] });
+        this.watchers = [words, naming];
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        for (const watcher of this.watchers) {
+            watcher.disconnect();
+        }
+        this.watchers = [];
+    }
+    openAt(where) {
+        this.opening = where;
+        this.requestOpen(true);
+    }
     close() {
         if (!this.open) {
             return;
@@ -86,6 +144,24 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         this.requestOpen(false);
         this.partNamed('trigger')?.focus();
     }
+    reconcileOptions() {
+        const options = optionsAmong(this.knownChildren);
+        if (this.defaultValue === '' && !this.hasAttribute('default-value')) {
+            const declared = options
+                .filter((option) => option.defaultSelected)
+                .map((option) => option.value);
+            if (declared.length > 0) {
+                this.defaultValue = this.multiple ? declared.join(',') : (declared.at(-1) ?? '');
+            }
+        }
+        const present = new Set(options.map((option) => option.value));
+        const held = this.value === '' ? [] : this.value.split(',');
+        const gone = held.filter((value) => this.seen.has(value) && !present.has(value));
+        this.seen = present;
+        if (gone.length > 0) {
+            this.value = held.filter((value) => !gone.includes(value)).join(',');
+        }
+    }
     sync() {
         if (this.multiple) {
             reportValues(this.internals, this.name, this.value === '' ? [] : this.value.split(','));
@@ -98,6 +174,9 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label });
+        if (this.childrenKnown) {
+            this.reconcileOptions();
+        }
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -109,6 +188,8 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         this.linkHost();
         if (this.open) {
             if (changed.has('open')) {
+                this.listbox?.highlight(this.opening);
+                this.opening = 'selected';
                 this.listbox?.focus();
             }
         }
@@ -129,7 +210,9 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
       .value=${this.value}
       ?multiple=${this.multiple}
       ?filterable=${this.filterable}
+      manual
       aria-label=${this.label || nothing}
+      @keydown=${this.handleListKeydown}
       @helix-before-change=${this.handleChange}
       @change=${this.stopInner}
       @input=${this.stopInner}
@@ -147,7 +230,8 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
     </slot>`;
     }
     get triggerNames() {
-        if (this.hasAttribute('aria-labelledby')) {
+        const outside = (this.internals.labels?.length ?? 0) > 0 && !this.labeled;
+        if (this.hasAttribute('aria-labelledby') || outside) {
             return nothing;
         }
         return this.labeled ? `${this.labelId} value` : 'value';

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

@@ -4,9 +4,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @summary A placeholder shown in place of content that is still loading.
  *
  * @description
- * Sets `aria-busy` and a polite live region, so a screen reader announces that
- * the region is loading. Both are set through `ElementInternals`, which writes
- * no attributes.
+ * A skeleton is hidden from screen readers unless it has a `label`. An empty
+ * placeholder has nothing to say, and a page of them would be a page of
+ * unnamed shapes. Tell a screen reader that a region is loading on the region
+ * itself: set `aria-busy="true"` on it while it loads, and put a `Loader` or a
+ * status message in it. Set `label` on one skeleton to have it read out by
+ * name, such as "Loading profile", when a reader reaches it. The role and the
+ * name are set through `ElementInternals`, which writes no attributes.
  *
  * There is no `shape` property. Whether a placeholder is a line, a block, or a
  * circle is presentation, which belongs to the styled tier.
@@ -20,6 +24,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart skeleton - The placeholder shape.
  */
 export declare class HelixHeadlessSkeleton extends HelixElement {
+    /**
+     * What is loading, read out as the placeholder's name, such as "Loading
+     * profile".
+     *
+     * Absent hides the placeholder from screen readers.
+     */
+    label: string;
     protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }