@fusion.dev/helix-headless 0.109.3 → 0.110.1

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

@@ -142,6 +142,16 @@ export declare class HelixHeadlessButton extends HelixFormElement {
      * "button" and nothing else.
      */
     label: string;
+    /**
+     * What kind of panel this button opens, where it opens one: `menu` for a
+     * `Menu`.
+     *
+     * Set by the component that owns the panel, as a property for the reason
+     * `expanded` gives above. It is what makes a reader say the button opens a
+     * menu. Read from Chromium's tree, a Menu's trigger was a plain button that
+     * reported collapsed and expanded and no popup.
+     */
+    popup?: 'dialog' | 'grid' | 'listbox' | 'menu' | 'tree';
     /** Moves focus to the inner control, so the host is never the focus target. */
     static shadowRootOptions: ShadowRootInit;
     private readonly handleClick;

package/dist/button/root/button-root.js

@@ -123,6 +123,7 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
       part="button"
       type="button"
       aria-expanded=${this.expanded === undefined ? nothing : String(this.expanded)}
+      aria-haspopup=${this.popup ?? nothing}
       aria-label=${this.label || nothing}
       command=${this.command || nothing}
       tabindex=${stop}
@@ -163,6 +164,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessButton.prototype, "label", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessButton.prototype, "popup", void 0);
 __decorate([
     property()
 ], HelixHeadlessButton.prototype, "type", void 0);

package/dist/color-picker/root/color-picker-root.js

@@ -175,6 +175,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         hint: channel-hint, label: channel-label, marker: channel-marker,
         marker-label: channel-marker-label, markers: channel-markers, output: channel-output"
       data-channel=${channel}
+      aria-invalid=${this.invalid ? 'true' : nothing}
       label=${label}
       max=${max}
       min="0"
@@ -254,6 +255,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
           min="0"
           max="100"
           aria-label=${this.saturationLabel}
+          aria-invalid=${this.invalid ? 'true' : nothing}
           .value=${String(color.saturation)}
           ?disabled=${this.isDisabled}
           @input=${(event) => this.takeArea('saturation', event)}
@@ -264,6 +266,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
           min="0"
           max="100"
           aria-label=${this.brightnessLabel}
+          aria-invalid=${this.invalid ? 'true' : nothing}
           .value=${String(color.brightness)}
           ?disabled=${this.isDisabled}
           @input=${(event) => this.takeArea('brightness', event)}
@@ -298,6 +301,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
                 part="value"
                 type="text"
                 aria-label=${this.valueLabel}
+                aria-invalid=${this.invalid ? 'true' : nothing}
                 autocomplete=${this.autocomplete || nothing}
                 spellcheck="false"
                 .value=${this.value}

package/dist/data-table/root/data-table-root.d.ts

@@ -127,6 +127,8 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * same reason.
      */
     static shadowRootOptions: ShadowRootInit;
+    /** The word for an ascending sort, in `sorted-label`. */
+    ascendingLabel: string;
     /**
      * The starting search query, used until `filter` is set.
      */
@@ -152,6 +154,8 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * The starting sort order, used until `sort` is set.
      */
     defaultSort: string;
+    /** The word for a descending sort, in `sorted-label`. */
+    descendingLabel: string;
     /**
      * The estimated height of a row before it is drawn, in pixels.
      *
@@ -280,6 +284,11 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      */
     get selected(): string;
     set selected(next: string);
+    /**
+     * What screen readers hear when the chosen rows change. `{count}` is how many
+     * rows are chosen.
+     */
+    selectedLabel: string;
     /**
      * The sort order, as `field:direction`.
      *
@@ -289,6 +298,11 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      */
     get sort(): string;
     set sort(next: string);
+    /**
+     * What screen readers hear when the table is sorted. `{column}` is the
+     * column's heading and `{order}` is `ascending-label` or `descending-label`.
+     */
+    sortedLabel: string;
     /**
      * The number of rows in the whole result, for when the table cannot count
      * them.
@@ -299,6 +313,8 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * one that cannot be stale.
      */
     total: number;
