@fusion.dev/helix-headless 0.147.0 → 0.149.0

package/dist/time-picker/root/time-picker-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 { clockLocale, commaList, customElement, dayPeriod, fillTemplate, HelixFormElement, hostWords, inlineStep, isTwelveHour, localeOf, MixinControllerValue, MixinPickerFeedback, nearestTime, offeredTimes, reportValues, secondsAsValue, timeBarred, timeFault, valueAsSeconds, wheelParts, wholeHour, writeClock, } from '@fusion.dev/helix-core';
+import { clockLocale, commaList, customElement, dayPeriod, formatWords, HelixFormElement, hostWords, inlineStep, isTwelveHour, MixinControllerValue, MixinPickerFeedback, nearestTime, offeredTimes, reportValues, secondsAsValue, timeBarred, timeFault, valueAsSeconds, wheelParts, wholeHour, words, wordsLocale, writeClock, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -14,12 +14,15 @@ import '../../option/index.js';
 let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerFeedback(MixinControllerValue(HelixFormElement)) {
     constructor() {
         super(...arguments);
+        this.badInputMessage = '{mode, select, single {Enter a time as {shape}.} other {Enter times as {shape}, separated by commas.}}';
         this.disableTimes = '';
         this.label = 'Time';
         this.locale = '';
         this.manual = false;
         this.max = '23:59';
         this.min = '00:00';
+        this.rangeOverflowMessage = 'Choose a time at or before {max}.';
+        this.rangeUnderflowMessage = 'Choose a time at or after {min}.';
         this.handleListInput = (event) => {
             event.stopPropagation();
         };
@@ -76,6 +79,9 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
         this.required = false;
         this.seconds = false;
         this.step = 15;
+        this.stepMismatchMessage = 'Choose one of the times on offer.';
+        this.unavailableMessage = 'Choose a time that is available.';
+        this.valueMissingMessage = 'Choose a time.';
         this.listRevealed = false;
         this.naming = undefined;
         this.handleColumnsKeydown = (event) => {
@@ -93,8 +99,9 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
             next.focus();
         };
     }
+    static { this.words = 'helix-time-picker'; }
     get language() {
-        return localeOf(this, this.locale);
+        return wordsLocale(this);
     }
     get times() {
         return offeredTimes(this.min, this.max, this.step, this.seconds);
@@ -183,21 +190,21 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
             case 'rangeUnderflow':
                 return [
                     'rangeUnderflow',
-                    fillTemplate(this.rangeUnderflowMessage || 'Choose a time at or after {min}.', {
+                    formatWords(this, 'rangeUnderflowMessage', {
                         min: writeClock(this.min, this.clock, this.seconds),
                     }),
                 ];
             case 'rangeOverflow':
                 return [
                     'rangeOverflow',
-                    fillTemplate(this.rangeOverflowMessage || 'Choose a time at or before {max}.', {
+                    formatWords(this, 'rangeOverflowMessage', {
                         max: writeClock(this.max, this.clock, this.seconds),
                     }),
                 ];
             case 'unavailable':
-                return ['badInput', this.unavailableMessage || 'Choose a time that is available.'];
+                return ['badInput', this.unavailableMessage];
             case 'stepMismatch':
-                return ['stepMismatch', this.stepMismatchMessage || 'Choose one of the times on offer.'];
+                return ['stepMismatch', this.stepMismatchMessage];
             default:
                 return undefined;
         }
@@ -205,16 +212,15 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
     reportRequired() {
         const anchor = this.partNamed('list') ?? undefined;
         if (this.required && this.value === '') {
-            this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage || 'Choose a time.', anchor);
+            this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage, anchor);
             return;
         }
         const held = this.held;
         if (held.length > 0 && held.some((one) => valueAsSeconds(one) === null)) {
-            const shape = this.seconds ? 'HH:mm:ss' : 'HH:mm';
-            this.internals.setValidity({ badInput: true }, this.badInputMessage ||
-                (this.mode === undefined
-                    ? `Enter a time as ${shape}.`
-                    : `Enter times as ${shape}, separated by commas.`), anchor);
+            this.internals.setValidity({ badInput: true }, formatWords(this, 'badInputMessage', {
+                mode: this.mode ?? 'single',
+                shape: this.seconds ? 'HH:mm:ss' : 'HH:mm',
+            }), anchor);
             return;
         }
         for (const one of held) {
@@ -256,6 +262,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
     willUpdate(changed) {
         super.willUpdate(changed);
         this.report();
+        this.toggleState('blank', this.value === '');
     }
     updated(changed) {
         super.updated(changed);
@@ -277,6 +284,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
         return html `<${this.tag('listbox')}
       part="column"
       data-column=${part}
+      aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
       aria-invalid=${this.marked ? 'true' : nothing}
       exportparts="empty: column-empty, error: column-error, feedback: column-feedback, filter-icon: column-filter-icon,
         filter-mark: column-filter-mark, hint: column-hint, items: column-items, label: column-label,
@@ -328,6 +336,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
     renderList() {
         return html `<${this.tag('listbox')}
       part="list"
+      aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
       aria-invalid=${this.marked ? 'true' : nothing}
       exportparts="empty: list-empty, error: list-error, feedback: list-feedback, filter-icon: list-filter-icon,
         filter-mark: list-filter-mark, hint: list-hint, items: list-items, label: list-label,
@@ -382,6 +391,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
     }
 };
 __decorate([
+    words,
     property({ attribute: 'bad-input-message' })
 ], HelixHeadlessTimePicker.prototype, "badInputMessage", void 0);
 __decorate([
@@ -394,6 +404,7 @@ __decorate([
     property({ attribute: 'hour-label' })
 ], HelixHeadlessTimePicker.prototype, "hourLabel", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessTimePicker.prototype, "label", void 0);
 __decorate([
@@ -418,9 +429,11 @@ __decorate([
     property({ reflect: true })
 ], HelixHeadlessTimePicker.prototype, "mode", void 0);
 __decorate([
+    words,
     property({ attribute: 'range-overflow-message' })
 ], HelixHeadlessTimePicker.prototype, "rangeOverflowMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'range-underflow-message' })
 ], HelixHeadlessTimePicker.prototype, "rangeUnderflowMessage", void 0);
 __decorate([
@@ -439,12 +452,15 @@ __decorate([
     property({ type: Number })
 ], HelixHeadlessTimePicker.prototype, "step", void 0);
 __decorate([
+    words,
     property({ attribute: 'step-mismatch-message' })
 ], HelixHeadlessTimePicker.prototype, "stepMismatchMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'unavailable-message' })
 ], HelixHeadlessTimePicker.prototype, "unavailableMessage", void 0);
 __decorate([
+    words,
     property({ attribute: 'value-missing-message' })
 ], HelixHeadlessTimePicker.prototype, "valueMissingMessage", void 0);
 __decorate([

package/dist/toast/item/toast-item.d.ts

@@ -10,7 +10,8 @@ declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fus
  *
  * **Each item runs its own timer.** A timer held by the region would restart
  * with each new message, and the last of three messages would stay for nine
- * seconds.
+ * seconds. It pauses while the pointer or focus is on the message, and while
+ * the page is hidden, so a message is not spent in a background tab.
  *
  * **Each message is an `alertdialog` named by its words**, which is how a reader
  * who moves into the stack hears which message they are on. Give it a
@@ -58,6 +59,13 @@ declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fus
  * @cssproperty --toast-swipe-x - How far a swipe has moved the message across, in pixels, toward the right.
  */
 export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base {
+    /**
+     * The key this part's words are registered under, its styled tag. The close
+     * control's `dismiss-label` comes from a mixin other families share, and
+     * registers as `{ 'helix-toast-item': { dismissLabel: 'Schließen' } }` once
+     * that mixin declares it a word.
+     */
+    static words: string;
     /**
      * How long the message stays, in milliseconds. When it is not set, the
      * message stays until it is dismissed.
@@ -85,8 +93,10 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
     /** Writes how far a swipe has moved the message toward the end of the line. */
     private slide;
     /**
-     * The dismiss timer, which pauses while a reader is on the message and
-     * continues from what was left.
+     * The dismiss timer, which pauses while a reader is on the message, and
+     * while the page is hidden, and continues from what was left. A message that
+     * arrives in a background tab waits for the reader to come back, as React
+     * Aria's toast queue does.
      *
      * Paused is said on the host so the indicator can freeze with the clock. A
      * `data-` attribute rather than a property, because it is written after

package/dist/toast/item/toast-item.js

@@ -35,6 +35,7 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
             done: () => {
                 this.dismiss();
             },
+            holdWhileHidden: true,
             paused: (paused) => {
                 this.toggleAttribute('data-paused', paused);
             },
@@ -58,6 +59,7 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
             });
         };
     }
+    static { this.words = 'helix-toast-item'; }
     get open() {
         return this.openState ?? true;
     }

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

@@ -63,9 +63,17 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart region - The stack the messages are in. It is in the top layer while a message shows, and takes focus from `hotkey` where no message holds a control.
  */
 export declare class HelixHeadlessToast extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-toast': { label: 'Benachrichtigungen ({hotkey})' } })`.
+     * A message's own words are under `helix-toast-item`.
+     */
+    static words: string;
     /**
      * The key that takes focus to the stack and back, such as `F8` or `Alt+T`:
-     * keys joined by `+`, the last one the key. Empty turns it off.
+     * keys joined by `+`, the last one the key, as `Announcement`'s `hotkey`
+     * reads them: `mod` is Command on Apple devices and Control elsewhere.
+     * Empty turns it off.
      */
     hotkey: string;
     /**
@@ -106,12 +114,24 @@ export declare class HelixHeadlessToast extends HelixElement {
     /** What the assertive region is saying. */
     private urgent;
     private readonly hush;
+    /**
+     * Words waiting for the next frame: the polite ones and the urgent ones.
+     *
+     * Collected rather than written straight in, because the accessibility tree
+     * is built once a frame: two messages that arrive in separate tasks of one
+     * frame would otherwise each overwrite the region, and only the second
+     * would be heard.
+     */
+    private readonly pending;
+    /** Whether a frame is already coming to say what is pending. */
+    private filling;
     /**
      * Says messages that have just arrived, each once, `danger` ones assertively.
      *
      * Emptied first and filled a frame later, so a message with the same words
      * as the one before is still a change, and so a region the stack has just
-     * shown is in the accessibility tree before its words land.
+     * shown is in the accessibility tree before its words land. Every message
+     * that arrives before that frame is said in it, each as its own sentence.
      */
     private announce;
     /**

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

@@ -4,11 +4,10 @@ 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, DelayController, deepActiveElement, deepContains, FocusScopeController, fillTemplate, focusableElements, HelixElement, hostAria, scrollHolders, } from '@fusion.dev/helix-core';
+import { animationsFinished, customElement, DelayController, deepActiveElement, deepContains, FocusScopeController, focusableElements, formatWords, HelixElement, hostAria, matchesChord, onApple, scrollHolders, words, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { matchesHotkey, parseHotkey } from '../hotkey.js';
-import { messageWords } from '../words.js';
+import { joinSaid, messageWords } from '../words.js';
 let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
     constructor() {
         super(...arguments);
@@ -17,6 +16,8 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
         this.said = '';
         this.urgent = '';
         this.hush = new DelayController(this, { renders: false });
+        this.pending = { said: [], urgent: [] };
+        this.filling = false;
         this.scope = new FocusScopeController(this, {
             contents: () => this.showing.flatMap((one) => {
                 const target = focusTarget(one);
@@ -25,7 +26,7 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
             surface: () => this.region,
         });
         this.handleHotkey = (event) => {
-            if (event.defaultPrevented || !matchesHotkey(event, parseHotkey(this.hotkey))) {
+            if (event.defaultPrevented || !matchesChord(event, this.hotkey, onApple())) {
                 return;
             }
             if (this.scope.holdsFocus) {
@@ -83,27 +84,34 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
             });
         };
     }
+    static { this.words = 'helix-toast'; }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, {
-            label: fillTemplate(this.label, { hotkey: this.hotkey }),
+            label: formatWords(this, 'label', { hotkey: this.hotkey }),
             role: 'region',
         });
     }
     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() === '') {
+        for (const one of arrived) {
+            const words = messageWords(one);
+            if (words !== '') {
+                ;
+                (isDanger(one) ? this.pending.urgent : this.pending.said).push(words);
+            }
+        }
+        if (this.filling || (this.pending.said.length === 0 && this.pending.urgent.length === 0)) {
             return;
         }
+        this.filling = true;
         this.said = '';
         this.urgent = '';
         const fill = () => {
-            this.said = said;
-            this.urgent = urgent;
+            this.filling = false;
+            this.said = joinSaid(this.pending.said);
+            this.urgent = joinSaid(this.pending.urgent);
+            this.pending.said = [];
+            this.pending.urgent = [];
             this.hush.start(1000, () => {
                 this.said = '';
                 this.urgent = '';
@@ -161,8 +169,7 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
                 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());
+            void animationsFinished(one).then(() => one.remove());
         }
     }
     get showing() {
@@ -194,8 +201,7 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
         }
     }
     lowerWhenStill(region) {
-        const running = typeof this.getAnimations === 'function' ? this.getAnimations({ subtree: true }) : [];
-        void Promise.allSettled(running.map((one) => one.finished)).then(() => {
+        void animationsFinished(this).then(() => {
             if (this.showing.length === 0 && popoverOpen(region)) {
                 region.hidePopover();
             }
@@ -266,6 +272,7 @@ __decorate([
     property()
 ], HelixHeadlessToast.prototype, "hotkey", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessToast.prototype, "label", void 0);
 __decorate([

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, reportValues, 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';
@@ -139,9 +139,7 @@ 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);
@@ -152,7 +150,7 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
             this.internals.setFormValue(null);
         }
         else if (this.multiple) {
-            reportValues(this.internals, this.name, this.values);
+            reportValues(this.internals, this.name, this.values, { state: 'entries' });
         }
         else {
             this.internals.setFormValue(this.value);

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,6 +24,28 @@ 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.
  *
+ * **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
@@ -44,8 +70,17 @@ 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 {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-toolbar': { label: 'Werkzeugleiste' } })`.
+     */
+    static words: string;
     /**
      * The toolbar's name, read by screen readers.
      *
@@ -159,6 +194,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

@@ -5,13 +5,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessToolbar_1;
-import { AriaForwardController, closestInstance, customElement, HelixElement, inlineStep, keyClaimed, } from '@fusion.dev/helix-core';
+import { AriaForwardController, closestInstance, customElement, HelixElement, inlineStep, keyClaimed, toolbarAround, words, } 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') ||
@@ -21,11 +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);
+};
+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 {
+let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
     constructor() {
         super(...arguments);
         this.label = 'Toolbar';
@@ -58,7 +77,7 @@ let HelixHeadlessToolbar = HelixHeadlessToolbar_1 = class HelixHeadlessToolbar e
                 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);
@@ -116,11 +135,14 @@ let HelixHeadlessToolbar = HelixHeadlessToolbar_1 = class HelixHeadlessToolbar e
             if (element && 'focusItem' in element && typeof element.focusItem === 'function') {
                 element.focusItem();
             }
-            else {
-                element?.focus();
+            else if (element) {
+                ;
+                (ownsTabStop(element) ? element : stopOf(element)).focus();
             }
         };
     }
+    static { HelixHeadlessToolbar_1 = this; }
+    static { this.words = 'helix-toolbar'; }
     get controls() {
         const controls = [];
         for (const child of this.children) {
@@ -189,7 +211,7 @@ let HelixHeadlessToolbar = HelixHeadlessToolbar_1 = class HelixHeadlessToolbar e
                 element.focusable = stop;
             }
             else if (foreign || this.wroteForeign) {
-                element.tabIndex = stop ? 0 : -1;
+                stopOf(element).tabIndex = stop ? 0 : -1;
             }
         }
     }
@@ -206,8 +228,7 @@ let HelixHeadlessToolbar = HelixHeadlessToolbar_1 = class HelixHeadlessToolbar e
         if (!parent) {
             return false;
         }
-        return (closestInstance(parent, HelixHeadlessToolbar_1) !== null ||
-            parent.closest('[role="toolbar"]') !== null);
+        return closestInstance(parent, HelixHeadlessToolbar_1) !== null || toolbarAround(this) !== null;
     }
     get axis() {
         return this.orientation ?? 'horizontal';
@@ -237,6 +258,18 @@ let HelixHeadlessToolbar = HelixHeadlessToolbar_1 = class HelixHeadlessToolbar e
         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() {
         const nested = this.nested;
         return html `<div
@@ -250,6 +283,7 @@ let HelixHeadlessToolbar = HelixHeadlessToolbar_1 = class HelixHeadlessToolbar e
     }
 };
 __decorate([
+    words,
     property()
 ], HelixHeadlessToolbar.prototype, "label", void 0);
 __decorate([

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

@@ -5,31 +5,33 @@ declare const HelixHeadlessTooltip_base: (new (...args: any[]) => import("@fusio
  * @summary A short text that appears next to an element on hover and focus.
  *
  * @description
- * The trigger is slotted and stays your own element. The bubble renders in the
+ * The trigger stays your own element. The bubble renders in the
  * top layer through the popover API, so an ancestor with `overflow: hidden`
  * 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.
  *
- * **The tooltip describes its trigger itself, in both forms.** Wrap the
- * trigger, or place the tooltip beside it and name the trigger with `for`:
+ * **Place the tooltip beside its trigger, name the trigger with `for`, and
+ * name the tooltip in the trigger's `aria-describedby`.** The description is
+ * then in your own markup, so it is in the server's HTML and in the
+ * accessibility tree at rest, in every browser, before anyone points at the
+ * trigger or focuses it:
  *
  * ```html
- * <helix-headless-button id="save">Save</helix-headless-button>
- * <helix-headless-tooltip for="save" content="Save your work"></helix-headless-tooltip>
+ * <helix-headless-button aria-describedby="save-tip" id="save">Save</helix-headless-button>
+ * <helix-headless-tooltip content="Save your work" for="save" id="save-tip"></helix-headless-tooltip>
  * ```
  *
- * 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.
- * 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.
+ * Without the attribute, the tooltip links itself through an element reference
+ * on the control that takes focus, and it never writes into your markup before
+ * you act, so hydration stays intact. 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 you first point at it or focus it, so a screen
+ * reader in reading mode meets it with no description until then. Where the
+ * browser has no element references, nothing links the two, and the tooltip
+ * warns once on first open. The tooltip can also wrap its trigger, which
+ * describes a Helix component and leaves a plain element undescribed. In the
+ * `for` form the tooltip itself is out of the accessibility tree while its
+ * bubble is down, so you meet 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
@@ -114,6 +116,14 @@ export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
      * Names an element in the same tree, so a tooltip inside another component's
      * shadow root points at one in that root rather than one in the document.
      *
+     * Give the tooltip an `id` and name it in the trigger's `aria-describedby`,
+     * so the trigger is described in the server's markup and at rest:
+     *
+     * ```html
+     * <button aria-describedby="save-tip" id="save">Save</button>
+     * <helix-headless-tooltip content="Save your work" for="save" id="save-tip"></helix-headless-tooltip>
+     * ```
+     *
      * **In React this arrives as a property and not as an attribute**, which is
      * worth knowing before someone reads the DOM and thinks it did not take.
      * Measured against React 19.2.8: `for` exists on the prototype, so React sets