@fusion.dev/helix-headless 0.147.0 → 0.149.0

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, fillTemplate, formatNumbers, HelixActivateEvent, HelixBeforeChangeEvent, HelixBeforeToggleEvent, HelixElement, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixToggleEvent, hostAria, KeyboardNavigationController, MixinViewport, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, focusItemOf, formatWords, HelixActivateEvent, HelixBeforeChangeEvent, HelixBeforeToggleEvent, HelixElement, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixToggleEvent, hostAria, KeyboardNavigationController, MixinViewport, requestChange, words, } 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';
@@ -42,9 +42,12 @@ const SETTLES = 400;
 let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement) {
     constructor() {
         super(...arguments);
+        this.activateHintLabel = 'Press the map to use it';
         this.bearing = 0;
         this.cluster = false;
+        this.controlsLabel = 'Map controls';
         this.faceNorthLabel = 'Face north';
+        this.fallbackLabel = 'Map';
         this.flatLabel = 'Looking straight down';
         this.hybridLabel = 'Hybrid';
         this.label = '';
@@ -61,9 +64,12 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         this.rotateRightLabel = 'Rotate right';
         this.satelliteLabel = 'Satellite';
         this.standardLabel = 'Standard';
-        this.tiltedLabel = 'Tilted {degrees} degrees';
+        this.tiltedLabel = '{degrees, plural, one {Tilted # degree} other {Tilted # degrees}}';
         this.tiltLabel = 'Show in 3D';
-        this.turnedLabel = 'Facing {degrees} degrees';
+        this.turnedLabel = '{degrees, plural, one {Facing # degree} other {Facing # degrees}}';
+        this.twoFingerHintLabel = 'Use two fingers to move the map';
+        this.usingLabel = 'Using the map. Press Escape to scroll the page again.';
+        this.wheelHintLabel = 'Use {key} and scroll to zoom the map';
         this.zoomedLabel = 'Zoom level {level}';
         this.said = '';
         this.asked = undefined;
@@ -89,15 +95,13 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         };
         this.stop = 0;
         this.keys = new KeyboardNavigationController(this, {
-            items: () => this.markers.map((marker, at) => ({
-                contains: (node) => node !== null && (marker.contains(node) || marker.shadowRoot?.contains(node) === true),
+            items: () => this.markers.map((marker, at) => focusItemOf(marker, {
                 disabled: marker.gatheredBy !== undefined || !placed(marker),
-                focusItem: () => {
+                focus: () => {
                     this.stop = at;
                     marker.focus();
                 },
-                select: () => { },
-                selected: false,
+                owns: (node) => node !== null && (marker.contains(node) || marker.shadowRoot?.contains(node) === true),
             })),
             origin: 'focus',
             selects: () => false,
@@ -105,10 +109,26 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         this.handleFocusIn = (event) => {
             const marker = this.markerOf(event);
             const at = marker ? this.markers.indexOf(marker) : -1;
+            this.focused = at === -1 ? undefined : marker;
             if (at !== -1) {
                 this.stop = at;
             }
         };
+        this.handleFocusOut = (event) => {
+            const marker = this.markerOf(event);
+            if (!marker || marker !== this.focused) {
+                return;
+            }
+            if (event.relatedTarget) {
+                this.focused = undefined;
+                return;
+            }
+            queueMicrotask(() => {
+                if (marker.isConnected && this.focused === marker) {
+                    this.focused = undefined;
+                }
+            });
+        };
         this.handleClick = (event) => {
             const marker = this.markerOf(event);
             if (marker) {
@@ -136,6 +156,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
             this.requestUpdate();
         };
     }
+    static { this.words = 'helix-map'; }
     moved() {
         if (!this.asked || performance.now() - this.asked.at > ASK_LAPSES) {
             return;
@@ -162,8 +183,6 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         if (!asked) {
             return;
         }
-        const numbers = formatNumbers(this.closest('[lang]')?.getAttribute('lang') ?? '');
-        const degrees = (value) => numbers(Math.round(value));
         const bearing = ((Math.round(this.bearing) % 360) + 360) % 360;
         const words = {
             down: this.movedDownLabel,
@@ -176,14 +195,14 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
             : asked.kind === 'zoom'
                 ? this.zoomLevel === undefined
                     ? ''
-                    : fillTemplate(this.zoomedLabel, { level: numbers(this.zoomLevel) })
+                    : formatWords(this, 'zoomedLabel', { level: this.zoomLevel })
                 : asked.kind === 'tilt'
                     ? Math.round(this.pitch) === 0
                         ? this.flatLabel
-                        : fillTemplate(this.tiltedLabel, { degrees: degrees(this.pitch) })
+                        : formatWords(this, 'tiltedLabel', { degrees: Math.round(this.pitch) })
                     : bearing === 0
                         ? this.northLabel
-                        : fillTemplate(this.turnedLabel, { degrees: degrees(bearing) });
+                        : formatWords(this, 'turnedLabel', { degrees: bearing });
         this.said = next !== '' && next === this.said ? `${next}\u00a0` : next;
     }
     ask(kind, side) {
@@ -267,6 +286,23 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
             .composedPath()
             .find((one) => one.isMapMarker === true);
     }
+    refocus(stop) {
+        const gone = this.focused;
+        if (!gone || this.markers.includes(gone)) {
+            return;
+        }
+        this.focused = undefined;
+        const active = document.activeElement;
+        if (active !== null && active !== document.body) {
+            return;
+        }
+        if (stop) {
+            stop.focus();
+        }
+        else {
+            this.partNamed('region')?.focus();
+        }
+    }
     activate(marker) {
         if (marker.gathered.length > 1) {
             marker.dispatchEvent(new HelixMapClusterEvent({ labels: [...marker.gathered] }));
@@ -274,14 +310,6 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         }
         this.dispatchEvent(new HelixActivateEvent({ value: marker.name || marker.label || '' }));
     }
-    get restingGestureLabels() {
-        return {
-            activate: 'Press the map to use it',
-            twoFinger: 'Use two fingers to move the map',
-            using: 'Using the map. Press Escape to scroll the page again.',
-            wheel: 'Use {key} and scroll to zoom the map',
-        };
-    }
     gesturesChanged() {
         this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'gestures' }));
     }
@@ -290,6 +318,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         this.addEventListener(HelixMapPartChangeEvent.eventName, this.handlePartChange);
         this.addEventListener('click', this.handleClick);
         this.addEventListener('focusin', this.handleFocusIn);
+        this.addEventListener('focusout', this.handleFocusOut);
         this.addEventListener('keydown', this.handleMarkerKeydown);
         this.addEventListener('keyup', this.handleMarkerKeyup);
         this.hiding = new MutationObserver(() => this.requestUpdate());
@@ -304,6 +333,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         this.removeEventListener(HelixMapPartChangeEvent.eventName, this.handlePartChange);
         this.removeEventListener('click', this.handleClick);
         this.removeEventListener('focusin', this.handleFocusIn);
+        this.removeEventListener('focusout', this.handleFocusOut);
         this.removeEventListener('keydown', this.handleMarkerKeydown);
         this.removeEventListener('keyup', this.handleMarkerKeyup);
     }
@@ -331,6 +361,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         for (const marker of markers) {
             marker.current = marker === stop;
         }
+        this.refocus(stop);
         if (changed.has('cluster')) {
             this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'place' }));
         }
@@ -371,9 +402,11 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         }}
         @keydown=${this.handleMenuKeydown}
       >
