@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/types/components/pf-table-cell/pf-table-cell.d.ts

@@ -0,0 +1,43 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type PfTableCellAlign = 'left' | 'center' | 'right';
+/**
+ * One cell of a `pf-table` row.
+ *
+ * A header cell carries `columnheader` rather than `cell`, which the row tells
+ * it; `sortable` turns the label into a button that asks the table to sort.
+ * The table answers by writing `sort` back, which is what `aria-sort` and the
+ * indicator read — the ask and the answer kept apart, as everywhere else here.
+ *
+ * @slot - the cell's content.
+ * @part sort - the header's sort button, when `sortable` is set.
+ * @part indicator - the sort indicator inside that button.
+ */
+export declare class PfTableCell {
+    /** Set by the row: a header cell. Reflected, so the stylesheet reads it. */
+    head: boolean;
+    /** Set by the row: a cell in the last body row, which drops its rule. */
+    last: boolean;
+    /** Which way the content sits. Reflected for the stylesheet. */
+    align: PfTableCellAlign;
+    /** A column width, as any CSS length. Only a header cell's is read. */
+    width?: string;
+    /**
+     * Identifies the column in the table's sort state. A header cell with one
+     * and `sortable` set is the only thing that can be sorted on.
+     *
+     * Reflected because the generated bindings set props as properties, so
+     * without it a consumer selecting `pf-table-cell[sort-key="..."]` finds
+     * nothing. The table reads the property.
+     */
+    sortKey?: string;
+    /** Offer to sort on this column. Reflected for the stylesheet. */
+    sortable: boolean;
+    /** Set by the table: how this column is sorted, if it is. */
+    sort: 'ascending' | 'descending' | 'none';
+    /** Asks the table to sort on this column. The table decides which way. */
+    pfTableSort: EventEmitter<{
+        key: string;
+    }>;
+    private onSort;
+    render(): any;
+}

package/dist/types/components/pf-table-row/pf-table-row.d.ts

@@ -0,0 +1,31 @@
+/**
+ * One row of a `pf-table`.
+ *
+ * `display: table-row`, so the row is a box: that is what lets it take a
+ * background for striping and a `:hover` of its own, neither of which an
+ * element with `display: contents` can do. Its cells are table-cells inside
+ * it, and the column widths come from the table layout rather than from
+ * anything measured.
+ *
+ * The row pushes `head` and `last` onto its own cells, because it knows what
+ * it is and they do not — `last` comes from the table, which is the only
+ * thing that can see where the body ends.
+ *
+ * @slot - the `pf-table-cell` children.
+ */
+export declare class PfTableRow {
+    el: HTMLElement;
+    /** A header row. Reflected, and pushed onto its cells. */
+    head: boolean;
+    /** Set by the table: every other body row, for striping. Reflected. */
+    odd: boolean;
+    /**
+     * Set by the table: the last body row, whose cells drop their bottom border
+     * so the rule does not double up with the table's own.
+     */
+    last: boolean;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad(): void;
+    sync(): void;
+    render(): any;
+}

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

