@fusion.dev/helix-headless 0.25.1 → 0.30.0

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

@@ -1,8 +1,8 @@
-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 '../../date-picker/index.js';
 import '../../tag/index.js';
-declare const HelixHeadlessDateInput_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 HelixHeadlessDateInput_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 date, typed or picked from a calendar.
  *
@@ -142,20 +142,6 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * What the field says before a date 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 selectable dates are, in days.
      *
@@ -165,16 +151,6 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * platform's base.
      */
     step: number;
-    /**
-     * The overlay, placed against the field rather than the trigger.
-     *
-     * Against the field because that is the box a reader sees as the control: a
-     * calendar hung off a small button at one end of a wide field reads as
-     * belonging to the button. `Select` anchors to its trigger for the opposite
-     * reason, its trigger being the whole control.
-     */
-    protected readonly panel: PopoverController;
-    private get control();
     /**
      * What the calendar should show, which is only ever a whole date.
      *
@@ -186,11 +162,7 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
     private get picked();
     /** One date, written the way `dateStyle` asks for. */
     private written;
-    private get display();
-    /**
-     * Whether the caret is in the field, which is when it holds the value.
-     */
-    private editing;
+    protected get display(): string;
     /**
      * What is being typed but not yet held, for `multiple` only.
      *
@@ -212,57 +184,13 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
     /** Takes one date back out of the set. */
     private readonly removeDate;
     private readonly handleCalendarChange;
-    /**
-     * Puts the field back where the answer differs from what was typed.
-     *
-     * `requestValue` is the mixin's, and it announces and decides; this is the
-     * other half, which `Input` needs for the same reason: the native control has
-     * already changed, so wherever the answer does not follow it, it has to be
-     * restored. A refusal and a consumer who owns `value` and has not given a new
-     * one are the same thing from here.
-     */
-    private restore;
-    /** Reports the value and the validity the host stands behind. */
-    private sync;
-    /** Escape shuts the calendar without moving the date. */
-    private readonly handleKeydown;
+    /** What is wrong with the dates, which the text input cannot say. */
+    protected validate(): string;
     /**
      * Accessible name for the control that opens the calendar.
      */
     triggerLabel: string;
