@pitchfork-ui/elements 0.0.0-stage → 0.2.1

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

@@ -0,0 +1,110 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A form-associated single-choice select over `pf-option` children.
+ *
+ * The first of Wave 5, and the worked example for §2.1: the options are child
+ * elements, so a label is a slot and can hold anything, where the React
+ * `Select`'s `options` array can only hold a string.
+ *
+ * **It has typeahead, which the React component does not.** Typing `b` jumps
+ * to the next option beginning with `b`, `br` narrows, and `bbb` cycles — the
+ * ARIA listbox pattern, and the matching is core's so a later `pf-combobox`
+ * answers the same keystrokes. `todo.md` has the React fix.
+ *
+ * Form-associated, so the value submits by itself. The React component fakes
+ * that with a hidden `<input>` beside the trigger.
+ *
+ * The active option is set as an *element*, not an IDREF: the trigger is in
+ * this shadow root and the options are slotted light DOM, and a cross-root
+ * IDREF is absent from the accessibility tree — measured. `aria-controls` does
+ * work, because the listbox itself is in this same root.
+ *
+ * @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 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 PfSelect {
+    el: HTMLElement;
+    internals: ElementInternals;
+    /** Submitted under this name. Reflected; the submission reads the attribute. */
+    name?: string;
+    /** The chosen option's value, or empty. */
+    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. Unset means it fits them all. */
+    maxVisibleOptions?: number;
+    /** Fires when the chosen value changes. */
+    pfChange: EventEmitter<{
+        value: string;
+    }>;
+    /** Fires whenever the listbox opens or closes, whoever caused it. */
+    pfOpenChange: EventEmitter<{
+        open: boolean;
+    }>;
+    /** The label of the chosen option, for the trigger to show. */
+    selectedLabel: string;
+    private initialValue;
+    private stopObserving?;
+    private activeOption;
+    private typeahead;
+    private typeaheadTimer?;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    syncFormState(): void;
+    /** The value changed, so the children's `selected` and the trigger follow. */
+    syncOptions(): 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 control started with, not an empty one. */
+    formResetCallback(): void;
+    /** An option added or removed while mounted; re-mark the children. */
+    private onSlotChange;
+    /** Re-reads the options, for a label edited in place (which fires no slotchange). */
+    refresh(): Promise<void>;
+    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;
+    /**
+     * Feature-detected. Where ARIA element reflection is missing there is no
+     * cross-root equivalent, so the active option stops being *announced* while
+     * the arrows and Enter still work — recorded in `todo.md`.
+     */
+    private syncActiveDescendant;
+    private commit;
+    /** An option asked to be taken. The select decides, reports and closes. */
+    handleOptionSelect(event: CustomEvent<{
+        value: string;
+    }>): void;
+    private move;
+    private clearTypeahead;
+    /**
+     * Typeahead. The buffer and its timer live here, because a timer is state
+     * and core is never a state container; the matching is core's.
+     */
+    private handleTypeahead;
+    handleKeyDown(event: KeyboardEvent): void;
+    render(): any;
+}

package/dist/types/components/pf-sidebar-navigation/pf-sidebar-navigation.d.ts