@@ -0,0 +1,149 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type PfTabsVariant = 'underline' | 'pills';
+export type PfTabsSize = 'sm' | 'md';
+/**
+ * A tab set: a strip of `pf-tab` children over a stack of `pf-tab-panel`
+ * children.
+ *
+ * Children rather than an `items` array (WEB-COMPONENTS-PLAN.md §2.1), because
+ * the React `TabsItem` carries a `label` and a `content` that are both
+ * `ReactNode` — neither crosses the HTML boundary, so a consumer nests instead
+ * and loops in their own template.
+ *
+ * A `pf-tab` puts itself in the `tab` slot, so the two kinds of child can be
+ * written interleaved — one `pf-tab` and one `pf-tab-panel` per item, which is
+ * what a loop over data wants — and still land in the right box.
+ *
+ * The group owns everything the children cannot see on their own: which one is
+ * selected, the single tab stop, the id wiring in both directions, and the
+ * sliding indicator. Each `pf-tab` only reports that it was chosen, as
+ * `pf-radio-button` does to its group.
+ *
+ * @slot tab - the `pf-tab` children. They assign themselves to it.
+ * @slot - the `pf-tab-panel` children.
+ * @part list - the tab strip, which is the `tablist`.
+ * @part indicator - the bar or pill that slides to the selected tab.
+ * @part panels - the box the panels are slotted into.
+ */
+export declare class PfTabs {
+    el: HTMLElement;
+    private uid;
+    private listEl?;
+    private indicatorEl?;
+    private observer?;
+    private observed;
+    /**
+     * The selected tab's value.
+     *
+     * Left exactly as the consumer set it, as the React component leaves its
+     * state: a value no tab carries still *shows* the first enabled tab, but it
+     * is not silently rewritten here, so a consumer holding `value` sees only
+     * the changes they made.
+     */
+    value: string;
+    /** Underline or pills. Reflected, and pushed down onto every tab. */
+    variant: PfTabsVariant;
+    /** Tab padding and type scale. Reflected, and pushed down onto every tab. */
+    size: PfTabsSize;
+    /** Stretch the tabs to fill the strip. Reflected, and pushed down. */
+    fullWidth: boolean;
+    /** Fires when the selected tab changes, however it was chosen. */
+    pfChange: EventEmitter<{
+        value: string;
+    }>;
+    /**
+     * The light DOM is readable here, so first paint already has the right tab
+     * selected and the other panels hidden — the mock DOM never fires
+     * `slotchange`, and a real one fires it after the first render.
+     */
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    /**
+     * The indicator is placed from measurements, so it can only be done once the
+     * shadow DOM and the slotted tabs have been laid out.
+     */
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    handleStateChange(): void;
+    /**
+     * Re-reads the children.
+     *
+     * Needed because a consumer can change a tab through its *property* —
+     * `tab.disabled = true` — which leaves no attribute, moves no node and so
+     * fires neither `slotchange` nor any watcher here.
+     */
+    refresh(): Promise<void>;
+    /** Direct children only: a nested tab set owns its own tabs. */
+    private get tabs();
+    private get panels();
+    private get descriptors();
+    /**
+     * The value actually on show: core's rule, so the React `Tabs` falls back to
+     * the same tab for a value no tab carries or one that is disabled.
+     */
+    private get selectedValue();
+    /**
+     * Pushes the group's state down onto the children: which tab is selected,
+     * which panel is shown, the id wiring between the two, and one tab stop.
+     *
+     * The ids go on light-DOM children, which is why they can be referenced at
+     * all: tab and panel share the consumer's tree, so `aria-controls` and
+     * `aria-labelledby` resolve. The pair an overlay cannot have — a trigger
+     * outside pointing at a panel in a shadow root — is the opposite case, and
+     * is why `pf-tooltip` copies its text instead.
+     */
+    private sync;
+    /**
+     * One tab stop for the whole strip, on the selected tab.
+     *
+     * The ARIA tabs pattern puts it there rather than on whichever tab was
+     * focused last, so tabbing in lands on the panel being shown. The React
+     * `Tabs` instead leaves every tab tabbable, which is a gap recorded in
+     * `todo.md` — the arrows already move selection in both.
+     */
+    private syncTabIndex;
+    /**
+     * Puts the indicator under (or behind) the selected tab.
+     *
+     * Measured with rects rather than `offsetLeft`, which the React component
+     * can use and this one cannot: a slotted element's `offsetParent` is
+     * resolved in its *own* node tree, so it is the nearest positioned ancestor
+     * in the consumer's document and never the shadow box the element is
+     * actually laid out in. Measured twice. Inside a `position: relative`
+     * wrapper the selected tab reported `offsetParent: #wrapper` and
+     * `offsetLeft: 196` where its offset within the strip was 186 — the
+     * wrapper's own padding folded in. And with this placed from `offsetLeft`
+     * in a real build, the indicator painted at 64 against a tab starting at
+     * 32, which is what `scripts/smoke-consumer.mjs` now catches.
+     *
+     * Adding back `scrollLeft` is what makes the result scroll-invariant: the
+     * indicator is a child of the scrolling strip, so it has to be placed in the
+     * strip's scroll coordinates, and both rects move together when it scrolls.
+     */
+    private placeIndicator;
+    /**
+     * Re-measures when the strip or the selected tab changes size.
+     *
+     * `document.fonts.ready` as well, because a web font loading can change a
+     * *sibling* tab's width and so move the selected one without resizing it —
+     * which a ResizeObserver on the two of them alone would miss.
+     */
+    private observe;
+    private select;
+    /**
+     * A tab asking to be selected — by click, or by Enter or Space on itself.
+     * The group decides, exactly as `pf-radio-group` does for its radios.
+     */
+    handleTabSelect(event: CustomEvent<{
+        value: string;
+    }>): void;
+    /**
+     * The arrows move *and* select, which the ARIA tabs pattern calls automatic
+     * activation and allows when the panels are already rendered. Home and End
+     * jump to the first and last enabled tab; a disabled tab is skipped rather
+     * than focused, because unlike a calendar's blocked day there is nothing
+     * behind it to reach.
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    render(): any;
+}

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

@@ -0,0 +1,26 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type PfTagVariant = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
+/**
+ * A label a person can remove, for a filter or a selection.
+ *
+ * It only reports that its dismiss button was pressed — removing it is the
+ * consumer's, as it is for `pf-alert`.
+ *
+ * @slot - the tag's label.
+ * @part label - the label wrapper.
+ * @part dismiss - the remove button, when dismissible.
+ */
+export declare class PfTag {
+    variant: PfTagVariant;
+    /** Show a button that removes the tag. */
+    dismissible: boolean;
+    /** Accessible name for the remove button. */
+    dismissLabel: string;
+    /**
+     * Fired when the remove button is pressed. The tag does not remove itself —
+     * whoever owns the list decides, exactly as the React `onDismiss` callback
+     * leaves it to the caller.
+     */
+    pfDismiss: EventEmitter<void>;
+    render(): any;
+}

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

@@ -0,0 +1,92 @@
+import type { PfTagVariant } from '../pf-tag/pf-tag';
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A form-associated field that collects free-text tags.
+ *
+ * Unlike the other multi-value controls here the tags are not chosen from a
+ * list, so there are no `pf-option` children — the chips are `pf-tag`
+ * elements this component renders, and `pf-tag` already has the dismiss
+ * button and the event for it.
+ *
+ * The rules are core's: trimming, the case-insensitive dedup (`React` and
+ * `react` are one tag), the maximum, and `validate`. So is the paste split.
+ * What stays here is what to do with the draft, which differs per refusal — a
+ * duplicate clears it, because the tag asked for is already there, while
+ * hitting the maximum leaves it so nothing is lost.
+ *
+ * Submits one entry per tag under one name, the same way `pf-multi-select`
+ * does.
+ *
+ * @slot - nothing; the chips are rendered from `value`.
+ * @part field - the wrapper around label, control and messages.
+ * @part label - the label element.
+ * @part control - the box holding the chips and the draft input.
+ * @part tag - each chip.
+ * @part input - the draft input.
+ * @part description - the hint text below the control.
+ * @part error - the error message below the control.
+ */
+export declare class PfTagInput {
+    el: HTMLElement;
+    internals: ElementInternals;
+    /** Submitted under this name, once per tag. Reflected. */
+    name?: string;
+    /** The tags, comma-separated. Reflected, so HTML can set it. */
+    value: string;
+    label?: string;
+    description?: string;
+    error?: string;
+    placeholder: string;
+    /** Stop accepting tags once there are this many. */
+    max?: number;
+    /** Accept the same tag twice. The comparison is case-insensitive. */
+    allowDuplicates: boolean;
+    /**
+     * Visual variant for the chips, passed through to `pf-tag`.
+     *
+     * The type is imported from `pf-tag` rather than restated, so the two
+     * cannot drift apart — a second copy of the union would compile happily
+     * while offering a variant `pf-tag` has never heard of.
+     */
+    tagVariant: PfTagVariant;
+    required: boolean;
+    disabled: boolean;
+    /**
+     * Refuse a candidate tag. A property rather than an attribute, because a
+     * function cannot be written in HTML — the generated bindings set props as
+     * properties, so a framework consumer passes it like any other.
+     */
+    validate?: (tag: string) => boolean;
+    /** Fires when the tags change, with both representations. */
+    pfChange: EventEmitter<{
+        value: string;
+        values: string[];
+    }>;
+    private initialValue;
+    componentWillLoad(): void;
+    /** See pf-multi-select: the name is built into the FormData, so watch it. */
+    syncFormState(): void;
+    checkValidity(): Promise<boolean>;
+    reportValidity(): Promise<boolean>;
+    getValidationMessage(): Promise<string>;
+    formResetCallback(): void;
+    private tags;
+    private get input();
+    private get options();
+    private commit;
+    /** Takes the draft as a tag, and decides what to do with the draft itself. */
+    private addDraft;
+    private remove;
+    /**
+     * Enter and comma commit; Backspace on an empty draft removes the last tag,
+     * which is the gesture every tag field has.
+     */
+    private onKeyDown;
+    /**
+     * A pasted list is folded, not added one at a time, so the maximum and the
+     * dedup see each addition. The React component added them in a loop over
+     * stale state and kept only the last — fixed there too, in the same change.
+     */
+    private onPaste;
+    render(): any;
+}

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