-        <svg aria-hidden="true" fill="currentColor" height="16" viewBox=${stack.viewBox} width="16">
-          ${unsafeSVG(stack.content)}
-        </svg>
+        <slot name="layers-icon">
+          <svg aria-hidden="true" fill="currentColor" height="16" viewBox=${stack.viewBox} width="16">
+            ${unsafeSVG(stack.content)}
+          </svg>
+        </slot>
       </button>
       <div
         part="layers-menu"
@@ -428,41 +461,44 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
     </div>`;
     }
     renderCompass(pan, rotate) {
+        const { faceNorthLabel } = this;
         return html `<div part="compass">
       ${rotate
             ? html `<button part="rotate-left" aria-label=${this.rotateLeftLabel} type="button" @click=${() => this.rotate(-ROTATE_STEP)}>
-              ↺
+              <slot name="rotate-left-icon">↺</slot>
             </button>`
             : nothing}
       ${pan
             ? html `<button part="pan-up" aria-label=${this.panLabel('up')} type="button" @click=${() => this.pan('up')}>
-              ${this.panGlyph('up')}
+              <slot name="pan-up-icon">${this.panGlyph('up')}</slot>
             </button>`
             : nothing}
       ${rotate
             ? html `<button part="rotate-right" aria-label=${this.rotateRightLabel} type="button" @click=${() => this.rotate(ROTATE_STEP)}>
-              ↻
+              <slot name="rotate-right-icon">↻</slot>
             </button>`
             : nothing}
       ${pan
             ? html `<button part="pan-start" aria-label=${this.panLabel('start')} type="button" @click=${() => this.pan('start')}>
-              ${this.panGlyph('start')}
+              <slot name="pan-start-icon">${this.panGlyph('start')}</slot>
             </button>`
             : nothing}
