@fusion.dev/helix-headless 0.25.1 → 0.30.0

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

@@ -64,8 +64,6 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
      * consumer's server markup does not already have.
      */
     variant?: 'segmented' | 'underlined';
-    /** Watches for anything that moves a tab, since none of it is a property. */
-    private observer;
     private get tabs();
     private get panels();
     private readonly handleSelection;
@@ -74,23 +72,10 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
-    /** The host's own size, which moves every tab and therefore the mark. */
-    private measure;
     /**
-     * Watches every tab for a change of size.
+     * The set changed: pair it up and measure it.
      *
-     * Called again whenever the set changes, because `tabs` reads `this.children`
-     * and filters on `instanceof`, so it is empty until the tab elements upgrade.
-     * At `firstUpdated` it frequently is empty, and observing nothing is silent.
-     *
-     * `observe` is idempotent per element, so re-running this costs nothing and
-     * needs no bookkeeping about which tabs are already watched.
-     */
-    private watch;
-    /**
-     * The set changed: pair it up, watch it, and measure it.
-     *
-     * All three, and dropping `place()` leaves an indicator unplaced for the life
+     * Both, and dropping `place()` leaves an indicator unplaced for the life
      * of the page. The order of events is what does it: the host renders and
      * measures before its tabs have upgraded, so there is no selected tab to
      * measure and `place` refuses; the ResizeObserver's one initial callback

package/dist/tabs/root/tabs-root.js

@@ -19,8 +19,9 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
         });
         this.indicator = new IndicatorController(this, {
             active: () => this.tabs.find((tab) => tab.selected),
-            indicator: () => this.renderRoot?.querySelector('[part="indicator"]'),
-            surface: () => this.renderRoot?.querySelector('[part="tabs"]'),
+            indicator: () => this.partNamed('indicator'),
+            observe: () => this.tabs,
+            surface: () => this.partNamed('tabs'),
         });
         this.label = 'Tabs';
         this.manual = false;
@@ -29,7 +30,6 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
         };
         this.handleSlotChange = () => {
             this.sync();
-            this.watch();
             this.indicator.place();
         };
     }
@@ -54,34 +54,16 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelection);
-        if (this.hasUpdated) {
-            this.measure();
-            this.watch();
-        }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-select', this.handleSelection);
-        this.observer?.disconnect();
-        this.observer = undefined;
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.sync();
         this.indicator.place();
         requestAnimationFrame(() => this.indicator.place());
-        this.measure();
-        this.watch();
-    }
-    measure() {
-        this.observer?.disconnect();
-        this.observer = new ResizeObserver(() => this.indicator.place());
-        this.observer.observe(this);
-    }
-    watch() {
-        for (const tab of this.tabs) {
-            this.observer?.observe(tab);
-        }
     }
     updated(changed) {
         super.updated(changed);

package/dist/tabs/tab/tab.js

@@ -15,7 +15,7 @@ let HelixHeadlessTab = class HelixHeadlessTab extends HelixElement {
         this.value = '';
     }
     focusItem() {
-        this.renderRoot.querySelector('[part="tab"]')?.focus();
+        this.partNamed('tab')?.focus();
     }
     select() {
         if (this.disabled) {

package/dist/textarea/root/textarea-root.js

@@ -11,7 +11,7 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
-            target: () => this.renderRoot?.querySelector('[part="control"]') ?? null,
+            target: () => this.partNamed('control'),
         });
         this.announcesInput = true;
         this.autocomplete = '';
@@ -29,7 +29,7 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
         };
         this.handleChange = (event) => {
             event.stopPropagation();
-            this.dispatchEvent(new Event('change', { bubbles: true, composed: false }));
+            this.announceChange();
         };
         this.rows = 3;
         this.wrap = 'soft';
@@ -39,7 +39,7 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
         delegatesFocus: true,
     }; }
     get control() {
-        return this.renderRoot.querySelector('[part="control"]');
+        return this.partNamed('control');
     }
     grow() {
         const control = this.control;

package/dist/time-input/root/time-input-root.d.ts

@@ -1,9 +1,9 @@
-import { AriaForwardController, HelixFormElement, PopoverController } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../icon/index.js';
 import '../../tag/index.js';
 import '../../time-picker/index.js';
-declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinTokensInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
+declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerEditingInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinTokensInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A time, typed or picked from a list.
  *
@@ -122,20 +122,6 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * What the field says before a time is in it.
      */
     placeholder: string;
