@pitchfork-ui/elements 0.0.0-stage → 0.2.1

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

@@ -0,0 +1,55 @@
+import { type HeatmapDatumLike } from '@pitchfork-ui/core';
+/**
+ * A calendar heatmap: one cell per day, darker where the value is higher.
+ *
+ * All of the arithmetic is core's, and the date stepping goes through
+ * `date.ts`, which pins every date to midday — a day step from midnight
+ * across a daylight-saving boundary loses or repeats a day, which is
+ * invisible under UTC and is why both test projects now run in a timezone
+ * that has daylight saving.
+ *
+ * @slot empty - what to show when there is nothing to draw.
+ * @part empty - the empty state's box.
+ * @part weekdays - the column of weekday names.
+ * @part months - the row of month names.
+ * @part grid - the cells.
+ * @part cell - one day.
+ */
+export declare class PfHeatmap {
+    /**
+     * One entry per day with a value, as `{ date: 'YYYY-MM-DD', value }`.
+     *
+     * An array for a framework consumer, or JSON for plain HTML, because
+     * Stencil coerces an attribute only for the primitive types it recognises
+     * and would otherwise hand this the string verbatim.
+     */
+    data: HeatmapDatumLike[] | string;
+    /** First day to draw. Defaults to the earliest in the data. */
+    startDate?: string;
+    /** Last day to draw. Defaults to the latest in the data. */
+    endDate?: string;
+    /** Colour buckets, counting the empty one. */
+    levels: number;
+    /** 0 = Sunday, 1 = Monday. Read through a getter, which coerces. */
+    weekStartsOn: 0 | 1;
+    cellSize: number;
+    cellGap: number;
+    showWeekdayLabels: boolean;
+    showMonthLabels: boolean;
+    /** The chart's accessible name. One is generated when it has none. */
+    label?: string;
+    /** The entries, however they arrived. */
+    private get entries();
+    /**
+     * `0 | 1`, coerced.
+     *
+     * Written out as `0 | 1` rather than as an imported alias, which is the
+     * difference that decides whether Stencil coerces the attribute: measured
+     * side by side, this arrives as the **number** `1` while
+     * `pf-time-picker`'s imported `HourCycle` arrives as the string `"12"`.
+     * The getter stays anyway — it costs nothing and covers a consumer who
+     * sets the property to a string.
+     */
+    private get weekStart();
+    render(): any;
+}

package/dist/types/components/pf-icon/bundled-icons.d.ts

@@ -0,0 +1,3 @@
+export declare const registerBundledIcons: () => void;
+/** The names this package bundles, for the spec that checks them against core. */
+export declare const getBundledIconNames: () => string[];

package/dist/types/components/pf-icon/custom-icons.d.ts

@@ -0,0 +1,3 @@
+import { type VNode } from '../../stencil-public-runtime';
+/** The glyph for a name, as a VNode, or undefined if it is not a custom one. */
+export declare const renderCustomIcon: (name: string) => VNode | undefined;

package/dist/types/components/pf-icon/icon-names.d.ts

@@ -0,0 +1,6 @@
+/** Every name `<pf-icon>` can draw without anything being registered first. */
+export declare const getAvailableIconNames: () => string[];
+/** Just the custom glyphs, the ones with no Font Awesome equivalent. */
+export declare const getCustomIconNames: () => string[];
+/** The Font Awesome names this package bundles, for the spec that checks them. */
+export declare const bundledIconNames: () => string[];

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

@@ -0,0 +1,22 @@
+/**
+ * One glyph from the icon registry.
+ *
+ * The registry is core's, not this element's, and that is deliberate: a
+ * consumer calling `registerIcons()` has to get the icon in the React
+ * components *and* here, and a registry per layer would silently give them
+ * one or the other. A name the registry does not hold renders nothing and
+ * warns once.
+ *
+ * @part svg - the rendered glyph.
+ */
+export declare class PfIcon {
+    /** A registered Font Awesome name, one of its aliases, or a custom glyph. */
+    name: string;
+    /**
+     * Accessible name. Without one the icon is decorative and hidden from
+     * assistive technology, which is the right default beside a text label.
+     */
+    label?: string;
+    render(): any;
+    private renderGlyph;
+}

