@pine-ds/core 5.0.0-mercury.0 → 5.0.0

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

@@ -0,0 +1,714 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { BasePdsProps } from "../../utils/interfaces";
+import type { ChipSentimentType } from "../../utils/types";
+import type { ComboboxOption, ComboboxSearchEventDetail, ComboboxLoadOptionsEventDetail } from './combobox-interface';
+/**
+ * @slot option - Option elements for the combobox dropdown
+ * @slot trigger-content - Custom content for the button trigger when customTriggerContent is true
+ * @slot empty - Custom empty state message when no options match
+ * @slot loading - Custom loading indicator
+ * @part button-trigger - Exposes the button trigger for styling. Appears only when `trigger` is `button`.
+ * @part chip-trigger - Exposes the chip trigger for styling. Appears only when `trigger` is `chip`.
+ * @part combobox - Exposes the outer container around the label, trigger and messages for styling.
+ * @part input - Exposes the native `input` element for styling. Appears only when `trigger` is `input`, the default.
+ */
+export declare class PdsCombobox implements BasePdsProps {
+    /** Reference to the host element */
+    el: HTMLPdsComboboxElement;
+    /**
+     * A unique identifier used for the underlying component `id` attribute.
+     */
+    componentId: string;
+    /**
+     * The name of the form control. Submitted with the form as part of a name/value pair.
+     */
+    name?: string;
+    /**
+     * Enable custom layout content for options. Options with data-layout attribute will render their HTML content.
+     * ⚠️ Security Warning: Only use with trusted content. Basic XSS protection is applied, but avoid user-generated content.
+     * @default false
+     */
+    customOptionLayouts: boolean;
+    /**
+     * Enable custom layout content for the button trigger via the trigger-content slot.
+     * When true, uses slot content for initial state but updates dynamically with selected option layout.
+     * ⚠️ Security Warning: Only use with trusted content. Basic XSS protection is applied, but avoid user-generated content.
+     * @default false
+     */
+    customTriggerContent: boolean;
+    /**
+     * If true, the combobox is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Error message to display.
+     */
+    errorMessage?: string;
+    /**
+     * Placement of the dropdown relative to the trigger.
+     * @default 'bottom-start'
+     */
+    dropdownPlacement: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    /**
+     * Width of the dropdown, including its padding. Any valid CSS width value.
+     * Without it, the dropdown is 252px wide, 244px with grouped options and 236px with a panel search.
+     */
+    dropdownWidth?: string;
+    /**
+     * Where to mount the dropdown listbox (`host` or `body`, sometimes called “append to body”).
+     * Use `body` inside scrollable containers (for example modals) so the list is not clipped by
+     * `overflow: hidden` ancestors. The portal is appended to the nearest `<dialog>` when present
+     * (including `pds-modal` / `showModal()`), using a composed ascent so shadow DOM and slot
+     * boundaries do not hide the dialog from discovery; otherwise it is appended to `document.body`.
+     * Keyboard focus stays on the trigger, or moves to the panel's own search field, so modal focus
+     * traps keep working. The mounted dropdown renders in its own shadow root with the combobox's
+     * styles, so it needs no global CSS and page CSS can't reach it: customize it with custom
+     * properties on `pds-combobox`. Its reading direction, language, theme and custom properties are
+     * taken from the combobox when it opens. Custom `empty` and `loading` slots are not supported when
+     * `body` is used; the default empty and loading content is shown instead.
+     * @default 'host'
+     */
+    dropdownMount: 'host' | 'body';
+    /**
+     * Accessible prefix for the row that returns to the group list when `group-display` is
+     * `drill-in`, read before the open group's label. Pass a translated string to localize it; defaults to English.
+     * @defaultValue 'Back'
+     */
+    drillInBackLabel: string;
+    /**
+     * Text shown when no options match the search. Pass a translated string to localize it; defaults to English.
+     * @defaultValue 'No options found'
+     */
+    noOptionsFoundLabel: string;
+    /**
+     * Maximum width of a group's flyout when `group-display` is `flyout`. Any valid CSS width
+     * value, including its padding.
+     * @default '388px'
+     */
+    flyoutMaxWidth: string;
+    /**
+     * Minimum width of a group's flyout when `group-display` is `flyout`. Any valid CSS width
+     * value, including its padding. The flyout is as wide as its options, between this and
+     * `flyout-max-width`.
+     * @default '288px'
+     */
+    flyoutMinWidth: string;
+    /**
+     * How option groups (`<optgroup>`, or the `group` field of `options`) are shown in the dropdown.
+     * `inline` lists each group's label above its options. `flyout` lists the groups, and opens a
+     * group's options in a panel beside it on hover or click; while searching, the matching options
+     * are listed under their group labels, and search also matches group labels. `flyout` groups
+     * by `<optgroup>` (or `group`) only: options under a `<pds-text>` heading are listed ungrouped.
+     * `drill-in` lists the groups too, but a click replaces the list with that group's options and a
+     * row back to the groups; use it where nothing can open beside the dropdown, such as a side
+     * panel. `flyout` falls back to `drill-in` when there is no room for a flyout on either side.
+     * @default 'inline'
+     */
+    groupDisplay: 'inline' | 'flyout' | 'drill-in';
+    /**
+     * Helper message to display below the combobox.
+     */
+    helperMessage?: string;
+    /**
+     * Visually hides the label text for instances where only the combobox should be displayed.
+     * The visible `<label>` is omitted (same pattern as `pds-select`) so label spacing does not reserve layout;
+     * the trigger uses `aria-label` so the name stays available to assistive technology.
+     */
+    hideLabel: boolean;
+    /**
+     * If true, the combobox is in an invalid state.
+     */
+    invalid?: boolean;
+    /**
+     * Text to be displayed as the combobox label.
+     */
+    label?: string;
+    /**
+     * Maximum height of the dropdown. Can be any valid CSS height value (e.g., '200px', '10rem').
+     * When content exceeds this height, the dropdown will scroll.
+     */
+    maxHeight?: string;
+    /**
+     * Determines the combobox mode: 'filter' (filter options as you type) or 'select-only' (show all options).
+     * In filter mode, reopening the menu while the input still shows the label of the selected option temporarily lists
+     * all options until you type (so you can switch to a different choice without clearing the field first).
+     * @default 'filter'
+     */
+    mode: 'filter' | 'select-only';
+    /**
+     * Shows a search field at the top of the dropdown for the `button` and `chip` triggers, which
+     * can't be typed into. Search filters the options the same way typing in the `input` trigger
+     * does; in a grouped display it also matches group labels.
+     * @default false
+     */
+    panelSearch: boolean;
+    /**
+     * Placeholder text for the input field.
+     */
+    placeholder?: string;
+    /**
+     * Accessible label for the search input inside the dropdown panel (`panel-search`). Pass a translated string to localize it; defaults to English.
+     * @defaultValue 'Search options'
+     */
+    searchOptionsLabel: string;
+    /**
+     * Placeholder text for the search input inside the dropdown panel (`panel-search`). Pass a translated string to localize it; defaults to English.
+     * @defaultValue 'Find...'
+     */
+    searchPlaceholder: string;
+    /**
+     * Determines the combobox trigger: 'input' (editable input), 'button' (button-like, non-editable), or 'chip' (chip-like, non-editable).
+     * @default 'input'
+     */
+    trigger: 'input' | 'button' | 'chip';
+    /**
+     * Width of the trigger (button or input). Any valid CSS width value.
+     * @default 'fit-content'
+     */
+    triggerWidth: string;
+    /**
+     * The visual variant for the button trigger. Matches Pine button variants.
+     * @default 'secondary'
+     */
+    triggerVariant: 'secondary' | 'primary' | 'accent' | 'destructive';
+    /**
+     * The shape of the button trigger. Use 'input' to render the trigger with input-like styling
+     * (subtle border radius, input height) for use in form or filter rows alongside PdsSelect and PdsMultiselect.
+     * @default 'pill'
+     */
+    triggerShape: 'pill' | 'input';
+    /**
+     * Determines whether the button trigger's label and the option labels should truncate and display with an ellipsis.
+     * When a label overflows, a `title` showing the full label will appear on hover.
+     * Chip options, custom layouts and group rows aren't affected.
+     * @defaultValue false
+     */
+    truncate: boolean;
+    /**
+     * The sentiment for the chip trigger. Matches Pine chip sentiments.
+     * @default 'neutral'
+     */
+    chipSentiment: ChipSentimentType;
+    /**
+     * Whether the chip trigger should be displayed in a larger size.
+     * @default false
+     */
+    chipLarge: boolean;
+    /**
+     * The name of the icon to display in the chip trigger.
+     */
+    chipIcon?: string;
+    /**
+     * Whether a dot should be displayed on the chip trigger.
+     * @default false
+     */
+    chipDot: boolean;
+    /**
+     * The `value` of the selected option.
+     */
+    value: string;
+    /**
+     * URL endpoint for async data fetching.
+     */
+    asyncUrl?: string;
+    /**
+     * HTTP method for async requests.
+     */
+    asyncMethod: 'GET' | 'POST';
+    /**
+     * Debounce delay in milliseconds for search/fetch.
+     */
+    debounce: number;
+    /**
+     * Timeout in milliseconds for async fetch requests.
+     */
+    fetchTimeout: number;
+    /**
+     * Whether the component is currently loading async options.
+     */
+    loading: boolean;
+    /**
+     * Options provided externally (for consumer-managed async).
+     */
+    options?: ComboboxOption[];
+    /**
+     * Function to format async results. Receives raw API response item.
+     */
+    formatResult?: (item: unknown) => ComboboxOption;
+    /**
+     * Emitted when the value changes.
+     */
+    pdsComboboxChange: EventEmitter<{
+        value: string;
+    }>;
+    /**
+     * Emitted on search input (for consumer-managed async).
+     */
+    pdsComboboxSearch: EventEmitter<ComboboxSearchEventDetail>;
+    /**
+     * Emitted to request more options (pagination).
+     */
+    pdsComboboxLoadOptions: EventEmitter<ComboboxLoadOptionsEventDetail>;
+    /**
+     * Internal state for the display text shown in the input/trigger
+     */
+    displayText: string;
+    /**
+     * Internal state for filtered options and group labels
+     */
+    filteredItems: (HTMLOptionElement | HTMLOptGroupElement | HTMLPdsTextElement)[];
+    /**
+     * Internal state for the currently highlighted option index
+     */
+    highlightedIndex: number;
+    /**
+     * Internal state for dropdown open/close
+     */
+    isOpen: boolean;
+    /**
+     * The optgroup whose flyout is open, when `groupDisplay` is `flyout`.
+     */
+    openGroup: HTMLOptGroupElement | null;
+    /**
+     * Which way drill-in just moved, so the list slides that way: `in` to a group, `out` back to the
+     * groups. Cleared once the slide ends, so later renders don't animate.
+     */
+    drillDirection: 'in' | 'out' | null;
+    /**
+     * The group row highlighted in the grouped panel. It counts only while no option is
+     * highlighted (`highlightedIndex` is -1); see `highlightedGroupRow`.
+     */
+    highlightedGroup: HTMLOptGroupElement | null;
+    /** The keys, not the pointer, moved the highlight last; the focus ring shows only then. */
+    keyboardNavigating: boolean;
+    /**
+     * A drill-in group row the first arrow showed rather than moved past. `aria-activedescendant`
+     * already pointed at it, so the status region says it instead.
+     */
+    revealedGroupLabel: string | null;
+    /**
+     * The pointer in the panel can hover: a mouse or pen, not touch. Touch browsers keep a tapped row
+     * hovered, so group rows shade on `:hover` only for a pointer that can hover. Checked on the
+     * pointer itself rather than `(hover: hover)`, which a touch-first device with a trackpad fails.
+     */
+    pointerCanHover: boolean;
+    /**
+     * What's typed in the dropdown's own search field (`panelSearch`).
+     */
+    panelQuery: string;
+    /**
+     * `groupDisplay` is `flyout` but there's no room beside the dropdown, so groups drill in instead.
+     */
+    flyoutFallback: boolean;
+    /**
+     * Internal state for the currently selected option
+     */
+    selectedOption: HTMLOptionElement | null;
+    /**
+     * Internal state for the sanitized layout content of the selected option
+     */
+    selectedOptionLayoutContent: string;
+    /**
+     * Internal state to track chip properties for automatic rendering
+     */
+    selectedOptionChipProps: any;
+    /**
+     * Internal state for async options.
+     */
+    internalOptions: ComboboxOption[];
+    /**
+     * Internal state for current page (pagination).
+     */
+    currentPage: number;
+    /**
+     * Internal state for hasMore (pagination).
+     */
+    hasMore: boolean;
+    private inputEl?;
+    private optionEls;
+    private allItems;
+    private triggerEl?;
+    private listboxEl?;
+    private portalEl;
+    /** The portal's shadow root, which holds the dropdown and a copy of the combobox's styles. */
+    private portalRoot;
+    private cleanupPositionAutoUpdate?;
+    private bodyPortalAutoUpdateActive;
+    /** Deferred so portal teardown runs after Stencil reconciles `isOpen === false`. */
+    private deferredPortalTeardownId?;
+    private internals?;
+    private isUpdatingFromSelection;
+    private abortController?;
+    private fetchDebounceTimer?;
+    private fetchTimeoutTimer?;
+    private observer?;
+    private originalSearchEmitter?;
+    private flyout;
+    /** The groups in the flyout panel's last render, so a row's index finds its optgroup. */
+    private renderedGroups;
+    /**
+     * Where each ungrouped option and optgroup built from the `options` prop came in the data, so
+     * the flyout and drill-in panels draw them in that order. Slotted markup is already in order.
+     */
+    private panelPositions;
+    private panelSearchEl?;
+    /** With panel search, the options' list, which takes focus while a group is drilled into. */
+    private panelTreeEl?;
+    /** What panel search last focused this open: the search field, or the list while drilled in. */
+    private panelFocusEl?;
+    /** Room for a flyout was checked for this open. */
+    private flyoutRoomChecked;
+    /** The highlighted option sits in a flyout that hasn't rendered yet; focus it after the next render. */
+    private pendingOptionFocus;
+    /** Group rows' DOM ids, stable across renders so `aria-activedescendant` can point at a row. */
+    private groupIds;
+    private groupIdCount;
+    /**
+     * In filter mode, after choosing an option the input still shows the label and would
+     * otherwise filter the list to matching substrings only. While this flag is true,
+     * the list shows every option until the user types (then normal filtering applies).
+     */
+    private expandFilterListWhileOpen;
+    connectedCallback(): void;
+    /**
+     * Form Associated Custom Elements API: Called when the form is disabled
+     */
+    formDisabledCallback(disabled: boolean): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    componentDidRender(): void;
+    private syncTitle;
+    /**
+     * Scrolls just enough to show `el`, as `scrollIntoView({ block: 'nearest' })` does. In the drill-in
+     * panel it scrolls the list alone, and never sideways: while a drill-in slide offsets a row past
+     * the list's edge, `scrollIntoView` also scrolls the list horizontally to reach it, which eats most
+     * of the slide. It doesn't scroll the page or a scrolling ancestor.
+     */
+    private scrollIntoViewNearest;
+    /**
+     * The element that scrolls the panel's rows. Every layer is a header (the search field, or a
+     * drilled-in group's row back) above the rows that scroll: drilled in, the group's options;
+     * otherwise the list under the search field, or the panel itself.
+     */
+    private get scrollListEl();
+    private focusPanel;
+    /** Switching display mode leaves no flyout or hover timer from the last one. */
+    protected groupDisplayChanged(): void;
+    protected openGroupChanged(next: HTMLOptGroupElement | null, previous: HTMLOptGroupElement | null): void;
+    private releaseHeightHold;
+    /** The dropdown's height before a drill, so componentDidRender can ease it to the new view's. */
+    private drillFromHeight?;
+    /**
+     * Hands the dropdown's height before and after a drill to the SCSS glide. Neither is known ahead,
+     * so they're measured: CSS can't animate to the height its content turns out to be.
+     */
+    private glideDrillHeight;
+    private onHeightGlideCancel;
+    /** Ends a glide, and a drill still waiting to glide, so nothing starts once it renders. */
+    private endHeightGlide;
+    /**
+     * With `max-height`, the panel's own scroll, set inline so it outranks the stylesheet: hidden under a
+     * fixed search field, and while the height glides (so no scrollbar flashes), otherwise auto.
+     */
+    private syncPanelOverflow;
+    /** A flyout with no room beside the dropdown drills in, which can hide the focused search field too. */
+    protected flyoutFallbackChanged(): void;
+    /**
+     * Drilling into a group hides the search field, so focus moves to the list before the field
+     * unmounts: focus lost with it would leave the combobox and close the dropdown.
+     */
+    private handPanelFocusToList;
+    private onPanelPointer;
+    private onDrillAnimationEnd;
+    protected disabledChanged(disabled: boolean): void;
+    protected isOpenChanged(isOpen: boolean): void;
+    private get usesBodyPortal();
+    private get labelId();
+    /** One check for "the `<label>` is rendered", so the label and the reference to it can't disagree. */
+    private get hasVisibleLabel();
+    /**
+     * The button and chip triggers are `div`s, which `<label for>` can't name, so they point at the
+     * visible label instead. With `hide-label` there is no visible label and `aria-label` names them.
+     * With panel search the trigger is a button, which has no value, so its own text (the selection
+     * or placeholder) joins the label in its name.
+     */
+    private get triggerLabelledBy();
+    /** The div triggers' `aria-label` when the label is hidden; with panel search it names the selection too. */
+    private get triggerAriaLabel();
+    /** `<label for>` only works on the input trigger; for a div trigger a click on the label focuses it. */
+    private onLabelClick;
+    private get listboxId();
+    private optionDomId;
+    private groupDomId;
+    protected setupDebounce(): void;
+    protected optionsChanged(): void;
+    handleValueChange(): void;
+    handleSelectedOptionChange(): void;
+    private updateFormValue;
+    private clearAsyncFetchState;
+    /** The query behind the options loaded from `async-url`. */
+    private lastFetchedQuery;
+    private debouncedFetchAsyncOptions;
+    private fetchOptions;
+    private updateOptionsFromAsync;
+    private updateOptions;
+    private getOptionLabel;
+    private getOptionLayoutContent;
+    private sanitizeHtml;
+    private isOptionLayout;
+    private isOptionChip;
+    private getOptionChipProps;
+    private isOptionSelected;
+    private setSelectedOption;
+    private filterOptions;
+    private clearExpandFilterList;
+    /**
+     * When reopening the dropdown in filter mode with the input still showing the
+     * committed selection label, show the full option list until the user edits the query.
+     */
+    private prepareExpandFilterListOnOpen;
+    private positionDropdown;
+    /**
+     * Once per open, after the dropdown is placed: with no room for a flyout on either side of it,
+     * `flyout` drills in instead. `flyout-min-width` is resolved through CSS, so any length works.
+     */
+    private checkFlyoutRoom;
+    /** The dropdown element last placed on rendering, so each newly rendered one is placed once. */
+    private placedListboxEl?;
+    private openDropdownPositioning;
+    private startBodyPortalAutoUpdate;
+    private stopBodyPortalAutoUpdate;
+    private getPortalMountRoot;
+    /**
+     * Resolves the native `<dialog>` to host the portaled listbox so it stays in the same top layer
+     * as `showModal()`. `Element.closest('dialog')` stops at shadow boundaries and can miss a
+     * dialog that only wraps slotted content; this walks assigned slots and shadow hosts, and
+     * falls back to `pds-modal`'s dialog when the combobox lives inside that subtree.
+     */
+    private findNearestDialogForPortal;
+    private ensureBodyPortal;
+    /**
+     * Gives the portal what the dropdown would otherwise get inside the combobox: its styles (so it
+     * needs no global CSS), the reading direction and language, a theme set on an ancestor, and
+     * custom properties set between the combobox and where the portal mounts. A snapshot: the portal
+     * is rebuilt on every open, so a theme switched while it's open applies from the next open.
+     */
+    private copyPortalContext;
+    private syncBodyPortal;
+    private removeBodyPortal;
+    private handleInput;
+    private handleInputClick;
+    private handleKeyDown;
+    /**
+     * The tree keys in the grouped panel. Up, Down, Home, End, PageUp and PageDown move within one
+     * level; Right, Enter or Space opens a group at its first option; Left, or Escape, closes the
+     * open group back to its row. Returns false for keys the listbox handling covers, such as
+     * Enter on an option.
+     */
+    private handleGroupedPanelKey;
+    /**
+     * Where the keyboard is in the grouped panel. An option highlighted in a group that has since
+     * closed (the pointer left its flyout) counts as its group's row, so the keys carry on from
+     * what's showing rather than from an option that isn't.
+     */
+    private currentPanelItem;
+    /**
+     * Highlights the option at `index`, kept within the list. Disabled options can be highlighted,
+     * so assistive tech announces them as unavailable, but not chosen.
+     */
+    private highlightOptionAt;
+    /** Highlights a group row or an option, opening or closing flyouts to match. */
+    private highlightPanelItem;
+    private expandGroup;
+    /** Closes the open group and highlights its row, as a tree's Left does from a child. */
+    private collapseToGroup;
+    /**
+     * Sets focus on the native input element.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Sets the initial highlighted index when dropdown opens. Highlights the selected option unless
+     * it's disabled. Otherwise highlights the first enabled option, or, in the grouped panel, the
+     * first row with something to choose, or nothing when every option is disabled.
+     */
+    private setInitialHighlightedIndex;
+    /**
+     * Focus management helper - moves focus to the first option when dropdown opens
+     */
+    private focusFirstOption;
+    /**
+     * Focus management helper - actually focuses the first option when opened via arrow keys
+     */
+    private focusFirstOptionForArrowKeys;
+    private isArrowKeyNavigationMode;
+    /**
+     * Focus management helper - updates visual state and scrolling for the currently highlighted option
+     * Note: We don't actually focus the option to prevent focusout events that close the dropdown
+     */
+    private updateOptionFocus;
+    /** The highlighted group row in the grouped panel, or null while an option is highlighted. */
+    private get highlightedGroupRow();
+    /**
+     * The id of the highlighted option or group row, only while it's rendered. In the flyout panel
+     * an option in a closed group isn't in the DOM, and drilled into a group the other groups' rows
+     * aren't; `aria-activedescendant` must not point at a missing element.
+     */
+    private get activeDescendantId();
+    /** Points the focused element's aria-activedescendant at the highlighted option, or clears it. */
+    private updateAriaActiveDescendant;
+    /**
+     * Focus management helper - restores focus to the trigger element
+     */
+    private restoreFocusToTrigger;
+    /**
+     * Gets the value of the currently selected option.
+     */
+    getSelectedValue(): Promise<string | null>;
+    /**
+     * Clears the selected value and resets the component. Works while disabled too, as setting a
+     * native control's value from script does.
+     */
+    clear(): Promise<void>;
+    private onOptionClick;
+    private onButtonTriggerMouseEnter;
+    private onOptionMouseEnter;
+    private groupFromEvent;
+    private onGroupRowMouseEnter;
+    private onGroupRowMouseLeave;
+    private onGroupRowTriggerMouseEnter;
+    private onGroupBackMouseEnter;
+    private highlightGroupRowByPointer;
+    private onGroupRowClick;
+    private onOptionMouseDown;
+    private onOptionKeyDown;
+    private get selectedLabel();
+    private get selectedLayoutContent();
+    private get selectedHasLayout();
+    private get selectedChipSentiment();
+    private get selectedChipLarge();
+    private get selectedChipIcon();
+    private get selectedChipDot();
+    private onButtonTriggerClick;
+    /**
+     * With `async-url`, fetches when the button trigger opens: the first page if nothing has loaded.
+     * The panel's search field opens empty, so results left from the last search are refetched for
+     * an empty query.
+     */
+    private fetchAsyncOptionsOnOpen;
+    private onButtonTriggerKeyDown;
+    private onButtonTriggerKeyUp;
+    private onComboboxFocusOut;
+    /** A pick that fills the field from its placeholder fades in; a value it loads with doesn't. */
+    private fadesValueIn;
+    private handleOptionClick;
+    /** The row shown while options load: at the top of the list, or of a drilled-in group's options. */
+    private renderLoadingRow;
+    /** The row after the last option while more can load, inside whatever scrolls them. */
+    private renderLoadMoreRow;
+    /** Drilled into a group: the group and its place among the panel's entries; otherwise null. */
+    private drilledInEntry;
+    private handleScroll;
+    private renderDropdown;
+    private onPanelMouseDown;
+    /**
+     * The listbox's items. Each optgroup's options sit in a `group` named for it, as in
+     * `pds-multiselect`, so assistive tech announces the group on entering it; a `pds-text` label
+     * stays a caption above the options that follow it.
+     */
+    private renderListboxItems;
+    /** `panelSearch` applies to the triggers that can't be typed into. */
+    private get usesPanelSearch();
+    /** `groupDisplay`, with `flyout` drilling in when there's no room beside the dropdown. */
+    private get effectiveGroupDisplay();
+    /**
+     * The popup's role, for the triggers' `aria-haspopup`: a `tree` while the grouped panel shows
+     * groups, and a `listbox` of options otherwise, search results included.
+     */
+    private get popupRole();
+    /**
+     * The input trigger's `aria-haspopup`. While closed it names what opening shows: the full list,
+     * so the grouped panel in a grouped display, even though the input still holds the selection's
+     * label.
+     */
+    private get inputPopupRole();
+    /**
+     * The button and chip triggers' `aria-haspopup`. With panel search the trigger opens the panel,
+     * which starts as a tree in a grouped display, so typing in the panel doesn't change it.
+     */
+    private get triggerPopupRole();
+    /**
+     * Drilled into a group with panel search: the group's row back takes the search field's place,
+     * since one group's options don't need searching. Typing searches the whole list again.
+     */
+    private get hidesPanelSearch();
+    /** The grouped panel is showing groups rather than search results. */
+    private get showsGroupedPanel();
+    private onPanelSearchInput;
+    private setPanelQuery;
+    /** What's being searched: the panel's field, or the input trigger's text. */
+    private get activeQuery();
+    private onPanelSearchKeyDown;
+    /**
+     * Keys in the list while a drilled-in group hides the search field. Backspace, like ArrowLeft,
+     * steps back to the groups; a character starts a search of the whole list. Characters typed
+     * before the search field renders and takes focus still land on the list, so they add to the
+     * query rather than starting it again.
+     */
+    private onPanelTreeKeyDown;
+    private handlePanelTab;
+    /** Returns from a drilled-in group to the group list; false when not drilled in. */
+    private leaveDrilledInGroup;
+    private onGroupBackClick;
+    private renderPanelSearch;
+    /**
+     * An option, as a listbox `option` or, given a tree `level`, a `treeitem`. `posinset` and
+     * `setsize` place it among its siblings.
+     */
+    private renderOption;
+    /** Copies an `options` badge to an option's or optgroup's `data-badge*` attributes; only strings count. */
+    private setBadgeAttributes;
+    /** An option's badge, after its text. */
+    private renderOptionBadge;
+    /** A badge as a `pds-chip`: after an option's text, or a group's label. */
+    private renderBadge;
+    /**
+     * An option's text, after its `data-icon` when it has one. Beside a badge the text is always
+     * wrapped, so it can shrink and wrap rather than push the badge out of the row.
+     */
+    private renderOptionLabel;
+    /** The grouped panel's rows, in the order the panel draws them and the keyboard moves through. */
+    private panelEntries;
+    /**
+     * `flyout`: one row per group, its options in a flyout beside it. `drill-in`: the same rows, and
+     * an opened group replaces them with its row, drawn as a row back, above its options. Either way
+     * it's a tree: the rows and ungrouped options are level 1, a group's options level 2.
+     */
+    private renderGroupedPanel;
+    /** A group's options, as its children in the tree. */
+    private renderGroupOptions;
+    /**
+     * Drilled into a group: its treeitem, expanded. Its row reads as a way back ("Back: Tag") and
+     * leads its options. It leaves out the group's badge: the row is a way back, not a group to
+     * choose, and the badge was on the row that opened it. An option's own badge still shows.
+     */
+    private renderGroupBackRow;
+    private renderGroupRow;
+    private renderCaretIcon;
+    private renderLayoutContent;
+    private renderDefaultContent;
+    /** The selection's icon for the button trigger: the option's own, or else its group's. */
+    private get selectedIcon();
+    private shouldShowLayoutContent;
+    private getChipTriggerClass;
+    private renderButtonTriggerContent;
+    private renderChipTriggerContent;
+    private renderSelectedOptionAsChip;
+    private renderChipTriggerLayoutContent;
+    private getModifiedLayoutContentForTrigger;
+    private renderChipTriggerDefaultContent;
+    private renderOptionChip;
+    private isInvalid;
+    private renderMessages;
+    render(): any;
+}