-    /**
-     * Whether the control refuses changes while still submitting its value.
-     *
-     * **Enforced by refusing every request in one place**, which is the seam this
-     * component already has: `requestValue` is what every path here comes through,
-     * and gating it once is what stops the next call site from being written
-     * without the check.
-     *
-     * Not `disabled`, which is the confusion worth naming: a disabled control
-     * submits nothing and leaves the tab order, and a read-only one submits its
-     * value and stays reachable, which is what a form showing a value somebody
-     * else set needs.
-     */
-    readOnly: boolean;
     /**
      * How far apart the offered times are, in minutes.
      */
@@ -153,19 +139,12 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * Accessible name for the control that opens the list.
      */
     triggerLabel: string;
-    /**
-     * Whether the caret is in the field, which is when it holds the value.
-     */
-    private editing;
-    /** The overlay, placed against the field for the reason Date Input gives. */
-    protected readonly panel: PopoverController;
-    private get control();
     /** Every time in the value, which may hold more than one. */
     private get held();
     /** One time, written the way `time-style` asks for. */
     private written;
     /** What the field shows: the value while it is being edited, a reading when not. */
-    private get display();
+    protected get display(): string;
     /**
      * What is being typed but not yet held, for `multiple` only.
      *
@@ -192,41 +171,8 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
     private get picked();
     private readonly handleInput;
     private readonly handlePicked;
-    /**
-     * Puts the caret back in the field without the field reopening the list.
-     *
-     * Focus opens the list, so handing focus back after a pick would reopen the
-     * thing that was just answered, and a reader could not get out of it. Input
-     * Date guards the same case by asking where focus came from, which is enough
-     * there and is not enough here: the option that had focus is gone by the time
-     * this runs, so `relatedTarget` is whatever the document fell back to, which
-     * is outside this element and reads as a genuine arrival.
-     *
-     * A flag rather than a better guess, because this element is the one moving
-     * the focus and it is the only thing that can know so. Cleared synchronously,
-     * since `focus()` dispatches before it returns.
-     *
-     * The path cannot be exercised from a spec: `focus()` dispatches no event in
-     * an unfocused document, which is what both the test runtime and the browser
-     * pane here are.
-     */
-    private returning;
-    private returnFocus;
-    private readonly handleBlur;
-    /**
-     * Focusing the field opens the list, and only from outside the element.
-     *
-     * The guard is the one Date Input needed: picking a time shuts the panel and
-     * puts the caret back in the field, and without it the list came straight
-     * back and a reader could not get out of it.
-     */
-    private readonly handleFocus;
-    /** Puts the field back where the answer differs from what was typed. */
-    private restore;
-    /** Reports the value and the validity the host stands behind. */
-    private sync;
-    /** Escape shuts the list without moving the time. */
-    private readonly handleKeydown;
+    /** What is wrong with the times, which the text input cannot say. */
+    protected validate(): string;
     /**
      * Whether the panel is one list of times or a column each.
      *
@@ -243,12 +189,7 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * only the departure has to be named.
      */
     variant?: 'list' | 'wheels';
