@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/types/components/pf-rich-text-editor/pf-rich-text-editor.d.ts

@@ -0,0 +1,99 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A form-associated rich-text field over a `contenteditable`.
+ *
+ * The toolbar is core's list, so this and the React `RichTextEditor` cannot
+ * offer different buttons, and the value is normalised with core's
+ * `stripOuterParagraph`, so they cannot disagree about what a round trip
+ * looks like.
+ *
+ * Two things differ from the React component, both deliberate:
+ *
+ * - **The toolbar is one tab stop**, with the arrows moving inside it, which
+ *   is the ARIA toolbar pattern and what `pf-toolbar` already does. The React
+ *   version is six tab stops inside a `role="toolbar"`, so tabbing past the
+ *   field walks every button; `todo.md` has that.
+ * - **It is a real form control.** `formAssociated` with `ElementInternals` is
+ *   what puts the value in `FormData`; a `contenteditable` is not a form
+ *   control in any framework, and the React component's value reaches a form
+ *   only if the consumer wires it there themselves.
+ *
+ * `document.execCommand` is deprecated and is still the only way to apply
+ * formatting inside a `contenteditable` without a dependency, which is the
+ * same trade the React component makes.
+ *
+ * @part field - the wrapper around label, toolbar, editor and messages.
+ * @part label - the label element.
+ * @part toolbar - the formatting toolbar.
+ * @part tool - one toolbar button.
+ * @part editor - the editable area.
+ * @part count - the character counter.
+ * @part description - the hint text.
+ * @part error - the error message.
+ */
+export declare class PfRichTextEditor {
+    internals: ElementInternals;
+    el: HTMLElement;
+    /**
+     * Submitted under this name.
+     *
+     * Reflected, because a form-associated custom element takes its submission
+     * name from the `name` content attribute rather than from this property.
+     */
+    name?: string;
+    /** The field's value, as HTML. */
+    value: string;
+    label?: string;
+    description?: string;
+    /** Error message from the consumer. Its presence marks the control invalid. */
+    error?: string;
+    placeholder: string;
+    /** The editable area's smallest height, in pixels. */
+    minHeight: number;
+    /** The most characters of text the field will hold. */
+    characterMax?: number;
+    required: boolean;
+    disabled: boolean;
+    /** Fires when the value changes, however it changed. */
+    pfChange: EventEmitter<{
+        value: string;
+    }>;
+    /** The text length, which the counter shows. */
+    characterCount: number;
+    /** The value a reset restores, captured before `value` can be replaced. */
+    private initialValue;
+    /** The last value inside the character limit, which an overrun reverts to. */
+    private lastWithinLimit;
+    private editor?;
+    private toolbar?;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    handleValueChange(): void;
+    syncFormState(): void;
+    checkValidity(): Promise<boolean>;
+    reportValidity(): Promise<boolean>;
+    getValidationMessage(): Promise<string>;
+    /** Applies one of the toolbar's commands, as pressing its button does. */
+    format(command: string): Promise<void>;
+    /**
+     * A reset restores the value the control started with, not an empty string —
+     * the rule a native `<input value="initial">` follows.
+     */
+    formResetCallback(): void;
+    /**
+     * The editable area's content is written imperatively, never rendered.
+     *
+     * A `contenteditable` that a vdom also owns is a fight: the person types,
+     * the DOM changes under the renderer, and the next render puts the old
+     * content back with the caret at the start. So the element renders an empty
+     * box once and sets `innerHTML` only when the value it holds and the value
+     * in the box actually differ.
+     */
+    private writeValueIntoEditor;
+    private onInput;
+    private runCommand;
+    /** The toolbar is one tab stop, with the arrows moving inside it. */
+    private onToolbarKeyDown;
+    private onToolbarFocusIn;
+    render(): any;
+}

package/dist/types/components/pf-scroll-area/pf-scroll-area.d.ts