-      <button part="face-north" aria-label=${this.faceNorthLabel} type="button" style=${`--map-needle-turn: ${-this.bearing}deg`} @click=${() => this.faceNorth()}>
-        <svg part="needle" aria-hidden="true" viewBox="0 0 16 16">
-          <path data-end="north" d="M8 1.5 10.5 8h-5Z" />
-          <path data-end="south" d="M8 14.5 5.5 8h5Z" />
-        </svg>
+      <button part="face-north" aria-label=${faceNorthLabel} type="button" style=${`--map-needle-turn: ${-this.bearing}deg`} @click=${() => this.faceNorth()}>
+        <slot name="face-north-icon">
+          <svg part="needle" aria-hidden="true" viewBox="0 0 16 16">
+            <path data-end="north" d="M8 1.5 10.5 8h-5Z" />
+            <path data-end="south" d="M8 14.5 5.5 8h5Z" />
+          </svg>
+        </slot>
       </button>
       ${pan
             ? html `<button part="pan-end" aria-label=${this.panLabel('end')} type="button" @click=${() => this.pan('end')}>
-              ${this.panGlyph('end')}
+              <slot name="pan-end-icon">${this.panGlyph('end')}</slot>
             </button>`
             : nothing}
       ${pan
             ? html `<button part="pan-down" aria-label=${this.panLabel('down')} type="button" @click=${() => this.pan('down')}>
-              ${this.panGlyph('down')}
+              <slot name="pan-down-icon">${this.panGlyph('down')}</slot>
             </button>`
             : nothing}
     </div>`;
@@ -477,7 +513,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         if (!pan && !zoom && !rotate && !tilt && !fullscreen && menu === nothing) {
             return nothing;
         }
-        return html `<div part="controls" role="group" aria-label=${this.controlsLabel ?? this.restingControlsLabel}>
+        return html `<div part="controls" role="group" aria-label=${this.controlsLabel}>
       ${fullscreen
             ? html `<button
               part="fullscreen"
@@ -486,7 +522,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
               type="button"
               @click=${this.toggleFullscreen}
             >