+    /** What screen readers hear when the table stops being sorted. */
+    unsortedLabel: string;
     /**
      * Draws only the rows in view, with empty space in place of the rest.
      *
@@ -582,6 +598,22 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * Manual assignment, so a consumer's own markup is never written to.
      */
     private assign;
+    /** The sort last heard, so a render that changed nothing says nothing. */
+    private heardSort;
+    /** The selection last heard, for the same reason. */
+    private heardSelected;
+    /**
+     * What the table says after a sort or a change to the chosen rows.
+     *
+     * **The state changed and nothing said so.** A sort moved `aria-sort` on the
+     * heading, and a reader on the heading's button is not told its column's
+     * state changed; a chosen row ticked one box, and nothing gave the count. So
+     * each is said in the collection's live region, once, after it has happened.
+     * Whoever set it, a reader or a consumer answering `helix-sort`, since either
+     * way the rows under the reader have moved. Not on the first render, which
+     * is the table arriving rather than anything changing.
+     */
+    private news;
     protected willUpdate(changed: PropertyValues): void;
     /**
      * Says on the toolbar and the footer whether anything is in them.

package/dist/data-table/root/data-table-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessDataTable_1;
-import { customElement, HelixElement, HelixFilterEvent, HelixNavigateEvent, HelixReorderEvent, HelixSelectEvent, HelixSortEvent, hostAria, inlineStep, isRtl, MixinCollection, markRegion, requestChange, VirtualizeController, writtenList, } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, formatNumbers, HelixElement, HelixFilterEvent, HelixNavigateEvent, HelixReorderEvent, HelixSelectEvent, HelixSortEvent, hostAria, inlineStep, isRtl, MixinCollection, markRegion, requestChange, VirtualizeController, writtenList, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -17,12 +17,14 @@ import { arranged, cycle, format, ordered, parse, window_, } from './order.js';
 let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
+        this.ascendingLabel = 'ascending';
         this.defaultFilter = '';
         this.defaultOrder = '';
         this.defaultPage = 1;
         this.defaultPageSize = 0;
         this.defaultSelected = '';
         this.defaultSort = '';
+        this.descendingLabel = 'descending';
         this.estimate = 32;
         this.label = '';
         this.mode = 'client';
@@ -30,7 +32,10 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.rowKey = '';
         this.rows = [];
         this.selectable = false;
+        this.selectedLabel = '{count} selected';
+        this.sortedLabel = 'Sorted by {column}, {order}';
         this.total = 0;
+        this.unsortedLabel = 'Not sorted';
         this.windowed = false;
         this.sortState = undefined;
         this.filterState = undefined;
@@ -76,6 +81,8 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             }
             this.requestSelected(keys);
         };
+        this.heardSort = undefined;
+        this.heardSelected = undefined;
         this.handleSlotChange = () => {
             this.requestUpdate();
         };
@@ -508,8 +515,34 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             }
         }
     }
+    news() {
+        const sort = this.sort;
+        const selected = this.selectable ? this.selected : '';
+        let said = this.announced;
+        if (this.hasUpdated && sort !== this.heardSort) {
+            const parsed = parse(sort);
+            const column = parsed
+                ? this.tableColumns.find((one) => one.field === parsed.field)
+                : undefined;
+            said = parsed
+                ? fillTemplate(this.sortedLabel, {
+                    column: column?.textContent?.trim() || parsed.field,
+                    order: parsed.direction === 'asc' ? this.ascendingLabel : this.descendingLabel,
+                })
+                : this.unsortedLabel;
+        }
+        else if (this.hasUpdated && selected !== this.heardSelected) {
+            said = fillTemplate(this.selectedLabel, {
+                count: formatNumbers(this.lang)(this.chosen.size),
+            });
+        }
+        this.heardSort = sort;
+        this.heardSelected = selected;
+        return said;
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
+        this.announced = this.news();
         hostAria(this.internals, { label: this.label || 'Table', role: 'grid' });
         this.internals.ariaMultiSelectable = this.selectable ? 'true' : null;
         const placement = this.placement;
@@ -697,6 +730,9 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         return undefined;
     }
 };
+__decorate([
+    property({ attribute: 'ascending-label' })
+], HelixHeadlessDataTable.prototype, "ascendingLabel", void 0);
 __decorate([
     property({ attribute: 'default-filter' })
 ], HelixHeadlessDataTable.prototype, "defaultFilter", void 0);
@@ -715,6 +751,9 @@ __decorate([
 __decorate([
     property({ attribute: 'default-sort' })
 ], HelixHeadlessDataTable.prototype, "defaultSort", void 0);
+__decorate([
+    property({ attribute: 'descending-label' })
+], HelixHeadlessDataTable.prototype, "descendingLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDataTable.prototype, "estimate", void 0);
@@ -754,12 +793,21 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "selected", null);
+__decorate([
+    property({ attribute: 'selected-label' })
+], HelixHeadlessDataTable.prototype, "selectedLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "sort", null);
+__decorate([
+    property({ attribute: 'sorted-label' })
+], HelixHeadlessDataTable.prototype, "sortedLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDataTable.prototype, "total", void 0);
+__decorate([
+    property({ attribute: 'unsorted-label' })
+], HelixHeadlessDataTable.prototype, "unsortedLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessDataTable.prototype, "windowed", void 0);

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

@@ -89,6 +89,7 @@ declare const HelixHeadlessMap_base: (new (...args: any[]) => import("@fusion.de
  * @csspart layers - The list of the map's shown layers, such as routes, areas, and points, read by screen readers.
  * @csspart layers-menu - The menu of the map's layers, which the layers button opens.
  * @csspart layers-toggle - The button that opens and closes the layers menu.
+ * @csspart live - What screen readers hear after the map moves: the zoom level, the way it faces, its tilt, or the way it moved. Visually hidden in the styled tier.
  * @csspart map-type - One map type's card in the layers menu: a radio button, its picture, and its name.
  * @csspart map-type-name - The name on a map type's card.
  * @csspart map-type-preview - The picture of the map on a map type's card.
@@ -124,6 +125,8 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
     cluster: boolean;
     /** The Face north button's label. */
     faceNorthLabel: string;
