@pitchfork-ui/elements 0.0.0-stage → 0.2.1

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

@@ -0,0 +1,57 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { PfAccordionHeadingLevel } from '../pf-accordion/pf-accordion';
+/**
+ * One section inside a `pf-accordion`.
+ *
+ * It owns its header, its panel and the open/close animation; the group owns
+ * only *which* sections are open, because in `single` mode that depends on
+ * what else is. So this element reports that it was clicked and waits to be
+ * told, exactly as `pf-radio-button` does.
+ *
+ * The header is a real `<button>` in the shadow root, which makes it tabbable
+ * with no help and gives Enter and Space for free. `delegatesFocus` is what
+ * lets the group's arrow keys hand focus to it through the host.
+ *
+ * Both IDREFs here point inside this one shadow root, which is the case where
+ * an IDREF resolves — the header names the panel with `aria-controls` and the
+ * panel names the header back with `aria-labelledby`.
+ *
+ * @slot title - the header's label.
+ * @slot - the section's content.
+ * @part heading - the heading element wrapping the header button.
+ * @part trigger - the header button.
+ * @part title - the label's box inside the header.
+ * @part icon - the chevron.
+ * @part panel - the animating box around the content.
+ * @part content - the region holding the content.
+ */
+export declare class PfAccordionItem {
+    /**
+     * Identifies the section in the group's open set.
+     *
+     * 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. The group reads the
+     * property.
+     */
+    value: string;
+    /** Reflected; the stylesheet and the group's own filtering both read it. */
+    disabled: boolean;
+    /** Set by the group. Reflected, so the stylesheet can turn the chevron. */
+    expanded: boolean;
+    /** Set by the group from its own `headingLevel`. */
+    headingLevel: PfAccordionHeadingLevel;
+    /** Asks the group to open or close this section. The group decides. */
+    pfAccordionToggle: EventEmitter<{
+        value: string;
+    }>;
+    /**
+     * Coerced, because an attribute of a union-literal type arrives as a string:
+     * `heading-level="2"` would otherwise build an `h2` tag out of `"2"` by luck
+     * and compare false to `2` everywhere else. Clamped, so a level outside
+     * h2–h6 cannot produce a tag that is not a heading at all.
+     */
+    private get level();
+    private onClick;
+    render(): any;
+}

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

@@ -0,0 +1,57 @@
+import { type LiveRegionVariant } from '@pitchfork-ui/core';
+import { EventEmitter } from '../../stencil-public-runtime';
+export type PfAlertVariant = LiveRegionVariant;
+/**
+ * An inline alert: an icon, a heading, a body and an optional dismiss button.
+ *
+ * The sibling of `pf-notification`, and deliberately a separate element
+ * rather than a variant of it: an alert belongs in the page's flow and
+ * collapses its own height when dismissed so the content below reflows, while
+ * a notification is one of a stack in a corner and slides out. The two look
+ * alike and behave differently, which is exactly when one element serving
+ * both goes wrong.
+ *
+ * The role comes from core's `liveRegionRole`, so `warning` and `danger`
+ * announce assertively and `info` and `success` wait their turn.
+ *
+ * @slot - the body, used instead of the `description` prop when present.
+ * @slot icon - replaces the icon the variant would choose.
+ * @part alert - 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 PfAlert {
+    el: HTMLElement;
+    /** Reflected, because the stylesheet selects on it for the colours. */
+    variant: PfAlertVariant;
+    heading?: string;
+    /** The body. A slotted body is used instead when there is one. */
+    description?: string;
+    /** Show the dismiss button. Reflected. */
+    dismissible: boolean;
+    /** The dismiss button's accessible name. */
+    dismissLabel: string;
+    /** Fires once the alert has finished leaving. */
+    pfDismiss: EventEmitter<void>;
+    /** Reflected, because that is what the exit animation selects on. */
+    exiting: boolean;
+    /** Whether anything was slotted into the default slot. */
+    hasSlottedBody: boolean;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad(): void;
+    /**
+     * Dismisses the alert, waiting for its exit animation first.
+     *
+     * The wait is core's `animationsFinished`, which asks the element what is
+     * actually running rather than sleeping for a duration someone wrote down:
+     * under `prefers-reduced-motion` the stylesheet sets `animation: none`, no
+     * test project applies `styleUrl` CSS at all, and a consumer may not have
+     * loaded the stylesheet — in all three an `animationend` listener would
+     * wait for ever and a timeout would be a fiction.
+     */
+    dismiss(): Promise<void>;
+    private readBody;
+    render(): any;
+}

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

