@fusion.dev/helix-headless 0.143.0 → 0.144.0

package/dist/toast/root/toast-root.js

@@ -4,13 +4,37 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, deepActiveElement, deepContains, focusableElements, HelixElement, hostAria, scrollHolders, } from '@fusion.dev/helix-core';
+import { customElement, deepActiveElement, deepContains, FocusScopeController, fillTemplate, focusableElements, HelixElement, hostAria, scrollHolders, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { matchesHotkey, parseHotkey } from '../hotkey.js';
 let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
     constructor() {
         super(...arguments);
-        this.label = 'Notifications';
+        this.hotkey = 'F8';
+        this.label = 'Notifications ({hotkey})';
+        this.scope = new FocusScopeController(this, {
+            contents: () => this.showing.flatMap((one) => {
+                const target = focusTarget(one);
+                return target ? [target] : [];
+            }),
+            surface: () => this.region,
+        });
+        this.handleHotkey = (event) => {
+            if (event.defaultPrevented || !matchesHotkey(event, parseHotkey(this.hotkey))) {
+                return;
+            }
+            if (this.scope.holdsFocus) {
+                event.preventDefault();
+                this.scope.leave();
+                return;
+            }
+            if (this.showing.length > 0) {
+                event.preventDefault();
+                this.scope.enter();
+            }
+        };
+        this.made = new WeakSet();
         this.handleFocusIn = (event) => {
             const from = event.relatedTarget;
             if (from instanceof HTMLElement && !deepContains(this, from)) {
@@ -57,11 +81,41 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        hostAria(this.internals, { label: this.label, role: 'status' });
+        hostAria(this.internals, {
+            label: fillTemplate(this.label, { hotkey: this.hotkey }),
+            role: 'region',
+        });
         this.internals.ariaLive = 'polite';
         this.internals.ariaRelevant = 'additions';
         this.internals.ariaAtomic = 'false';
     }
+    add(message, options = {}) {
+        const tier = this.constructor.tier;
+        const item = document.createElement(`${tier}toast-item`);
+        item.textContent = message;
+        if (options.tone) {
+            item.setAttribute('tone', options.tone);
+        }
+        if (options.duration !== undefined) {
+            item.setAttribute('duration', String(options.duration));
+        }
+        if (options.dismissible ?? true) {
+            item.toggleAttribute('dismissible', true);
+        }
+        this.made.add(item);
+        this.append(item);
+        return item;
+    }
+    sweep() {
+        for (const one of [...this.children]) {
+            if (!(one instanceof HTMLElement) || !one.hidden || !this.made.has(one)) {
+                continue;
+            }
+            this.made.delete(one);
+            const running = typeof one.getAnimations === 'function' ? one.getAnimations({ subtree: true }) : [];
+            void Promise.allSettled(running.map((animation) => animation.finished)).then(() => one.remove());
+        }
+    }
     get showing() {
         return [...this.children].filter((one) => one instanceof HTMLElement && !one.hidden);
     }
@@ -129,8 +183,10 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
         super.connectedCallback();
         this.addEventListener('focusin', this.handleFocusIn);
         this.addEventListener('helix-dismiss', this.handleDismiss);
+        document.addEventListener('keydown', this.handleHotkey);
         this.watcher = new MutationObserver((records) => {
             this.place(records.flatMap((record) => [...record.addedNodes]));
+            this.sweep();
         });
         this.watcher.observe(this, {
             attributeFilter: ['hidden'],
@@ -146,6 +202,7 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
         super.disconnectedCallback();
         this.removeEventListener('focusin', this.handleFocusIn);
         this.removeEventListener('helix-dismiss', this.handleDismiss);
+        document.removeEventListener('keydown', this.handleHotkey);
         this.watcher?.disconnect();
         this.watcher = undefined;
     }
@@ -154,9 +211,12 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
         this.place();
     }
     render() {
-        return html `<div part="region" popover="manual"><slot></slot></div>`;
+        return html `<div part="region" popover="manual" tabindex="-1"><slot></slot></div>`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessToast.prototype, "hotkey", void 0);
 __decorate([
     property()
 ], HelixHeadlessToast.prototype, "label", void 0);

package/dist/toggle/group/toggle-group.d.ts

@@ -14,6 +14,17 @@ declare const HelixHeadlessToggleGroup_base: (new (...args: any[]) => import("@f
  * Measurement happens on the client, so the server renders the indicator hidden
  * and it fades in once measured.
  *
+ * `selection-mode="multiple"` makes the group a toolbar of buttons that each
+ * say whether they are pressed with `aria-pressed`, as React Aria's
+ * ToggleButtonGroup and Radix's ToggleGroup do. A press presses or releases
+ * one item, the arrow keys move focus without pressing, and `value` is the
+ * pressed values, comma separated, which `values` also gives as a list. The
+ * form receives one entry per pressed value. The indicator stays hidden, and
+ * each pressed item is marked with `:state(pressed)`.
+ *
+ * `orientation="vertical"` runs the items down a column, says so to the
+ * accessibility tree, and the up and down arrows move between them.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases SegmentedControl, Segmented, Navigation, Switcher
@@ -98,6 +109,11 @@ export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_b
      * goes to the first item that can be chosen, as in `Radio.Group`.
      */
     private entry;
+    /** The item focus was last on, in a toolbar, which holds its tab stop. */
+    private lastFocused;
+    private readonly noteFocus;
+    /** Whether several items can be pressed at once. */
+    private get multiple();
     /**
      * Whether the group holds a tab stop of its own.
      *
@@ -110,6 +126,37 @@ export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_b
      * reason to set it.
      */
     focusable: boolean;
+    /**
+     * Where the group's label sits. `start` puts it on the track's line.
+     *
+     * Absent is above, which is what a field looks like and what almost every
+     * group wants. `start` is for a row of controls that are labeled rather than
+     * a form of fields: a toolbar reads as one line, and a label stacked over
+     * every group in it turns one row into two.
+     *
+     * **A placement rather than a slot, and that is the whole point of it.** A
+     * `start` slot would let a consumer put the word there, and would also let
+     * them put it there *instead of* setting `label`, which is the group's
+     * accessible name: the set would then be named for nobody using a screen
+     * reader while looking correct to everybody else. Worse, setting both draws
+     * it twice. One property moves the label the consumer already has to give,
+     * and cannot be used to remove it.
+     */
+    labelPlacement?: 'start';
+    /**
+     * The direction the items run. `vertical` puts them in a column, and the up
+     * and down arrows move between them.
+     *
+     * Optional, so the attribute is absent until a consumer writes it.
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Whether one item is chosen, as a radio group, or several can be pressed,
+     * as a toolbar of buttons with `aria-pressed`.
+     *
+     * Optional, so the attribute is absent until a consumer writes it.
+     */
+    selectionMode?: 'multiple' | 'single';
     /**
      * Focus goes to the item that holds the stop, and to the item that would
      * hold it while a toolbar holds the stop instead, so a label press or a
@@ -132,6 +179,11 @@ export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_b
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * What the form receives: the value, or under `selection-mode="multiple"`
+     * one entry per pressed value, as a native `<select multiple>` sends.
+     */
+    private formValue;
     /**
      * The verdict on the answer `required` asks for.
      *
@@ -145,22 +197,12 @@ export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_b
      */
     private validate;
     /**
-     * Where the group's label sits. `start` puts it on the track's line.
-     *
-     * Absent is above, which is what a field looks like and what almost every
-     * group wants. `start` is for a row of controls that are labeled rather than
-     * a form of fields: a toolbar reads as one line, and a label stacked over
-     * every group in it turns one row into two.
-     *
-     * **A placement rather than a slot, and that is the whole point of it.** A
-     * `start` slot would let a consumer put the word there, and would also let
-     * them put it there *instead of* setting `label`, which is the group's
-     * accessible name: the set would then be named for nobody using a screen
-     * reader while looking correct to everybody else. Worse, setting both draws
-     * it twice. One property moves the label the consumer already has to give,
-     * and cannot be used to remove it.
+     * The pressed values as a list, under `selection-mode="multiple"`, in the
+     * order the items are written. Written, it presses exactly those items.
+     * Where one item is chosen, it is that one value, or none.
      */
-    labelPlacement?: 'start';
+    get values(): string[];
+    set values(next: string[]);
     /**
      * The row the track sits in, so something can sit beside it.
      *

package/dist/toggle/group/toggle-group.js

@@ -4,21 +4,32 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, DisabledCascadeController, HelixFormElement, hostAria, IndicatorController, KeyboardNavigationController, MixinControllerValue, MixinField, } from '@fusion.dev/helix-core';
+import { commaList, customElement, DisabledCascadeController, HelixFormElement, hostAria, IndicatorController, KeyboardNavigationController, MixinControllerValue, MixinField, rovingStop, toggleValue, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessToggle } from '../root/toggle-root.js';
 let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
+        this.lastFocused = undefined;
+        this.noteFocus = (event) => {
+            const item = this.items.find((one) => one === event.target);
+            if (this.multiple && item && item !== this.lastFocused) {
+                this.lastFocused = item;
+                this.sync();
+            }
+        };
         this.focusable = true;
         this.indicator = new IndicatorController(this, {
-            active: () => this.items.find((item) => item.value === this.value),
+            active: () => this.multiple ? undefined : this.items.find((item) => item.value === this.value),
             indicator: () => this.partNamed('indicator'),
             observe: () => this.items,
             surface: () => this.partNamed('track'),
         });
-        this.keys = new KeyboardNavigationController(this, { items: () => this.items });
+        this.keys = new KeyboardNavigationController(this, {
+            items: () => this.items,
+            selects: () => !this.multiple,
+        });
         this.cascade = new DisabledCascadeController(this, {
             items: () => this.items,
         });
@@ -27,7 +38,10 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
                 if (event.defaultPrevented) {
                     return;
                 }
-                this.requestValue(event.detail.value);
+                const value = event.detail.value;
+                this.requestValue(this.multiple
+                    ? toggleValue(this.values, value, this.items.map((item) => item.value)).join(',')
+                    : value);
             });
         };
     }
@@ -41,16 +55,28 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         }
     }
     sync() {
-        const active = this.items.find((item) => item.value === this.value);
+        const active = this.multiple ? undefined : this.items.find((item) => item.value === this.value);
+        const pressed = new Set(this.values);
         const entry = this.focusable ? this.entry() : undefined;
         for (const item of this.items) {
             item.selected = item === active;
+            item.pressed = this.multiple ? pressed.has(item.value) : undefined;
             item.focusable = item === entry;
         }
     }
     entry() {
-        const active = this.items.find((item) => item.value === this.value);
-        return active && !active.disabled ? active : this.items.find((item) => !item.disabled);
+        const items = this.items;
+        if (this.multiple) {
+            return rovingStop(items, this.lastFocused, {
+                disabled: (item) => item.disabled,
+                selected: (item) => item.pressed === true,
+            });
+        }
+        const active = items.find((item) => item.value === this.value);
+        return active && !active.disabled ? active : items.find((item) => !item.disabled);
+    }
+    get multiple() {
+        return this.selectionMode === 'multiple';
     }
     get focusTarget() {
         return (super.focusTarget ??
@@ -64,6 +90,9 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         if (this.value === '') {
             return false;
         }
+        if (this.multiple) {
+            return this.children === undefined || this.values.length > 0;
+        }
         if (this.children === undefined) {
             return true;
         }
@@ -73,10 +102,12 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelection);
+        this.addEventListener('focusin', this.noteFocus);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-select', this.handleSelection);
+        this.removeEventListener('focusin', this.noteFocus);
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -92,12 +123,32 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
     willUpdate(changed) {
         super.willUpdate(changed);
         this.adopt();
-        hostAria(this.internals, { label: this.label, role: 'radiogroup' });
-        this.internals.setFormValue(this.answered ? this.value : null);
+        hostAria(this.internals, { label: this.label, role: this.multiple ? 'toolbar' : 'radiogroup' });
+        this.internals.ariaOrientation = this.orientation ?? null;
+        this.internals.setFormValue(this.formValue());
+    }
+    formValue() {
+        if (!this.answered) {
+            return null;
+        }
+        if (!this.multiple || this.name === '') {
+            return this.value;
+        }
+        const data = new FormData();
+        for (const value of this.values) {
+            data.append(this.name, value);
+        }
+        return data;
     }
     validate() {
         this.reportRequired(!this.answered, 'Choose one to continue.', 'track');
     }
+    get values() {
+        return this.multiple ? commaList(this.value) : this.value === '' ? [] : [this.value];
+    }
+    set values(next) {
+        this.value = next.join(',');
+    }
     render() {
         const inside = this.labelPlacement === 'start';
         const label = this.renderGroupLabel();
@@ -127,6 +178,15 @@ __decorate([
 __decorate([
     property({ attribute: 'label-placement', reflect: true })
 ], HelixHeadlessToggleGroup.prototype, "labelPlacement", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessToggleGroup.prototype, "orientation", void 0);
+__decorate([
+    property({ attribute: 'selection-mode', reflect: true })
+], HelixHeadlessToggleGroup.prototype, "selectionMode", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessToggleGroup.prototype, "values", null);
 HelixHeadlessToggleGroup = __decorate([
     customElement('helix-headless-toggle-group')
 ], HelixHeadlessToggleGroup);

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

@@ -5,7 +5,9 @@ declare const HelixHeadlessToggle_base: (new (...args: any[]) => import("@fusion
  * @summary One option in a toggle group.
  *
  * @description
- * Renders a `<button role="radio">` for use as a form control.
+ * Renders a `<button role="radio">` for use as a form control. In a group with
+ * `selection-mode="multiple"` it is a `<button>` that says whether it is
+ * pressed with `aria-pressed`.
  *
  * Do not use it for navigation. For navigation, use links marked with
  * `aria-current` and styled by the `data-navigation-item` recipe in the base
@@ -23,6 +25,7 @@ declare const HelixHeadlessToggle_base: (new (...args: any[]) => import("@fusion
  *
  * @csspart item - The radio button.
  *
+ * @cssstate pressed - The item is pressed, in a group where several can be.
  * @cssstate selected - The item is chosen.
  */
 export declare class HelixHeadlessToggle extends HelixHeadlessToggle_base {
@@ -69,6 +72,14 @@ export declare class HelixHeadlessToggle extends HelixHeadlessToggle_base {
      * React consumer's hydration reports and does not patch up.
      */
     focusable?: boolean;
+    /**
+     * Whether the item is pressed, in a group where several can be, and
+     * `undefined` in a group where one is chosen.
+     *
+     * Written by the group, like `selected`, so no attribute.
+     */
+    pressed?: boolean | undefined;
+    protected willUpdate(changed: PropertyValues): void;
     /**
      * Asks for the render that follows a hydration, so the stop stops being every
      * choice's.

package/dist/toggle/root/toggle-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, HelixElement, HostClickController, MixinSelectableItem, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(HelixElement) {
     constructor() {
@@ -18,6 +18,10 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(
     set defaultSelected(next) {
         this.toggleAttribute('selected', next);
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('pressed', this.pressed === true);
+    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
@@ -26,8 +30,9 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(
         return html `<button
       part="item"
       type="button"
-      role="radio"
-      aria-checked=${this.selected ? 'true' : 'false'}
+      role=${this.pressed === undefined ? 'radio' : nothing}
+      aria-checked=${this.pressed === undefined ? (this.selected ? 'true' : 'false') : nothing}
+      aria-pressed=${this.pressed === undefined ? nothing : String(this.pressed)}
       ?disabled=${this.disabled}
       tabindex=${(this.focusable ?? this.selected) || !this.childrenKnown ? '0' : '-1'}
       @click=${() => this.select()}
@@ -39,6 +44,9 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessToggle.prototype, "focusable", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessToggle.prototype, "pressed", void 0);
 HelixHeadlessToggle = __decorate([
     customElement('helix-headless-toggle')
 ], HelixHeadlessToggle);

package/dist/tooltip/focus-target.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The element focus lands on when a trigger is focused: the trigger itself,
+ * or, for a component that delegates focus, the control inside its shadow root,
+ * followed down through any component nested there.
+ */
+export declare const focusTarget: (trigger: Element) => Element;

package/dist/tooltip/focus-target.js

@@ -0,0 +1,9 @@
+const CONTROL = 'a[href], button, input, select, textarea, [contenteditable], [tabindex]:not([tabindex="-1"])';
+export const focusTarget = (trigger) => {
+    const root = trigger.shadowRoot;
+    if (!root?.delegatesFocus) {
+        return trigger;
+    }
+    const inner = root.querySelector(CONTROL);
+    return inner ? focusTarget(inner) : trigger;
+};

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

@@ -10,29 +10,32 @@ declare const HelixHeadlessTooltip_base: (new (...args: any[]) => import("@fusio
  * does not clip it and no `z-index` is needed. `FloatingController` positions
  * it and flips it to another side when the preferred side does not fit.
  *
- * Wrapping the trigger is the convenient form. Use it where the trigger already
- * has an accessible name, because the tooltip cannot describe a slotted
- * trigger: an IDREF cannot cross a shadow boundary.
- *
- * To add a description, place the tooltip beside the trigger and name the
- * trigger with `for`:
+ * **The tooltip describes its trigger itself, in both forms.** Wrap the
+ * trigger, or place the tooltip beside it and name the trigger with `for`:
  *
  * ```html
- * <helix-headless-button id="save" aria-describedby="save-tip">Save</helix-headless-button>
- * <helix-headless-tooltip id="save-tip" for="save" content="Save your work"></helix-headless-tooltip>
+ * <helix-headless-button id="save">Save</helix-headless-button>
+ * <helix-headless-tooltip for="save" content="Save your work"></helix-headless-tooltip>
  * ```
  *
- * Write the `aria-describedby` yourself, pointing at the tooltip host. Setting
- * it at runtime causes a hydration mismatch that React does not fix. With
- * `for`, the tooltip warns once on first open if the attribute is missing.
+ * The link is an element reference on the control that takes focus, and it is
+ * never written into your markup before a reader has acted. A trigger that is a
+ * Helix component is described at once, inside its own shadow root. A plain
+ * element in your markup is described when a reader first points at it or
+ * focuses it, which is after any hydration, and only where you have written no
+ * `aria-describedby` or `aria-labelledby` of your own. Write
+ * `aria-describedby` pointing at the tooltip yourself to have the link in the
+ * server's markup. Where the browser has no element references, write it
+ * yourself; the tooltip warns once on first open if nothing links the two.
  *
  * The tooltip shows on hover and on focus. It hides on pointer leave, on blur,
  * on Escape, and when the trigger is activated. The pointer can move from the
  * trigger onto the bubble and the bubble stays.
  *
  * Once one tooltip is showing, moving to another trigger shows its tooltip
- * with no `delay`, and the first one hides. The same holds for 300
- * milliseconds after a tooltip hides.
+ * with no `delay`, and the first one hides. The same holds for `skip-delay`
+ * milliseconds after a tooltip hides, 300 unless you set it. `show-on="focus"`
+ * shows the tooltip on keyboard focus only, for a hint a pointer does not need.
  *
  * @since 0.1.0
  * @status stable
@@ -40,9 +43,8 @@ declare const HelixHeadlessTooltip_base: (new (...args: any[]) => import("@fusio
  * @aliases Hint, Popup label
  * @documentation https://fusion.dev/helix/components/tooltip
  *
- * @slot - The trigger, in the wrapping form. A trigger here gets no
- * description, so use it only where the trigger's name says what the tooltip
- * says, and use `for` otherwise.
+ * @slot - The trigger, in the wrapping form. The tooltip describes it, as it
+ * describes the element `for` names.
  * @slot content - Rich content for the bubble. It replaces the `content`
  * property.
  *
@@ -149,6 +151,18 @@ export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
      * It moves if that side does not fit.
      */
     placement: Placement;
+    /**
+     * What shows the bubble. Unset, it is a pointer resting on the trigger and
+     * keyboard focus. `focus` is keyboard focus alone, for a hint a pointer does
+     * not need, such as a shortcut a mouse reader has no use for.
+     */
+    showOn?: 'focus';
+    /**
+     * How long after a tooltip hides the next one still shows at once, with no
+     * `delay`, in milliseconds. The same skip delay Radix uses. Zero makes every
+     * tooltip wait.
+     */
+    skipDelay: number;
     /**
      * The id of a box to keep the bubble inside. Defaults to the viewport.
      *
@@ -260,7 +274,7 @@ export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
      * Shows after the pointer has rested for `delay`, or at once while the
      * tooltips are warm.
      *
-     * **Warm is another tooltip showing, or one that hid within `SKIP_DELAY`.**
+     * **Warm is another tooltip showing, or one that hid within `skipDelay`.**
      * A reader scanning a toolbar has already waited once, and waiting again on
      * every control turns the scan into a series of pauses.
      */
@@ -344,6 +358,17 @@ export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
      * have upgraded, or existed, when this one connected.
      */
     private bind;
+    /** The control this tooltip has described, so the link can be taken back. */
+    private linked;
+    /**
+     * Describes the control that takes the trigger's focus by this tooltip.
+     *
+     * `light` says a reader has just acted, which is what allows a write onto a
+     * plain element in the consumer's markup. See `linkDescription`.
+     */
+    private link;
+    /** A reader arriving on the trigger, which is late enough to write the link. */
+    private readonly linkOnArrival;
     private unbind;
     /** Said once per element, however many times it opens. */
     private audited;