@pitchfork-ui/elements 0.0.0-stage → 0.1.0

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

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

@@ -0,0 +1,73 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A carousel over `pf-carousel-slide` children.
+ *
+ * The group owns the index, the controls, the indicators and the live region
+ * that announces the move; each slide owns only whether it is the one on show.
+ *
+ * `role="region"` with `aria-roledescription="carousel"` rather than any of
+ * the tab or listbox patterns: a carousel is a region whose content changes,
+ * and the announcement is what tells a reader it has.
+ *
+ * @slot - the `pf-carousel-slide` children.
+ * @slot empty - what to show when there are no slides.
+ * @part viewport - the clipping box.
+ * @part track - the strip that slides.
+ * @part controls - the row holding the buttons and the indicators.
+ * @part previous - the step-back button.
+ * @part next - the step-forward button.
+ * @part indicators - the box holding the dots.
+ * @part indicator - one dot.
+ */
+export declare class PfCarousel {
+    el: HTMLElement;
+    /** The slide on show, counting from 0. */
+    index: number;
+    /** Wrap at both ends rather than stopping. */
+    loop: boolean;
+    /** Show the dots. */
+    showIndicators: boolean;
+    /** Step forward on a timer. */
+    autoPlay: boolean;
+    /** How long between steps, in milliseconds. */
+    autoPlayInterval: number;
+    /** The carousel's accessible name. */
+    label: string;
+    /** The step-back button's accessible name. */
+    previousLabel: string;
+    /** The step-forward button's accessible name. */
+    nextLabel: string;
+    /** Fires when the slide on show changes, however it changed. */
+    pfChange: EventEmitter<{
+        index: number;
+    }>;
+    /** How many slides there are, which every control depends on. */
+    total: number;
+    private timer?;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    handleIndexChange(): void;
+    handleTimerChange(): void;
+    /** Re-reads the slides, for a consumer who changed them imperatively. */
+    refresh(): Promise<void>;
+    /** Steps one slide forward, as the button and the timer do. */
+    next(): Promise<void>;
+    /** Steps one slide back. */
+    previous(): Promise<void>;
+    /** Direct children only: a nested carousel owns its own slides. */
+    private get slides();
+    /** The slide actually on show, which an out-of-range index resolves to. */
+    private get resolved();
+    private sync;
+    private goTo;
+    /**
+     * One timer, restarted rather than stacked: a consumer changing the interval
+     * while it runs would otherwise leave the old one going, and the carousel
+     * would step twice as often for no visible reason.
+     */
+    private startTimer;
+    private stopTimer;
+    render(): any;
+}

package/dist/types/components/pf-carousel-slide/pf-carousel-slide.d.ts

@@ -0,0 +1,19 @@
+/**
+ * One slide of a `pf-carousel`.
+ *
+ * The carousel tells it where it sits and whether it is the one on show; it
+ * owns only what that means for itself — chiefly that an off-screen slide is
+ * `inert`, so the focusable content inside it cannot be tabbed to while it is
+ * scrolled out of sight.
+ *
+ * @slot - the slide's content.
+ */
+export declare class PfCarouselSlide {
+    /** Set by the carousel: the slide on show. Reflected for the stylesheet. */
+    active: boolean;
+    /** Set by the carousel: this slide's place, counting from 1. */
+    position: number;
+    /** Set by the carousel: how many slides there are. */
+    total: number;
+    render(): any;
+}

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

@@ -0,0 +1,33 @@
+/**
+ * One series of a `pf-line-chart` or a `pf-bar-chart`, and its own row in the
+ * legend.
+ *
+ * The chart's data is a single array of rows keyed by series — bulk numbers,
+ * which belong in a property — while the series are the part with names and
+ * colours, which belong in the light DOM so a consumer can loop over them and
+ * so the legend can hold their labels. A legend built in the chart's shadow
+ * root could not reach a slotted label at all.
+ *
+ * `swatch` is the chart's to set: only it knows this series' place in the
+ * palette.
+ *
+ * @slot - the series' name. Falls back to `seriesKey`.
+ * @part dot - the colour swatch.
+ * @part label - the name.
+ */
+export declare class PfChartSeries {
+    /**
+     * The property each data row carries this series' value under.
+     *
+     * `seriesKey`, not `key`: `key` is the vdom's own prop name and reserved,
+     * the same family as `animate` shadowing `Element.prototype.animate`.
+     */
+    seriesKey: string;
+    /** Overrides the palette colour the chart would give it. */
+    color?: string;
+    /** Draw this series' line dashed. Line charts only. Reflected. */
+    dashed: boolean;
+    /** Set by the chart: the colour actually used, palette or override. */
+    swatch: string;
+    render(): any;
+}

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

