@fusion.dev/helix-headless 0.146.0 → 0.148.0

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

@@ -28,6 +28,23 @@ declare const HelixHeadlessToggleGroup_base: (new (...args: any[]) => import("@f
  * `orientation="vertical"` runs the items down a column, says so to the
  * accessibility tree, and the up and down arrows move between them.
  *
+ * **Keyboard.** The group is one tab stop: the chosen item, or the first that
+ * can be chosen, as in a radio group, and in a multiple group the item focus
+ * was last on.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Right, Down | Moves to the next item, from the last back to the first. In a single group, chooses it. |
+ * | Left, Up | Moves to the item before, from the first round to the last. In a single group, chooses it. |
+ * | Home, End | Moves to the first or the last item. In a single group, chooses it. |
+ * | Space, Enter | Chooses the focused item, or presses or releases it in a multiple group. |
+ *
+ * Left and Right swap on a right-to-left page, and a disabled item is passed
+ * over. A single group is a `radiogroup` of items with `role="radio"` and
+ * `aria-checked`. A multiple group is a `toolbar` of buttons with
+ * `aria-pressed`, or a `group` inside a toolbar. The group is named by
+ * `label` and carries `aria-orientation` under `orientation`.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases SegmentedControl, Segmented, Navigation, Switcher
@@ -115,6 +132,11 @@ export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_b
     /** The item focus was last on, in a toolbar, which holds its tab stop. */
     private lastFocused;
     private readonly noteFocus;
+    /**
+     * The item whose value is the group's, in a single group: the exact match,
+     * so nothing chosen marks nothing. A multiple group has none.
+     */
+    private get chosenItem();
     /** Whether several items can be pressed at once. */
     private get multiple();
     /**
@@ -192,11 +214,6 @@ export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_b
      */
     private get groupRole();
     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.
      *
@@ -238,6 +255,13 @@ export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_b
      * in it.
      */
     protected render(): TemplateResult;
+    /**
+     * Items that arrive after the first render, which is every item on a page
+     * the parser is still reading. Outside an update here, so taking the
+     * declaration schedules one rather than warning, and the update reports the
+     * form, which a removed answer no longer holds.
+     */
+    private readonly handleItems;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -4,7 +4,7 @@ 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 { commaList, customElement, DisabledCascadeController, HelixFormElement, hostAria, IndicatorController, KeyboardNavigationController, MixinControllerValue, MixinField, rovingStop, toggleValue, } from '@fusion.dev/helix-core';
+import { commaList, customElement, DisabledCascadeController, HelixFormElement, hostAria, IndicatorController, KeyboardNavigationController, MixinControllerValue, MixinField, reportValues, rovingStop, toggleValue, toolbarAround, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessToggle } from '../root/toggle-root.js';
@@ -13,15 +13,15 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         super(...arguments);
         this.lastFocused = undefined;
         this.noteFocus = (event) => {
-            const item = this.items.find((one) => one === event.target);
-            if (this.multiple && item && item !== this.lastFocused) {
+            const item = event.target;
+            if (this.multiple && item !== this.lastFocused && this.items.includes(item)) {
                 this.lastFocused = item;
                 this.sync();
             }
         };
         this.focusable = true;
         this.indicator = new IndicatorController(this, {
-            active: () => this.multiple ? undefined : this.items.find((item) => item.value === this.value),
+            active: () => this.chosenItem,
             indicator: () => this.partNamed('indicator'),
             observe: () => this.items,
             surface: () => this.partNamed('track'),
@@ -52,6 +52,12 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
             });
         };
         this.chosen = undefined;
+        this.handleItems = () => {
+            this.adopt();
+            this.sync();
+            this.indicator.place();
+            this.requestUpdate();
+        };
     }
     adopt() {
         if (this.value !== '' || this.children === undefined) {
@@ -63,7 +69,7 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         }
     }
     sync() {
-        const active = this.multiple ? undefined : this.items.find((item) => item.value === this.value);
+        const active = this.chosenItem;
         const pressed = new Set(this.values);
         const entry = this.focusable ? this.entry() : undefined;
         for (const item of this.items) {
@@ -80,9 +86,12 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
                 selected: (item) => item.pressed === true,
             });
         }
-        const active = items.find((item) => item.value === this.value);
+        const active = this.chosenItem;
         return active && !active.disabled ? active : items.find((item) => !item.disabled);
     }