-    /** 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 back in the field without the field reopening the calendar.
-     *
-     * Focus opens the calendar, so handing focus back after a pick reopens the
-     * thing that was just answered. `relatedTarget` was the guard and it is not
-     * enough on its own: it catches a hand-off from the trigger, and it does not
-     * catch this, because the cell that had focus is gone by the time the caret
-     * moves and the document has fallen back to something outside this element.
-     *
-     * **Reasoned rather than measured, and worth saying which.** In a focused
-     * document: the reader presses a day, the cell has focus, the panel is hidden,
-     * the browser moves focus off the removed cell to the body, and the caret is
-     * then put back here with `relatedTarget` pointing at the body, which is
-     * outside this element and reads as an arrival. Every step is ordinary browser
-     * behavior and none of it can be exercised here: `focus()` dispatches no
-     * event in an unfocused document, which is what both the test runtime and the
-     * available browser pane are. A spec for this passes with the guard removed,
-     * so there is no spec: it would cover nothing while looking like proof.
-     *
-     * A flag rather than a better guess, because this element is the one moving
-     * the focus and is the only thing that can know so. Cleared synchronously,
-     * since `focus()` dispatches before it returns.
-     */
-    private returning;
-    private returnFocus;
-    private readonly handleBlur;
-    private readonly handleFocus;
-    /** Puts the caret in the field, the way a label pointing at one would. */
-    focus(options?: FocusOptions): void;
     /**
      * The calendar the field opens, behind a seam the styled tier can move.
      *

package/dist/date-input/root/date-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, valueAsDate as asDate, customElement, dateAsValue as fromDate, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsDate as asDate, customElement, dateAsValue as fromDate, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinTokens, } from '@fusion.dev/helix-core';
 import { calendarBlank } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -18,11 +18,11 @@ const dates = (value) => value
     .split(',')
     .map((one) => one.trim())
     .filter(Boolean);
-let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControllerOpen(MixinTokens(MixinControllerValue(MixinField(HelixFormElement)))) {
+let HelixHeadlessDateInput = class HelixHeadlessDateInput 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.dateStyle = 'long';
@@ -34,20 +34,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
         this.min = '';
         this.months = 1;
         this.placeholder = 'YYYY-MM-DD';
-        this.readOnly = false;
         this.step = 1;
-        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.editing = false;
         this.draft = '';
         this.handleInput = (event) => {
             event.stopPropagation();
@@ -93,35 +80,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
                 this.updateComplete.then(() => this.returnFocus());
             }
         };
-        this.handleKeydown = (event) => {
-            if (event.key === 'Escape' && this.open) {
-                event.stopPropagation();
-                this.requestOpen(false);
-                this.returnFocus();
-            }
-        };
         this.triggerLabel = 'Choose a date';
-        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);
-        };
-    }
-    get control() {
-        if (typeof this.renderRoot?.querySelector !== 'function') {
-            return null;
-        }
-        return this.renderRoot.querySelector('[part="control"]');
     }
     get picked() {
         const held = dates(this.value);
@@ -157,74 +116,29 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
     get restCount() {
         return Math.max(0, dates(this.value).length - this.shownDates.length);
     }
-    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 = dates(this.value);
-        let message = '';
         if (held.length > 0 && !held.every(isIso)) {
-            message =
-                this.mode === undefined
-                    ? 'Enter a date as YYYY-MM-DD.'
-                    : 'Enter dates as YYYY-MM-DD, separated by commas.';
-        }
-        else if (this.min !== '' && held.some((one) => one < this.min)) {
-            message = `Choose a date on or after ${this.min}.`;
+            return this.mode === undefined
+                ? 'Enter a date as YYYY-MM-DD.'
+                : 'Enter dates as YYYY-MM-DD, separated by commas.';
         }
-        else if (this.max !== '' && held.some((one) => one > this.max)) {
-            message = `Choose a date on or before ${this.max}.`;
+        if (this.min !== '' && held.some((one) => one < this.min)) {
+            return `Choose a date on or after ${this.min}.`;
         }
-        else if (this.mode === 'range' && held.length > 2) {
-            message = 'A range is two dates.';
+        if (this.max !== '' && held.some((one) => one > this.max)) {
+            return `Choose a date on or before ${this.max}.`;
         }
-        if (message === '') {
-            this.internals.setValidity(control.validity, control.validationMessage, control);
+        if (this.mode === 'range' && held.length > 2) {
+            return 'A range is two dates.';
         }
-        else {
-            this.internals.setValidity({ badInput: true }, message, control);
-        }
-        this.refreshFeedback();
-    }
-    requestValue(next) {
-        if (this.readOnly) {
-            return false;
-        }
-        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();
-            if (changed.has('open')) {
-                this.renderRoot?.querySelector('[part="picker"]')?.focus();
-            }
+        if (this.open && changed.has('open')) {
+            this.partNamed('picker')?.focus();
         }
-        else {
-            this.panel.hide();
-        }
-    }
-    returnFocus() {
-        this.returning = true;
-        this.control?.focus();
-        this.returning = false;
-    }
-    focus(options) {
-        this.control?.focus(options);
     }
     renderPicker() {
         return html `<${this.tag('date-picker')}
@@ -359,15 +273,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessDateInput.prototype, "placeholder", void 0);
-__decorate([
-    property({ attribute: 'readonly', reflect: true, type: Boolean })
-], HelixHeadlessDateInput.prototype, "readOnly", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDateInput.prototype, "step", void 0);
-__decorate([
-    state()
-], HelixHeadlessDateInput.prototype, "editing", void 0);
 __decorate([
     state()
 ], HelixHeadlessDateInput.prototype, "draft", void 0);

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

@@ -70,7 +70,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
                 return;
             }
             const path = event.composedPath();
-            const grid = this.renderRoot?.querySelector('[part="grid"]');
+            const grid = this.partNamed('grid');
             if (!grid || !path.includes(grid)) {
                 return;
             }
@@ -240,7 +240,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         return super.requestValue(next);
     }
     reportRequired() {
-        const anchor = this.renderRoot?.querySelector('[part="grid"]') ?? undefined;
+        const anchor = this.partNamed('grid') ?? undefined;
         if (this.required && this.value === '') {
             this.internals.setValidity({ valueMissing: true }, 'Choose a date.', anchor);
             return;

package/dist/divider/root/divider-root.js

@@ -13,7 +13,7 @@ let HelixHeadlessDivider = class HelixHeadlessDivider extends HelixElement {
         this.announced = false;
     }
     markEmpty() {
-        const region = this.renderRoot?.querySelector('[part="content"]');
+        const region = this.partNamed('content');
         const empty = !slotFilled(this.renderRoot?.querySelector('slot'));
         region?.toggleAttribute('data-empty', empty);
         region?.toggleAttribute('hidden', empty);

package/dist/drawer/root/drawer-root.js

@@ -47,7 +47,7 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
         }
     }
     get panel() {
-        return this.renderRoot?.querySelector('[part="panel"]') ?? null;
+        return this.partNamed('panel');
     }
     updated(changed) {
         super.updated(changed);

package/dist/drilldown/item/drilldown-item.js

@@ -18,7 +18,7 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
         this.value = '';
     }
     focusItem() {
-        this.renderRoot.querySelector('[part="item"]')?.focus();
+        this.partNamed('item')?.focus();
     }
     select() {
         if (this.disabled) {

package/dist/file-input/root/file-input-root.js

@@ -36,7 +36,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
-            target: () => this.renderRoot?.querySelector('[part="control"]') ?? null,
+            target: () => this.partNamed('control'),
         });
         this.accept = '';
         this.locale = '';
@@ -87,10 +87,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         return [...(this.control?.files ?? [])];
     }
     get control() {
-        if (typeof this.renderRoot?.querySelector !== 'function') {
-            return null;
-        }
-        return this.renderRoot.querySelector('[part="control"]');
+        return this.partNamed('control');
     }
     clear() {
         const control = this.control;
@@ -120,8 +117,8 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         this.dispatchEvent(new HelixBeforeChangeEvent({
             value: this.files.map((file) => file.name).join(', '),
         }));
-        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
-        this.dispatchEvent(new Event('change', { bubbles: true, composed: false }));
+        this.announceInput();
+        this.announceChange();
     }
     sync() {
         const data = new FormData();

package/dist/filter-input/field/filter-field.d.ts

@@ -33,7 +33,7 @@ import type { HelixHeadlessFilterOperator } from '../operator/filter-operator.js
  * mean, so declaring them was ceremony for the case every product has; the
  * example above is what a consumer writes when the words matter, not the price
  * of admission. Declaring one comparison replaces both rather than joining
- * them — see `vocabulary`, which is where that is decided once for the menu and
+ * them: see `vocabulary`, which is where that is decided once for the menu and
  * the grammar together.
  *
  * **Values are `Option`s, which is the element a consumer already has.** They

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

@@ -24,8 +24,8 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  * pointer has already handled the keyboard.
  *
  * **It reads what was declared, and nothing that was not.** Write
- * `FilterField`s — usually inside the `FilterMenu` slotted into `start`, so the
- * picker and the text work off one set — and Enter reads the box against them:
+ * `FilterField`s (usually inside the `FilterMenu` slotted into `start`, so the
+ * picker and the text work off one set), and Enter reads the box against them:
  * `disposition:refunded,settled` and `-disposition:refunded` announce
  * `helix-facet`, exactly as ticking those values in the picker would, and the
  * text they were read from goes. Everything else stays where it was typed, so

package/dist/filter-input/root/filter-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, customElement, drawIcon, HelixFacetEvent, HelixFormElement, holdCaret, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, restoreValue, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, drawIcon, HelixFacetEvent, HelixFormElement, holdCaret, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, restoreValue, scrollItemIntoView, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -15,7 +15,7 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
-            target: () => this.renderRoot?.querySelector('[part="control"]') ?? null,
+            target: () => this.partNamed('control'),
         });
         this.announcesInput = true;
         this.clearable = false;
@@ -28,15 +28,16 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         this.leadRead = false;
         this.dismissed = false;
         this.panel = new PopoverController(this, {
-            anchor: () => this.renderRoot?.querySelector('[part="field"]'),
+            anchor: () => this.partNamed('field'),
             boundary: () => [
-                this.renderRoot?.querySelector('[part="surface"]'),
-                this.renderRoot?.querySelector('[part="field"]'),
+                this.partNamed('surface'),
+                this.partNamed('field'),
             ],
             offset: () => 4,
             onDismiss: () => this.requestOpen(false),
+            open: () => this.open,
             placement: 'bottom-start',
-            surface: () => this.renderRoot?.querySelector('[part="surface"]'),
+            surface: () => this.partNamed('surface'),
         });
         this.handleInput = (event) => {
             event.stopPropagation();
@@ -48,7 +49,7 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         };
         this.handleChange = (event) => {
             event.stopPropagation();
-            this.dispatchEvent(new Event('change', { bubbles: true, composed: false }));
+            this.announceChange();
         };
         this.handleDismiss = (event) => {
             const chip = event.composedPath()[0];
@@ -154,7 +155,7 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         delegatesFocus: true,
     }; }
     get control() {
-        return this.renderRoot.querySelector('[part="control"]');
+        return this.partNamed('control');
     }
     get tokens() {
         return this.renderRoot?.querySelector('slot[name="tags"]') ?? null;
@@ -304,12 +305,6 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         this.releaseCaret = undefined;
         this.internals.setFormValue(this.value);
         this.markActive();
-        if (this.open) {
-            this.panel.show();
-        }
-        else {
-            this.panel.hide();
-        }
         this.settleOpen();
     }
     markActive() {
@@ -323,7 +318,9 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
             ;
             control.ariaActiveDescendantElement = active ?? null;
         }
-        active?.scrollIntoView({ block: 'nearest' });
+        if (active) {
+            scrollItemIntoView(active);
+        }
     }
     focus(options) {
         this.control?.focus(options);

package/dist/heatmap/root/heatmap-root.js

@@ -51,7 +51,7 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         return fits(this.points.length, this.width ?? Number.NaN, this.cellPx, this.gapPx, this.rowCount);
     }
     measure() {
-        const strip = this.renderRoot?.querySelector('[part="strip"]');
+        const strip = this.partNamed('strip');
         if (!strip || typeof getComputedStyle !== 'function') {
             return;
         }

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

@@ -110,6 +110,13 @@ export declare class HelixHeadlessImage extends HelixElement {
      * Which `src` the current status belongs to, so a new one starts over.
      */
     private answered;