@@ -0,0 +1,25 @@
+export type PfAvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+export type PfAvatarStatus = 'online' | 'away' | 'busy' | 'offline';
+/**
+ * A person or entity, as a photo or as initials.
+ *
+ * The initials are derived from `name` by core's `avatarInitials`, so this and
+ * the React `Avatar` shorten the same name the same way.
+ *
+ * @slot - overrides the derived initials.
+ * @part image - the photo, when `src` is set.
+ * @part fallback - the initials, when it is not.
+ * @part status - the presence dot, when `status` is set.
+ */
+export declare class PfAvatar {
+    /** Photo URL. Without one the avatar shows initials. */
+    src?: string;
+    /** Alternative text for the photo. */
+    alt?: string;
+    /** The person's name: used for the accessible name and the initials. */
+    name?: string;
+    size: PfAvatarSize;
+    /** Presence indicator. Decorative — convey it in text as well. */
+    status?: PfAvatarStatus;
+    render(): any;
+}

package/dist/types/components/pf-avatar-group/pf-avatar-group.d.ts

@@ -0,0 +1,46 @@
+import type { PfAvatarSize } from '../pf-avatar/pf-avatar';
+/**
+ * A stack of overlapping `pf-avatar` children, with a `+N` chip for the ones
+ * that did not fit.
+ *
+ * Children rather than an array of people, as everywhere else — a consumer
+ * loops in their own template, and each avatar keeps its own `src`, `name` and
+ * `status`.
+ *
+ * The chip is a `pf-avatar` of its own, in the shadow root: it needs an
+ * avatar's shape, size and ring, and reusing the element is how it gets them
+ * without a second copy of all three. Its colours come through the
+ * `--pf-avatar-*` properties the avatar already reads, which inherit through
+ * the shadow boundary.
+ *
+ * @slot - the `pf-avatar` children.
+ * @part overflow - the `+N` chip, when something did not fit.
+ */
+export declare class PfAvatarGroup {
+    el: HTMLElement;
+    /** How many avatars to show before collapsing the rest into the chip. */
+    max: number;
+    /** Applied to every avatar in the group. Reflected, and pushed down. */
+    size: PfAvatarSize;
+    /**
+     * The group's real size, for a group that knows how many people there are
+     * without being handed an avatar for each: five faces and `+35`.
+     */
+    total?: number;
+    /** Overrides the generated name, which counts the people in the group. */
+    label?: string;
+    /** How many did not fit, which is what the chip says. */
+    overflow: number;
+    /** How many the group counts, which is what its name says. */
+    counted: number;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    handleStateChange(): void;
+    /** Re-reads the children, for a consumer who changed one through a property. */
+    refresh(): Promise<void>;
+    /** Direct children only: a nested group owns its own avatars. */
+    private get avatars();
+    private sync;
+    render(): any;
+}

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

@@ -0,0 +1,14 @@
+export type PfBadgeVariant = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
+/**
+ * A short status or count, rendered inline with the text around it.
+ *
+ * The leaf the `::part()` and reflected-attribute conventions were established
+ * on, back when the stakes were low.
+ *
+ * @slot - the badge's content.
+ */
+export declare class PfBadge {
+    /** Colour treatment. Reflected so the stylesheet can select on it. */
+    variant: PfBadgeVariant;
+    render(): any;
+}

package/dist/types/components/pf-badge-group/pf-badge-group.d.ts