@@ -0,0 +1,89 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A form-associated multi-line text control.
+ *
+ * Shares `pf-input`'s field anatomy and form wiring; the control is a
+ * `<textarea>` rather than an `<input>`, so it takes `rows` and resizes.
+ *
+ * @part field - the wrapper around label, control and messages.
+ * @part label - the label element.
+ * @part textarea - the native textarea.
+ * @part description - the hint text below the control.
+ * @part error - the error message below the control.
+ */
+export declare class PfTextarea {
+    el: HTMLElement;
+    internals: ElementInternals;
+    /**
+     * Submitted under this name.
+     *
+     * Reflected, because a form-associated custom element takes its submission
+     * name from the `name` *content attribute* -- not from this property. A
+     * framework wrapper that sets properties rather than attributes (the
+     * generated React bindings do) would otherwise leave the control nameless
+     * and absent from the submission, with every other sign of working.
+     */
+    name?: string;
+    /** The control's value. */
+    value: string;
+    /** Visible rows. Mirrors the native attribute. */
+    rows: 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;
+    readonly: boolean;
+    /** Fires on every keystroke, like the native `input` event. */
+    pfInput: EventEmitter<{
+        value: string;
+    }>;
+    /** Fires when the value is committed, like the native `change` event. */
+    pfChange: EventEmitter<{
+        value: string;
+    }>;
+    /**
+     * The value the control had when it was created, which is what a form reset
+     * restores. Captured here because `value` has been overwritten by then.
+     */
+    private initialValue;
+    componentWillLoad(): void;
+    syncFormState(): void;
+    /**
+     * Whether the control currently satisfies its constraints.
+     *
+     * A form-associated custom element does not inherit `checkValidity` from
+     * anywhere -- the spec puts it on ElementInternals, so the element has to
+     * forward it or consumers cannot ask.
+     */
+    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 control started with, not an empty string —
+     * verified against a native `<input value="initial">`, which comes back to
+     * "initial" rather than to "". Clearing it was a real defect: a
+     * `<pf-textarea value="…">` in a form lost its value on any reset.
+     */
+    formResetCallback(): void;
+    private onInput;
+    private onChange;
+    /**
+     * A textarea's value is its text content, not an attribute, so it cannot be
+     * rendered as a JSX child without Stencil replacing that text node on every
+     * keystroke. It is written through the DOM property instead, which is what
+     * the browser itself does.
+     *
+     * Guarded on inequality: assigning the same string still moves the caret to
+     * the end in some engines, which would make typing into the middle of a
+     * paragraph jump the cursor away on every character.
+     */
+    componentDidRender(): void;
+    render(): any;
+}