-    /** Refuses every change while read-only. See `readOnly`. */
-    requestValue(next: string): boolean;
-    protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
-    /** Puts the caret in the field, the way a label pointing at one would. */
-    focus(options?: FocusOptions): void;
     /**
      * The clock the field opens, behind a seam the styled tier can move.
      *

package/dist/time-input/root/time-input-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 { AriaForwardController, valueAsTime as asTime, customElement, timeAsValue as fromTime, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsTime as asTime, customElement, timeAsValue as fromTime, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinTokens, } from '@fusion.dev/helix-core';
 import { clock } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -14,33 +14,20 @@ import '../../icon/index.js';
 import '../../tag/index.js';
 import '../../time-picker/index.js';
 import { isTime, toMinutes, writeTime } from '../../time-picker/root/time-picker-root.js';
-let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinControllerOpen(MixinTokens(MixinControllerValue(MixinField(HelixFormElement)))) {
+let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEditing(MixinPickerField(MixinControllerOpen(MixinTokens(MixinControllerValue(MixinField(HelixFormElement)))))) {
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
-            target: () => this.renderRoot?.querySelector('[part="control"]') ?? null,
+            target: () => this.partNamed('control'),
         });
         this.autocomplete = '';
         this.locale = '';
         this.max = '23:59';
         this.min = '00:00';
         this.placeholder = 'HH:mm';
-        this.readOnly = false;
         this.step = 15;
         this.timeStyle = 'local';
         this.triggerLabel = 'Choose a time';
-        this.editing = false;
-        this.panel = new PopoverController(this, {
-            anchor: () => this.renderRoot?.querySelector('[part="field"]'),
-            boundary: () => [
-                this.renderRoot?.querySelector('[part="surface"]'),
-                this.renderRoot?.querySelector('[part="trigger"]'),
-            ],
-            offset: () => 8,
-            onDismiss: () => this.requestOpen(false),
-            placement: 'bottom-start',
-            surface: () => this.renderRoot?.querySelector('[part="surface"]'),
-        });
         this.draft = '';
         this.handleDraftKey = (event) => {
             if (this.mode !== 'multiple') {
@@ -87,34 +74,6 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinControlle
                 this.updateComplete.then(() => this.returnFocus());
             }
         };
-        this.returning = false;
-        this.handleBlur = () => {
-            this.editing = false;
-        };
-        this.handleFocus = (event) => {
-            this.editing = !this.returning;
-            const from = event.relatedTarget;
-            if (this.open || this.isDisabled || this.returning) {
-                return;
-            }
-            if (from instanceof Node && this.renderRoot?.contains?.(from)) {
-                return;
-            }
-            this.requestOpen(true);
-        };
-        this.handleKeydown = (event) => {
-            if (event.key === 'Escape' && this.open) {
-                event.stopPropagation();
-                this.requestOpen(false);
-                this.returnFocus();
-            }
-        };
-    }
-    get control() {
-        if (typeof this.renderRoot?.querySelector !== 'function') {
-            return null;
-        }
-        return this.renderRoot.querySelector('[part="control"]');
     }
     get held() {
         return this.value
@@ -148,77 +107,32 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinControlle
         const held = this.held;
         return held.length > 0 && held.every(isTime) ? held.join(',') : '';
     }
-    returnFocus() {
-        this.returning = true;
-        this.control?.focus();
-        this.returning = false;
-    }
-    restore() {
-        const control = this.control;
-        if (control && control.value !== this.display) {
-            control.value = this.display;
-        }
-        this.sync();
-    }
-    sync() {
-        this.internals.setFormValue(this.value);
-        const control = this.control;
-        if (!control) {
-            return;
-        }
+    validate() {
         const held = this.held;
         const floor = toMinutes(this.min) ?? 0;
         const ceiling = toMinutes(this.max) ?? 1439;
-        let message = '';
         if (held.length > 0 && !held.every(isTime)) {
-            message =
-                this.mode === undefined
-                    ? 'Enter a time as HH:mm.'
-                    : 'Enter times as HH:mm, separated by commas.';
-        }
-        else if (held.some((one) => (toMinutes(one) ?? 0) < floor)) {
-            message = `Choose a time at or after ${writeTime(this.min, this.locale)}.`;
+            return this.mode === undefined
+                ? 'Enter a time as HH:mm.'
+                : 'Enter times as HH:mm, separated by commas.';
         }
-        else if (held.some((one) => (toMinutes(one) ?? 0) > ceiling)) {
-            message = `Choose a time at or before ${writeTime(this.max, this.locale)}.`;
+        if (held.some((one) => (toMinutes(one) ?? 0) < floor)) {
+            return `Choose a time at or after ${writeTime(this.min, this.locale)}.`;
         }
-        else if (this.mode === 'range' && held.length > 2) {
-            message = 'A range is two times.';
+        if (held.some((one) => (toMinutes(one) ?? 0) > ceiling)) {
+            return `Choose a time at or before ${writeTime(this.max, this.locale)}.`;
         }
-        if (message === '') {
-            this.internals.setValidity(control.validity, control.validationMessage, control);
-        }
-        else {
-            this.internals.setValidity({ badInput: true }, message, control);
-        }
-        this.refreshFeedback();
-    }
-    requestValue(next) {
-        if (this.readOnly) {
-            return false;
+        if (this.mode === 'range' && held.length > 2) {
+            return 'A range is two times.';
         }
-        return super.requestValue(next);
-    }
-    firstUpdated(changed) {
-        super.firstUpdated(changed);
-        this.sync();
+        return '';
     }
     updated(changed) {
         super.updated(changed);
-        this.sync();
         if (this.open) {
-            this.panel.show();
-            this.renderRoot
-                ?.querySelector('[part="picker"]')
-                ?.reveal?.();
-        }
-        else {
-            this.panel.hide();
+            this.partNamed('picker')?.reveal?.();
         }
     }
-    focus(options) {
-        this.control?.focus(options);
-    }
     renderPicker() {
         return html `<${this.tag('time-picker')}
       part="picker"
@@ -341,9 +255,6 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTimeInput.prototype, "placeholder", void 0);
-__decorate([
-    property({ attribute: 'readonly', reflect: true, type: Boolean })
-], HelixHeadlessTimeInput.prototype, "readOnly", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessTimeInput.prototype, "step", void 0);
@@ -353,9 +264,6 @@ __decorate([
 __decorate([
     property({ attribute: 'trigger-label' })
 ], HelixHeadlessTimeInput.prototype, "triggerLabel", void 0);
-__decorate([
-    state()
-], HelixHeadlessTimeInput.prototype, "editing", void 0);
 __decorate([
     state()
 ], HelixHeadlessTimeInput.prototype, "draft", void 0);

package/dist/time-picker/root/time-picker-root.js

@@ -167,7 +167,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         return super.requestValue(next);
     }
     reportRequired() {
-        const anchor = this.renderRoot?.querySelector('[part="list"]') ?? undefined;
+        const anchor = this.partNamed('list') ?? undefined;
         if (this.required && this.value === '') {
             this.internals.setValidity({ valueMissing: true }, 'Choose a time.', anchor);
             return;
@@ -212,7 +212,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         void this.revealWhenSettled();
     }
     focus(options) {
-        this.renderRoot?.querySelector('[part="list"]')?.focus(options);
+        this.partNamed('list')?.focus(options);
     }
     renderColumn(part, label, values, written, value, barred = () => false) {
         return html `<${this.tag('listbox')}

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

@@ -39,26 +39,13 @@ export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_b
     /** Marks the chosen item, separately from placing the indicator. */
     private sync;
     private readonly indicator;