@@ -0,0 +1,23 @@
+export type PfBadgeGroupColor = 'gray' | 'brand' | 'error' | 'warning' | 'success';
+export type PfBadgeGroupAppearance = 'pill' | 'modern';
+export type PfBadgeGroupBadgePosition = 'leading' | 'trailing';
+/**
+ * A badge joined to a line of text, sharing one rounded outline — the
+ * "2 new · See what's changed" pattern.
+ *
+ * @part badge - the coloured badge.
+ * @part text - the message beside it.
+ */
+export declare class PfBadgeGroup {
+    /** The badge's text. */
+    label: string;
+    /** The message beside the badge. */
+    message: string;
+    /** Colour treatment. Reflected so the stylesheet can select on it. */
+    color: PfBadgeGroupColor;
+    /** Surface treatment for the message. Reflected for the stylesheet. */
+    appearance: PfBadgeGroupAppearance;
+    /** Which side the badge sits on. Reflected for the stylesheet. */
+    badgePosition: PfBadgeGroupBadgePosition;
+    render(): any;
+}

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

@@ -0,0 +1,39 @@
+import type { PfChartRow } from '../pf-line-chart/pf-line-chart';
+/**
+ * A grouped or stacked bar chart over `pf-chart-series` children.
+ *
+ * The same split as `pf-line-chart`: the rows are bulk numbers in a property,
+ * the series are named and coloured and live in the light DOM so the legend
+ * can reach their labels.
+ *
+ * @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 bar - one bar.
+ * @part legend - the list the series are slotted into.
+ * @part empty - the empty state's box.
+ */
+export declare class PfBarChart {
+    el: HTMLElement;
+    /** The rows to plot. An array, or JSON for plain HTML. */
+    data: PfChartRow[] | string;
+    /** Stack each group's series rather than standing them side by side. */
+    stacked: boolean;
+    showLegend: boolean;
+    yAxisLabel?: string;
+    label?: string;
+    series: {
+        key: string;
+        color: string;
+    }[];
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    refresh(): Promise<void>;
+    /** Direct children only; named to avoid shadowing `Element.children`. */
+    private get seriesElements();
+    private get rows();
+    sync(): void;
+    render(): any;
+}

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

@@ -0,0 +1,40 @@
+/**
+ * One crumb in a `pf-breadcrumbs` trail.
+ *
+ * With an `href` it renders a link; without one it renders a plain span, which
+ * is both what a current page wants and the way to use a framework's own
+ * router — slot an `<a routerLink>` or a `<Link>` in and leave `href` unset.
+ *
+ * `currentPage`, `last` and `separator` are the group's to set: only it can
+ * see the trail. A consumer asks by setting `current`; the group resolves the
+ * trail with core's rule and writes the answer to `currentPage`.
+ *
+ * @slot - the crumb's label.
+ * @part link - the link, or the span standing in for one.
+ * @part separator - the separator after this crumb. Absent on the last.
+ */
+export declare class PfBreadcrumb {
+    /** Where the crumb goes. Reflected; a consumer's stylesheet reads it. */
+    href?: string;
+    /**
+     * Set it to mark this crumb as the current page, rather than letting the
+     * last crumb be it.
+     *
+     * This is the *asking* half, and the group never writes it — `currentPage`
+     * below is the answer. Keeping the two apart is what lets the trail change:
+     * if the group wrote its answer back here, the crumb that happened to be
+     * last would look like a crumb the consumer had marked, and appending
+     * another would leave the mark behind on it.
+     */
+    current: boolean;
+    /**
+     * Set by the group: the resolved current page, which is the one thing that
+     * renders `aria-current="page"`. Exactly one crumb in a trail carries it.
+     */
+    currentPage: boolean;
+    /** Set by the group: no separator is drawn after the last crumb. */
+    last: boolean;
+    /** Set by the group from its own `separator`. */
+    separator: string;
+    render(): any;
+}

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