-              ⤢
+              <slot name="fullscreen-icon">⤢</slot>
             </button>`
             : nothing}
       ${menu}
@@ -498,15 +534,15 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
               type="button"
               @click=${() => this.tiltTo(this.pitch > 0 ? 0 : TILTED)}
             >
-              3D
+              <slot name="tilt-icon">3D</slot>
             </button>`
             : nothing}
       ${zoom
             ? html `<button part="zoom-in" aria-label=${this.zoomInLabel} type="button" @click=${() => this.zoom(1)}>
-                +
+                <slot name="zoom-in-icon">+</slot>
               </button>
               <button part="zoom-out" aria-label=${this.zoomOutLabel} type="button" @click=${() => this.zoom(-1)}>
-                −
+                <slot name="zoom-out-icon">−</slot>
               </button>`
             : nothing}
       ${this.drawsCompass ? this.renderCompass(pan, rotate) : nothing}
@@ -550,14 +586,14 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         this.ask('zoom');
         return new HelixMapZoomEvent(detail);
     }
-    get restingControlsLabel() {
-        return 'Map controls';
-    }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label });
         this.toggleState('fullscreen', this.filled);
         this.toggleState('idle', this.resting);
+        this.toggleState('layers-open', this.layersOpen);
+        this.toggleState('rotated', Math.round(this.bearing) % 360 !== 0);
+        this.toggleState('tilted', Math.round(this.pitch) !== 0);
     }
     renderLayers() {
         const layers = this.layers.filter((layer) => this.shown(layer));
@@ -572,7 +608,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         return html `<div
       part="region"
       role="group"
-      aria-label=${this.label || this.getAttribute('aria-label') || 'Map'}
+      aria-label=${this.label || this.getAttribute('aria-label') || this.fallbackLabel}
       aria-keyshortcuts=${this.keyShortcuts}
       tabindex="0"
       @focusin=${this.idle.stir}
@@ -599,6 +635,10 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
     </div>`;
     }
 };