-    private observer;
     protected readonly keys: KeyboardNavigationController;
     protected readonly cascade: DisabledCascadeController;
     private get items();
-    /**
-     * Watches the group and every item it currently holds.
-     *
-     * Called again on `slotchange`, because the set was read once at first paint:
-     * an item added later was measured by nothing, so a group whose options
-     * arrive with the data had a thumb that stopped following the moment one of
-     * them changed width. Observing the same element twice is a no-op, so there
-     * is nothing to unwind first.
-     */
-    private watch;
     private readonly handleSelection;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
-    /** The observer the items are registered on, rebuilt with them. */
-    private measure;
     protected updated(changed: PropertyValues): void;
     protected willUpdate(changed: PropertyValues): void;
     /**

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

@@ -13,8 +13,9 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         super(...arguments);
         this.indicator = new IndicatorController(this, {
             active: () => this.items.find((item) => item.value === this.value),
-            indicator: () => this.renderRoot?.querySelector('[part="indicator"]'),
-            surface: () => this.renderRoot?.querySelector('[part="track"]'),
+            indicator: () => this.partNamed('indicator'),
+            observe: () => this.items,
+            surface: () => this.partNamed('track'),
         });
         this.keys = new KeyboardNavigationController(this, { items: () => this.items });
         this.cascade = new DisabledCascadeController(this, {
@@ -35,42 +36,22 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
     get items() {
         return [...this.children].filter((child) => child instanceof HelixHeadlessToggle);
     }
-    watch() {
-        this.observer?.observe(this);
-        for (const item of this.items) {
-            this.observer?.observe(item);
-        }
-    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelection);
-        if (this.hasUpdated) {
-            this.measure();
-            this.watch();
-        }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-select', this.handleSelection);
-        this.observer?.disconnect();
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.sync();
         this.indicator.place();
-        this.measure();
-        this.watch();
-    }
-    measure() {
-        this.observer?.disconnect();
-        this.observer = new ResizeObserver(() => this.indicator.place());
     }
     updated(changed) {
         super.updated(changed);
         this.sync();
-        if (changed.has('value')) {
-            this.indicator.place();
-        }
         this.validate();
         this.linkHost();
     }
@@ -93,7 +74,6 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         <div part="indicator" aria-hidden="true"></div>
         <slot
           @slotchange=${() => {
-            this.watch();
             this.sync();
             this.indicator.place();
         }}

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

@@ -23,7 +23,7 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends HelixElement {
         this.seeded = next;
     }
     focusItem() {
-        this.renderRoot.querySelector('[part="item"]')?.focus();
+        this.partNamed('item')?.focus();
     }
     select() {
         if (this.disabled) {

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

@@ -289,18 +289,6 @@ export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
      * really is still over the trigger. See the property.
      */
     private readonly handleActivate;