package/dist/types/components/pf-time-picker/pf-time-picker.d.ts

@@ -0,0 +1,105 @@
+import { type HourCycle } from '@pitchfork-ui/core';
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A form-associated time field: a trigger that opens hour, minute and (on a
+ * 12-hour cycle) meridiem columns in a popover.
+ *
+ * The submitted value is always canonical 24-hour `HH:mm`, whatever
+ * `hour-cycle` displays. A control whose submitted value changed with its
+ * display would be unusable on a server, so the cycle is a rendering choice
+ * and nothing more — all of that arithmetic is core's.
+ *
+ * @part field - the wrapper around label, control and messages.
+ * @part label - the label element.
+ * @part trigger - the button that opens the columns.
+ * @part panel - the floating panel.
+ * @part column - each of the scrolling columns.
+ * @part option - every option button.
+ * @part description - the hint text below the control.
+ * @part error - the error message below the control.
+ */
+export declare class PfTimePicker {
+    el: HTMLElement;
+    internals: ElementInternals;
+    /** Submitted under this name. Reflected; the submission reads the attribute. */
+    name?: string;
+    /** Canonical 24-hour `HH:mm`, or empty. */
+    value: string;
+    /** Whether the panel is showing. Reflected for the stylesheet. */
+    open: boolean;
+    /**
+     * 12- or 24-hour display. The value stays 24-hour either way.
+     *
+     * Read through `cycle` below, never directly: Stencil coerces an attribute
+     * using the prop's type as *written*, and it cannot resolve a name it had
+     * to import. Measured: with `HourCycle` imported from core,
+     * `hour-cycle="12"` arrives as the **string** `"12"`, so `=== 12` is
+     * false, while `minute-step="15"` — declared `number` — arrives as `15`.
+     * Writing `0 | 1` out inline *is* coerced, which `pf-heatmap.weekStartsOn`
+     * shows; the alias is kept here because it is the shared type, and the
+     * getter costs nothing.
+     */
+    hourCycle: HourCycle;
+    /** Granularity of the minutes column. */
+    minuteStep: number;
+    label?: string;
+    description?: string;
+    error?: string;
+    placeholder: string;
+    required: boolean;
+    disabled: boolean;
+    /** Fires when the time changes, with the canonical `HH:mm`. */
+    pfChange: EventEmitter<{
+        value: string;
+    }>;
+    /** Fires whenever the panel opens or closes, whoever caused it. */
+    pfOpenChange: EventEmitter<{
+        open: boolean;
+    }>;
+    private initialValue;
+    private stopObserving?;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    syncFormState(): void;
+    syncOpen(next: boolean, previous: boolean): void;
+    show(): Promise<void>;
+    hide(): Promise<void>;
+    checkValidity(): Promise<boolean>;
+    reportValidity(): Promise<boolean>;
+    getValidationMessage(): Promise<string>;
+    /** A reset restores the value the field started with, not an empty one. */
+    formResetCallback(): void;
+    /** `hourCycle` with the attribute case coerced; see the prop's comment. */
+    private get cycle();
+    private get panel();
+    private get trigger();
+    private get parts();
+    private showPanel;
+    private hidePanel;
+    /**
+     * Centres each column on its chosen option.
+     *
+     * `block: 'nearest'` would leave a column that is already scrolled roughly
+     * right alone, which reads as the wrong hour being selected.
+     */
+    private scrollSelectedIntoView;
+    private onToggle;
+    private commit;
+    private selectHour;
+    private selectMinute;
+    private selectMeridiem;
+    private selectedMeridiem;
+    /**
+     * Up and down move within a column, and stop at its ends rather than
+     * wrapping — a wrap in a scrolling column of 60 minutes reads as the list
+     * having jumped rather than moved.
+     *
+     * The focused option is read from `shadowRoot.activeElement`, because
+     * `document.activeElement` is this host: focus inside a shadow root is
+     * reported as the host from the outside.
+     */
+    private onColumnKeyDown;
+    private renderColumn;
+    render(): any;
+}

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

