@fusion.dev/helix-core 0.217.0 → 0.219.0

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

@@ -19,6 +19,16 @@ export interface PopoverOptions {
      * itself instead, so a press on its trigger is inside rather than out.
      */
     boundary?: () => Element | readonly (Element | null | undefined)[] | null | undefined;
+    /**
+     * What the open surface does to a tooltip outside it.
+     *
+     * `hide`, the default, closes a tooltip showing outside the surface as it
+     * opens, and keeps tooltips outside it closed until it closes. A tooltip
+     * inside it still shows. `keep` leaves them alone, for a surface that is a
+     * tooltip itself or that stays up while the reader goes on using the page,
+     * such as a tour's stop.
+     */
+    hints?: 'hide' | 'keep';
     /** Space between the anchor and the surface, in pixels. */
     offset?: number | (() => number);
     /** Whether the surface may move to the other side to fit. On by default. See `FloatingController`. */
@@ -93,6 +103,19 @@ export interface PopoverOptions {
     /** The panel that floats. */
     surface: () => HTMLElement | null | undefined;
 }
+/**
+ * Whether a tooltip at `element` may show: no surface is open, or the last one
+ * to open holds it. A tooltip outside an open menu or popover would sit over
+ * the panel the reader is using.
+ */
+export declare function hintMayShow(element: Element): boolean;
+/**
+ * Calls `watcher` with each surface that opens and hides the tooltips outside
+ * it. Returns the call that stops it.
+ */
+export declare function onPanelOpen(watcher: (surface: HTMLElement) => void): () => void;
+/** Whether `element` is drawn inside `surface`, following slots. */
+export declare function hintInside(surface: HTMLElement, element: Element): boolean;
 /**
  * A surface that floats against something, in the top layer, until dismissed.
  *
@@ -128,6 +151,8 @@ export declare class PopoverController implements ReactiveController {
     private readonly dismisser;
     /** Whether the surface is currently shown, so the calls can be idempotent. */
     private shown;
+    /** The surface tooltips outside it yield to, while it is open. */
+    private held;
     private readonly host;
     constructor(host: ReactiveControllerHost & HTMLElement, options: PopoverOptions);
     /** Whether the surface is showing. */
@@ -144,6 +169,8 @@ export declare class PopoverController implements ReactiveController {
      * track of which one got there first.
      */
     show(): void;
+    /** Takes the surface off the list of open ones, so tooltips may show again. */
+    private freeHints;
     /** Hides the surface and stops everything watching it. */
     hide(): void;
     /** Whichever of the two the surface is not already doing. */

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

@@ -1,5 +1,46 @@
 import { DismissController } from '../dismiss-controller/dismiss-controller.js';
 import { FloatingController } from '../floating-controller/floating-controller.js';
+const PANELS = Symbol.for('fusion.helix.open-panels');
+const openPanels = () => {
+    const globals = globalThis;
+    globals[PANELS] ??= { open: new Set(), watchers: new Set() };
+    return globals[PANELS];
+};
+const slotOf = (node) => {
+    const element = node;
+    if (element.assignedSlot) {
+        return element.assignedSlot;
+    }
+    const root = node.parentNode?.shadowRoot;
+    if (!root || typeof element.getAttribute !== 'function') {
+        return null;
+    }
+    const name = element.getAttribute('slot');
+    return root.querySelector(name ? `slot[name="${name.replaceAll('"', '\\"')}"]` : 'slot:not([name])');
+};
+const drawnInside = (container, node) => {
+    let at = node;
+    while (at) {
+        if (at === container) {
+            return true;
+        }
+        at = slotOf(at) ?? at.parentNode ?? at.host ?? null;
+    }
+    return false;
+};
+export function hintMayShow(element) {
+    const open = [...openPanels().open];
+    const last = open.at(-1);
+    return last === undefined || drawnInside(last, element);
+}
+export function onPanelOpen(watcher) {
+    const { watchers } = openPanels();
+    watchers.add(watcher);
+    return () => watchers.delete(watcher);
+}
+export function hintInside(surface, element) {
+    return drawnInside(surface, element);
+}
 export class PopoverController {
     constructor(host, options) {
         this.shown = false;
@@ -64,6 +105,20 @@ export class PopoverController {
             this.floating.release();
         }
         this.dismisser.activate();
+        if (this.options.hints !== 'keep') {
+            const panels = openPanels();
+            this.held = surface;
+            panels.open.add(surface);
+            for (const watcher of [...panels.watchers]) {
+                watcher(surface);
+            }
+        }
+    }
+    freeHints() {
+        if (this.held) {
+            openPanels().open.delete(this.held);
+            this.held = undefined;
+        }
     }
     hide() {
         const surface = this.options.surface();
@@ -71,6 +126,7 @@ export class PopoverController {
             return;
         }
         this.shown = false;
+        this.freeHints();
         this.dismisser.deactivate();
         this.floating.stop();
         surface?.hidePopover?.();
@@ -88,6 +144,7 @@ export class PopoverController {
     }
     hostDisconnected() {
         this.shown = false;
+        this.freeHints();
     }
     hostConnected() {
         if (this.options.open?.()) {

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

@@ -3,12 +3,14 @@ import { keyClaimed } from '../../utils/key-claimed/key-claimed.js';
 import { Typeahead, typesCharacter } from '../../utils/typeahead/typeahead.js';
 const KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);
 const ownsTabStop = (node) => 'focusable' in node;
+const disabledOut = (node) => node.hasAttribute('disabled') &&
+    node.focusableWhenDisabled !== true;
 const NATIVE = 'a[href], button, input, select, textarea, [tabindex], [contenteditable=""], [contenteditable="true"]';
 const TABBABLE = NATIVE.replace('[tabindex]', '[tabindex]:not([tabindex="-1"])');
 const innerStops = new WeakMap();
 const takesFocus = (node) => {
     if (!(node instanceof HTMLElement) ||
-        node.hasAttribute('disabled') ||
+        disabledOut(node) ||
         node.getAttribute('aria-hidden') === 'true') {
         return false;
     }
@@ -138,7 +140,7 @@ export class ToolbarController {
         const controls = [];
         for (const child of this.members) {
             if (!(child instanceof HTMLElement) ||
-                child.hasAttribute('disabled') ||
+                disabledOut(child) ||
                 child.getAttribute('aria-hidden') === 'true') {
                 continue;
             }
@@ -314,7 +316,7 @@ export class ToolbarController {
         const watched = this.options.watch?.() ?? this.host;
         this.watcher = new MutationObserver(() => this.restore());
         this.watcher.observe(watched, {
-            attributeFilter: ['disabled', 'aria-hidden'],
+            attributeFilter: ['disabled', 'focusable-when-disabled', 'aria-hidden'],
             attributes: true,
             subtree: true,
         });

package/dist/events/events.d.ts

@@ -128,6 +128,7 @@ import { HelixShortcutEvent } from './shortcut.js';
 import { HelixSortEvent } from './sort.js';
 import { HelixSortedEvent } from './sorted.js';
 import { HelixSplitEvent } from './split.js';
+import { HelixStopEvent } from './stop.js';
 import { HelixStrandsFallbackEvent } from './strands-fallback.js';
 import { HelixTerminalBellEvent } from './terminal-bell.js';
 import { HelixTerminalInputEvent } from './terminal-input.js';
@@ -141,7 +142,7 @@ import { HelixTourStatusEvent } from './tour-status.js';
 import { HelixTypingEvent } from './typing.js';
 export type { ActivateDetail, AuraFallbackDetail, BandDetail, CanvasView, CaretDetail, ChangeDetail, CompleteDetail, ConnectDetail, ConsoleDetail, CopyDetail, CreateDetail, DeviceButton, DeviceButtonDetail, DeviceKeyDetail, DeviceScrollDetail, DeviceSwipeDetail, DeviceTapDetail, DeviceTextDetail, DeviceTouchDetail, DismissDetail, FacetDetail, FilterDetail, GraphFilterDetail, GraphLayoutDetail, GraphPartChangeDetail, GraphSignalDetail, ListenDetail, MapClusterDetail, MapPanDetail, MapPartChangeDetail, MapRotateDetail, MapTiltDetail, MapZoomDetail, MoveDetail, NavigateDetail, OpenDetail, PasteDetail, PlotChangeDetail, PlotTurnDetail, PressDetail, PressPointerType, RangeDetail, ReadDetail, ReadingDetail, ReconnectDetail, Refusal, RefusedFile, RejectDetail, RelabelDetail, RemoveDetail, ReorderDetail, ResizeDetail, ScrolledDetail, SelectDetail, SendDetail, ShortcutDetail, SkipDetail, SortDetail, StrandsFallbackDetail, TerminalInputDetail, TerminalLinkDetail, TerminalResizeDetail, TerminalTitleDetail, ToggleDetail, TourAskDetail, TourStatusDetail, TypingDetail, ViewportPanDetail, ViewportZoomDetail, } from './details.js';
 export { helixEventNames } from './names.js';
-export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeListenEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePasteEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDeviceButtonEvent, HelixDeviceKeyEvent, HelixDeviceScreenshotEvent, HelixDeviceScrollEvent, HelixDeviceSwipeEvent, HelixDeviceTapEvent, HelixDeviceTextEvent, HelixDeviceTouchEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixListenEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPastedEvent, HelixPinEvent, HelixPlotChangeEvent, HelixPlotTurnEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixStrandsFallbackEvent, HelixTerminalBellEvent, HelixTerminalInputEvent, HelixTerminalLinkEvent, HelixTerminalResizeEvent, HelixTerminalRestartEvent, HelixTerminalTitleEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, };
+export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeListenEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePasteEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDeviceButtonEvent, HelixDeviceKeyEvent, HelixDeviceScreenshotEvent, HelixDeviceScrollEvent, HelixDeviceSwipeEvent, HelixDeviceTapEvent, HelixDeviceTextEvent, HelixDeviceTouchEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixListenEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPastedEvent, HelixPinEvent, HelixPlotChangeEvent, HelixPlotTurnEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixStopEvent, HelixStrandsFallbackEvent, HelixTerminalBellEvent, HelixTerminalInputEvent, HelixTerminalLinkEvent, HelixTerminalResizeEvent, HelixTerminalRestartEvent, HelixTerminalTitleEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, };
 /**
  * Every event class, and the one place a new one is registered: a class in a
  * module of its own, imported above, and named here and in `names.ts`.
@@ -255,6 +256,7 @@ declare const registry: {
     readonly HelixSortEvent: typeof HelixSortEvent;
     readonly HelixSortedEvent: typeof HelixSortedEvent;
     readonly HelixSplitEvent: typeof HelixSplitEvent;
+    readonly HelixStopEvent: typeof HelixStopEvent;
     readonly HelixStrandsFallbackEvent: typeof HelixStrandsFallbackEvent;
     readonly HelixTerminalBellEvent: typeof HelixTerminalBellEvent;
     readonly HelixTerminalInputEvent: typeof HelixTerminalInputEvent;

package/dist/events/events.js

@@ -98,6 +98,7 @@ import { HelixShortcutEvent } from './shortcut.js';
 import { HelixSortEvent } from './sort.js';
 import { HelixSortedEvent } from './sorted.js';
 import { HelixSplitEvent } from './split.js';
+import { HelixStopEvent } from './stop.js';
 import { HelixStrandsFallbackEvent } from './strands-fallback.js';
 import { HelixTerminalBellEvent } from './terminal-bell.js';
 import { HelixTerminalInputEvent } from './terminal-input.js';
@@ -110,7 +111,7 @@ import { HelixTourAskEvent } from './tour-ask.js';
 import { HelixTourStatusEvent } from './tour-status.js';
 import { HelixTypingEvent } from './typing.js';
 export { helixEventNames } from './names.js';
-export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeListenEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePasteEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDeviceButtonEvent, HelixDeviceKeyEvent, HelixDeviceScreenshotEvent, HelixDeviceScrollEvent, HelixDeviceSwipeEvent, HelixDeviceTapEvent, HelixDeviceTextEvent, HelixDeviceTouchEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixListenEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPastedEvent, HelixPinEvent, HelixPlotChangeEvent, HelixPlotTurnEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixStrandsFallbackEvent, HelixTerminalBellEvent, HelixTerminalInputEvent, HelixTerminalLinkEvent, HelixTerminalResizeEvent, HelixTerminalRestartEvent, HelixTerminalTitleEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, };
+export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeListenEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePasteEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDeviceButtonEvent, HelixDeviceKeyEvent, HelixDeviceScreenshotEvent, HelixDeviceScrollEvent, HelixDeviceSwipeEvent, HelixDeviceTapEvent, HelixDeviceTextEvent, HelixDeviceTouchEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixListenEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPastedEvent, HelixPinEvent, HelixPlotChangeEvent, HelixPlotTurnEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixStopEvent, HelixStrandsFallbackEvent, HelixTerminalBellEvent, HelixTerminalInputEvent, HelixTerminalLinkEvent, HelixTerminalResizeEvent, HelixTerminalRestartEvent, HelixTerminalTitleEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, };
 const registry = {
     HelixActionEvent,
     HelixActivateEvent,
@@ -212,6 +213,7 @@ const registry = {
     HelixSortEvent,
     HelixSortedEvent,
     HelixSplitEvent,
+    HelixStopEvent,
     HelixStrandsFallbackEvent,
     HelixTerminalBellEvent,
     HelixTerminalInputEvent,

package/dist/events/names.js

@@ -11,7 +11,7 @@ export const helixEventNames = new Set(('action activate aura-fallback band befo
     'preview previous range-change read reading-change reading-press reconnect reject ' +
     'relabel remove reorder ' +
     'reordered resize resized sample-end sample-start scrolled select selected send ' +
-    'shortcut sort sorted split strands-fallback terminal-bell terminal-input terminal-link ' +
+    'shortcut sort sorted split stop strands-fallback terminal-bell terminal-input terminal-link ' +
     'terminal-resize terminal-restart terminal-title toggle tour-ask tour-status typing')
     .split(' ')
     .map((name) => `helix-${name}`));

package/dist/events/stop.d.ts

@@ -0,0 +1,12 @@
+/**
+ * A reader asked for what is under way to stop: the stop control a chat
+ * composer shows in place of its send button while a reply is on its way.
+ *
+ * Carries nothing, because what stops is the listener's to know. Not
+ * cancelable: the reader has asked, and the composer changes nothing by
+ * itself, so there is nothing for a listener to refuse.
+ */
+export declare class HelixStopEvent extends Event {
+    static readonly eventName = "helix-stop";
+    constructor();
+}

package/dist/events/stop.js

@@ -0,0 +1,6 @@
+export class HelixStopEvent extends Event {
+    static { this.eventName = 'helix-stop'; }
+    constructor() {
+        super(HelixStopEvent.eventName, { bubbles: true, cancelable: false, composed: true });
+    }
+}

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

@@ -298,6 +298,25 @@ export declare class HelixElement extends LitElement {
      * cost, and a property read where it did not: see `reportRender`.
      */
     protected performUpdate(): void;
+    /**
+     * Whether the first update found React's props, where it looked before the
+     * render. See `willUpdate`.
+     */
+    private reactApplied;
+    /**
+     * **The first look for React's props, and the one that costs nothing.** It
+     * succeeds whenever the definition landed after React hydrated, which is the
+     * ordering a deferred or lazily imported element has: the bag is already on
+     * the node, so the value is in the first render.
+     *
+     * **Before the render, because `firstUpdated` is too late.** A value
+     * assigned there schedules a second update as the first one finishes, which
+     * Lit's development build reports as `change-in-update`: Command's
+     * `filterMatch` did in the Hartley app until October 14, 2026. A hydrating
+     * render has to be the server's, so that element looks in `firstUpdated`,
+     * where `finishHydration` asks for the update after it anyway.
+     */
+    protected willUpdate(changed: PropertyValues): void;
     /**
      * Marks the component's first style resolution as done, so `SETTLED` stops
      * suppressing transitions.

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

@@ -107,10 +107,16 @@ export class HelixElement extends LitElement {
             reportRender(this, start, performance.now() - start);
         }
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (!this.hasUpdated && !this.hydrating) {
+            this.reactApplied = applyReactProperties(this);
+        }
+    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         reportUsage(this);
-        const applied = applyReactProperties(this);
+        const applied = this.reactApplied ?? applyReactProperties(this);
         requestAnimationFrame(() => {
             this.toggleState('settled', true);
             this.resolveSettled();

package/dist/index.d.ts

@@ -28,7 +28,7 @@ export { animationsFinished, animationsSettled, type OpenPhase, OpenPhaseControl
 export { OptionWindowController, type OptionWindowOptions, } from './controllers/option-window-controller/option-window-controller.js';
 export { MAX_FRAME_STEP, PaintGateController, type PaintGateOptions, } from './controllers/paint-gate-controller/paint-gate-controller.js';
 export { PlacementController } from './controllers/placement-controller/placement-controller.js';
-export { PopoverController, type PopoverOptions, } from './controllers/popover-controller/popover-controller.js';
+export { hintInside, hintMayShow, onPanelOpen, PopoverController, type PopoverOptions, } from './controllers/popover-controller/popover-controller.js';
 export { RelativeClockController, type RelativeClockOptions, } from './controllers/relative-clock-controller/relative-clock-controller.js';
 export { RemotePlaybackController, type RemoteReport, } from './controllers/remote-playback-controller/remote-playback-controller.js';
 export { ReorderController, type ReorderMove, type ReorderOptions, type ReorderWords, requestReorder, } from './controllers/reorder-controller/reorder-controller.js';
@@ -41,7 +41,7 @@ export { UpgradeController, type UpgradeOptions, } from './controllers/upgrade-c
 export { type Rendered, VirtualizeController, type VirtualizeOptions, type Window as VirtualizeWindow, } from './controllers/virtualize-controller/virtualize-controller.js';
 export { Waterfall } from './controllers/virtualize-controller/waterfall.js';
 export { eventsForTag, registerElementEvents } from './events/element-events.js';
-export { type ActivateDetail, type AuraFallbackDetail, type BandDetail, type CanvasView, type CaretDetail, type ChangeDetail, type CompleteDetail, type ConnectDetail, type ConsoleDetail, type CopyDetail, type CreateDetail, type DeviceButton, type DeviceButtonDetail, type DeviceKeyDetail, type DeviceScrollDetail, type DeviceSwipeDetail, type DeviceTapDetail, type DeviceTextDetail, type DeviceTouchDetail, type DismissDetail, type FacetDetail, type FilterDetail, type GraphFilterDetail, type GraphLayoutDetail, type GraphPartChangeDetail, type GraphSignalDetail, HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeListenEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePasteEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDeviceButtonEvent, HelixDeviceKeyEvent, HelixDeviceScreenshotEvent, HelixDeviceScrollEvent, HelixDeviceSwipeEvent, HelixDeviceTapEvent, HelixDeviceTextEvent, HelixDeviceTouchEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixListenEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPastedEvent, HelixPinEvent, HelixPlotChangeEvent, HelixPlotTurnEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixStrandsFallbackEvent, HelixTerminalBellEvent, HelixTerminalInputEvent, HelixTerminalLinkEvent, HelixTerminalResizeEvent, HelixTerminalRestartEvent, HelixTerminalTitleEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, type ListenDetail, type MapClusterDetail, type MapPanDetail, type MapPartChangeDetail, type MapRotateDetail, type MapTiltDetail, type MapZoomDetail, type MoveDetail, type NavigateDetail, type OpenDetail, type PasteDetail, type PlotChangeDetail, type PlotTurnDetail, type PressDetail, type PressPointerType, type RangeDetail, type ReadDetail, type ReadingDetail, type ReconnectDetail, type Refusal, type RefusedFile, type RejectDetail, type RelabelDetail, type RemoveDetail, type ReorderDetail, type ResizeDetail, type ScrolledDetail, type SelectDetail, type SendDetail, type ShortcutDetail, type SkipDetail, type SortDetail, type StrandsFallbackDetail, type TerminalInputDetail, type TerminalLinkDetail, type TerminalResizeDetail, type TerminalTitleDetail, type ToggleDetail, type TourStatusDetail, type TypingDetail, type ViewportPanDetail, type ViewportZoomDetail, } from './events/events.js';
+export { type ActivateDetail, type AuraFallbackDetail, type BandDetail, type CanvasView, type CaretDetail, type ChangeDetail, type CompleteDetail, type ConnectDetail, type ConsoleDetail, type CopyDetail, type CreateDetail, type DeviceButton, type DeviceButtonDetail, type DeviceKeyDetail, type DeviceScrollDetail, type DeviceSwipeDetail, type DeviceTapDetail, type DeviceTextDetail, type DeviceTouchDetail, type DismissDetail, type FacetDetail, type FilterDetail, type GraphFilterDetail, type GraphLayoutDetail, type GraphPartChangeDetail, type GraphSignalDetail, HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeListenEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePasteEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDeviceButtonEvent, HelixDeviceKeyEvent, HelixDeviceScreenshotEvent, HelixDeviceScrollEvent, HelixDeviceSwipeEvent, HelixDeviceTapEvent, HelixDeviceTextEvent, HelixDeviceTouchEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixListenEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPastedEvent, HelixPinEvent, HelixPlotChangeEvent, HelixPlotTurnEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixStopEvent, HelixStrandsFallbackEvent, HelixTerminalBellEvent, HelixTerminalInputEvent, HelixTerminalLinkEvent, HelixTerminalResizeEvent, HelixTerminalRestartEvent, HelixTerminalTitleEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, type ListenDetail, type MapClusterDetail, type MapPanDetail, type MapPartChangeDetail, type MapRotateDetail, type MapTiltDetail, type MapZoomDetail, type MoveDetail, type NavigateDetail, type OpenDetail, type PasteDetail, type PlotChangeDetail, type PlotTurnDetail, type PressDetail, type PressPointerType, type RangeDetail, type ReadDetail, type ReadingDetail, type ReconnectDetail, type Refusal, type RefusedFile, type RejectDetail, type RelabelDetail, type RemoveDetail, type ReorderDetail, type ResizeDetail, type ScrolledDetail, type SelectDetail, type SendDetail, type ShortcutDetail, type SkipDetail, type SortDetail, type StrandsFallbackDetail, type TerminalInputDetail, type TerminalLinkDetail, type TerminalResizeDetail, type TerminalTitleDetail, type ToggleDetail, type TourStatusDetail, type TypingDetail, type ViewportPanDetail, type ViewportZoomDetail, } from './events/events.js';
 export { HelixElement, whenHydrated } from './helix-element/helix-element.js';
 export { LAYERS_RULE, MIRROR_RULE, SCROLLER_RULE, SPOKEN_RULE, TOUCHES_RULE, VIRTUAL_RULE, } from './helix-element/mark-rules.js';
 export { HelixFormElement } from './helix-form-element/helix-form-element.js';

package/dist/index.js

@@ -28,7 +28,7 @@ export { animationsFinished, animationsSettled, OpenPhaseController, } from './c
 export { OptionWindowController, } from './controllers/option-window-controller/option-window-controller.js';
 export { MAX_FRAME_STEP, PaintGateController, } from './controllers/paint-gate-controller/paint-gate-controller.js';
 export { PlacementController } from './controllers/placement-controller/placement-controller.js';
-export { PopoverController, } from './controllers/popover-controller/popover-controller.js';
+export { hintInside, hintMayShow, onPanelOpen, PopoverController, } from './controllers/popover-controller/popover-controller.js';
 export { RelativeClockController, } from './controllers/relative-clock-controller/relative-clock-controller.js';
 export { RemotePlaybackController, } from './controllers/remote-playback-controller/remote-playback-controller.js';
 export { ReorderController, requestReorder, } from './controllers/reorder-controller/reorder-controller.js';
@@ -41,7 +41,7 @@ export { UpgradeController, } from './controllers/upgrade-controller/upgrade-con
 export { VirtualizeController, } from './controllers/virtualize-controller/virtualize-controller.js';
 export { Waterfall } from './controllers/virtualize-controller/waterfall.js';
 export { eventsForTag, registerElementEvents } from './events/element-events.js';
-export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeListenEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePasteEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDeviceButtonEvent, HelixDeviceKeyEvent, HelixDeviceScreenshotEvent, HelixDeviceScrollEvent, HelixDeviceSwipeEvent, HelixDeviceTapEvent, HelixDeviceTextEvent, HelixDeviceTouchEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixListenEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPastedEvent, HelixPinEvent, HelixPlotChangeEvent, HelixPlotTurnEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixStrandsFallbackEvent, HelixTerminalBellEvent, HelixTerminalInputEvent, HelixTerminalLinkEvent, HelixTerminalResizeEvent, HelixTerminalRestartEvent, HelixTerminalTitleEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, } from './events/events.js';
+export { HelixActionEvent, HelixActivateEvent, HelixAuraFallbackEvent, HelixBandEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeListenEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePasteEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeReorderEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixClearEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyErrorEvent, HelixCopyEvent, HelixCreateEvent, HelixDeviceButtonEvent, HelixDeviceKeyEvent, HelixDeviceScreenshotEvent, HelixDeviceScrollEvent, HelixDeviceSwipeEvent, HelixDeviceTapEvent, HelixDeviceTextEvent, HelixDeviceTouchEvent, HelixDismissEvent, HelixEditEvent, HelixEndEvent, HelixExpandEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixListenEvent, HelixLoadEvent, HelixLoadMoreEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPanelResizeEvent, HelixPastedEvent, HelixPinEvent, HelixPlotChangeEvent, HelixPlotTurnEvent, HelixPressEvent, HelixPreviewEvent, HelixPreviousEvent, HelixRangeChangeEvent, HelixReadEvent, HelixReadingChangeEvent, HelixReadingPressEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixSplitEvent, HelixStopEvent, HelixStrandsFallbackEvent, HelixTerminalBellEvent, HelixTerminalInputEvent, HelixTerminalLinkEvent, HelixTerminalResizeEvent, HelixTerminalRestartEvent, HelixTerminalTitleEvent, HelixToggleEvent, HelixTourAskEvent, HelixTourStatusEvent, HelixTypingEvent, } from './events/events.js';
 export { HelixElement, whenHydrated } from './helix-element/helix-element.js';
 export { LAYERS_RULE, MIRROR_RULE, SCROLLER_RULE, SPOKEN_RULE, TOUCHES_RULE, VIRTUAL_RULE, } from './helix-element/mark-rules.js';
 export { HelixFormElement } from './helix-form-element/helix-form-element.js';

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

@@ -292,12 +292,14 @@ export const MixinViewport = (Base) => {
             }
             const [up, start, end, down] = ['up', 'start', 'end', 'down'].map((way) => this.panGlyph(way));
             const button = this.controlTag;
+            const tip = this.tag('tooltip');
             const { material, raised } = this.controlAxes;
             const ground = material ?? nothing;
             return staticHtml `<div part="controls" role="toolbar" aria-label=${this.controlsLabel}>
         ${pan
                 ? staticHtml `<${button}
                   part="pan-up"
+                  id="pan-up"
                   exportparts="button: pan-up-button, live: pan-up-live, spinner: pan-up-spinner, text: pan-up-text"
                   label=${this.panLabel('up')}
                   material=${ground}
@@ -306,9 +308,10 @@ export const MixinViewport = (Base) => {
                   @helix-press=${stopPress}
                 >
                   <slot name="pan-up-icon">${up}</slot>
-                </${button}>
+                </${button}><${tip} for="pan-up" content=${this.panLabel('up')} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>
                 <${button}
                   part="pan-start"
+                  id="pan-start"
                   exportparts="button: pan-start-button, live: pan-start-live, spinner: pan-start-spinner, text: pan-start-text"
                   label=${this.panLabel('start')}
                   material=${ground}
@@ -317,9 +320,10 @@ export const MixinViewport = (Base) => {
                   @helix-press=${stopPress}
                 >
                   <slot name="pan-start-icon">${start}</slot>
-                </${button}>
+                </${button}><${tip} for="pan-start" content=${this.panLabel('start')} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>
                 <${button}
                   part="pan-end"
+                  id="pan-end"
                   exportparts="button: pan-end-button, live: pan-end-live, spinner: pan-end-spinner, text: pan-end-text"
                   label=${this.panLabel('end')}
                   material=${ground}
@@ -328,9 +332,10 @@ export const MixinViewport = (Base) => {
                   @helix-press=${stopPress}
                 >
                   <slot name="pan-end-icon">${end}</slot>
-                </${button}>
+                </${button}><${tip} for="pan-end" content=${this.panLabel('end')} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>
                 <${button}
                   part="pan-down"
+                  id="pan-down"
                   exportparts="button: pan-down-button, live: pan-down-live, spinner: pan-down-spinner, text: pan-down-text"
                   label=${this.panLabel('down')}
                   material=${ground}
@@ -339,11 +344,12 @@ export const MixinViewport = (Base) => {
                   @helix-press=${stopPress}
                 >
                   <slot name="pan-down-icon">${down}</slot>
-                </${button}>`
+                </${button}><${tip} for="pan-down" content=${this.panLabel('down')} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
                 : nothing}
         ${zoom
                 ? staticHtml `<${button}
                   part="zoom-in"
+                  id="zoom-in"
                   exportparts="button: zoom-in-button, live: zoom-in-live, spinner: zoom-in-spinner, text: zoom-in-text"
                   label=${this.zoomInLabel}
                   material=${ground}
@@ -352,9 +358,10 @@ export const MixinViewport = (Base) => {
                   @helix-press=${stopPress}
                 >
                   <slot name="zoom-in-icon">+</slot>
-                </${button}>
+                </${button}><${tip} for="zoom-in" content=${this.zoomInLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>
                 <${button}
                   part="zoom-out"
+                  id="zoom-out"
                   exportparts="button: zoom-out-button, live: zoom-out-live, spinner: zoom-out-spinner, text: zoom-out-text"
                   label=${this.zoomOutLabel}
                   material=${ground}
@@ -363,12 +370,13 @@ export const MixinViewport = (Base) => {
                   @helix-press=${stopPress}
                 >
                   <slot name="zoom-out-icon">−</slot>
-                </${button}>`
+                </${button}><${tip} for="zoom-out" content=${this.zoomOutLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
                 : nothing}
         ${more}
         ${fullscreen
                 ? staticHtml `<${button}
                 part="fullscreen"
+                id="fullscreen"
                 exportparts="button: fullscreen-button, live: fullscreen-live, spinner: fullscreen-spinner, text: fullscreen-text"
                 aria-pressed=${this.filled ? 'true' : 'false'}
                 label=${this.fullscreenLabel}
@@ -378,7 +386,7 @@ export const MixinViewport = (Base) => {
                 @helix-press=${stopPress}
               >
                 <slot name="fullscreen-icon">⤢</slot>
-              </${button}>`
+              </${button}><${tip} for="fullscreen" content=${this.fullscreenLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
                 : nothing}
       </div>`;
         }

package/dist/utils/audit-children/audit-children-off.d.ts

@@ -8,5 +8,7 @@ import type { auditChildren as audit, auditEntry as entry } from './audit-childr
  * builds. See `audit-children.ts`.
  */
 export declare const auditChildren: typeof audit;
+/** A production build has no audit, so nothing waits. See `QUIET`. */
+export declare const QUIET = 0;
 /** The missing-entry warning in a production build: nothing. See `auditEntry`. */
 export declare const auditEntry: typeof entry;

package/dist/utils/audit-children/audit-children-off.js

@@ -1,2 +1,3 @@
 export const auditChildren = () => { };
+export const QUIET = 0;
 export const auditEntry = () => { };

package/dist/utils/audit-children/audit-children.d.ts

@@ -1,3 +1,14 @@
+/**
+ * How long, in milliseconds, the page goes without loading a resource or
+ * registering a Helix family before a child still undefined counts as missing.
+ *
+ * **An app that imports its families with `import()` registers them after
+ * the page has loaded**, each as its chunk arrives, so a container can be
+ * defined and painted while the chunk holding its children is still in
+ * flight. Measured in the Hartley desktop app on October 14, 2026: Command was
+ * defined 90 ms before Option, and its families arrived over 230 ms.
+ */
+export declare const QUIET = 500;
 /**
  * Reports a child from another family that a container holds and nobody
  * registered, naming the entry to import.
@@ -9,8 +20,10 @@
  * This says so, once for each container tag and child tag on the page, with
  * the line to add.
  *
- * Asked once the page has loaded and painted, so an entry a later module
- * imports is not taken for a missing one.
+ * Asked once the page has loaded and painted. A child still undefined then
+ * is reported once the page has loaded and registered nothing for `QUIET`
+ * milliseconds and the tag is still undefined, so an entry a later module or
+ * a later chunk imports is not taken for a missing one.
  *
  * **In a development build only**, as `missing-name` is: every container would
  * pay for a sentence meant for the person writing the page. Core imports it as
@@ -40,6 +53,8 @@ export declare const auditChildren: (host: HTMLElement, part: string, entry: str
  * `attribute` is the one the page set, `entry` the entry after the tier's
  * package, such as `menu/filter`, and `consequence` what the missing entry
  * costs, after "so". `missing` is asked once the page has loaded and painted,
- * so an entry a later module imports is not taken for a missing one.
+ * and again once the page has loaded and registered nothing for `QUIET`
+ * milliseconds, so an entry a later module or a later chunk imports is not
+ * taken for a missing one.
  */
 export declare const auditEntry: (host: HTMLElement, attribute: string, entry: string, consequence: string, missing: () => boolean) => void;

package/dist/utils/audit-children/audit-children.js

@@ -1,3 +1,4 @@
+import { definedTags } from '../custom-element/custom-element.js';
 import { howToRegister } from '../how-to-register/how-to-register.js';
 import { reportRuntime } from '../report-runtime/report-runtime.js';
 const reported = new Set();
@@ -12,6 +13,27 @@ const afterPaint = (check) => {
         window.addEventListener('load', frame, { once: true });
     }
 };
+export const QUIET = 500;
+const activity = () => definedTags().length + (performance.getEntriesByType?.('resource').length ?? 0);
+const whenQuiet = () => new Promise((resolve) => {
+    let seen = activity();
+    let periods = 0;
+    const wait = () => {
+        setTimeout(() => {
+            const now = activity();
+            periods += 1;
+            if (now === seen || periods >= 20) {
+                resolve();
+            }
+            else {
+                seen = now;
+                wait();
+            }
+        }, QUIET);
+    };
+    wait();
+});
+const settled = (tag) => Promise.race([customElements.whenDefined(tag), whenQuiet()]);
 export const auditChildren = (host, part, entry, consequence, drawn = false) => {
     if (typeof window === 'undefined') {
         return;
@@ -22,11 +44,16 @@ export const auditChildren = (host, part, entry, consequence, drawn = false) =>
     if (reported.has(key)) {
         return;
     }
-    const check = () => {
-        if (reported.has(key) ||
-            !host.isConnected ||
-            customElements.get(tag) !== undefined ||
-            (!drawn && host.querySelector(tag) === null)) {
+    const fine = () => reported.has(key) ||
+        !host.isConnected ||
+        customElements.get(tag) !== undefined ||
+        (!drawn && host.querySelector(tag) === null);
+    const check = async () => {
+        if (fine()) {
+            return;
+        }
+        await settled(tag);
+        if (fine()) {
             return;
         }
         reported.add(key);
@@ -36,7 +63,7 @@ export const auditChildren = (host, part, entry, consequence, drawn = false) =>
             tag: host.localName,
         });
     };
-    afterPaint(check);
+    afterPaint(() => void check());
 };
 export const auditEntry = (host, attribute, entry, consequence, missing) => {
     if (typeof window === 'undefined') {
@@ -46,8 +73,13 @@ export const auditEntry = (host, attribute, entry, consequence, missing) => {
     if (reported.has(key)) {
         return;
     }
-    afterPaint(() => {
-        if (reported.has(key) || !host.isConnected || !missing()) {
+    const fine = () => reported.has(key) || !host.isConnected || !missing();
+    const check = async () => {
+        if (fine()) {
+            return;
+        }
+        await whenQuiet();
+        if (fine()) {
             return;
         }
         reported.add(key);
@@ -58,5 +90,6 @@ export const auditEntry = (host, attribute, entry, consequence, missing) => {
             message: `<${host.localName}> has \`${attribute}\` and its entry is not imported, so ${consequence}. Import '${pkg}/${entry}'.`,
             tag: host.localName,
         });
-    });
+    };
+    afterPaint(() => void check());
 };

package/dist/utils/toolbar-around/toolbar-around.d.ts

@@ -8,7 +8,8 @@
  * import Toolbar's class; Toolbar adds its own class for a third tag.
  *
  * `closest` stops at a shadow root, which is what a slotted child wants: its
- * toolbar is its light-DOM parent or above.
+ * toolbar is its light-DOM parent or above. It also stops at a panel, so a row
+ * in a menu opened from a toolbar is in no toolbar.
  */
 export declare const toolbarAround: (element: Element) => Element | null;
 /**