package/dist/types/components/pf-inline-cta/pf-inline-cta.d.ts

@@ -0,0 +1,69 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type PfInlineCtaTone = 'default' | 'info' | 'success' | 'warning' | 'danger';
+/**
+ * A prompt in the flow of a page: an icon, a line or two, something to do, and
+ * optionally a way to send it away.
+ *
+ * Dismissal waits on `Animation.finished` rather than a timeout. The React
+ * `useExitAnimation` guesses 220ms and calls back then, which is wrong twice
+ * over: it fires too early or too late if the stylesheet's duration changes,
+ * and it fires at all when nothing animated. Reading `getAnimations()` after a
+ * frame answers both — the same arrangement `pf-notification.dismiss()` uses,
+ * and for the same measured reason: an `animationend` listener never fires
+ * when no animation started, which is the ordinary case under
+ * `prefers-reduced-motion` or with the stylesheet unloaded.
+ *
+ * @slot - the heading.
+ * @slot description - a line below the heading.
+ * @slot action - what to do about it, usually a button.
+ * @slot icon - an icon, in place of the `icon` name.
+ * @part icon - the icon's box.
+ * @part heading - the heading's box.
+ * @part content - the box holding the heading and the description.
+ * @part action - the box holding the action slot.
+ * @part dismiss - the dismiss button, when `dismissible` is set.
+ */
+export declare class PfInlineCta {
+    el: HTMLElement;
+    /** Colour treatment. Reflected so the stylesheet can select on it. */
+    tone: PfInlineCtaTone;
+    /** An icon name from the same registry as `pf-icon`. */
+    icon: string;
+    /** Offer a dismiss button. Reflected: it changes the padding. */
+    dismissible: boolean;
+    /** The dismiss button's accessible name. */
+    dismissLabel: string;
+    /** Fires once the prompt has finished leaving. */
+    pfDismiss: EventEmitter<void>;
+    /** Whether the exit animation is running. Reflected for the stylesheet. */
+    exiting: boolean;
+    /** Whether anything is slotted into the boxes that carry layout. */
+    hasIcon: boolean;
+    hasAction: boolean;
+    /** Read from the light DOM, so first paint is right without `slotchange`. */
+    componentWillLoad(): void;
+    private read;
+    /**
+     * Plays the exit animation and resolves once it has finished, then reports.
+     *
+     * `getAnimations()` read after a frame, so the class the stylesheet animates
+     * has landed; an empty list resolves at once, which is what makes this
+     * correct with no stylesheet, under `prefers-reduced-motion`, and in both
+     * test projects.
+     */
+    dismiss(): Promise<void>;
+    /**
+     * Waits for the exit animation, or returns straight away when there is not
+     * one.
+     *
+     * The `typeof` guard is for the mock DOM, which has no `getAnimations` at
+     * all — one more of its gaps, alongside the missing `toggleAttribute`. It
+     * surfaced here rather than vanishing because a `TypeError` inside an
+     * `@Method` rejects the promise it returned, where Stencil's `safeCall`
+     * swallows one thrown from a lifecycle method.
+     *
+     * A cancelled animation rejects, which is still "done leaving".
+     */
+    private waitForExit;
+    render(): any;
+}

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