@@ -0,0 +1,77 @@
+/**
+ * A sidebar navigation over `pf-nav-item` children, optionally grouped into
+ * `pf-nav-section`s.
+ *
+ * The group owns the one thing an item cannot know: which item is the current
+ * page. Core's rule decides, so the React `SidebarNavigation` marks the same
+ * one — and the resolution runs across every section rather than within one,
+ * because `aria-current="page"` names the one page the reader is on and a
+ * sidebar with two marked sections would claim two.
+ *
+ * As with `pf-header-navigation`, the host is not a landmark of its own: the
+ * React component renders an `<aside>`, and an element cannot know whether it
+ * is the page's complementary region. Only the `<nav>` is rendered.
+ *
+ * Items are grouped: the default slot takes `pf-nav-section` children, each
+ * of which owns its own `<ul>`. A navigation with no section titles is one
+ * untitled section, which is exactly what the React `sections` array is — and
+ * it is also the only arrangement that keeps the list semantics honest, since
+ * a `<ul>` here would be a list whose children were sections rather than
+ * items.
+ *
+ * @slot - the `pf-nav-section` children.
+ * @slot header - a box above the navigation, such as a product switcher.
+ * @slot footer - a box below it, pushed to the bottom.
+ * @part header - the header's box.
+ * @part nav - the navigation landmark.
+ * @part footer - the footer's box.
+ */
+export declare class PfSidebarNavigation {
+    el: HTMLElement;
+    /** The navigation's accessible name. */
+    label: string;
+    /**
+     * Whether anything was slotted into `header` and `footer`.
+     *
+     * Asked in JS: both boxes carry a border and padding, so an empty one draws
+     * a rule across the sidebar for no reason, and a wrapper around a slot
+     * cannot be collapsed from CSS. The same arrangement as
+     * `pf-slideout-menu`'s footer.
+     */
+    hasHeader: boolean;
+    hasFooter: boolean;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    /**
+     * A section's items moved, or an item's `current` changed. Either way the
+     * resolution has to run again.
+     *
+     * `slotchange` is not composed, so this is the only way the navigation
+     * hears about an item appended inside a section — and an item's `current`
+     * arriving as a *property* fires no DOM event at all, which is why the item
+     * emits this too. The event comes from a slotted child in the navigation's
+     * own tree, so `event.target` is the section or the item rather than the
+     * host — nothing is retargeted, which is what makes a host listener safe
+     * here and not on a child in the shadow root.
+     */
+    handleStructureChange(event: CustomEvent<void>): void;
+    /**
+     * Re-reads the items, for a consumer who changed something the group reads
+     * and has no event for.
+     */
+    refresh(): Promise<void>;
+    /**
+     * Every item this navigation owns, in document order, however deeply a
+     * section nests it — but not one belonging to a navigation nested inside
+     * this one.
+     */
+    private get items();
+    /**
+     * The property if the item has upgraded, the attribute if it has not:
+     * `componentWillLoad` can run before a child parsed from HTML upgrades.
+     */
+    private isCurrent;
+    private sync;
+    render(): any;
+}

package/dist/types/components/pf-slideout-menu/pf-slideout-menu.d.ts

@@ -0,0 +1,103 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type PfSlideoutMenuPlacement = 'left' | 'right';
+export type PfSlideoutMenuSize = 'sm' | 'md' | 'lg';
+/**
+ * A panel that slides in from the edge of the screen — a modal dialog that
+ * happens to be anchored to a side rather than centred.
+ *
+ * Which is why this is a native `<dialog>` opened with `showModal()`, exactly
+ * as `pf-modal` is. The React component hand-rolls the whole modal contract:
+ * a focus trap over `getFocusableElements`, a `focusin` listener to pull focus
+ * back, Escape handling, an overlay element, and focus restoration on close —
+ * about ninety lines. `showModal()` gives all of it, and the element needs
+ * none of core's `trapFocus`.
+ *
+ * The one thing it does not give is a page-scroll lock, so that comes from
+ * core's reference-counted `lockPageScroll`.
+ *
+ * @slot - the panel's body.
+ * @slot footer - actions pinned below the body.
+ * @part dialog - the native dialog, which is also the overlay.
+ * @part panel - the sliding panel.
+ * @part header - the header row, present only when there is a heading.
+ * @part title - the heading.
+ * @part description - the supporting line under the heading.
+ * @part body - the scrolling region the default slot renders into.
+ * @part footer - the footer region.
+ * @part close - the close button.
+ */
+export declare class PfSlideoutMenu {
+    el: HTMLElement;
+    /** Whether the panel is showing. Reflected so the stylesheet can select on it. */
+    open: boolean;
+    /** Which edge it slides in from. Reflected; the stylesheet positions on it. */
+    placement: PfSlideoutMenuPlacement;
+    /** Panel width. Reflected so the stylesheet can select on it. */
+    size: PfSlideoutMenuSize;
+    /** The heading shown in the header. */
+    heading?: string;
+    /** A supporting line under the heading. */
+    description?: string;
+    /**
+     * Accessible name, for when there is no `heading` to name it.
+     *
+     * With a heading, `aria-labelledby` is used instead and points at the
+     * heading's id. That works here and not in `pf-modal` because this heading
+     * is a prop rendered into this element's own shadow root, so the IDREF never
+     * crosses a boundary — `pf-modal`'s header is slotted light DOM, which is
+     * why it has to fall back to copying text into `aria-label`.
+     */
+    label?: string;
+    /** Close on Escape or a click on the overlay. Defaults to true. */
+    dismissable: boolean;
+    /** Render the corner close button. Defaults to true. */
+    showCloseButton: boolean;
+    /** Fires whenever the panel opens or closes, whoever caused it. */
+    pfOpenChange: EventEmitter<{
+        open: boolean;
+    }>;
+    /**
+     * Whether anything is slotted into the footer.
+     *
+     * Asked in JS rather than selected in CSS because a wrapper holding a
+     * `<slot>` cannot be collapsed by a `:not(:has(*))` rule — the slot element
+     * is itself a child, so the rule never matches, measured. An empty footer
+     * carries a border and padding, so it has to actually not render.
+     */
+    hasFooter: boolean;
+    private releaseScroll;
+    componentWillLoad(): void;
+    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. Emitting
+     * from the `close` handler instead fires for the browser-driven path and for
+     * none of the user-driven ones, because by then the element has already
+     * moved its own `open` and the guard sees no change.
+     */
+    syncOpen(next: boolean, previous: boolean): void;
+    /**
+     * Counts element children rather than `assignedNodes`, because this runs in
+     * `componentWillLoad` too, before there is a shadow root to ask.
+     */
+    private readFooter;
+    private get dialog();
+    private lockScroll;
+    private unlockScroll;
+    private showDialog;
+    private closeDialog;
+    /** Fires on Escape. Blocking it is how a non-dismissable panel stays put. */
+    private onCancel;
+    /** Mirrors a browser-driven close back into `open`, which announces it. */
+    private onClose;
+    /**
+     * A click on the dialog itself is a click on the overlay: the panel is an
+     * inner box, so anything landing on the dialog missed the content.
+     */
+    private onDialogClick;
+    render(): any;
+}

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