@@ -0,0 +1,52 @@
+/**
+ * A breadcrumb trail over `pf-breadcrumb` children.
+ *
+ * The group owns the two things a crumb cannot know on its own: which crumb is
+ * the current page, and which one is last — so only the last goes without a
+ * separator after it.
+ *
+ * The separator is a **string**, where the React `separator` is a
+ * `ReactNode`, because it has to appear between every pair: a slot renders its
+ * assigned content once and in one place, so there is no way to repeat
+ * slotted content down the trail. Each crumb draws its own instead, which is
+ * why the group pushes the string down.
+ *
+ * @slot - the `pf-breadcrumb` children.
+ * @part list - the ordered list the crumbs are slotted into.
+ */
+export declare class PfBreadcrumbs {
+    el: HTMLElement;
+    /** The trail's accessible name. */
+    label: string;
+    /** Drawn after every crumb but the last. */
+    separator: string;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    handleSeparatorChange(): void;
+    /**
+     * Re-reads the children, for a consumer who marked a crumb current through
+     * its *property* — which leaves no attribute and fires no `slotchange`.
+     */
+    refresh(): Promise<void>;
+    /** Direct children only: a nested trail owns its own crumbs. */
+    private get crumbs();
+    /**
+     * The property if the crumb has upgraded, the attribute if it has not:
+     * `componentWillLoad` can run before a child parsed from HTML upgrades.
+     */
+    private isCurrent;
+    /**
+     * Core's rule for which crumb is current — the first one marked, or the last
+     * — so the React `Breadcrumbs` marks the same one. One index, which is what
+     * stops a trail claiming two current pages.
+     *
+     * The answer goes to `currentPage`, never to the `current` the consumer
+     * asked with. Writing it back to `current` looked tidier and was wrong:
+     * with nothing marked, the last crumb was given `current`, and appending
+     * another crumb then found that one marked and left the mark behind on it.
+     * A browser test appends a crumb, which is what caught it.
+     */
+    private sync;
+    render(): any;
+}

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

@@ -0,0 +1,38 @@
+export type PfButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive';
+export type PfButtonSize = 'sm' | 'md' | 'lg';
+export type PfButtonType = 'button' | 'submit' | 'reset';
+/**
+ * A button, with the variants, sizes and loading state the React `Button` has.
+ *
+ * The first element in this package, and the one the whole pipeline was proved
+ * on: the PostCSS chain, the generated React bindings and the generated Angular
+ * component all exist because this built end to end before anything else was
+ * attempted. `delegatesFocus` is why focusing the host reaches the real button
+ * inside, which is what lets `pf-toolbar` treat it as an item.
+ *
+ * @slot - the button's label.
+ * @part button - the native button element.
+ * @part spinner - the loading spinner.
+ */
+export declare class PfButton {
+    /** Visual style. Reflected so the stylesheet can select on it. */
+    variant: PfButtonVariant;
+    /** Control size. Reflected so the stylesheet can select on it. */
+    size: PfButtonSize;
+    /** Stretch to the width of the container. */
+    fullWidth: boolean;
+    /** Show a spinner and block interaction. */
+    loading: boolean;
+    /** Disable the button. */
+    disabled: boolean;
+    /**
+     * Mirrors the native attribute. `submit` and `reset` do not yet act on a form
+     * outside this element's shadow root -- that needs ElementInternals, which
+     * arrives with the form controls in Wave 3.
+     */
+    type: PfButtonType;
+    /** Accessible name, for when the slot holds only an icon. */
+    label?: string;
+    private renderSpinner;
+    render(): any;
+}

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

@@ -0,0 +1,53 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A row of joined toggle buttons: pick one, or several.
+ *
+ * The group owns the selection, because "one at a time" is not a thing a
+ * button can decide for itself — the same division as `pf-radio-group`. Each
+ * `pf-button-group-item` renders a real `<button>` in its own shadow root, so
+ * every one of them is an ordinary tab stop: a group of toggle buttons is not
+ * a roving-tabindex pattern, unlike a toolbar or a tab strip.
+ *
+ * `value` is one comma-separated string, because that is what an attribute
+ * can carry; `pfChange` also reports the parsed array, which is what a
+ * framework consumer usually wants.
+ *
+ * @slot - the `pf-button-group-item` children.
+ */
+export declare class PfButtonGroup {
+    el: HTMLElement;
+    /** The chosen value, or values, as one comma-separated string. */
+    value: string;
+    /** Allow several at once. Reflected for the stylesheet. */
+    multiple: boolean;
+    /** Disable every button. Reflected, and pushed down. */
+    disabled: boolean;
+    /** Fires when the selection changes, however it was changed. */
+    pfChange: EventEmitter<{
+        value: string;
+        values: string[];
+    }>;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    handleStateChange(): void;
+    /** Re-reads the children, for a consumer who changed one through a property. */
+    refresh(): Promise<void>;
+    /** Direct children only: a nested group owns its own buttons. */
+    private get items();
+    private get chosen();
+    /**
+     * The property if the item has upgraded, the attribute if it has not:
+     * `componentWillLoad` can run before a child parsed from HTML upgrades.
+     */
+    private itemValue;
+    private sync;
+    /**
+     * A button asking to be chosen. The group decides, because in single mode
+     * the answer depends on what else is chosen.
+     */
+    handleSelect(event: CustomEvent<{
+        value: string;
+    }>): void;
+    render(): any;
+}

