@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/types/components/pf-metric-card/pf-metric-card.d.ts

@@ -0,0 +1,42 @@
+export type PfMetricTrend = 'positive' | 'negative' | 'neutral';
+/**
+ * One figure worth looking at: a heading, the number, and optionally how it
+ * has moved.
+ *
+ * @slot heading - what the number is.
+ * @slot - the number.
+ * @slot trend - how it has moved, shown as a pill beside the number.
+ * @slot description - a line below the number.
+ * @slot icon - a small icon beside the heading.
+ * @slot action - a control in the card's top corner.
+ * @part header - the row holding the heading and the action.
+ * @part heading - the heading's box.
+ * @part icon - the icon's box.
+ * @part action - the box holding the action slot.
+ * @part body - the row holding the number and the trend.
+ * @part value - the number's box.
+ * @part trend - the trend pill.
+ */
+export declare class PfMetricCard {
+    el: HTMLElement;
+    /** Which way the trend reads. Reflected so the stylesheet can colour it. */
+    trend: PfMetricTrend;
+    /** An icon name from the same registry as `pf-icon`. */
+    icon?: string;
+    /**
+     * Which of the optional slots have anything in them.
+     *
+     * Asked in JS because each of these three carries layout — a row, a pill —
+     * that its content cannot, and a wrapper around a slot cannot be collapsed
+     * from CSS: `:not(:has(*))` never matches, since the `<slot>` is itself a
+     * child. The description needs no box, so it is styled through `::slotted()`
+     * and collapses on its own.
+     */
+    hasIcon: boolean;
+    hasAction: boolean;
+    hasTrend: boolean;
+    /** Read from the light DOM, so first paint is right without `slotchange`. */
+    componentWillLoad(): void;
+    private read;
+    render(): any;
+}

package/dist/types/components/pf-metric-grid/pf-metric-grid.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A responsive grid of `pf-metric-card` children.
+ *
+ * Nothing but layout — the cards are independent, so there is no state to
+ * push down and no group behaviour to own. It exists because the column
+ * arithmetic (`auto-fit`, `minmax(220px, 1fr)`) is a decision rather than
+ * something a consumer should have to repeat.
+ *
+ * @slot - the `pf-metric-card` children.
+ */
+export declare class PfMetricGrid {
+    render(): any;
+}

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

@@ -0,0 +1,84 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type PfModalSize = 'sm' | 'md' | 'lg';
+/**
+ * A modal dialog.
+ *
+ * A native `<dialog>` opened with `showModal()`, which from inside a shadow
+ * root gives the focus trap, Escape and the backdrop for nothing — all
+ * measured: focus moves inside on open and cannot be taken by a light-DOM
+ * button, and a real Escape fires `cancel` then `close`. So `trapFocus` from
+ * core is not needed here, unlike in the React component.
+ *
+ * What `showModal()` does *not* do is lock page scroll — measured: a real
+ * wheel still scrolled the page behind an open modal — so this element locks
+ * it, exactly as the React component does.
+ *
+ * @slot - the modal's sections, usually `pf-modal-header`, `pf-modal-body` and
+ * `pf-modal-footer`.
+ * @part dialog - the native dialog, which is also the overlay.
+ * @part panel - the bordered box the content sits in.
+ * @part close - the close button.
+ */
+export declare class PfModal {
+    el: HTMLElement;
+    /** Whether the modal is showing. Reflected so the stylesheet can select on it. */
+    open: boolean;
+    /** Panel width. Reflected so the stylesheet can select on it. */
+    size: PfModalSize;
+    /**
+     * Accessible name. Falls back to the text of whatever is slotted, which is
+     * usually the header — `aria-labelledby` cannot be used, because an IDREF
+     * does not cross a shadow boundary and the header is in the light DOM.
+     */
+    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 modal opens or closes, whoever caused it. */
+    pfOpenChange: EventEmitter<{
+        open: boolean;
+    }>;
+    /**
+     * Releases the page-scroll lock, or null when this modal does not hold it.
+     * The lock is core's and reference-counted, so a slideout opening over a
+     * modal cannot leave the page unscrollable.
+     */
+    private releaseScroll;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /** Opens the modal. */
+    show(): Promise<void>;
+    /** Closes the modal. */
+    hide(): Promise<void>;
+    /**
+     * The one place a state change is announced, whatever caused it: `show()`,
+     * the close button, Escape, an overlay click, or a consumer writing the prop.
+     *
+     * The first version emitted from the `close` handler alone, which fired for
+     * every close and for no open — caught by its own test. 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 dialog();
+    private lockScroll;
+    private unlockScroll;
+    private showDialog;
+    private closeDialog;
+    /** Fires on Escape. Blocking it is how a non-dismissable modal stays put. */
+    private onCancel;
+    /**
+     * Mirrors a close the browser made — Escape, or the dialog being closed by
+     * anything other than this element — back into `open`, which then announces
+     * it through the watch above.
+     */
+    private onClose;
+    /**
+     * A click on the dialog element itself is a click on the overlay: the panel
+     * is an inner box, so anything landing on the dialog missed the content.
+     */
+    private onDialogClick;
+    private accessibleName;
+    render(): any;
+}

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

@@ -0,0 +1,12 @@
+/**
+ * The body 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 PfModalBody {
+    render(): any;
+}

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

@@ -0,0 +1,12 @@
+/**
+ * The footer 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 PfModalFooter {
+    render(): any;
+}

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,58 @@
+/**
+ * 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`.
+ *
+ * @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;
+    /**
+     * 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;
+}