@fusion.dev/helix-core 0.103.3 → 0.104.0

package/dist/controllers/arrival-controller/arrival-controller.d.ts

@@ -0,0 +1,43 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/** How an element that announces itself reads what it has to say. */
+export interface ArrivalOptions {
+    /** The words, read off whatever the page put in the element. */
+    text: () => string;
+    /** Whether the element is arriving now, rather than with the page. */
+    arriving: () => boolean;
+}
+/**
+ * The words of an element that is announced when it appears, for a region that
+ * is there before they are.
+ *
+ * **A live region is heard when what it holds changes, not when it arrives.**
+ * An element the page inserts with its message already inside is a region
+ * arriving with its words, which a screen reader reads inconsistently at best:
+ * an empty state after a search, a banner raised mid-session. So the element
+ * renders its region empty and this fills it a frame later, which is a change.
+ *
+ * **Left empty when the element came with the page**, served or parsed in the
+ * first pass, because a message that was always there is content rather than
+ * news, and a region that spoke on every page load would interrupt a reader
+ * before they had read anything. Its words are the baseline instead, and the
+ * region speaks only when they change. Filling it at once also drew the words a
+ * second time on the headless tier, which has no sheet to clip the region, and
+ * a served page changed its picture on hydrating.
+ *
+ * The component renders `said` into its region and calls `say` when what it
+ * holds changes, from a `slotchange`.
+ */
+export declare class ArrivalController implements ReactiveController {
+    private readonly host;
+    private readonly options;
+    /** What the region says now. */
+    said: string;
+    /** The words last accounted for, said or not. */
+    private heard;
+    private frame;
+    constructor(host: ReactiveControllerHost, options: ArrivalOptions);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /** Reads the words again, and says them if they moved. */
+    say(): void;
+}

package/dist/controllers/arrival-controller/arrival-controller.js

@@ -0,0 +1,35 @@
+export class ArrivalController {
+    constructor(host, options) {
+        this.host = host;
+        this.options = options;
+        this.said = '';
+        this.heard = '';
+        this.frame = 0;
+        host.addController(this);
+    }
+    hostConnected() {
+        cancelAnimationFrame(this.frame);
+        if (!this.options.arriving()) {
+            this.heard = this.options.text();
+            return;
+        }
+        this.heard = '';
+        this.frame = requestAnimationFrame(() => {
+            this.frame = 0;
+            this.say();
+        });
+    }
+    hostDisconnected() {
+        cancelAnimationFrame(this.frame);
+        this.frame = 0;
+    }
+    say() {
+        const next = this.options.text();
+        if (next === this.heard) {
+            return;
+        }
+        this.heard = next;
+        this.said = next;
+        this.host.requestUpdate();
+    }
+}

package/dist/controllers/cue-controller/cue-controller.d.ts

@@ -79,6 +79,14 @@ export declare class CueController implements ReactiveController {
     private track;
     constructor(host: ReactiveControllerHost, listener: () => void);
     follow(track: TextTrack): void;
+    /**
+     * Listens again after a move, to the track it was following.
+     *
+     * The track is kept across the disconnect for this: it is only chosen again
+     * on `loadedmetadata`, and moving a video does not reload it, so a caption
+     * froze on whatever it last said.
+     */
+    hostConnected(): void;
     hostDisconnected(): void;
     private stop;
 }

package/dist/controllers/cue-controller/cue-controller.js

@@ -35,8 +35,11 @@ export class CueController {
         this.track = track;
         track.addEventListener('cuechange', this.listener);
     }
