@fusion.dev/helix-headless 0.142.1 → 0.144.0

package/dist/map/root/map-root.js

@@ -4,10 +4,11 @@ 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, fillTemplate, formatNumbers, HelixActivateEvent, HelixElement, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, hostAria, KeyboardNavigationController, MixinViewport, } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, formatNumbers, HelixActivateEvent, HelixBeforeChangeEvent, HelixBeforeToggleEvent, HelixElement, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, hostAria, KeyboardNavigationController, MixinViewport, requestChange, } 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';
+import { live } from 'lit/directives/live.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 const MAP_TYPES = ['standard', 'hybrid', 'satellite'];
 const iconOf = (layer) => {
@@ -205,10 +206,37 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
                 : this.standardLabel;
     }
     showLayers(layers, shown) {
-        for (const layer of layers) {
-            layer.hidden = !shown;
+        const first = layers[0];
+        if (!first) {
+            return;
+        }
+        requestChange({
+            apply: () => {
+                for (const layer of layers) {
+                    layer.hidden = !shown;
+                }
+                this.requestUpdate();
+            },
+            event: (checked) => new HelixBeforeToggleEvent({ checked }),
+            host: first,
+            next: shown,
+        });
+    }
+    chooseMapType(type) {
+        const applied = requestChange({
+            apply: (value) => {
+                this.mapType = value === 'standard' ? undefined : value;
+            },
+            event: (value) => new HelixBeforeChangeEvent({ value }),
+            host: this,
+            next: type,
+        });
+        if (applied) {
+            this.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+        else {
+            this.requestUpdate();
         }
-        this.requestUpdate();
     }
     get layerEntries() {
         const entries = [];
@@ -382,9 +410,10 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
           <input
             type="radio"
             name="map-type"
-            .checked=${chosen === type}
-            @change=${() => {
-                this.mapType = type === 'standard' ? undefined : type;
+            .checked=${live(chosen === type)}
+            @change=${(event) => {
+                event.stopPropagation();
+                this.chooseMapType(type);
             }}
           />
           ${preview

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

@@ -31,7 +31,7 @@ declare const HelixHeadlessMegamenu_base: (new (...args: any[]) => import("@fusi
  *
  * @event {HelixBeforeCloseEvent} helix-before-close - The panel is about to close. Cancelable.
  * @event {HelixBeforeOpenEvent} helix-before-open - The panel is about to open. Cancelable.
- * @event {Event} toggle - The panel opened or closed. Carries `newState` and `oldState`.
+ * @event {ToggleEvent} toggle - The panel opened or closed. Carries `newState` and `oldState`.
  *
  * @csspart surface - The floating panel that opens.
  * @csspart trigger - The default trigger button, shown when the `trigger` slot is empty.
@@ -194,6 +194,15 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
     private readonly handlePointerDown;
     private readonly handlePointerEnter;
     private readonly handlePointerLeave;
+    /**
+     * Closes the panel when keyboard focus leaves it for the page.
+     *
+     * Only when focus went somewhere: a `relatedTarget` of null is focus leaving
+     * the document, such as a switch to another window, and a reader who comes
+     * back expects the panel as they left it. `requestOpen` rather than `close`,
+     * because focus has already gone where the reader sent it.
+     */
+    private readonly handleFocusOut;
     private readonly handleTriggerClick;
     /**
      * Shuts the panel when a reader takes one of the destinations in it.

package/dist/megamenu/root/megamenu-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 HelixHeadlessMegamenu_1;
-import { anchorElement, customElement, HelixElement, MixinControllerOpen, PopoverController, tellDisclosure, } from '@fusion.dev/helix-core';
+import { anchorElement, customElement, deepContains, HelixElement, MixinControllerOpen, PopoverController, tellDisclosure, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 let showing;
@@ -57,6 +57,13 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
                 this.requestOpen(false);
             });
         };
+        this.handleFocusOut = (event) => {
+            const next = event.relatedTarget;
+            if (!this.open || next === null || deepContains(this, next)) {
+                return;
+            }
+            this.requestOpen(false);
+        };
         this.handleTriggerClick = (event) => {
             this.stop();
             if (this.openOn !== 'hover') {
@@ -154,6 +161,7 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
         this.addEventListener('click', this.handleContentClick);
         this.addEventListener('pointerenter', this.handlePointerEnter);
         this.addEventListener('pointerleave', this.handlePointerLeave);
+        this.addEventListener('focusout', this.handleFocusOut);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -164,6 +172,7 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
         this.removeEventListener('click', this.handleContentClick);
         this.removeEventListener('pointerenter', this.handlePointerEnter);
         this.removeEventListener('pointerleave', this.handlePointerLeave);
+        this.removeEventListener('focusout', this.handleFocusOut);
         this.stop();
         if (showing === this) {
             showing = undefined;

package/dist/menu/item/menu-item.d.ts

@@ -14,6 +14,11 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * only one can be on. A row that opens a page keeps `menuitem` and sets
  * `aria-haspopup`.
  *
+ * Choosing a choice row checks or unchecks it before `helix-select` is sent,
+ * so a listener reads the new `checked`. An `exclusive` row turns on and turns
+ * off the `exclusive` rows next to it. Cancel `helix-before-toggle` to keep a
+ * row as it is and set `checked` yourself.
+ *
  * The menu sets whether the row's page is showing as a property, never as an
  * attribute. An attribute written onto your element after it upgrades causes a
  * hydration mismatch.
@@ -27,12 +32,15 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @slot start - Content before the label, such as an icon.
  * @slot submenu - The rows of a submenu that this row opens.
  *
+ * @event {HelixBeforeToggleEvent} helix-before-toggle - A choice row is about to be checked or unchecked, carrying the state asked for. Cancelable: cancel it to keep the row as it is.
  * @event {HelixSelectEvent} helix-select - The row was chosen. Cancelable: cancel it to keep the menu open.
  *
  * @csspart item - The row, which is an `<a>` where `href` is set.
  * @csspart mark - The trailing mark: a check mark when the row is checked, or a caret
  * when it opens a submenu. A row never shows both, so they share one column.
  * @csspart start - The leading column that holds the `start` slot. It is always rendered.
+ *
+ * @cssstate checked - The row is checked.
  */
 export declare class HelixHeadlessMenuItem extends HelixElement {
     /**
@@ -45,10 +53,16 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
      * thing they are not.
      *
      * `checked` implies it, so a row that is on never has to say both.
+     *
+     * Choosing the row checks or unchecks it, after a `helix-before-toggle` that
+     * you can cancel.
      */
     checkable: boolean;
     /**
      * Whether the row is checked.
+     *
+     * The row changes it when it is chosen. Not reflected: the attribute is the
+     * state you start the row in, and `:state(checked)` carries the current one.
      */
     checked: boolean;
     /**
@@ -66,11 +80,11 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
     /**
      * Whether only one row in its set can be checked at a time.
      *
-     * Announcement and nothing else, the way `checkable` is: this element applies
-     * no choice and polices no group, so what it does is tell a reader which kind
-     * of set they are in. `menuitemcheckbox` says every row here is independent,
-     * which for a run of comparisons, or the values of a filter that compares
-     * against one, is the opposite of true.
+     * The set is the run of `exclusive` rows next to this one, up to the first
+     * element that is not one, such as a divider. Choosing a row in it checks
+     * that row and unchecks the others. Choosing the row that is checked leaves
+     * it checked. `menuitemradio` tells a reader which kind of set they are in,
+     * where `menuitemcheckbox` says every row is independent.
      *
      * Meaningless without `checkable`, since a row that cannot be ticked is not
      * one of a set of anything.
@@ -225,16 +239,31 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
     /** Chooses the row, the same as pressing it. */
     select(): void;
     /**
-     * Whether the row has focus, which is what selected means in a menu.
+     * Whether the row has focus, which makes it the row the keyboard is on.
+     *
+     * `Option` calls the same thing `active`. A menu holds no answer the way a
+     * radio group does, only a row the reader has walked to, so focus is the
+     * whole of what "the current one" can mean here. Read from the shadow root
+     * rather than kept as state, because focus moves for reasons this element is
+     * not told about: a press, a Tab, the drilldown putting the reader on the
+     * first row of a page it has just opened.
+     */
+    get active(): boolean;
+    /**
+     * Whether the row has focus, the same as `active`.
      *
-     * A radio group's selection is an answer it holds; a menu has no answer, only
-     * a row the reader has walked to, so focus is the whole of what "the current
-     * one" can mean here. Read from the shadow root rather than kept as state,
-     * because focus moves for reasons this element is not told about: a press, a
-     * Tab, the drilldown putting the reader on the first row of a page it has
-     * just opened.
+     * @deprecated Read `active`. Everywhere else in the library `selected` means
+     * chosen out of a set, and a menu row is never chosen that way.
      */
     get selected(): boolean;
+    /**
+     * Checks or unchecks a choice row.
+     *
+     * An `exclusive` row only turns on, and turning on turns its set off.
+     */
+    private tick;
+    /** The other `exclusive` rows in this row's run of siblings. */
+    private exclusivePeers;
     private choose;
     private readonly handleClick;
     /**

package/dist/menu/item/menu-item.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, HelixElement, HelixSelectEvent } from '@fusion.dev/helix-core';
+import { customElement, deepActiveElement, HelixBeforeToggleEvent, HelixElement, HelixSelectEvent, requestChange, } from '@fusion.dev/helix-core';
 import { caretRight, check } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -58,6 +58,7 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        this.toggleState('checked', this.checked);
         if (!this.childrenKnown) {
             return;
         }
@@ -78,13 +79,55 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
     select() {
         this.choose();
     }
+    get active() {
+        const active = deepActiveElement();
+        return active !== null && active.getRootNode() === this.renderRoot;
+    }
     get selected() {
-        return this.ownerDocument.activeElement === this;
+        return this.active;
+    }
+    tick() {
+        if (!(this.checkable || this.checked) || this.hasSubmenu) {
+            return;
+        }
+        const next = this.exclusive ? true : !this.checked;
+        if (next === this.checked) {
+            return;
+        }
+        const applied = requestChange({
+            apply: (checked) => {
+                this.checked = checked;
+            },
+            event: (checked) => new HelixBeforeToggleEvent({ checked }),
+            host: this,
+            next,
+        });
+        if (applied && this.exclusive) {
+            for (const peer of this.exclusivePeers()) {
+                peer.checked = false;
+            }
+        }
+    }
+    exclusivePeers() {
+        const peers = [];
+        const inSet = (node) => node !== null &&
+            node.isMenuItem === true &&
+            node.exclusive &&
+            node.slot === this.slot;
+        for (const step of ['previousElementSibling', 'nextElementSibling']) {
+            let node = this[step];
+            while (inSet(node)) {
+                peers.push(node);
+                node = node[step];
+            }
+        }
+        return peers;
     }
     choose() {
         if (this.disabled) {
             return;
         }
+        this.tick();
         this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
     }
     render() {
@@ -155,7 +198,7 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessMenuItem.prototype, "checkable", void 0);
 __decorate([
-    property({ reflect: true, type: Boolean })
+    property({ type: Boolean })
 ], HelixHeadlessMenuItem.prototype, "checked", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })

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

@@ -1,4 +1,4 @@
-import { HelixElement, KeyboardNavigationController, type Placement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixElement, KeyboardNavigationController, type Placement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
 /**
@@ -9,6 +9,12 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * menu renders its surface in the top layer with the popover API, so an
  * ancestor with `overflow: hidden` does not clip it and it needs no `z-index`.
  *
+ * Slot a `helix-button` or `helix-icon-button` as the trigger, and the menu
+ * tells it that it opens a menu and whether the menu is open. A plain
+ * `<button>` can only be told by writing attributes onto your markup, which
+ * the menu does not do, so give it `aria-haspopup="menu"` and set its
+ * `aria-expanded` from the `toggle` event.
+ *
  * Submenus drill down. A submenu replaces the panel's content, and a back row
  * returns to the previous page. One panel avoids the diagonal pointer path that
  * side-by-side panels need, stays inside a narrow window, and works on touch
@@ -30,7 +36,7 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * @event {HelixBeforeCloseEvent} helix-before-close - The menu is about to close. Cancelable: cancel it to keep it open.
  * @event {HelixBeforeOpenEvent} helix-before-open - The menu is about to open. Cancelable: cancel it to keep it closed.
  * @event {HelixSelectEvent} helix-select - An item was chosen. Cancelable: cancel it to keep the menu open.
- * @event {Event} toggle - The menu opened or closed. The event carries `newState` and `oldState`.
+ * @event {ToggleEvent} toggle - The menu opened or closed. The event carries `newState` and `oldState`.
  *
  * @csspart back - The control that returns from a submenu.
  * @csspart back-mark - The glyph on the back control of a submenu.
@@ -53,6 +59,10 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
     backLabel: string;
     /**
      * Accessible name for the surface.
+     *
+     * Empty by default, which names the surface by its trigger, so a menu opened
+     * from "Actions" is announced as "Actions". An `aria-label` or
+     * `aria-labelledby` on the host names it too, and wins over both.
      */
     label: string;
     /**
@@ -92,6 +102,8 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
      * menu that drills, so those keys are spoken for here rather than unhandled.
      */
     protected readonly keys: KeyboardNavigationController;
+    /** Carries a host `aria-label` and `aria-labelledby` to the surface. */
+    protected readonly aria: AriaForwardController;
     private readonly panel;
     /**
      * Tells a slotted trigger the disclosure state, by property.
@@ -108,6 +120,8 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
     private get items();
     /** Opens the menu. */
     show(): void;
+    /** Opens the menu with focus on its first or its last row. */
+    private openAt;
     /** Closes the menu and returns it to its first page. */
     hide(): void;
     /** Shows an item's submenu in place of the current page. */
@@ -124,10 +138,26 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
      */
     private readonly handleFocusIn;
     private readonly handleKeydown;
+    /**
+     * Down and Up on the trigger open the menu on its first and its last row.
+     *
+     * Everything else passes through. Escape in particular is not this element's
+     * while the menu is closed, so a dialog around the menu still closes on it.
+     */
+    private handleClosedKeydown;
     private readonly handleTriggerClick;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
+    /**
+     * Names the surface by its trigger, where nothing else names it.
+     *
+     * By element reference, which is the one direction that crosses: the surface
+     * is in this shadow root and the trigger is in the tree around it. A host
+     * `aria-labelledby` is carried down by `aria`, and a host `aria-label` or
+     * `label` is a name of its own, so each of them clears this reference.
+     */
+    private nameSurface;
     /**
      * Says whether the page showing reserves a column either side of its labels.
      *

package/dist/menu/root/menu-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 { anchorElement, customElement, DrilldownController, HelixElement, inlineStep, KeyboardNavigationController, MixinCollection, MixinControllerOpen, PopoverController, scrollItemIntoView, tellDisclosure, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, HelixElement, inlineStep, KeyboardNavigationController, MixinCollection, MixinControllerOpen, PopoverController, scrollItemIntoView, slottedWords, tellDisclosure, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -13,7 +13,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     constructor() {
         super(...arguments);
         this.backLabel = 'Back';
-        this.label = 'Menu';
+        this.label = '';
         this.offset = 4;
         this.placement = 'bottom-start';
         this.drilldown = new DrilldownController(this, {
@@ -22,9 +22,14 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             slot: 'submenu',
         });
         this.keys = new KeyboardNavigationController(this, {
-            items: () => this.items,
+            items: () => (this.open ? this.items : []),
             reserved: () => ['ArrowLeft', 'ArrowRight'],
             selects: () => false,
+            typeahead: (item) => slottedWords(item, ['']),
+        });
+        this.aria = new AriaForwardController(this, {
+            label: true,
+            target: () => this.partNamed('surface'),
         });
         this.panel = new PopoverController(this, {
             anchor: () => this.trigger,
@@ -61,8 +66,12 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             scrollItemIntoView(item, { padding: 4, ...(surface ? { scroller: surface } : {}) });
         };
         this.handleKeydown = (event) => {
+            if (!this.open) {
+                this.handleClosedKeydown(event);
+                return;
+            }
             const items = this.items;
-            const at = items.indexOf(document.activeElement);
+            const at = items.findIndex((item) => item.active);
             const along = inlineStep(this, event.key);
             if (event.key === 'Escape') {
                 event.stopPropagation();
@@ -94,7 +103,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, 'menu');
+        tellDisclosure(slot?.assignedElements({ flatten: true })[0], this.open, 'menu');
     }
     get trigger() {
         return anchorElement(this.renderRoot?.querySelector('slot[name="trigger"]'), this);
@@ -103,11 +112,15 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         return this.drilldown.rows.filter((row) => !row.disabled);
     }
     show() {
+        this.openAt('first');
+    }
+    openAt(end) {
         if (this.open || !this.requestOpen(true)) {
             return;
         }
         this.updateComplete.then(() => {
-            this.items[0]?.focus();
+            const items = this.items;
+            (end === 'first' ? items[0] : items[items.length - 1])?.focus();
         });
     }
     hide() {
@@ -116,7 +129,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         }
         this.panel.hide();
         this.drilldown.reset();
-        if (this.contains(document.activeElement)) {
+        if (deepContains(this, deepActiveElement())) {
             this.trigger.focus();
         }
     }
@@ -135,6 +148,18 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.drilldown.back();
         this.updateComplete.then(() => leaving?.focus());
     }
+    handleClosedKeydown(event) {
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+            return;
+        }
+        const slot = this.renderRoot?.querySelector('slot[name="trigger"]');
+        const triggers = slot?.assignedElements({ flatten: true }) ?? [];
+        if (!event.composedPath().some((node) => triggers.includes(node))) {
+            return;
+        }
+        event.preventDefault();
+        this.openAt(event.key === 'ArrowDown' ? 'first' : 'last');
+    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelect, true);
@@ -159,6 +184,21 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         }
         this.toggleState('drilled', !this.drilldown.atRoot);
         this.markColumns();
+        this.nameSurface();
+    }
+    nameSurface() {
+        const surface = this.partNamed('surface');
+        if (!surface || !('ariaLabelledByElements' in surface)) {
+            return;
+        }
+        if (this.hasAttribute('aria-labelledby')) {
+            return;
+        }
+        const trigger = this.renderRoot
+            ?.querySelector('slot[name="trigger"]')
+            ?.assignedElements({ flatten: true })[0];
+        const named = this.label !== '' || this.hasAttribute('aria-label');
+        surface.ariaLabelledByElements = trigger && !named ? [trigger] : null;
     }
     markColumns() {
         const rows = this.drilldown.rows;
@@ -183,7 +223,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         popover="manual"
         role="menu"
         aria-busy=${this.loading ? 'true' : nothing}
-        aria-label=${this.label}
+        aria-label=${this.label || nothing}
         data-drilled=${this.drilldown.atRoot ? nothing : ''}
         ?hidden=${!this.open}
       >

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

@@ -22,6 +22,8 @@ export type MeterBand = 'fair' | 'good' | 'poor';
  * @aliases Gauge, Level, Capacity
  * @documentation https://fusion.dev/helix/components/meter
  *
+ * @slot label - A visible label. Its words name the meter in place of `label`.
+ *
  * @csspart groove - The unfilled circle, in `ring` and `arc`.
  * @csspart indicator - The part of the track the value fills.
  * @csspart indicator-fair - The fill while the reading is in a band next to the good band. Set alongside `indicator`.
@@ -77,8 +79,17 @@ export declare class HelixHeadlessMeter extends HelixElement {
     high?: number;
     /**
      * Accessible name for the reading.
+     *
+     * A visible label in the `label` slot names it instead, with the words it
+     * shows, so the name and the label cannot disagree.
      */
     label: string;
+    /**
+     * The locale the percentage is written in, such as `fr` for `72 %`.
+     *
+     * Absent uses the runtime's own.
+     */
+    locale: string;
     /**
      * Top of the low band.
      *
@@ -212,6 +223,8 @@ export declare class HelixHeadlessMeter extends HelixElement {
      * where the arc starts.
      */
     private renderRound;
+    /** A label's words changed, so the name is written again. */
+    private readonly renamed;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/meter/root/meter-root.js

@@ -4,18 +4,34 @@ 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, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria, slottedWords } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
+const percents = new Map();
+const percent = (share, locale) => {
+    let format = percents.get(locale);
+    if (!format) {
+        format = new Intl.NumberFormat(locale || undefined, {
+            maximumFractionDigits: 0,
+            style: 'percent',
+        });
+        percents.set(locale, format);
+    }
+    return format.format(share);
+};
 let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
     constructor() {
         super(...arguments);
         this.label = 'Meter';
+        this.locale = '';
         this.max = 100;
         this.min = 0;
         this.showValue = false;
         this.value = 0;
         this.valueText = '';
+        this.renamed = () => {
+            this.requestUpdate();
+        };
     }
     get span() {
         const min = Number.isFinite(this.min) ? this.min : 0;
@@ -64,17 +80,17 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
         return distance === 0 ? 'good' : distance === 1 ? 'fair' : 'poor';
     }
     get text() {
-        return this.valueText || `${Math.round(this.ratio * 100)}%`;
+        return this.valueText || percent(this.ratio, this.locale);
     }
     willUpdate(changed) {
         super.willUpdate(changed);
         const { max, min } = this.span;
-        hostAria(this.internals, { label: this.label, role: 'meter' });
+        hostAria(this.internals, { label: slottedWords(this, ['label']) || this.label, role: 'meter' });
         this.internals.ariaValueMin = String(min);
         this.internals.ariaValueMax = String(max);
         this.internals.ariaValueNow = String(this.reading);
         this.internals.ariaValueText =
-            this.valueText || (this.beyond ? `${Math.round(this.ratio * 100)}%` : null);
+            this.valueText || (this.beyond ? percent(this.ratio, this.locale) : null);
     }
     renderRound() {
         const bounds = this.thresholds;
@@ -108,7 +124,7 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
         const beyond = this.beyond;
         const { max, min } = this.span;
         const at = (value) => `${((value - min) / (max - min)) * 100}%`;
-        return html `${this.shape
+        return html `<slot name="label" @slotchange=${this.renamed}></slot>${this.shape
             ? this.renderRound()
             : html `<div part="track">
             ${bounds
@@ -134,6 +150,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessMeter.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixHeadlessMeter.prototype, "locale", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessMeter.prototype, "low", void 0);