+    /**
+     * Whether this picture's answer has been given, or is on its way.
+     *
+     * `status` cannot say so for a picture a server sent, since it waits a task
+     * for the event it reports, and `settle` runs twice in the first update.
+     */
+    private reported;
     /**
      * Says so under the platform's own name, because the platform's cannot escape.
      *

package/dist/image/root/image-root.js

@@ -20,6 +20,7 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
         this.srcset = '';
         this.status = 'loading';
         this.answered = '';
+        this.reported = false;
         this.handleLoad = (event) => {
             this.announce('loaded', event);
         };
@@ -28,13 +29,15 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
         };
     }
     announce(status, event) {
-        this.status = status;
+        this.reported = true;
         const name = status === 'loaded' ? 'load' : 'error';
         if (event) {
+            this.status = status;
             this.relayNativeEvent(event);
             return;
         }
         const send = () => {
+            this.status = status;
             this.dispatchEvent(new Event(name, { bubbles: false, cancelable: false, composed: false }));
         };
         if (this.serverRendered) {
@@ -46,7 +49,7 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
     }
     settle() {
         const image = this.renderRoot?.querySelector('img');
-        if (this.src === '' || this.status !== 'loading' || !image?.complete) {
+        if (this.src === '' || this.reported || !image?.complete) {
             return;
         }
         if (image.naturalWidth > 0) {
@@ -60,6 +63,7 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
         super.willUpdate(changed);
         if (changed.has('src') && this.answered !== this.src) {
             this.answered = this.src;
+            this.reported = false;
             this.status = 'loading';
         }
     }

package/dist/input/root/input-root.js

@@ -12,7 +12,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
-            target: () => this.renderRoot?.querySelector('[part="control"]') ?? null,
+            target: () => this.partNamed('control'),
         });
         this.announcesInput = true;
         this.autocomplete = '';
@@ -39,7 +39,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
         };
         this.handleChange = (event) => {
             event.stopPropagation();
-            this.dispatchEvent(new Event('change', { bubbles: true, composed: false }));
+            this.announceChange();
         };
         this.reveal = false;
         this.revealLabel = 'Show password';
@@ -86,7 +86,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
         this.control?.setSelectionRange(start, end, direction);
     }
     get control() {
-        return this.renderRoot.querySelector('[part="control"]');
+        return this.partNamed('control');
     }
     sync() {
         this.internals.setFormValue(this.value);

package/dist/listbox/root/listbox-root.js

@@ -59,7 +59,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
-            target: () => this.renderRoot?.querySelector('[part="items"]') ?? null,
+            target: () => this.partNamed('items'),
         });
         this.autocomplete = 'off';
         this.defaultFilter = '';
@@ -225,7 +225,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         }
     }
     reveal() {
-        const items = this.renderRoot?.querySelector('[part="items"]');
+        const items = this.partNamed('items');
         const chosen = this.options.find((option) => option.selected && !option.hidden);
         if (!items || !chosen) {
             return;
@@ -278,7 +278,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
     followActive() {
         const active = this.shown.find((option) => option.value === this.activeValue);
         if (active) {
-            const items = this.renderRoot.querySelector('[part="items"]');
+            const items = this.partNamed('items');
             scrollItemIntoView(active, { padding: 4, ...(items ? { scroller: items } : {}) });
         }
     }

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { HelixElement, PopoverController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessMegamenu_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
 /**
@@ -92,7 +92,7 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
     private get banded();
     private readonly handleWidth;
     private watchWidth;
-    private readonly panel;
+    protected readonly panel: PopoverController;
     /** Tells a slotted trigger the disclosure state, by property. See `tellDisclosure`. */
     private tellTrigger;
     /** What the consumer slotted, if they slotted anything. */
@@ -202,6 +202,16 @@ export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
     private readonly handleContentClick;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Hands the bar's one open panel over before this one is shown.
+     *
+     * Before the render rather than after it, because the popover controller
+     * raises the panel from its own `hostUpdated`, which runs before `updated`:
+     * settled there, the two would be up together for a frame. The other closes
+     * through `requestOpen`, so a consumer holding it open is asked rather than
+     * overruled.
+     */
+    protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /**
      * The control that opens it, behind a seam the styled tier can move.