@fusion.dev/helix-headless 0.146.0 → 0.147.0

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

@@ -4,15 +4,19 @@ 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, FocusScopeController, fillTemplate, focusableElements, HelixElement, hostAria, scrollHolders, } from '@fusion.dev/helix-core';
+import { customElement, DelayController, deepActiveElement, deepContains, FocusScopeController, fillTemplate, focusableElements, HelixElement, hostAria, scrollHolders, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { matchesHotkey, parseHotkey } from '../hotkey.js';
+import { messageWords } from '../words.js';
 let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
     constructor() {
         super(...arguments);
         this.hotkey = 'F8';
         this.label = 'Notifications ({hotkey})';
+        this.said = '';
+        this.urgent = '';
+        this.hush = new DelayController(this, { renders: false });
         this.scope = new FocusScopeController(this, {
             contents: () => this.showing.flatMap((one) => {
                 const target = focusTarget(one);
@@ -85,9 +89,45 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
             label: fillTemplate(this.label, { hotkey: this.hotkey }),
             role: 'region',
         });
-        this.internals.ariaLive = 'polite';
-        this.internals.ariaRelevant = 'additions';
-        this.internals.ariaAtomic = 'false';
+    }
+    announce(arrived) {
+        const urgent = arrived.filter(isDanger).map(messageWords).join(' ');
+        const said = arrived
+            .filter((one) => !isDanger(one))
+            .map(messageWords)
+            .join(' ');
+        if (said.trim() === '' && urgent.trim() === '') {
+            return;
+        }
+        this.said = '';
+        this.urgent = '';
+        const fill = () => {
+            this.said = said;
+            this.urgent = urgent;
+            this.hush.start(1000, () => {
+                this.said = '';
+                this.urgent = '';
+            });
+        };
+        if (typeof requestAnimationFrame === 'function') {
+            requestAnimationFrame(fill);
+        }
+        else {
+            fill();
+        }
+    }
+    tell(added) {
+        const showing = this.showing;
+        const arrived = added.filter((one) => one instanceof HTMLElement && showing.includes(one));
+        if (arrived.length === 0) {
+            return;
+        }
+        if (this.blocked()) {
+            this.notify(arrived);
+        }
+        else {
+            this.announce(arrived);
+        }
     }
     add(message, options = {}) {
         const tier = this.constructor.tier;
@@ -152,9 +192,6 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
         if (!open || blocked) {
             region.showPopover();
         }
-        if (blocked) {
-            this.notify(arrived);
-        }
     }
     lowerWhenStill(region) {
         const running = typeof this.getAnimations === 'function' ? this.getAnimations({ subtree: true }) : [];
@@ -182,9 +219,9 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
             return;
         }
         for (const one of arrived) {
-            const words = (one.textContent ?? '').replace(/\s+/gu, ' ').trim();
+            const words = messageWords(one);
             if (words !== '') {
-                speaker.ariaNotify(words);
+                speaker.ariaNotify(words, { priority: isDanger(one) ? 'high' : 'normal' });
             }
         }
     }
@@ -194,7 +231,9 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
         this.addEventListener('helix-dismiss', this.handleDismiss);
         document.addEventListener('keydown', this.handleHotkey);
         this.watcher = new MutationObserver((records) => {
-            this.place(records.flatMap((record) => [...record.addedNodes]));
+            const added = records.flatMap((record) => [...record.addedNodes]);
+            this.place(added);
+            this.tell(added);
             this.sweep();
         });
         this.watcher.observe(this, {
@@ -220,7 +259,7 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
         this.place();
     }
     render() {
-        return html `<div part="region" popover="manual" tabindex="-1"><slot></slot></div>`;
+        return html `<div part="region" popover="manual" tabindex="-1"><slot></slot><span part="live" role="status">${this.said}</span><span part="live" role="alert">${this.urgent}</span></div>`;
     }
 };
 __decorate([
@@ -232,10 +271,17 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessToast.prototype, "placement", void 0);
+__decorate([
+    state()
+], HelixHeadlessToast.prototype, "said", void 0);
+__decorate([
+    state()
+], HelixHeadlessToast.prototype, "urgent", void 0);
 HelixHeadlessToast = __decorate([
     customElement('helix-headless-toast')
 ], HelixHeadlessToast);
 export { HelixHeadlessToast };
+const isDanger = (item) => (item.tone ?? item.getAttribute('tone')) === 'danger';
 const popoverOpen = (region) => {
     try {
         return region.matches(':popover-open');

package/dist/toast/words.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Pieces of a message joined into one line a screen reader says, with a full
+ * stop between two where the first does not already end a sentence, so a
+ * heading and its detail are heard as two sentences and not run together.
+ */
+export declare const joinSaid: (pieces: readonly string[]) => string;
+/**
+ * What a message says as it arrives: the word for its tone, then its heading,
+ * its description and its text, and never its actions or its dismiss control,
+ * which a reader finds by moving into the message.
+ */
+export declare const messageWords: (item: Element) => string;

package/dist/toast/words.js

@@ -0,0 +1,25 @@
+import { toneMark } from '@fusion.dev/helix-core';
+const UNSAID = new Set(['actions', 'dismiss-icon', 'icon']);
+export const joinSaid = (pieces) => pieces
+    .map((piece) => piece.replace(/\s+/gu, ' ').trim())
+    .filter((piece) => piece !== '')
+    .reduce((line, piece) => line === '' ? piece : `${line}${/[.!?:;]$/u.test(line) ? '' : '.'} ${piece}`, '');
+export const messageWords = (item) => {
+    const tone = item.tone ?? item.getAttribute('tone') ?? undefined;
+    const label = toneMark(tone)?.label;
+    const heading = [];
+    const rest = [];
+    for (const node of item.childNodes) {
+        if (node instanceof Element) {
+            const slot = node.getAttribute('slot') ?? '';
+            if (!UNSAID.has(slot)) {
+                ;
+                (slot === 'heading' ? heading : rest).push(node.textContent ?? '');
+            }
+        }
+        else if (node.nodeType === 3) {
+            rest.push(node.textContent ?? '');
+        }
+    }
+    return joinSaid([...(label ? [label] : []), ...heading, ...rest]);
+};

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, } 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,7 +139,7 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         if (!this.multiple) {
             return 'radiogroup';
         }
-        return this.parentElement?.closest('[role="toolbar"], helix-toolbar, helix-headless-toolbar')
+        return this.parentElement?.closest('[role=toolbar],helix-toolbar,helix-headless-toolbar')
             ? 'group'
             : 'toolbar';
     }
@@ -141,20 +148,15 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         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);
         }
-        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 +178,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

@@ -20,11 +20,20 @@ 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.
+ * 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
@@ -123,6 +132,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.
      *

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

@@ -4,8 +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 { AriaForwardController, customElement, HelixElement, inlineStep, keyClaimed, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+var HelixHeadlessToolbar_1;
+import { AriaForwardController, closestInstance, customElement, HelixElement, inlineStep, keyClaimed, } 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;
@@ -22,7 +23,9 @@ const takesFocus = (node) => {
         node.shadowRoot?.delegatesFocus === true ||
         node.shadowRoot?.querySelector(TABBABLE) != null);
 };
-let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
+const flattens = (node) => ownsTabStop(node) &&
+    node.selectionMode === 'multiple';
+let HelixHeadlessToolbar = HelixHeadlessToolbar_1 = class HelixHeadlessToolbar extends HelixElement {
     constructor() {
         super(...arguments);
         this.label = 'Toolbar';
@@ -33,14 +36,23 @@ 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)) {
@@ -53,8 +65,11 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
             }
         };
         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 +78,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);
@@ -115,7 +130,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 +173,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;
@@ -168,15 +194,27 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
         }
     }
     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 ||
+            parent.closest('[role="toolbar"]') !== 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);
@@ -200,7 +238,13 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
         void this.claimTabStop();
     }
     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 +258,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,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 { anchorElement, arrowReach, customElement, elementById, HelixElement, hostAria, linkDescription, MixinControllerOpen, onUnlessFalse, PopoverController, reportRuntime, sideOf, unlinkDescription, } from '@fusion.dev/helix-core';
+import { anchorElement, arrowReach, customElement, elementById, 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';
@@ -51,6 +51,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 +343,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;