@fusion.dev/helix-headless 0.218.0 → 0.220.0

package/dist/terminal/root/terminal-root.js

@@ -4,21 +4,13 @@ import { arrowClockwise, asterisk, broom, caretDown, caretUp, copy, cornersOut,
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
-import { live } from 'lit/directives/live.js';
 import { html } from 'lit/static-html.js';
 import '../../button/index.js';
+import '../../find/index.js';
 import '../../icon-button/index.js';
+import '../../tooltip/index.js';
 import '../../toolbar/index.js';
 import { isTab, shortcutOf, spokenChord } from '../keys.js';
-const readable = (source) => {
-    try {
-        new RegExp(source);
-        return true;
-    }
-    catch {
-        return false;
-    }
-};
 const ANSI = ['black', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white'];
 const camel = (name) => name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
 const unset = (color) => color === '' || color === 'transparent' || /^rgba\(\s*0,\s*0,\s*0,\s*0\s*\)$/.test(color);
@@ -57,10 +49,6 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
         this.tabMovesFocusLabel = 'Tab moves focus. Press {key} to type Tab in the terminal.';
         this.tabTypesLabel = 'Tab types in the terminal.';
         this.findOpen = false;
-        this.query = '';
-        this.matchIndex = -1;
-        this.matchCount = undefined;
-        this.invalid = false;
         this.tabMovesFocus = false;
         this.anySelected = false;
         this.hasActions = false;
@@ -117,19 +105,33 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
                 event.stopPropagation();
             }
         };
