@fusion.dev/helix-headless 0.0.0-dev

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

@@ -0,0 +1,553 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, HelixCompleteEvent, HelixFormElement, MixinControllerValue, MixinField, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+/**
+ * @summary A short code, one character to a box.
+ *
+ * @description
+ * **One `<input>` per cell, rather than one input drawn as cells.** Both are
+ * built in the wild and the trade is real: a single field autofills perfectly
+ * and needs a drawn caret nobody can style well, and separate fields give every
+ * box a real focus ring, a real caret and a real tab stop for free. This takes
+ * the second, and then closes autofill's gap rather than living with it, below.
+ *
+ * **Anything longer than one character is treated as a paste, wherever it
+ * lands.** That covers the obvious case and two that are not: a browser
+ * autofilling an SMS code drops the whole thing into whichever box is focused,
+ * and a password manager does the same. So a six-character arrival in cell three
+ * fills from cell three rather than being truncated to its first character,
+ * which is what a per-cell `maxlength` would have done silently.
+ *
+ * **The code is one value to a form.** The cells are inside a shadow root and
+ * submit nothing on their own; the host is form-associated and reports the
+ * joined string, which is also what carries validity and answers a reset.
+ *
+ * `autocomplete="one-time-code"` is on the first cell only. It is a hint about
+ * the field as a whole, and repeating it on six boxes offers a browser six
+ * places to put one code.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category forms
+ * @aliases PinField, OTP, One-time code, Verification code, InputPin
+ * @documentation https://helix.fusion.dev/components/pin-input
+ *
+ * @event {Event} change - Announced with a filled code, and when an edited one loses focus.
+ * @event {HelixBeforeChangeEvent} helix-before-change - Fired as the code changes, and cancelable.
+ * @event {HelixCompleteEvent} helix-complete - Fired when the last box is filled.
+ * @event {Event} input - Announced once the value has moved.
+ *
+ * @csspart cell - One box.
+ * @csspart feedback - What is wrong with it.
+ * @csspart field - The row of boxes.
+ * @csspart hint - Help under the boxes, while nothing is wrong.
+ * @csspart label - The question, over the boxes.
+ */
+let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerValue(MixinField(HelixFormElement)) {
+    constructor() {
+        super(...arguments);
+        /* A consumer's `aria-describedby` names ids in their own tree and the control
+           is in this shadow root, so the reference has to be carried down as an
+           element rather than copied as an id. See `AriaForwardController`: measured
+           in Chrome's own tree, the host held the description and the control the
+           reader is actually on was exposed without it. */
+        this.aria = new AriaForwardController(this, {
+            target: () => this.renderRoot?.querySelector('[part="cell"]') ?? null,
+        });
+        /** Typed or dragged, so every edit is announced. See `announcesInput`. */
+        this.announcesInput = true;
+        /**
+         * What the browser may autofill, reaching the first cell only.
+         *
+         * `one-time-code` is why this defaults to anything at all: it is the token
+         * that lets a phone offer the code out of a message. Later cells stay `off`
+         * for the reason in the class comment above, that six cells each offering
+         * the same code is one offer made six times.
+         */
+        this.autocomplete = 'one-time-code';
+        /**
+         * How many characters the code has.
+         */
+        this.length = 6;
+        /**
+         * What a box accepts, which decides the keyboard a phone offers.
+         *
+         * `numeric` and `alphanumeric` also refuse anything else on the way in,
+         * because a code that is digits is digits: letting a letter into a box a
+         * reader cannot submit is a mistake they have to find and undo themselves.
+         * `text` refuses nothing and only trims, so it is the mode for a code with a
+         * hyphen in it.
+         *
+         * **`alphanumeric` is ASCII letters and digits**, which is narrower than the
+         * word is in general and is the right narrowness here. A code of this kind
+         * comes off a keypad, an SMS or an authenticator, and none of them emit `é`;
+         * a filter that accepted it would let through a character the service on the
+         * other end is going to reject. A consumer whose codes really do carry
+         * marked letters wants `text`, which judges nothing.
+         *
+         * **Not reflected**, and it was until this component's own server spec caught
+         * it: nothing selects on it, so all reflection did was write `type="numeric"`
+         * onto every `<helix-pin-input>` ever rendered, an attribute no consumer's
+         * markup had. That is the fault `Input`'s own `type` had and the reason the
+         * area rules carry the sentence "reflect only what CSS selects on". The real
+         * inputs take it as a binding, which is what makes the keyboard follow.
+         */
+        this.type = 'numeric';
+        /**
+         * Whether the characters are hidden, the way a password is.
+         */
+        this.mask = false;
+        /**
+         * What an empty box shows, usually a single dot.
+         *
+         * The platform's own placeholder, on each cell, rather than a character
+         * drawn behind the field: it clears the moment anything is typed, it is
+         * already excluded from the accessible value, and it works the same under
+         * `mask`, where the cell is a password input and a hand-drawn glyph would
+         * have to know that.
+         *
+         * Empty by default, because a row of boxes already reads as a row of boxes
+         * and a dot in each is a choice about how much the field should announce
+         * itself before anybody has touched it.
+         */
+        this.placeholder = '';
+        /**
+         * Whether the boxes refuse input while still submitting their value.
+         */
+        this.readOnly = false;
+        /**
+         * Accessible name for one box, with `{index}` and `{length}` filled in.
+         */
+        this.cellLabel = 'Character {index} of {length}';
+        this.handleInput = (event) => {
+            // Stopped for the reason `Input.handleInput` gives: the inner control's own
+            // `input` is composed and would reach a consumer beside this element's.
+            event.stopPropagation();
+            const cell = event.target;
+            const at = this.cells.indexOf(cell);
+            if (at === -1) {
+                return;
+            }
+            /* **An emptied box is a deletion, and this used to be unreachable.** A
+               Backspace in a *filled* box is the browser's own: the keydown handler
+               leaves it alone, the character goes, and `input` arrives carrying "". That
+               fell through to `write`, which returns early on empty, and then `paint`
+               put the character straight back. Pressing Backspace on a full code changed
+               nothing at all, twice in a row, measured with real keystrokes rather than
+               dispatched events, which is why every spec and the whole state audit
+               passed over it.
+            
+               The rest collapse left, which is what the model already requires and what
+               a single text field does: "123456" with the 2 deleted is "13456", not a
+               hole. Focus stays where the reader was, so the box under the caret now
+               holds what followed. */
+            if (cell.value === '') {
+                const characters = this.characters;
+                characters[at] = '';
+                this.requestValue(characters.join(''));
+                this.updateComplete.then(() => {
+                    this.paint();
+                    this.cells[at]?.focus();
+                });
+                return;
+            }
+            /* Longer than one character is a paste or an autofill, whichever box it
+               landed in. A per-cell `maxlength` would have silently truncated it to the
+               first character and lost the rest. */
+            this.write(at, cell.value);
+            // And put the box back, in case what arrived was refused or filtered.
+            this.updateComplete.then(() => this.paint());
+        };
+        this.handlePaste = (event) => {
+            const cell = event.target;
+            const at = this.cells.indexOf(cell);
+            if (at === -1) {
+                return;
+            }
+            // Taken here rather than left to `input`, so the browser does not first put
+            // the whole string into one box and fire a change we then have to undo.
+            event.preventDefault();
+            this.write(at, event.clipboardData?.getData('text') ?? '');
+        };
+        /**
+         * The keys that move between boxes, and the one that clears backwards.
+         *
+         * Backspace in an empty box goes back and clears the one it lands in, which
+         * is what makes a code correctable without the reader hunting for the box
+         * they meant. In a full box it does what it always does and is left alone.
+         */
+        this.handleKeydown = (event) => {
+            const cell = event.target;
+            const at = this.cells.indexOf(cell);
+            if (at === -1 || this.isDisabled || this.readOnly) {
+                return;
+            }
+            if (event.key === 'Backspace' && cell.value === '' && at > 0) {
+                const characters = this.characters;
+                characters[at - 1] = '';
+                this.requestValue(characters.join('').replace(/\s+$/, ''));
+                this.updateComplete.then(() => {
+                    this.paint();
+                    this.cells[at - 1]?.focus();
+                });
+            }
+            else if (event.key === 'ArrowLeft' && at > 0) {
+                this.cells[at - 1]?.focus();
+                this.cells[at - 1]?.select();
+            }
+            else if (event.key === 'ArrowRight' && at < this.count - 1) {
+                this.cells[at + 1]?.focus();
+                this.cells[at + 1]?.select();
+            }
+            else {
+                return;
+            }
+            event.preventDefault();
+        };
+        /**
+         * The code as it stood when focus arrived, so a visit that changed nothing
+         * says nothing.
+         *
+         * **This is the platform's reading, and it was the other one until it was
+         * measured.** It held the value at the last *commit*, on the argument that
+         * recognizing an arrival is hard here: this component moves focus itself on
+         * every character, so most `focus` events are ones it caused, and telling
+         * those apart rests entirely on `relatedTarget`. That is true and it is not
+         * an obstacle, because `handleFocusOut` was already doing exactly that guard
+         * one method away. The reasoning had talked itself out of a check it had
+         * already written.
+         *
+         * **What the two readings do to a real browser**, measured in Chromium
+         * against a native `<input>` with real keystrokes:
+         *
+         * | | native | last commit | on arrival |
+         * |---|---|---|---|
+         * | types, leaves | `change` | `change` | `change` |
+         * | script assigns unfocused, visit with no edit | silent | **`change`** | silent |
+         * | script assigns unfocused, then edits | `change` | `change` | `change` |
+         * | types a character and deletes it | silent | silent | silent |
+         *
+         * One row differed and it is the one that matters: a consumer who assigns
+         * `value` and then has a reader tab through the row was told the reader had
+         * entered a code. `change` on a field means "the reader had a go at this",
+         * `MixinField` treats it as exactly that, and announcing a value the consumer
+         * set themselves is a false positive rather than the safe half of a trade.
+         *
+         * **The narrower divergence that is left** is a script assigning while the row
+         * is focused, where the platform stays silent because no user edit happened
+         * and this commits on the way out. Closing it needs a dirty flag set from real
+         * cell input rather than a baseline, which is more machinery than the case has
+         * earned: a consumer writing to a field the reader is inside is already in a
+         * fight with them.
+         *
+         * Seeded in `firstUpdated`, a code in the markup being committed by whoever
+         * wrote it, and re-taken on every arrival from outside the row.
+         */
+        this.committed = '';
+        /** Selecting on focus, so typing replaces rather than appending. */
+        this.handleFocus = (event) => {
+            ;
+            event.target.select();
+        };
+        /**
+         * Whether focus is currently somewhere inside the row.
+         *
+         * **The arrival is a transition, not a `relatedTarget` reading**, which is
+         * what the first version of this did and is what the exit still does. It does
+         * not work on the way in for two separate reasons and the second is the one
+         * that decides it. Every character moves focus to the next box, so an
+         * unguarded `focusin` re-baselines on each keystroke and the row can never
+         * report anything: measured, the three commit specs went silent at once. And
+         * `focusin` carries `relatedTarget` in a browser and not in happy-dom, so a
+         * guard written on it is a guard that holds in production and not in the
+         * specs, which is the worse half. This flag needs neither: entering is
+         * `focusin` while it is `false`, and nothing else is.
+         */
+        this.within = false;
+        /**
+         * Takes the baseline when focus arrives from outside the row.
+         *
+         * The value at arrival is what the platform compares against, and the table
+         * on `committed` is why.
+         */
+        this.handleFocusIn = () => {
+            if (this.within) {
+                return;
+            }
+            this.within = true;
+            this.committed = this.value;
+        };
+        /**
+         * Commits when focus leaves the row, which is the moment every other field in
+         * the library has and this one did not.
+         *
+         * `change` is one of the two events `MixinField` reads as "the reader has had
+         * a go at this", so a code that was never completed was never `touched` and
+         * its own `tooShort` message could not show: two boxes of four filled and
+         * tabbed away from was answered with nothing at all. `Input` gets this for
+         * free by relaying its control's own `change`; here the cells each fire one,
+         * none of them means the code is entered, and neither does any single one of
+         * them mean the reader has left.
+         *
+         * **Focus leaving the row, and not a cell.** Every character moves focus to
+         * the next box, so a per-cell blur would commit on every keystroke, which is
+         * the fault this exists to fix pointed the other way.
+         */
+        this.handleFocusOut = (event) => {
+            if (this.cells.includes(event.relatedTarget)) {
+                return;
+            }
+            this.within = false;
+            this.commit();
+        };
+    }
+    /** Focus is delegated, so the host is never the focus target. */
+    static { this.shadowRootOptions = {
+        ...HelixFormElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    /** How many boxes there are, clamped once so every reader agrees. */
+    get count() {
+        return Math.max(1, Math.floor(this.length) || 1);
+    }
+    get cells() {
+        return [...this.renderRoot.querySelectorAll('[part="cell"]')];
+    }
+    /** The code as characters, padded to the row so every box has one to show. */
+    get characters() {
+        return Array.from({ length: this.count }, (_, at) => this.value[at] ?? '');
+    }
+    /** Everything this box would accept, with the rest dropped. */
+    clean(text) {
+        const trimmed = text.trim();
+        if (this.type === 'numeric') {
+            return trimmed.replace(/\D/g, '');
+        }
+        if (this.type === 'alphanumeric') {
+            return trimmed.replace(/[^0-9A-Za-z]/g, '');
+        }
+        return trimmed;
+    }
+    /**
+     * Writes a run of characters from one box onward.
+     *
+     * The single path for typing, pasting and autofill alike, because they are
+     * the same act at different lengths and splitting them is how the three
+     * disagree about trimming, about the cursor, and about what happens at the
+     * end.
+     */
+    write(from, text) {
+        const cleaned = this.clean(text);
+        if (cleaned === '') {
+            return;
+        }
+        /* **A code has no holes in it**, so a character cannot land past the end of
+           what is already there. Clamped rather than allowed, because the value is
+           one compact string and a gap in the middle of it does not exist: writing
+           four characters into box three of an empty field produced "4321" and
+           showed it in boxes one to four, so the boxes and the value disagreed about
+           where the reader had typed.
+        
+           Clamping is what makes them agree, and it reads correctly in both
+           directions. Pasting a whole code while the caret happens to sit in box
+           three fills from the start, which is what a reader pasting a code means.
+           Pasting two characters into box three of a field with two already in it
+           fills from box three, because that is where the end was. */
+        const start = Math.min(from, this.value.length);
+        const characters = this.characters;
+        for (let at = 0; at < cleaned.length && start + at < this.count; at += 1) {
+            characters[start + at] = cleaned[at];
+        }
+        const next = characters.join('');
+        const filled = Math.min(this.count - 1, start + cleaned.length);
+        this.requestValue(next);
+        this.updateComplete.then(() => {
+            this.paint();
+            this.cells[filled]?.focus();
+            this.cells[filled]?.select();
+            if (next.length === this.count) {
+                this.dispatchEvent(new HelixCompleteEvent({ value: next }));
+                /* And a native `change`, because a filled code is this control's
+                   commit. There is no inner control to relay one from: six boxes each
+                   fire their own, and none of them means the code is entered. */
+                this.commit();
+            }
+        });
+    }
+    /**
+     * Puts the value back into the boxes.
+     *
+     * The cells are uncontrolled between renders, because Lit will not rewrite an
+     * input's `.value` when the bound string has not changed, and a refused
+     * keystroke leaves the box holding a character the element rejected. This is
+     * the same put-back `Input` does with `restoreValue`, once per box.
+     */
+    paint() {
+        const characters = this.characters;
+        for (const [at, cell] of this.cells.entries()) {
+            const want = characters[at] ?? '';
+            if (cell.value !== want) {
+                cell.value = want;
+            }
+        }
+    }
+    /**
+     * Announces the code as entered, from whichever moment reached it first.
+     *
+     * **One writer, because the fact has two moments and only one meaning.** A
+     * filled code and a row being left are both "the reader is done with this",
+     * and they were two dispatch sites kept from disagreeing by both remembering
+     * to update `committed`. They are one call now, so a third moment cannot be
+     * added that fires without baselining, which is the way the pair would have
+     * drifted.
+     *
+     * Silent when nothing moved since the baseline, which is what makes it safe
+     * to call from both: completing a code that is already the committed one, or
+     * leaving a row nobody edited, says nothing.
+     *
+     * `composed: false`, like the native event this stands in for. It is
+     * dispatched on the host, so a consumer hears it.
+     */
+    commit() {
+        if (this.value === this.committed) {
+            return;
+        }
+        this.committed = this.value;
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: false }));
+    }
+    /**
+     * Reports the code and a verdict on it.
+     *
+     * **A half-entered code is invalid whether or not it is required, and that is
+     * the platform's answer rather than ours.** It looked like an oversight worth
+     * a question: `required` guards `valueMissing` and nothing guards `tooShort`,
+     * so an optional code is refused for being half filled. Measured in Chromium
+     * against a native `<input minlength="4">` with real keystrokes, which is the
+     * feature this is the same shape as:
+     *
+     * | | optional | required |
+     * |---|---|---|
+     * | typed `12` | `tooShort`, invalid | `tooShort`, invalid |
+     * | left empty | valid | `valueMissing` |
+     * | typed `1234` | valid | valid |
+     *
+     * So `required` decides whether *nothing* is acceptable, and the length rule
+     * applies to anything that is not nothing. That is the right split for a code
+     * as well: two of four characters is not an optional code omitted, it is a
+     * code got wrong, and submitting it would send a fragment. The gate on the
+     * message is `touched` rather than `required`, which is what stops a reader
+     * being told off before they have had a go.
+     *
+     * `execCommand('insertText')` is not enough to measure this: `tooShort`
+     * applies only to a value the user edited, and the first run of the probe
+     * reported every case valid because nothing had set that flag.
+     */
+    sync() {
+        this.internals.setFormValue(this.value);
+        const first = this.cells[0];
+        if (!first) {
+            return;
+        }
+        if (this.required && this.value === '') {
+            this.internals.setValidity({ valueMissing: true }, 'Please fill in this field.', first);
+        }
+        else if (this.value !== '' && this.value.length < this.count) {
+            this.internals.setValidity({ tooShort: true }, `Please enter all ${this.count} characters.`, first);
+        }
+        else {
+            this.internals.setValidity({}, '', first);
+        }
+        // Straight after, because validity moved without any property moving.
+        this.refreshFeedback();
+    }
+    /** Puts the caret in the first empty box, which is where a reader resumes. */
+    focus(options) {
+        const cells = this.cells;
+        const at = Math.min(this.value.length, cells.length - 1);
+        cells[at]?.focus(options);
+    }
+    /** Empties every box and returns to the first. */
+    clear() {
+        this.requestValue('');
+        this.updateComplete.then(() => {
+            this.paint();
+            this.cells[0]?.focus();
+        });
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.committed = this.value;
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.paint();
+        this.sync();
+    }
+    render() {
+        const characters = this.characters;
+        /* `renderGroupLabel` and not `renderLabel`, which is what every other
+           grouped control here uses. `renderLabel` emits `for="control"` and no
+           element in this template carries that id, because a pin input is a row of
+           cells and not one control: the visible label pointed at nothing, so
+           pressing it focused nothing and the group had no accessible name at all.
+           The set names itself through `hostAria` instead. */
+        return html `${this.renderGroupLabel()}
+      <div
+        part="field"
+        role="group"
+        aria-describedby=${this.describedBy ?? nothing}
+        @focusin=${this.handleFocusIn}
+        @focusout=${this.handleFocusOut}
+      >
+        ${characters.map((character, at) => html `<input
+            part="cell"
+            .value=${character}
+            type=${this.mask ? 'password' : 'text'}
+            placeholder=${this.placeholder || nothing}
+            inputmode=${this.type === 'numeric' ? 'numeric' : 'text'}
+            autocomplete=${at === 0 ? this.autocomplete || nothing : 'off'}
+            aria-label=${this.cellLabel
+            .replaceAll('{index}', String(at + 1))
+            .replaceAll('{length}', String(this.count))}
+            ?disabled=${this.isDisabled}
+            ?readonly=${this.readOnly}
+            @focus=${this.handleFocus}
+            @input=${this.handleInput}
+            @keydown=${this.handleKeydown}
+            @paste=${this.handlePaste}
+          />`)}
+      </div>
+      ${this.renderHint()}${this.renderFeedback()}`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessPinInput.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessPinInput.prototype, "length", void 0);
+__decorate([
+    property()
+], HelixHeadlessPinInput.prototype, "type", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessPinInput.prototype, "mask", void 0);
+__decorate([
+    property()
+], HelixHeadlessPinInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ attribute: 'readonly', reflect: true, type: Boolean })
+], HelixHeadlessPinInput.prototype, "readOnly", void 0);
+__decorate([
+    property({ attribute: 'cell-label' })
+], HelixHeadlessPinInput.prototype, "cellLabel", void 0);
+HelixHeadlessPinInput = __decorate([
+    customElement('helix-headless-pin-input')
+], HelixHeadlessPinInput);
+export { HelixHeadlessPinInput };