+    hostConnected() {
+        this.track?.addEventListener('cuechange', this.listener);
+    }
     hostDisconnected() {
-        this.stop();
+        this.track?.removeEventListener('cuechange', this.listener);
     }
     stop() {
         this.track?.removeEventListener('cuechange', this.listener);

package/dist/controllers/keyboard-navigation-controller/keyboard-navigation-controller.js

@@ -1,4 +1,5 @@
 import { inlineStep } from '../../utils/inline-step/inline-step.js';
+import { keyClaimed } from '../../utils/key-claimed/key-claimed.js';
 const KEYS = new Set(['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'End', 'Home']);
 export class KeyboardNavigationController {
     constructor(host, { items, origin = 'selection', reserved = () => [], selects = () => true, wrap = true, }) {
@@ -6,6 +7,9 @@ export class KeyboardNavigationController {
             if (!KEYS.has(event.key) || this.reserved().includes(event.key)) {
                 return;
             }
+            if (keyClaimed(event)) {
+                return;
+            }
             const items = this.items().filter((item) => !item.disabled);
             if (items.length === 0) {
                 return;

package/dist/controllers/remote-playback-controller/remote-playback-controller.d.ts

@@ -25,10 +25,25 @@ export declare class RemotePlaybackController implements ReactiveController {
     /** Cancels the availability watch, since it outlives a single render. */
     private watch;
     constructor(host: ReactiveControllerHost, report: RemoteReport);
+    /** Whether the host is in the document, which a watch is only kept while. */
+    private connected;
     /** Starts watching the media element, once there is one. */
     attach(media: HTMLMediaElement): Promise<void>;
+    /**
+     * Asks to hear when a device turns up or goes, for the media attached.
+     *
+     * **A watch that arrives after the host has gone is canceled on arrival.**
+     * The platform answers asynchronously, and a video removed while it did kept
+     * a watch nothing would cancel.
+     */
+    private start;
     /** Opens the platform's own device picker. It has no list of its own. */
     prompt(): Promise<void>;
+    /**
+     * Watches again after a move. The disconnect canceled it, and `attach` is
+     * called once, so the control kept whatever it last knew about devices.
+     */
+    hostConnected(): void;
     hostDisconnected(): void;
     private readonly handleState;
 }

package/dist/controllers/remote-playback-controller/remote-playback-controller.js

@@ -1,6 +1,7 @@
 export class RemotePlaybackController {
     constructor(host, report) {
         this.report = report;
+        this.connected = false;
         this.handleState = () => {
             this.report.connected(this.media?.remote?.state === 'connected');
         };
@@ -10,14 +11,22 @@ export class RemotePlaybackController {
         this.media = media;
         media.remote?.addEventListener?.('connect', this.handleState);
         media.remote?.addEventListener?.('disconnect', this.handleState);
-        const remote = media.remote;
-        if (!remote?.watchAvailability) {
+        await this.start();
+    }
+    async start() {
+        const remote = this.media?.remote;
+        if (!remote?.watchAvailability || this.watch !== undefined) {
             return;
         }
         try {
-            this.watch = await remote.watchAvailability((available) => {
+            const watch = await remote.watchAvailability((available) => {
                 this.report.available(available);
             });
+            if (!this.connected || this.watch !== undefined) {
+                void remote.cancelWatchAvailability?.(watch);
+                return;
+            }
+            this.watch = watch;
         }
         catch {
         }
@@ -29,7 +38,14 @@ export class RemotePlaybackController {
         catch {
         }
     }
+    hostConnected() {
+        this.connected = true;
+        if (this.media) {
+            void this.start();
+        }
+    }
     hostDisconnected() {
+        this.connected = false;
         if (this.watch !== undefined) {
             void this.media?.remote?.cancelWatchAvailability?.(this.watch);
             this.watch = undefined;

package/dist/events/events.d.ts

@@ -89,6 +89,230 @@ export interface ViewportZoomDetail {
     /** Which way, `1` in and `-1` out, so a consumer can multiply by their own step. */
     by: number;
 }
+/**
+ * The board moved, which on a canvas is a fact rather than a request.
+ *
+ * **`Map` asks and `Canvas` tells, and the difference is who draws.** A map is
+ * somebody else's, so the frame can only ask them to move it; a canvas is drawn
+ * here from a document, so the same press moves it and this says that it did.
+ * The detail is the same shape either way, being a direction and a distance.
+ */
+export declare class HelixCanvasPanEvent extends CustomEvent<ViewportPanDetail> {
+    static readonly eventName = "helix-canvas-pan";
+    constructor(detail: ViewportPanDetail);
+}
+/** The board zoomed, and told, for the same reason. */
+export declare class HelixCanvasZoomEvent extends CustomEvent<ViewportZoomDetail> {
+    static readonly eventName = "helix-canvas-zoom";
+    constructor(detail: ViewportZoomDetail);
+}
+/**
+ * Where a move or a resize puts each card it carries, in the board's own
+ * units.
+ *
+ * **One contract for both**, because what a controlled page does with either
+ * is the same: write the geometry the detail says onto the cards it renders. A
+ * resize says `width` and `height` as well, and moves `x` and `y` too when it
+ * is dragged from a corner other than the bottom right.
+ */
+export interface MoveDetail {
+    /**
+     * Every card the gesture moves, the one the reader took hold of first.
+     *
+     * **A list, because a group carries what is inside it.** Dragging a group
+     * moves its cards with it, which is what every board does, and a controlled
+     * consumer who refuses the move has to write every position it would have
+     * written, not only the one the pointer was on.
+     */
+    nodes: Array<{
+        name: string;
+        x: number;
+        y: number;
+        width?: number;
+        height?: number;
+    }>;
+}
+/**
+ * Cards are about to move, and can be refused.
+ *
+ * **This is the controlled half, the way `helix-before-open` is for a
+ * dialog.** A board moves its own cards by default, writing `x` and `y` onto
+ * each one the way an input writes its own value. A consumer who keeps the
+ * positions in their own state calls `preventDefault()` here, writes what the
+ * detail says into that state, and renders the cards where it puts them.
+ *
+ * Sent for every step of a drag, so a controlled board follows the pointer
+ * rather than jumping on the drop.
+ */
+export declare class HelixBeforeMoveEvent extends CustomEvent<MoveDetail> {
+    static readonly eventName = "helix-before-move";
+    constructor(detail: MoveDetail);
+}
+/**
+ * Cards moved, and the move is finished: a drag let go, or a key press.
+ *
+ * The `change` to `helix-before-move`'s `input`: what a consumer binds who
+ * only wants to save a board once somebody has finished rearranging it.
+ */
+export declare class HelixMoveEvent extends CustomEvent<MoveDetail> {
+    static readonly eventName = "helix-move";
+    constructor(detail: MoveDetail);
+}
+/** Which two cards a reader asked to join, by name, and the side they started from. */
+export interface ConnectDetail {
+    from: string;
+    to: string;
+    /** The side the reader drew from, where they drew from one. */
+    fromSide?: 'top' | 'right' | 'bottom' | 'left' | undefined;
+    /** The side nearest where they let go, where they let go over a card. */
+    toSide?: 'top' | 'right' | 'bottom' | 'left' | undefined;
+}
+/**
+ * A reader asked for two cards to be joined.
+ *
+ * **A request with no default, which is the difference from a move.** A board
+ * writes a card's position onto the card, because the card is already there.
+ * A connection is a new element, and a board that added one to markup React
+ * renders would have it put back or thrown away on the next render. So the board
+ * asks and the page adds the `helix-canvas-edge`, the way `Map` asks to be panned.
+ */
+export declare class HelixConnectEvent extends CustomEvent<ConnectDetail> {
+    static readonly eventName = "helix-connect";
+    constructor(detail: ConnectDetail);
+}
+/** Where a connection's ends are going, and where they were. */
+export interface ReconnectDetail {
+    /** The connection's name, where it has one. */
+    name: string;
+    /** Its ends before, so a page that named none of its connections can find it. */
+    was: {
+        from: string;
+        to: string;
+    };
+    from: string;
+    to: string;
+    fromSide?: 'top' | 'right' | 'bottom' | 'left' | undefined;
+    toSide?: 'top' | 'right' | 'bottom' | 'left' | undefined;
+}
+/**
+ * A connection's end is about to move to another card or another side, and can
+ * be refused.
+ *
+ * **A move, not a request, and that is the difference from `helix-connect`.**
+ * The connection is already an element on the page, so the board rewrites its
+ * ends itself, the way it writes a card's position onto the card; a page that
+ * holds its connections in state refuses this and writes them there.
+ */
+export declare class HelixBeforeReconnectEvent extends CustomEvent<ReconnectDetail> {
+    static readonly eventName = "helix-before-reconnect";
+    constructor(detail: ReconnectDetail);
+}
+/** A connection's end moved, and the move is finished. */
+export declare class HelixReconnectEvent extends CustomEvent<ReconnectDetail> {
+    static readonly eventName = "helix-reconnect";
+    constructor(detail: ReconnectDetail);
+}
+/** A label a reader rewrote on a board, and what it said before. */
+export interface RelabelDetail {
+    /** What was relabelled: a connection, or a group, whose name the board draws. */
+    target: 'edge' | 'group';
+    /** Its name on the board. */
+    name: string;
+    /** A connection's ends, so a page that named none of its connections can find it. */
+    from?: string | undefined;
+    to?: string | undefined;
+    /** The new label, empty for none. */
+    label: string;
+    /** The label before. */
+    was: string;
+}
+/**
+ * A label the board draws is about to change, and can be refused.
+ *
+ * **The board edits what it draws and asks for what it does not.** A
+ * connection's label and a group's name are drawn by the board from an
+ * attribute, so the board edits them in place and writes the attribute back,
+ * the way it writes a card's position; a page holding them in state refuses
+ * this and writes them there. A card's own content is the page's, which is why
+ * that is `helix-canvas-edit`, a request, rather than this.
+ */
+export declare class HelixBeforeRelabelEvent extends CustomEvent<RelabelDetail> {
+    static readonly eventName = "helix-before-relabel";
+    constructor(detail: RelabelDetail);
+}
+/** A label the board draws changed. */
+export declare class HelixRelabelEvent extends CustomEvent<RelabelDetail> {
+    static readonly eventName = "helix-relabel";
+    constructor(detail: RelabelDetail);
+}
+/**
+ * A reader asked to edit a card: a double-click, or Enter or F2 on it.
+ *
+ * **A request, because what a card holds is the page's.** Text, a picture, a
+ * chart: the board cannot know what editing any of those means, so it says
+ * which card and the page opens its own editor, in place, in a dialog, or in a
+ * panel beside the board.
+ */
+export declare class HelixCanvasEditEvent extends CustomEvent<{
+    name: string;
+}> {
+    static readonly eventName = "helix-canvas-edit";
+    constructor(detail: {
+        name: string;
+    });
+}
+/** What a reader asked to take off the board. */
+export interface RemoveDetail {
+    /** The cards, by name. */
+    nodes: string[];
+    /**
+     * The connections, including every one attached to a card being removed,
+     * since a line to nothing is not drawn but its element would stay behind.
+     * Each carries its ends as well as its name, so a page that named none of
+     * its connections can still find them.
+     */
+    edges: Array<{
+        name: string;
+        from: string;
+        to: string;
+    }>;
+}
+/**
+ * A reader asked for cards or connections to be taken away.
+ *
+ * A request for the reason `helix-connect` is one: the elements are the page's,
+ * so the page removes them. Nothing to refuse, because nothing happens unless
+ * the page acts.
+ */
+export declare class HelixRemoveEvent extends CustomEvent<RemoveDetail> {
+    static readonly eventName = "helix-remove";
+    constructor(detail: RemoveDetail);
+}
+/**
+ * Where a board is looking: the point at the middle of the view, in the
+ * document's own units, and how far it is zoomed.
+ *
+ * The middle rather than a corner, so a view saved in one box and restored in
+ * a box of another size shows the same thing in the middle of it.
+ */
+export interface CanvasView {
+    x: number;
+    y: number;
+    zoom: number;
+}
+/**
+ * The board's view changed, however it changed: a drag, the wheel, a press on
+ * a control, a card brought into view, or the board fitting itself.
+ *
+ * **One event for all of them**, because what a consumer keeping a minimap or a
+ * saved position in step needs is where the board is now, not which of six
+ * gestures put it there; `helix-canvas-pan` and `helix-canvas-zoom` still say
+ * which control was pressed. Sent for every step of a drag, the way `input` is.
+ */
+export declare class HelixCanvasViewEvent extends CustomEvent<CanvasView> {
+    static readonly eventName = "helix-canvas-view";
+    constructor(detail: CanvasView);
+}
 /** What `ViewportPanDetail` was called when only Map had one. */
 export type MapPanDetail = ViewportPanDetail;
 /** What `ViewportZoomDetail` was called when only Map had one. */
@@ -789,14 +1013,22 @@ declare const registry: {
     readonly HelixBeforeCloseEvent: typeof HelixBeforeCloseEvent;
     readonly HelixBeforeCollapseEvent: typeof HelixBeforeCollapseEvent;
     readonly HelixBeforeEditEvent: typeof HelixBeforeEditEvent;
+    readonly HelixBeforeMoveEvent: typeof HelixBeforeMoveEvent;
     readonly HelixBeforeOpenEvent: typeof HelixBeforeOpenEvent;
     readonly HelixBeforePanelResizeEvent: typeof HelixBeforePanelResizeEvent;
     readonly HelixBeforePinEvent: typeof HelixBeforePinEvent;
+    readonly HelixBeforeReconnectEvent: typeof HelixBeforeReconnectEvent;
+    readonly HelixBeforeRelabelEvent: typeof HelixBeforeRelabelEvent;
     readonly HelixBeforeResizeEvent: typeof HelixBeforeResizeEvent;
     readonly HelixBeforeSplitEvent: typeof HelixBeforeSplitEvent;
     readonly HelixBeforeToggleEvent: typeof HelixBeforeToggleEvent;
+    readonly HelixCanvasEditEvent: typeof HelixCanvasEditEvent;
+    readonly HelixCanvasPanEvent: typeof HelixCanvasPanEvent;
+    readonly HelixCanvasViewEvent: typeof HelixCanvasViewEvent;
+    readonly HelixCanvasZoomEvent: typeof HelixCanvasZoomEvent;
     readonly HelixCaretEvent: typeof HelixCaretEvent;
     readonly HelixCompleteEvent: typeof HelixCompleteEvent;
+    readonly HelixConnectEvent: typeof HelixConnectEvent;
     readonly HelixConsoleEvent: typeof HelixConsoleEvent;
     readonly HelixCopyEvent: typeof HelixCopyEvent;
     readonly HelixCreateEvent: typeof HelixCreateEvent;
@@ -806,10 +1038,14 @@ declare const registry: {
     readonly HelixHistoryEvent: typeof HelixHistoryEvent;
     readonly HelixMapPanEvent: typeof HelixMapPanEvent;
     readonly HelixMapZoomEvent: typeof HelixMapZoomEvent;
+    readonly HelixMoveEvent: typeof HelixMoveEvent;
     readonly HelixNavigateEvent: typeof HelixNavigateEvent;
     readonly HelixNextEvent: typeof HelixNextEvent;
     readonly HelixPreviousEvent: typeof HelixPreviousEvent;
     readonly HelixReadEvent: typeof HelixReadEvent;
+    readonly HelixReconnectEvent: typeof HelixReconnectEvent;
+    readonly HelixRelabelEvent: typeof HelixRelabelEvent;
+    readonly HelixRemoveEvent: typeof HelixRemoveEvent;
     readonly HelixReorderEvent: typeof HelixReorderEvent;
     readonly HelixResizeEvent: typeof HelixResizeEvent;
     readonly HelixSampleEndEvent: typeof HelixSampleEndEvent;

package/dist/events/events.js

@@ -42,6 +42,138 @@ export class HelixPreviousEvent extends CustomEvent {
         });
     }
 }
+export class HelixCanvasPanEvent extends CustomEvent {
+    static { this.eventName = 'helix-canvas-pan'; }
+    constructor(detail) {
+        super(HelixCanvasPanEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}
+export class HelixCanvasZoomEvent extends CustomEvent {
+    static { this.eventName = 'helix-canvas-zoom'; }
+    constructor(detail) {
+        super(HelixCanvasZoomEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}
+export class HelixBeforeMoveEvent extends CustomEvent {
+    static { this.eventName = 'helix-before-move'; }
+    constructor(detail) {
+        super(HelixBeforeMoveEvent.eventName, {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            detail,
+        });
+    }
+}
+export class HelixMoveEvent extends CustomEvent {
+    static { this.eventName = 'helix-move'; }
+    constructor(detail) {
+        super(HelixMoveEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}
+export class HelixConnectEvent extends CustomEvent {
+    static { this.eventName = 'helix-connect'; }
+    constructor(detail) {
+        super(HelixConnectEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}
+export class HelixBeforeReconnectEvent extends CustomEvent {
+    static { this.eventName = 'helix-before-reconnect'; }
+    constructor(detail) {
+        super(HelixBeforeReconnectEvent.eventName, {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            detail,
+        });
+    }
+}
+export class HelixReconnectEvent extends CustomEvent {
+    static { this.eventName = 'helix-reconnect'; }
+    constructor(detail) {
+        super(HelixReconnectEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}
+export class HelixBeforeRelabelEvent extends CustomEvent {
+    static { this.eventName = 'helix-before-relabel'; }
+    constructor(detail) {
+        super(HelixBeforeRelabelEvent.eventName, {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            detail,
+        });
+    }
+}
+export class HelixRelabelEvent extends CustomEvent {
+    static { this.eventName = 'helix-relabel'; }
+    constructor(detail) {
+        super(HelixRelabelEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}
+export class HelixCanvasEditEvent extends CustomEvent {
+    static { this.eventName = 'helix-canvas-edit'; }
+    constructor(detail) {
+        super(HelixCanvasEditEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}
+export class HelixRemoveEvent extends CustomEvent {
+    static { this.eventName = 'helix-remove'; }
+    constructor(detail) {
+        super(HelixRemoveEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}
+export class HelixCanvasViewEvent extends CustomEvent {
+    static { this.eventName = 'helix-canvas-view'; }
+    constructor(detail) {
+        super(HelixCanvasViewEvent.eventName, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail,
+        });
+    }
+}
 export class HelixTourAskEvent extends CustomEvent {
     static { this.eventName = 'helix-tour-ask'; }
     constructor(detail) {
@@ -401,14 +533,22 @@ const registry = {
     HelixBeforeCloseEvent,
     HelixBeforeCollapseEvent,
     HelixBeforeEditEvent,
+    HelixBeforeMoveEvent,
     HelixBeforeOpenEvent,
     HelixBeforePanelResizeEvent,
     HelixBeforePinEvent,
+    HelixBeforeReconnectEvent,
+    HelixBeforeRelabelEvent,
     HelixBeforeResizeEvent,
     HelixBeforeSplitEvent,
     HelixBeforeToggleEvent,
+    HelixCanvasEditEvent,
+    HelixCanvasPanEvent,
+    HelixCanvasViewEvent,
+    HelixCanvasZoomEvent,
     HelixCaretEvent,
     HelixCompleteEvent,
+    HelixConnectEvent,
     HelixConsoleEvent,
     HelixCopyEvent,
     HelixCreateEvent,
@@ -418,10 +558,14 @@ const registry = {
     HelixHistoryEvent,
     HelixMapPanEvent,
     HelixMapZoomEvent,
+    HelixMoveEvent,
     HelixNavigateEvent,
     HelixNextEvent,
     HelixPreviousEvent,
     HelixReadEvent,
+    HelixReconnectEvent,
+    HelixRelabelEvent,
+    HelixRemoveEvent,
     HelixReorderEvent,
     HelixResizeEvent,
     HelixSampleEndEvent,

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;