+    /** What screen readers hear when the map is tilted back to looking straight down. */
+    flatLabel: string;
     /** The Hybrid map type's name. */
     hybridLabel: string;
     /**
@@ -149,6 +152,16 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
     mapType?: 'hybrid' | 'satellite' | undefined;
     /** The name of the map types in the layers menu, read by screen readers. */
     mapTypeLabel: string;
+    /** What screen readers hear when the map has moved down. */
+    movedDownLabel: string;
+    /** What screen readers hear when the map has moved left. */
+    movedLeftLabel: string;
+    /** What screen readers hear when the map has moved right. */
+    movedRightLabel: string;
+    /** What screen readers hear when the map has moved up. */
+    movedUpLabel: string;
+    /** What screen readers hear when the map is turned back to face north. */
+    northLabel: string;
     /**
      * How far the map is tilted, in degrees from looking straight down.
      * `connectMap` keeps it current, and the 3D button is pressed while it is
@@ -163,8 +176,52 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
     satelliteLabel: string;
     /** The Standard map type's name. */
     standardLabel: string;
+    /**
+     * What screen readers hear when the map is tilted. `{degrees}` is the tilt
+     * from looking straight down.
+     */
+    tiltedLabel: string;
     /** The 3D button's label. */
     tiltLabel: string;