@@ -0,0 +1,66 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A form-associated range slider.
+ *
+ * A native `<input type="range">`, as the React component is — the drag, the
+ * keyboard stepping and the touch handling are all the browser's, and nothing
+ * here reimplements them.
+ *
+ * @part field - the wrapper around header, control and messages.
+ * @part header - the row holding the label and the readout.
+ * @part label - the label element.
+ * @part value - the numeric readout.
+ * @part input - the native range input.
+ * @part description - the hint text below the control.
+ * @part error - the error message below the control.
+ */
+export declare class PfSlider {
+    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 control's value. */
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    /** Visible label, rendered in the same root so `for` actually associates. */
+    label?: string;
+    /** Hint text below the control. */
+    description?: string;
+    /** Error message. Its presence is what marks the control invalid. */
+    error?: string;
+    /** Show the current value beside the label. Reflected for the stylesheet. */
+    showValue: boolean;
+    disabled: boolean;
+    /** Fires as the user drags, like the native `input` event. */
+    pfInput: EventEmitter<{
+        value: number;
+    }>;
+    /** Fires when the value is committed, like the native `change` event. */
+    pfChange: EventEmitter<{
+        value: number;
+    }>;
+    /** 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 control started with. */
+    formResetCallback(): void;
+    /** The bounds, with a non-finite or inverted range made drawable. */
+    private get range();
+    /** The value as rendered: always inside the bounds. */
+    private get current();
+    private onInput;
+    private onChange;
+    render(): any;
+}

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

@@ -0,0 +1,54 @@
+/**
+ * A small line or area chart with no axes.
+ *
+ * All of the geometry is core's, so this and the React `Sparkline` put the
+ * same numbers in the same places — including the three edge cases that were
+ * wrong before the extraction: one value gave `NaN`, a flat series was pinned
+ * to an edge, and the closing branch of the old path builder interpolated a
+ * boolean.
+ *
+ * @part svg - the chart.
+ * @part area - the filled region, on the `area` variant.
+ * @part line - the line.
+ * @part dot - the dot at the last point, when `endDot` is set.
+ */
+export declare class PfSparkline {
+    /**
+     * The values to plot.
+     *
+     * A `number[]` for a framework consumer, and a comma-separated string for
+     * plain HTML — `data="1,4,2,8"` — because Stencil coerces an attribute only
+     * for the primitive types it recognises, and an array is not one of them.
+     * Read through `values` below, never directly.
+     */
+    data: number[] | string;
+    width: number;
+    height: number;
+    /** `line` draws only the stroke; `area` fills under it too. Reflected. */
+    variant: 'line' | 'area';
+    strokeWidth: number;
+    /** Overrides the token colour, for a chart that has to match its data. */
+    color?: string;
+    /** Draw a dot at the last value. */
+    endDot: boolean;
+    /**
+     * Draw the line in on first paint. Off by default. Reflected.
+     *
+     * `animated`, where the React prop is `animate`: `animate` is a **reserved
+     * public name** — `Element.prototype.animate` is the Web Animations API —
+     * and Stencil refuses to build a prop that shadows a prototype member. The
+     * React component is a function taking props and has no such collision.
+     */
+    animated: boolean;
+    /**
+     * The chart's accessible name.
+     *
+     * Without one the chart is `presentation`: a sparkline with no name is
+     * decoration beside a number that already says what it means, and
+     * announcing an unnamed graphic is worse than skipping it.
+     */
+    label?: string;
+    /** The values, however they arrived. */
+    private get values();
+    render(): any;
+}

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

