@fusion.dev/helix-core 0.103.3 → 0.104.0

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { AriaForwardController, type AriaForwardOptions, } from './controllers/aria-forward-controller/aria-forward-controller.js';
+export { ArrivalController, type ArrivalOptions, } from './controllers/arrival-controller/arrival-controller.js';
 export { ChartPointerController, type ChartPointerHost, } from './controllers/chart-pointer-controller/chart-pointer-controller.js';
 export { CommandController, type CommandOptions, HelixFallbackCommandEvent, supportsInvokers, } from './controllers/command-controller/command-controller.js';
 export { CopyController, type CopyOptions, } from './controllers/copy-controller/copy-controller.js';
@@ -19,7 +20,7 @@ export { SourceController, type SourceHost, } from './controllers/source-control
 export { type TokenColor, TokenColorController, } from './controllers/token-color-controller/token-color-controller.js';
 export { type Rendered, VirtualizeController, type VirtualizeOptions, type Window as VirtualizeWindow, } from './controllers/virtualize-controller/virtualize-controller.js';
 export { eventsForTag, registerElementEvents } from './events/element-events.js';
-export { type CaretDetail, type ChangeDetail, type CompleteDetail, type ConsoleDetail, type CopyDetail, type CreateDetail, type DismissDetail, type FacetDetail, type FilterDetail, HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCaretEvent, HelixCompleteEvent, HelixConsoleEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixFacetEvent, HelixFilterEvent, HelixHistoryEvent, HelixMapPanEvent, HelixMapZoomEvent, HelixNavigateEvent, HelixNextEvent, HelixPreviousEvent, HelixReadEvent, HelixReorderEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixTourAskEvent, type MapPanDetail, type MapZoomDetail, type NavigateDetail, type OpenDetail, type ReadDetail, type ResizeDetail, type ScrolledDetail, type SelectDetail, type SendDetail, type ShortcutDetail, type SkipDetail, type SortDetail, type ToggleDetail, type ViewportPanDetail, type ViewportZoomDetail, } from './events/events.js';
+export { type CanvasView, type CaretDetail, type ChangeDetail, type CompleteDetail, type ConnectDetail, type ConsoleDetail, type CopyDetail, type CreateDetail, type DismissDetail, type FacetDetail, type FilterDetail, HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixFacetEvent, HelixFilterEvent, HelixHistoryEvent, HelixMapPanEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPreviousEvent, HelixReadEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixTourAskEvent, type MapPanDetail, type MapZoomDetail, type MoveDetail, type NavigateDetail, type OpenDetail, type ReadDetail, type ReconnectDetail, type RelabelDetail, type RemoveDetail, type ResizeDetail, type ScrolledDetail, type SelectDetail, type SendDetail, type ShortcutDetail, type SkipDetail, type SortDetail, type ToggleDetail, type ViewportPanDetail, type ViewportZoomDetail, } from './events/events.js';
 export { HelixElement, whenHydrated } from './helix-element/helix-element.js';
 export { HelixFormElement } from './helix-form-element/helix-form-element.js';
 export { MixinChartSource, type MixinChartSourceInterface, PALETTE, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesNames, } from './mixins/mixin-chart-source/mixin-chart-source.js';
@@ -45,12 +46,14 @@ export { type DrawIconOptions, drawIcon } from './utils/draw-icon/draw-icon.js';
 export { CHART_PLOT, drawTooltip } from './utils/draw-tooltip/draw-tooltip.js';
 export { elapsedTime } from './utils/elapsed-time/elapsed-time.js';
 export { type ElementByIdOptions, elementById, searchableById, } from './utils/element-by-id/element-by-id.js';
+export { fillTemplate } from './utils/fill-template/fill-template.js';
 export { deepActiveElement, deepContains, focusableElements, } from './utils/focusable-elements/focusable-elements.js';
 export { formatNumbers } from './utils/format-numbers/format-numbers.js';
 export { type HostAria, hostAria } from './utils/host-aria/host-aria.js';
 export { type DisableableItem, forgetDisabled, inheritDisabled, } from './utils/inherit-disabled/inherit-disabled.js';
 export { inlineStep } from './utils/inline-step/inline-step.js';
 export { isRtl } from './utils/is-rtl/is-rtl.js';