package/dist/types/components/pf-button-group-item/pf-button-group-item.d.ts

@@ -0,0 +1,47 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * One button inside a `pf-button-group`.
+ *
+ * It only reports that it was pressed; the group owns the selection, exactly
+ * as `pf-radio-group` does for its radios. The group writes `selected` and
+ * `groupDisabled` back onto it.
+ *
+ * `aria-pressed` rather than `aria-checked`: these are toggle buttons, not
+ * radios, which is also why every one of them is a tab stop.
+ *
+ * @slot - the button's label.
+ * @part button - the button itself.
+ * @part icon - the leading icon, when `icon` is set.
+ * @part dot - the leading dot, when `dot` is set.
+ * @part label - the label's box.
+ */
+export declare class PfButtonGroupItem {
+    /**
+     * The value the group reports when this button 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;
+    /** Disable this button alone. Reflected for the stylesheet. */
+    disabled: boolean;
+    /**
+     * Set by the group when the whole group is disabled, kept apart from
+     * `disabled` so that enabling the group does not enable a button the
+     * consumer disabled on its own.
+     */
+    groupDisabled: boolean;
+    /** Set by the group. Reflected, so the stylesheet can mark the choice. */
+    selected: boolean;
+    /** A leading icon's name, from the same registry as `pf-icon`. */
+    icon?: string;
+    /** Draw a leading dot — a status light rather than an icon. */
+    dot: boolean;
+    /** Asks the group to choose this button. The group decides. */
+    pfButtonGroupSelect: EventEmitter<{
+        value: string;
+    }>;
+    private onClick;
+    render(): any;
+}

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