+    get chosenItem() {
+        return this.multiple ? undefined : this.items.find((item) => item.value === this.value);
+    }
     get multiple() {
         return this.selectionMode === 'multiple';
     }
@@ -98,14 +107,12 @@ 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;
         }
-        const items = this.items;
-        return items.length === 0 || items.some((item) => item.value === this.value);
+        return this.multiple
+            ? this.values.length > 0
+            : this.items.length === 0 || this.chosenItem !== undefined;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -132,29 +139,22 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         if (!this.multiple) {
             return 'radiogroup';
         }
-        return this.parentElement?.closest('[role="toolbar"], helix-toolbar, helix-headless-toolbar')
-            ? 'group'
-            : 'toolbar';
+        return toolbarAround(this) ? 'group' : 'toolbar';
     }
     willUpdate(changed) {
         super.willUpdate(changed);
         this.adopt();
         hostAria(this.internals, { label: this.label, role: this.groupRole });
         this.internals.ariaOrientation = this.orientation ?? null;
-        this.internals.setFormValue(this.formValue());
-    }
-    formValue() {
         if (!this.answered) {
-            return null;
+            this.internals.setFormValue(null);
         }
-        if (!this.multiple || this.name === '') {
-            return this.value;
+        else if (this.multiple) {
+            reportValues(this.internals, this.name, this.values, { state: 'entries' });
         }
-        const data = new FormData();
-        for (const value of this.values) {
-            data.append(this.name, value);
+        else {
+            this.internals.setFormValue(this.value);
         }
-        return data;
     }
     validate() {
         this.reportRequired(!this.answered, 'Choose one to continue.', 'track');
@@ -176,29 +176,12 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
             super.formStateRestoreCallback(state);
             return;
         }
-        this.values = state.getAll(this.name).filter((one) => typeof one === 'string');
+        this.values = state.getAll(this.name);
     }
     render() {
         const inside = this.labelPlacement === 'start';
         const label = this.renderGroupLabel();
-        return html `${inside ? nothing : label}
-      <div part="row">
-        <slot name="start"></slot>
-        <div part="track">
-        ${inside ? label : nothing}
-        <div part="indicator" aria-hidden="true"></div>
-        <slot
-          @slotchange=${() => {
-            this.adopt();
-            this.sync();
-            this.indicator.place();
-            this.requestUpdate();
-        }}
-          ></slot>
-        </div>
-        <slot name="end"></slot>
-      </div>
-      ${this.renderHint()}${this.renderFeedback()}`;
+        return html `${inside ? nothing : label}<div part="row"><slot name="start"></slot><div part="track">${inside ? label : nothing}<div part="indicator" aria-hidden="true"></div><slot @slotchange=${this.handleItems}></slot></div><slot name="end"></slot></div>${this.renderHint()}${this.renderFeedback()}`;
     }
 };
 __decorate([

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

@@ -31,14 +31,12 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(
       part="item"
       type="button"
       role=${this.pressed === undefined ? 'radio' : nothing}
-      aria-checked=${this.pressed === undefined ? (this.selected ? 'true' : 'false') : nothing}
+      aria-checked=${this.pressed === undefined ? String(this.selected) : 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()}
-    >
-      <slot></slot>
-    </button>`;
+    ><slot></slot></button>`;
     }
 };
 __decorate([

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

@@ -12,6 +12,10 @@ 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.
  *
+ * 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
+ * one, without an `orientation` of its own.
+ *
  * 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
@@ -20,11 +24,42 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * 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
- * has, gives up its own tab stop while the toolbar's is elsewhere, so Tab
- * stops once in the toolbar. A composite without one keeps its own tab stop.
+ * **Keyboard.** Tab enters the toolbar on the control that last had focus, the
+ * first control at the start, and the next Tab leaves it.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Right | Moves to the next control in a horizontal toolbar, from the last back to the first. |
+ * | Left | Moves to the control before in a horizontal toolbar, from the first round to the last. |
+ * | Down, Up | The same in a vertical toolbar. |
+ * | Home, End | Moves to the first or the last control. |
+ *
+ * Left and Right swap on a right-to-left page, where the first control is on
+ * the right. The arrows across the toolbar's axis are left to the control that
+ * has focus, so a radio-style toggle group or a select answers them itself.
+ * The toolbar is `role="toolbar"` with `aria-orientation`, named by `label`.
+ *
+ * The stop moves through a control's own `focusable` property where it has
+ * one, as Button, Select and Toggle Group do. A control without one has
+ * `tabindex` written on the element that takes focus: a native element
+ * itself, or the control inside a custom element's open shadow root, so the
+ * host keeps the markup you rendered. Only a custom element whose shadow root
+ * is closed takes it on the host.
+ *
+ * A toggle group of pressed buttons, `selection-mode="multiple"`, is walked
+ * through the same way, each toggle a stop on the toolbar's axis, as React
+ * Aria's toolbar walks its toggle buttons. Another nested composite, such as a
+ * radio-style 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 has, gives up its own
+ * tab stop while the toolbar's is elsewhere, so Tab stops once in the
+ * toolbar. A composite without one keeps its own tab stop.
+ *
+ * A toolbar inside another toolbar, a Helix one or the page's own
+ * `role="toolbar"`, is a `group` of the outer one, as React Aria's is: the
+ * outer toolbar's arrows walk through its controls and on past them, and it
+ * takes no keys and no tab stop of its own. A server renders it as a toolbar,
+ * having no parent to read, until it upgrades.
  *
  * @since 0.1.0
  * @status stable
@@ -35,6 +70,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot - The toolbar's controls.
  *
  * @csspart toolbar - The toolbar container.
+ *
+ * @cssstate horizontal - The controls run along a row, which is the default.
+ * @cssstate nested - The toolbar is a group inside another toolbar, which owns the keys and the tab stop.
+ * @cssstate vertical - The controls run down a column, under `orientation="vertical"`.
  */
 export declare class HelixHeadlessToolbar extends HelixElement {
     /**
@@ -123,6 +162,13 @@ export declare class HelixHeadlessToolbar extends HelixElement {
      * the stop hands it to the first one left.
      */
     private readonly restoreTabStop;
+    /**
+     * Whether this toolbar sits inside another, which then owns the keys and the
+     * tab stop: a toolbar inside a toolbar held the reader's arrows inside it.
+     * Read when it renders and when it connects, there being no parent on a
+     * server.
+     */
+    private get nested();
     /**
      * The orientation in force.
      *
@@ -143,6 +189,7 @@ export declare class HelixHeadlessToolbar extends HelixElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
+    protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -4,13 +4,15 @@ 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 { AriaForwardController, customElement, HelixElement, inlineStep, keyClaimed, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+var HelixHeadlessToolbar_1;
+import { AriaForwardController, closestInstance, customElement, HelixElement, inlineStep, keyClaimed, toolbarAround, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 const KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);
 const ownsTabStop = (node) => 'focusable' in node;
 const NATIVE = 'a[href], button, input, select, textarea, [tabindex], [contenteditable=""], [contenteditable="true"]';
 const TABBABLE = NATIVE.replace('[tabindex]', '[tabindex]:not([tabindex="-1"])');
+const innerStops = new WeakMap();
 const takesFocus = (node) => {
     if (!(node instanceof HTMLElement) ||
         node.hasAttribute('disabled') ||
@@ -20,9 +22,29 @@ const takesFocus = (node) => {
     return (node.matches(NATIVE) ||
         ownsTabStop(node) ||
         node.shadowRoot?.delegatesFocus === true ||
-        node.shadowRoot?.querySelector(TABBABLE) != null);
+        node.shadowRoot?.querySelector(TABBABLE) != null ||
+        innerStops.get(node)?.isConnected === true);
 };
-let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
+const stopOf = (node) => {
+    if (node.hasAttribute('tabindex')) {
+        return node;
+    }
+    const held = innerStops.get(node);
+    if (held?.isConnected && held.getRootNode() === node.shadowRoot) {
+        return held;
+    }
+    const inner = node.localName.includes('-')
+        ? node.shadowRoot?.querySelector(TABBABLE)
+        : null;
+    if (!inner) {
+        return node;
+    }
+    innerStops.set(node, inner);
+    return inner;
+};
+const flattens = (node) => ownsTabStop(node) &&
+    node.selectionMode === 'multiple';
+let HelixHeadlessToolbar = HelixHeadlessToolbar_1 = class HelixHeadlessToolbar extends HelixElement {
     constructor() {
         super(...arguments);
         this.label = 'Toolbar';
@@ -33,28 +55,40 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
         this.wroteForeign = false;
         this.stopAtEnds = false;
         this.handleFocusIn = (event) => {
+            if (this.nested) {
+                return;
+            }
             const control = this.origin(event);
             if (control) {
                 this.setTabStop(control);
             }
         };
         this.restoreTabStop = () => {
+            if (this.nested) {
+                return;
+            }
             const controls = this.controls;
             const held = controls.some((control) => {
+                if (control.group) {
+                    return control.group.focusable;
+                }
                 const composite = control.stops.length !== 1;
                 const element = composite ? control.child : control.stops[0];
                 if (ownsTabStop(element)) {
                     return element.focusable;
                 }
-                return composite || element.tabIndex === 0;
+                return composite || stopOf(element).tabIndex === 0;
             });
             if (controls.length > 0 && !held) {
                 this.setTabStop(controls[0], false);
             }
         };
         this.handleCompositeKeydown = (event) => {
+            if (this.nested) {
+                return;
+            }
             const control = this.origin(event);
-            if (!control || control.stops.length === 1) {
+            if (!control || (control.stops.length === 1 && !control.group)) {
                 return;
             }
             this.handleKeydown(event);
@@ -63,7 +97,7 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
             }
         };
         this.handleKeydown = (event) => {
-            if (!KEYS.has(event.key) || keyClaimed(event)) {
+            if (this.nested || !KEYS.has(event.key) || keyClaimed(event)) {
                 return;
             }
             const along = inlineStep(this, event.key);
@@ -101,8 +135,9 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
             if (element && 'focusItem' in element && typeof element.focusItem === 'function') {
                 element.focusItem();
             }
-            else {
-                element?.focus();
+            else if (element) {
+                ;
+                (ownsTabStop(element) ? element : stopOf(element)).focus();
             }
         };
     }
@@ -115,7 +150,14 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
                 continue;
             }
             if (takesFocus(child)) {
-                controls.push({ child, stops: this.inside(child) });
+                const stops = this.inside(child);
+                if (stops.length > 1 && flattens(child)) {
+                    for (const stop of stops) {
+                        controls.push({ child: stop, group: child, stops: [stop] });
+                    }
+                    continue;
+                }
+                controls.push({ child, stops });
                 continue;
             }
             for (const stop of this.within(child)) {
@@ -151,6 +193,10 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
             this.wroteForeign = true;
         }
         for (const control of this.controls) {
+            if (control.group) {
+                control.group.focusable = control.group === active?.group;
+                continue;
+            }
             if (control.stops.length !== 1) {
                 if (ownsTabStop(control.child)) {
                     control.child.focusable = control.child === active?.child;
@@ -163,20 +209,31 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
                 element.focusable = stop;
             }
             else if (foreign || this.wroteForeign) {
-                element.tabIndex = stop ? 0 : -1;
+                stopOf(element).tabIndex = stop ? 0 : -1;
             }
         }
     }
     async claimTabStop() {
+        if (this.nested) {
+            return;
+        }
         const pending = [...new Set([...this.children].map((child) => child.localName))].filter((name) => name.includes('-'));
         await Promise.all(pending.map((name) => customElements.whenDefined(name)));
         this.setTabStop(this.controls[0], false);
     }
+    get nested() {
+        const parent = this.parentElement;
+        if (!parent) {
+            return false;
+        }
+        return closestInstance(parent, HelixHeadlessToolbar_1) !== null || toolbarAround(this) !== null;
+    }
     get axis() {
         return this.orientation ?? 'horizontal';
     }
     connectedCallback() {
         super.connectedCallback();
+        this.requestUpdate();
         this.addEventListener('keydown', this.handleCompositeKeydown, true);
         this.addEventListener('keydown', this.handleKeydown);
         this.addEventListener('focusin', this.handleFocusIn);
@@ -199,8 +256,26 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
         super.firstUpdated(changed);
         void this.claimTabStop();
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('nested', this.nested);
+        this.toggleState('horizontal', this.axis === 'horizontal');
+        this.toggleState('vertical', this.axis === 'vertical');
+        if (this.hasUpdated && changed.has('orientation')) {
+            for (const child of this.children) {
+                ;
+                child.requestUpdate?.();
+            }
+        }
+    }
     render() {
-        return html `<div part="toolbar" role="toolbar" aria-label=${this.label} aria-orientation=${this.axis}>
+        const nested = this.nested;
+        return html `<div
+      part="toolbar"
+      role=${nested ? 'group' : 'toolbar'}
+      aria-label=${this.label}
+      aria-orientation=${nested ? nothing : this.axis}
+    >
       <slot @slotchange=${() => this.claimTabStop()}></slot>
     </div>`;
     }
@@ -214,7 +289,7 @@ __decorate([
 __decorate([
     property({ attribute: 'stop-at-ends', type: Boolean })
 ], HelixHeadlessToolbar.prototype, "stopAtEnds", void 0);
-HelixHeadlessToolbar = __decorate([
+HelixHeadlessToolbar = HelixHeadlessToolbar_1 = __decorate([
     customElement('helix-headless-toolbar')
 ], HelixHeadlessToolbar);
 export { HelixHeadlessToolbar };

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

@@ -1,4 +1,4 @@
-import { HelixElement, type Placement } from '@fusion.dev/helix-core';
+import { HelixElement, OpenPhaseController, 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;
 /**
@@ -27,6 +27,9 @@ declare const HelixHeadlessTooltip_base: (new (...args: any[]) => import("@fusio
  * `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.
+ * In the `for` form the tooltip itself is out of the accessibility tree while
+ * its bubble is down, so a reader walking the page meets its words once, as
+ * the trigger's description.
  *
  * 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
@@ -65,6 +68,8 @@ declare const HelixHeadlessTooltip_base: (new (...args: any[]) => import("@fusio
  * @csspart tooltip-right - Added to `tooltip` while the bubble is right of its trigger.
  * @csspart tooltip-top - Added to `tooltip` while the bubble is above its trigger.
  *
+ * @cssstate entering - From the moment the bubble shows until its entrance has finished.
+ * @cssstate exiting - From the moment the bubble hides until its exit has finished.
  * @cssstate open - While the tooltip shows.
  * @cssstate placed-bottom - While the bubble sits below its trigger.
  * @cssstate placed-left - While the bubble sits to the left of its trigger.
@@ -236,6 +241,7 @@ export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
      * it must stay inside, and a component often has one and not the other.
      */
     private get enclosure();
+    protected readonly phases: OpenPhaseController;
     private get bubble();
     /**
      * Whether there is anything to show.

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

@@ -4,10 +4,9 @@ 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, arrowReach, customElement, elementById, HelixElement, hostAria, linkDescription, MixinControllerOpen, onUnlessFalse, PopoverController, reportRuntime, sideOf, unlinkDescription, } from '@fusion.dev/helix-core';
+import { anchorElement, arrowReach, customElement, elementById, focusTarget, HelixElement, hostAria, linkDescription, MixinControllerOpen, OpenPhaseController, onUnlessFalse, 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 WARMTH = Symbol.for('fusion.helix.tooltip.warmth');
 const warmth = () => {
@@ -51,6 +50,14 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
             surface: () => this.partNamed('tooltip'),
             within: () => this.enclosure,
         });
+        this.phases = new OpenPhaseController(this, {
+            mark: {
+                entering: (on) => this.toggleState('entering', on),
+                exiting: (on) => this.toggleState('exiting', on),
+            },
+            open: () => this.open,
+            surface: () => this.partNamed('tooltip'),
+        });
         this.handleContentChange = () => {
             this.requestUpdate();
         };
@@ -335,6 +342,7 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
             describedBy: this.hasContent ? [bubble] : [],
             label: this.describedText,
         });
+        this.internals.ariaHidden = this.for !== '' && !this.open ? 'true' : null;
     }
     render() {
         const side = this.side;

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

@@ -40,6 +40,12 @@ declare const HelixHeadlessTour_base: (new (...args: any[]) => import("@fusion.d
  * you have moved it somewhere else on the page. A stop does not trap focus, so
  * you can still `Tab` out to the element it describes.
  *
+ * **The arrow keys move between stops** while focus is in one: the arrow that
+ * points the way the line runs goes on, and the other goes back, so on a
+ * right-to-left page `ArrowLeft` goes on. Neither finishes the tour at the last
+ * stop, and a text field in a stop keeps its own arrows. `Escape` skips the
+ * tour.
+ *
  * @since 0.1.0
  * @status stable
  * @category overlays
@@ -159,6 +165,15 @@ export declare class HelixHeadlessTour extends HelixHeadlessTour_base {
     private finish;
     private move;
     private readonly handleAsk;
+    /**
+     * The arrow along the line, from inside a stop: on, or back.
+     *
+     * A move and never a finish, so a reader walking the stops with the arrows
+     * cannot end the tour by going one too far; that is Next on the last stop.
+     */
+    private readonly handleArrows;
+    /** Whether `back()` would move, there being a stop that shows before this one. */
+    private get canGoBack();
     private readonly handleKeydown;
     private readonly handleViewport;
     connectedCallback(): void;