@@ -0,0 +1,56 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A form-associated checkbox.
+ *
+ * @part field - the wrapper around control and label.
+ * @part input - the native checkbox.
+ * @part label - the label element.
+ */
+export declare class PfCheckbox {
+    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 box is ticked. Reflected so the stylesheet can select on it. */
+    checked: boolean;
+    /**
+     * What is submitted when ticked. 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 ticks or unticks the box. */
+    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 ticked.
+     */
+    formResetCallback(): void;
+    private onChange;
+    render(): any;
+}

package/dist/types/components/pf-code-snippet/pf-code-snippet.d.ts

@@ -0,0 +1,74 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A code block with a copy button.
+ *
+ * **No syntax highlighting, deliberately.** The React `CodeSnippet` uses
+ * `prism-react-renderer`, which is a React renderer and has no equivalent
+ * here; the alternatives are all large runtime dependencies, and an element in
+ * a design system should not make a consumer's bundle choose one. A consumer
+ * who already highlights code slots the markup their highlighter produced into
+ * the default slot, and this renders that instead of the plain text — it still
+ * owns the frame, the header, the copy button and the announcement.
+ *
+ * Line numbers are offered only for the plain-text path. Aligning a gutter
+ * with someone else's markup needs to know where their lines break, which only
+ * they know.
+ *
+ * @slot - pre-highlighted markup, rendered instead of `code`.
+ * @part figure - the frame.
+ * @part header - the title, language and copy button.
+ * @part title - the title text.
+ * @part language - the language tag.
+ * @part copy - the copy button.
+ * @part pre - the code block.
+ * @part line - one numbered line, when line numbers are on.
+ * @part line-number - that line's number.
+ */
+export declare class PfCodeSnippet {
+    el: HTMLElement;
+    /** The code, as plain text. */
+    code: string;
+    /** Shown as a tag in the header, and not used for anything else. */
+    language?: string;
+    /** Shown in the header. */
+    heading?: string;
+    showLineNumbers: boolean;
+    /** Scrolls past this height, in pixels. */
+    maxHeight?: number;
+    copyLabel: string;
+    copiedLabel: string;
+    copyFailedLabel: string;
+    /**
+     * How long the button keeps saying what the last press did, in
+     * milliseconds.
+     *
+     * A prop rather than a constant because a live region that still holds
+     * "Copied" when the next copy happens announces nothing, so how long it
+     * holds is a real decision — and because a test cannot use fake timers
+     * here: `vi.useFakeTimers()` replaces `requestAnimationFrame`, which
+     * Stencil's render queue runs on, and wedges every test after it.
+     */
+    feedbackDuration: number;
+    /** Fires with the text that reached the clipboard. Not fired on a failure. */
+    pfCopy: EventEmitter<{
+        code: string;
+    }>;
+    /** Fires when the copy could not be made, with the reason shown. */
+    pfCopyError: EventEmitter<{
+        message: string;
+    }>;
+    copied: boolean;
+    failed: boolean;
+    /** Whether the consumer slotted their own highlighted markup. */
+    hasMarkup: boolean;
+    private resetTimer?;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    /** Copies the snippet, as pressing the button does. */
+    copy(): Promise<boolean>;
+    /** What gets copied: the code, or the slotted markup's own text. */
+    private get text();
+    private readSlot;
+    render(): any;
+}

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