package/dist/popover/index.d.ts

@@ -0,0 +1 @@
+export * from './root/popover-root.js';

package/dist/popover/index.js

@@ -0,0 +1 @@
+export * from './root/popover-root.js';

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

@@ -0,0 +1,108 @@
+import { CommandController, HelixElement, type Placement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
+/**
+ * @summary A panel that opens against a trigger and holds anything.
+ *
+ * @description
+ * The general case the specific overlays are versions of. `Menu` holds
+ * commands, `Select` holds options, `Tooltip` holds a description; this holds
+ * whatever the consumer puts in it, which is why it has no keyboard of its own
+ * and no opinion about what is inside.
+ *
+ * **The trigger is slotted and stays the consumer's own element.** Nothing is
+ * written onto it: no `aria-expanded`, no `id`, no `tabindex`. A component that
+ * decorates a consumer's markup after upgrading is a component whose output a
+ * React consumer's hydration disagrees with, and the attribute they would care
+ * about most is the one that changes on every open.
+ *
+ * **The panel is in the top layer**, through the popover API, so it clears any
+ * ancestor with `overflow: hidden` without a `z-index` fight. `position: fixed`
+ * does not do that: it is still clipped by `overflow`, and re-anchored entirely
+ * by an ancestor carrying `transform`, `filter` or `contain`.
+ *
+ * **It opens on click, and from a command.** `command="--show"` and its
+ * siblings work here the way they do on `Dialog` and `Drawer`, so a trigger
+ * elsewhere on the page can open it without a line of script and without being
+ * slotted into it.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category overlays
+ * @aliases Popper, Flyout, Overlay
+ * @documentation https://helix.fusion.dev/components/popover
+ *
+ * @slot - The contents of the panel.
+ * @slot trigger - What opens it.
+ *
+ * @event {HelixBeforeCloseEvent} helix-before-close - Fired before it closes, and cancelable.
+ * @event {HelixBeforeOpenEvent} helix-before-open - Fired before it opens, and cancelable.
+ * @event {Event} toggle - Says the state moved, carrying `newState` and `oldState`.
+ *
+ * @csspart content - The scrolling region inside the panel.
+ * @csspart popover - The panel.
+ */
+export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
+    /**
+     * Accessible name for the panel.
+     */
+    label: string;
+    /**
+     * Space between the trigger and the panel, in pixels.
+     */
+    offset: number;
+    /**
+     * Preferred side.
+     *
+     * It moves if that side does not fit.
+     */
+    placement: Placement;
+    private readonly panel;
+    /**
+     * The invoker that last opened the panel, when a command did.
+     *
+     * The handlers discarded the `source` the controller hands them, which cost
+     * two things at once. The panel was positioned against the host, and the
+     * styled tier makes the host a boxless `display: contents` element, so a
+     * popover opened by a command outside it opened against the window origin.
+     * And the outside-press dismissal had no way to know the invoker was part of
+     * the control: the press fires on `pointerdown`, the command arrives on the
+     * `click` after it, so a `--toggle` button outside the host closed the panel
+     * and immediately reopened it, for ever.
+     */
+    private invoker;
+    protected readonly commands: CommandController;
+    /** The element the panel opens against. */
+    private get trigger();
+    /** Opens the panel. */
+    show(): void;
+    /** Closes the panel and puts focus back on the trigger. */
+    hide(): void;
+    private readonly handleTriggerClick;
+    /** Tells a slotted trigger the disclosure state, by property. See `tellDisclosure`. */
+    private tellTrigger;
+    /**
+     * Puts the panel where `open` says it should be, however it got there.
+     *
+     * `show()` and `hide()` raised and lowered it, and nothing else did, so a
+     * panel opened by *declaring* `open` (or `default-open`, or a consumer
+     * assigning the property) rendered visible and was never in the top layer and
+     * never anchored. Every imperative path worked and every declarative one was
+     * quietly half-open: clipped by the first ancestor with `overflow`, and
+     * positioned wherever normal flow left it.
+     *
+     * Driving the controller from the resolved state rather than from the two
+     * methods is what makes the two paths the same path. The controller ignores a
+     * `show()` on something already raised, so this costs nothing when the
+     * methods did the work.
+     */
+    protected updated(changed: PropertyValues): void;
+    protected willUpdate(changed: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-popover': HelixHeadlessPopover;
+    }
+}
+export {};