@fusion.dev/helix-headless 0.148.0 → 0.149.0

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

@@ -26,6 +26,11 @@ import type { MapTerrainEncoding } from '../terrain/map-terrain.js';
  * @event {HelixMapPartChangeEvent} helix-map-part-change - The tiles, the unit, or the layer's name or color changed. Used by `connectMap`; pages do not need to listen for it.
  */
 export declare class HelixHeadlessMapContours extends HelixElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-map-contours': { label: 'Höhenlinien' } })`.
+     */
+    static words: string;
     /** The elevation provider's credit, shown in the frame's footer. Links in it stay links. */
     attribution?: string;
     /** More about the lines. Read after the label in the frame's list. */

package/dist/map/contours/map-contours.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 HelixHeadlessMapContours = class HelixHeadlessMapContours extends HelixElement {
@@ -16,6 +16,7 @@ let HelixHeadlessMapContours = class HelixHeadlessMapContours extends HelixEleme
         this.label = 'Contour lines';
         this.unit = 'meters';
     }
+    static { this.words = 'helix-map-contours'; }
     updated(changed) {
         super.updated(changed);
         this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'layer' }));
@@ -37,6 +38,7 @@ __decorate([
     property()
 ], HelixHeadlessMapContours.prototype, "group", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessMapContours.prototype, "label", void 0);
 __decorate([

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

@@ -22,6 +22,11 @@ import { nothing, type PropertyValues } from 'lit';
  * @event {HelixMapPartChangeEvent} helix-map-part-change - The layer's name or color changed. Used by `connectMap`; pages do not need to listen for it.
  */
 export declare class HelixHeadlessMapLandcover extends HelixElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-map-landcover': { label: 'Bodenbedeckung' } })`.
+     */
+    static words: string;
     /** More about the land cover. Read after the label in the frame's list. */
     description?: string;
     /**

package/dist/map/landcover/map-landcover.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 HelixHeadlessMapLandcover = class HelixHeadlessMapLandcover extends HelixElement {
@@ -14,6 +14,7 @@ let HelixHeadlessMapLandcover = class HelixHeadlessMapLandcover extends HelixEle
         this.layerKind = 'landcover';
         this.label = 'Land cover';
     }
+    static { this.words = 'helix-map-landcover'; }
     updated(changed) {
         super.updated(changed);
         this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'layer' }));
@@ -29,6 +30,7 @@ __decorate([
     property()
 ], HelixHeadlessMapLandcover.prototype, "group", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessMapLandcover.prototype, "label", void 0);
 HelixHeadlessMapLandcover = __decorate([

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

@@ -41,6 +41,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @cssstate start - Shows its name before the point, because there was no room after it.
  */
 export declare class HelixHeadlessMapMarker extends HelixElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-map-marker': { passedLabel: '{label}, besucht' } })`.
+     */
+    static words: string;
     /**
      * @internal Whether the map's one tab stop is on this marker, written by the
      * frame. Not a consumer's to set: the frame keeps exactly one.
@@ -105,7 +110,12 @@ export declare class HelixHeadlessMapMarker extends HelixElement {
      * drawn muted, and its name is followed by `passed-label`.
      */
     passed: boolean;
-    /** The word added after a passed place's name. Defaults to "passed". */
+    /**
+     * What a passed place is called. `{label}` is its name.
+     *
+     * A word without `{label}`, such as `visited`, is written after the name
+     * with a comma, as before the sentence held the name.
+     */
     passedLabel: string;
     /** Whether focus is on this marker as it is gathered, and so has to move on. */
     private handingOver;
@@ -125,6 +135,11 @@ export declare class HelixHeadlessMapMarker extends HelixElement {
     extent(): number;
     /** Focuses the marker's button. The host draws no box of its own. */
     focus(options?: FocusOptions): void;
+    /**
+     * A passed place's name in `passed-label`, or followed by a page's word
+     * that does not hold `{label}`.
+     */
+    private passedSaid;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/map/marker/map-marker.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, PlacementController, } from '@fusion.dev/helix-core';
+import { customElement, formatNumber, formatWords, HelixElement, HelixMapPartChangeEvent, PlacementController, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 const BOOKKEEPING = new Set([
@@ -28,9 +28,10 @@ let HelixHeadlessMapMarker = class HelixHeadlessMapMarker extends HelixElement {
         this.placement = new PlacementController(this);
         this.name = '';
         this.passed = false;
-        this.passedLabel = 'passed';
+        this.passedLabel = '{label}, passed';
         this.handingOver = false;
     }
+    static { this.words = 'helix-map-marker'; }
     place(properties) {
         this.placement.set(properties);
         this.toggleState('placed', this.placement.get('--_map-marker-x') !== undefined);
@@ -75,12 +76,18 @@ let HelixHeadlessMapMarker = class HelixHeadlessMapMarker extends HelixElement {
     focus(options) {
         this.partNamed('marker')?.focus(options);
     }
+    passedSaid(name) {
+        return this.passedLabel.includes('{label}')
+            ? formatWords(this, 'passedLabel', { label: name })
+            : html `${name}, ${this.passedLabel}`;
+    }
     render() {
         const cluster = this.gathered.length > 1;
-        const lang = cluster ? this.closest('[lang]')?.getAttribute('lang') || undefined : undefined;
+        const locale = cluster ? wordsLocale(this) : '';
+        const name = this.label ?? '';
         return html `<span part="marker" role="button" tabindex=${this.current ? '0' : '-1'} ?hidden=${this.gatheredBy !== undefined}>
-      <span part="point" aria-hidden="true">${cluster ? new Intl.NumberFormat(lang).format(this.gathered.length) : nothing}<slot name="icon" ?hidden=${cluster} @slotchange=${() => this.requestUpdate()}></slot></span>
-      <span part="label">${cluster ? new Intl.ListFormat(lang, { type: 'conjunction' }).format(this.gathered) : this.passed ? `${this.label ?? ''}, ${this.passedLabel}` : (this.label ?? '')}</span>
+      <span part="point" aria-hidden="true">${cluster ? formatNumber(this.gathered.length, locale) : nothing}<slot name="icon" ?hidden=${cluster} @slotchange=${() => this.requestUpdate()}></slot></span>
+      <span part="label">${cluster ? new Intl.ListFormat(locale, { type: 'conjunction' }).format(this.gathered) : this.passed ? this.passedSaid(name) : name}</span>
     </span>`;
     }
 };
@@ -118,6 +125,7 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessMapMarker.prototype, "passed", void 0);
 __decorate([
+    words,
     property({ attribute: 'passed-label' })
 ], HelixHeadlessMapMarker.prototype, "passedLabel", void 0);
 HelixHeadlessMapMarker = __decorate([

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

@@ -71,6 +71,11 @@ export interface MapPointsCollection {
  * @csspart places - The group of buttons, named by the layer's label.
  */
 export declare class HelixHeadlessMapPoints extends HelixElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-map-points': { label: 'Orte' } })`.
+     */
+    static words: string;
     /** Combines nearby points into counts. Pressing a count zooms in to it. */
     cluster: boolean;
     /**

package/dist/map/points/map-points.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, HelixMapPartChangeEvent, isRtl, } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixActivateEvent, HelixElement, HelixMapClusterEvent, HelixMapPartChangeEvent, isRtl, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -12,7 +12,7 @@ let HelixHeadlessMapPoints = class HelixHeadlessMapPoints extends HelixElement {
     constructor() {
         super(...arguments);
         this.cluster = false;
-        this.countLabel = '{count} places';
+        this.countLabel = '{count, plural, one {# place} other {# places}}';
         this.isMapLayer = true;
         this.label = 'Places';
         this.layerKind = 'points';
@@ -64,10 +64,10 @@ let HelixHeadlessMapPoints = class HelixHeadlessMapPoints extends HelixElement {
             }
         };
     }
+    static { this.words = 'helix-map-points'; }
     nameOf(one) {
         if (one.count !== undefined) {
-            const lang = this.closest('[lang]')?.getAttribute('lang') || undefined;
-            return this.countLabel.replace('{count}', new Intl.NumberFormat(lang).format(one.count));
+            return formatWords(this, 'countLabel', { count: one.count });
         }
         return one.label || one.value || '';
     }
@@ -130,6 +130,7 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessMapPoints.prototype, "cluster", void 0);
 __decorate([
+    words,
     property({ attribute: 'count-label' })
 ], HelixHeadlessMapPoints.prototype, "countLabel", void 0);
 __decorate([
@@ -142,6 +143,7 @@ __decorate([
     property()
 ], HelixHeadlessMapPoints.prototype, "group", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessMapPoints.prototype, "label", void 0);
 __decorate([

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

@@ -32,6 +32,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @cssstate placed - Placed on the map by the connector.
  */
 export declare class HelixHeadlessMapPosition extends HelixElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-map-position': { label: 'Aktueller Standort' } })`.
+     */
+    static words: string;
     /** How accurate the position is, in meters. Drawn as a ring with this radius. */
     accuracy?: number;
     /**

package/dist/map/position/map-position.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, PlacementController, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixMapPartChangeEvent, PlacementController, words, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 let HelixHeadlessMapPosition = class HelixHeadlessMapPosition extends HelixElement {
@@ -17,6 +17,7 @@ let HelixHeadlessMapPosition = class HelixHeadlessMapPosition extends HelixEleme
         this.spoken = '';
         this.spokenAt = Number.NEGATIVE_INFINITY;
     }
+    static { this.words = 'helix-map-position'; }
     place(properties) {
         this.placement.set(properties);
         this.toggleState('placed', this.placement.get('--_map-position-x') !== undefined);
@@ -81,6 +82,7 @@ __decorate([
     property({ reflect: true, type: Number })
 ], HelixHeadlessMapPosition.prototype, "heading", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessMapPosition.prototype, "label", void 0);
 __decorate([

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

@@ -29,6 +29,11 @@ import { nothing, type PropertyValues } from 'lit';
  * @event {HelixMapPartChangeEvent} helix-map-part-change - The tiles, the frame shown, the opacity, or where the tiles are drawn changed. Used by `connectMap`; pages do not need to listen for it.
  */
 export declare class HelixHeadlessMapRaster extends HelixElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-map-raster': { label: 'Überlagerung' } })`.
+     */
+    static words: string;
     /** The tile provider's credit, shown in the frame's footer. Links in it stay links. */
     attribution?: string;
     /** More about the layer. Read after the label in the frame's list. */

package/dist/map/raster/map-raster.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';
 const framesConverter = {
@@ -22,6 +22,7 @@ let HelixHeadlessMapRaster = class HelixHeadlessMapRaster extends HelixElement {
         this.opacity = 0.7;
         this.playing = false;
     }
+    static { this.words = 'helix-map-raster'; }
     connectedCallback() {
         super.connectedCallback();
         if (this.hasUpdated) {
@@ -83,6 +84,7 @@ __decorate([
     property({ type: Number })
 ], HelixHeadlessMapRaster.prototype, "interval", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessMapRaster.prototype, "label", void 0);
 __decorate([

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

@@ -1,4 +1,4 @@
-import { HelixElement, KeyboardNavigationController, type ViewportControlsPlacement, type ViewportGestureLabels, type ViewportPanDetail, type ViewportZoomDetail } from '@fusion.dev/helix-core';
+import { HelixElement, KeyboardNavigationController, type ViewportControlsPlacement, type ViewportPanDetail, type ViewportZoomDetail } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * What `ViewportControlsPlacement` is called for a map.
@@ -142,6 +142,16 @@ declare const HelixHeadlessMap_base: (new (...args: any[]) => import("@fusion.de
  * @cssstate using - A map with `gestures="activate"` has been pressed and has the gestures.
  */
 export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-map': { layersLabel: 'Kartenebenen' } })`.
+     */
+    static words: string;
+    /**
+     * The hint shown when the map, waiting to be pressed with
+     * `gestures="activate"`, is scrolled or swiped over.
+     */
+    activateHintLabel: string;
     /**
      * The map's rotation, in degrees clockwise from north. `connectMap` keeps it
      * current, and the Face north button's needle turns with it.
@@ -152,8 +162,15 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
      * the map zooms in, and pressing one zooms in to its places.
      */
     cluster: boolean;
+    /**
+     * The name of the group of controls, read by screen readers, which names
+     * what the controls drive rather than the mechanism.
+     */
+    controlsLabel: string;
     /** The Face north button's label. */
     faceNorthLabel: string;
+    /** The map's name where `label` is empty and the host has no `aria-label`. */
+    fallbackLabel: string;
     /** What screen readers hear when the map is tilted back to looking straight down. */
     flatLabel: string;
     /** The Hybrid map type's name. */
@@ -207,18 +224,30 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
     standardLabel: string;
     /**
      * What screen readers hear when the map is tilted. `{degrees}` is the tilt
-     * from looking straight down.
+     * from looking straight down, written in the locale, and each language
+     * writes the forms it has.
      */
     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.
+     * top of the map faces, clockwise from north, written in the locale, and
+     * each language writes the forms it has.
      */
     turnedLabel: string;
+    /** The hint shown when one finger swipes over the map with `gestures="cooperative"`. */
+    twoFingerHintLabel: string;
+    /** The line shown while the map, with `gestures="activate"`, has the gestures. */
+    usingLabel: string;
     /**
-     * What screen readers hear after a zoom. `{level}` is the zoom level.
+     * The hint shown when the wheel scrolls past the map with
+     * `gestures="cooperative"`. `{key}` is ⌘ on a Mac and Ctrl elsewhere.
+     */
+    wheelHintLabel: string;
+    /**
+     * What screen readers hear after a zoom. `{level}` is the zoom level,
+     * written in the locale.
      */
     zoomedLabel: string;
     /**
@@ -376,8 +405,6 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
      */
     private readonly handleMarkerKeydown;
     private readonly handleMarkerKeyup;
-    /** What the map says about its gestures where the page does not say it. */
-    protected get restingGestureLabels(): ViewportGestureLabels;
     /** Which gestures the renderer takes, which `connectMap` hears from here. */
     protected gesturesChanged(): void;
     /** A marker added or taken away is a walk of a different length. */
@@ -452,14 +479,6 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
     /** The events this family names, the surface naming none of its own. */
     protected panEvent(detail: ViewportPanDetail): Event;
     protected zoomEvent(detail: ViewportZoomDetail): Event;
-    /**
-     * What the group of controls is called.
-     *
-     * The surface is shared and this is the half that is a map: a reader meeting
-     * the group hears what it drives rather than "view controls", which names the
-     * mechanism.
-     */
-    protected get restingControlsLabel(): string;
     protected willUpdate(changed: PropertyValues): void;
     /**
      * The routes and areas, named, for a reader who cannot see the map.

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, focusItemOf, 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;
@@ -150,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;
@@ -176,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,
@@ -190,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) {
@@ -305,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' }));
     }
@@ -464,6 +461,7 @@ 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)}>
@@ -485,7 +483,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
               <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()}>
+      <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" />
@@ -515,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"
@@ -588,9 +586,6 @@ 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 });
@@ -613,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}
@@ -640,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);
@@ -647,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([
@@ -668,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.