-        this.handleFindInput = (event) => {
-            this.query = event.target.value;
-            this.search(false, true);
+        this.finder = {
+            end: () => {
+                this.searchedWith = undefined;
+                this.renderer?.findEnd?.();
+            },
+            find: (query, direction) => {
+                const options = {
+                    backward: direction === 'previous',
+                    caseSensitive: query.caseSensitive,
+                    incremental: direction === 'first',
+                    regex: query.regex,
+                    wholeWord: query.wholeWord,
+                };
+                const searching = `${options.caseSensitive} ${options.regex} ${options.wholeWord}`;
+                if (this.searchedWith !== undefined && this.searchedWith !== searching) {
+                    this.renderer?.findEnd?.();
+                }
+                this.searchedWith = searching;
+                this.findMatchCase = query.caseSensitive;
+                this.findRegex = query.regex;
+                this.findWholeWord = query.wholeWord;
+                this.renderer?.find?.(query.search, options);
+                return undefined;
+            },
         };
-        this.handleFindKeys = (event) => {
-            if (event.key === 'Escape') {
-                event.preventDefault();
-                this.closeFind();
-            }
-            else if (event.key === 'Enter') {
-                event.preventDefault();
-                this.search(event.shiftKey);
-            }
+        this.handleFindToggle = (event) => {
+            this.findOpen = event.newState === 'open';
         };
         this.handleActions = (event) => {
             this.hasActions = event.target.assignedNodes().length > 0;
@@ -220,9 +222,7 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
             },
             found: (index, count) => {
                 if (current()) {
-                    this.matchIndex = index;
-                    this.matchCount = count;
-                    this.say(this.countText);
+                    this.find?.sink.found({ count, index });
                 }
             },
             input: (data, binary = false) => {
@@ -299,17 +299,6 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
                 ? renderer.selection !== undefined
                 : renderer.find !== undefined;
     }
-    get countText() {
-        if (this.invalid) {
-            return this.findInvalidLabel;
-        }
-        return this.matchCount === undefined
-            ? ''
-            : formatWords(this, 'matchesLabel', {
-                count: this.matchCount,
-                index: Math.max(this.matchIndex, 0) + 1,
-            });
-    }
     get tabKey() {
         return spokenChord('tab-focus', onApple());
     }
@@ -354,8 +343,9 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
     }
     release() {
         this.restoreInput();
-        this.findOpen = false;
-        this.matchCount = undefined;
+        if (this.find) {
+            this.find.element.open = false;
+        }
         this.anySelected = false;
     }
     takes(shortcut) {
@@ -372,45 +362,7 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
         return true;
     }
     async openFind() {
-        this.findOpen = true;
-        await this.updateComplete;
-        const field = this.partNamed('find-field');
-        field?.focus();
-        field?.select();
-        if (this.query !== '') {
-            this.search(false, true);
-        }
-    }
-    closeFind() {
-        this.findOpen = false;
-        this.matchCount = undefined;
-        this.matchIndex = -1;
-        this.renderer?.findEnd?.();
-        this.focus();
-    }
-    search(backward, incremental = false) {
-        if (this.query === '' || (this.findRegex && !readable(this.query))) {
-            this.invalid = this.query !== '';
-            this.matchCount = undefined;
-            this.renderer?.findEnd?.();
-            if (this.invalid) {
-                this.say(this.findInvalidLabel);
-            }
-            return;
-        }
-        this.invalid = false;
-        this.renderer?.find?.(this.query, {
-            backward,
-            caseSensitive: this.findMatchCase,
-            incremental,
-            regex: this.findRegex,
-            wholeWord: this.findWholeWord,
-        });
-    }
-    toggleOption(option) {
-        this[option] = !this[option];
-        this.renderer?.findEnd?.();
-        this.search(false, true);
+        await this.find?.element.show();
     }
     async copySelection() {
         const text = this.renderer?.selection?.() ?? '';
@@ -441,6 +393,15 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
         if (this.renderer && (changed.has('inputLabel') || changed.has('tabHintLabel'))) {
             this.nameInput();
         }
+        this.attachFind();
+    }
+    attachFind() {
+        const element = this.partNamed('find') ?? undefined;
+        if (element === this.find?.element) {
+            return;
+        }
+        this.find?.sink.detach();
+        this.find = element ? { element, sink: element.attach(this.finder) } : undefined;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -457,23 +418,26 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
     renderControls() {
         const toolbar = this.tag('toolbar');
         const button = this.tag('icon-button');
+        const tip = this.tag('tooltip');
         return html `<${toolbar} part="controls" exportparts="toolbar: controls-toolbar" label=${this.controlsLabel}>
       <slot name="actions" part="actions" @slotchange=${this.handleActions}></slot>
       ${this.draws('find')
             ? html `<${button}
-              part="find"
-              exportparts="button: find-button, live: find-live, spinner: find-spinner, text: find-text"
+              part="find-toggle"
+              id="find"
+              exportparts="button: find-toggle-button, live: find-toggle-live, spinner: find-toggle-spinner, text: find-toggle-text"
               .expanded=${this.findOpen}
               label=${this.findLabel}
-              @click=${() => (this.findOpen ? this.closeFind() : void this.openFind())}
+              @click=${() => (this.findOpen ? this.find?.element.hide() : void this.openFind())}
               @helix-press=${stopPress}
             >
               <slot name="find-icon">${drawIcon(magnifyingGlass)}</slot>
-            </${button}>`
+            </${button}><${tip} for="find" content=${this.findLabel} 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}
       ${this.draws('copy')
             ? html `<${button}
               part="copy"
+              id="copy"
               exportparts="button: copy-button, live: copy-live, spinner: copy-spinner, text: copy-text"
               ?disabled=${!this.anySelected}
               label=${this.copyLabel}
@@ -481,22 +445,24 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
               @helix-press=${stopPress}
             >
               <slot name="copy-icon">${drawIcon(copy)}</slot>
-            </${button}>`
+            </${button}><${tip} for="copy" content=${this.copyLabel} 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}
       ${this.draws('clear')
             ? html `<${button}
               part="clear"
+              id="clear"
               exportparts="button: clear-button, live: clear-live, spinner: clear-spinner, text: clear-text"
               label=${this.clearLabel}
               @click=${() => this.clear()}
               @helix-press=${stopPress}
             >
               <slot name="clear-icon">${drawIcon(broom)}</slot>
-            </${button}>`
+            </${button}><${tip} for="clear" content=${this.clearLabel} 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}
       ${this.draws('fullscreen')
             ? html `<${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}
@@ -504,7 +470,7 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
               @helix-press=${stopPress}
             >
               <slot name="fullscreen-icon">${drawIcon(cornersOut)}</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}
     </${toolbar}>`;
     }
@@ -512,84 +478,34 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
         if (!this.draws('find')) {
             return nothing;
         }
-        const toolbar = this.tag('toolbar');
-        const button = this.tag('icon-button');
-        return html `<div part="find-bar" role="search" aria-label=${this.findLabel} ?hidden=${!this.findOpen}>
-      <input
-        part="find-field"
-        aria-label=${this.findLabel}
-        autocomplete="off"
-        placeholder=${this.findLabel}
-        spellcheck="false"
-        type="search"
-        .value=${live(this.query)}
-        @input=${this.handleFindInput}
-        @keydown=${this.handleFindKeys}
-      />
-      <span part="find-count" aria-hidden="true">${this.countText}</span>
-      <${toolbar} part="find-controls" exportparts="toolbar: find-controls-toolbar" label=${this.findControlsLabel}>
-        <${button}
-          part="find-match-case"
-          exportparts="button: find-match-case-button, live: find-match-case-live, spinner: find-match-case-spinner, text: find-match-case-text"
-          aria-pressed=${this.findMatchCase ? 'true' : 'false'}
-          label=${this.findMatchCaseLabel}
-          @click=${() => this.toggleOption('findMatchCase')}
-          @helix-press=${stopPress}
-        >
-          <slot name="find-match-case-icon">${drawIcon(textAa)}</slot>
-        </${button}>
-        <${button}
-          part="find-whole-word"
-          exportparts="button: find-whole-word-button, live: find-whole-word-live, spinner: find-whole-word-spinner, text: find-whole-word-text"
-          aria-pressed=${this.findWholeWord ? 'true' : 'false'}
-          label=${this.findWholeWordLabel}
-          @click=${() => this.toggleOption('findWholeWord')}
-          @helix-press=${stopPress}
-        >
-          <slot name="find-whole-word-icon">${drawIcon(textAUnderline)}</slot>
-        </${button}>
-        <${button}
-          part="find-regex"
-          exportparts="button: find-regex-button, live: find-regex-live, spinner: find-regex-spinner, text: find-regex-text"
-          aria-pressed=${this.findRegex ? 'true' : 'false'}
-          label=${this.findRegexLabel}
-          @click=${() => this.toggleOption('findRegex')}
-          @helix-press=${stopPress}
-        >
-          <slot name="find-regex-icon">${drawIcon(asterisk)}</slot>
-        </${button}>
-        <slot name="find-actions" part="find-actions"></slot>
-        <${button}
-          part="find-previous"
-          exportparts="button: find-previous-button, live: find-previous-live, spinner: find-previous-spinner, text: find-previous-text"
-          ?disabled=${!this.matchCount}
-          label=${this.findPreviousLabel}
-          @click=${() => this.search(true)}
-          @helix-press=${stopPress}
-        >
-          <slot name="find-previous-icon">${drawIcon(caretUp)}</slot>
-        </${button}>
-        <${button}
-          part="find-next"
-          exportparts="button: find-next-button, live: find-next-live, spinner: find-next-spinner, text: find-next-text"
-          ?disabled=${!this.matchCount}
-          label=${this.findNextLabel}
-          @click=${() => this.search(false)}
-          @helix-press=${stopPress}
-        >
-          <slot name="find-next-icon">${drawIcon(caretDown)}</slot>
-        </${button}>
-        <${button}
-          part="find-close"
-          exportparts="button: find-close-button, live: find-close-live, spinner: find-close-spinner, text: find-close-text"
-          label=${this.findCloseLabel}
-          @click=${() => this.closeFind()}
-          @helix-press=${stopPress}
-        >
-          <slot name="find-close-icon">${drawIcon(x)}</slot>
-        </${button}>
-      </${toolbar}>
-    </div>`;
+        const find = this.tag('find');
+        return html `<${find}
+      part="find"
+      exportparts="actions: find-actions, bar: find-bar, close: find-close, close-button: find-close-button, close-live: find-close-live, close-spinner: find-close-spinner, close-text: find-close-text, controls: find-controls, controls-toolbar: find-controls-toolbar, count: find-count, field: find-field, live: find-live, match-case: find-match-case, match-case-button: find-match-case-button, match-case-live: find-match-case-live, match-case-pressed: find-match-case-pressed, match-case-spinner: find-match-case-spinner, match-case-text: find-match-case-text, next: find-next, next-button: find-next-button, next-live: find-next-live, next-spinner: find-next-spinner, next-text: find-next-text, previous: find-previous, previous-button: find-previous-button, previous-live: find-previous-live, previous-spinner: find-previous-spinner, previous-text: find-previous-text, regex: find-regex, regex-button: find-regex-button, regex-live: find-regex-live, regex-pressed: find-regex-pressed, regex-spinner: find-regex-spinner, regex-text: find-regex-text, replace-all-button: find-replace-all-button, replace-all-live: find-replace-all-live, replace-all-spinner: find-replace-all-spinner, replace-all-text: find-replace-all-text, replace-all: find-replace-all, replace-button: find-replace-button, replace-field: find-replace-field, replace-live: find-replace-live, replace-spinner: find-replace-spinner, replace-text: find-replace-text, replace-toggle-button: find-replace-toggle-button, replace-toggle-live: find-replace-toggle-live, replace-toggle-spinner: find-replace-toggle-spinner, replace-toggle-text: find-replace-toggle-text, replace-toggle: find-replace-toggle, replace: find-replace, whole-word: find-whole-word, whole-word-button: find-whole-word-button, whole-word-live: find-whole-word-live, whole-word-pressed: find-whole-word-pressed, whole-word-spinner: find-whole-word-spinner, whole-word-text: find-whole-word-text"
+      close-label=${this.findCloseLabel}
+      controls-label=${this.findControlsLabel}
+      invalid-label=${this.findInvalidLabel}
+      label=${this.findLabel}
+      ?match-case=${this.findMatchCase}
+      match-case-label=${this.findMatchCaseLabel}
+      matches-label=${this.matchesLabel}
+      next-label=${this.findNextLabel}
+      previous-label=${this.findPreviousLabel}
+      ?regex=${this.findRegex}
+      regex-label=${this.findRegexLabel}
+      shortcut=""
+      ?whole-word=${this.findWholeWord}
+      whole-word-label=${this.findWholeWordLabel}
+      @toggle=${this.handleFindToggle}
+    >
+      <slot name="find-actions" slot="actions"></slot>
+      <slot name="find-match-case-icon" slot="match-case-icon">${drawIcon(textAa)}</slot>
+      <slot name="find-whole-word-icon" slot="whole-word-icon">${drawIcon(textAUnderline)}</slot>
+      <slot name="find-regex-icon" slot="regex-icon">${drawIcon(asterisk)}</slot>
+      <slot name="find-previous-icon" slot="previous-icon">${drawIcon(caretUp)}</slot>
+      <slot name="find-next-icon" slot="next-icon">${drawIcon(caretDown)}</slot>
+      <slot name="find-close-icon" slot="close-icon">${drawIcon(x)}</slot>
+    </${find}>`;
     }
     renderLook() {
         return html `<span data-look hidden aria-hidden="true" style="color: transparent">
@@ -765,18 +681,6 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessTerminal.prototype, "findOpen", void 0);
-__decorate([
-    state()
-], HelixHeadlessTerminal.prototype, "query", void 0);
-__decorate([
-    state()
-], HelixHeadlessTerminal.prototype, "matchIndex", void 0);
-__decorate([
-    state()
-], HelixHeadlessTerminal.prototype, "matchCount", void 0);
-__decorate([
-    state()
-], HelixHeadlessTerminal.prototype, "invalid", void 0);
 __decorate([
     state()
 ], HelixHeadlessTerminal.prototype, "tabMovesFocus", void 0);

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

@@ -10,7 +10,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * The toolbar is one tab stop, and the arrow keys move between its controls, so
  * three toolbars take three presses of Tab to pass. Any element the browser can
  * focus counts as a control, including your own elements. A child that takes no
- * focus, such as a divider, is skipped. A menu is reached at its trigger.
+ * focus, such as a divider, is skipped. A menu is reached at its trigger. A
+ * disabled control is skipped too, except a Button with
+ * `focusable-when-disabled`, which the arrows still reach so its tooltip can
+ * say why it is disabled.
  *
  * A Divider in the toolbar is a separator across the toolbar's axis, as React
  * Aria's is: vertical in a horizontal toolbar and horizontal in a vertical

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

@@ -1,5 +1,5 @@
 import { HelixElement, OpenPhaseController, type Placement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessTooltip_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
 /**
  * @summary A short text that appears next to an element on hover and focus.
@@ -85,6 +85,7 @@ declare const HelixHeadlessTooltip_base: (new (...args: any[]) => import("@fusio
  * @cssstate placed-top - While the bubble sits above its trigger.
  */
 export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
+    static styles: CSSResultGroup;
     /**
      * The text shown in the bubble.
      *
@@ -314,6 +315,12 @@ export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
      * every control turns the scan into a series of pauses.
      */
     private readonly showLater;
+    /**
+     * Shows for a pointer or for focus, unless a menu or popover is open that
+     * the tooltip is not inside. `show()` and `open` are the consumer's own and
+     * are not refused.
+     */
+    private showForReader;
     /**
      * The pointer reached the bubble, in the `for` form.
      *
@@ -442,6 +449,21 @@ export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
      * renders as its name, then the trigger's text.
      */
     private triggerSays;
+    /**
+     * A menu or popover opened outside the tooltip, so the tooltip yields to it.
+     *
+     * **A tooltip outside an open panel sits over the panel the reader is
+     * using.** A menu opened from the keyboard, or from a control beside the
+     * trigger while the pointer is still on it, is opened with no `click` on the
+     * trigger and no `pointerleave`, so neither takes the bubble down. Opening a
+     * menu by its keys from a trigger inside the tooltip also moves focus into
+     * the menu, and that `focusin` showed the bubble again. A pointer or focus
+     * does not show the bubble while such a panel is open, and this closes one
+     * they hold up as the panel opens. A bubble the consumer opened with `show()`
+     * or `open` holds nothing and stays.
+     */
+    private readonly yieldTo;
+    private stopYielding;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;

package/dist/tooltip/root/tooltip-root.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
-import { anchorElement, arrowReach, customElement, elementById, focusTarget, HelixElement, hostAria, linkDescription, MixinControllerOpen, numberConverter, OpenPhaseController, onUnlessFalse, PopoverController, reportRuntime, sideOf, timeConverter, unlinkDescription, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { anchorElement, arrowReach, customElement, elementById, focusTarget, HelixElement, hintInside, hintMayShow, hostAria, linkDescription, MixinControllerOpen, numberConverter, OpenPhaseController, onPanelOpen, onUnlessFalse, PopoverController, reportRuntime, sideOf, timeConverter, unlinkDescription, } from '@fusion.dev/helix-core';
+import { css, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 const GENERIC = new Set(['div', 'p', 'section', 'span']);
 const WARMTH = Symbol.for('fusion.helix.tooltip.warmth');
@@ -28,6 +28,7 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
             anchor: () => this.trigger,
             arrow: () => this.partNamed('arrow'),
             boundary: () => [this, this.named],
+            hints: 'keep',
             offset: () => this.offset + arrowReach(this.partNamed('arrow')),
             onDismiss: () => {
                 this.holds.clear();
@@ -65,10 +66,10 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
             const warm = warmth();
             const others = [...warm.showing].some((one) => one !== this);
             if (others || performance.now() - warm.hidAt < this.skipDelay) {
-                this.show();
+                this.showForReader();
                 return;
             }
-            this.timer = setTimeout(() => this.show(), this.delay);
+            this.timer = setTimeout(() => this.showForReader(), this.delay);
         };
         this.holdOnBubble = () => {
             if (!this.hoverable) {
@@ -97,7 +98,7 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
                 return;
             }
             this.holds.add('focus');
-            this.show();
+            this.showForReader();
         };
         this.releaseFocus = () => {
             this.holds.delete('focus');
@@ -115,7 +116,18 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
             this.link(true, event.type === 'focusin' && first instanceof Element ? first : undefined);
         };
         this.audited = false;
+        this.yieldTo = (surface) => {
+            if (this.open && this.holds.size > 0 && !hintInside(surface, this)) {
+                this.holds.clear();
+                this.hide();
+            }
+        };
+    }
+    static { this.styles = css `
+    :host {
+      display: contents;
     }
+  `; }
     get trigger() {
         const named = this.named;
         if (named) {
@@ -180,6 +192,11 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
         }
         this.bubbleLayer.hide();
     }
+    showForReader() {
+        if (hintMayShow(this)) {
+            this.show();
+        }
+    }
     release() {
         if (this.holds.size === 0) {
             this.hide();
@@ -277,6 +294,9 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
             });
             return;
         }
+        if (this.triggerSays(this.describedText)) {
+            return;
+        }
         reportRuntime({
             kind: 'unlinked-trigger',
             message: `<${this.localName} for="${this.for}"> is not read out with its trigger. The link is ` +
@@ -294,12 +314,15 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
     }
     connectedCallback() {
         super.connectedCallback();
+        this.stopYielding ??= onPanelOpen(this.yieldTo);
         if (this.hasUpdated) {
             this.bind();
         }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.stopYielding?.();
+        this.stopYielding = undefined;
         this.unbind();
         this.holds.clear();
         clearTimeout(this.timer);

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

@@ -306,6 +306,7 @@ export declare class HelixHeadlessTour extends HelixHeadlessTour_base {
     private light;
     /** Keeps `sizer` on the lit target, and on nothing once there is none. */
     private watch;
+    private readonly handleSlotChange;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/tour/root/tour-root.js

@@ -75,6 +75,9 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
         };
         this.followed = false;
         this.veiled = false;
+        this.handleSlotChange = () => {
+            this.requestUpdate();
+        };
     }
     static { this.words = 'helix-tour'; }
     get index() {
@@ -415,7 +418,7 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
             aria-hidden="true"
             style=${`left: ${spot.left}px; top: ${spot.top}px; block-size: ${spot.height}px; inline-size: ${spot.width}px; --tour-spotlight-x: ${spot.left}px; --tour-spotlight-y: ${spot.top}px; --tour-spotlight-width: ${spot.width}px; --tour-spotlight-height: ${spot.height}px`}
           ></div>`}
-      <slot></slot>`;
+      <slot @slotchange=${this.handleSlotChange}></slot>`;
     }
 };
 __decorate([

package/dist/tour/stop/tour-stop.js

@@ -31,6 +31,7 @@ let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
         this.floating = new PopoverController(this, {
             anchor: () => this.target,
             arrow: () => this.partNamed('arrow'),
+            hints: 'keep',
             offset: () => {
                 const tour = this.parentElement;
                 return (tour?.spotlightPadding ?? 0) + arrowReach(this.partNamed('arrow'));

package/dist/tree/item/tree-item.d.ts

@@ -29,6 +29,10 @@ declare const HelixHeadlessTreeItem_base: (new (...args: any[]) => import("@fusi
  * A `disabled` item is reached by the arrow keys and announced as unavailable,
  * and a press, Enter or Space on it does nothing.
  *
+ * A closed branch's children are hidden until found: the browser's find and
+ * Find search them, and the branch opens on the one that holds the match,
+ * unless `helix-before-open` is canceled.
+ *
  * A `lazy` item is a branch whose children you load when it opens: opening it
  * sends `helix-load`, the row says it is busy, and the children you add appear
  * in it. Remove `lazy` once they are in.
@@ -264,6 +268,13 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
      * its children.
      */
     private follow;
+    /**
+     * A search found a match among the closed branch's children, and shows it
+     * next: the browser's find or Find. The branch opens, and where the page
+     * refuses, its children are hidden again once the search has shown them, as
+     * Accordion's section is.
+     */
+    private readonly handleBeforeMatch;
     /** A press on the check mark checks the item and leaves a branch as it is. */
     private readonly handleCheckClick;
     private readonly handleToggleClick;

package/dist/tree/item/tree-item.js

@@ -21,6 +21,19 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
         this.focusable = false;
         this.value = '';
         this.branch = false;
+        this.handleBeforeMatch = (event) => {
+            if (this.open || this.requestOpen(true)) {
+                return;
+            }
+            const group = event.currentTarget;
+            const observer = new MutationObserver(() => {
+                observer.disconnect();
+                if (!this.open && !group.hasAttribute('hidden')) {
+                    group.setAttribute('hidden', 'until-found');
+                }
+            });
+            observer.observe(group, { attributeFilter: ['hidden'] });
+        };
         this.handleCheckClick = (event) => {
             event.preventDefault();
             event.stopPropagation();
@@ -227,7 +240,12 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
              branch reports children it has no relationship to. The pattern is
              \`treeitem\` containing \`group\`, which is also what an \`<li>\`
              holding a \`<ul>\` is. -->
-        <div part="group" role="group" ?hidden=${!this.open}>
+        <div
+          part="group"
+          role=${this.open ? 'group' : nothing}
+          hidden=${this.open ? nothing : 'until-found'}
+          @beforematch=${this.handleBeforeMatch}
+        >
           <slot name="children"></slot>
         </div>
       </div>`;