@fusion.dev/helix-headless 0.209.0 → 0.211.0

package/dist/map/root/map-root.js

@@ -3,6 +3,8 @@ import { auditName, customElement, focusItemOf, formatWords, HelixActivateEvent,
 import { buildings, cloudRain, dotsNine, leaf, mountains, path, polygon, stack, target, } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { html as staticHtml } from 'lit/static-html.js';
+import '../../icon-button/index.js';
 import { live } from 'lit/directives/live.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 const MAP_TYPES = ['standard', 'hybrid', 'satellite'];
@@ -34,6 +36,7 @@ const TILTED = 50;
 const placed = (marker) => Number.isFinite(marker.lat) && Number.isFinite(marker.lng);
 const ASK_LAPSES = 3000;
 const SETTLES = 400;
+const stopPress = (event) => event.stopPropagation();
 let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement) {
     constructor() {
         super(...arguments);
@@ -398,12 +401,16 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
             return nothing;
         }
         const entries = this.layerEntries;
-        return html `<button
+        const button = this.controlTag;
+        const { material, raised } = this.controlAxes;
+        return staticHtml `<${button}
         part="layers-toggle"
+        exportparts="button: layers-toggle-button, live: layers-toggle-live, spinner: layers-toggle-spinner, text: layers-toggle-text"
         aria-controls="layers-menu"
-        aria-expanded=${this.layersOpen ? 'true' : 'false'}
-        aria-label=${this.layersLabel}
-        type="button"
+        .expanded=${this.layersOpen}
+        label=${this.layersLabel}
+        material=${material ?? nothing}
+        ?raised=${raised}
         @click=${() => {
             this.layersOpen = !this.layersOpen;
             if (this.layersOpen) {
@@ -411,6 +418,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
             }
         }}
         @focusout=${this.handleMenuFocusOut}
+        @helix-press=${stopPress}
         @keydown=${this.handleMenuKeydown}
       >
         <slot name="layers-icon">
@@ -418,7 +426,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
             ${unsafeSVG(stack.content)}
           </svg>
         </slot>
-      </button>
+      </${button}>
       <div
         part="layers-menu"
         id="layers-menu"
@@ -474,44 +482,98 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
     }
     renderCompass(pan, rotate) {
         const { faceNorthLabel } = this;
-        return html `<div part="compass">
+        const button = this.controlTag;
+        const { material, raised } = this.controlAxes;
+        const ground = material ?? nothing;
+        return staticHtml `<div part="compass">
       ${rotate
-            ? html `<button part="rotate-left" aria-label=${this.rotateLeftLabel} type="button" @click=${() => this.rotate(-ROTATE_STEP)}>
+            ? staticHtml `<${button}
+              part="rotate-left"
+              exportparts="button: rotate-left-button, live: rotate-left-live, spinner: rotate-left-spinner, text: rotate-left-text"
+              label=${this.rotateLeftLabel}
+              material=${ground}
+              @click=${() => this.rotate(-ROTATE_STEP)}
+              @helix-press=${stopPress}
+            >
               <slot name="rotate-left-icon">↺</slot>
-            </button>`
+            </${button}>`
             : nothing}
       ${pan
-            ? html `<button part="pan-up" aria-label=${this.panLabel('up')} type="button" @click=${() => this.pan('up')}>
+            ? staticHtml `<${button}
+              part="pan-up"
+              exportparts="button: pan-up-button, live: pan-up-live, spinner: pan-up-spinner, text: pan-up-text"
+              label=${this.panLabel('up')}
+              material=${ground}
+              @click=${() => this.pan('up')}
+              @helix-press=${stopPress}
+            >
               <slot name="pan-up-icon">${this.panGlyph('up')}</slot>
-            </button>`
+            </${button}>`
             : nothing}
       ${rotate
-            ? html `<button part="rotate-right" aria-label=${this.rotateRightLabel} type="button" @click=${() => this.rotate(ROTATE_STEP)}>
+            ? staticHtml `<${button}
+              part="rotate-right"
+              exportparts="button: rotate-right-button, live: rotate-right-live, spinner: rotate-right-spinner, text: rotate-right-text"
+              label=${this.rotateRightLabel}
+              material=${ground}
+              @click=${() => this.rotate(ROTATE_STEP)}
+              @helix-press=${stopPress}
+            >
               <slot name="rotate-right-icon">↻</slot>
-            </button>`
+            </${button}>`
             : nothing}
       ${pan
-            ? html `<button part="pan-start" aria-label=${this.panLabel('start')} type="button" @click=${() => this.pan('start')}>
+            ? staticHtml `<${button}
+              part="pan-start"
+              exportparts="button: pan-start-button, live: pan-start-live, spinner: pan-start-spinner, text: pan-start-text"
+              label=${this.panLabel('start')}
+              material=${ground}
+              @click=${() => this.pan('start')}
+              @helix-press=${stopPress}
+            >
               <slot name="pan-start-icon">${this.panGlyph('start')}</slot>
-            </button>`
+            </${button}>`
             : nothing}
-      <button part="face-north" aria-label=${faceNorthLabel} type="button" style=${`--map-needle-turn: ${-this.bearing}deg`} @click=${() => this.faceNorth()}>
+      <${button}
+        part="face-north"
+        exportparts="button: face-north-button, live: face-north-live, spinner: face-north-spinner, text: face-north-text"
+        label=${faceNorthLabel}
+        material=${ground}
+        ?raised=${raised}
+        style=${`--map-needle-turn: ${-this.bearing}deg`}
+        @click=${() => this.faceNorth()}
+        @helix-press=${stopPress}
+      >
         <slot name="face-north-icon">
           <svg part="needle" aria-hidden="true" viewBox="0 0 16 16">
             <path data-end="north" d="M8 1.5 10.5 8h-5Z" />
             <path data-end="south" d="M8 14.5 5.5 8h5Z" />
           </svg>
         </slot>
-      </button>
+      </${button}>
       ${pan
-            ? html `<button part="pan-end" aria-label=${this.panLabel('end')} type="button" @click=${() => this.pan('end')}>
+            ? staticHtml `<${button}
+              part="pan-end"
+              exportparts="button: pan-end-button, live: pan-end-live, spinner: pan-end-spinner, text: pan-end-text"
+              label=${this.panLabel('end')}
+              material=${ground}
+              @click=${() => this.pan('end')}
+              @helix-press=${stopPress}
+            >
               <slot name="pan-end-icon">${this.panGlyph('end')}</slot>
-            </button>`
+            </${button}>`
             : nothing}
       ${pan
-            ? html `<button part="pan-down" aria-label=${this.panLabel('down')} type="button" @click=${() => this.pan('down')}>
+            ? staticHtml `<${button}
+              part="pan-down"
+              exportparts="button: pan-down-button, live: pan-down-live, spinner: pan-down-spinner, text: pan-down-text"
+              label=${this.panLabel('down')}
+              material=${ground}
+              @click=${() => this.pan('down')}
+              @helix-press=${stopPress}
+            >
               <slot name="pan-down-icon">${this.panGlyph('down')}</slot>
-            </button>`
+            </${button}>`
             : nothing}
     </div>`;
     }
@@ -525,37 +587,62 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         if (!pan && !zoom && !rotate && !tilt && !fullscreen && menu === nothing) {
             return nothing;
         }
-        return html `<div part="controls" role="group" aria-label=${this.controlsLabel}>
+        const button = this.controlTag;
+        const { material, raised } = this.controlAxes;
+        const ground = material ?? nothing;
+        return staticHtml `<div part="controls" role="toolbar" aria-label=${this.controlsLabel}>
       ${fullscreen
-            ? html `<button
+            ? staticHtml `<${button}
               part="fullscreen"
-              aria-label=${this.fullscreenLabel}
+              exportparts="button: fullscreen-button, live: fullscreen-live, spinner: fullscreen-spinner, text: fullscreen-text"
               aria-pressed=${this.filled ? 'true' : 'false'}
-              type="button"
+              label=${this.fullscreenLabel}
+              material=${ground}
+              ?raised=${raised}
               @click=${this.toggleFullscreen}
+              @helix-press=${stopPress}
             >
               <slot name="fullscreen-icon">⤢</slot>
-            </button>`
+            </${button}>`
             : nothing}
       ${menu}
       ${tilt
-            ? html `<button
+            ? staticHtml `<${button}
               part="tilt"
-              aria-label=${this.tiltLabel}
+              exportparts="button: tilt-button, live: tilt-live, spinner: tilt-spinner, text: tilt-text"
               aria-pressed=${this.pitch > 0 ? 'true' : 'false'}
-              type="button"
+              label=${this.tiltLabel}
+              material=${ground}
+              ?raised=${raised}
               @click=${() => this.tiltTo(this.pitch > 0 ? 0 : TILTED)}
+              @helix-press=${stopPress}
             >
               <slot name="tilt-icon">3D</slot>
-            </button>`
+            </${button}>`
             : nothing}
       ${zoom
-            ? html `<button part="zoom-in" aria-label=${this.zoomInLabel} type="button" @click=${() => this.zoom(1)}>
+            ? staticHtml `<${button}
+                part="zoom-in"
+                exportparts="button: zoom-in-button, live: zoom-in-live, spinner: zoom-in-spinner, text: zoom-in-text"
+                label=${this.zoomInLabel}
+                material=${ground}
+                ?raised=${raised}
+                @click=${() => this.zoom(1)}
+                @helix-press=${stopPress}
+              >
                 <slot name="zoom-in-icon">+</slot>
-              </button>
-              <button part="zoom-out" aria-label=${this.zoomOutLabel} type="button" @click=${() => this.zoom(-1)}>
+              </${button}>
+              <${button}
+                part="zoom-out"
+                exportparts="button: zoom-out-button, live: zoom-out-live, spinner: zoom-out-spinner, text: zoom-out-text"
+                label=${this.zoomOutLabel}
+                material=${ground}
+                ?raised=${raised}
+                @click=${() => this.zoom(-1)}
+                @helix-press=${stopPress}
+              >
                 <slot name="zoom-out-icon">−</slot>
-              </button>`
+              </${button}>`
             : nothing}
       ${this.drawsCompass ? this.renderCompass(pan, rotate) : nothing}
     </div>`;
@@ -590,6 +677,9 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         }
         return false;
     }