+export { keyClaimed } from './utils/key-claimed/key-claimed.js';
 export { type Curve, linePath, type Point } from './utils/line-path/line-path.js';
 export { markRegion, type RegionOptions } from './utils/mark-region/mark-region.js';
 export { copiesOf, type MediaCopy, sameCopies, } from './utils/media-copy/media-copy.js';
@@ -58,6 +61,7 @@ export { onUnlessFalse } from './utils/on-unless-false/on-unless-false.js';
 export { type ColorBytes, readColor } from './utils/read-color/read-color.js';
 export { type Row, type RowCell, readRows, readSeries, type Series, type SeriesPoint, } from './utils/read-series/read-series.js';
 export { type Relative, relativeTime, } from './utils/relative-time/relative-time.js';
+export { reportValues } from './utils/report-values/report-values.js';
 export { type ChangeRequestOptions, requestChange, } from './utils/request-change/request-change.js';
 export { type ActivatableItem, resolveActiveItem, } from './utils/resolve-active-item/resolve-active-item.js';
 export { holdCaret, restoreValue } from './utils/restore-value/restore-value.js';
@@ -65,6 +69,7 @@ export { extent, linear, type Scale } from './utils/scale/scale.js';
 export { ticks } from './utils/scale/ticks.js';
 export { type ScrollItemOptions, scrollItemIntoView, } from './utils/scroll-item-into-view/scroll-item-into-view.js';
 export { slotFilled } from './utils/slot-filled/slot-filled.js';
+export { slottedWords } from './utils/slotted-words/slotted-words.js';
 export { splitValues } from './utils/split-values/split-values.js';
 export { tellDisclosure } from './utils/tell-disclosure/tell-disclosure.js';
 export { subscribe } from './utils/ticker/ticker.js';

package/dist/index.js

@@ -1,4 +1,5 @@
 export { AriaForwardController, } from './controllers/aria-forward-controller/aria-forward-controller.js';
+export { ArrivalController, } from './controllers/arrival-controller/arrival-controller.js';
 export { ChartPointerController, } from './controllers/chart-pointer-controller/chart-pointer-controller.js';
 export { CommandController, HelixFallbackCommandEvent, supportsInvokers, } from './controllers/command-controller/command-controller.js';
 export { CopyController, } from './controllers/copy-controller/copy-controller.js';
@@ -19,7 +20,7 @@ export { SourceController, } from './controllers/source-controller/source-contro
 export { TokenColorController, } from './controllers/token-color-controller/token-color-controller.js';
 export { VirtualizeController, } from './controllers/virtualize-controller/virtualize-controller.js';
 export { eventsForTag, registerElementEvents } from './events/element-events.js';
-export { HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCaretEvent, HelixCompleteEvent, HelixConsoleEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixFacetEvent, HelixFilterEvent, HelixHistoryEvent, HelixMapPanEvent, HelixMapZoomEvent, HelixNavigateEvent, HelixNextEvent, HelixPreviousEvent, HelixReadEvent, HelixReorderEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixTourAskEvent, } from './events/events.js';
+export { HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixFacetEvent, HelixFilterEvent, HelixHistoryEvent, HelixMapPanEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPreviousEvent, HelixReadEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixTourAskEvent, } from './events/events.js';
 export { HelixElement, whenHydrated } from './helix-element/helix-element.js';
 export { HelixFormElement } from './helix-form-element/helix-form-element.js';
 export { MixinChartSource, PALETTE, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesNames, } from './mixins/mixin-chart-source/mixin-chart-source.js';
@@ -45,12 +46,14 @@ export { drawIcon } from './utils/draw-icon/draw-icon.js';
 export { CHART_PLOT, drawTooltip } from './utils/draw-tooltip/draw-tooltip.js';
 export { elapsedTime } from './utils/elapsed-time/elapsed-time.js';
 export { elementById, searchableById, } from './utils/element-by-id/element-by-id.js';
