@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/types/components/pf-modal-header/pf-modal-header.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The header section of a `pf-modal`.
+ *
+ * A separate element rather than a named slot, for the reason `pf-card` gives:
+ * a named slot would need emptiness detection or leave a padded, bordered
+ * strip when nothing was slotted into it.
+ *
+ * @slot - the section's content.
+ */
+export declare class PfModalHeader {
+    render(): any;
+}

package/dist/types/components/pf-multi-select/pf-multi-select.d.ts

@@ -0,0 +1,108 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A form-associated multi-choice select over `pf-option` children.
+ *
+ * **It submits one entry per chosen value from a single control.**
+ * `setFormValue` takes a `FormData`, and a key repeated in it is submitted
+ * once per value — measured, and the same shape the React component gets from
+ * rendering one hidden `<input>` per selection. So a server reads
+ * `data.getAll(name)` exactly as it would from a native multiple select.
+ *
+ * `value` is one comma-separated string, because that is what an attribute can
+ * carry; `pfChange` also reports the parsed `values` array, which is what a
+ * framework consumer usually wants. A value containing a comma cannot survive
+ * that, so one is reported on the console rather than silently mangled.
+ *
+ * Shares `pf-option` with `pf-select` and `pf-combobox` through the generic
+ * `--pf-option-*` set.
+ *
+ * @slot - the `pf-option` children.
+ * @part field - the wrapper around label, control and messages.
+ * @part label - the label element.
+ * @part trigger - the combobox button.
+ * @part chip - each chosen value's chip in the trigger.
+ * @part listbox - the floating listbox the options are slotted into.
+ * @part description - the hint text below the control.
+ * @part error - the error message below the control.
+ */
+export declare class PfMultiSelect {
+    el: HTMLElement;
+    internals: ElementInternals;
+    /** Submitted under this name, once per chosen value. Reflected. */
+    name?: string;
+    /** The chosen values, comma-separated. Reflected, so HTML can set it. */
+    value: string;
+    /** Whether the listbox is showing. Reflected for the stylesheet. */
+    open: boolean;
+    label?: string;
+    description?: string;
+    error?: string;
+    placeholder: string;
+    required: boolean;
+    disabled: boolean;
+    /** Options to show before the listbox scrolls. */
+    maxVisibleOptions?: number;
+    /** Fires when the chosen set changes, with both representations. */
+    pfChange: EventEmitter<{
+        value: string;
+        values: string[];
+    }>;
+    /** Fires whenever the listbox opens or closes, whoever caused it. */
+    pfOpenChange: EventEmitter<{
+        open: boolean;
+    }>;
+    /** The labels of the chosen options, for the trigger's chips. */
+    chips: string[];
+    private initialValue;
+    private stopObserving?;
+    private activeOption;
+    private warnedAboutSeparator;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    syncFormState(): void;
+    /** The value changed, so the children's `selected` and the chips follow. */
+    syncOptions(): void;
+    /**
+     * One warning naming every offending value.
+     *
+     * A value holding a comma cannot round-trip through `value`, and failing
+     * silently would show the right chips over a wrong submission.
+     */
+    private warnAboutSeparators;
+    syncOpen(next: boolean, previous: boolean): void;
+    show(): Promise<void>;
+    hide(): Promise<void>;
+    checkValidity(): Promise<boolean>;
+    reportValidity(): Promise<boolean>;
+    getValidationMessage(): Promise<string>;
+    formResetCallback(): void;
+    /** Re-reads the options, for a label edited in place. */
+    refresh(): Promise<void>;
+    private onSlotChange;
+    private values;
+    private options;
+    private enabled;
+    /** The property, never the attribute: a binding may only have set the former. */
+    private optionValue;
+    private get listbox();
+    private get trigger();
+    private showListbox;
+    private hideListbox;
+    private onToggle;
+    private setActive;
+    /** An element, not an IDREF: a cross-root IDREF resolves to nothing. */
+    private syncActiveDescendant;
+    /**
+     * Toggles one value and keeps the listbox open — the difference from
+     * `pf-select`, and the whole point of a multi-choice control: closing after
+     * each pick would make choosing three things three round trips.
+     */
+    private toggle;
+    handleOptionSelect(event: CustomEvent<{
+        value: string;
+    }>): void;
+    private move;
+    handleKeyDown(event: KeyboardEvent): void;
+    render(): any;
+}

package/dist/types/components/pf-nav-item/pf-nav-item.d.ts