+    /**
+     * What screen readers hear when the map is turned. `{degrees}` is the way the
+     * top of the map faces, clockwise from north.
+     */
+    turnedLabel: string;
+    /**
+     * What screen readers hear after a zoom. `{level}` is the zoom level.
+     */
+    zoomedLabel: string;
+    /**
+     * How far the map is zoomed, in its renderer's levels. `connectMap` keeps it
+     * current, and the map says it after a zoom.
+     */
+    zoomLevel?: number | undefined;
+    /** What the live region says now. */
+    private said;
+    /** What a reader last asked of the map, until the map has answered it. */
+    private asked;
+    /** The wait for the view to settle before it is said. */
+    private settling;
+    /**
+     * Says the map has moved, where a reader asked it to.
+     *
+     * **Called by whatever moves the map**, as `connectMap` does on every frame
+     * the view moves. The frame's keys and buttons only ask, and nothing moves
+     * until something answers, so the frame says nothing until it is told the
+     * view moved: an announcement for a move that never happened is worse than
+     * none. A page moving its own map in answer to `helix-map-pan` calls this
+     * once it has.
+     *
+     * What is said waits for the view to settle, so a held key or a long
+     * animation is one sentence, and it is the view's state where there is one:
+     * the zoom level, the way the map faces, its tilt. A pan has no state to
+     * say, so it says which way the map moved.
+     */
+    moved(): void;
+    private say;
+    /** Records what a reader asked, so the answer can be said. */
+    private ask;
     /**
      * The routes and areas among the frame's children, in the order they are
      * written, which is the order the list names them in.

package/dist/map/root/map-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 { customElement, HelixActivateEvent, HelixElement, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, hostAria, KeyboardNavigationController, MixinViewport, } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, formatNumbers, HelixActivateEvent, HelixElement, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, hostAria, KeyboardNavigationController, MixinViewport, } from '@fusion.dev/helix-core';
 import { buildings, cloudRain, dotsNine, leaf, mountains, path, polygon, stack, target, } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -35,23 +35,37 @@ const iconOf = (layer) => {
 const ROTATE_STEP = 15;
 const TILT_STEP = 10;
 const TILTED = 50;
+const ASK_LAPSES = 3000;
+const SETTLES = 400;
 let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement) {
     constructor() {
         super(...arguments);
         this.bearing = 0;
         this.cluster = false;
         this.faceNorthLabel = 'Face north';
+        this.flatLabel = 'Looking straight down';
         this.hybridLabel = 'Hybrid';
         this.label = '';
         this.layersLabel = 'Map layers';
         this.mapPreviews = {};
         this.mapTypeLabel = 'Map type';
+        this.movedDownLabel = 'Moved down';
+        this.movedLeftLabel = 'Moved left';
+        this.movedRightLabel = 'Moved right';
+        this.movedUpLabel = 'Moved up';
+        this.northLabel = 'Facing north';
         this.pitch = 0;
         this.rotateLeftLabel = 'Rotate left';
         this.rotateRightLabel = 'Rotate right';
         this.satelliteLabel = 'Satellite';
         this.standardLabel = 'Standard';
+        this.tiltedLabel = 'Tilted {degrees} degrees';
         this.tiltLabel = 'Show in 3D';
+        this.turnedLabel = 'Facing {degrees} degrees';
+        this.zoomedLabel = 'Zoom level {level}';
+        this.said = '';
+        this.asked = undefined;
+        this.settling = undefined;
         this.layersOpen = false;
         this.handleOutside = (event) => {
             if (!event.composedPath().includes(this)) {
@@ -119,6 +133,46 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
             this.requestUpdate();
         };
     }
+    moved() {
+        if (!this.asked || performance.now() - this.asked.at > ASK_LAPSES) {
+            return;
+        }
+        clearTimeout(this.settling);
+        this.settling = setTimeout(() => this.say(), SETTLES);
+    }
+    say() {
+        const asked = this.asked;
+        this.asked = undefined;
+        if (!asked) {
+            return;
+        }
+        const numbers = formatNumbers(this.lang);
+        const degrees = (value) => numbers(Math.round(value));
+        const bearing = ((Math.round(this.bearing) % 360) + 360) % 360;
+        const words = {
+            down: this.movedDownLabel,
+            left: this.movedLeftLabel,
+            right: this.movedRightLabel,
+            up: this.movedUpLabel,
+        };
+        const next = asked.kind === 'pan'
+            ? (words[asked.side ?? ''] ?? '')
+            : asked.kind === 'zoom'
+                ? this.zoomLevel === undefined
+                    ? ''
+                    : fillTemplate(this.zoomedLabel, { level: numbers(this.zoomLevel) })
+                : asked.kind === 'tilt'
+                    ? Math.round(this.pitch) === 0
+                        ? this.flatLabel
+                        : fillTemplate(this.tiltedLabel, { degrees: degrees(this.pitch) })
+                    : bearing === 0
+                        ? this.northLabel
+                        : fillTemplate(this.turnedLabel, { degrees: degrees(bearing) });
+        this.said = next !== '' && next === this.said.trim() ? `${next}\u00a0` : next;
+    }
+    ask(kind, side) {
+        this.asked = { at: performance.now(), kind, ...(side ? { side } : {}) };
+    }
     get layers() {
         return this.knownChildren.filter((child) => child.isMapLayer === true);
     }
@@ -183,6 +237,8 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        clearTimeout(this.settling);
+        this.settling = undefined;
         this.hiding?.disconnect();
         document.removeEventListener('pointerdown', this.handleOutside);
         this.removeEventListener(HelixMapPartChangeEvent.eventName, this.handlePartChange);
@@ -221,15 +277,19 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         }
     }
     rotate(by) {
+        this.ask('rotate');
         this.dispatchEvent(new HelixMapRotateEvent({ by }));
     }
     faceNorth() {
+        this.ask('north');
         this.dispatchEvent(new HelixMapRotateEvent({ to: 0 }));
     }
     tilt(by) {
+        this.ask('tilt');
         this.dispatchEvent(new HelixMapTiltEvent({ by }));
     }
     tiltTo(to) {
+        this.ask('tilt');
         this.dispatchEvent(new HelixMapTiltEvent({ to }));
     }
     renderLayersMenu() {
@@ -423,9 +483,11 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         return false;
     }
     panEvent(detail) {
+        this.ask('pan', this.sideOf(detail.to));
         return new HelixMapPanEvent(detail);
     }
     zoomEvent(detail) {
+        this.ask('zoom');
         return new HelixMapZoomEvent(detail);
     }
     get restingControlsLabel() {
@@ -472,6 +534,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
       <div part="attribution">
         <slot name="attribution"></slot>
       </div>
+      <span part="live" role="status">${this.said}</span>
     </div>`;
     }
 };
@@ -484,6 +547,9 @@ __decorate([
 __decorate([
     property({ attribute: 'face-north-label' })
 ], HelixHeadlessMap.prototype, "faceNorthLabel", void 0);
+__decorate([
+    property({ attribute: 'flat-label' })
+], HelixHeadlessMap.prototype, "flatLabel", void 0);
 __decorate([
     property({ attribute: 'hybrid-label' })
 ], HelixHeadlessMap.prototype, "hybridLabel", void 0);
@@ -502,6 +568,21 @@ __decorate([
 __decorate([
     property({ attribute: 'map-type-label' })
 ], HelixHeadlessMap.prototype, "mapTypeLabel", void 0);
+__decorate([
+    property({ attribute: 'moved-down-label' })
+], HelixHeadlessMap.prototype, "movedDownLabel", void 0);
+__decorate([
+    property({ attribute: 'moved-left-label' })
+], HelixHeadlessMap.prototype, "movedLeftLabel", void 0);
+__decorate([
+    property({ attribute: 'moved-right-label' })
+], HelixHeadlessMap.prototype, "movedRightLabel", void 0);
+__decorate([
+    property({ attribute: 'moved-up-label' })
+], HelixHeadlessMap.prototype, "movedUpLabel", void 0);
+__decorate([
+    property({ attribute: 'north-label' })
+], HelixHeadlessMap.prototype, "northLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessMap.prototype, "pitch", void 0);
@@ -517,9 +598,24 @@ __decorate([
 __decorate([
     property({ attribute: 'standard-label' })
 ], HelixHeadlessMap.prototype, "standardLabel", void 0);
+__decorate([
+    property({ attribute: 'tilted-label' })
+], HelixHeadlessMap.prototype, "tiltedLabel", void 0);
 __decorate([
     property({ attribute: 'tilt-label' })
 ], HelixHeadlessMap.prototype, "tiltLabel", void 0);
+__decorate([
+    property({ attribute: 'turned-label' })
+], HelixHeadlessMap.prototype, "turnedLabel", void 0);
+__decorate([
+    property({ attribute: 'zoomed-label' })
+], HelixHeadlessMap.prototype, "zoomedLabel", void 0);
+__decorate([
+    property({ attribute: 'zoom-level', type: Number })
+], HelixHeadlessMap.prototype, "zoomLevel", void 0);
+__decorate([
+    state()
+], HelixHeadlessMap.prototype, "said", void 0);
 __decorate([
     state()
 ], HelixHeadlessMap.prototype, "layersOpen", void 0);

package/dist/menu/root/menu-root.js

@@ -94,7 +94,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     }
     tellTrigger() {
         const slot = this.renderRoot?.querySelector('slot[name="trigger"]');
-        tellDisclosure(slot?.assignedElements({ flatten: false })[0], this.open);
+        tellDisclosure(slot?.assignedElements({ flatten: false })[0], this.open, 'menu');
     }
     get trigger() {
         return anchorElement(this.renderRoot?.querySelector('slot[name="trigger"]'), this);

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

@@ -188,6 +188,20 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * cannot change.
      */
     protected renderIndicator(): TemplateResult;