+export { fillTemplate } from './utils/fill-template/fill-template.js';
 export { deepActiveElement, deepContains, focusableElements, } from './utils/focusable-elements/focusable-elements.js';
 export { formatNumbers } from './utils/format-numbers/format-numbers.js';
 export { hostAria } from './utils/host-aria/host-aria.js';
 export { forgetDisabled, inheritDisabled, } from './utils/inherit-disabled/inherit-disabled.js';
 export { inlineStep } from './utils/inline-step/inline-step.js';
 export { isRtl } from './utils/is-rtl/is-rtl.js';
+export { keyClaimed } from './utils/key-claimed/key-claimed.js';
 export { linePath } from './utils/line-path/line-path.js';
 export { markRegion } from './utils/mark-region/mark-region.js';
 export { copiesOf, sameCopies, } from './utils/media-copy/media-copy.js';
@@ -58,6 +61,7 @@ export { onUnlessFalse } from './utils/on-unless-false/on-unless-false.js';
 export { readColor } from './utils/read-color/read-color.js';
 export { readRows, readSeries, } from './utils/read-series/read-series.js';
 export { relativeTime, } from './utils/relative-time/relative-time.js';
+export { reportValues } from './utils/report-values/report-values.js';
 export { requestChange, } from './utils/request-change/request-change.js';
 export { resolveActiveItem, } from './utils/resolve-active-item/resolve-active-item.js';
 export { holdCaret, restoreValue } from './utils/restore-value/restore-value.js';
@@ -65,6 +69,7 @@ export { extent, linear } from './utils/scale/scale.js';
 export { ticks } from './utils/scale/ticks.js';
 export { scrollItemIntoView, } from './utils/scroll-item-into-view/scroll-item-into-view.js';
 export { slotFilled } from './utils/slot-filled/slot-filled.js';
+export { slottedWords } from './utils/slotted-words/slotted-words.js';
 export { splitValues } from './utils/split-values/split-values.js';
 export { tellDisclosure } from './utils/tell-disclosure/tell-disclosure.js';
 export { subscribe } from './utils/ticker/ticker.js';

package/dist/mixins/mixin-collection/mixin-collection.d.ts

@@ -17,6 +17,12 @@ export declare class CollectionElement {
      * Rendered by the component wherever its rows would be.
      */
     protected renderStatus(hasContent: boolean): TemplateResult | typeof nothing;
+    /**
+     * The same words for a screen reader, in a region that is always there.
+     *
+     * Rendered by the component outside its rows, where a status is allowed.
+     */
+    protected renderLive(hasContent: boolean): TemplateResult;
     /** Binds to a rows slot's `slotchange`, and answers `hasRows` from it. */
     protected countRows(event: Event): void;
     /** What the rows slot is given, read from the host so a first render has it. */

package/dist/mixins/mixin-collection/mixin-collection.js

@@ -43,13 +43,17 @@ export const MixinCollection = (Base) => {
         }
         renderStatus(hasContent) {
             if (this.loading) {
-                return html `<p part="loading" role="status">${this.loadingText}</p>`;
+                return html `<p part="loading">${this.loadingText}</p>`;
             }
             if (hasContent) {
                 return nothing;
             }
             return html `<p part="empty">${this.emptyText}</p>`;
         }
+        renderLive(hasContent) {
+            const said = this.loading ? this.loadingText : hasContent ? '' : this.emptyText;
+            return html `<span part="live" role="status">${said}</span>`;
+        }
     }
     __decorate([
         property({ attribute: 'empty-text' })

package/dist/mixins/mixin-controller-open/mixin-controller-open.js

@@ -57,11 +57,11 @@ export const MixinControllerOpen = (Base) => {
             return this.requestOpen(!this.open);
         }
     }
-    __decorate([
-        property({ type: Boolean })
-    ], OpenElement.prototype, "open", null);
     __decorate([
         property({ attribute: 'default-open', type: Boolean })
     ], OpenElement.prototype, "defaultOpen", void 0);
+    __decorate([
+        property({ type: Boolean })
+    ], OpenElement.prototype, "open", null);
     return OpenElement;
 };