@@ -0,0 +1,78 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * One item in a `pf-header-navigation` or a `pf-sidebar-navigation`.
+ *
+ * Shared by both, because the React library's `HeaderNavigationItem` and
+ * `SidebarNavigationItem` are the same shape — one element rather than two
+ * that would drift. What differs is the layout, and that is the group's to
+ * say: it pushes `orientation` down, which is the only thing an item cannot
+ * work out for itself.
+ *
+ * With an `href` it renders a link; without one it renders a plain box, which
+ * is how a framework's own router is used — slot an `<a routerLink>` or a
+ * `<Link>` in and leave `href` unset.
+ *
+ * `currentPage` and `orientation` are the group's to set. A consumer asks by
+ * setting `current`; the group resolves every item with core's rule and
+ * writes the answer to `currentPage`. Changing the ask tells the group, so
+ * the answer follows a framework's re-render without the consumer calling
+ * anything.
+ *
+ * @slot - the item's label.
+ * @slot icon - a leading icon.
+ * @slot badge - a trailing badge or count.
+ * @part link - the link, or the box standing in for one.
+ */
+export declare class PfNavItem {
+    /** Where the item goes. Reflected; a consumer's stylesheet reads it. */
+    href?: string;
+    /** Opens elsewhere, as on a plain anchor. Ignored without an `href`. */
+    target?: string;
+    /** Goes on the anchor as-is. Ignored without an `href`. */
+    rel?: string;
+    /**
+     * Set it to mark this item as the current page.
+     *
+     * The *asking* half, which the group never writes — `currentPage` below is
+     * the answer. The two are kept apart for the reason `pf-breadcrumb` keeps
+     * them apart: a group that wrote its answer back would leave the mark
+     * behind on an item the consumer had not marked.
+     */
+    current: boolean;
+    /**
+     * Tells the group the ask changed, so it can resolve again.
+     *
+     * The same event `pf-nav-section` emits when its items move, because the
+     * groups do the same thing with both: re-read every item and resolve the
+     * one current page. Without this a navigation resolves at load and never
+     * again for a consumer who marks items through the *property*, which is
+     * every framework consumer — the generated bindings set props as
+     * properties, so there is no attribute change and no `slotchange` either.
+     * The symptom is a navigation whose highlight never moves while the router
+     * works perfectly, which is what porting `apps/demo` ran into.
+     *
+     * `current` only. Watching `currentPage` would loop, since that is what the
+     * group writes back.
+     */
+    pfNavStructure: EventEmitter<void>;
+    handleCurrentChange(): void;
+    /**
+     * Set by the group: the resolved current page, which is the one thing that
+     * renders `aria-current="page"`. At most one item in a navigation carries
+     * it, and the highlight follows it rather than `current` — a second
+     * highlighted item with no `aria-current` would be a sighted-only lie.
+     */
+    currentPage: boolean;
+    /**
+     * Takes the item out of the navigation without removing it.
+     *
+     * A disabled item renders **no anchor at all**, because an anchor has no
+     * disabled state: `aria-disabled` alone leaves it focusable and clickable,
+     * and dropping the `href` is the only thing that really takes it out of the
+     * tab order.
+     */
+    disabled: boolean;
+    /** Set by the group, which is the only one that knows which it is. */
+    orientation: 'horizontal' | 'vertical';
+    render(): any;
+}

package/dist/types/components/pf-nav-section/pf-nav-section.d.ts

@@ -0,0 +1,44 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A titled group of `pf-nav-item` children inside a `pf-sidebar-navigation`.
+ *
+ * The React `SidebarNavigation` takes a `sections` array of `{ title, items }`.
+ * Grouping slotted children has to be structural — one `<slot>` renders every
+ * assigned child in source order, and a shadow root cannot wrap a subset of
+ * them in a box — so the consumer nests, which is the §2.1 idiom and the same
+ * answer `pf-command-group` gives.
+ *
+ * The title names the list with a **same-root** IDREF: both the title and the
+ * `<ul>` are in this shadow root, so the reference resolves. An
+ * `aria-labelledby` from the host could not point at either of them.
+ *
+ * @slot - the `pf-nav-item` children.
+ * @slot title - the section's title.
+ * @part title - the title's box.
+ * @part list - the list the items are slotted into.
+ */
+export declare class PfNavSection {
+    el: HTMLElement;
+    /**
+     * Whether anything was slotted into `title`.
+     *
+     * Asked in JS because the box carries padding and a size of its own, and
+     * because an `aria-labelledby` pointing at an empty element names the list
+     * with an empty string rather than falling back to nothing.
+     */
+    hasTitle: boolean;
+    /**
+     * Tells the navigation its items have moved.
+     *
+     * `slotchange` is not composed, so the navigation never hears this
+     * section's own slot change — exactly the reason `pf-tree-item` emits
+     * `pfTreeStructure`. Without it an item appended to a section is never
+     * given an orientation or a place in the one-current resolution.
+     */
+    pfNavStructure: EventEmitter<void>;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad(): void;
+    private readTitle;
+    private handleSlotChange;
+    render(): any;
+}