-    /**
-     * Escape closes the bubble from wherever the reader is.
-     *
-     * On the document, not on the host: a tooltip opened by hover has focus
-     * somewhere else entirely, so a press never reaches this element and Escape
-     * would work for everything except the case the pattern is named for, a
-     * reader escaping a tooltip obscuring what is under it.
-     *
-     * Not stopped from propagating: a tooltip is not what the reader was trying
-     * to escape if it sits inside something else that also closes.
-     */
-    private readonly handleKeydown;
     /**
      * What the pointer and focus listeners are currently on.
      *
@@ -345,7 +333,6 @@ export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
      * this should not be the thing to settle it.
      */
     private auditDescription;
-    connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;

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

@@ -23,15 +23,18 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
         this.holds = new Set();
         this.bubbleLayer = new PopoverController(this, {
             anchor: () => this.trigger,
-            arrow: () => this.renderRoot.querySelector('[part="arrow"]'),
+            arrow: () => this.partNamed('arrow'),
             boundary: () => [this, this.named],
             offset: () => {
-                const point = this.renderRoot.querySelector('[part="arrow"]');
+                const point = this.partNamed('arrow');
                 return this.offset + (point?.offsetWidth ?? 0) / Math.SQRT2;
             },
-            onDismiss: () => this.hide(),
+            onDismiss: () => {
+                this.holds.clear();
+                this.hide();
+            },
             placement: () => this.placement,
-            surface: () => this.renderRoot.querySelector('[part="tooltip"]'),
+            surface: () => this.partNamed('tooltip'),
             within: () => this.enclosure,
         });
         this.handleContentChange = () => {
@@ -66,12 +69,6 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
             this.holds.clear();
             this.hide();
         };
-        this.handleKeydown = (event) => {
-            if (event.key === 'Escape' && this.open) {
-                this.holds.clear();
-                this.hide();
-            }
-        };
         this.audited = false;
     }
     get trigger() {
@@ -101,7 +98,7 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
             : null;
     }
     get bubble() {
-        return this.renderRoot.querySelector('[part="tooltip"]');
+        return this.partNamed('tooltip');
     }
     get hasContent() {
         if (this.content !== '') {
@@ -204,14 +201,9 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
             '`aria-describedby="<that id>"` to the element it names. Written in your own markup ' +
             'it survives server rendering, which is why this element will not write it for you.');
     }
-    connectedCallback() {
-        super.connectedCallback();
-        document.addEventListener('keydown', this.handleKeydown);
-    }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.unbind();
-        document.removeEventListener('keydown', this.handleKeydown);
         this.holds.clear();
         clearTimeout(this.timer);
     }

package/dist/tour/root/tour-root.js

@@ -95,9 +95,9 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-tour-ask', this.handleAsk);
-        this.ownerDocument.addEventListener('keydown', this.handleKeydown);
-        globalThis.addEventListener('resize', this.handleViewport, { passive: true });
-        globalThis.addEventListener('scroll', this.handleViewport, { capture: true, passive: true });
+        document.addEventListener('keydown', this.handleKeydown);
+        window.addEventListener('resize', this.handleViewport, { passive: true });
+        window.addEventListener('scroll', this.handleViewport, { capture: true, passive: true });
         if (this.hasUpdated) {
             this.watch(this.lit);
         }
@@ -105,9 +105,9 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-tour-ask', this.handleAsk);
-        this.ownerDocument.removeEventListener('keydown', this.handleKeydown);
-        globalThis.removeEventListener('resize', this.handleViewport);
-        globalThis.removeEventListener('scroll', this.handleViewport, { capture: true });
+        document.removeEventListener('keydown', this.handleKeydown);
+        window.removeEventListener('resize', this.handleViewport);
+        window.removeEventListener('scroll', this.handleViewport, { capture: true });
         this.sizer?.disconnect();
         this.sized = undefined;
     }