+    get controlTag() {
+        return this.tag('icon-button');
+    }
     panEvent(detail) {
         this.ask('pan', this.sideOf(detail.to));
         return new HelixMapPanEvent(detail);

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, HelixElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixElement, ToolbarController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A group of controls that share one tab stop.
@@ -94,13 +94,6 @@ export declare class HelixHeadlessToolbar extends HelixElement {
     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.
      */
@@ -110,77 +103,12 @@ export declare class HelixHeadlessToolbar extends HelixElement {
      * wrap around from one end to the other.
      */
     stopAtEnds: boolean;
-    private watcher;
-    /**
-     * The children that take part in the toolbar, in document order, each with
-     * the elements in it that take focus.
-     *
-     * 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 toolbar's children, a slot among them read as the elements assigned
-     * to it.
-     *
-     * **For a toolbar a component renders in its own shadow root** and passes a
-     * page's controls into through a slot, as Terminal's header does with its
-     * `actions`: read as a child, the slot holds only its fallback, and the
-     * page's controls kept tab stops of their own beside the toolbar's one.
-     */
-    private get members();
-    /** 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.
-     *
-     * Prefers the control's own `focusable` property to writing `tabindex` on it.
-     * The attribute is a change to markup the consumer rendered, which a React
-     * consumer's hydration reports and does not patch up; a control that offers
-     * the property moves the stop inside its own shadow root instead.
-     *
-     * `tabindex` stays as the fallback, because a toolbar has to hold controls
-     * this package has never heard of.
-     */
-    private setTabStop;
-    /**
-     * Sets the first tab stop once every custom control has upgraded.
-     *
-     * A custom element has no properties at all before it upgrades, so a pass
-     * that ran first would find no `focusable`, take the `tabindex` fallback, and
-     * write the very attribute this exists to avoid.
-     */
-    private claimTabStop;
-    private readonly handleFocusIn;
-    /**
-     * Gives the tab stop back to a control that still exists.
-     *
-     * `controls` excludes anything disabled or hidden, so disabling the control
-     * holding the stop drops it out of the list while every other control is
-     * 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, 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.
+     * The one tab stop and the arrow keys, shared with every toolbar a
+     * component draws: the controls are the children, a slot among them read as
+     * the elements assigned to it.
      */
-    private readonly restoreTabStop;
+    protected readonly tabStop: ToolbarController;
     /**
      * 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.
@@ -195,18 +123,7 @@ 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;
     protected firstUpdated(changed: PropertyValues): void;
     protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;

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

@@ -1,44 +1,8 @@
 var HelixHeadlessToolbar_1;
 import { __decorate } from "tslib";
-import { AriaForwardController, closestInstance, customElement, HelixElement, inlineStep, keyClaimed, toolbarAround, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, closestInstance, customElement, HelixElement, ToolbarController, 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') ||
-        node.getAttribute('aria-hidden') === 'true') {
-        return false;
-    }
-    return (node.matches(NATIVE) ||
-        ownsTabStop(node) ||
-        node.shadowRoot?.delegatesFocus === true ||
-        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 = class HelixHeadlessToolbar extends HelixElement {
     constructor() {
         super(...arguments);
@@ -47,180 +11,16 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
             label: true,
             target: () => this.partNamed('toolbar'),
         });
-        this.wroteForeign = false;
         this.stopAtEnds = false;
-        this.handleFocusIn = (event) => {
-            if (this.nested) {
-                return;
-            }
-            const control = this.origin(event);
-            if (control) {
-                this.setTabStop(control);
-            }
-        };
-        this.restoreTabStop = () => {
-            if (this.nested) {
-                return;
-            }
-            const controls = this.controls;
-            const held = controls.some((control) => {
-                if (control.group) {
-                    return control.group.focusable;
-                }
-                const composite = control.stops.length !== 1;
-                const element = composite ? control.child : control.stops[0];
-                if (ownsTabStop(element)) {
-                    return element.focusable;
-                }
-                return composite || stopOf(element).tabIndex === 0;
-            });
-            if (controls.length > 0 && !held) {
-                this.setTabStop(controls[0], false);
-            }
-        };
-        this.handleCompositeKeydown = (event) => {
-            if (this.nested) {
-                return;
-            }
-            const control = this.origin(event);
-            if (!control || (control.stops.length === 1 && !control.group)) {
-                return;
-            }
-            this.handleKeydown(event);
-            if (event.defaultPrevented) {
-                event.stopPropagation();
-            }
-        };
-        this.handleKeydown = (event) => {
-            if (this.nested || !KEYS.has(event.key) || keyClaimed(event)) {
-                return;
-            }
-            const along = inlineStep(this, event.key);
-            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 origin = this.origin(event);
-            const current = origin ? controls.findIndex((control) => control.child === origin.child) : -1;
-            if (current === -1) {
-                return;
-            }
-            let next = current;
-            const last = controls.length - 1;
-            if (forward) {
-                next = this.stopAtEnds ? Math.min(current + 1, last) : (current + 1) % controls.length;
-            }
-            else if (back) {
-                next = this.stopAtEnds
-                    ? Math.max(current - 1, 0)
-                    : (current - 1 + controls.length) % controls.length;
-            }
-            else if (event.key === 'Home') {
-                next = 0;
-            }
-            else if (event.key === 'End') {
-                next = controls.length - 1;
-            }
-            else {
-                return;
-            }
-            event.preventDefault();
-            const target = controls[next];
-            this.setTabStop(target);
-            const element = target ? this.entry(target) : undefined;
-            if (element && 'focusItem' in element && typeof element.focusItem === 'function') {
-                element.focusItem();
-            }
-            else if (element) {
-                ;
-                (ownsTabStop(element) ? element : stopOf(element)).focus();
-            }
-        };
+        this.tabStop = new ToolbarController(this, {
+            arrows: () => this.axis,
+            members: () => [...this.children],
+            nested: () => this.nested,
+            stopAtEnds: () => this.stopAtEnds,
+        });
     }
     static { HelixHeadlessToolbar_1 = this; }
     static { this.words = 'helix-toolbar'; }
-    get controls() {
-        const controls = [];
-        for (const child of this.members) {
-            if (!(child instanceof HTMLElement) ||
-                child.hasAttribute('disabled') ||
-                child.getAttribute('aria-hidden') === 'true') {
-                continue;
-            }
-            if (takesFocus(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)) {
-                controls.push({ child: stop, stops: [stop] });
-            }
-        }
-        return controls;
-    }
-    get members() {
-        return [...this.children].flatMap((child) => child instanceof HTMLSlotElement ? child.assignedElements({ flatten: true }) : [child]);
-    }
-    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) {
-            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;
-                }
-                continue;
-            }
-            const element = control.stops[0];
-            const stop = control.child === active?.child;
-            if (ownsTabStop(element)) {
-                element.focusable = stop;
-            }
-            else if (foreign || this.wroteForeign) {
-                stopOf(element).tabIndex = stop ? 0 : -1;
-            }
-        }
-    }
-    async claimTabStop() {
-        if (this.nested) {
-            return;
-        }
-        const pending = [...new Set(this.members.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) {
@@ -234,27 +34,10 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
     connectedCallback() {
         super.connectedCallback();
         this.requestUpdate();
-        this.addEventListener('keydown', this.handleCompositeKeydown, true);
-        this.addEventListener('keydown', this.handleKeydown);
-        this.addEventListener('focusin', this.handleFocusIn);
-        this.watcher = new MutationObserver(this.restoreTabStop);
-        this.watcher.observe(this, {
-            attributeFilter: ['disabled', 'aria-hidden'],
-            attributes: true,
-            subtree: true,
-        });
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('keydown', this.handleCompositeKeydown, true);
-        this.removeEventListener('keydown', this.handleKeydown);
-        this.removeEventListener('focusin', this.handleFocusIn);
-        this.watcher?.disconnect();
-        this.watcher = undefined;
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
-        void this.claimTabStop();
+        void this.tabStop.claim();
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -262,7 +45,7 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
         this.toggleState('horizontal', this.axis === 'horizontal');
         this.toggleState('vertical', this.axis === 'vertical');
         if (this.hasUpdated && changed.has('orientation')) {
-            for (const child of this.members) {
+            for (const child of this.tabStop.members) {
                 ;
                 child.requestUpdate?.();
             }
@@ -276,7 +59,7 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
       aria-label=${this.label}
       aria-orientation=${nested ? nothing : this.axis}
     >
-      <slot @slotchange=${() => this.claimTabStop()}></slot>
+      <slot @slotchange=${() => this.tabStop.claim()}></slot>
     </div>`;
     }
 };