@pitchfork-ui/elements 0.0.0-stage → 0.1.0

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 {};

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

@@ -0,0 +1,37 @@
+export type PfToolbarOrientation = 'horizontal' | 'vertical';
+/**
+ * A group of controls that is one tab stop from outside and navigated
+ * internally with the arrow keys.
+ *
+ * Items are matched in the light DOM, so a native `button`, `a[href]` or form
+ * control works with no ceremony. A custom element is not a native control and
+ * has to opt in with `data-toolbar-item` — `<pf-button data-toolbar-item>`.
+ * Focusing it still reaches the real button inside, because `pf-button`
+ * delegates focus.
+ *
+ * @slot - the toolbar's controls, and any `pf-toolbar-separator` between them.
+ */
+export declare class PfToolbar {
+    el: HTMLElement;
+    /** Layout and arrow-key axis. Reflected so the stylesheet can select on it. */
+    orientation: PfToolbarOrientation;
+    componentDidLoad(): void;
+    /**
+     * A separator cannot see which way its toolbar runs: `:host-context()` is the
+     * only selector that would reach out of its shadow root, and it is not
+     * supported in Firefox or Safari. So the toolbar pushes its own orientation
+     * down instead, which also means a consumer never has to set it twice.
+     */
+    sync(): void;
+    /**
+     * Keeps the tab stop on whatever the user actually focused, however they got
+     * there — a click, a Tab from outside, or a script.
+     *
+     * `focusin` rather than `focus` because it bubbles, and it crosses a shadow
+     * boundary with its target retargeted to the host, which is exactly the
+     * element in the item list.
+     */
+    handleFocusIn(event: FocusEvent): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    render(): any;
+}

package/dist/types/components/pf-toolbar-separator/pf-toolbar-separator.d.ts

@@ -0,0 +1,14 @@
+export type PfToolbarSeparatorOrientation = 'horizontal' | 'vertical';
+/**
+ * A rule between groups of toolbar controls.
+ *
+ * `orientation` describes the toolbar it sits in, not the rule's own shape: a
+ * horizontal toolbar gets a vertical hairline. `pf-toolbar` sets it on every
+ * separator it contains, so a consumer does not have to — and cannot leave one
+ * pointing the wrong way.
+ */
+export declare class PfToolbarSeparator {
+    /** The axis of the toolbar this sits in. Reflected for the stylesheet. */
+    orientation: PfToolbarSeparatorOrientation;
+    render(): any;
+}

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