package/dist/types/components/pf-notification/pf-notification.d.ts

@@ -0,0 +1,53 @@
+import { type LiveRegionVariant } from '@pitchfork-ui/core';
+import { EventEmitter } from '../../stencil-public-runtime';
+export type PfNotificationVariant = LiveRegionVariant;
+/**
+ * A notification: an icon, a heading, a body and an optional dismiss button.
+ *
+ * The role comes from core's `liveRegionRole`, so `warning` and `danger`
+ * announce assertively and `info` and `success` wait their turn. The React
+ * component used to be `role="status"` for all four — the rule lived in
+ * `Alert` and nowhere else — which is why the mapping is now shared.
+ *
+ * @slot - the body, used instead of the `description` prop when present.
+ * @slot icon - replaces the icon the variant would choose.
+ * @slot action - buttons or links under the body.
+ * @part notification - the root box.
+ * @part icon - the icon's box.
+ * @part title - the heading.
+ * @part body - the description's box.
+ * @part dismiss - the dismiss button.
+ */
+export declare class PfNotification {
+    el: HTMLElement;
+    /** Severity. Reflected, because the stylesheet selects on it. */
+    variant: PfNotificationVariant;
+    /** The bold first line. */
+    heading?: string;
+    /** The body, when nothing is slotted. */
+    description?: string;
+    /** Render the dismiss button. */
+    dismissable: boolean;
+    /** Set while the exit animation plays. Reflected for the stylesheet. */
+    exiting: boolean;
+    /**
+     * Fires once the notification has finished leaving, which is the point at
+     * which its owner should remove it from the DOM.
+     */
+    pfDismiss: EventEmitter<void>;
+    hasSlottedBody: boolean;
+    componentWillLoad(): void;
+    /**
+     * Starts the exit animation and resolves when it has finished, having
+     * emitted `pfDismiss`. Calling it twice is harmless.
+     */
+    dismiss(): Promise<void>;
+    /**
+     * Waits for the exit animation, or returns straight away when there is not
+     * one. Core's, so `pf-alert` and the React `useExitAnimation` wait the same
+     * way — and none of them waits on a guessed duration.
+     */
+    private waitForExit;
+    private readBody;
+    render(): any;
+}

package/dist/types/components/pf-number-input/pf-number-input.d.ts