+__decorate([
+    words,
+    property({ attribute: 'activate-hint-label' })
+], HelixHeadlessMap.prototype, "activateHintLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessMap.prototype, "bearing", void 0);
@@ -606,18 +646,30 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessMap.prototype, "cluster", void 0);
 __decorate([
+    words,
+    property({ attribute: 'controls-label' })
+], HelixHeadlessMap.prototype, "controlsLabel", void 0);
+__decorate([
+    words,
     property({ attribute: 'face-north-label' })
 ], HelixHeadlessMap.prototype, "faceNorthLabel", void 0);
 __decorate([
+    words,
+    property({ attribute: 'fallback-label' })
+], HelixHeadlessMap.prototype, "fallbackLabel", void 0);
+__decorate([
+    words,
     property({ attribute: 'flat-label' })
 ], HelixHeadlessMap.prototype, "flatLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'hybrid-label' })
 ], HelixHeadlessMap.prototype, "hybridLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessMap.prototype, "label", void 0);
 __decorate([
+    words,
     property({ attribute: 'layers-label' })
 ], HelixHeadlessMap.prototype, "layersLabel", void 0);
 __decorate([
@@ -627,48 +679,74 @@ __decorate([
     property({ attribute: 'map-type', reflect: true })
 ], HelixHeadlessMap.prototype, "mapType", void 0);
 __decorate([
+    words,
     property({ attribute: 'map-type-label' })
 ], HelixHeadlessMap.prototype, "mapTypeLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'moved-down-label' })
 ], HelixHeadlessMap.prototype, "movedDownLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'moved-left-label' })
 ], HelixHeadlessMap.prototype, "movedLeftLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'moved-right-label' })
 ], HelixHeadlessMap.prototype, "movedRightLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'moved-up-label' })
 ], HelixHeadlessMap.prototype, "movedUpLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'north-label' })
 ], HelixHeadlessMap.prototype, "northLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessMap.prototype, "pitch", void 0);
 __decorate([
+    words,
     property({ attribute: 'rotate-left-label' })
 ], HelixHeadlessMap.prototype, "rotateLeftLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'rotate-right-label' })
 ], HelixHeadlessMap.prototype, "rotateRightLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'satellite-label' })
 ], HelixHeadlessMap.prototype, "satelliteLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'standard-label' })
 ], HelixHeadlessMap.prototype, "standardLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'tilted-label' })
 ], HelixHeadlessMap.prototype, "tiltedLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'tilt-label' })
 ], HelixHeadlessMap.prototype, "tiltLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'turned-label' })
 ], HelixHeadlessMap.prototype, "turnedLabel", void 0);
 __decorate([
+    words,
+    property({ attribute: 'two-finger-hint-label' })
+], HelixHeadlessMap.prototype, "twoFingerHintLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'using-label' })
+], HelixHeadlessMap.prototype, "usingLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'wheel-hint-label' })
+], HelixHeadlessMap.prototype, "wheelHintLabel", void 0);
+__decorate([
+    words,
     property({ attribute: 'zoomed-label' })
 ], HelixHeadlessMap.prototype, "zoomedLabel", void 0);
 __decorate([

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

@@ -34,6 +34,11 @@ export declare const pointsConverter: {
  * @event {HelixMapPartChangeEvent} helix-map-part-change - The route's points, progress, name, or color changed. Used by `connectMap`; pages do not need to listen for it.
  */
 export declare class HelixHeadlessMapRoute extends HelixElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-map-route': { label: 'Route' } })`.
+     */
+    static words: string;
     /**
      * More about the route, such as its distance or time. Read after its label
      * in the frame's list.

package/dist/map/route/map-route.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, HelixMapPartChangeEvent } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixMapPartChangeEvent, words } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 export const pointsOf = (value) => (value ?? '')
@@ -24,6 +24,7 @@ let HelixHeadlessMapRoute = class HelixHeadlessMapRoute extends HelixElement {
         this.layerKind = 'route';
         this.label = 'Route';
     }
+    static { this.words = 'helix-map-route'; }
     updated(changed) {
         super.updated(changed);
         this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'layer' }));
@@ -39,6 +40,7 @@ __decorate([
     property()
 ], HelixHeadlessMapRoute.prototype, "group", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessMapRoute.prototype, "label", void 0);
 __decorate([

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

@@ -28,6 +28,11 @@ export type MapTerrainEncoding = 'mapbox' | 'terrarium';
  * @event {HelixMapPartChangeEvent} helix-map-part-change - The tiles, how the ground is raised, or the layer's name or colors changed. Used by `connectMap`; pages do not need to listen for it.
  */
 export declare class HelixHeadlessMapTerrain extends HelixElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-map-terrain': { label: 'Gelände' } })`.
+     */
+    static words: string;
     /** The elevation provider's credit, shown in the frame's footer. Links in it stay links. */
     attribution?: string;
     /** More about the terrain. Read after the label in the frame's list. */

package/dist/map/terrain/map-terrain.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, HelixMapPartChangeEvent } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixMapPartChangeEvent, words } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessMapTerrain = class HelixHeadlessMapTerrain extends HelixElement {
@@ -17,6 +17,7 @@ let HelixHeadlessMapTerrain = class HelixHeadlessMapTerrain extends HelixElement
         this.label = 'Terrain';
         this.raised = false;
     }
+    static { this.words = 'helix-map-terrain'; }
     updated(changed) {
         super.updated(changed);
         this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'layer' }));
