@fusion.dev/helix-core 0.103.2 → 0.104.0

package/dist/helix-form-element/helix-form-element.d.ts

@@ -111,6 +111,15 @@ export declare class HelixFormElement extends HelixElement {
      * middle of removing.
      */
     formDisabledCallback(disabled: boolean): void;
+    /**
+     * The form was reset. Nothing here, and every override calls it.
+     *
+     * **A chain rather than a leaf**, because more than one layer owes a reset
+     * something: the value mixin its default, and the field mixin beneath it the
+     * forgetting of a reader's past attempt, whose message otherwise showed over
+     * the emptied control the moment the form was reset.
+     */
+    formResetCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
     /**
      * Announces `input` from the host, the way the control it stands for would.

package/dist/helix-form-element/helix-form-element.js

@@ -20,6 +20,7 @@ export class HelixFormElement extends HelixElement {
     formDisabledCallback(disabled) {
         this.formDisabled = disabled && !this.disabled;
     }
+    formResetCallback() { }
     willUpdate(changed) {
         super.willUpdate(changed);
         this.internals.ariaDisabled = this.isDisabled ? 'true' : null;

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, } 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';
@@ -34,6 +35,7 @@ export { MixinPickerEditing, type MixinPickerEditingInterface, } from './mixins/
 export { MixinPickerField, type MixinPickerFieldInterface, } from './mixins/mixin-picker-field/mixin-picker-field.js';
 export { MixinSelectableItem, type MixinSelectableItemInterface, } from './mixins/mixin-selectable-item/mixin-selectable-item.js';
 export { MixinTokens, type MixinTokensInterface } from './mixins/mixin-tokens/mixin-tokens.js';
+export { MixinViewport, type ViewportControlsPlacement, type ViewportElement, type ViewportWay, } from './mixins/mixin-viewport/mixin-viewport.js';
 export { anchorElement } from './utils/anchor-element/anchor-element.js';
 export { capturePointer } from './utils/capture-pointer/capture-pointer.js';
 export { closestInstance } from './utils/closest-instance/closest-instance.js';
@@ -44,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';
@@ -57,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';
@@ -64,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';
@@ -34,6 +35,7 @@ export { MixinPickerEditing, } from './mixins/mixin-picker-editing/mixin-picker-
 export { MixinPickerField, } from './mixins/mixin-picker-field/mixin-picker-field.js';
 export { MixinSelectableItem, } from './mixins/mixin-selectable-item/mixin-selectable-item.js';
 export { MixinTokens } from './mixins/mixin-tokens/mixin-tokens.js';
+export { MixinViewport, } from './mixins/mixin-viewport/mixin-viewport.js';
 export { anchorElement } from './utils/anchor-element/anchor-element.js';
 export { capturePointer } from './utils/capture-pointer/capture-pointer.js';
 export { closestInstance } from './utils/closest-instance/closest-instance.js';
@@ -44,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';
@@ -57,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';
@@ -64,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

@@ -0,0 +1,97 @@
+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, 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';
+/** Where the controls sit, in the corner words the rest of the library uses. */
+export type ViewportControlsPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+/**
+ * The API a pan-and-zoom surface has, as TypeScript sees it.
+ */
+export declare class ViewportElement {
+    /** Which of the controls the surface draws, as a list of what to keep. */
+    controls?: string;
+    /** Which corner the controls sit in. */
+    controlsPlacement?: ViewportControlsPlacement;
+    /** What the control that fills the screen is called. */
+    fullscreenLabel: string;
+    /** How long the reader may be still before the chrome hides, in milliseconds. */
+    idleDelay: number;
+    /** 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. */
+    zoomOutLabel: string;
+    /** Asks for the view to move, which the consumer answers. */
+    pan(to: ViewportWay): void;
+    /** Asks for the view to zoom, `1` in and `-1` out. */
+    zoom(by: number): void;
+    /** Fills the screen with the surface, or comes back. */
+    toggleFullscreen(): void;
+    /** Whether the reader has been still long enough to hide the chrome. */
+    protected resting: boolean;
+    /** Whether the surface is filling the screen. */
+    protected filled: boolean;
+    /** How long the reader has been still, which the family's own frame stirs. */
+    protected readonly idle: IdleController;
+    /** Into the screen and back, for a family that offers its own way in. */
+    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, 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.
+ *
+ * **Nothing here is geographic, which is why it is here.** `Map` was written
+ * first and its frame turned out to be a surface a reader can move, fill the
+ * screen with, and stop touching: a canvas of notes and a graph of nodes want
+ * the same four hundred lines, and the only thing that made them Map's was
+ * being written there. Extracted before the second consumer rather than after,
+ * which is the opposite of what [#383](queue.md) had to conclude about a
+ * controller promoted ahead of one.
+ *
+ * **Nothing here moves anything, either.** Both controls ask, through an event
+ * a family names, and the answer is the consumer's: the surface a reader is
+ * looking at belongs to them, whether it is a tile renderer, a canvas or a
+ * force layout. A mixin that moved the view would have to know what the view
+ * was.
+ *
+ * **The controls are buttons, and that is a decision against arrow keys.** They
+ * work too, but what a screen reader does with them is not ours to decide:
+ * macOS passes them through, Windows readers hold them for their own reading
+ * mode unless a page takes `role="application"`, which costs the reader their
+ * normal way of reading everything else. A button is findable and operable in
+ * every screen reader on every platform without that bargain.
+ *
+ * **What stays in the family is `render()`, its slots and its part
+ * documentation**, because a part named through an interpolation is one the
+ * manifest cannot see: a loop over the four pan buttons would publish `pan-`
+ * and a consumer's `::part(pan-up)` would match nothing.
+ */
+export declare const MixinViewport: <T extends Constructor<LitElement>>(Base: T) => Constructor<ViewportElement> & T;
+export {};