@@ -0,0 +1,62 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A form-associated on/off switch.
+ *
+ * Built on a native checkbox with `role="switch"`, exactly as the React
+ * component is: a switch is a checkbox whose two states are "on" and "off"
+ * rather than "selected" and "not selected", and the role is the only
+ * difference assistive technology needs.
+ *
+ * @part field - the wrapper around control and label.
+ * @part input - the native checkbox carrying role="switch".
+ * @part label - the label element.
+ */
+export declare class PfSwitch {
+    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;
+    /** Whether the switch is on. Reflected so the stylesheet can select on it. */
+    checked: boolean;
+    /**
+     * What is submitted when on. Mirrors the native attribute, whose default is
+     * also `on` — a checkbox with no value still submits something.
+     */
+    value: string;
+    /** Visible label, rendered in the same root so `for` actually associates. */
+    label?: string;
+    /** Error message. Its presence is what marks the control invalid. */
+    error?: string;
+    required: boolean;
+    disabled: boolean;
+    /** Fires when the user turns the switch on or off. */
+    pfChange: EventEmitter<{
+        checked: boolean;
+        value: string;
+    }>;
+    /** The state a form reset restores, which is the initial attribute. */
+    private initialChecked;
+    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 initial state, not `false` — a native
+     * `<input type=checkbox checked>` comes back on.
+     */
+    formResetCallback(): void;
+    private onChange;
+    render(): any;
+}

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