+    /**
+     * What names the trigger: the label, then the choice.
+     *
+     * **A button is named by its label alone**, and what it shows is not read:
+     * the `<label for>` wins over the button's own text. Read from Chromium's
+     * tree, a Select showing "Spanish" was a button named "Language", with the
+     * choice in no name or value, so a reader never heard what was chosen. A
+     * 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.
+     */
+    private get triggerNames();
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -146,12 +146,19 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
       </svg>
     </slot>`;
     }
+    get triggerNames() {
+        if (this.hasAttribute('aria-labelledby')) {
+            return nothing;
+        }
+        return this.labeled ? `${this.labelId} value` : 'value';
+    }
     render() {
         return html `${this.renderLabel()}
       <button
         part="trigger"
         id=${this.controlId}
         type="button"
+        aria-labelledby=${this.triggerNames}
         aria-haspopup="listbox"
         aria-expanded=${this.open ? 'true' : 'false'}
         aria-describedby=${this.describedBy ?? nothing}
@@ -161,7 +168,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         @keydown=${this.handleTriggerKeydown}
       >
         <slot name="start"></slot>
-        <span part="value">${this.display}</span>
+        <span part="value" id="value">${this.display}</span>
         ${''}
         <slot name="end"></slot>
         ${''}

package/dist/time-picker/root/time-picker-root.js