@@ -0,0 +1,74 @@
+import { type Side } from '@pitchfork-ui/core';
+/**
+ * A tooltip anchored to whatever is slotted into it.
+ *
+ * The panel is a `popover`, which is how it escapes an ancestor's `overflow`
+ * and stacking context — the thing `createPortal` does for the React
+ * component, and the only equivalent available from inside a shadow root.
+ * Verified: a popover opened from a shadow root inside an `overflow: hidden`
+ * container beats a `z-index: 999` sibling, where a plain absolute element in
+ * the same place loses.
+ *
+ * @slot - the trigger.
+ * @slot content - the tooltip's content. Its text also becomes the trigger's
+ * accessible description.
+ * @part tooltip - the floating panel.
+ */
+export declare class PfTooltip {
+    el: HTMLElement;
+    /** Preferred side. Reflected so the stylesheet can place the arrow. */
+    placement: Side;
+    /** Milliseconds to wait before showing on hover or focus. */
+    delay: number;
+    /** Force the tooltip open or closed, rather than letting it react. */
+    open?: boolean;
+    /** Never show. Reflected so the stylesheet can select on it. */
+    disabled: boolean;
+    /** The side actually in use, which the arrow follows. */
+    resolvedSide: Side;
+    private showTimer?;
+    private stopObserving?;
+    private contentObserver?;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /**
+     * `slotchange` fires when the *assignment* changes, not when text inside an
+     * already-assigned node is edited — so a consumer setting
+     * `span.textContent = 'Changed'` would update the visible tooltip and leave
+     * the trigger's accessible description stale. That is a silent
+     * accessibility bug rather than a cosmetic one, which is what earns the
+     * observer.
+     */
+    private watchContent;
+    /**
+     * The trigger's accessible description, copied as text.
+     *
+     * It cannot be an IDREF: `aria-describedby` does not cross a shadow
+     * boundary, and `ariaDescribedByElements` silently reads back empty when
+     * handed an element from a root the trigger does not own — both measured.
+     * `aria-description` is a plain string, so it crosses nothing, and the
+     * accessibility tree reports it identically to a same-root IDREF.
+     */
+    private syncDescription;
+    syncOpen(next?: boolean): void;
+    private get panel();
+    private clearTimer;
+    private show;
+    private hide;
+    /** Controlled mode means the consumer decides; hover and focus do nothing. */
+    private get isControlled();
+    private scheduleShow;
+    private cancel;
+    handlePointerEnter(): void;
+    handlePointerLeave(): void;
+    /** `focusin`/`focusout` rather than `focus`/`blur`, so they bubble. */
+    handleFocusIn(): void;
+    handleFocusOut(): void;
+    /**
+     * Escape dismisses even in controlled mode. A tooltip covering the content
+     * you are trying to read is not something to need a prop for, and WAI-ARIA
+     * requires it of any tooltip.
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    render(): any;
+}

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

@@ -0,0 +1,75 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * One item in a `pf-tree-view`, with its own items nested inside it.
+ *
+ * The host is the `treeitem`, and it is never focused: the tree keeps the
+ * focus and names the active item with `aria-activedescendant`, because a
+ * nested host cannot take a roving tabindex at all — measured, and explained
+ * on `pf-tree-view`. So the row inside is a plain box rather than a button,
+ * and the twisty is the only focusable thing in here, kept out of the tab
+ * order.
+ *
+ * `level`, `selected`, `expanded` and `hasChildren` are the group's to set:
+ * only it can see the whole tree.
+ *
+ * @slot label - the item's label.
+ * @slot badge - small trailing content, a count or a status.
+ * @slot - the nested `pf-tree-item` children.
+ * @part row - the item's own row, without its children.
+ * @part toggle - the twisty, on an item that has children.
+ * @part label - the label's box.
+ * @part children - the box holding the nested items.
+ */
+export declare class PfTreeItem {
+    el: HTMLElement;
+    /**
+     * Identifies the item in the tree's selection and open set.
+     *
+     * Reflected because the generated bindings set props as properties, so
+     * without it a consumer selecting `pf-tree-item[value="..."]` finds
+     * nothing. The tree reads the property.
+     */
+    value: string;
+    /** Reflected; the stylesheet and the tree's own filtering both read it. */
+    disabled: boolean;
+    /** An icon name from the same registry as `pf-icon`. */
+    icon?: string;
+    /** Set by the tree: how deep this item sits, counting from 1. */
+    level: number;
+    /** Set by the tree. Reflected, so the stylesheet can mark the item. */
+    selected: boolean;
+    /** Set by the tree: whether this branch is open. Reflected. */
+    expanded: boolean;
+    /** Set by the tree: whether there is anything to open. Reflected. */
+    hasChildren: boolean;
+    /**
+     * Set by the tree: the item the keyboard is on, which is not always the
+     * selected one. Reflected, because the ring is drawn from it.
+     */
+    active: boolean;
+    /** Asks the tree to select this item. The tree decides. */
+    pfTreeSelect: EventEmitter<{
+        value: string;
+    }>;
+    /** Asks the tree to open or close this branch. */
+    pfTreeToggle: EventEmitter<{
+        value: string;
+    }>;
+    /**
+     * Tells the tree that the items inside this one have changed.
+     *
+     * `slotchange` does not cross a shadow boundary — it is not composed — so a
+     * tree cannot hear its grandchildren arrive. Without this, an item appended
+     * to a branch is never given a level, an id or a place in the keyboard
+     * order; a browser test adds one.
+     */
+    pfTreeStructure: EventEmitter<void>;
+    /** Whether anything is slotted into the badge, which carries layout. */
+    hasBadge: boolean;
+    /** Read from the light DOM, so first paint is right without `slotchange`. */
+    componentWillLoad(): void;
+    private read;
+    private onRowClick;
+    private onToggleClick;
+    render(): any;
+}

package/dist/types/components/pf-tree-view/pf-tree-view.d.ts

@@ -0,0 +1,94 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A tree over nested `pf-tree-item` children.
+ *
+ * Nesting rather than a `nodes` array, which is what a tree looks like in a
+ * consumer's template anyway — and the labels are nodes, so they could not
+ * cross the HTML boundary.
+ *
+ * The group owns what no single item can see: which one is selected, which
+ * are open, the one tab stop, and the keyboard. Every rule the keyboard
+ * follows is core's `resolveTreeKey`, so this and the React `TreeView` answer
+ * the arrows identically.
+ *
+ * **The tree itself is the tab stop, not the items.** The ARIA tree pattern
+ * allows either a roving tabindex or a managed `aria-activedescendant`, and
+ * here only the second one works: measured in Chromium, a `tabindex="0"` host
+ * slotted into another host's shadow tree is skipped by sequential navigation
+ * entirely when the outer host's tabindex is negative — which is exactly a
+ * nested `pf-tree-item` under a roving tabindex. So the tree takes the focus
+ * and tracks the active item with an IDREF, which resolves because the items
+ * are its own light-DOM descendants.
+ *
+ * The React `TreeView` makes every visible item a tab stop, which is a gap
+ * recorded in `todo.md`.
+ *
+ * @slot - the `pf-tree-item` children.
+ */
+export declare class PfTreeView {
+    el: HTMLElement;
+    /** The selected item's value. */
+    value: string;
+    /** The open branches, as one comma-separated string. */
+    expanded: string;
+    /** The tree's accessible name. */
+    label?: string;
+    /** Fires when the selection changes. */
+    pfChange: EventEmitter<{
+        value: string;
+    }>;
+    /** Fires when a branch opens or closes, with the open set. */
+    pfExpandedChange: EventEmitter<{
+        value: string;
+        values: string[];
+    }>;
+    /**
+     * The item the keyboard is on, which is not always the selected one — the
+     * arrows move it, Enter selects. Starts on the selection, so tabbing in
+     * lands where the reader left off.
+     */
+    activeValue: string;
+    /** Distinguishes the ids this tree generates for its light-DOM items. */
+    private uid;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    handleStateChange(): void;
+    /** Re-reads the tree, for a consumer who changed an item through a property. */
+    refresh(): Promise<void>;
+    /** Opens every branch. */
+    expandAll(): Promise<void>;
+    /** Closes every branch. */
+    collapseAll(): Promise<void>;
+    /** The nested items, as the tree core's rules walk. */
+    private get tree();
+    private get openValues();
+    private get visible();
+    /**
+     * Pushes the tree's state onto the items: how deep each one is, whether it
+     * is selected, open, or the one the keyboard is on — and an id, because the
+     * active item is named by an IDREF from the host.
+     */
+    private sync;
+    /** The active item's id, which is what the host points `aria-activedescendant` at. */
+    private get activeId();
+    private setExpanded;
+    private toggle;
+    private select;
+    /** An item asking to be selected. The group decides. */
+    handleSelect(event: CustomEvent<{
+        value: string;
+    }>): void;
+    /** An item's twisty asking to open or close it. */
+    handleToggle(event: CustomEvent<{
+        value: string;
+    }>): void;
+    /**
+     * Every key rule is core's; this only carries the intent out. A key core
+     * does not claim is left to the browser.
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    /** An item's own slot changed, so the tree below it has moved. */
+    handleStructureChange(event: CustomEvent<void>): void;
+    render(): any;
+}

package/dist/types/components/pf-utility-button/pf-utility-button.d.ts

@@ -0,0 +1,41 @@
+export type PfUtilityButtonVariant = 'neutral' | 'brand' | 'destructive';
+export type PfUtilityButtonSize = 'sm' | 'md';
+/**
+ * A compact button for toolbars and table rows, where the affordance is often
+ * an icon alone.
+ *
+ * @slot - the button's label. Omit it for an icon-only button, and give a
+ * `label` so the button still has an accessible name.
+ * @slot icon - a leading icon, usually `pf-icon`.
+ * @part button - the native button element.
+ */
+export declare class PfUtilityButton {
+    el: HTMLElement;
+    /** Colour treatment. Reflected so the stylesheet can select on it. */
+    variant: PfUtilityButtonVariant;
+    /** Control size. Reflected so the stylesheet can select on it. */
+    size: PfUtilityButtonSize;
+    /** Disable the button. Reflected so the stylesheet can select on it. */
+    disabled: boolean;
+    /** Mirrors the native attribute. */
+    type: 'button' | 'submit' | 'reset';
+    /**
+     * Accessible name. Required for an icon-only button, and also used as the
+     * native tooltip unless `tooltip` says otherwise.
+     */
+    label?: string;
+    /** Native tooltip text. Defaults to `label`. */
+    tooltip?: string;
+    /**
+     * An icon-only button with no name is invisible to a screen reader, and it is
+     * the mistake this component invites.
+     *
+     * Once per element, in `componentDidLoad`. `pf-icon` dedupes its own warning
+     * by icon name, but there is no equivalent key here, and a module-level flag
+     * would make the warning depend on what else happened to render first. Fifty
+     * nameless buttons are fifty real defects, and the React component is noisier
+     * still -- it warns from the render body, so once per render.
+     */
+    componentDidLoad(): void;
+    render(): any;
+}

package/dist/types/components/pf-video-player/pf-video-player.d.ts

@@ -0,0 +1,72 @@
+/** One alternative encoding of the same video. */
+export interface PfVideoSource {
+    src: string;
+    type?: string;
+}
+/** One caption, subtitle or chapter track. */
+export interface PfVideoTrack {
+    src: string;
+    kind: 'captions' | 'chapters' | 'descriptions' | 'metadata' | 'subtitles';
+    srclang: string;
+    label: string;
+    default?: boolean;
+}
+/**
+ * A `<video>` in a framed, fixed-ratio box, with a label, a description and
+ * an error message.
+ *
+ * `sources` and `tracks` are **properties**, not slotted children, and this
+ * is one of the few places where that is forced rather than chosen: a
+ * `<source>` has to be a child of the `<video>` itself, and slotted content
+ * stays in the light DOM — a slotted `<source>` would be a child of this
+ * element, which the video would never look at. They are rendered into the
+ * shadow `<video>` instead.
+ *
+ * The label names the video with an IDREF rather than a `<label for>`:
+ * `for` must point at a *labelable* element and a `<video>` is not one, so
+ * the React `VideoPlayer`'s `htmlFor` was silently doing nothing and the
+ * video had no accessible name at all. Both layers use `aria-labelledby`
+ * now, and here it is a same-root reference, which is the kind that
+ * resolves.
+ *
+ * @slot empty - what to show when there is no video to play.
+ * @part field - the wrapper around label, frame and messages.
+ * @part label - the label.
+ * @part frame - the fixed-ratio box.
+ * @part video - the video element.
+ * @part empty - the empty state's box.
+ * @part description - the hint text.
+ * @part error - the error message.
+ */
+export declare class PfVideoPlayer {
+    el: HTMLElement;
+    /** A single source. Use `sources` for several encodings. */
+    src?: string;
+    /** Several encodings of the same video, best first. */
+    sources: PfVideoSource[];
+    /** Captions and subtitles. A video without them is not finished. */
+    tracks: PfVideoTrack[];
+    /** Drawn above the frame, and what names the video. */
+    label?: string;
+    description?: string;
+    /** Error message. Its presence is what marks the frame invalid. */
+    error?: string;
+    /** Reflected, because the stylesheet selects on it for the box's ratio. */
+    aspectRatio: '16/9' | '4/3' | '1/1';
+    controls: boolean;
+    poster?: string;
+    preload: 'none' | 'metadata' | 'auto';
+    muted: boolean;
+    loop: boolean;
+    autoplay: boolean;
+    private video?;
+    /** Starts playback, which a consumer cannot do through the shadow root. */
+    play(): Promise<void>;
+    /** Pauses it. */
+    pause(): Promise<void>;
+    /** The video element itself, for anything these methods do not cover. */
+    getVideoElement(): Promise<HTMLVideoElement | undefined>;
+    private get sourceList();
+    private get trackList();
+    render(): any;
+}

package/dist/types/components/pf-visually-hidden/pf-visually-hidden.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Hides content visually while keeping it available to screen readers and
+ * other assistive technology. Use for labels, instructions and status text
+ * that are implied visually but need to be announced.
+ *
+ * The React component takes an `as` prop to choose its tag; a custom element's
+ * tag is fixed, so wrap this instead of configuring it — `<h2><pf-visually-
+ * hidden>Results</pf-visually-hidden></h2>` is still a heading named
+ * "Results".
+ *
+ * @slot - the content to hide visually.
+ */
+export declare class PfVisuallyHidden {
+    /**
+     * Reveal the content when it, or a descendant, receives keyboard focus — the
+     * classic "skip link" pattern. Reflected so the stylesheet can select on it.
+     */
+    focusable: boolean;
+    render(): any;
+}