@fusion.dev/helix-headless 0.218.0 → 0.219.0

package/dist/tabs/tab/tab.js

@@ -88,7 +88,7 @@ let HelixHeadlessTab = class HelixHeadlessTab extends MixinDismissible(MixinSele
         @click=${this.handleLinkClick}
         @keydown=${this.handleKeydown}
       >
-        <slot></slot>${this.renderDismiss()}
+        <slot part="label"></slot>${this.renderDismiss()}
       </a>`;
         }
         return html `<button
@@ -102,7 +102,7 @@ let HelixHeadlessTab = class HelixHeadlessTab extends MixinDismissible(MixinSele
       @click=${() => this.select()}
       @keydown=${this.handleKeydown}
     >
-      <slot></slot>${this.renderDismiss()}
+      <slot part="label"></slot>${this.renderDismiss()}
     </button>`;
     }
 };

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

@@ -42,7 +42,7 @@ declare const HelixHeadlessTag_base: (new (...args: any[]) => import("@fusion.de
  *
  * @slot - The tag's label.
  * @slot dismiss-icon - Replaces the glyph on the remove button.
- * @slot start - The category the label belongs to, shown before it in a heavier weight.
+ * @slot start - The category the label belongs to, shown before it in a heavier weight, or an icon.
  *
  * @event {HelixDismissEvent} helix-dismiss - The remove button was pressed. The tag does not remove itself, so remove it in response. Cancelable.
  *

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

@@ -2,6 +2,7 @@ import { HelixElement, type TerminalResizeDetail } from '@fusion.dev/helix-core'
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import '../../button/index.js';
 import '../../icon-button/index.js';
+import '../../tooltip/index.js';
 import '../../toolbar/index.js';
 /** How a search through a terminal's output moves. */
 export interface TerminalFindOptions {
@@ -240,6 +241,16 @@ export interface TerminalSink {
  * @csspart restart-spinner - The ring the Restart button turns while it is pending.
  * @csspart restart-text - The Restart button's label.
  * @csspart status - The line under the terminal that says the process exited, or that Tab moves focus.
+ * @csspart tooltip-arrow - The arrow of the tooltip that names each button, forwarded from `Tooltip`.
+ * @csspart tooltip-arrow-bottom - The arrow while the bubble is below its button, on the bubble's top edge. Set together with `tooltip-arrow`.
+ * @csspart tooltip-arrow-left - The arrow while the bubble is left of its button, on the bubble's right edge. Set together with `tooltip-arrow`.
+ * @csspart tooltip-arrow-right - The arrow while the bubble is right of its button, on the bubble's left edge. Set together with `tooltip-arrow`.
+ * @csspart tooltip-arrow-top - The arrow while the bubble is above its button, on the bubble's bottom edge. Set together with `tooltip-arrow`.
+ * @csspart tooltip-surface - The bubble of the tooltip that names each button, forwarded from `Tooltip`.
+ * @csspart tooltip-surface-bottom - The bubble while it is below its button. Set together with `tooltip-surface`.
+ * @csspart tooltip-surface-left - The bubble while it is left of its button. Set together with `tooltip-surface`.
+ * @csspart tooltip-surface-right - The bubble while it is right of its button. Set together with `tooltip-surface`.
+ * @csspart tooltip-surface-top - The bubble while it is above its button. Set together with `tooltip-surface`.
  * @csspart viewport - The box the terminal is drawn in.
  *
  * @cssproperty --terminal-active-match-background-color - The ground of the current match of a search.

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

@@ -8,6 +8,7 @@ import { live } from 'lit/directives/live.js';
 import { html } from 'lit/static-html.js';
 import '../../button/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) => {
@@ -457,11 +458,13 @@ 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"
+              id="find"
               exportparts="button: find-button, live: find-live, spinner: find-spinner, text: find-text"
               .expanded=${this.findOpen}
               label=${this.findLabel}
@@ -469,11 +472,12 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
               @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 +485,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 +510,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}>`;
     }
@@ -514,6 +520,7 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
         }
         const toolbar = this.tag('toolbar');
         const button = this.tag('icon-button');
+        const tip = this.tag('tooltip');
         return html `<div part="find-bar" role="search" aria-label=${this.findLabel} ?hidden=${!this.findOpen}>
       <input
         part="find-field"
@@ -530,6 +537,7 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
       <${toolbar} part="find-controls" exportparts="toolbar: find-controls-toolbar" label=${this.findControlsLabel}>
         <${button}
           part="find-match-case"
+          id="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}
@@ -537,9 +545,10 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
           @helix-press=${stopPress}
         >
           <slot name="find-match-case-icon">${drawIcon(textAa)}</slot>
-        </${button}>
+        </${button}><${tip} for="find-match-case" content=${this.findMatchCaseLabel} 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="find-whole-word"
+          id="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}
@@ -547,9 +556,10 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
           @helix-press=${stopPress}
         >
           <slot name="find-whole-word-icon">${drawIcon(textAUnderline)}</slot>
-        </${button}>
+        </${button}><${tip} for="find-whole-word" content=${this.findWholeWordLabel} 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="find-regex"
+          id="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}
@@ -557,10 +567,11 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
           @helix-press=${stopPress}
         >
           <slot name="find-regex-icon">${drawIcon(asterisk)}</slot>
-        </${button}>
+        </${button}><${tip} for="find-regex" content=${this.findRegexLabel} 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}>
         <slot name="find-actions" part="find-actions"></slot>
         <${button}
           part="find-previous"
+          id="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}
@@ -568,9 +579,10 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
           @helix-press=${stopPress}
         >
           <slot name="find-previous-icon">${drawIcon(caretUp)}</slot>
-        </${button}>
+        </${button}><${tip} for="find-previous" content=${this.findPreviousLabel} 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="find-next"
+          id="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}
@@ -578,16 +590,17 @@ let HelixHeadlessTerminal = class HelixHeadlessTerminal extends HelixElement {
           @helix-press=${stopPress}
         >
           <slot name="find-next-icon">${drawIcon(caretDown)}</slot>
-        </${button}>
+        </${button}><${tip} for="find-next" content=${this.findNextLabel} 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="find-close"
+          id="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}>
+        </${button}><${tip} for="find-close" content=${this.findCloseLabel} 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}>
       </${toolbar}>
     </div>`;
     }

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'));