package/dist/mixins/mixin-controller-value/mixin-controller-value.d.ts

@@ -40,7 +40,7 @@ export declare class MixinControllerValueInterface {
     /** Returns the control to the value its markup declared. */
     formResetCallback(): void;
     /** Restores the value when the browser brings a form back. */
-    formStateRestoreCallback(state: string | null): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
 }
 /**
  * Grafts `value`, `defaultValue`, and the two callbacks that answer a form.

package/dist/mixins/mixin-controller-value/mixin-controller-value.js

@@ -49,13 +49,14 @@ export const MixinControllerValue = (Base) => {
             return applied;
         }
         formResetCallback() {
+            super.formResetCallback();
             const previous = this.value;
             this.valueState = undefined;
             this.requestUpdate('value', previous);
         }
         formStateRestoreCallback(state) {
             const previous = this.value;
-            this.valueState = state ?? undefined;
+            this.valueState = typeof state === 'string' ? state : undefined;
             this.requestUpdate('value', previous);
         }
     }

package/dist/mixins/mixin-field/mixin-field.d.ts

@@ -16,6 +16,10 @@ export declare class MixinFieldInterface {
      * control being the family's. See the note on the class member.
      */
     protected controlId: string;
+    /** The id the label carries, for an element in the template to be named by. */
+    protected labelId: string;
+    /** Whether a label is drawn at all, in either shape. */
+    protected get labeled(): boolean;
     /**
      * Help under the control, shown while there is nothing wrong.
      *
@@ -78,8 +82,15 @@ export declare class MixinFieldInterface {
      * point its bubble at.
      */
     protected reportRequired(empty: boolean, message: string, anchor: string): void;
+    /**
+     * Hands on the verdict of a native control this renders, with the page's own
+     * words where it gave some.
+     */
+    protected copyValidity(control: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): void;
     /** The message actually shown: the consumer's, or the platform's, or none. */
     readonly resolvedFeedback: string;
