@fusion.dev/helix-headless 0.143.0 → 0.145.0

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/toolbar/root/toolbar-root.d.ts

@@ -12,6 +12,14 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * 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.
  *
+ * Controls inside a plain wrapper, such as a `Button Group`, are each a stop
+ * of the toolbar's own, as React Aria's toolbar flattens a group: the arrows
+ * walk through the group's buttons and on past it, and the group takes no tab
+ * stop of its own.
+ *
+ * The arrows wrap from the last control to the first. Set `stop-at-ends` to
+ * keep them at the ends, as Radix's `loop` set to false does.
+ *
  * A nested composite, such as a toggle group, is one stop on the toolbar's
  * axis: the toolbar's arrows move past it, and the arrows across the toolbar
  * move inside it. A composite with a `focusable` property, as Toggle Group
@@ -49,6 +57,11 @@ export declare class HelixHeadlessToolbar extends HelixElement {
      * The direction the arrow keys move focus in.
      */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * Whether the arrow keys stop at the first and the last control. Unset, they
+     * wrap around from one end to the other.
+     */
+    stopAtEnds: boolean;
     private watcher;
     /**
      * The children that take part in the toolbar, in document order, each with

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

@@ -31,6 +31,7 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
             target: () => this.partNamed('toolbar'),
         });
         this.wroteForeign = false;
+        this.stopAtEnds = false;
         this.handleFocusIn = (event) => {
             const control = this.origin(event);
             if (control) {
@@ -75,11 +76,14 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
                 return;
             }
             let next = current;
+            const last = controls.length - 1;
             if (forward) {
-                next = (current + 1) % controls.length;
+                next = this.stopAtEnds ? Math.min(current + 1, last) : (current + 1) % controls.length;
             }
             else if (back) {
-                next = (current - 1 + controls.length) % controls.length;
+                next = this.stopAtEnds
+                    ? Math.max(current - 1, 0)
+                    : (current - 1 + controls.length) % controls.length;
             }
             else if (event.key === 'Home') {
                 next = 0;
@@ -110,9 +114,12 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
                 child.getAttribute('aria-hidden') === 'true') {
                 continue;
             }
-            const stops = takesFocus(child) ? this.inside(child) : this.within(child);
-            if (stops.length > 0) {
-                controls.push({ child, stops });
+            if (takesFocus(child)) {
+                controls.push({ child, stops: this.inside(child) });
+                continue;
+            }
+            for (const stop of this.within(child)) {
+                controls.push({ child: stop, stops: [stop] });
             }
         }
         return controls;
@@ -204,6 +211,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessToolbar.prototype, "orientation", void 0);
+__decorate([
+    property({ attribute: 'stop-at-ends', type: Boolean })
+], HelixHeadlessToolbar.prototype, "stopAtEnds", void 0);
 HelixHeadlessToolbar = __decorate([
     customElement('helix-headless-toolbar')
 ], HelixHeadlessToolbar);

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;

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

@@ -4,11 +4,11 @@ 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 { anchorElement, customElement, elementById, HelixElement, hostAria, MixinControllerOpen, PopoverController, reportRuntime, } from '@fusion.dev/helix-core';
+import { anchorElement, arrowReach, customElement, elementById, HelixElement, hostAria, linkDescription, MixinControllerOpen, PopoverController, reportRuntime, sideOf, unlinkDescription, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { focusTarget } from '../focus-target.js';
 const GENERIC = new Set(['div', 'p', 'section', 'span']);
-const SKIP_DELAY = 300;
 const WARMTH = Symbol.for('fusion.helix.tooltip.warmth');
 const warmth = () => {
     const globals = globalThis;
@@ -26,22 +26,20 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
         this.offset = 8;
         this.persist = false;
         this.placement = 'top';
+        this.skipDelay = 300;
         this.within = '';
         this.holds = new Set();
         this.bubbleLayer = new PopoverController(this, {
             anchor: () => this.trigger,
             arrow: () => this.partNamed('arrow'),
             boundary: () => [this, this.named],
-            offset: () => {
-                const point = this.partNamed('arrow');
-                return this.offset + (point?.offsetWidth ?? 0) / Math.SQRT2;
-            },
+            offset: () => this.offset + arrowReach(this.partNamed('arrow')),
             onDismiss: () => {
                 this.holds.clear();
                 this.hide();
             },
             onPlace: (placement) => {
-                const side = placement.split('-')[0];
+                const side = sideOf(placement);
                 this.toggleState('placed-bottom', side === 'bottom');
                 this.toggleState('placed-left', side === 'left');
                 this.toggleState('placed-right', side === 'right');
@@ -56,11 +54,14 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
             this.requestUpdate();
         };
         this.showLater = () => {
+            if (this.showOn === 'focus') {
+                return;
+            }
             this.holds.add('pointer');
             clearTimeout(this.timer);
             const warm = warmth();
             const others = [...warm.showing].some((one) => one !== this);
-            if (others || performance.now() - warm.hidAt < SKIP_DELAY) {
+            if (others || performance.now() - warm.hidAt < this.skipDelay) {
                 this.show();
                 return;
             }
@@ -102,6 +103,10 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
             this.holds.clear();
             this.hide();
         };
+        this.linkOnArrival = (event) => {
+            const first = event.composedPath()[0];
+            this.link(true, event.type === 'focusin' && first instanceof Element ? first : undefined);
+        };
         this.audited = false;
     }
     get trigger() {
@@ -179,14 +184,41 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
             return;
         }
         this.unbind();
+        target.addEventListener('pointerenter', this.linkOnArrival);
+        target.addEventListener('focusin', this.linkOnArrival);
         target.addEventListener('pointerenter', this.showLater);
         target.addEventListener('pointerleave', this.hideLater);
         target.addEventListener('focusin', this.showNow);
         target.addEventListener('focusout', this.releaseFocus);
         target.addEventListener('click', this.handleActivate);
         this.bound = target;
+        this.link(false);
+        const drawn = this.trigger.updateComplete;
+        void drawn?.then(() => {
+            if (this.bound === target) {
+                this.link(false);
+            }
+        });
+    }
+    link(light, target = focusTarget(this.trigger)) {
+        if (this.linked === target) {
+            return;
+        }
+        if (this.linked) {
+            unlinkDescription(this.linked, this);
+            this.linked = undefined;
+        }
+        if (linkDescription(target, this, light)) {
+            this.linked = target;
+        }
     }
     unbind() {
+        if (this.linked) {
+            unlinkDescription(this.linked, this);
+            this.linked = undefined;
+        }
+        this.bound?.removeEventListener('pointerenter', this.linkOnArrival);
+        this.bound?.removeEventListener('focusin', this.linkOnArrival);
         this.bound?.removeEventListener('pointerenter', this.showLater);
         this.bound?.removeEventListener('pointerleave', this.hideLater);
         this.bound?.removeEventListener('click', this.handleActivate);
@@ -199,6 +231,9 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
             return;
         }
         this.audited = true;
+        if (this.linked) {
+            return;
+        }
         if (this.for === '') {
             if (this.triggerSays(this.describedText)) {
                 return;
@@ -293,7 +328,7 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
         }
         hostAria(this.internals, {
             describedBy: this.hasContent ? [bubble] : [],
-            label: this.for === '' ? '' : this.describedText,
+            label: this.describedText,
         });
     }
     render() {
@@ -339,6 +374,12 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTooltip.prototype, "placement", void 0);
+__decorate([
+    property({ attribute: 'show-on' })
+], HelixHeadlessTooltip.prototype, "showOn", void 0);
+__decorate([
+    property({ attribute: 'skip-delay', type: Number })
+], HelixHeadlessTooltip.prototype, "skipDelay", void 0);
 __decorate([
     property()
 ], HelixHeadlessTooltip.prototype, "within", void 0);

package/dist/tour/naming.d.ts

@@ -0,0 +1,30 @@
+/** What names and describes a stop's panel. */
+export interface StopNaming {
+    /** The elements that describe the panel, in reading order. */
+    describedBy: Element[];
+    /** The elements that name the panel, or none where a label names it. */
+    labelledBy: Element[];
+}
+/** Where a stop's words are. */
+export interface StopWords {
+    /** The elements in the stop's default slot. */
+    content: readonly Element[];
+    /** The elements in its `description` slot. */
+    description: readonly Element[];
+    /** The elements in its `heading` slot. */
+    heading: readonly Element[];
+    /** Whether the stop has a `label` of its own. */
+    labeled: boolean;
+    /** The element that says the stop's place in the tour, such as "2 of 5". */
+    progress: Element | null;
+}
+/**
+ * What names a tour stop's panel and what describes it.
+ *
+ * Named by the `heading` slot, then by the first heading in the content, then
+ * by the stop's own `label`, and where there is none of those, by its place in
+ * the tour, so no stop is an unnamed group. Described by the `description`
+ * slot and by its place, which is how a screen reader hears where it is as
+ * focus moves from one stop to the next.
+ */
+export declare const stopNaming: ({ content, description, heading, labeled, progress, }: StopWords) => StopNaming;

package/dist/tour/naming.js

@@ -0,0 +1,10 @@
+import { headingIn } from '@fusion.dev/helix-core';
+export const stopNaming = ({ content, description, heading, labeled, progress, }) => {
+    const first = heading.length > 0 ? null : headingIn(content);
+    const found = heading.length > 0 ? [...heading] : first ? [first] : [];
+    const place = progress ? [progress] : [];
+    if (found.length === 0 && !labeled) {
+        return { describedBy: [...description], labelledBy: place };
+    }
+    return { describedBy: [...description, ...place], labelledBy: found };
+};