@@ -0,0 +1,83 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { PfTabsSize, PfTabsVariant } from '../pf-tabs/pf-tabs';
+export type PfTabPlacement = 'start' | 'end';
+/**
+ * One tab inside a `pf-tabs`.
+ *
+ * It only reports that it was chosen; the group owns the selection, the single
+ * tab stop and the id wiring — the same division as `pf-radio-group` with its
+ * radios and `pf-select` with its options. The group writes `selected`,
+ * `variant`, `size` and `full-width` back onto it, so the stylesheet has
+ * reflected attributes to select on without the tab knowing anything about its
+ * container.
+ *
+ * The host is the `tab` itself rather than a wrapper around a button, so it is
+ * the element the group focuses and the one `aria-controls` points from.
+ *
+ * @slot - the tab's label.
+ * @part label - the label's box.
+ * @part icon - the decorative icon, when `icon` is set.
+ * @part count - the count badge, when `count` is set.
+ */
+export declare class PfTab {
+    el: HTMLElement;
+    /**
+     * Identifies the tab, and pairs it with the `pf-tab-panel` carrying the same
+     * value.
+     *
+     * 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 group's own filtering both read it. */
+    disabled: boolean;
+    /** Set by the group. Reflected, so the stylesheet can mark the tab. */
+    selected: boolean;
+    /** Set by the group from its own `variant`. Reflected for the stylesheet. */
+    variant: PfTabsVariant;
+    /** Set by the group from its own `size`. Reflected for the stylesheet. */
+    size: PfTabsSize;
+    /** Set by the group from its own `fullWidth`. Reflected for the stylesheet. */
+    fullWidth: boolean;
+    /** A decorative icon's name, from the same registry as `pf-icon`. */
+    icon?: string;
+    /** Which side of the label the icon sits on. */
+    iconPlacement: PfTabPlacement;
+    /**
+     * A count rendered as a badge beside the label (GitHub-style, "Issues 12").
+     * It is left in the tab's accessible name, so a screen reader announces it.
+     * `0` shows a zero; omitting the prop shows no badge at all.
+     */
+    count?: number;
+    /** Which side of the label the count badge sits on. */
+    badgePlacement: PfTabPlacement;
+    /** Asks the group to select this tab. The group decides. */
+    pfTabSelect: EventEmitter<{
+        value: string;
+    }>;
+    /**
+     * Puts itself in the group's `tab` slot.
+     *
+     * So that a consumer can write one `pf-tab` and one `pf-tab-panel` per item
+     * — interleaved, which is what a loop over data produces — and still have
+     * the tabs land in the strip and the panels in the stack below it. A slot
+     * the consumer set themselves is left alone, so the explicit spelling keeps
+     * working.
+     *
+     * Assigning `slot` moves the node between slots, which fires `slotchange` on
+     * both; writing the same value again is not a mutation, so this does not
+     * loop.
+     */
+    connectedCallback(): void;
+    handleClick(event: MouseEvent): void;
+    /**
+     * Enter and Space select, as they do on a tab. The arrows are the group's:
+     * only it knows the other tabs.
+     *
+     * `preventDefault` because the host is a focusable element rather than a
+     * button, so Space would scroll the page instead.
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    render(): any;
+}

package/dist/types/components/pf-tab-panel/pf-tab-panel.d.ts

@@ -0,0 +1,24 @@
+/**
+ * One panel inside a `pf-tabs`, shown when the `pf-tab` carrying the same
+ * `value` is selected.
+ *
+ * A sibling of its tab rather than a child of it, so that both live in the
+ * consumer's tree: that is what lets the group point `aria-controls` at this
+ * panel and `aria-labelledby` back at the tab, since a same-root IDREF is the
+ * one that resolves.
+ *
+ * @slot - the panel's content.
+ */
+export declare class PfTabPanel {
+    /**
+     * Pairs the panel with its tab.
+     *
+     * Reflected because the generated bindings set props as properties, so
+     * without it a consumer selecting `pf-tab-panel[value="..."]` in a React or
+     * Angular app finds nothing. The group reads the property.
+     */
+    value: string;
+    /** Set by the group: whether this is the panel on show. Reflected. */
+    active: boolean;
+    render(): any;
+}

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

@@ -0,0 +1,76 @@
+import { type SortDirection, type SortState } from '@pitchfork-ui/core';
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A table over `pf-table-row` and `pf-table-cell` children.
+ *
+ * **It reports a sort rather than performing one.** The rows are the
+ * consumer's — they wrote the loop — and reordering them would mean moving
+ * elements in their DOM, which their framework would undo on its next render
+ * and which would break its reconciliation on the way. So this element owns
+ * the header buttons, `aria-sort` and the indicator, and emits `pfSortChange`
+ * for the consumer to sort their own data with. `compareSortValues` and
+ * `sortRowsBy` are in core precisely so that the order they produce matches
+ * the React `Table`, which does sort for itself.
+ *
+ * The layout is CSS tables rather than a grid, which is what lets a row be a
+ * box: a grid needs its rows to be `display: contents` for the cells to line
+ * up in columns, and an element with no box takes no `:hover` and no
+ * background — so striping and row hover would both have to be pushed down in
+ * JS. `display: table-row` gives them for nothing, and column widths size
+ * themselves.
+ *
+ * @slot caption - a heading above the table.
+ * @slot - the `pf-table-row` children.
+ * @slot empty - what to show when there are no body rows.
+ * @part caption - the caption's box.
+ * @part table - the table itself.
+ * @part empty - the box holding the empty slot.
+ */
+export declare class PfTable {
+    el: HTMLElement;
+    /** Tighter rows. Reflected, and bridged down to the cells' padding. */
+    dense: boolean;
+    /** Shade every other body row. Reflected, and bridged down. */
+    striped: boolean;
+    /** Shade the row under the pointer. Reflected, and bridged down. */
+    hoverable: boolean;
+    /** Keep the header visible while the body scrolls. Reflected and bridged. */
+    stickyHeader: boolean;
+    /** The column being sorted on, by its `sort-key`. */
+    sortKey?: string;
+    /** Which way that column is sorted. */
+    sortDirection: SortDirection;
+    /** The table's accessible name, for a table whose caption is not enough. */
+    label?: string;
+    /**
+     * Fires when a header is clicked, with the sort the table has moved to.
+     * Sorting the rows is the consumer's to do.
+     */
+    pfSortChange: EventEmitter<SortState>;
+    /** Whether there are any body rows, which decides the empty state. */
+    isEmpty: boolean;
+    /**
+     * Whether anything is slotted into the caption, which decides whether its
+     * box is drawn. Asked in JS because a box around a slot cannot be collapsed
+     * from CSS: `:has(slot)` always matches, since the slot is itself a child.
+     */
+    hasCaption: boolean;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    handleSortChange(): void;
+    /** Re-reads the rows, for a consumer who changed one through a property. */
+    refresh(): Promise<void>;
+    /** Direct children only: a nested table owns its own rows. */
+    private get rows();
+    private isHead;
+    private sync;
+    /**
+     * A header asking to sort. The table decides which way — core's rule: a new
+     * column starts ascending and the current one turns round — and reports it.
+     */
+    handleSort(event: CustomEvent<{
+        key: string;
+    }>): void;
+    render(): any;
+}