+    /** What a reader is told when the field is required and empty, where the page says. */
+    valueMissingMessage: string | undefined;
 }
 /**
  * Grafts a label, help text, and a validation message onto a control.

package/dist/mixins/mixin-field/mixin-field.js

@@ -14,6 +14,7 @@ export const MixinField = (Base) => {
         constructor() {
             super(...arguments);
             this.controlId = 'control';
+            this.labelId = 'label';
             this.feedback = '';
             this.hint = '';
             this.label = '';
@@ -21,6 +22,9 @@ export const MixinField = (Base) => {
             this.touched = false;
             this.shownFeedback = '';
         }
+        get labeled() {
+            return this.label !== '' || Boolean(this.getAttribute('aria-label'));
+        }
         get validates() {
             return this.constructor.formAssociated === true;
         }
@@ -44,7 +48,7 @@ export const MixinField = (Base) => {
             if (this.label === '' && !hidden) {
                 return nothing;
             }
-            return html `<span part="label" ?data-hidden=${hidden !== null}
+            return html `<span part="label" id=${this.labelId} ?data-hidden=${hidden !== null}
         ><slot name="label">${this.label || hidden}</slot></span
       >`;
         }
@@ -53,7 +57,11 @@ export const MixinField = (Base) => {
             if (this.label === '' && !hidden) {
                 return nothing;
             }
-            return html `<label part="label" for=${this.controlId} ?data-hidden=${hidden !== null}
+            return html `<label
+        part="label"
+        for=${this.controlId}
+        id=${this.labelId}
+        ?data-hidden=${hidden !== null}
         ><slot name="label">${this.label || hidden}</slot></label
       >`;
         }
@@ -90,19 +98,30 @@ export const MixinField = (Base) => {
         }
         reportRequired(empty, message, anchor) {
             if (this.required && empty) {
-                this.internals.setValidity({ valueMissing: true }, message, this.partNamed(anchor) ?? undefined);
+                this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage || message, this.partNamed(anchor) ?? undefined);
             }
             else {
                 this.internals.setValidity({});
             }
             this.refreshFeedback();
         }
+        copyValidity(control) {
+            const message = control.validity.valueMissing && this.valueMissingMessage
+                ? this.valueMissingMessage
+                : control.validationMessage;
+            this.internals.setValidity(control.validity, message, control);
+        }
         willUpdate(changed) {
             super.willUpdate(changed);
             this.shownFeedback = this.resolvedFeedback;
             this.toggleState('invalid', this.shownFeedback !== '');
             this.internals.ariaInvalid = this.shownFeedback === '' ? null : 'true';
         }
+        formResetCallback() {
+            ;
+            Base.prototype.formResetCallback?.call(this);
+            this.touched = false;
+        }
         firstUpdated(changed) {
             super.firstUpdated(changed);
             const touch = () => {
@@ -124,6 +143,9 @@ export const MixinField = (Base) => {
     __decorate([
         property({ reflect: true, type: Boolean })
     ], FieldElement.prototype, "required", void 0);
+    __decorate([
+        property({ attribute: 'value-missing-message' })
+    ], FieldElement.prototype, "valueMissingMessage", void 0);
     __decorate([
         state()
     ], FieldElement.prototype, "touched", void 0);

package/dist/mixins/mixin-picker-field/mixin-picker-field.d.ts

@@ -17,6 +17,8 @@ type PickerBase = HelixFormElement & MixinControllerOpenInterface & MixinControl
  * to this interface keeps the internals private and the build working.
  */
 export declare class MixinPickerFieldInterface {
+    /** What a reader is told when the field holds something the picker cannot read. */
+    badInputMessage: string | undefined;
     /**
      * What the label points at and focus lands on.
      *
@@ -25,6 +27,12 @@ export declare class MixinPickerFieldInterface {
      * can name.
      */
     protected get anchor(): HTMLElement | null;
+    /**
+     * Each answer the field holds, where it holds several, or `undefined` where
+     * its value is one answer. Several are sent one entry each; see
+     * `reportValues`.
+     */
+    protected get answers(): readonly string[] | undefined;
     /** The text input, or `null` where there is no DOM to hold one. */
     protected get control(): HTMLInputElement | null;
     /**

package/dist/mixins/mixin-picker-field/mixin-picker-field.js

@@ -1,4 +1,12 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { property } from 'lit/decorators.js';
 import { PopoverController } from '../../controllers/popover-controller/popover-controller.js';
+import { reportValues } from '../../utils/report-values/report-values.js';
 export const MixinPickerField = (Base) => {
     class PickerFieldElement extends Base {
         constructor() {
@@ -36,6 +44,9 @@ export const MixinPickerField = (Base) => {
         get display() {
             return this.value;
         }
+        get answers() {
+            return undefined;
+        }
         validate() {
             return '';
         }
@@ -47,14 +58,20 @@ export const MixinPickerField = (Base) => {
             this.sync();
         }
         sync() {
-            this.internals.setFormValue(this.value);
+            const answers = this.answers;
+            if (answers === undefined) {
+                this.internals.setFormValue(this.value);
+            }
+            else {
+                reportValues(this.internals, this.name, answers);
+            }
             const control = this.control;
             if (!control) {
                 return;
             }
             const message = this.validate();
             if (message === '') {
-                this.internals.setValidity(control.validity, control.validationMessage, control);
+                this.copyValidity(control);
             }
             else {
                 this.internals.setValidity({ badInput: true }, message, control);
@@ -78,5 +95,8 @@ export const MixinPickerField = (Base) => {
             this.sync();
         }
     }
+    __decorate([
+        property({ attribute: 'bad-input-message' })
+    ], PickerFieldElement.prototype, "badInputMessage", void 0);
     return PickerFieldElement;
 };

package/dist/mixins/mixin-tokens/mixin-tokens.js

@@ -37,7 +37,6 @@ export const MixinTokens = (Base) => {
             return html `<button
         part="rest"
         type="button"
-        aria-expanded=${this.expanded ? 'true' : 'false'}
         aria-label=${this.expanded ? this.collapseLabel : this.expandLabel}
         @click=${this.toggleExpanded}
         >${this.expanded ? drawIcon(caretUp) : `+${over}`}</button

package/dist/mixins/mixin-viewport/mixin-viewport.d.ts

@@ -1,7 +1,7 @@
 import { type LitElement, nothing, type TemplateResult } from 'lit';
 import { FullscreenController } from '../../controllers/fullscreen-controller/fullscreen-controller.js';
 import { IdleController } from '../../controllers/idle-controller/idle-controller.js';
-import { type ViewportPanDetail, type ViewportZoomDetail } from '../../events/events.js';
+import type { ViewportPanDetail, ViewportZoomDetail } from '../../events/events.js';
 type Constructor<T> = new (...args: any[]) => T;
 /** Which way a press or a key asked the surface to go. */
 export type ViewportWay = 'up' | 'down' | 'start' | 'end';
@@ -19,10 +19,16 @@ export declare class ViewportElement {
     fullscreenLabel: string;
     /** How long the reader may be still before the chrome hides, in milliseconds. */
     idleDelay: number;
-    /** What one pan control is called, with `{way}` filled in. */
-    panLabel: string;
+    /** What the control that pans down is called. */
+    panDownLabel: string;
+    /** What the control that pans left is called. */
+    panLeftLabel: string;
+    /** What the control that pans right is called. */
+    panRightLabel: string;
     /** How far one press moves the view, as a fraction of what is on screen. */
     panStep: number;
+    /** What the control that pans up is called. */
+    panUpLabel: string;
     /** What the control that zooms in is called. */
     zoomInLabel: string;
     /** What the control that zooms out is called. */
@@ -43,14 +49,20 @@ export declare class ViewportElement {
     protected readonly fullscreen: FullscreenController;
     /** The key relay, bound by the family's own frame. */
     protected handleKeydown: (event: KeyboardEvent) => void;
-    /** What the group of controls is called, for a family that is not a map. */
-    protected get controlsLabel(): string;
+    /** What the group of controls is called, where the page says. */
+    controlsLabel: string | undefined;
+    /** What the group of controls is called where the page does not say, which each family says for itself. */
+    protected get restingControlsLabel(): string;
     /** The pan event, built and not dispatched, for a family that names its own. */
     protected panEvent(detail: ViewportPanDetail): Event;
     /** The zoom event, built and not dispatched, for a family that names its own. */
     protected zoomEvent(detail: ViewportZoomDetail): Event;
     /** The controls, or nothing where the surface keeps none of them. */
     protected renderControls(): TemplateResult | typeof nothing;
+    /** The drawn group of controls, where there is one, for a family that measures it. */
+    protected get controlsElement(): Element | null;
+    /** Which controls the surface draws while `controls` is absent. */
+    protected get restingControls(): string;
 }
 /**
  * Grafts a pan-and-zoom surface: its controls, its keys, and the way out.

package/dist/mixins/mixin-viewport/mixin-viewport.js

@@ -8,18 +8,20 @@ import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { FullscreenController } from '../../controllers/fullscreen-controller/fullscreen-controller.js';
 import { IdleController } from '../../controllers/idle-controller/idle-controller.js';
-import { HelixMapPanEvent, HelixMapZoomEvent, } from '../../events/events.js';
 import { inlineStep } from '../../utils/inline-step/inline-step.js';
+import { isRtl } from '../../utils/is-rtl/is-rtl.js';
 export const MixinViewport = (Base) => {
     class Viewport extends Base {
         constructor() {
             super(...arguments);
             this.fullscreenLabel = 'Fill the screen';
             this.idleDelay = 0;
-            this.panLabel = 'Pan {way}';
+            this.panDownLabel = 'Pan down';
+            this.panLeftLabel = 'Pan left';
+            this.panRightLabel = 'Pan right';
             this.panStep = 0.25;
+            this.panUpLabel = 'Pan up';
             this.zoomInLabel = 'Zoom in';
-            this.zoomOutLabel = 'Zoom out';
             this.resting = false;
             this.filled = false;
             this.fullscreen = new FullscreenController(this, (full) => {
@@ -28,12 +30,16 @@ export const MixinViewport = (Base) => {
             this.idle = new IdleController(this, () => this.idleDelay, (resting) => {
                 this.resting = resting;
             });
+            this.zoomOutLabel = 'Zoom out';
             this.handleKeydown = (event) => {
                 const target = event.target;
                 const own = target?.closest('[part="region"], [part~="controls"]');
                 if (!own || !this.renderRoot.contains(own)) {
                     return;
                 }
+                if (target !== own && !own.matches('[part~="controls"]')) {
+                    return;
+                }
                 const along = inlineStep(this, event.key);
                 if (along === 1) {
                     event.preventDefault();
@@ -61,14 +67,14 @@ export const MixinViewport = (Base) => {
                 }
             };
         }
-        get controlsLabel() {
+        get restingControlsLabel() {
             return 'View controls';
         }
-        panEvent(detail) {
-            return new HelixMapPanEvent(detail);
+        panEvent(_detail) {
+            throw new Error(`<${this.localName}> composes MixinViewport and must implement panEvent(), the surface naming no event of its own.`);
         }
-        zoomEvent(detail) {
-            return new HelixMapZoomEvent(detail);
+        zoomEvent(_detail) {
+            throw new Error(`<${this.localName}> composes MixinViewport and must implement zoomEvent(), the surface naming no event of its own.`);
         }
         pan(to) {
             this.dispatchEvent(this.panEvent({ by: this.panStep, to }));
@@ -79,16 +85,45 @@ export const MixinViewport = (Base) => {
         toggleFullscreen() {
             void this.fullscreen.toggle();
         }
+        get restingControls() {
+            return 'pan zoom fullscreen';
+        }
         draws(group) {
-            return this.controls === undefined ? true : this.controls.split(/\s+/).includes(group);
+            return (this.controls ?? this.restingControls).split(/\s+/).includes(group);
+        }
+        sideOf(way) {
+            if (way !== 'start' && way !== 'end') {
+                return way;
+            }
+            return (way === 'start') !== this.rightToLeft ? 'left' : 'right';
+        }
+        get rightToLeft() {
+            const element = this;
+            return !element.hydrating && isRtl(this);
         }
         named(way) {
-            const spoken = way === 'start' ? 'left' : way === 'end' ? 'right' : way;
-            return this.panLabel.replace('{way}', spoken);
+            const side = this.sideOf(way);
+            return side === 'up'
+                ? this.panUpLabel
+                : side === 'down'
+                    ? this.panDownLabel
+                    : side === 'left'
+                        ? this.panLeftLabel
+                        : this.panRightLabel;
+        }
+        glyph(way) {
+            return { down: '↓', left: '←', right: '→', up: '↑' }[this.sideOf(way)] ?? '';
         }
         firstUpdated(changed) {
             super.firstUpdated(changed);
             this.idle.stir();
+            const element = this;
+            if (element.serverRendered && isRtl(this)) {
+                this.requestUpdate();
+            }
+        }
+        get controlsElement() {
+            return this.renderRoot?.querySelector('[part="controls"]') ?? null;
         }
         renderControls() {
             const pan = this.draws('pan');
@@ -97,19 +132,19 @@ export const MixinViewport = (Base) => {
             if (!pan && !zoom && !fullscreen) {
                 return nothing;
             }
-            return html `<div part="controls" role="group" aria-label=${this.controlsLabel}>
+            return html `<div part="controls" role="group" aria-label=${this.controlsLabel ?? this.restingControlsLabel}>
         ${pan
                 ? html `<button part="pan-up" aria-label=${this.named('up')} type="button" @click=${() => this.pan('up')}>
-                  ↑
+                  ${this.glyph('up')}
                 </button>
                 <button part="pan-start" aria-label=${this.named('start')} type="button" @click=${() => this.pan('start')}>
-                  ←
+                  ${this.glyph('start')}
                 </button>
                 <button part="pan-end" aria-label=${this.named('end')} type="button" @click=${() => this.pan('end')}>
-                  →
+                  ${this.glyph('end')}
                 </button>
                 <button part="pan-down" aria-label=${this.named('down')} type="button" @click=${() => this.pan('down')}>
-                  ↓
+                  ${this.glyph('down')}
                 </button>`
                 : nothing}
         ${zoom
@@ -137,6 +172,9 @@ export const MixinViewport = (Base) => {
     __decorate([
         property({ reflect: true })
     ], Viewport.prototype, "controls", void 0);
+    __decorate([
+        property({ attribute: 'controls-label' })
+    ], Viewport.prototype, "controlsLabel", void 0);
     __decorate([
         property({ attribute: 'controls-placement', reflect: true })
     ], Viewport.prototype, "controlsPlacement", void 0);
@@ -147,22 +185,31 @@ export const MixinViewport = (Base) => {
         property({ attribute: 'idle-delay', type: Number })
     ], Viewport.prototype, "idleDelay", void 0);
     __decorate([
-        property({ attribute: 'pan-label' })
-    ], Viewport.prototype, "panLabel", void 0);
+        property({ attribute: 'pan-down-label' })
+    ], Viewport.prototype, "panDownLabel", void 0);
+    __decorate([
+        property({ attribute: 'pan-left-label' })
+    ], Viewport.prototype, "panLeftLabel", void 0);
+    __decorate([
+        property({ attribute: 'pan-right-label' })
+    ], Viewport.prototype, "panRightLabel", void 0);
     __decorate([
         property({ attribute: 'pan-step', type: Number })
     ], Viewport.prototype, "panStep", void 0);
+    __decorate([
+        property({ attribute: 'pan-up-label' })
+    ], Viewport.prototype, "panUpLabel", void 0);
     __decorate([
         property({ attribute: 'zoom-in-label' })
     ], Viewport.prototype, "zoomInLabel", void 0);
-    __decorate([
-        property({ attribute: 'zoom-out-label' })
-    ], Viewport.prototype, "zoomOutLabel", void 0);
     __decorate([
         state()
     ], Viewport.prototype, "resting", void 0);
     __decorate([
         state()
     ], Viewport.prototype, "filled", void 0);
+    __decorate([
+        property({ attribute: 'zoom-out-label' })
+    ], Viewport.prototype, "zoomOutLabel", void 0);
     return Viewport;
 };

package/dist/utils/fill-template/fill-template.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A label with its `{placeholders}` filled in.
+ *
+ * **The one way every translatable sentence here is written**: a property holds
+ * the whole sentence, and the numbers and names go in where it says. A
+ * sentence built from pieces in code puts the pieces in English order, and
+ * another language may want them the other way round.
+ *
+ * Every occurrence is filled, so a sentence can name the same thing twice. A
+ * placeholder with no value is left as written rather than emptied, which
+ * shows up on the page as the mistake it is.
+ */
+export declare const fillTemplate: (template: string, values: Record<string, string | number>) => string;

package/dist/utils/fill-template/fill-template.js

@@ -0,0 +1 @@
+export const fillTemplate = (template, values) => Object.entries(values).reduce((out, [key, value]) => out.replaceAll(`{${key}}`, () => String(value)), template);

package/dist/utils/key-claimed/key-claimed.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Whether a press was already the business of whatever it landed on.
+ *
+ * **For a container that binds keys over content it did not write**: a toolbar,
+ * a viewer, a drilldown. Some of what they hold uses the same keys for itself,
+ * and moving the container regardless makes an input inside it uneditable:
+ * ArrowRight moves somewhere else, and `preventDefault` means the caret never
+ * moves at all.
+ *
+ * `composedPath()[0]` rather than `event.target`, which is retargeted to the
+ * control's host at the shadow boundary and cannot tell a text field inside a
+ * component from the component itself.
+ *
+ * `defaultPrevented` first, because a control that has already answered the
+ * press has said so in the way the platform provides, and a foreign control
+ * this package has never heard of has no other way to say it.
+ */
+export declare const keyClaimed: (event: KeyboardEvent) => boolean;