@@ -0,0 +1,27 @@
+/**
+ * A vertical timeline over `pf-timeline-item` children.
+ *
+ * The group owns the one thing an entry cannot see: whether it is the last,
+ * which decides both the connector running down to the next entry and the
+ * space below the content.
+ *
+ * @slot - the `pf-timeline-item` children.
+ */
+export declare class PfTimeline {
+    el: HTMLElement;
+    /**
+     * The timeline's accessible name. A list of entries is worth naming, and a
+     * consumer can only do it from out here.
+     */
+    label?: string;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    handleLabelChange(): void;
+    /** Re-reads the children, for a consumer who moved them imperatively. */
+    refresh(): Promise<void>;
+    /** Direct children only: a nested timeline owns its own entries. */
+    private get items();
+    private sync;
+    render(): any;
+}

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

@@ -0,0 +1,40 @@
+export type PfTimelineTone = 'default' | 'success' | 'warning' | 'danger';
+/**
+ * One entry in a `pf-timeline`.
+ *
+ * @slot title - the entry's title.
+ * @slot timestamp - short meta text beside the title.
+ * @slot description - secondary text below the title.
+ * @slot icon - an icon inside the marker, in place of the plain dot.
+ * @part rail - the column holding the marker and the connector.
+ * @part marker - the dot, or the circle around a slotted icon.
+ * @part connector - the line down to the next entry. Absent on the last.
+ * @part content - the box holding title, timestamp and description.
+ * @part header - the row holding the title and the timestamp.
+ * @part title - the title's box.
+ */
+export declare class PfTimelineItem {
+    el: HTMLElement;
+    /** Marker colour. Reflected so the stylesheet can select on it. */
+    tone: PfTimelineTone;
+    /** Set by the group: the last entry has no connector and no space below. */
+    last: boolean;
+    /**
+     * Whether anything is slotted into the marker, which decides how big it is.
+     *
+     * Asked in JS rather than selected in CSS: `.marker:has(*)` reads as "is
+     * anything in here" and always matches, because the `<slot>` is itself a
+     * child — measured, and the defect it caused in `pf-menu-item`. The marker
+     * is an ancestor of the slotted icon, so `::slotted()` cannot size it
+     * either, which leaves this.
+     */
+    hasIcon: boolean;
+    /**
+     * The light DOM is readable here, so the marker is the right size at first
+     * paint — the mock DOM never fires `slotchange`, and a real one fires it
+     * after the first render.
+     */
+    componentWillLoad(): void;
+    private readIcon;
+    render(): any;
+}

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