@@ -41,6 +42,7 @@ __decorate([
     property()
 ], HelixHeadlessMapTerrain.prototype, "group", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessMapTerrain.prototype, "label", void 0);
 __decorate([

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, deepContains, focusableElements, HelixElement, KeyboardNavigationController, MixinControllerOpen, PopoverController, tellDisclosure, } from '@fusion.dev/helix-core';
+import { anchorElement, customElement, deepContains, focusableElements, focusItemOf, HelixElement, KeyboardNavigationController, MixinControllerOpen, PopoverController, tellDisclosure, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { HandOver } from '../hand-over.js';
@@ -30,16 +30,9 @@ let HelixHeadlessMegamenu = class HelixHeadlessMegamenu extends MixinControllerO
         });
         this.keys = new KeyboardNavigationController(this, {
             items: () => !this.parentElement?.shadowRoot
-                ? HelixHeadlessMegamenu_1.bar.alongside(this).map((megamenu) => ({
-                    contains: (node) => {
-                        const control = megamenu.trigger;
-                        return node === control || control.contains(node);
-                    },
-                    disabled: false,
-                    focusItem: () => megamenu.trigger.focus(),
-                    select: () => { },
-                    selected: false,
-                }))
+                ? HelixHeadlessMegamenu_1.bar
+                    .alongside(this)
+                    .map((megamenu) => focusItemOf(megamenu.trigger))
                 : [],
             origin: 'focus',
             reserved: () => ['ArrowDown', 'ArrowUp'],

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

@@ -25,8 +25,8 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * onto your element after it upgrades causes a hydration mismatch.
  *
  * Group rows under a heading with `Menu.Section`, which is a `group` named by
- * its heading. Between runs of rows, a `<helix-divider announced>` is a
- * separator a screen reader announces.
+ * its heading. Between runs of rows, a `<helix-divider>` is a separator a
+ * screen reader announces.
  *
  * Keys: Enter, Space or Down Arrow on the trigger opens the menu on its first
  * row, and Up Arrow on its last. In the menu, Up and Down Arrow move between
@@ -80,6 +80,11 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * @cssstate start - A row on the current page has content in its leading column, so every row keeps that column.
  */
 export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-menu': { backLabel: 'Zurück' } })`.
+     */
+    static words: string;
     /**
      * The text of the row that returns from a submenu.
      */

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 { AriaForwardController, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, HelixElement, inlineStep, KeyboardNavigationController, MixinCollection, MixinControllerOpen, PopoverController, scrollItemIntoView, slottedWords, tellDisclosure, typeaheadBy, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, HelixElement, inlineStep, KeyboardNavigationController, MixinCollection, MixinControllerOpen, PopoverController, scrollItemIntoView, slottedWords, tellDisclosure, typeaheadBy, words, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -132,6 +132,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             }
         };
     }
+    static { this.words = 'helix-menu'; }
     tellTrigger() {
         const slot = this.renderRoot?.querySelector('slot[name="trigger"]');
         tellDisclosure(slot?.assignedElements({ flatten: true })[0], this.open, 'menu');
@@ -302,6 +303,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     }
 };
 __decorate([
+    words,
     property({ attribute: 'back-label' })
 ], HelixHeadlessMenu.prototype, "backLabel", void 0);
 __decorate([

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

@@ -59,6 +59,11 @@ export type MeterBand = 'fair' | 'good' | 'poor';
  * @cssstate under - The value is below `min`.
  */
 export declare class HelixHeadlessMeter extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-meter': { label: 'Messwert' } })`.
+     */
+    static words: string;
     /**
      * Sets the band directly, for a rule that `low`, `high`, and `optimum` cannot
      * express.
@@ -93,7 +98,9 @@ export declare class HelixHeadlessMeter extends HelixElement {
      * The words each band is said with under `live`, by its name, written as
      * JSON in the attribute: `band-labels='{"poor":"Almost full"}'`.
      *
-     * A band left out keeps its default: "Good", "Fair" or "Poor".
+     * A band left out keeps its default: "Good", "Fair" or "Poor". Reading the
+     * property gives every band's words, yours over the registry's over the
+     * English.
      */
     bandLabels: Partial<Record<MeterBand, string>>;
     /**
@@ -134,9 +141,15 @@ export declare class HelixHeadlessMeter extends HelixElement {
      */
     live: boolean;
     /**
-     * The locale the percentage is written in, such as `fr` for `72 %`.
+     * What `live` says as the reading moves into another band. `{reading}` is
+     * the reading as it is shown, and `{band}` the band's words from
+     * `band-labels`.
+     */
+    liveLabel: string;
+    /**
+     * The locale the words and the percentage are in, such as `fr` for `72 %`.
      *
-     * Absent uses the runtime's own.
+     * Absent reads the nearest `lang`, then the runtime's own.
      */
     locale: string;
     /**