@@ -0,0 +1,80 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type PfInputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
+/**
+ * A form-associated text input.
+ *
+ * `formAssociated` plus `ElementInternals` is what makes this participate in a
+ * real `<form>`: the value reaches `FormData`, constraint validation works, and
+ * Angular's generated value accessor has something to bind to. A plain
+ * `<input>` inside a shadow root does none of that.
+ *
+ * @part field - the wrapper around label, control and messages.
+ * @part label - the label element.
+ * @part input - the native input.
+ * @part description - the hint text below the control.
+ * @part error - the error message below the control.
+ */
+export declare class PfInput {
+    el: HTMLElement;
+    internals: ElementInternals;
+    /**
+     * Submitted under this name.
+     *
+     * Reflected, because a form-associated custom element takes its submission
+     * name from the `name` *content attribute* -- not from this property. A
+     * framework wrapper that sets properties rather than attributes (the
+     * generated React bindings do) would otherwise leave the control nameless
+     * and absent from the submission, with every other sign of working.
+     */
+    name?: string;
+    /** The control's value. */
+    value: string;
+    type: PfInputType;
+    /** Visible label. Rendered in the same root as the input, so `for` works. */
+    label?: string;
+    /** Hint text below the control. */
+    description?: string;
+    /** Error message. Its presence is what marks the control invalid. */
+    error?: string;
+    placeholder?: string;
+    required: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    /** Fires on every keystroke, like the native `input` event. */
+    pfInput: EventEmitter<{
+        value: string;
+    }>;
+    /** Fires when the value is committed, like the native `change` event. */
+    pfChange: EventEmitter<{
+        value: string;
+    }>;
+    /**
+     * The value the control had when it was created, which is what a form reset
+     * restores. Captured here because `value` has been overwritten by then.
+     */
+    private initialValue;
+    componentWillLoad(): void;
+    syncFormState(): void;
+    /**
+     * Whether the control currently satisfies its constraints.
+     *
+     * A form-associated custom element does not inherit `checkValidity` from
+     * anywhere -- the spec puts it on ElementInternals, so the element has to
+     * forward it or consumers cannot ask.
+     */
+    checkValidity(): Promise<boolean>;
+    /** As `checkValidity`, but also shows the browser's validation message. */
+    reportValidity(): Promise<boolean>;
+    /** The message explaining why the control is invalid, or an empty string. */
+    getValidationMessage(): Promise<string>;
+    /**
+     * A reset restores the value the control started with, not an empty string —
+     * verified against a native `<input value="initial">`, which comes back to
+     * "initial" rather than to "". Clearing it was a real defect: a
+     * `<pf-input value="…">` in a form lost its value on any reset.
+     */
+    formResetCallback(): void;
+    private onInput;
+    private onChange;
+    render(): any;
+}

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

@@ -0,0 +1,18 @@
+export type PfKbdSize = 'sm' | 'md';
+/**
+ * A keyboard key or a combination of them, as `<kbd>` elements.
+ *
+ * `keys` renders one cap per entry with separators between; a single key can
+ * be slotted instead.
+ *
+ * @slot - a single key, when `keys` is not given.
+ * @part kbd - the native kbd element.
+ */
+export declare class PfKbd {
+    /** A key combination rendered as one cap, e.g. `["⌘", "K"]`. */
+    keys?: string[];
+    size: PfKbdSize;
+    /** Separator between keys in a combination. Defaults to `+`. */
+    separator: string;
+    render(): any;
+}

package/dist/types/components/pf-line-chart/pf-line-chart.d.ts

@@ -0,0 +1,68 @@
+/** One row of a chart's data: a label and a number per series. */
+export type PfChartRow = {
+    label: string;
+} & Record<string, string | number>;
+/**
+ * A line or area chart over `pf-chart-series` children.
+ *
+ * The split follows what the data is: the rows are bulk numbers and live in a
+ * property, while the series are the part with names and colours and live in
+ * the light DOM, where a consumer can loop over them and where the legend can
+ * reach their labels.
+ *
+ * Every scale and path is core's, so this and the React `LineChart` draw the
+ * same chart — the axis labels and the geometry have to come from the same
+ * tick scale, or the gridlines say one thing and the line says another.
+ *
+ * @slot - the `pf-chart-series` children.
+ * @slot empty - what to show when there is nothing to draw.
+ * @part svg - the drawing.
+ * @part grid - one gridline.
+ * @part tick - one axis label.
+ * @part line - one series' line.
+ * @part area - one series' fill, on the area variant.
+ * @part dot - one data point.
+ * @part legend - the list the series are slotted into.
+ * @part empty - the empty state's box.
+ */
+export declare class PfLineChart {
+    el: HTMLElement;
+    /**
+     * The rows to plot.
+     *
+     * An array for a framework consumer, or JSON for plain HTML, because
+     * Stencil coerces an attribute only for the primitive types it recognises.
+     */
+    data: PfChartRow[] | string;
+    /** Fill under each line. Reflected. */
+    area: boolean;
+    /** Curve the lines through their points rather than joining them straight. */
+    curved: boolean;
+    showLegend: boolean;
+    /** Printed down the y axis, and used as the chart's name when it has none. */
+    yAxisLabel?: string;
+    /** The chart's accessible name. */
+    label?: string;
+    /** The series, read from the light DOM. */
+    series: {
+        key: string;
+        color: string;
+        dashed: boolean;
+    }[];
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    /** Re-reads the series, for a consumer who changed one through a property. */
+    refresh(): Promise<void>;
+    /**
+     * Direct children only: a nested chart owns its own series.
+     *
+     * Named `seriesElements`, not `children`: a component class's members land
+     * on the custom element itself, so a getter called `children` shadows
+     * `Element.children` and anything that walks it recurses for ever.
+     */
+    private get seriesElements();
+    private get rows();
+    sync(): void;
+    render(): any;
+}