@@ -0,0 +1,66 @@
+import type { LiveRegionVariant } from '@pitchfork-ui/core';
+import { EventEmitter } from '../../stencil-public-runtime';
+export type PfToasterPlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export interface PfToastOptions {
+    variant?: LiveRegionVariant;
+    heading?: string;
+    description?: string;
+    /** Milliseconds before it dismisses itself. `0` keeps it until dismissed. */
+    duration?: number;
+    /** Render the dismiss button. Defaults to true. */
+    dismissable?: boolean;
+}
+interface Entry extends PfToastOptions {
+    id: string;
+}
+/**
+ * The region toasts appear in, and the queue behind them.
+ *
+ * This is the one place the elements layer takes options rather than child
+ * elements, against the rule in `WEB-COMPONENTS-PLAN.md` §2.1 — because a
+ * toast is not data the consumer is rendering, it is an event that happened.
+ * React expresses that with a context provider and a module-level `toast()`;
+ * the equivalent for a custom element is a method on the region, since a
+ * consumer calling `toast()` three times from an event handler cannot
+ * reasonably be asked to maintain a list of children for it.
+ *
+ * Declarative use still works: anything slotted in is laid out in the stack
+ * alongside the queue, which is how a notification that is part of the page
+ * rather than a response to an action is placed here.
+ *
+ * The region itself is not a live region. Each `pf-notification` is one
+ * already, so marking the container as well would announce every toast twice.
+ *
+ * @slot - notifications placed in the stack declaratively.
+ * @part stack - the positioned container.
+ */
+export declare class PfToaster {
+    el: HTMLElement;
+    /** Which corner the stack sits in. Reflected; the stylesheet positions on it. */
+    placement: PfToasterPlacement;
+    /** Auto-dismiss delay for toasts that do not set their own. `0` disables it. */
+    duration: number;
+    /** Fires when a toast has left, with the id `toast()` returned. */
+    pfToastDismiss: EventEmitter<{
+        id: string;
+    }>;
+    entries: Entry[];
+    private timers;
+    private sequence;
+    disconnectedCallback(): void;
+    /**
+     * Shows a toast and returns its id.
+     *
+     * Newest first, matching the React provider, so a stack in a top corner
+     * grows downwards away from the corner.
+     */
+    toast(options?: PfToastOptions): Promise<string>;
+    /** Dismisses one toast by the id `toast()` returned. */
+    dismiss(id: string): Promise<void>;
+    /** Dismisses everything currently showing. */
+    dismissAll(): Promise<void>;
+    private clearTimer;
+    private remove;
+    render(): any;
+}
+export {};