@@ -202,6 +202,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         return html `<${this.tag('listbox')}
       part="column"
       data-column=${part}
+      aria-invalid=${this.invalid ? 'true' : nothing}
       exportparts="empty: column-empty, feedback: column-feedback, filter-icon: column-filter-icon,
         filter-mark: column-filter-mark, hint: column-hint, items: column-items, label: column-label,
         live: column-live, loading: column-loading, search: column-search, search-field: column-search-field"
@@ -244,6 +245,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
     renderList() {
         return html `<${this.tag('listbox')}
       part="list"
+      aria-invalid=${this.invalid ? 'true' : nothing}
       exportparts="empty: list-empty, feedback: list-feedback, filter-icon: list-filter-icon,
         filter-mark: list-filter-mark, hint: list-hint, items: list-items, label: list-label,
         live: list-live, loading: list-loading, search: list-search, search-field: list-search-field"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.109.3",
+  "version": "0.110.1",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,13 +46,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.109.3",
-    "@fusion.dev/helix-icons": "0.109.3",
+    "@fusion.dev/helix-core": "0.110.1",
+    "@fusion.dev/helix-icons": "0.110.1",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.109.3",
-    "@fusion.dev/helix-testing": "0.109.3",
+    "@fusion.dev/helix-cem": "0.110.1",
+    "@fusion.dev/helix-testing": "0.110.1",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",