package/dist/types/components/pf-loading-dots/pf-loading-dots.d.ts

@@ -0,0 +1,14 @@
+export type PfLoadingDotsSize = 'sm' | 'md' | 'lg';
+/**
+ * Three pulsing dots, for an indeterminate wait in a tight space.
+ *
+ * @part dot - each of the three dots.
+ * @part label - the visually hidden text the live region announces.
+ */
+export declare class PfLoadingDots {
+    /** Dot size. Reflected so the stylesheet can select on it. */
+    size: PfLoadingDotsSize;
+    /** Accessible name, announced by the live region. */
+    label: string;
+    render(): any;
+}

package/dist/types/components/pf-loading-skeleton/pf-loading-skeleton.d.ts

@@ -0,0 +1,24 @@
+/**
+ * A shimmering placeholder for content that has not arrived.
+ *
+ * @part label - the visually hidden text the live region announces.
+ */
+export declare class PfLoadingSkeleton {
+    /** Width, as a CSS length. A bare number is read as pixels. */
+    width: number | string;
+    /** Height, as a CSS length. A bare number is read as pixels. */
+    height: number | string;
+    /** Use a pill radius instead of the default. Reflected for the stylesheet. */
+    rounded: boolean;
+    /** Accessible name, announced by the live region. */
+    label: string;
+    /**
+     * The React component branches on `typeof width === 'number'`. An attribute
+     * is always a string, so `width="120"` would arrive as `"120"` and be used
+     * as an invalid bare length. Treating a numeric string as pixels keeps
+     * `width="120"` and `width={120}` meaning the same thing, while `width="50%"`
+     * and `width="4rem"` pass through untouched.
+     */
+    private static toLength;
+    render(): any;
+}

package/dist/types/components/pf-loading-spinner/pf-loading-spinner.d.ts

@@ -0,0 +1,12 @@
+/**
+ * An indeterminate spinner.
+ *
+ * @part label - the visually hidden text the live region announces.
+ */
+export declare class PfLoadingSpinner {
+    /** Diameter in pixels. */
+    size: number;
+    /** Accessible name, announced by the live region. */
+    label: string;
+    render(): any;
+}

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