@@ -0,0 +1,87 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A form-associated stepper field.
+ *
+ * The value is a **string** rather than a number, because that is what an
+ * attribute can carry and what a form submits; `pfChange` reports the parsed
+ * number beside it, which is what a framework consumer wants. An empty string
+ * is an empty field — not zero, which is a value someone chose.
+ *
+ * All of the arithmetic is core's, so this and the React `NumberInput` step,
+ * round and clamp identically: ten steps of `0.1` reach exactly 1 in both.
+ *
+ * @part field - the wrapper around label, control and messages.
+ * @part label - the label element.
+ * @part control - the box holding the steppers and the input.
+ * @part decrement - the step-down button.
+ * @part input - the native input.
+ * @part increment - the step-up button.
+ * @part description - the hint text below the control.
+ * @part error - the error message below the control.
+ */
+export declare class PfNumberInput {
+    el: HTMLElement;
+    internals: ElementInternals;
+    /**
+     * Submitted under this name. Reflected, because a form-associated element
+     * takes its submission name from the attribute, not this property.
+     */
+    name?: string;
+    /** The value, as a string. Empty means an empty field. */
+    value: string;
+    /** The lowest value the field accepts. */
+    min?: number;
+    /** The highest value the field accepts. */
+    max?: number;
+    /** How far one step moves, and what the result is rounded to. */
+    step: number;
+    /** Visible label. Rendered in the same root as the input, so `for` works. */
+    label?: string;
+    /** Hint text below the control. */
+    description?: string;
+    /** Error message. Its presence is what marks the control invalid. */
+    error?: string;
+    placeholder?: string;
+    required: boolean;
+    disabled: boolean;
+    /** The step-down button's accessible name. */
+    decrementLabel: string;
+    /** The step-up button's accessible name. */
+    incrementLabel: string;
+    /** Fires when the value changes, with the parsed number beside the string. */
+    pfChange: EventEmitter<{
+        value: string;
+        number: number | null;
+    }>;
+    /**
+     * What the input shows while it is being edited, which is not always the
+     * value: a half-typed "-" or "1." is neither a number nor a reason to throw
+     * the keystroke away.
+     */
+    draft: string | null;
+    /** The value a form reset restores, which is the initial attribute. */
+    private initialValue;
+    componentWillLoad(): void;
+    syncFormState(): void;
+    /** A form-associated custom element does not inherit this. */
+    checkValidity(): Promise<boolean>;
+    /** As `checkValidity`, but also shows the browser's validation message. */
+    reportValidity(): Promise<boolean>;
+    /** The message explaining why the control is invalid, or an empty string. */
+    getValidationMessage(): Promise<string>;
+    /** A reset restores the value the field started with. */
+    formResetCallback(): void;
+    /** Steps the value up or down, as the buttons and the arrows do. */
+    stepBy(direction: 1 | -1): Promise<void>;
+    private get bounds();
+    private get current();
+    private get atMin();
+    private get atMax();
+    private commit;
+    private step_;
+    private onInput;
+    /** On blur the draft is given up, so the field shows its real value. */
+    private onBlur;
+    private onKeyDown;
+    render(): any;
+}

package/dist/types/components/pf-option/pf-option.d.ts

@@ -0,0 +1,40 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * One choice inside a `pf-select`.
+ *
+ * It only reports that it was chosen; the select owns the value, the active
+ * option and closing — the same division as `pf-radio-group` with its radios
+ * and `pf-dropdown` with its menu items. The select writes `selected` and
+ * `active` back onto it, so the stylesheet has reflected attributes to select
+ * on without the option knowing anything about its container.
+ *
+ * @slot - the option's label, which is also what typeahead searches.
+ */
+export declare class PfOption {
+    el: HTMLElement;
+    /**
+     * The value the select reports when this option is chosen.
+     *
+     * Reflected, because the generated bindings set props as *properties*: an
+     * unreflected prop leaves no attribute, and anything selecting on one — a
+     * consumer's stylesheet, or a test — finds nothing.
+     */
+    value: string;
+    /** Reflected; the stylesheet and the select's own query both read it. */
+    disabled: boolean;
+    /** Set by the select. Reflected, so the stylesheet can mark the choice. */
+    selected: boolean;
+    /** Set by the select: the option the keyboard is on. Reflected likewise. */
+    active: boolean;
+    /** Asks the select to take this value. The select decides and closes. */
+    pfOptionSelect: EventEmitter<{
+        value: string;
+    }>;
+    /**
+     * Mouse only. Keyboard focus stays on the select's trigger and the active
+     * option is tracked with `aria-activedescendant`, so an option never has
+     * focus to receive a key on.
+     */
+    private onClick;
+    render(): any;
+}

package/dist/types/components/pf-page-header/pf-page-header.d.ts

@@ -0,0 +1,33 @@
+/**
+ * The heading of a page: a breadcrumb trail, an eyebrow, the title, a line of
+ * explanation, some metadata and the page's actions.
+ *
+ * The trail is slotted rather than taken as data — the consumer nests a
+ * `pf-breadcrumbs` (WEB-COMPONENTS-PLAN.md §2.1), where the React
+ * `PageHeader` takes a `breadcrumbs` array and renders the component itself.
+ * Each crumb's label is a node, which does not cross the HTML boundary.
+ *
+ * @slot breadcrumbs - a `pf-breadcrumbs` trail above the title.
+ * @slot eyebrow - small text above the title.
+ * @slot - the title.
+ * @slot description - a line below the title.
+ * @slot metadata - small facts below the description.
+ * @slot actions - the page's controls.
+ * @part breadcrumbs - the box holding the breadcrumbs slot.
+ * @part row - the row holding the content and the actions.
+ * @part content - the box holding everything but the actions.
+ * @part heading - the title's box.
+ * @part metadata - the box holding the metadata slot.
+ * @part actions - the box holding the actions slot.
+ */
+export declare class PfPageHeader {
+    el: HTMLElement;
+    /** Which of the boxes that carry layout have anything in them. */
+    hasBreadcrumbs: boolean;
+    hasMetadata: boolean;
+    hasActions: boolean;
+    /** Read from the light DOM, so first paint is right without `slotchange`. */
+    componentWillLoad(): void;
+    private read;
+    render(): any;
+}

