@fusion.dev/helix-headless 0.0.0-dev

package/dist/toolbar/root/toolbar-root.js

@@ -0,0 +1,260 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, HelixElement } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+/** Keys the toolbar handles, per the APG toolbar pattern. */
+const KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);
+/**
+ * A control that owns its tab stop rather than taking one on its host.
+ *
+ * Checked as a property rather than with `instanceof`, for the same reason the
+ * control list is: a toolbar holds anything, so the contract has to be
+ * something a foreign element can satisfy.
+ */
+const ownsTabStop = (node) => 'focusable' in node;
+/**
+ * Input types with no text to move a caret through and no value an arrow moves.
+ *
+ * Everything else claims the arrows for itself: a caret in a text field, a
+ * spinner on `number`, a value on `range`, a group on `radio`.
+ */
+const CARETLESS = new Set(['button', 'checkbox', 'color', 'file', 'image', 'reset', 'submit']);
+/**
+ * Whether the press was already the business of whatever it landed on.
+ *
+ * A toolbar holds anything, and some of what it holds uses the arrow keys for
+ * itself. The handler below found the control the press came from and moved the
+ * toolbar regardless, so an input in a toolbar could not be edited: pressing
+ * ArrowRight to move the caret moved the focus to the next control instead, and
+ * `preventDefault` meant the caret never moved at all.
+ *
+ * `composedPath()[0]` rather than `event.target`, which is retargeted to the
+ * control's host at the shadow boundary and cannot tell a text field inside a
+ * component from the component itself.
+ *
+ * `defaultPrevented` first, because a control that has already answered the
+ * press has said so in the way the platform provides, and a foreign control
+ * this package has never heard of has no other way to say it.
+ */
+const claimed = (event) => {
+    if (event.defaultPrevented) {
+        return true;
+    }
+    const inner = event.composedPath()[0];
+    if (!(inner instanceof HTMLElement)) {
+        return false;
+    }
+    if (inner.isContentEditable || inner.localName === 'textarea' || inner.localName === 'select') {
+        return true;
+    }
+    return inner.localName === 'input' && !CARETLESS.has(inner.type);
+};
+/**
+ * @summary A group of controls that share one tab stop.
+ *
+ * @description
+ * Separate from a button group, and the difference is what it holds: a group is
+ * homogeneous, a toolbar is not. A toolbar mixes buttons, toggles, and menus,
+ * which is why it is its own component rather than a variant of something.
+ *
+ * The whole toolbar is one tab stop and the arrows move between controls, so a
+ * page with three toolbars costs three presses of Tab to get past rather than
+ * thirty. Controls are found by asking the browser what is focusable rather
+ * than by matching tag names, so a toolbar works with anything put in it,
+ * including a consumer's own elements.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category layout
+ * @aliases Actions, Action bar
+ * @documentation https://helix.fusion.dev/components/toolbar
+ *
+ * @slot - The toolbar's controls.
+ *
+ * @csspart toolbar - The toolbar container.
+ */
+let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Accessible name for the toolbar.
+         */
+        this.label = 'Toolbar';
+        this.handleFocusIn = (event) => {
+            const control = this.controls.find((entry) => entry.contains(event.target));
+            if (control) {
+                this.setTabStop(control);
+            }
+        };
+        /**
+         * Gives the tab stop back to a control that still exists.
+         *
+         * `controls` excludes anything disabled or hidden, so disabling the control
+         * holding the stop dropped it out of the list while every other control was
+         * already at `-1`. The toolbar then had no tab stop at all and the keyboard
+         * could not reach it again, from a change as ordinary as a Save button
+         * disabling itself once the form is clean.
+         *
+         * `foreign` stays false, the same as the first claim: a control this package
+         * has never heard of that was never given `tabindex="-1"` is still in the
+         * document's own tab order, so it is never the one that gets stranded.
+         */
+        this.restoreTabStop = () => {
+            const controls = this.controls;
+            const held = controls.some((control) => ownsTabStop(control) ? control.focusable : control.tabIndex === 0);
+            if (controls.length > 0 && !held) {
+                this.setTabStop(controls[0], false);
+            }
+        };
+        this.handleKeydown = (event) => {
+            const forward = this.axis === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+            const back = this.axis === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+            if (!KEYS.has(event.key) || claimed(event)) {
+                return;
+            }
+            const controls = this.controls;
+            const current = controls.findIndex((entry) => entry.contains(event.target));
+            if (current === -1) {
+                return;
+            }
+            let next = current;
+            if (event.key === forward) {
+                next = (current + 1) % controls.length;
+            }
+            else if (event.key === back) {
+                next = (current - 1 + controls.length) % controls.length;
+            }
+            else if (event.key === 'Home') {
+                next = 0;
+            }
+            else if (event.key === 'End') {
+                next = controls.length - 1;
+            }
+            else {
+                // An arrow along the other axis is not ours; leave it to the page.
+                return;
+            }
+            event.preventDefault();
+            const target = controls[next];
+            this.setTabStop(target);
+            target?.focus();
+        };
+    }
+    /**
+     * Children that can take the tab stop, in document order.
+     *
+     * Every child that is not `disabled` and not `aria-hidden`, which is
+     * deliberately a test on the element rather than a list of tag names: a
+     * toolbar holds anything, including elements this package has never heard of.
+     * Client only, there being no tree to walk on the server.
+     *
+     * **It does not ask a child whether it is focusable, and the description said
+     * it did.** That would mean reading a `focusable` property off each one, which
+     * `focus` below does when moving the stop and this does not when choosing the
+     * set. The two are separable and only one of them was ever written: an element
+     * that is neither disabled nor hidden and still cannot take focus is counted
+     * here and skipped there.
+     */
+    get controls() {
+        return [...this.children].filter((child) => {
+            if (!(child instanceof HTMLElement)) {
+                return false;
+            }
+            return !child.hasAttribute('disabled') && child.getAttribute('aria-hidden') !== 'true';
+        });
+    }
+    /**
+     * Moves the single tab stop to one control.
+     *
+     * Prefers the control's own `focusable` property to writing `tabindex` on it.
+     * The attribute is a change to markup the consumer rendered, which a React
+     * consumer's hydration reports and does not patch up; a control that offers
+     * the property moves the stop inside its own shadow root instead.
+     *
+     * `tabindex` stays as the fallback, because a toolbar has to hold controls
+     * this package has never heard of.
+     */
+    setTabStop(active, foreign = true) {
+        for (const control of this.controls) {
+            const stop = control === active;
+            if (ownsTabStop(control)) {
+                control.focusable = stop;
+            }
+            else if (foreign) {
+                control.tabIndex = stop ? 0 : -1;
+            }
+        }
+    }
+    /**
+     * Sets the first tab stop once every custom control has upgraded.
+     *
+     * A custom element has no properties at all before it upgrades, so a pass
+     * that ran first would find no `focusable`, take the `tabindex` fallback, and
+     * write the very attribute this exists to avoid.
+     */
+    async claimTabStop() {
+        const pending = [...new Set(this.controls.map((control) => control.localName))].filter((name) => name.includes('-'));
+        await Promise.all(pending.map((name) => customElements.whenDefined(name)));
+        // Foreign controls are left alone until focus arrives. Writing `tabindex`
+        // on one before any interaction changes markup the consumer rendered while
+        // React is still hydrating it, which it reports and does not patch up.
+        // Until then they keep the tab order the document already gave them, and
+        // the first `focusin` takes over from there.
+        this.setTabStop(this.controls[0], false);
+    }
+    /**
+     * The orientation in force.
+     *
+     * Unset is horizontal, and stays unset: the default is the absent attribute,
+     * so a reflected default cannot appear on the host after hydration.
+     */
+    get axis() {
+        return this.orientation ?? 'horizontal';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('keydown', this.handleKeydown);
+        this.addEventListener('focusin', this.handleFocusIn);
+        /* `disabled` and `aria-hidden` are what `controls` filters on, so a change
+           to either is a change to the set the stop has to live in. Nothing else is
+           watched, which also keeps `setTabStop` writing `tabindex` from feeding
+           back into this. */
+        this.watcher = new MutationObserver(this.restoreTabStop);
+        this.watcher.observe(this, {
+            attributeFilter: ['disabled', 'aria-hidden'],
+            attributes: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('keydown', this.handleKeydown);
+        this.removeEventListener('focusin', this.handleFocusIn);
+        this.watcher?.disconnect();
+        this.watcher = undefined;
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        void this.claimTabStop();
+    }
+    render() {
+        return html `<div part="toolbar" role="toolbar" aria-label=${this.label} aria-orientation=${this.axis}>
+      <slot @slotchange=${() => this.claimTabStop()}></slot>
+    </div>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessToolbar.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessToolbar.prototype, "orientation", void 0);
+HelixHeadlessToolbar = __decorate([
+    customElement('helix-headless-toolbar')
+], HelixHeadlessToolbar);
+export { HelixHeadlessToolbar };

package/dist/tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './root/tooltip-root.js';

package/dist/tooltip/index.js

@@ -0,0 +1 @@
+export * from './root/tooltip-root.js';

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

@@ -0,0 +1,388 @@
+import { HelixElement, type Placement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+declare const HelixHeadlessTooltip_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
+/**
+ * @summary A short description that appears beside what it describes.
+ *
+ * @description
+ * The trigger is slotted and stays the consumer's own element. The bubble is
+ * rendered here, in the top layer through the popover API, so it clears any
+ * ancestor with `overflow: hidden` without a `z-index` anywhere.
+ *
+ * Position comes from `FloatingController`, which flips to another side when
+ * the preferred one does not fit and slides along it to stay in view.
+ *
+ * **Two forms, and they are not equivalent for a screen reader.**
+ *
+ * Wrapping is the convenience form and is right where the bubble decorates a
+ * control that already says what it is. The trigger stays the consumer's own
+ * element, slotted, and nothing here can describe it: an IDREF cannot cross a
+ * shadow boundary, an element reference is valid only into the same tree or a
+ * shadow-including *ancestor* (the bubble's tree is neither, it is inward), and
+ * a string on the trigger means writing to markup the consumer server-rendered.
+ * All three measured.
+ *
+ * `for` is the form that works. The tooltip sits *beside* the trigger in the
+ * consumer's own tree and names it by id, so both are in one tree and an IDREF
+ * between them is legal in the ordinary way:
+ *
+ * ```html
+ * <helix-button id="save" aria-describedby="save-tip">Save</helix-button>
+ * <helix-tooltip id="save-tip" for="save" content="Save your work"></helix-tooltip>
+ * ```
+ *
+ * Note that the reference points at *this host*, not at the bubble inside its
+ * shadow root: the description is computed from the flat tree, which descends
+ * into shadow content on its own.
+ *
+ * **The consumer writes that `aria-describedby`, and nothing here writes it for
+ * them.** WebAwesome and Spectrum Web Components both do write it, with
+ * `setAttribute` on the trigger at runtime, which is the one thing this library
+ * declines everywhere: React rendered that element on the server without the
+ * attribute and reports a mismatch it will not patch up. Two ids in the markup
+ * is the whole cost of the version that is correct before any JavaScript runs.
+ *
+ * Because it is the consumer's line to write, it is also theirs to forget, so
+ * `for` audits itself on first open and says so once, rather than on every
+ * open, since a warning that repeats is one people learn to filter out.
+ *
+ * It shows on hover and on focus, and hides on leave, on blur, on Escape, and
+ * once the trigger has been activated: the hint is spent when the control has
+ * been used.
+ * A tooltip that answers only the pointer is one a keyboard reader never sees.
+ *
+ * The pointer waits out `delay` first, or sweeping a row of controls flashes a
+ * tooltip for each of them. Focus does not wait: a keyboard reader landing on a
+ * control has already committed to it.
+ *
+ * Open state comes from `MixinControllerOpen`, so it announces `helix-before-open` and
+ * `helix-before-close` like every other overlay here, and a consumer can drive it with
+ * `open` where they need to.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category overlays
+ * @aliases Hint, Popup label
+ * @documentation https://helix.fusion.dev/components/tooltip
+ *
+ * @slot - The trigger.
+ * @slot content - The bubble's content, when `content` is not enough. Anything
+ * slotted here replaces the property, which is this slot's fallback.
+ *
+ * @event {HelixBeforeCloseEvent} helix-before-close - Fired before it hides, and cancelable.
+ * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the bubble shows, and cancelable.
+ * @event {Event} toggle - Says the state moved, carrying `newState` and `oldState`.
+ *
+ * @csspart arrow - The point, resting against the trigger.
+ * @csspart tooltip - The bubble.
+ */
+export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
+    /**
+     * The text shown in the bubble.
+     *
+     * The common case, and the fallback for the `content` slot: slot something
+     * there and it replaces this. Both cannot show at once, which is the point
+     * of using fallback content rather than rendering whichever is present.
+     */
+    content: string;
+    /**
+     * The id of the element this describes, in this tooltip's own tree.
+     *
+     * Set it and the tooltip stops wrapping: it renders no trigger, listens on
+     * the element it names, and points its bubble there. Leave it unset and the
+     * default slot is the trigger, which is the older form.
+     *
+     * Resolved through `getRootNode()`, so a tooltip inside another component's
+     * shadow root names an element in that root rather than in the document.
+     *
+     * **In React this arrives as a property and not as an attribute**, which is
+     * worth knowing before someone reads the DOM and thinks it did not take.
+     * Measured against React 19.2.8: `for` exists on the prototype, so React sets
+     * `element.for = 'save'` and writes nothing to the markup, where `content`
+     * and `placement`, which are not properties on the class at that moment, come
+     * through as attributes. Both paths reach the same place through Lit, so
+     * nothing is broken by it; a `[for]` selector would find nothing, which is
+     * why this does not reflect and nothing styles on it.
+     */
+    for: string;
+    /**
+     * Preferred side.
+     *
+     * It moves if that side does not fit.
+     */
+    placement: Placement;
+    /**
+     * Space between the trigger and the point of the bubble, in pixels.
+     *
+     * **Measured from the point, which is what the arrow being back changed.**
+     * The arrow is drawn half outside the bubble, so a gap measured to the
+     * bubble's edge is a smaller gap to the tip: at the default it left the point
+     * two pixels off the trigger, which reads as touching. The controller is
+     * given this plus however far the arrow actually protrudes, so eight means
+     * eight from whatever is nearest, arrow or edge, and a consumer who changes
+     * it changes the visible gap rather than a number the arrow then eats into.
+     */
+    offset: number;
+    /**
+     * The id of a box to keep the bubble inside, instead of the viewport.
+     *
+     * Resolved the way `for` is, so an id in the same tree, which is what lets a
+     * component name a box in its own shadow root. A chart does: its bubble is
+     * centered on a reading, and the first and last readings sit at the ends of
+     * the plot, so half the box hangs past the drawing and, measured on a chart
+     * in a 320px card, three pixels past the card itself.
+     *
+     * Clamping is on the cross axis only, which is what makes this safe to point
+     * at a box the bubble genuinely does not fit inside. See `within` on
+     * `FloatingController` for what happens if it is applied to the rest.
+     */
+    within: string;
+    /**
+     * Whether the tooltip never shows.
+     */
+    disabled: boolean;
+    /**
+     * Whether the bubble survives the trigger being used.
+     *
+     * **Activation takes a tooltip down, because a hint about what a control will
+     * do is spent once the control has done it.** That is right for a gear that
+     * opens a drawer and wrong for a control whose tooltip *becomes* the answer:
+     * `CopyButton` swaps its content from Copy to Copied on the same click, so the
+     * bubble was being hidden at the exact moment it had something to say. What a
+     * reader saw was a flash, and the confirmation the component had carefully
+     * written was never on screen long enough to read.
+     *
+     * So this is not "keep it open", it is "the hint is not spent": set it where
+     * the words change to describe what just happened, and leave it alone
+     * everywhere else. Escape, blur and pointer-leave still close it, because
+     * those are a reader saying they are done rather than a control saying it
+     * worked.
+     */
+    persist: boolean;
+    /**
+     * How long the pointer must rest before the bubble appears, in milliseconds.
+     *
+     * Without one, sweeping across a row of controls flashes a tooltip for each
+     * of them, which is noise rather than help. Focus opens with no delay: a
+     * keyboard reader arriving on a control has already committed to it.
+     */
+    delay: number;
+    /**
+     * How long the bubble stays after the pointer leaves, in milliseconds.
+     */
+    delayOut: number;
+    private timer;
+    /**
+     * What is currently keeping the bubble up.
+     *
+     * The pointer and focus are two holders and they shared one timer with
+     * nothing counting them, so whichever left last won: moving the pointer off a
+     * control that still had keyboard focus scheduled a hide and took the bubble
+     * away from under the reader. The same fault the toast timer had, and the
+     * same answer.
+     */
+    private readonly holds;
+    /**
+     * The element the bubble points at.
+     *
+     * The trigger, not the host. The host is `display: contents` so it wraps
+     * without adding a box, and an element that generates no box measures as
+     * nothing at the document origin: the bubble was placed against the corner
+     * of the viewport rather than against the button.
+     */
+    private get trigger();
+    /**
+     * Places the bubble again, for an anchor that moved without the page moving.
+     *
+     * Public because a chart needs it. Its mark walks from reading to reading
+     * while the page holds still, and `autoUpdate` watches scrolling, resizing
+     * and layout shift, none of which is that. Everything else floating here is
+     * anchored to something the page moves, which is why nothing wanted this
+     * until a chart did.
+     */
+    reposition(): void;
+    /**
+     * The element `for` names, or null.
+     *
+     * `getRootNode()` rather than `document`, which is what makes this work inside
+     * another component: an id is unique to a tree, and a tooltip in a shadow root
+     * names an element in that root. Client only, since the server has no tree to
+     * search.
+     */
+    private get named();
+    private readonly bubbleLayer;
+    /**
+     * The element `within` names, or null.
+     *
+     * Same resolution as `named`, and separate from it because they answer
+     * different questions: one is what the bubble points at and the other is what
+     * it must stay inside, and a component often has one and not the other.
+     */
+    private get enclosure();
+    private get bubble();
+    /**
+     * Whether there is anything to show.
+     *
+     * Asked of the slot rather than of the property, because either can carry
+     * the content. `assignedNodes` without `flatten` answers what the consumer
+     * provided and not what the fallback would render, which is exactly the
+     * question: a bubble with only fallback and an empty property is empty.
+     *
+     * Text or an element, because neither alone is the test. An element on its
+     * own would count `<span slot="content">   </span>` as something to say,
+     * and text on its own would count an icon as nothing, when an icon is the
+     * whole point of slotting rather than setting the property.
+     *
+     * Client only. The server has no assignment to inspect, and nothing calls
+     * this there: a tooltip opens in response to a pointer or to focus.
+     */
+    private get hasContent();
+    /**
+     * The bubble's words as a plain string, for naming the host.
+     *
+     * The property when it is set, otherwise whatever was slotted, flattened.
+     * Rich content collapses to its text, which is the right answer for a
+     * description: `Save ⌘ S` is what a reader needs, not the markup.
+     */
+    private get describedText();
+    /**
+     * Re-links the description when what is in the bubble changes.
+     *
+     * `updated` alone is not enough: content arriving from the light DOM changes
+     * no property here, so nothing would schedule the update that re-reads it. A
+     * consumer rendering the bubble's content after this upgrades, which is what
+     * a framework does, would leave the trigger describing nothing.
+     */
+    private readonly handleContentChange;
+    /** Shows the bubble, unless there is nothing to show. */
+    show(): void;
+    /**
+     * Closes the bubble, and cancels a show that had not happened yet.
+     *
+     * The timer matters as much as the state: a pointer that arrives and leaves
+     * inside the delay left one queued, and the tooltip appeared over whatever
+     * the reader had moved on to.
+     */
+    hide(): void;
+    /** Shows after the pointer has rested for `delay`. */
+    private readonly showLater;
+    /** Hides after `delayOut`, so crossing the gap to the bubble does not close it. */
+    private readonly hideLater;
+    /**
+     * Focus opens the bubble, but only the kind of focus a reader chose.
+     *
+     * **A mouse press focuses the button it pressed**, so an unconditional focus
+     * hold meant that after any click the bubble was held up by a reader who was
+     * not asking for it: moving the pointer away released the pointer hold, found
+     * a focus hold still set, and left the tooltip on screen until something else
+     * blurred the control.
+     *
+     * It never showed until `persist` arrived, because activation used to clear
+     * every hold and hide, so the click path threw the stale hold away before
+     * anyone could see it. A tooltip that survives its own activation is the first
+     * one to hold that focus long enough to matter.
+     *
+     * `:focus-visible` is the platform's own answer to "did they mean it", and a
+     * button does not match it on a mouse press. Keyboard focus still opens with no
+     * delay, which is the case this branch exists for: a reader who tabbed to a
+     * control has already committed to it. Where it does not match there is nothing
+     * to do, the pointer having opened the bubble already if a pointer is involved.
+     */
+    private readonly showNow;
+    private readonly releaseFocus;
+    /** Hides only once nothing is holding the bubble up. */
+    private release;
+    /**
+     * Activating the trigger closes the bubble, which nothing was doing.
+     *
+     * A tooltip is a hint about what a control will do, and once the control has
+     * been used the hint is spent. Nothing else was going to take it down either:
+     * `pointerleave` cannot fire while the pointer is still on the button it just
+     * pressed, and `focusout` does not fire when activation leaves focus where it
+     * was. So a gear that opened a drawer left its own label floating over the
+     * drawer until the reader moved the mouse away.
+     *
+     * `click` rather than `pointerdown`, because it is the one event both a mouse
+     * and a keyboard produce: Enter and Space on a focused button raise it, and a
+     * hint that outlived activation for keyboard readers alone would be the same
+     * bug with a smaller audience.
+     *
+     * Holds are cleared as well as hiding, the same as Escape. Leaving them set
+     * means the pointer is still recorded as being over the trigger, so the next
+     * `focusout` anywhere releases nothing and the bubble comes back on a
+     * `release` it should have been dropped from.
+     *
+     * `persist` opts out entirely, holds included: a tooltip whose content becomes
+     * the confirmation has not spent its hint, it has changed it, and the pointer
+     * really is still over the trigger. See the property.
+     */
+    private readonly handleActivate;
+    /**
+     * Escape closes the bubble from wherever the reader is.
+     *
+     * On the document, not on the host, which is where it was: a tooltip opened
+     * by hover has focus somewhere else entirely, so the press never reached this
+     * element and Escape worked only for the one case that needed it least. That
+     * is the case the pattern names, a reader escaping a tooltip obscuring what
+     * is under it, and it was the case that did nothing.
+     *
+     * Not stopped from propagating: a tooltip is not what the reader was trying
+     * to escape if it sits inside something else that also closes.
+     */
+    private readonly handleKeydown;
+    /**
+     * What the pointer and focus listeners are currently on.
+     *
+     * Held, rather than recomputed at removal time, because what `for` names can
+     * change: unbinding from wherever the element is *now* leaves a live listener
+     * on wherever it was, and a tooltip that opens from a control it no longer
+     * describes is worse than one that does not open at all.
+     */
+    private bound;
+    /**
+     * Puts the listeners on whatever the trigger is.
+     *
+     * The host when it wraps, since the trigger is inside it and both `focusin`
+     * and `focusout` bubble. The named element when `for` is set, because then the
+     * host wraps nothing and `pointerenter` does not bubble at all.
+     *
+     * Client only, and after the first render: `for` names an element that may not
+     * have upgraded, or existed, when this one connected.
+     */
+    private bind;
+    private unbind;
+    /** Said once per element, however many times it opens. */
+    private audited;
+    /**
+     * Checks that the trigger actually points back, and says so once if not.
+     *
+     * `for` is only half a link: this element finds the trigger, and the trigger
+     * has to name this element for a screen reader to read the two together. That
+     * second half is the consumer's line to write, deliberately, because writing
+     * it from here means `setAttribute` on markup they server-rendered. So it is
+     * theirs to forget, and a silent accessibility gap is the worst kind: the
+     * tooltip looks completely correct.
+     *
+     * On first open rather than on connect, because a framework may render the
+     * attribute after this element upgrades, and because a tooltip that never
+     * opens has described nothing eitherway.
+     *
+     * Either attribute counts. WebAwesome uses `aria-labelledby` over
+     * `aria-describedby` on purpose, their reasoning being that some screen
+     * readers want the description on the focusable element itself while a label
+     * reads on first focus regardless, and that is a live enough question that
+     * this should not be the thing to settle it.
+     */
+    private auditDescription;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-tooltip': HelixHeadlessTooltip;
+    }
+}
+export {};