@@ -0,0 +1,43 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * One action inside a `pf-dropdown` or a `pf-context-menu`.
+ *
+ * Shared by both, because the React library's `DropdownItem` and
+ * `ContextMenuItem` are the same shape and the two menus render them
+ * identically — one element rather than two that would drift.
+ *
+ * It only reports that it was chosen. The menu owns focus, closing and the
+ * keyboard pattern, exactly as `pf-radio-group` owns selection for its radios.
+ *
+ * @slot - the item's label.
+ * @slot icon - a leading icon.
+ * @slot shortcut - a trailing keyboard hint.
+ * @part label - the label's box.
+ */
+export declare class PfMenuItem {
+    /**
+     * Identifies the item in the menu's select event.
+     *
+     * Reflected because the generated bindings set props as properties, so
+     * without it a consumer selecting `pf-menu-item[value="..."]` in a React or
+     * Angular app finds nothing. The menus themselves read the property, so this
+     * was not a live defect here -- it is the same trap that was one in
+     * `pf-command-item`.
+     */
+    value: string;
+    /** Reflected so the stylesheet and the menu's item query can select on it. */
+    disabled: boolean;
+    /** Style as a destructive action. Reflected for the stylesheet. */
+    destructive: boolean;
+    /** Asks the menu to act on this item. The menu decides and then closes. */
+    pfMenuSelect: EventEmitter<{
+        value: string;
+    }>;
+    handleClick(event: MouseEvent): void;
+    /**
+     * Enter and Space activate, as they do on a menuitem. The arrows are the
+     * menu's: only it knows the other items.
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    render(): any;
+}

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

@@ -0,0 +1,9 @@
+/**
+ * A rule between groups of menu items.
+ *
+ * Unlike `pf-toolbar-separator` this needs no orientation: a menu is always a
+ * column, so the rule is always horizontal.
+ */
+export declare class PfMenuSeparator {
+    render(): any;
+}

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,137 @@
+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 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.
+ *
+ * The one part of `showModal()` that cannot be relied on is where it puts
+ * focus, and the gap is exactly the case every framework consumer is in. See
+ * `showDialog` below.
+ *
+ * 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;
+    /**
+     * Opens the dialog, and makes sure focus actually went into it.
+     *
+     * `showModal()` focuses the dialog or its first focusable descendant — but
+     * **not** when light-DOM children were appended in the same task as the
+     * open. Measured in Chromium with no framework involved: append the three
+     * `pf-modal-*` sections to a long-mounted `pf-modal` and set `open` in the
+     * same task, and the dialog opens with `document.activeElement` still on
+     * `<body>` and `:focus-within` false. Leave one frame between the two and
+     * focus lands inside; mount the element with its children and `open`
+     * already set and focus lands inside. So it is the append racing the open,
+     * and the flattened tree `showModal()`'s focusing steps read.
+     *
+     * That race is not an edge case: React, Angular and Vue all commit a
+     * modal's content and its `open` in one go, so every framework consumer got
+     * an open modal with focus outside it and nothing to say so — the page is
+     * still inert, so the only symptom is that a reader is not taken to the
+     * dialog and the first Tab is needed. Porting `apps/demo` is what found it.
+     *
+     * What the trace shows, with element identity and a `MutationObserver` on
+     * the shadow root: `showModal()` **does** focus, onto `div[part=panel]`,
+     * and one frame later a `focusout` with `relatedTarget: null` drops it,
+     * with nothing removed from the shadow root. That is Chromium's focus
+     * fixup running once the appended children are assigned to the slot and
+     * finding the panel is no longer a valid target -- so it is not a render
+     * that loses focus, and re-asserting after a render does not catch it
+     * (measured: `componentDidRender` alone changes nothing here).
+     *
+     * So the dialog watches for exactly that: a `focusout` that goes nowhere
+     * while the modal is open puts focus back. `requestAnimationFrame` after
+     * `showModal()` covers the case where focus never arrived at all, and
+     * `componentDidRender` covers a render that discards the focused node. All
+     * three are the same guarded call, and the `:focus-within` guard makes it a
+     * no-op whenever focus is already inside -- so none of them moves focus
+     * that the platform or a consumer placed.
+     */
+    private showDialog;
+    componentDidRender(): void;
+    /**
+     * Focus left the dialog for nothing while it is open, which the platform
+     * does when its focus fixup runs after the slotted content changes.
+     *
+     * `relatedTarget` is the test: a Tab or a click inside names where focus
+     * went, and a modal dialog means it cannot have gone outside. The window
+     * losing focus also reports null, hence the `document.hasFocus()` guard --
+     * without it, switching tabs would pull focus back on return.
+     */
+    private onFocusOut;
+    /** Focus inside the open dialog, unless it is already there. */
+    private ensureFocusInside;
+    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;
+}