package/dist/types/components/pf-pagination/pf-pagination.d.ts

@@ -0,0 +1,41 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A pager: boundary pages pinned at each end, a window around the current
+ * page, and an ellipsis wherever that leaves a gap.
+ *
+ * Controlled or not, like `pf-input`: `page` is mutable, so leaving it alone
+ * lets the element advance itself, and setting it on every `pfPageChange`
+ * keeps the consumer in charge.
+ *
+ * @slot previous - the previous button's label. Defaults to "Previous".
+ * @slot next - the next button's label. Defaults to "Next".
+ * @part nav - either of the previous/next buttons.
+ * @part previous - the previous button.
+ * @part next - the next button.
+ * @part list - the ordered list of pages.
+ * @part page - each page button.
+ * @part current - the page button for the current page.
+ * @part ellipsis - each gap.
+ */
+export declare class PfPagination {
+    /** The current page, 1-based. Mutable so the element can advance itself. */
+    page: number;
+    /** How many pages there are in total. */
+    totalPages: number;
+    /** Pages to show either side of the current one. */
+    siblingCount: number;
+    /** Pages to pin at each end. */
+    boundaryCount: number;
+    /** Show the previous/next buttons. Reflected for the stylesheet. */
+    showPrevNext: boolean;
+    /** Disable every button. Reflected for the stylesheet. */
+    disabled: boolean;
+    /** Accessible name for the navigation landmark. */
+    label: string;
+    /** Emitted with the page the user asked for, already clamped to the range. */
+    pfPageChange: EventEmitter<{
+        page: number;
+    }>;
+    private goTo;
+    render(): any;
+}

package/dist/types/components/pf-pie-chart/pf-pie-chart.d.ts

@@ -0,0 +1,52 @@
+/**
+ * A pie or donut over `pf-pie-slice` children.
+ *
+ * The chart owns the two things a slice cannot know: its share of the total
+ * and its colour. Both go to the slice, which draws its own legend row —
+ * a slot renders its assigned content once and in one place, so a legend
+ * built in the shadow root could never reach labels that live in the light
+ * DOM.
+ *
+ * All of the arithmetic is core's, so this and the React `PieChart` show the
+ * same breakdown, down to the legend's percentages summing to 100.
+ *
+ * @slot - the `pf-pie-slice` children.
+ * @slot center - what goes in the hole.
+ * @slot empty - what to show when nothing is drawable.
+ * @part visual - the circle.
+ * @part gradient - the layer the wedges are painted on.
+ * @part center - the hole in the middle.
+ * @part legend - the list the slices are slotted into.
+ */
+export declare class PfPieChart {
+    el: HTMLElement;
+    /** Diameter, in pixels. Never below 120, where the ring stops reading. */
+    size: number;
+    /** The hole in the middle, as a fraction of the diameter. */
+    cutout: number;
+    /** Show the legend the slices make up. Reflected. */
+    showLegend: boolean;
+    /** The chart's accessible name. */
+    label: string;
+    /** The gradient painting the wedges, which only the chart can work out. */
+    gradient: string;
+    /** Whether anything is drawable, which decides between chart and empty state. */
+    hasData: boolean;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    /**
+     * Re-reads the slices, for a consumer who changed a value through its
+     * *property* — which leaves no attribute and fires no `slotchange`.
+     */
+    refresh(): Promise<void>;
+    /** Direct children only: a nested chart owns its own slices. */
+    private get slices();
+    /**
+     * The property if the slice has upgraded, the attribute if it has not:
+     * `componentWillLoad` can run before a child parsed from HTML upgrades.
+     */
+    private read;
+    sync(): void;
+    render(): any;
+}

package/dist/types/components/pf-pie-slice/pf-pie-slice.d.ts