@@ -0,0 +1,56 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * One disclosure: a header that shows and hides the content below it.
+ *
+ * The same panel mechanics as `pf-accordion-item` — a `0fr` → `1fr` grid row
+ * so the height animates to the content's own, and `inert` on the closed panel
+ * because that height still holds focusable content — but no group above it,
+ * so this element owns `open` itself.
+ *
+ * Both IDREFs stay inside this one shadow root, which is where an IDREF
+ * resolves: the header names the panel with `aria-controls` and the panel
+ * names the header back with `aria-labelledby`.
+ *
+ * @slot trigger - the header's label.
+ * @slot - the content.
+ * @part trigger - the header button.
+ * @part label - 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 PfCollapsible {
+    /** Whether the content is showing. Reflected so the stylesheet selects on it. */
+    open: boolean;
+    /** Reflected, so the stylesheet can mark the header. */
+    disabled: boolean;
+    /** Show the rotating chevron. Defaults to true. */
+    showChevron: boolean;
+    /** Fires whenever the content opens or closes, whoever caused it. */
+    pfOpenChange: EventEmitter<{
+        open: boolean;
+    }>;
+    /** Opens the content. */
+    show(): Promise<void>;
+    /** Closes the content. */
+    hide(): Promise<void>;
+    /**
+     * The one place the change is announced, whatever caused it: the header, a
+     * method, or a consumer writing the prop. Announcing it from the click
+     * handler instead would miss the other two — the same mistake `pf-popover`
+     * and `pf-modal` both made from their DOM-event handlers.
+     *
+     * A consumer mirroring the value back sets `open` to what it already is,
+     * which Stencil does not treat as a change, so there is no loop.
+     */
+    handleOpenChange(next: boolean, previous: boolean): void;
+    private onClick;
+    /**
+     * Escape closes it from the header, which is what the React component does.
+     * Only from the header: Escape inside the content belongs to whatever is in
+     * there — a dialog, or a field clearing itself.
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    private trigger?;
+    render(): any;
+}

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

@@ -0,0 +1,123 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A form-associated combobox: an editable field that filters `pf-option`
+ * children.
+ *
+ * It shares `pf-option` with `pf-select`, which is why the option reads a
+ * generic `--pf-option-*` set that each container maps to its own family —
+ * the same arrangement as `pf-menu-item` between the two menus.
+ *
+ * Filtering is core's `matchesCommandQuery`, and so is the rule that a query
+ * which is only the chosen label echoed back does not filter: without it,
+ * reopening the list to change your mind would show the one answer you already
+ * had. Both shared with the React component, which is now rewired to them.
+ *
+ * Two things the React `Combobox` does not do, both gaps rather than choices:
+ * Home and End, and arrows that wrap rather than stop at the ends — which is
+ * what `pf-select` does, and one design system should not have two arrow
+ * behaviours in neighbouring controls.
+ *
+ * @slot - the `pf-option` children.
+ * @part field - the wrapper around label, control and messages.
+ * @part label - the label element.
+ * @part control - the box holding the input, clear button and chevron.
+ * @part input - the editable field.
+ * @part clear - the clear button.
+ * @part listbox - the floating listbox the options are slotted into.
+ * @part empty - the message shown when nothing matches.
+ * @part description - the hint text below the control.
+ * @part error - the error message below the control.
+ */
+export declare class PfCombobox {
+    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;
+    /** Shown when the query matches nothing. */
+    emptyMessage: string;
+    required: boolean;
+    disabled: boolean;
+    /** Offer a button that empties the field. */
+    clearable: boolean;
+    /** Accessible name for that button. */
+    clearLabel: string;
+    /** Fires when the chosen value changes. */
+    pfChange: EventEmitter<{
+        value: string;
+    }>;
+    /** Fires whenever the listbox opens or closes, whoever caused it. */
+    pfOpenChange: EventEmitter<{
+        open: boolean;
+    }>;
+    /** What the field holds, which is not the value until an option is chosen. */
+    query: string;
+    matchCount: number;
+    private initialValue;
+    private stopObserving?;
+    private activeOption;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    syncFormState(): void;
+    /** A value set from outside puts its label in the field and marks the option. */
+    syncSelection(): void;
+    syncOpen(next: boolean, previous: boolean): void;
+    show(): Promise<void>;
+    hide(): Promise<void>;
+    checkValidity(): Promise<boolean>;
+    reportValidity(): Promise<boolean>;
+    getValidationMessage(): Promise<string>;
+    formResetCallback(): void;
+    /** Re-reads the options, for a label edited in place (no `slotchange` fires). */
+    refresh(): Promise<void>;
+    private onSlotChange;
+    private options;
+    private visible;
+    /** The property, never the attribute: a binding may only have set the former. */
+    private optionValue;
+    private selectedLabel;
+    private get listbox();
+    private get input();
+    private get control();
+    /**
+     * Hides the options the query excludes.
+     *
+     * `hidden` plus `:host([hidden]) { display: none }` on the option, because
+     * the attribute alone loses to the option's own `display: block`.
+     */
+    private applyQuery;
+    private showListbox;
+    private hideListbox;
+    /**
+     * A browser-driven close — light dismiss or Escape — reverts the field to
+     * the chosen label, so a half-typed query never lingers over a different
+     * value. Focus goes back to the input rather than the trigger, because here
+     * the input *is* the control.
+     */
+    private onToggle;
+    private setActive;
+    /**
+     * Set as an element, not an IDREF: the input is in this shadow root and the
+     * options are slotted light DOM, and a cross-root IDREF is absent from the
+     * accessibility tree — measured. Feature-detected, because where element
+     * reflection is missing there is no cross-root equivalent.
+     */
+    private syncActiveDescendant;
+    private commit;
+    handleOptionSelect(event: CustomEvent<{
+        value: string;
+    }>): void;
+    private move;
+    private onInput;
+    private clear;
+    private onKeyDown;
+    render(): any;
+}

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

@@ -0,0 +1,18 @@
+/**
+ * A labelled section of a `pf-command-palette`.
+ *
+ * Grouping is structural here, where the React component takes a `group` name
+ * on each item and buckets them itself. That is not a stylistic choice: the
+ * items are slotted light-DOM children, and a shadow root cannot wrap a subset
+ * of its slotted children in a box — one `<slot>` renders them all, in source
+ * order. So the consumer expresses a group by nesting, which is also what
+ * §2.1 asks for everywhere else.
+ *
+ * @slot - `pf-command-item` children.
+ * @part label - the section heading.
+ */
+export declare class PfCommandGroup {
+    /** The section heading. Searched along with each item's own text. */
+    label?: string;
+    render(): any;
+}