@fusion.dev/helix-headless 0.142.1 → 0.144.0

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

@@ -4,28 +4,45 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, DisabledCascadeController, HelixFormElement, hostAria, IndicatorController, KeyboardNavigationController, MixinControllerValue, MixinField, } from '@fusion.dev/helix-core';
+import { commaList, customElement, DisabledCascadeController, HelixFormElement, hostAria, IndicatorController, KeyboardNavigationController, MixinControllerValue, MixinField, rovingStop, toggleValue, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessToggle } from '../root/toggle-root.js';
 let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
+        this.lastFocused = undefined;
+        this.noteFocus = (event) => {
+            const item = this.items.find((one) => one === event.target);
+            if (this.multiple && item && item !== this.lastFocused) {
+                this.lastFocused = item;
+                this.sync();
+            }
+        };
+        this.focusable = true;
         this.indicator = new IndicatorController(this, {
-            active: () => this.items.find((item) => item.value === this.value),
+            active: () => this.multiple ? undefined : this.items.find((item) => item.value === this.value),
             indicator: () => this.partNamed('indicator'),
             observe: () => this.items,
             surface: () => this.partNamed('track'),
         });
-        this.keys = new KeyboardNavigationController(this, { items: () => this.items });
+        this.keys = new KeyboardNavigationController(this, {
+            items: () => this.items,
+            selects: () => !this.multiple,
+        });
         this.cascade = new DisabledCascadeController(this, {
             items: () => this.items,
         });
         this.handleSelection = (event) => {
-            if (event.defaultPrevented) {
-                return;
-            }
-            this.requestValue(event.detail.value);
+            queueMicrotask(() => {
+                if (event.defaultPrevented) {
+                    return;
+                }
+                const value = event.detail.value;
+                this.requestValue(this.multiple
+                    ? toggleValue(this.values, value, this.items.map((item) => item.value)).join(',')
+                    : value);
+            });
         };
     }
     adopt() {
@@ -38,23 +55,59 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         }
     }
     sync() {
-        const active = this.items.find((item) => item.value === this.value);
-        const entry = active ? undefined : this.items.find((item) => !item.disabled);
+        const active = this.multiple ? undefined : this.items.find((item) => item.value === this.value);
+        const pressed = new Set(this.values);
+        const entry = this.focusable ? this.entry() : undefined;
         for (const item of this.items) {
             item.selected = item === active;
+            item.pressed = this.multiple ? pressed.has(item.value) : undefined;
             item.focusable = item === entry;
         }
     }
+    entry() {
+        const items = this.items;
+        if (this.multiple) {
+            return rovingStop(items, this.lastFocused, {
+                disabled: (item) => item.disabled,
+                selected: (item) => item.pressed === true,
+            });
+        }
+        const active = items.find((item) => item.value === this.value);
+        return active && !active.disabled ? active : items.find((item) => !item.disabled);
+    }
+    get multiple() {
+        return this.selectionMode === 'multiple';
+    }
+    get focusTarget() {
+        return (super.focusTarget ??
+            this.entry()?.shadowRoot?.querySelector('[part="item"]') ??
+            null);
+    }
     get items() {
-        return [...this.children].filter((child) => child instanceof HelixHeadlessToggle);
+        return [...(this.children ?? [])].filter((child) => child instanceof HelixHeadlessToggle);
+    }
+    get answered() {
+        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);
     }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelection);