@@ -0,0 +1,36 @@
+/**
+ * One slice of a `pf-pie-chart`, and its own row in the legend.
+ *
+ * The React `PieChart` takes a `data` array of `{ label, value, color }`; a
+ * slot renders its assigned content once and in one place, so there is no way
+ * for the chart's shadow root to build a legend out of labels that live in the
+ * light DOM. The slice renders its own row instead, which is the §2.1 idiom
+ * and lets a consumer put anything in a label.
+ *
+ * `swatch`, `share` and `drawn` are the chart's to set: only it can see the
+ * total.
+ *
+ * @slot - the slice's label.
+ * @part dot - the colour swatch.
+ * @part label - the label's box.
+ * @part value - the share, as a whole percentage.
+ */
+export declare class PfPieSlice {
+    /** How big the slice is, in whatever unit the chart's slices share. */
+    value: number;
+    /** Overrides the palette colour the chart would give it. */
+    color?: string;
+    /** Set by the chart: the colour actually used, palette or override. */
+    swatch: string;
+    /** Set by the chart: this slice's share, as a whole percentage. */
+    share: number;
+    /**
+     * Set by the chart: whether this slice is in the drawing at all.
+     *
+     * A slice of zero is not a wedge, so it is not a legend row either —
+     * otherwise the legend lists colours that appear nowhere in the chart.
+     * Reflected, because that is what the stylesheet hides it with.
+     */
+    drawn: boolean;
+    render(): any;
+}

package/dist/types/components/pf-popover/pf-popover.d.ts

@@ -0,0 +1,82 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * An interactive panel anchored to its trigger.
+ *
+ * `popover="auto"` rather than `manual`, because the browser then does
+ * light-dismiss and Escape itself — measured from inside a shadow root with
+ * trusted input: a real outside click and a real Escape both close an `auto`
+ * popover while a `manual` one stays open. That is less code than
+ * `onOutsideInteraction` and it composes with the top-layer stack, so a
+ * popover inside a popover closes in the right order.
+ *
+ * @slot - the trigger.
+ * @slot content - the panel's content.
+ * @part panel - the floating panel.
+ */
+export declare class PfPopover {
+    el: HTMLElement;
+    /** Whether the panel is showing. Reflected so the stylesheet can select on it. */
+    open: boolean;
+    /** Which edge of the trigger the panel lines up with. */
+    align: 'start' | 'end';
+    /** Accessible name for the panel, which is a dialog. */
+    label?: string;
+    /**
+     * Close on an outside click or Escape. Defaults to true.
+     *
+     * This is the `auto`/`manual` popover switch: turning it off hands the
+     * consumer responsibility for closing, which is what a popover holding an
+     * unfinished form wants.
+     */
+    dismissable: boolean;
+    /** Fires whenever the panel opens or closes, whoever caused it. */
+    pfOpenChange: EventEmitter<{
+        open: boolean;
+    }>;
+    private stopObserving?;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /** Opens the panel. */
+    show(): Promise<void>;
+    /** Closes the panel. */
+    hide(): Promise<void>;
+    /**
+     * The one place a state change is announced, whatever caused it: a trigger
+     * click, `show()`/`hide()`, a consumer writing the prop, or the browser's own
+     * light-dismiss mirrored in below.
+     *
+     * Emitting from the `toggle` handler instead looked right and fired for none
+     * of the user-driven paths — by the time `toggle` arrives the click handler
+     * has already moved `open`, so the guard there saw no change. A consumer
+     * mirroring this value back sets `open` to what it already is, which Stencil
+     * does not treat as a change, so there is no loop.
+     */
+    syncOpen(next: boolean, previous: boolean): void;
+    private get panel();
+    private get trigger();
+    /**
+     * The trigger's disclosure state.
+     *
+     * `aria-controls` is deliberately absent: it is an IDREF, and an IDREF does
+     * not cross a shadow boundary, so pointing it at the panel's id would leave
+     * a dangling reference — worse than none. `aria-expanded` and
+     * `aria-haspopup` carry what a screen reader announces here.
+     */
+    private syncTrigger;
+    private showPanel;
+    private hidePanel;
+    handleClick(event: MouseEvent): void;
+    /**
+     * Escape for the `manual` case only. An `auto` popover is dismissed by the
+     * browser, and handling it here as well would fight that.
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Mirrors a change the browser made — light-dismiss, or being closed because
+     * another popover took the top layer — back into `open`, which then announces
+     * it through the watch above. Without this a consumer's `open` goes stale
+     * after a dismiss they did not initiate.
+     */
+    private onToggle;
+    render(): any;
+}