@@ -0,0 +1,101 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A month grid for picking a date.
+ *
+ * **It has a keyboard, which the React component does not.** `Calendar`
+ * renders 42 buttons and no key handling, so reaching the end of a month means
+ * 42 presses of Tab and there is no way to move by week at all. This grid is
+ * the ARIA pattern instead: one tab stop, arrows to move a day, up and down a
+ * week, Home and End to the ends of the week, PageUp/PageDown a month. The
+ * arithmetic is core's `moveCalendarDate`, so the React component can adopt it
+ * without the two disagreeing — recorded in `todo.md`.
+ *
+ * Month and year are native `<select>`s rather than two `pf-dropdown`s. A year
+ * range of a century would mean a hundred custom elements rendered into this
+ * shadow root for one control, and a `<select>` brings its own keyboard and
+ * its platform picker on a phone.
+ *
+ * @part calendar - the root box.
+ * @part header - the month and year controls row.
+ * @part grid - the month grid.
+ * @part day - every day cell.
+ * @part selected - the selected day.
+ * @part today - today's cell.
+ */
+export declare class PfCalendar {
+    el: HTMLElement;
+    /** The selected date, as `YYYY-MM-DD`. Reflected, so a selector can find it. */
+    value?: string;
+    /** Earliest selectable date, as `YYYY-MM-DD`. */
+    min?: string;
+    /** Latest selectable date, as `YYYY-MM-DD`. */
+    max?: string;
+    /** First year offered in the year picker. Defaults to 50 years back. */
+    startYear?: number;
+    /** Last year offered in the year picker. Defaults to 50 years on. */
+    endYear?: number;
+    /** Render the days borrowed from the neighbouring months. */
+    showOutsideDays: boolean;
+    /** Accessible name for the grid. */
+    label: string;
+    /**
+     * A predicate for days that cannot be chosen, beyond `min` and `max`.
+     *
+     * A property rather than an attribute, because a function cannot be written
+     * in HTML — the generated bindings set props as properties, so a React or
+     * Angular consumer passes it as they would any other prop, and a plain-HTML
+     * consumer uses `min`/`max` or assigns it in script.
+     */
+    isDateDisabled?: (date: Date) => boolean;
+    /** Fires with the chosen date, as `YYYY-MM-DD`. */
+    pfChange: EventEmitter<{
+        value: string;
+    }>;
+    /** The month on screen. */
+    displayMonth: Date;
+    /** The day the grid's single tab stop sits on. */
+    focusedDate: Date;
+    /** Set once a key or a click has moved focus, so the first paint does not steal it. */
+    private shouldRestoreFocus;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    /** Follows a value set from outside, so the grid shows what it is told. */
+    syncValue(): void;
+    /** Moves the grid to the month holding `date` (a `Date` or `YYYY-MM-DD`). */
+    goToMonth(date: string | Date): Promise<void>;
+    /**
+     * Puts focus on the grid's single tab stop.
+     *
+     * A method rather than something a container does for itself: the tab stop
+     * is inside this shadow root, and reaching into another component's shadow
+     * root to find it is exactly the coupling `::part()` and `@Method()` exist
+     * to avoid. `pf-date-picker` calls this when its popover opens.
+     */
+    focusSelectedDay(): Promise<void>;
+    private selectedDate;
+    private get years();
+    private clamp;
+    private isDisabled;
+    private select;
+    /**
+     * Moves the focused day, bringing the grid with it.
+     *
+     * A disabled day can still be focused — skipping it would make a long
+     * blocked stretch impossible to cross, and the ARIA pattern is that focus
+     * moves freely while activation is refused.
+     */
+    private moveFocus;
+    private onKeyDown;
+    /**
+     * Shows a month and brings the tab stop with it.
+     *
+     * Both halves, always. Moving `displayMonth` alone leaves `focusedDate` on a
+     * day that is no longer rendered, so no cell carries `tabindex="0"` and the
+     * grid drops out of the tab order altogether — reachable by mouse and by
+     * nothing else. The year picker did exactly that until a test went looking.
+     */
+    private showMonth;
+    private stepMonth;
+    private renderHeader;
+    render(): any;
+}

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

@@ -0,0 +1,16 @@
+/**
+ * A surface that groups related content.
+ *
+ * The React library's `Card` / `CardHeader` / `CardContent` / `CardFooter` map
+ * to four elements rather than to one element with named slots. Named slots
+ * would need a slot controller to know whether to render each wrapper at all —
+ * an unslotted `header` would otherwise leave a padded, bordered empty strip.
+ * Separate elements have no such state: the consumer writing
+ * `<pf-card-header>` *is* the signal.
+ *
+ * @slot - the card's sections, usually `pf-card-header`, `pf-card-content` and
+ * `pf-card-footer`, though any content is allowed.
+ */
+export declare class PfCard {
+    render(): any;
+}

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

@@ -0,0 +1,8 @@
+/**
+ * The body section of a `pf-card`.
+ *
+ * @slot - the content.
+ */
+export declare class PfCardContent {
+    render(): any;
+}

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

@@ -0,0 +1,10 @@
+/**
+ * The bottom section of a `pf-card`, separated from what precedes it by a rule.
+ * Lays its children out in a row, which is what makes it the natural home for
+ * a card's actions.
+ *
+ * @slot - the footer's content, usually buttons.
+ */
+export declare class PfCardFooter {
+    render(): any;
+}

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

@@ -0,0 +1,8 @@
+/**
+ * The top section of a `pf-card`, separated from what follows by a rule.
+ *
+ * @slot - the header's content.
+ */
+export declare class PfCardHeader {
+    render(): any;
+}