+        this.addEventListener('focusin', this.noteFocus);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-select', this.handleSelection);
+        this.removeEventListener('focusin', this.noteFocus);
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -70,11 +123,31 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
     willUpdate(changed) {
         super.willUpdate(changed);
         this.adopt();
-        hostAria(this.internals, { label: this.label, role: 'radiogroup' });
-        this.internals.setFormValue(this.value === '' ? null : this.value);
+        hostAria(this.internals, { label: this.label, role: this.multiple ? 'toolbar' : 'radiogroup' });
+        this.internals.ariaOrientation = this.orientation ?? null;
+        this.internals.setFormValue(this.formValue());
+    }
+    formValue() {
+        if (!this.answered) {
+            return null;
+        }
+        if (!this.multiple || this.name === '') {
+            return this.value;
+        }
+        const data = new FormData();
+        for (const value of this.values) {
+            data.append(this.name, value);
+        }
+        return data;
     }
     validate() {
-        this.reportRequired(this.value === '', 'Choose one to continue.', 'track');
+        this.reportRequired(!this.answered, 'Choose one to continue.', 'track');
+    }
+    get values() {
+        return this.multiple ? commaList(this.value) : this.value === '' ? [] : [this.value];
+    }
+    set values(next) {
+        this.value = next.join(',');
     }
     render() {
         const inside = this.labelPlacement === 'start';
@@ -90,6 +163,7 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
             this.adopt();
             this.sync();
             this.indicator.place();
+            this.requestUpdate();
         }}
           ></slot>
         </div>
@@ -98,9 +172,21 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
       ${this.renderHint()}${this.renderFeedback()}`;
     }
 };
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessToggleGroup.prototype, "focusable", void 0);
 __decorate([
     property({ attribute: 'label-placement', reflect: true })
 ], HelixHeadlessToggleGroup.prototype, "labelPlacement", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessToggleGroup.prototype, "orientation", void 0);
+__decorate([
+    property({ attribute: 'selection-mode', reflect: true })
+], HelixHeadlessToggleGroup.prototype, "selectionMode", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessToggleGroup.prototype, "values", null);
 HelixHeadlessToggleGroup = __decorate([
     customElement('helix-headless-toggle-group')
 ], HelixHeadlessToggleGroup);

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

@@ -1,11 +1,13 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { HelixElement, HostClickController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessToggle_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSelectableItemInterface) & typeof HelixElement;
 /**
  * @summary One option in a toggle group.
  *
  * @description
- * Renders a `<button role="radio">` for use as a form control.
+ * Renders a `<button role="radio">` for use as a form control. In a group with
+ * `selection-mode="multiple"` it is a `<button>` that says whether it is
+ * pressed with `aria-pressed`.
  *
  * Do not use it for navigation. For navigation, use links marked with
  * `aria-current` and styled by the `data-navigation-item` recipe in the base
@@ -23,9 +25,12 @@ declare const HelixHeadlessToggle_base: (new (...args: any[]) => import("@fusion
  *
  * @csspart item - The radio button.
  *
+ * @cssstate pressed - The item is pressed, in a group where several can be.
  * @cssstate selected - The item is chosen.
  */
 export declare class HelixHeadlessToggle extends HelixHeadlessToggle_base {
+    /** A click on the element itself, `click()` included, chooses it, as on `Radio`. */
+    protected readonly clicks: HostClickController;
     /**
      * Whether the markup declares the item chosen. A form reset returns to it.
      *
@@ -56,23 +61,33 @@ export declare class HelixHeadlessToggle extends HelixHeadlessToggle_base {
     get defaultSelected(): boolean;
     set defaultSelected(next: boolean);
     /**
-     * Whether the item holds the group's tab stop while nothing is chosen.
+     * Whether the item holds the group's tab stop. Unset, the chosen item holds
+     * it.
      *
-     * The stop normally rides on the selection, and an unanswered group has no
-     * selection, so without this the keyboard cannot reach it. Written by the
-     * group, with no attribute: it is coordination between elements, and
-     * `tabindex` on a host the consumer rendered is the change a React consumer's
-     * hydration reports and does not patch up.
+     * Written by the group on every item: `true` for the chosen item, or for the
+     * first item that can be chosen while there is no selection to carry the
+     * stop, and `false` for every item, the chosen one too, while a toolbar the
+     * group sits in holds the stop. No attribute: it is coordination between
+     * elements, and `tabindex` on a host the consumer rendered is the change a
+     * React consumer's hydration reports and does not patch up.
      */
-    focusable: boolean;
+    focusable?: boolean;
+    /**
+     * Whether the item is pressed, in a group where several can be, and
+     * `undefined` in a group where one is chosen.
+     *
+     * Written by the group, like `selected`, so no attribute.
+     */
+    pressed?: boolean | undefined;
+    protected willUpdate(changed: PropertyValues): void;
     /**
      * Asks for the render that follows a hydration, so the stop stops being every
      * choice's.
      *
      * `tabindex` reads `childrenKnown` and a hydrating render is one where that is
      * false, which is what keeps the hydrating render the server's. Nothing else
-     * would ask: the group writes an already-false `focusable` onto every choice
-     * but one, which changes nothing and so re-renders nothing.
+     * is sure to ask: a write from the group that leaves `focusable` as it was
+     * re-renders nothing.
      */
     protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;

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

@@ -4,13 +4,13 @@ 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, HelixElement, MixinSelectableItem } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { customElement, HelixElement, HostClickController, MixinSelectableItem, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(HelixElement) {
     constructor() {
         super(...arguments);
-        this.focusable = false;
+        this.clicks = new HostClickController(this, () => this.partNamed('item'));
     }
     get defaultSelected() {
         return this.hasAttribute('selected');
@@ -18,6 +18,10 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(
     set defaultSelected(next) {
         this.toggleAttribute('selected', next);
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('pressed', this.pressed === true);
+    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
@@ -26,10 +30,11 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(
         return html `<button
       part="item"
       type="button"