@@ -0,0 +1,28 @@
+export type PfScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';
+/**
+ * A scrollable region with a styled, non-overlaying scrollbar.
+ *
+ * @slot - the content to scroll.
+ */
+export declare class PfScrollArea {
+    el: HTMLElement;
+    /** Which axis scrolls. Reflected so the stylesheet can select on it. */
+    orientation: PfScrollAreaOrientation;
+    /**
+     * Make the region keyboard-focusable so it can be scrolled with the arrow
+     * keys (WCAG 2.1.1). Set false when a focusable child already provides
+     * keyboard access.
+     */
+    focusable: boolean;
+    /**
+     * The host scrolls, so the host is what has to be focusable — there is no
+     * inner element to put the tabindex on, which is why this is set here rather
+     * than rendered.
+     *
+     * A consumer's own `tabindex` wins: read before the first render and never
+     * overwritten, so `tabindex="-1"` is respected instead of being silently
+     * reset to 0.
+     */
+    componentWillLoad(): void;
+    render(): any;
+}

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

@@ -0,0 +1,30 @@
+import type { PfSectionHeaderAlign } from '../pf-section-header/pf-section-header';
+/**
+ * The foot of a section: an optional heading and line of text, and the
+ * controls that close it off.
+ *
+ * The same shape as `pf-section-header` with the rule on the other edge —
+ * and, unlike the header, the heading is optional here, so its box is one of
+ * the ones that can be empty.
+ *
+ * @slot - the heading.
+ * @slot description - a line below the heading.
+ * @slot actions - controls, which sit opposite the heading on a wide screen.
+ * @part content - the box holding the heading and the description.
+ * @part heading - the heading's box.
+ * @part actions - the box holding the actions slot.
+ */
+export declare class PfSectionFooter {
+    el: HTMLElement;
+    /** Draw a rule above the footer. Defaults to true, as the React one does. */
+    divider: boolean;
+    /** How the heading and the actions share the row. Reflected. */
+    align: PfSectionHeaderAlign;
+    /** Which of the boxes that carry layout have anything in them. */
+    hasHeading: 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-section-header/pf-section-header.d.ts

@@ -0,0 +1,35 @@
+export type PfSectionHeaderAlign = 'start' | 'between' | 'end';
+/**
+ * The heading of a section, with room for an eyebrow, a line of explanation,
+ * some metadata and a control or two.
+ *
+ * Every optional box stays in the tree and is hidden when empty rather than
+ * being left out, because a slot that is not rendered never fires
+ * `slotchange` — content added later would stay invisible for good. The
+ * eyebrow and the description need no box of their own, so they are styled
+ * through `::slotted()` and collapse on their own.
+ *
+ * @slot eyebrow - small text above the heading.
+ * @slot - the heading.
+ * @slot description - a line below the heading.
+ * @slot metadata - small facts below the description.
+ * @slot actions - controls, which sit opposite the heading on a wide screen.
+ * @part content - the box holding everything but the actions.
+ * @part heading - the heading's box.
+ * @part metadata - the box holding the metadata slot.
+ * @part actions - the box holding the actions slot.
+ */
+export declare class PfSectionHeader {
+    el: HTMLElement;
+    /** Draw a rule below the header. Reflected for the stylesheet. */
+    divider: boolean;
+    /** How the heading and the actions share the row. Reflected. */
+    align: PfSectionHeaderAlign;
+    /** Which of the boxes that carry layout have anything in them. */
+    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-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,74 @@
+/**
+ * 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 own slot changed, so the items below it have moved.
+     *
+     * `slotchange` is not composed, so this is the only way the navigation
+     * hears about an item appended inside a section. The event comes from a
+     * slotted child in the navigation's own tree, so `event.target` is the
+     * section 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 marked one current through its
+     * *property* — which leaves no attribute and fires no `slotchange`.
+     */
+    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,65 @@
+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 {
+    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,61 @@
+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 {
+    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;
+}