-      role="radio"
-      aria-checked=${this.selected ? 'true' : 'false'}
+      role=${this.pressed === undefined ? 'radio' : nothing}
+      aria-checked=${this.pressed === undefined ? (this.selected ? 'true' : 'false') : nothing}
+      aria-pressed=${this.pressed === undefined ? nothing : String(this.pressed)}
       ?disabled=${this.disabled}
-      tabindex=${this.selected || this.focusable || !this.childrenKnown ? '0' : '-1'}
+      tabindex=${(this.focusable ?? this.selected) || !this.childrenKnown ? '0' : '-1'}
       @click=${() => this.select()}
     >
       <slot></slot>
@@ -39,6 +44,9 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessToggle.prototype, "focusable", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessToggle.prototype, "pressed", void 0);
 HelixHeadlessToggle = __decorate([
     customElement('helix-headless-toggle')
 ], HelixHeadlessToggle);

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A group of controls that share one tab stop.
@@ -9,7 +9,14 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * The toolbar is one tab stop, and the arrow keys move between its controls, so
  * three toolbars take three presses of Tab to pass. Any element the browser can
- * focus counts as a control, including your own elements.
+ * 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 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.
  *
  * @since 0.1.0
  * @status stable
@@ -24,27 +31,50 @@ import { type PropertyValues, type TemplateResult } from 'lit';
 export declare class HelixHeadlessToolbar extends HelixElement {
     /**
      * The toolbar's name, read by screen readers.
+     *
+     * An `aria-label` or `aria-labelledby` on the host names the toolbar too,
+     * and wins over this.
      */
     label: string;
+    /** Carries a host `aria-label` and `aria-labelledby` to the toolbar. */
+    protected readonly aria: AriaForwardController;
+    /**
+     * Whether the stop has been written onto controls this package does not
+     * know, which happens on the first focus. From then on, every move of the
+     * stop has to write them too, or the one at `0` can be removed or disabled
+     * and leave every other one at `-1`.
+     */
+    private wroteForeign;
     /**
      * The direction the arrow keys move focus in.
      */
     orientation?: 'horizontal' | 'vertical';
     private watcher;
     /**
-     * Children that can take the tab stop, in document order.
-     *
-     * Every child that is not `disabled` and not `aria-hidden`, which is
-     * deliberately a test on the element rather than a list of tag names: a
-     * toolbar holds anything, including elements this package has never heard of.
-     * Client only, there being no tree to walk on the server.
+     * The children that take part in the toolbar, in document order, each with
+     * the elements in it that take focus.
      *
-     * **It does not ask a child whether it is focusable.** Reading a `focusable`
-     * property is what `setTabStop` does when moving the stop, not what this does
-     * when choosing the set, so an element that is neither disabled nor hidden and
-     * still cannot take focus is counted here and skipped there.
+     * A test on the element rather than a list of tag names: a toolbar holds
+     * anything, including elements this package has never heard of. A child
+     * that takes no focus and holds nothing that does is skipped. Client only,
+     * there being no tree to walk on the server.
      */
     private get controls();
+    /** The elements in a child's light DOM that take focus. */
+    private within;
+    /**
+     * The stops of a child that takes focus itself: the child, or the members of
+     * a composite that owns its tab stop, such as a toggle group, which the
+     * toolbar enters at a member and moves the stop of through `focusable`.
+     */
+    private inside;
+    /**
+     * Where focus lands on arriving at a control. A nested composite is entered
+     * at the stop it holds, which for a toggle group is the chosen toggle.
+     */
+    private entry;
+    /** The control a press or a focus came from, by its path. */
+    private origin;
     /**
      * Moves the single tab stop to one control.
      *
@@ -74,9 +104,10 @@ export declare class HelixHeadlessToolbar extends HelixElement {
      * already at `-1`, leaving a toolbar the keyboard cannot reach at all. A Save
      * button disabling itself once the form is clean is enough to do it.
      *
-     * `foreign` stays false, the same as the first claim: a control this package
-     * has never heard of that was never given `tabindex="-1"` is still in the
-     * document's own tab order, so it is never the one that gets stranded.
+     * `foreign` stays false, the same as the first claim, until a focus has
+     * written `tabindex="-1"` onto foreign controls. From then on `setTabStop`
+     * writes them as well, so removing or disabling the native button that held
+     * the stop hands it to the first one left.
      */
     private readonly restoreTabStop;
     /**
@@ -86,6 +117,15 @@ export declare class HelixHeadlessToolbar extends HelixElement {
      * so a reflected default cannot appear on the host after hydration.
      */
     private get axis();
+    /**
+     * The toolbar's own keys, from inside a nested composite.
+     *
+     * In capture, ahead of the composite, which answers every arrow itself and
+     * would otherwise hold the reader inside it. Only the keys along the
+     * toolbar's axis and Home and End are taken, so the arrows across it still
+     * move inside the composite.
+     */
+    private readonly handleCompositeKeydown;
     private readonly handleKeydown;
     connectedCallback(): void;
     disconnectedCallback(): void;

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

@@ -4,28 +4,63 @@ 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, HelixElement, inlineStep, keyClaimed } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixElement, inlineStep, keyClaimed, } from '@fusion.dev/helix-core';
 import { html } 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 takesFocus = (node) => {
+    if (!(node instanceof HTMLElement) ||
+        node.hasAttribute('disabled') ||
+        node.getAttribute('aria-hidden') === 'true') {
+        return false;
+    }
+    return (node.matches(NATIVE) ||
+        ownsTabStop(node) ||
+        node.shadowRoot?.delegatesFocus === true ||
+        node.shadowRoot?.querySelector(TABBABLE) != null);
+};
 let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
     constructor() {
         super(...arguments);
         this.label = 'Toolbar';
+        this.aria = new AriaForwardController(this, {
+            label: true,
+            target: () => this.partNamed('toolbar'),
+        });
+        this.wroteForeign = false;
         this.handleFocusIn = (event) => {
-            const control = this.controls.find((entry) => entry.contains(event.target));
+            const control = this.origin(event);
             if (control) {
                 this.setTabStop(control);
             }
         };
         this.restoreTabStop = () => {
             const controls = this.controls;
-            const held = controls.some((control) => ownsTabStop(control) ? control.focusable : control.tabIndex === 0);
+            const held = controls.some((control) => {
+                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;
+            });
             if (controls.length > 0 && !held) {
                 this.setTabStop(controls[0], false);
             }
         };
+        this.handleCompositeKeydown = (event) => {
+            const control = this.origin(event);
+            if (!control || control.stops.length === 1) {
+                return;
+            }
+            this.handleKeydown(event);
+            if (event.defaultPrevented) {
+                event.stopPropagation();
+            }
+        };
         this.handleKeydown = (event) => {
             if (!KEYS.has(event.key) || keyClaimed(event)) {
                 return;
@@ -34,7 +69,8 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
             const forward = this.axis === 'horizontal' ? along === 1 : event.key === 'ArrowDown';
             const back = this.axis === 'horizontal' ? along === -1 : event.key === 'ArrowUp';
             const controls = this.controls;
-            const current = controls.findIndex((entry) => entry.contains(event.target));
+            const origin = this.origin(event);
+            const current = origin ? controls.findIndex((control) => control.child === origin.child) : -1;
             if (current === -1) {
                 return;
             }
@@ -57,30 +93,75 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
             event.preventDefault();
             const target = controls[next];
             this.setTabStop(target);
-            target?.focus();
+            const element = target ? this.entry(target) : undefined;
+            if (element && 'focusItem' in element && typeof element.focusItem === 'function') {
+                element.focusItem();
+            }
+            else {
+                element?.focus();
+            }
         };
     }
     get controls() {
-        return [...this.children].filter((child) => {
-            if (!(child instanceof HTMLElement)) {
-                return false;
+        const controls = [];
+        for (const child of this.children) {
+            if (!(child instanceof HTMLElement) ||
+                child.hasAttribute('disabled') ||
+                child.getAttribute('aria-hidden') === 'true') {
+                continue;
             }
-            return !child.hasAttribute('disabled') && child.getAttribute('aria-hidden') !== 'true';
-        });
+            const stops = takesFocus(child) ? this.inside(child) : this.within(child);
+            if (stops.length > 0) {
+                controls.push({ child, stops });
+            }
+        }
+        return controls;
+    }
+    within(child) {
+        return [...child.querySelectorAll('*')].filter(takesFocus);
+    }
+    inside(child) {
+        if (!ownsTabStop(child)) {
+            return [child];
+        }
+        const members = this.within(child);
+        return members.length > 1 ? members : [child];
+    }
+    entry(control) {
+        const { stops } = control;
+        if (stops.length === 1) {
+            return stops[0];
+        }
+        return (stops.find((stop) => (ownsTabStop(stop) && stop.focusable) ||
+            stop.selected === true) ?? stops[0]);
+    }
+    origin(event) {
+        const path = event.composedPath();
+        return this.controls.find((control) => control.stops.some((stop) => path.includes(stop)));
     }
     setTabStop(active, foreign = true) {
+        if (foreign) {
+            this.wroteForeign = true;
+        }
         for (const control of this.controls) {
-            const stop = control === active;
-            if (ownsTabStop(control)) {
-                control.focusable = stop;
+            if (control.stops.length !== 1) {
+                if (ownsTabStop(control.child)) {
+                    control.child.focusable = control.child === active?.child;
+                }
+                continue;
+            }
+            const element = control.stops[0];
+            const stop = control.child === active?.child;
+            if (ownsTabStop(element)) {
+                element.focusable = stop;
             }
-            else if (foreign) {
-                control.tabIndex = stop ? 0 : -1;
+            else if (foreign || this.wroteForeign) {
+                element.tabIndex = stop ? 0 : -1;
             }
         }
     }
     async claimTabStop() {
-        const pending = [...new Set(this.controls.map((control) => control.localName))].filter((name) => name.includes('-'));
+        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);
     }
@@ -89,6 +170,7 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        this.addEventListener('keydown', this.handleCompositeKeydown, true);
         this.addEventListener('keydown', this.handleKeydown);
         this.addEventListener('focusin', this.handleFocusIn);
         this.watcher = new MutationObserver(this.restoreTabStop);
@@ -100,6 +182,7 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.removeEventListener('keydown', this.handleCompositeKeydown, true);
         this.removeEventListener('keydown', this.handleKeydown);
         this.removeEventListener('focusin', this.handleFocusIn);
         this.watcher?.disconnect();

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

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

package/dist/tooltip/focus-target.js

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