import type { CbpAccordion } from "src/components/cbp-accordion/cbp-accordion.tsx";
import type { CbpActionBar } from "src/components/cbp-action-bar/cbp-action-bar.tsx";
import type { CbpAccordionItem } from "src/components/cbp-accordion-item/cbp-accordion-item.tsx";
import type { CbpApp } from "src/components/cbp-app/cbp-app.tsx";
import type { CbpAppHeader } from "src/components/cbp-app-header/cbp-app-header.tsx";
import type { CbpBadge } from "src/components/cbp-badge/cbp-badge.tsx";
import type { CbpBanner } from "src/components/cbp-banner/cbp-banner.tsx";
import type { CbpBreadcrumb } from "src/components/cbp-breadcrumb/cbp-breadcrumb.tsx";
import type { CbpButton } from "src/components/cbp-button/cbp-button.tsx";
import type { CbpCard } from "src/components/cbp-card/cbp-card.tsx";
import type { CbpCarousel } from "src/components/cbp-carousel/cbp-carousel.tsx";
import type { CbpCarouselItem } from "src/components/cbp-carousel-item/cbp-carousel-item.tsx";
import type { CbpCheckbox } from "src/components/cbp-checkbox/cbp-checkbox.tsx";
import type { CbpChip } from "src/components/cbp-chip/cbp-chip.tsx";
import type { CbpCodeSnippet } from "src/components/cbp-code-snippet/cbp-code-snippet.tsx";
import type { CbpContainer } from "src/components/cbp-container/cbp-container.tsx";
import type { CbpDialog } from "src/components/cbp-dialog/cbp-dialog.tsx";
import type { CbpDotIndicator } from "src/components/cbp-dot-indicator/cbp-dot-indicator.tsx";
import type { CbpDrawer } from "src/components/cbp-drawer/cbp-drawer.tsx";
import type { CbpDropdown } from "src/components/cbp-dropdown/cbp-dropdown.tsx";
import type { CbpDropdownItem } from "src/components/cbp-dropdown-item/cbp-dropdown-item.tsx";
import type { CbpExpand } from "src/components/cbp-expand/cbp-expand.tsx";
import type { CbpFileInput } from "src/components/cbp-file-input/cbp-file-input.tsx";
import type { CbpFlex } from "src/components/cbp-flex/cbp-flex.tsx";
import type { CbpFlexItem } from "src/components/cbp-flex-item/cbp-flex-item.tsx";
import type { CbpFloatingAction } from "src/components/cbp-floating-action/cbp-floating-action.tsx";
import type { CbpFooter } from "src/components/cbp-footer/cbp-footer.tsx";
import type { CbpForm } from "src/components/cbp-form/cbp-form.tsx";
import type { CbpFormField } from "src/components/cbp-form-field/cbp-form-field.tsx";
import type { CbpFormFieldWrapper } from "src/components/cbp-form-field-wrapper/cbp-form-field-wrapper.tsx";
import type { CbpGrid } from "src/components/cbp-grid/cbp-grid.tsx";
import type { CbpGridItem } from "src/components/cbp-grid-item/cbp-grid-item.tsx";
import type { CbpHide } from "src/components/cbp-hide/cbp-hide.tsx";
import type { CbpIcon } from "src/components/cbp-icon/cbp-icon.tsx";
import type { CbpLink } from "src/components/cbp-link/cbp-link.tsx";
import type { CbpList } from "src/components/cbp-list/cbp-list.tsx";
import type { CbpListbox } from "src/components/cbp-listbox/cbp-listbox.tsx";
import type { CbpLoader } from "src/components/cbp-loader/cbp-loader.tsx";
import type { CbpMenu } from "src/components/cbp-menu/cbp-menu.tsx";
import type { CbpMenuItem } from "src/components/cbp-menu-item/cbp-menu-item.tsx";
import type { CbpMulticol } from "src/components/cbp-multicol/cbp-multicol.tsx";
import type { CbpNavItem } from "src/components/cbp-nav-item/cbp-nav-item.tsx";
import type { CbpNotice } from "src/components/cbp-notice/cbp-notice.tsx";
import type { CbpPagination } from "src/components/cbp-pagination/cbp-pagination.tsx";
import type { CbpPanel } from "src/components/cbp-panel/cbp-panel.tsx";
import type { CbpRadio } from "src/components/cbp-radio/cbp-radio.tsx";
import type { CbpResizeObserver } from "src/components/cbp-resize-observer/cbp-resize-observer.tsx";
import type { CbpSection } from "src/components/cbp-section/cbp-section.tsx";
import type { SegmentedButtonGroup } from "src/components/cbp-segmented-button-group/cbp-segmented-button-group.tsx";
import type { CbpSkipNav } from "src/components/cbp-skip-nav/cbp-skip-nav.tsx";
import type { CbpSlider } from "src/components/cbp-slider/cbp-slider.tsx";
import type { CbpStructuredList } from "src/components/cbp-structured-list/cbp-structured-list.tsx";
import type { CbpStructuredListItem } from "src/components/cbp-structured-list-item/cbp-structured-list-item.tsx";
import type { CbpSubNav } from "src/components/cbp-subnav/cbp-subnav.tsx";
import type { CbpSubnavItem } from "src/components/cbp-subnav-item/cbp-subnav-item.tsx";
import type { CbpTab } from "src/components/cbp-tab/cbp-tab.tsx";
import type { CbpTabPanel } from "src/components/cbp-tab-panel/cbp-tab-panel.tsx";
import type { CbpTable } from "src/components/cbp-table/cbp-table.tsx";
import type { CbpTabs } from "src/components/cbp-tabs/cbp-tabs.tsx";
import type { CbpTag } from "src/components/cbp-tag/cbp-tag.tsx";
import type { CbpToast } from "src/components/cbp-toast/cbp-toast.tsx";
import type { CbpToggle } from "src/components/cbp-toggle/cbp-toggle.tsx";
import type { CbpTooltip } from "src/components/cbp-tooltip/cbp-tooltip.tsx";
import type { CbpTreeview } from "src/components/cbp-treeview/cbp-treeview.tsx";
import type { CbpTreeviewItem } from "src/components/cbp-treeview-item/cbp-treeview-item.tsx";
import type { CbpTypography } from "src/components/cbp-typography/cbp-typography.tsx";
import type { CbpUniversalHeader } from "src/components/cbp-universal-header/cbp-universal-header.tsx";
import type { CbpUsaBanner } from "src/components/cbp-usa-banner/cbp-usa-banner.tsx";

/**
 * This type can be used to create scoped tags for your components.
 *
 * Usage:
 *
 * ```ts
 * import type { ScopedElements } from "path/to/library/jsx-integration";
 *
 * declare module "my-library" {
 *   namespace JSX {
 *     interface IntrinsicElements
 *       extends ScopedElements<'test-', ''> {}
 *   }
 * }
 * ```
 *
 * @deprecated Runtime scoped elements result in duplicate types and can confusing for developers. It is recommended to use the `prefix` and `suffix` options to generate new types instead.
 */
export type ScopedElements<
  Prefix extends string = "",
  Suffix extends string = "",
> = {
  [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
};

type BaseProps<T extends HTMLElement> = {
  /** Content added between the opening and closing tags of the element */
  children?: any;
  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
  class?: string;
  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
  className?: string;
  /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
  classList?: Record<string, boolean | undefined>;
  /** Specifies the text direction of the element. */
  dir?: "ltr" | "rtl";
  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
  exportparts?: string;
  /** For <label> and <output>, lets you associate the label with some control. */
  htmlFor?: string;
  /** Specifies whether the element should be hidden. */
  hidden?: boolean | string;
  /** A unique identifier for the element. */
  id?: string;
  /** Keys tell React which array item each component corresponds to */
  key?: string | number;
  /** Specifies the language of the element. */
  lang?: string;
  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
  part?: string;
  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
  ref?: T | ((e: T) => void);
  /** Adds a reference for a custom element slot */
  slot?: string;
  /** Prop for setting inline styles */
  style?: Record<string, string | number>;
  /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
  tabIndex?: number;
  /** Specifies the tooltip text for the element. */
  title?: string;
  /** Passing 'no' excludes the element content from being translated. */
  translate?: "yes" | "no";
  /** The popover global attribute is used to designate an element as a popover element. */
  popover?: "auto" | "hint" | "manual";
  /** Turns an element element into a popover control button; takes the ID of the popover element to control as its value. */
  popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
  /** Specifies the action to be performed on a popover element being controlled by a control element. */
  popovertargetaction?: "show" | "hide" | "toggle";
} & Record<string, any>;

type BaseEvents = {};

export type CbpAccordionProps = {
  /**  */
  multiple?: CbpAccordion["multiple"];
  /**  */
  context?: CbpAccordion["context"];
  /**  */
  sx?: CbpAccordion["sx"];
};

export type CbpAccordionSolidJsProps = {
  /**  */
  "prop:multiple"?: CbpAccordion["multiple"];
  /**  */
  "prop:context"?: CbpAccordion["context"];
  /**  */
  "prop:sx"?: CbpAccordion["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpActionBarProps = {
  /**  */
  variant?: CbpActionBar["variant"];
  /**  */
  context?: CbpActionBar["context"];
  /**  */
  sx?: CbpActionBar["sx"];
};

export type CbpActionBarSolidJsProps = {
  /**  */
  "prop:variant"?: CbpActionBar["variant"];
  /**  */
  "prop:context"?: CbpActionBar["context"];
  /**  */
  "prop:sx"?: CbpActionBar["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpAccordionItemProps = {
  /**  */
  "heading-id"?: CbpAccordionItem["headingId"];
  /**  */
  headingId?: CbpAccordionItem["headingId"];
  /**  */
  open?: CbpAccordionItem["open"];
  /**  */
  label?: CbpAccordionItem["label"];
  /**  */
  "heading-level"?: CbpAccordionItem["headingLevel"];
  /**  */
  headingLevel?: CbpAccordionItem["headingLevel"];
  /**  */
  color?: CbpAccordionItem["color"];
  /**  */
  sx?: CbpAccordionItem["sx"];

  /** A custom event emitted when the accordion item control is activated. */
  onaccordionItemClick?: (e: EventEmitter) => void;
};

export type CbpAccordionItemSolidJsProps = {
  /**  */
  "attr:heading-id"?: CbpAccordionItem["headingId"];
  /**  */
  "prop:headingId"?: CbpAccordionItem["headingId"];
  /**  */
  "prop:open"?: CbpAccordionItem["open"];
  /**  */
  "prop:label"?: CbpAccordionItem["label"];
  /**  */
  "attr:heading-level"?: CbpAccordionItem["headingLevel"];
  /**  */
  "prop:headingLevel"?: CbpAccordionItem["headingLevel"];
  /**  */
  "prop:color"?: CbpAccordionItem["color"];
  /**  */
  "prop:sx"?: CbpAccordionItem["sx"];
  /** A custom event emitted when the accordion item control is activated. */
  "on:accordionItemClick"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpAppProps = {
  /**  */
  theme?: CbpApp["theme"];
  /**  */
  debug?: CbpApp["debug"];
  /**  */
  "app-name"?: CbpApp["appName"];
  /**  */
  appName?: CbpApp["appName"];
  /**  */
  "app-version"?: CbpApp["appVersion"];
  /**  */
  appVersion?: CbpApp["appVersion"];
};

export type CbpAppSolidJsProps = {
  /**  */
  "prop:theme"?: CbpApp["theme"];
  /**  */
  "prop:debug"?: CbpApp["debug"];
  /**  */
  "attr:app-name"?: CbpApp["appName"];
  /**  */
  "prop:appName"?: CbpApp["appName"];
  /**  */
  "attr:app-version"?: CbpApp["appVersion"];
  /**  */
  "prop:appVersion"?: CbpApp["appVersion"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpAppHeaderProps = {
  /**  */
  "subnav-drawer-id"?: CbpAppHeader["subnavDrawerId"];
  /**  */
  subnavDrawerId?: CbpAppHeader["subnavDrawerId"];
  /**  */
  search?: CbpAppHeader["search"];
  /**  */
  "search-method"?: CbpAppHeader["searchMethod"];
  /**  */
  searchMethod?: CbpAppHeader["searchMethod"];
  /**  */
  "search-action"?: CbpAppHeader["searchAction"];
  /**  */
  searchAction?: CbpAppHeader["searchAction"];

  /** A custom event emitted in accordance with the native input's onInput event. */
  onsearchInput?: (e: EventEmitter) => void;
  /** A custom event emitted in accordance with the native search form's submit event. */
  onsearchSubmit?: (e: EventEmitter) => void;
};

export type CbpAppHeaderSolidJsProps = {
  /**  */
  "attr:subnav-drawer-id"?: CbpAppHeader["subnavDrawerId"];
  /**  */
  "prop:subnavDrawerId"?: CbpAppHeader["subnavDrawerId"];
  /**  */
  "prop:search"?: CbpAppHeader["search"];
  /**  */
  "attr:search-method"?: CbpAppHeader["searchMethod"];
  /**  */
  "prop:searchMethod"?: CbpAppHeader["searchMethod"];
  /**  */
  "attr:search-action"?: CbpAppHeader["searchAction"];
  /**  */
  "prop:searchAction"?: CbpAppHeader["searchAction"];
  /** A custom event emitted in accordance with the native input's onInput event. */
  "on:searchInput"?: (e: EventEmitter) => void;
  /** A custom event emitted in accordance with the native search form's submit event. */
  "on:searchSubmit"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpBadgeProps = {
  /**  */
  color?: CbpBadge["color"];
  /**  */
  context?: CbpBadge["context"];
  /**  */
  sx?: CbpBadge["sx"];
};

export type CbpBadgeSolidJsProps = {
  /**  */
  "prop:color"?: CbpBadge["color"];
  /**  */
  "prop:context"?: CbpBadge["context"];
  /**  */
  "prop:sx"?: CbpBadge["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpBannerProps = {
  /**  */
  color?: CbpBanner["color"];

  /** A custom event emitted with the Banner is dismissed. */
  onbannerDismiss?: (e: EventEmitter) => void;
};

export type CbpBannerSolidJsProps = {
  /**  */
  "prop:color"?: CbpBanner["color"];
  /** A custom event emitted with the Banner is dismissed. */
  "on:bannerDismiss"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpBreadcrumbProps = {
  /**  */
  divider?: CbpBreadcrumb["divider"];
  /**  */
  context?: CbpBreadcrumb["context"];
  /**  */
  sx?: CbpBreadcrumb["sx"];
};

export type CbpBreadcrumbSolidJsProps = {
  /**  */
  "prop:divider"?: CbpBreadcrumb["divider"];
  /**  */
  "prop:context"?: CbpBreadcrumb["context"];
  /**  */
  "prop:sx"?: CbpBreadcrumb["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpButtonProps = {
  /**  */
  tag?: CbpButton["tag"];
  /**  */
  type?: CbpButton["type"];
  /**  */
  fill?: CbpButton["fill"];
  /**  */
  color?: CbpButton["color"];
  /**  */
  variant?: CbpButton["variant"];
  /**  */
  "control-id"?: CbpButton["controlId"];
  /**  */
  controlId?: CbpButton["controlId"];
  /**  */
  name?: CbpButton["name"];
  /**  */
  value?: CbpButton["value"];
  /**  */
  href?: CbpButton["href"];
  /**  */
  rel?: CbpButton["rel"];
  /**  */
  target?: CbpButton["target"];
  /**  */
  download?: CbpButton["download"];
  /**  */
  width?: CbpButton["width"];
  /**  */
  height?: CbpButton["height"];
  /**  */
  pressed?: CbpButton["pressed"];
  /**  */
  expanded?: CbpButton["expanded"];
  /**  */
  controls?: CbpButton["controls"];
  /**  */
  "target-prop"?: CbpButton["targetProp"];
  /**  */
  targetProp?: CbpButton["targetProp"];
  /**  */
  "accessibility-text"?: CbpButton["accessibilityText"];
  /**  */
  accessibilityText?: CbpButton["accessibilityText"];
  /**  */
  disabled?: CbpButton["disabled"];
  /**  */
  context?: CbpButton["context"];
  /**  */
  sx?: CbpButton["sx"];

  /** A custom event emitted when the click event occurs for either a rendered button or anchor/link. */
  onbuttonClick?: (e: EventEmitter) => void;
  /** A custom event emitted when the component has completed loading and its internal lifecycles. */
  oncomponentLoad?: (e: EventEmitter) => void;
};

export type CbpButtonSolidJsProps = {
  /**  */
  "prop:tag"?: CbpButton["tag"];
  /**  */
  "prop:type"?: CbpButton["type"];
  /**  */
  "prop:fill"?: CbpButton["fill"];
  /**  */
  "prop:color"?: CbpButton["color"];
  /**  */
  "prop:variant"?: CbpButton["variant"];
  /**  */
  "attr:control-id"?: CbpButton["controlId"];
  /**  */
  "prop:controlId"?: CbpButton["controlId"];
  /**  */
  "prop:name"?: CbpButton["name"];
  /**  */
  "prop:value"?: CbpButton["value"];
  /**  */
  "prop:href"?: CbpButton["href"];
  /**  */
  "prop:rel"?: CbpButton["rel"];
  /**  */
  "prop:target"?: CbpButton["target"];
  /**  */
  "prop:download"?: CbpButton["download"];
  /**  */
  "prop:width"?: CbpButton["width"];
  /**  */
  "prop:height"?: CbpButton["height"];
  /**  */
  "prop:pressed"?: CbpButton["pressed"];
  /**  */
  "prop:expanded"?: CbpButton["expanded"];
  /**  */
  "prop:controls"?: CbpButton["controls"];
  /**  */
  "attr:target-prop"?: CbpButton["targetProp"];
  /**  */
  "prop:targetProp"?: CbpButton["targetProp"];
  /**  */
  "attr:accessibility-text"?: CbpButton["accessibilityText"];
  /**  */
  "prop:accessibilityText"?: CbpButton["accessibilityText"];
  /**  */
  "prop:disabled"?: CbpButton["disabled"];
  /**  */
  "prop:context"?: CbpButton["context"];
  /**  */
  "prop:sx"?: CbpButton["sx"];
  /** A custom event emitted when the click event occurs for either a rendered button or anchor/link. */
  "on:buttonClick"?: (e: EventEmitter) => void;
  /** A custom event emitted when the component has completed loading and its internal lifecycles. */
  "on:componentLoad"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpCardProps = {
  /**  */
  color?: CbpCard["color"];
  /**  */
  variant?: CbpCard["variant"];
  /**  */
  interactive?: CbpCard["interactive"];
  /**  */
  href?: CbpCard["href"];
  /**  */
  disabled?: CbpCard["disabled"];
  /**  */
  stretch?: CbpCard["stretch"];
  /**  */
  sx?: CbpCard["sx"];
  /**  */
  context?: CbpCard["context"];
};

export type CbpCardSolidJsProps = {
  /**  */
  "prop:color"?: CbpCard["color"];
  /**  */
  "prop:variant"?: CbpCard["variant"];
  /**  */
  "prop:interactive"?: CbpCard["interactive"];
  /**  */
  "prop:href"?: CbpCard["href"];
  /**  */
  "prop:disabled"?: CbpCard["disabled"];
  /**  */
  "prop:stretch"?: CbpCard["stretch"];
  /**  */
  "prop:sx"?: CbpCard["sx"];
  /**  */
  "prop:context"?: CbpCard["context"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpCarouselProps = {
  /**  */
  height?: CbpCarousel["height"];
  /**  */
  width?: CbpCarousel["width"];
  /**  */
  current?: CbpCarousel["current"];
  /**  */
  sx?: CbpCarousel["sx"];
  /**  */
  context?: CbpCarousel["context"];
};

export type CbpCarouselSolidJsProps = {
  /**  */
  "prop:height"?: CbpCarousel["height"];
  /**  */
  "prop:width"?: CbpCarousel["width"];
  /**  */
  "prop:current"?: CbpCarousel["current"];
  /**  */
  "prop:sx"?: CbpCarousel["sx"];
  /**  */
  "prop:context"?: CbpCarousel["context"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpCarouselItemProps = {
  /**  */
  height?: CbpCarouselItem["height"];
  /**  */
  width?: CbpCarouselItem["width"];
};

export type CbpCarouselItemSolidJsProps = {
  /**  */
  "prop:height"?: CbpCarouselItem["height"];
  /**  */
  "prop:width"?: CbpCarouselItem["width"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpCheckboxProps = {
  /**  */
  name?: CbpCheckbox["name"];
  /**  */
  value?: CbpCheckbox["value"];
  /**  */
  "field-id"?: CbpCheckbox["fieldId"];
  /**  */
  fieldId?: CbpCheckbox["fieldId"];
  /**  */
  checked?: CbpCheckbox["checked"];
  /**  */
  indeterminate?: CbpCheckbox["indeterminate"];
  /**  */
  disabled?: CbpCheckbox["disabled"];
  /**  */
  context?: CbpCheckbox["context"];
  /**  */
  sx?: CbpCheckbox["sx"];

  /** A custom event emitted when the checked state changes due to user interaction. */
  onstateChanged?: (e: EventEmitter) => void;
};

export type CbpCheckboxSolidJsProps = {
  /**  */
  "prop:name"?: CbpCheckbox["name"];
  /**  */
  "prop:value"?: CbpCheckbox["value"];
  /**  */
  "attr:field-id"?: CbpCheckbox["fieldId"];
  /**  */
  "prop:fieldId"?: CbpCheckbox["fieldId"];
  /**  */
  "prop:checked"?: CbpCheckbox["checked"];
  /**  */
  "prop:indeterminate"?: CbpCheckbox["indeterminate"];
  /**  */
  "prop:disabled"?: CbpCheckbox["disabled"];
  /**  */
  "prop:context"?: CbpCheckbox["context"];
  /**  */
  "prop:sx"?: CbpCheckbox["sx"];
  /** A custom event emitted when the checked state changes due to user interaction. */
  "on:stateChanged"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpChipProps = {
  /**  */
  name?: CbpChip["name"];
  /**  */
  value?: CbpChip["value"];
  /**  */
  pressed?: CbpChip["pressed"];
  /**  */
  disabled?: CbpChip["disabled"];
  /**  */
  context?: CbpChip["context"];
  /**  */
  sx?: CbpChip["sx"];

  /** A custom event emitted when the chip is activated/toggled. */
  onchipClick?: (e: EventEmitter) => void;
};

export type CbpChipSolidJsProps = {
  /**  */
  "prop:name"?: CbpChip["name"];
  /**  */
  "prop:value"?: CbpChip["value"];
  /**  */
  "prop:pressed"?: CbpChip["pressed"];
  /**  */
  "prop:disabled"?: CbpChip["disabled"];
  /**  */
  "prop:context"?: CbpChip["context"];
  /**  */
  "prop:sx"?: CbpChip["sx"];
  /** A custom event emitted when the chip is activated/toggled. */
  "on:chipClick"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpCodeSnippetProps = {
  /**  */
  variant?: CbpCodeSnippet["variant"];
  /**  */
  height?: CbpCodeSnippet["height"];
  /**  */
  context?: CbpCodeSnippet["context"];
  /**  */
  sx?: CbpCodeSnippet["sx"];

  /** Emits a custom event when the "Copy" button is activated, copying the code to the clipboard. */
  oncopyTextClick?: (e: EventEmitter) => void;
  /** Emits a custom event when the the "Show More/Less" control is activated (for code blocks overflowing the specified height). */
  ontoggleShowAllClick?: (e: EventEmitter) => void;
};

export type CbpCodeSnippetSolidJsProps = {
  /**  */
  "prop:variant"?: CbpCodeSnippet["variant"];
  /**  */
  "prop:height"?: CbpCodeSnippet["height"];
  /**  */
  "prop:context"?: CbpCodeSnippet["context"];
  /**  */
  "prop:sx"?: CbpCodeSnippet["sx"];
  /** Emits a custom event when the "Copy" button is activated, copying the code to the clipboard. */
  "on:copyTextClick"?: (e: EventEmitter) => void;
  /** Emits a custom event when the the "Show More/Less" control is activated (for code blocks overflowing the specified height). */
  "on:toggleShowAllClick"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpContainerProps = {
  /**  */
  background?: CbpContainer["background"];
  /**  */
  "text-color"?: CbpContainer["textColor"];
  /**  */
  textColor?: CbpContainer["textColor"];
  /**  */
  width?: CbpContainer["width"];
  /**  */
  sx?: CbpContainer["sx"];
};

export type CbpContainerSolidJsProps = {
  /**  */
  "prop:background"?: CbpContainer["background"];
  /**  */
  "attr:text-color"?: CbpContainer["textColor"];
  /**  */
  "prop:textColor"?: CbpContainer["textColor"];
  /**  */
  "prop:width"?: CbpContainer["width"];
  /**  */
  "prop:sx"?: CbpContainer["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpDialogProps = {
  /**  */
  open?: CbpDialog["open"];
  /**  */
  height?: CbpDialog["height"];
  /**  */
  width?: CbpDialog["width"];
  /**  */
  uid?: CbpDialog["uid"];
  /**  */
  "accessibility-text"?: CbpDialog["accessibilityText"];
  /**  */
  accessibilityText?: CbpDialog["accessibilityText"];
  /**  */
  color?: CbpDialog["color"];
  /**  */
  sx?: CbpDialog["sx"];

  /** Custom event fired when the dialog is opened. */
  ondialogOpen?: (e: EventEmitter) => void;
  /** Custom event fired when the dialog is closed. */
  ondialogClose?: (e: EventEmitter) => void;
};

export type CbpDialogSolidJsProps = {
  /**  */
  "prop:open"?: CbpDialog["open"];
  /**  */
  "prop:height"?: CbpDialog["height"];
  /**  */
  "prop:width"?: CbpDialog["width"];
  /**  */
  "prop:uid"?: CbpDialog["uid"];
  /**  */
  "attr:accessibility-text"?: CbpDialog["accessibilityText"];
  /**  */
  "prop:accessibilityText"?: CbpDialog["accessibilityText"];
  /**  */
  "prop:color"?: CbpDialog["color"];
  /**  */
  "prop:sx"?: CbpDialog["sx"];
  /** Custom event fired when the dialog is opened. */
  "on:dialogOpen"?: (e: EventEmitter) => void;
  /** Custom event fired when the dialog is closed. */
  "on:dialogClose"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpDotIndicatorProps = {
  /**  */
  current?: CbpDotIndicator["current"];
  /**  */
  "item-name"?: CbpDotIndicator["itemName"];
  /**  */
  itemName?: CbpDotIndicator["itemName"];
  /**  */
  items?: CbpDotIndicator["items"];

  /** Custom event emitted when the Dot-indicator changes active indicator */
  onnavigateCollection?: (e: EventEmitter) => void;
};

export type CbpDotIndicatorSolidJsProps = {
  /**  */
  "prop:current"?: CbpDotIndicator["current"];
  /**  */
  "attr:item-name"?: CbpDotIndicator["itemName"];
  /**  */
  "prop:itemName"?: CbpDotIndicator["itemName"];
  /**  */
  "prop:items"?: CbpDotIndicator["items"];
  /** Custom event emitted when the Dot-indicator changes active indicator */
  "on:navigateCollection"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpDrawerProps = {
  /**  */
  position?: CbpDrawer["position"];
  /**  */
  open?: CbpDrawer["open"];
  /**  */
  uid?: CbpDrawer["uid"];
  /**  */
  "accessibility-text"?: CbpDrawer["accessibilityText"];
  /**  */
  accessibilityText?: CbpDrawer["accessibilityText"];
  /**  */
  "persist-at"?: CbpDrawer["persistAt"];
  /**  */
  persistAt?: CbpDrawer["persistAt"];
  /**  */
  context?: CbpDrawer["context"];
  /**  */
  sx?: CbpDrawer["sx"];
  /**  */
  persistent?: CbpDrawer["persistent"];

  /** Custom event fired when the drawer is opened. */
  ondrawerOpen?: (e: EventEmitter) => void;
  /** Custom event fired when the drawer is closed. */
  ondrawerClose?: (e: EventEmitter) => void;
};

export type CbpDrawerSolidJsProps = {
  /**  */
  "prop:position"?: CbpDrawer["position"];
  /**  */
  "prop:open"?: CbpDrawer["open"];
  /**  */
  "prop:uid"?: CbpDrawer["uid"];
  /**  */
  "attr:accessibility-text"?: CbpDrawer["accessibilityText"];
  /**  */
  "prop:accessibilityText"?: CbpDrawer["accessibilityText"];
  /**  */
  "attr:persist-at"?: CbpDrawer["persistAt"];
  /**  */
  "prop:persistAt"?: CbpDrawer["persistAt"];
  /**  */
  "prop:context"?: CbpDrawer["context"];
  /**  */
  "prop:sx"?: CbpDrawer["sx"];
  /**  */
  "prop:persistent"?: CbpDrawer["persistent"];
  /** Custom event fired when the drawer is opened. */
  "on:drawerOpen"?: (e: EventEmitter) => void;
  /** Custom event fired when the drawer is closed. */
  "on:drawerClose"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpDropdownProps = {
  /**  */
  multiple?: CbpDropdown["multiple"];
  /**  */
  filter?: CbpDropdown["filter"];
  /**  */
  async?: CbpDropdown["async"];
  /**  */
  "minimum-input-length"?: CbpDropdown["minimumInputLength"];
  /**  */
  minimumInputLength?: CbpDropdown["minimumInputLength"];
  /**  */
  items?: CbpDropdown["items"];
  /**  */
  create?: CbpDropdown["create"];
  /**  */
  "field-id"?: CbpDropdown["fieldId"];
  /**  */
  fieldId?: CbpDropdown["fieldId"];
  /**  */
  name?: CbpDropdown["name"];
  /**  */
  placeholder?: CbpDropdown["placeholder"];
  /**  */
  "selected-label"?: CbpDropdown["selectedLabel"];
  /**  */
  selectedLabel?: CbpDropdown["selectedLabel"];
  /**  */
  value?: CbpDropdown["value"];
  /**  */
  open?: CbpDropdown["open"];
  /**  */
  error?: CbpDropdown["error"];
  /**  */
  readonly?: CbpDropdown["readonly"];
  /**  */
  disabled?: CbpDropdown["disabled"];
  /**  */
  context?: CbpDropdown["context"];
  /**  */
  sx?: CbpDropdown["sx"];
  /**  */
  debug?: CbpDropdown["debug"];

  /** A custom event emitted when the a selection is made in the dropdown. */
  onvalueChange?: (e: EventEmitter) => void;
  /** A custom event that is fired when the "create item" option is clicked. */
  oncreateItem?: (e: EventEmitter) => void;
  /** A custom event that is fired when a key is pressed while filtering a combobox. */
  onfilterKeypress?: (e: EventEmitter) => void;
  /** A custom event emitted for asynchronous comboboxes (`async=true` and `filter=true`) and 
the search string meets the `minimumInputLength` requirement. 
This event can be listened for and the `items` (JSON) updated via application logic/service call. */
  onpopulateCombobox?: (e: EventEmitter) => void;
};

export type CbpDropdownSolidJsProps = {
  /**  */
  "prop:multiple"?: CbpDropdown["multiple"];
  /**  */
  "prop:filter"?: CbpDropdown["filter"];
  /**  */
  "prop:async"?: CbpDropdown["async"];
  /**  */
  "attr:minimum-input-length"?: CbpDropdown["minimumInputLength"];
  /**  */
  "prop:minimumInputLength"?: CbpDropdown["minimumInputLength"];
  /**  */
  "prop:items"?: CbpDropdown["items"];
  /**  */
  "prop:create"?: CbpDropdown["create"];
  /**  */
  "attr:field-id"?: CbpDropdown["fieldId"];
  /**  */
  "prop:fieldId"?: CbpDropdown["fieldId"];
  /**  */
  "prop:name"?: CbpDropdown["name"];
  /**  */
  "prop:placeholder"?: CbpDropdown["placeholder"];
  /**  */
  "attr:selected-label"?: CbpDropdown["selectedLabel"];
  /**  */
  "prop:selectedLabel"?: CbpDropdown["selectedLabel"];
  /**  */
  "prop:value"?: CbpDropdown["value"];
  /**  */
  "prop:open"?: CbpDropdown["open"];
  /**  */
  "prop:error"?: CbpDropdown["error"];
  /**  */
  "prop:readonly"?: CbpDropdown["readonly"];
  /**  */
  "prop:disabled"?: CbpDropdown["disabled"];
  /**  */
  "prop:context"?: CbpDropdown["context"];
  /**  */
  "prop:sx"?: CbpDropdown["sx"];
  /**  */
  "prop:debug"?: CbpDropdown["debug"];
  /** A custom event emitted when the a selection is made in the dropdown. */
  "on:valueChange"?: (e: EventEmitter) => void;
  /** A custom event that is fired when the "create item" option is clicked. */
  "on:createItem"?: (e: EventEmitter) => void;
  /** A custom event that is fired when a key is pressed while filtering a combobox. */
  "on:filterKeypress"?: (e: EventEmitter) => void;
  /** A custom event emitted for asynchronous comboboxes (`async=true` and `filter=true`) and 
the search string meets the `minimumInputLength` requirement. 
This event can be listened for and the `items` (JSON) updated via application logic/service call. */
  "on:populateCombobox"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpDropdownItemProps = {
  /**  */
  value?: CbpDropdownItem["value"];
  /**  */
  disabled?: CbpDropdownItem["disabled"];
  /**  */
  current?: CbpDropdownItem["current"];
  /**  */
  "item-id"?: CbpDropdownItem["itemId"];
  /**  */
  itemId?: CbpDropdownItem["itemId"];
  /**  */
  selected?: CbpDropdownItem["selected"];

  /** Internal use: A custom event emitted when a dropdown item is clicked/activated and is handled by the 
parent dropdown, also resulting in a `valueChange` event emitted from the dropdown component. */
  ondropdownItemClick?: (e: EventEmitter) => void;
};

export type CbpDropdownItemSolidJsProps = {
  /**  */
  "prop:value"?: CbpDropdownItem["value"];
  /**  */
  "prop:disabled"?: CbpDropdownItem["disabled"];
  /**  */
  "prop:current"?: CbpDropdownItem["current"];
  /**  */
  "attr:item-id"?: CbpDropdownItem["itemId"];
  /**  */
  "prop:itemId"?: CbpDropdownItem["itemId"];
  /**  */
  "prop:selected"?: CbpDropdownItem["selected"];
  /** Internal use: A custom event emitted when a dropdown item is clicked/activated and is handled by the 
parent dropdown, also resulting in a `valueChange` event emitted from the dropdown component. */
  "on:dropdownItemClick"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpExpandProps = {
  /**  */
  "heading-id"?: CbpExpand["headingId"];
  /**  */
  headingId?: CbpExpand["headingId"];
  /**  */
  open?: CbpExpand["open"];
  /**  */
  label?: CbpExpand["label"];
  /**  */
  "heading-level"?: CbpExpand["headingLevel"];
  /**  */
  headingLevel?: CbpExpand["headingLevel"];
  /**  */
  context?: CbpExpand["context"];
  /**  */
  sx?: CbpExpand["sx"];

  /** A custom event emitted when the accordion item control is activated. */
  onexpandClick?: (e: EventEmitter) => void;
};

export type CbpExpandSolidJsProps = {
  /**  */
  "attr:heading-id"?: CbpExpand["headingId"];
  /**  */
  "prop:headingId"?: CbpExpand["headingId"];
  /**  */
  "prop:open"?: CbpExpand["open"];
  /**  */
  "prop:label"?: CbpExpand["label"];
  /**  */
  "attr:heading-level"?: CbpExpand["headingLevel"];
  /**  */
  "prop:headingLevel"?: CbpExpand["headingLevel"];
  /**  */
  "prop:context"?: CbpExpand["context"];
  /**  */
  "prop:sx"?: CbpExpand["sx"];
  /** A custom event emitted when the accordion item control is activated. */
  "on:expandClick"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpFileInputProps = {
  /**  */
  name?: CbpFileInput["name"];
  /**  */
  "field-id"?: CbpFileInput["fieldId"];
  /**  */
  fieldId?: CbpFileInput["fieldId"];
  /**  */
  multiple?: CbpFileInput["multiple"];
  /**  */
  accept?: CbpFileInput["accept"];
  /**  */
  enhanced?: CbpFileInput["enhanced"];
  /**  */
  status?: CbpFileInput["status"];
  /**  */
  error?: CbpFileInput["error"];
  /**  */
  disabled?: CbpFileInput["disabled"];
  /**  */
  context?: CbpFileInput["context"];
  /**  */
  sx?: CbpFileInput["sx"];

  /** A custom event emitted when the value of the component changes, either by selecting (non-duplicate) files 
or canceling the dialog, or clicking the button in the file list to remove a file. */
  onvalueChange?: (e: EventEmitter) => void;
};

export type CbpFileInputSolidJsProps = {
  /**  */
  "prop:name"?: CbpFileInput["name"];
  /**  */
  "attr:field-id"?: CbpFileInput["fieldId"];
  /**  */
  "prop:fieldId"?: CbpFileInput["fieldId"];
  /**  */
  "prop:multiple"?: CbpFileInput["multiple"];
  /**  */
  "prop:accept"?: CbpFileInput["accept"];
  /**  */
  "prop:enhanced"?: CbpFileInput["enhanced"];
  /**  */
  "prop:status"?: CbpFileInput["status"];
  /**  */
  "prop:error"?: CbpFileInput["error"];
  /**  */
  "prop:disabled"?: CbpFileInput["disabled"];
  /**  */
  "prop:context"?: CbpFileInput["context"];
  /**  */
  "prop:sx"?: CbpFileInput["sx"];
  /** A custom event emitted when the value of the component changes, either by selecting (non-duplicate) files 
or canceling the dialog, or clicking the button in the file list to remove a file. */
  "on:valueChange"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpFlexProps = {
  /**  */
  display?: CbpFlex["display"];
  /**  */
  wrap?: CbpFlex["wrap"];
  /**  */
  direction?: CbpFlex["direction"];
  /**  */
  "align-items"?: CbpFlex["alignItems"];
  /**  */
  alignItems?: CbpFlex["alignItems"];
  /**  */
  "align-content"?: CbpFlex["alignContent"];
  /**  */
  alignContent?: CbpFlex["alignContent"];
  /**  */
  "justify-content"?: CbpFlex["justifyContent"];
  /**  */
  justifyContent?: CbpFlex["justifyContent"];
  /**  */
  gap?: CbpFlex["gap"];
  /**  */
  breakpoint?: CbpFlex["breakpoint"];
  /**  */
  "content-breakpoint"?: CbpFlex["contentBreakpoint"];
  /**  */
  contentBreakpoint?: CbpFlex["contentBreakpoint"];
  /**  */
  sx?: CbpFlex["sx"];
};

export type CbpFlexSolidJsProps = {
  /**  */
  "prop:display"?: CbpFlex["display"];
  /**  */
  "prop:wrap"?: CbpFlex["wrap"];
  /**  */
  "prop:direction"?: CbpFlex["direction"];
  /**  */
  "attr:align-items"?: CbpFlex["alignItems"];
  /**  */
  "prop:alignItems"?: CbpFlex["alignItems"];
  /**  */
  "attr:align-content"?: CbpFlex["alignContent"];
  /**  */
  "prop:alignContent"?: CbpFlex["alignContent"];
  /**  */
  "attr:justify-content"?: CbpFlex["justifyContent"];
  /**  */
  "prop:justifyContent"?: CbpFlex["justifyContent"];
  /**  */
  "prop:gap"?: CbpFlex["gap"];
  /**  */
  "prop:breakpoint"?: CbpFlex["breakpoint"];
  /**  */
  "attr:content-breakpoint"?: CbpFlex["contentBreakpoint"];
  /**  */
  "prop:contentBreakpoint"?: CbpFlex["contentBreakpoint"];
  /**  */
  "prop:sx"?: CbpFlex["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpFlexItemProps = {
  /**  */
  "align-self"?: CbpFlexItem["alignSelf"];
  /**  */
  alignSelf?: CbpFlexItem["alignSelf"];
  /**  */
  order?: CbpFlexItem["order"];
  /**  */
  "flex-grow"?: CbpFlexItem["flexGrow"];
  /**  */
  flexGrow?: CbpFlexItem["flexGrow"];
  /**  */
  "flex-shrink"?: CbpFlexItem["flexShrink"];
  /**  */
  flexShrink?: CbpFlexItem["flexShrink"];
  /**  */
  "flex-basis"?: CbpFlexItem["flexBasis"];
  /**  */
  flexBasis?: CbpFlexItem["flexBasis"];
  /**  */
  sx?: CbpFlexItem["sx"];
};

export type CbpFlexItemSolidJsProps = {
  /**  */
  "attr:align-self"?: CbpFlexItem["alignSelf"];
  /**  */
  "prop:alignSelf"?: CbpFlexItem["alignSelf"];
  /**  */
  "prop:order"?: CbpFlexItem["order"];
  /**  */
  "attr:flex-grow"?: CbpFlexItem["flexGrow"];
  /**  */
  "prop:flexGrow"?: CbpFlexItem["flexGrow"];
  /**  */
  "attr:flex-shrink"?: CbpFlexItem["flexShrink"];
  /**  */
  "prop:flexShrink"?: CbpFlexItem["flexShrink"];
  /**  */
  "attr:flex-basis"?: CbpFlexItem["flexBasis"];
  /**  */
  "prop:flexBasis"?: CbpFlexItem["flexBasis"];
  /**  */
  "prop:sx"?: CbpFlexItem["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpFloatingActionProps = {
  /**  */
  top?: CbpFloatingAction["top"];
  /**  */
  right?: CbpFloatingAction["right"];
  /**  */
  bottom?: CbpFloatingAction["bottom"];
  /**  */
  left?: CbpFloatingAction["left"];
  /**  */
  sx?: CbpFloatingAction["sx"];
};

export type CbpFloatingActionSolidJsProps = {
  /**  */
  "prop:top"?: CbpFloatingAction["top"];
  /**  */
  "prop:right"?: CbpFloatingAction["right"];
  /**  */
  "prop:bottom"?: CbpFloatingAction["bottom"];
  /**  */
  "prop:left"?: CbpFloatingAction["left"];
  /**  */
  "prop:sx"?: CbpFloatingAction["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpFooterProps = {
  /**  */
  sx?: CbpFooter["sx"];
};

export type CbpFooterSolidJsProps = {
  /**  */
  "prop:sx"?: CbpFooter["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpFormProps = {
  /**  */
  "prevent-submit"?: CbpForm["preventSubmit"];
  /**  */
  preventSubmit?: CbpForm["preventSubmit"];
  /**  */
  debug?: CbpForm["debug"];

  /**  */
  onsuppressedSubmit?: (e: EventEmitter) => void;
};

export type CbpFormSolidJsProps = {
  /**  */
  "bool:prevent-submit"?: CbpForm["preventSubmit"];
  /**  */
  "prop:preventSubmit"?: CbpForm["preventSubmit"];
  /**  */
  "prop:debug"?: CbpForm["debug"];
  /**  */
  "on:suppressedSubmit"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpFormFieldProps = {
  /**  */
  label?: CbpFormField["label"];
  /**  */
  description?: CbpFormField["description"];
  /**  */
  "field-id"?: CbpFormField["fieldId"];
  /**  */
  fieldId?: CbpFormField["fieldId"];
  /**  */
  group?: CbpFormField["group"];
  /**  */
  error?: CbpFormField["error"];
  /**  */
  "error-messages"?: CbpFormField["errorMessages"];
  /**  */
  errorMessages?: CbpFormField["errorMessages"];
  /**  */
  readonly?: CbpFormField["readonly"];
  /**  */
  disabled?: CbpFormField["disabled"];
  /**  */
  context?: CbpFormField["context"];
  /**  */
  sx?: CbpFormField["sx"];

  /** A custom event emitted when the the nested input is changed by user interaction. */
  onvalueChange?: (e: EventEmitter) => void;
};

export type CbpFormFieldSolidJsProps = {
  /**  */
  "prop:label"?: CbpFormField["label"];
  /**  */
  "prop:description"?: CbpFormField["description"];
  /**  */
  "attr:field-id"?: CbpFormField["fieldId"];
  /**  */
  "prop:fieldId"?: CbpFormField["fieldId"];
  /**  */
  "prop:group"?: CbpFormField["group"];
  /**  */
  "prop:error"?: CbpFormField["error"];
  /**  */
  "attr:error-messages"?: CbpFormField["errorMessages"];
  /**  */
  "prop:errorMessages"?: CbpFormField["errorMessages"];
  /**  */
  "prop:readonly"?: CbpFormField["readonly"];
  /**  */
  "prop:disabled"?: CbpFormField["disabled"];
  /**  */
  "prop:context"?: CbpFormField["context"];
  /**  */
  "prop:sx"?: CbpFormField["sx"];
  /** A custom event emitted when the the nested input is changed by user interaction. */
  "on:valueChange"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpFormFieldWrapperProps = {};

export type CbpFormFieldWrapperSolidJsProps = {
  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpGridProps = {
  /**  */
  display?: CbpGrid["display"];
  /**  */
  "grid-template-areas"?: CbpGrid["gridTemplateAreas"];
  /**  */
  gridTemplateAreas?: CbpGrid["gridTemplateAreas"];
  /**  */
  "grid-template-columns"?: CbpGrid["gridTemplateColumns"];
  /**  */
  gridTemplateColumns?: CbpGrid["gridTemplateColumns"];
  /**  */
  "grid-template-rows"?: CbpGrid["gridTemplateRows"];
  /**  */
  gridTemplateRows?: CbpGrid["gridTemplateRows"];
  /**  */
  "grid-auto-flow"?: CbpGrid["gridAutoFlow"];
  /**  */
  gridAutoFlow?: CbpGrid["gridAutoFlow"];
  /**  */
  "grid-auto-columns"?: CbpGrid["gridAutoColumns"];
  /**  */
  gridAutoColumns?: CbpGrid["gridAutoColumns"];
  /**  */
  "grid-auto-rows"?: CbpGrid["gridAutoRows"];
  /**  */
  gridAutoRows?: CbpGrid["gridAutoRows"];
  /**  */
  "align-items"?: CbpGrid["alignItems"];
  /**  */
  alignItems?: CbpGrid["alignItems"];
  /**  */
  "justify-items"?: CbpGrid["justifyItems"];
  /**  */
  justifyItems?: CbpGrid["justifyItems"];
  /**  */
  "align-content"?: CbpGrid["alignContent"];
  /**  */
  alignContent?: CbpGrid["alignContent"];
  /**  */
  "justify-content"?: CbpGrid["justifyContent"];
  /**  */
  justifyContent?: CbpGrid["justifyContent"];
  /**  */
  gap?: CbpGrid["gap"];
  /**  */
  breakpoint?: CbpGrid["breakpoint"];
  /**  */
  sx?: CbpGrid["sx"];
};

export type CbpGridSolidJsProps = {
  /**  */
  "prop:display"?: CbpGrid["display"];
  /**  */
  "attr:grid-template-areas"?: CbpGrid["gridTemplateAreas"];
  /**  */
  "prop:gridTemplateAreas"?: CbpGrid["gridTemplateAreas"];
  /**  */
  "attr:grid-template-columns"?: CbpGrid["gridTemplateColumns"];
  /**  */
  "prop:gridTemplateColumns"?: CbpGrid["gridTemplateColumns"];
  /**  */
  "attr:grid-template-rows"?: CbpGrid["gridTemplateRows"];
  /**  */
  "prop:gridTemplateRows"?: CbpGrid["gridTemplateRows"];
  /**  */
  "attr:grid-auto-flow"?: CbpGrid["gridAutoFlow"];
  /**  */
  "prop:gridAutoFlow"?: CbpGrid["gridAutoFlow"];
  /**  */
  "attr:grid-auto-columns"?: CbpGrid["gridAutoColumns"];
  /**  */
  "prop:gridAutoColumns"?: CbpGrid["gridAutoColumns"];
  /**  */
  "attr:grid-auto-rows"?: CbpGrid["gridAutoRows"];
  /**  */
  "prop:gridAutoRows"?: CbpGrid["gridAutoRows"];
  /**  */
  "attr:align-items"?: CbpGrid["alignItems"];
  /**  */
  "prop:alignItems"?: CbpGrid["alignItems"];
  /**  */
  "attr:justify-items"?: CbpGrid["justifyItems"];
  /**  */
  "prop:justifyItems"?: CbpGrid["justifyItems"];
  /**  */
  "attr:align-content"?: CbpGrid["alignContent"];
  /**  */
  "prop:alignContent"?: CbpGrid["alignContent"];
  /**  */
  "attr:justify-content"?: CbpGrid["justifyContent"];
  /**  */
  "prop:justifyContent"?: CbpGrid["justifyContent"];
  /**  */
  "prop:gap"?: CbpGrid["gap"];
  /**  */
  "prop:breakpoint"?: CbpGrid["breakpoint"];
  /**  */
  "prop:sx"?: CbpGrid["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpGridItemProps = {
  /**  */
  "grid-column-start"?: CbpGridItem["gridColumnStart"];
  /**  */
  gridColumnStart?: CbpGridItem["gridColumnStart"];
  /**  */
  "grid-column-end"?: CbpGridItem["gridColumnEnd"];
  /**  */
  gridColumnEnd?: CbpGridItem["gridColumnEnd"];
  /**  */
  "grid-row-start"?: CbpGridItem["gridRowStart"];
  /**  */
  gridRowStart?: CbpGridItem["gridRowStart"];
  /**  */
  "grid-row-end"?: CbpGridItem["gridRowEnd"];
  /**  */
  gridRowEnd?: CbpGridItem["gridRowEnd"];
  /**  */
  "align-self"?: CbpGridItem["alignSelf"];
  /**  */
  alignSelf?: CbpGridItem["alignSelf"];
  /**  */
  "justify-self"?: CbpGridItem["justifySelf"];
  /**  */
  justifySelf?: CbpGridItem["justifySelf"];
  /**  */
  "grid-area"?: CbpGridItem["gridArea"];
  /**  */
  gridArea?: CbpGridItem["gridArea"];
  /**  */
  sx?: CbpGridItem["sx"];
};

export type CbpGridItemSolidJsProps = {
  /**  */
  "attr:grid-column-start"?: CbpGridItem["gridColumnStart"];
  /**  */
  "prop:gridColumnStart"?: CbpGridItem["gridColumnStart"];
  /**  */
  "attr:grid-column-end"?: CbpGridItem["gridColumnEnd"];
  /**  */
  "prop:gridColumnEnd"?: CbpGridItem["gridColumnEnd"];
  /**  */
  "attr:grid-row-start"?: CbpGridItem["gridRowStart"];
  /**  */
  "prop:gridRowStart"?: CbpGridItem["gridRowStart"];
  /**  */
  "attr:grid-row-end"?: CbpGridItem["gridRowEnd"];
  /**  */
  "prop:gridRowEnd"?: CbpGridItem["gridRowEnd"];
  /**  */
  "attr:align-self"?: CbpGridItem["alignSelf"];
  /**  */
  "prop:alignSelf"?: CbpGridItem["alignSelf"];
  /**  */
  "attr:justify-self"?: CbpGridItem["justifySelf"];
  /**  */
  "prop:justifySelf"?: CbpGridItem["justifySelf"];
  /**  */
  "attr:grid-area"?: CbpGridItem["gridArea"];
  /**  */
  "prop:gridArea"?: CbpGridItem["gridArea"];
  /**  */
  "prop:sx"?: CbpGridItem["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpHideProps = {
  /**  */
  display?: CbpHide["display"];
  /**  */
  hide?: CbpHide["hide"];
  /**  */
  "visually-hide"?: CbpHide["visuallyHide"];
  /**  */
  visuallyHide?: CbpHide["visuallyHide"];
  /**  */
  "hide-at"?: CbpHide["hideAt"];
  /**  */
  hideAt?: CbpHide["hideAt"];
  /**  */
  "visually-hide-at"?: CbpHide["visuallyHideAt"];
  /**  */
  visuallyHideAt?: CbpHide["visuallyHideAt"];
  /**  */
  sx?: CbpHide["sx"];

  /** A custom event emitted when the accordion item control is activated. */
  onhideToggle?: (e: EventEmitter) => void;
};

export type CbpHideSolidJsProps = {
  /**  */
  "prop:display"?: CbpHide["display"];
  /**  */
  "prop:hide"?: CbpHide["hide"];
  /**  */
  "bool:visually-hide"?: CbpHide["visuallyHide"];
  /**  */
  "prop:visuallyHide"?: CbpHide["visuallyHide"];
  /**  */
  "attr:hide-at"?: CbpHide["hideAt"];
  /**  */
  "prop:hideAt"?: CbpHide["hideAt"];
  /**  */
  "attr:visually-hide-at"?: CbpHide["visuallyHideAt"];
  /**  */
  "prop:visuallyHideAt"?: CbpHide["visuallyHideAt"];
  /**  */
  "prop:sx"?: CbpHide["sx"];
  /** A custom event emitted when the accordion item control is activated. */
  "on:hideToggle"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpIconProps = {
  /**  */
  name?: CbpIcon["name"];
  /**  */
  src?: CbpIcon["src"];
  /**  */
  size?: CbpIcon["size"];
  /**  */
  color?: CbpIcon["color"];
  /**  */
  rotate?: CbpIcon["rotate"];
  /**  */
  "accessibility-text"?: CbpIcon["accessibilityText"];
  /**  */
  accessibilityText?: CbpIcon["accessibilityText"];
  /**  */
  sx?: CbpIcon["sx"];
};

export type CbpIconSolidJsProps = {
  /**  */
  "prop:name"?: CbpIcon["name"];
  /**  */
  "prop:src"?: CbpIcon["src"];
  /**  */
  "prop:size"?: CbpIcon["size"];
  /**  */
  "prop:color"?: CbpIcon["color"];
  /**  */
  "prop:rotate"?: CbpIcon["rotate"];
  /**  */
  "attr:accessibility-text"?: CbpIcon["accessibilityText"];
  /**  */
  "prop:accessibilityText"?: CbpIcon["accessibilityText"];
  /**  */
  "prop:sx"?: CbpIcon["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpLinkProps = {
  /**  */
  href?: CbpLink["href"];
  /**  */
  rel?: CbpLink["rel"];
  /**  */
  target?: CbpLink["target"];
  /**  */
  download?: CbpLink["download"];
  /**  */
  language?: CbpLink["language"];
  /**  */
  "shortcut-key"?: CbpLink["shortcutKey"];
  /**  */
  shortcutKey?: CbpLink["shortcutKey"];
  /**  */
  "accessibility-text"?: CbpLink["accessibilityText"];
  /**  */
  accessibilityText?: CbpLink["accessibilityText"];
  /**  */
  disabled?: CbpLink["disabled"];
  /**  */
  context?: CbpLink["context"];
  /**  */
  sx?: CbpLink["sx"];

  /** A custom event emitted with the anchor is activated/clicked. */
  onlinkClick?: (e: EventEmitter) => void;
};

export type CbpLinkSolidJsProps = {
  /**  */
  "prop:href"?: CbpLink["href"];
  /**  */
  "prop:rel"?: CbpLink["rel"];
  /**  */
  "prop:target"?: CbpLink["target"];
  /**  */
  "prop:download"?: CbpLink["download"];
  /**  */
  "prop:language"?: CbpLink["language"];
  /**  */
  "attr:shortcut-key"?: CbpLink["shortcutKey"];
  /**  */
  "prop:shortcutKey"?: CbpLink["shortcutKey"];
  /**  */
  "attr:accessibility-text"?: CbpLink["accessibilityText"];
  /**  */
  "prop:accessibilityText"?: CbpLink["accessibilityText"];
  /**  */
  "prop:disabled"?: CbpLink["disabled"];
  /**  */
  "prop:context"?: CbpLink["context"];
  /**  */
  "prop:sx"?: CbpLink["sx"];
  /** A custom event emitted with the anchor is activated/clicked. */
  "on:linkClick"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpListProps = {
  /**  */
  variant?: CbpList["variant"];
  /**  */
  tag?: CbpList["tag"];
  /**  */
  size?: CbpList["size"];
  /**  */
  "accessibility-text"?: CbpList["accessibilityText"];
  /**  */
  accessibilityText?: CbpList["accessibilityText"];
  /**  */
  sx?: CbpList["sx"];
  /**  */
  context?: CbpList["context"];
};

export type CbpListSolidJsProps = {
  /**  */
  "prop:variant"?: CbpList["variant"];
  /**  */
  "prop:tag"?: CbpList["tag"];
  /**  */
  "prop:size"?: CbpList["size"];
  /**  */
  "attr:accessibility-text"?: CbpList["accessibilityText"];
  /**  */
  "prop:accessibilityText"?: CbpList["accessibilityText"];
  /**  */
  "prop:sx"?: CbpList["sx"];
  /**  */
  "prop:context"?: CbpList["context"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpListboxProps = {
  /**  */
  uid?: CbpListbox["uid"];
  /**  */
  open?: CbpListbox["open"];
  /**  */
  items?: CbpListbox["items"];
  /**  */
  context?: CbpListbox["context"];
  /**  */
  sx?: CbpListbox["sx"];

  /** A custom event emitted when the value of the wrapped input changes to update the listbox suggestions (items) 
via application logic. */
  onupdateListboxSuggestions?: (e: EventEmitter) => void;
  /** A custom event emitted only when a selection is made in the listbox.
This event will be listened for in addition to the native input's change event by the parent `cbp-form-field`, 
as selection does not trigger a native change event on the input.
To get all changes to the wrapped input, listen to the `valueChange` event on the parent `cbp-form-field`. */
  onvalueChange?: (e: EventEmitter) => void;
};

export type CbpListboxSolidJsProps = {
  /**  */
  "prop:uid"?: CbpListbox["uid"];
  /**  */
  "prop:open"?: CbpListbox["open"];
  /**  */
  "prop:items"?: CbpListbox["items"];
  /**  */
  "prop:context"?: CbpListbox["context"];
  /**  */
  "prop:sx"?: CbpListbox["sx"];
  /** A custom event emitted when the value of the wrapped input changes to update the listbox suggestions (items) 
via application logic. */
  "on:updateListboxSuggestions"?: (e: EventEmitter) => void;
  /** A custom event emitted only when a selection is made in the listbox.
This event will be listened for in addition to the native input's change event by the parent `cbp-form-field`, 
as selection does not trigger a native change event on the input.
To get all changes to the wrapped input, listen to the `valueChange` event on the parent `cbp-form-field`. */
  "on:valueChange"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpLoaderProps = {
  /**  */
  "progress-id"?: CbpLoader["progressId"];
  /**  */
  progressId?: CbpLoader["progressId"];
  /**  */
  variant?: CbpLoader["variant"];
  /**  */
  size?: CbpLoader["size"];
  /**  */
  determinate?: CbpLoader["determinate"];
  /**  */
  value?: CbpLoader["value"];
  /**  */
  max?: CbpLoader["max"];
  /**  */
  orientation?: CbpLoader["orientation"];
  /**  */
  success?: CbpLoader["success"];
  /**  */
  error?: CbpLoader["error"];
  /**  */
  context?: CbpLoader["context"];
  /**  */
  sx?: CbpLoader["sx"];
};

export type CbpLoaderSolidJsProps = {
  /**  */
  "attr:progress-id"?: CbpLoader["progressId"];
  /**  */
  "prop:progressId"?: CbpLoader["progressId"];
  /**  */
  "prop:variant"?: CbpLoader["variant"];
  /**  */
  "prop:size"?: CbpLoader["size"];
  /**  */
  "prop:determinate"?: CbpLoader["determinate"];
  /**  */
  "prop:value"?: CbpLoader["value"];
  /**  */
  "prop:max"?: CbpLoader["max"];
  /**  */
  "prop:orientation"?: CbpLoader["orientation"];
  /**  */
  "prop:success"?: CbpLoader["success"];
  /**  */
  "prop:error"?: CbpLoader["error"];
  /**  */
  "prop:context"?: CbpLoader["context"];
  /**  */
  "prop:sx"?: CbpLoader["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpMenuProps = {
  /**  */
  position?: CbpMenu["position"];
  /**  */
  open?: CbpMenu["open"];
  /**  */
  uid?: CbpMenu["uid"];
  /**  */
  "accessibility-text"?: CbpMenu["accessibilityText"];
  /**  */
  accessibilityText?: CbpMenu["accessibilityText"];
  /**  */
  context?: CbpMenu["context"];
  /**  */
  sx?: CbpMenu["sx"];

  /** A custom event fired when the menu is opened or closed. */
  ontoggleMenu?: (e: EventEmitter) => void;
};

export type CbpMenuSolidJsProps = {
  /**  */
  "prop:position"?: CbpMenu["position"];
  /**  */
  "prop:open"?: CbpMenu["open"];
  /**  */
  "prop:uid"?: CbpMenu["uid"];
  /**  */
  "attr:accessibility-text"?: CbpMenu["accessibilityText"];
  /**  */
  "prop:accessibilityText"?: CbpMenu["accessibilityText"];
  /**  */
  "prop:context"?: CbpMenu["context"];
  /**  */
  "prop:sx"?: CbpMenu["sx"];
  /** A custom event fired when the menu is opened or closed. */
  "on:toggleMenu"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpMenuItemProps = {
  /**  */
  "indent-level"?: CbpMenuItem["indentLevel"];
  /**  */
  indentLevel?: CbpMenuItem["indentLevel"];
  /**  */
  color?: CbpMenuItem["color"];
  /**  */
  slot?: CbpMenuItem["slot"];
};

export type CbpMenuItemSolidJsProps = {
  /**  */
  "attr:indent-level"?: CbpMenuItem["indentLevel"];
  /**  */
  "prop:indentLevel"?: CbpMenuItem["indentLevel"];
  /**  */
  "prop:color"?: CbpMenuItem["color"];
  /**  */
  "prop:slot"?: CbpMenuItem["slot"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpMulticolProps = {
  /**  */
  columns?: CbpMulticol["columns"];
  /**  */
  width?: CbpMulticol["width"];
  /**  */
  gap?: CbpMulticol["gap"];
  /**  */
  rule?: CbpMulticol["rule"];
  /**  */
  nobreak?: CbpMulticol["nobreak"];
  /**  */
  sx?: CbpMulticol["sx"];
};

export type CbpMulticolSolidJsProps = {
  /**  */
  "prop:columns"?: CbpMulticol["columns"];
  /**  */
  "prop:width"?: CbpMulticol["width"];
  /**  */
  "prop:gap"?: CbpMulticol["gap"];
  /**  */
  "prop:rule"?: CbpMulticol["rule"];
  /**  */
  "prop:nobreak"?: CbpMulticol["nobreak"];
  /**  */
  "prop:sx"?: CbpMulticol["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpNavItemProps = {
  /**  */
  current?: CbpNavItem["current"];
  /**  */
  name?: CbpNavItem["name"];
  /**  */
  sx?: CbpNavItem["sx"];

  /**  */
  onnavItemClick?: (e: EventEmitter) => void;
};

export type CbpNavItemSolidJsProps = {
  /**  */
  "prop:current"?: CbpNavItem["current"];
  /**  */
  "prop:name"?: CbpNavItem["name"];
  /**  */
  "prop:sx"?: CbpNavItem["sx"];
  /**  */
  "on:navItemClick"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpNoticeProps = {
  /**  */
  color?: CbpNotice["color"];
  /**  */
  sx?: CbpNotice["sx"];
  /**  */
  context?: CbpNotice["context"];
};

export type CbpNoticeSolidJsProps = {
  /**  */
  "prop:color"?: CbpNotice["color"];
  /**  */
  "prop:sx"?: CbpNotice["sx"];
  /**  */
  "prop:context"?: CbpNotice["context"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpPaginationProps = {
  /**  */
  records?: CbpPagination["records"];
  /**  */
  "page-size"?: CbpPagination["pageSize"];
  /**  */
  pageSize?: CbpPagination["pageSize"];
  /**  */
  page?: CbpPagination["page"];
  /**  */
  "max-pages"?: CbpPagination["maxPages"];
  /**  */
  maxPages?: CbpPagination["maxPages"];
  /**  */
  context?: CbpPagination["context"];
  /**  */
  sx?: CbpPagination["sx"];

  /** A custom event emitted when the click event occurs for either a rendered button or anchor/link. */
  onpaginationChange?: (e: EventEmitter) => void;
};

export type CbpPaginationSolidJsProps = {
  /**  */
  "prop:records"?: CbpPagination["records"];
  /**  */
  "attr:page-size"?: CbpPagination["pageSize"];
  /**  */
  "prop:pageSize"?: CbpPagination["pageSize"];
  /**  */
  "prop:page"?: CbpPagination["page"];
  /**  */
  "attr:max-pages"?: CbpPagination["maxPages"];
  /**  */
  "prop:maxPages"?: CbpPagination["maxPages"];
  /**  */
  "prop:context"?: CbpPagination["context"];
  /**  */
  "prop:sx"?: CbpPagination["sx"];
  /** A custom event emitted when the click event occurs for either a rendered button or anchor/link. */
  "on:paginationChange"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpPanelProps = {
  /**  */
  context?: CbpPanel["context"];
  /**  */
  sx?: CbpPanel["sx"];
};

export type CbpPanelSolidJsProps = {
  /**  */
  "prop:context"?: CbpPanel["context"];
  /**  */
  "prop:sx"?: CbpPanel["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpRadioProps = {
  /**  */
  name?: CbpRadio["name"];
  /**  */
  value?: CbpRadio["value"];
  /**  */
  "field-id"?: CbpRadio["fieldId"];
  /**  */
  fieldId?: CbpRadio["fieldId"];
  /**  */
  checked?: CbpRadio["checked"];
  /**  */
  disabled?: CbpRadio["disabled"];
  /**  */
  context?: CbpRadio["context"];
  /**  */
  sx?: CbpRadio["sx"];

  /** A custom event emitted when the click event occurs for either a rendered button or anchor/link. */
  onstateChanged?: (e: EventEmitter) => void;
};

export type CbpRadioSolidJsProps = {
  /**  */
  "prop:name"?: CbpRadio["name"];
  /**  */
  "prop:value"?: CbpRadio["value"];
  /**  */
  "attr:field-id"?: CbpRadio["fieldId"];
  /**  */
  "prop:fieldId"?: CbpRadio["fieldId"];
  /**  */
  "prop:checked"?: CbpRadio["checked"];
  /**  */
  "prop:disabled"?: CbpRadio["disabled"];
  /**  */
  "prop:context"?: CbpRadio["context"];
  /**  */
  "prop:sx"?: CbpRadio["sx"];
  /** A custom event emitted when the click event occurs for either a rendered button or anchor/link. */
  "on:stateChanged"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpResizeObserverProps = {
  /**  */
  debounce?: CbpResizeObserver["debounce"];

  /** A custom event emitted when the component is resized to give new values for size of component. */
  onresized?: (e: EventEmitter) => void;
};

export type CbpResizeObserverSolidJsProps = {
  /**  */
  "prop:debounce"?: CbpResizeObserver["debounce"];
  /** A custom event emitted when the component is resized to give new values for size of component. */
  "on:resized"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpSectionProps = {
  /**  */
  tag?: CbpSection["tag"];
  /**  */
  "accessibility-text"?: CbpSection["accessibilityText"];
  /**  */
  accessibilityText?: CbpSection["accessibilityText"];
  /**  */
  sx?: CbpSection["sx"];
};

export type CbpSectionSolidJsProps = {
  /**  */
  "prop:tag"?: CbpSection["tag"];
  /**  */
  "attr:accessibility-text"?: CbpSection["accessibilityText"];
  /**  */
  "prop:accessibilityText"?: CbpSection["accessibilityText"];
  /**  */
  "prop:sx"?: CbpSection["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type SegmentedButtonGroupProps = {
  /**  */
  name?: SegmentedButtonGroup["name"];
  /**  */
  value?: SegmentedButtonGroup["value"];
  /**  */
  multiple?: SegmentedButtonGroup["multiple"];
  /**  */
  "accessibility-text"?: SegmentedButtonGroup["accessibilityText"];
  /**  */
  accessibilityText?: SegmentedButtonGroup["accessibilityText"];
  /**  */
  disabled?: SegmentedButtonGroup["disabled"];
  /**  */
  sx?: SegmentedButtonGroup["sx"];

  /** A custom event fired when any of the group's buttons are clicked, whether toggled on or off. */
  onsegmentedButtonGroupClick?: (e: EventEmitter) => void;
};

export type SegmentedButtonGroupSolidJsProps = {
  /**  */
  "prop:name"?: SegmentedButtonGroup["name"];
  /**  */
  "prop:value"?: SegmentedButtonGroup["value"];
  /**  */
  "prop:multiple"?: SegmentedButtonGroup["multiple"];
  /**  */
  "attr:accessibility-text"?: SegmentedButtonGroup["accessibilityText"];
  /**  */
  "prop:accessibilityText"?: SegmentedButtonGroup["accessibilityText"];
  /**  */
  "prop:disabled"?: SegmentedButtonGroup["disabled"];
  /**  */
  "prop:sx"?: SegmentedButtonGroup["sx"];
  /** A custom event fired when any of the group's buttons are clicked, whether toggled on or off. */
  "on:segmentedButtonGroupClick"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpSkipNavProps = {
  /**  */
  "target-id"?: CbpSkipNav["targetId"];
  /**  */
  targetId?: CbpSkipNav["targetId"];
  /**  */
  "shortcut-key"?: CbpSkipNav["shortcutKey"];
  /**  */
  shortcutKey?: CbpSkipNav["shortcutKey"];
  /**  */
  sx?: CbpSkipNav["sx"];
};

export type CbpSkipNavSolidJsProps = {
  /**  */
  "attr:target-id"?: CbpSkipNav["targetId"];
  /**  */
  "prop:targetId"?: CbpSkipNav["targetId"];
  /**  */
  "attr:shortcut-key"?: CbpSkipNav["shortcutKey"];
  /**  */
  "prop:shortcutKey"?: CbpSkipNav["shortcutKey"];
  /**  */
  "prop:sx"?: CbpSkipNav["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpSliderProps = {
  /**  */
  "field-id"?: CbpSlider["fieldId"];
  /**  */
  fieldId?: CbpSlider["fieldId"];
  /**  */
  value?: CbpSlider["value"];
  /**  */
  gap?: CbpSlider["gap"];
  /**  */
  variant?: CbpSlider["variant"];
  /**  */
  min?: CbpSlider["min"];
  /**  */
  max?: CbpSlider["max"];
  /**  */
  step?: CbpSlider["step"];
  /**  */
  "hide-minmax"?: CbpSlider["hideMinmax"];
  /**  */
  hideMinmax?: CbpSlider["hideMinmax"];
  /**  */
  "hide-input"?: CbpSlider["hideInput"];
  /**  */
  hideInput?: CbpSlider["hideInput"];
  /**  */
  error?: CbpSlider["error"];
  /**  */
  disabled?: CbpSlider["disabled"];
  /**  */
  context?: CbpSlider["context"];
  /**  */
  sx?: CbpSlider["sx"];

  /** A custom event fired when the value of the slider changes. */
  onvalueChange?: (e: EventEmitter) => void;
};

export type CbpSliderSolidJsProps = {
  /**  */
  "attr:field-id"?: CbpSlider["fieldId"];
  /**  */
  "prop:fieldId"?: CbpSlider["fieldId"];
  /**  */
  "prop:value"?: CbpSlider["value"];
  /**  */
  "prop:gap"?: CbpSlider["gap"];
  /**  */
  "prop:variant"?: CbpSlider["variant"];
  /**  */
  "prop:min"?: CbpSlider["min"];
  /**  */
  "prop:max"?: CbpSlider["max"];
  /**  */
  "prop:step"?: CbpSlider["step"];
  /**  */
  "bool:hide-minmax"?: CbpSlider["hideMinmax"];
  /**  */
  "prop:hideMinmax"?: CbpSlider["hideMinmax"];
  /**  */
  "bool:hide-input"?: CbpSlider["hideInput"];
  /**  */
  "prop:hideInput"?: CbpSlider["hideInput"];
  /**  */
  "prop:error"?: CbpSlider["error"];
  /**  */
  "prop:disabled"?: CbpSlider["disabled"];
  /**  */
  "prop:context"?: CbpSlider["context"];
  /**  */
  "prop:sx"?: CbpSlider["sx"];
  /** A custom event fired when the value of the slider changes. */
  "on:valueChange"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpStructuredListProps = {
  /**  */
  "accessibility-text"?: CbpStructuredList["accessibilityText"];
  /**  */
  accessibilityText?: CbpStructuredList["accessibilityText"];
  /**  */
  "header-id"?: CbpStructuredList["headerId"];
  /**  */
  headerId?: CbpStructuredList["headerId"];
  /**  */
  striped?: CbpStructuredList["striped"];
  /**  */
  context?: CbpStructuredList["context"];
  /**  */
  sx?: CbpStructuredList["sx"];
};

export type CbpStructuredListSolidJsProps = {
  /**  */
  "attr:accessibility-text"?: CbpStructuredList["accessibilityText"];
  /**  */
  "prop:accessibilityText"?: CbpStructuredList["accessibilityText"];
  /**  */
  "attr:header-id"?: CbpStructuredList["headerId"];
  /**  */
  "prop:headerId"?: CbpStructuredList["headerId"];
  /**  */
  "prop:striped"?: CbpStructuredList["striped"];
  /**  */
  "prop:context"?: CbpStructuredList["context"];
  /**  */
  "prop:sx"?: CbpStructuredList["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpStructuredListItemProps = {
  /**  */
  color?: CbpStructuredListItem["color"];
  /**  */
  sx?: CbpStructuredListItem["sx"];
};

export type CbpStructuredListItemSolidJsProps = {
  /**  */
  "prop:color"?: CbpStructuredListItem["color"];
  /**  */
  "prop:sx"?: CbpStructuredListItem["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpSubNavProps = {
  /**  */
  "accessibility-text"?: CbpSubNav["accessibilityText"];
  /**  */
  accessibilityText?: CbpSubNav["accessibilityText"];
  /**  */
  flat?: CbpSubNav["flat"];
  /**  */
  store?: CbpSubNav["store"];
  /**  */
  context?: CbpSubNav["context"];
  /**  */
  sx?: CbpSubNav["sx"];
};

export type CbpSubNavSolidJsProps = {
  /**  */
  "attr:accessibility-text"?: CbpSubNav["accessibilityText"];
  /**  */
  "prop:accessibilityText"?: CbpSubNav["accessibilityText"];
  /**  */
  "prop:flat"?: CbpSubNav["flat"];
  /**  */
  "prop:store"?: CbpSubNav["store"];
  /**  */
  "prop:context"?: CbpSubNav["context"];
  /**  */
  "prop:sx"?: CbpSubNav["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpSubnavItemProps = {
  /**  */
  label?: CbpSubnavItem["label"];
  /**  */
  href?: CbpSubnavItem["href"];
  /**  */
  uid?: CbpSubnavItem["uid"];
  /**  */
  name?: CbpSubnavItem["name"];
  /**  */
  current?: CbpSubnavItem["current"];
  /**  */
  open?: CbpSubnavItem["open"];
  /**  */
  context?: CbpSubnavItem["context"];
  /**  */
  sx?: CbpSubnavItem["sx"];

  /**  */
  ontoggleSubnavItem?: (e: EventEmitter) => void;
  /**  */
  onsubnavItemClick?: (e: EventEmitter) => void;
};

export type CbpSubnavItemSolidJsProps = {
  /**  */
  "prop:label"?: CbpSubnavItem["label"];
  /**  */
  "prop:href"?: CbpSubnavItem["href"];
  /**  */
  "prop:uid"?: CbpSubnavItem["uid"];
  /**  */
  "prop:name"?: CbpSubnavItem["name"];
  /**  */
  "prop:current"?: CbpSubnavItem["current"];
  /**  */
  "prop:open"?: CbpSubnavItem["open"];
  /**  */
  "prop:context"?: CbpSubnavItem["context"];
  /**  */
  "prop:sx"?: CbpSubnavItem["sx"];
  /**  */
  "on:toggleSubnavItem"?: (e: EventEmitter) => void;
  /**  */
  "on:subnavItemClick"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpTabProps = {
  /**  */
  name?: CbpTab["name"];
  /**  */
  selected?: CbpTab["selected"];
  /**  */
  color?: CbpTab["color"];
  /**  */
  "accessibility-text"?: CbpTab["accessibilityText"];
  /**  */
  accessibilityText?: CbpTab["accessibilityText"];
  /**  */
  sx?: CbpTab["sx"];

  /** Emits an event when the tab has been fully loaded for registration with the parent tabset. */
  ontabLoaded?: (e: EventEmitter) => void;
  /** Emits a custom even containing an object that describes the tab that was activated. */
  ontabClicked?: (e: EventEmitter) => void;
};

export type CbpTabSolidJsProps = {
  /**  */
  "prop:name"?: CbpTab["name"];
  /**  */
  "prop:selected"?: CbpTab["selected"];
  /**  */
  "prop:color"?: CbpTab["color"];
  /**  */
  "attr:accessibility-text"?: CbpTab["accessibilityText"];
  /**  */
  "prop:accessibilityText"?: CbpTab["accessibilityText"];
  /**  */
  "prop:sx"?: CbpTab["sx"];
  /** Emits an event when the tab has been fully loaded for registration with the parent tabset. */
  "on:tabLoaded"?: (e: EventEmitter) => void;
  /** Emits a custom even containing an object that describes the tab that was activated. */
  "on:tabClicked"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpTabPanelProps = {
  /**  */
  name?: CbpTabPanel["name"];
  /**  */
  selected?: CbpTabPanel["selected"];
  /**  */
  sx?: CbpTabPanel["sx"];
};

export type CbpTabPanelSolidJsProps = {
  /**  */
  "prop:name"?: CbpTabPanel["name"];
  /**  */
  "prop:selected"?: CbpTabPanel["selected"];
  /**  */
  "prop:sx"?: CbpTabPanel["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpTableProps = {
  /**  */
  striped?: CbpTable["striped"];
  /**  */
  hover?: CbpTable["hover"];
  /**  */
  "column-hover"?: CbpTable["columnHover"];
  /**  */
  columnHover?: CbpTable["columnHover"];
  /**  */
  overflow?: CbpTable["overflow"];
  /**  */
  debug?: CbpTable["debug"];
  /**  */
  context?: CbpTable["context"];
  /**  */
  sx?: CbpTable["sx"];

  /** An event emitted when the table is sorted via user interaction activating a table header control. */
  ontableSort?: (e: EventEmitter) => void;
};

export type CbpTableSolidJsProps = {
  /**  */
  "prop:striped"?: CbpTable["striped"];
  /**  */
  "prop:hover"?: CbpTable["hover"];
  /**  */
  "bool:column-hover"?: CbpTable["columnHover"];
  /**  */
  "prop:columnHover"?: CbpTable["columnHover"];
  /**  */
  "prop:overflow"?: CbpTable["overflow"];
  /**  */
  "prop:debug"?: CbpTable["debug"];
  /**  */
  "prop:context"?: CbpTable["context"];
  /**  */
  "prop:sx"?: CbpTable["sx"];
  /** An event emitted when the table is sorted via user interaction activating a table header control. */
  "on:tableSort"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpTabsProps = {
  /**  */
  "accessibility-text"?: CbpTabs["accessibilityText"];
  /**  */
  accessibilityText?: CbpTabs["accessibilityText"];
  /**  */
  context?: CbpTabs["context"];
  /**  */
  sx?: CbpTabs["sx"];
};

export type CbpTabsSolidJsProps = {
  /**  */
  "attr:accessibility-text"?: CbpTabs["accessibilityText"];
  /**  */
  "prop:accessibilityText"?: CbpTabs["accessibilityText"];
  /**  */
  "prop:context"?: CbpTabs["context"];
  /**  */
  "prop:sx"?: CbpTabs["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpTagProps = {
  /**  */
  color?: CbpTag["color"];
  /**  */
  context?: CbpTag["context"];
  /**  */
  sx?: CbpTag["sx"];
};

export type CbpTagSolidJsProps = {
  /**  */
  "prop:color"?: CbpTag["color"];
  /**  */
  "prop:context"?: CbpTag["context"];
  /**  */
  "prop:sx"?: CbpTag["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpToastProps = {
  /**  */
  color?: CbpToast["color"];
  /**  */
  duration?: CbpToast["duration"];
  /**  */
  open?: CbpToast["open"];
  /**  */
  context?: CbpToast["context"];
  /**  */
  sx?: CbpToast["sx"];
};

export type CbpToastSolidJsProps = {
  /**  */
  "prop:color"?: CbpToast["color"];
  /**  */
  "prop:duration"?: CbpToast["duration"];
  /**  */
  "prop:open"?: CbpToast["open"];
  /**  */
  "prop:context"?: CbpToast["context"];
  /**  */
  "prop:sx"?: CbpToast["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpToggleProps = {
  /**  */
  checked?: CbpToggle["checked"];
  /**  */
  disabled?: CbpToggle["disabled"];
  /**  */
  "hide-status"?: CbpToggle["hideStatus"];
  /**  */
  hideStatus?: CbpToggle["hideStatus"];
  /**  */
  "status-text-on"?: CbpToggle["statusTextOn"];
  /**  */
  statusTextOn?: CbpToggle["statusTextOn"];
  /**  */
  "status-text-off"?: CbpToggle["statusTextOff"];
  /**  */
  statusTextOff?: CbpToggle["statusTextOff"];
  /**  */
  name?: CbpToggle["name"];
  /**  */
  value?: CbpToggle["value"];
  /**  */
  context?: CbpToggle["context"];
  /**  */
  sx?: CbpToggle["sx"];

  /** Custom event fired when the control is toggled by the user. */
  ontoggleClick?: (e: EventEmitter) => void;
};

export type CbpToggleSolidJsProps = {
  /**  */
  "prop:checked"?: CbpToggle["checked"];
  /**  */
  "prop:disabled"?: CbpToggle["disabled"];
  /**  */
  "bool:hide-status"?: CbpToggle["hideStatus"];
  /**  */
  "prop:hideStatus"?: CbpToggle["hideStatus"];
  /**  */
  "attr:status-text-on"?: CbpToggle["statusTextOn"];
  /**  */
  "prop:statusTextOn"?: CbpToggle["statusTextOn"];
  /**  */
  "attr:status-text-off"?: CbpToggle["statusTextOff"];
  /**  */
  "prop:statusTextOff"?: CbpToggle["statusTextOff"];
  /**  */
  "prop:name"?: CbpToggle["name"];
  /**  */
  "prop:value"?: CbpToggle["value"];
  /**  */
  "prop:context"?: CbpToggle["context"];
  /**  */
  "prop:sx"?: CbpToggle["sx"];
  /** Custom event fired when the control is toggled by the user. */
  "on:toggleClick"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpTooltipProps = {
  /**  */
  open?: CbpTooltip["open"];
  /**  */
  variant?: CbpTooltip["variant"];
  /**  */
  alignment?: CbpTooltip["alignment"];
  /**  */
  "field-id"?: CbpTooltip["fieldId"];
  /**  */
  fieldId?: CbpTooltip["fieldId"];
  /**  */
  context?: CbpTooltip["context"];
  /**  */
  sx?: CbpTooltip["sx"];
};

export type CbpTooltipSolidJsProps = {
  /**  */
  "prop:open"?: CbpTooltip["open"];
  /**  */
  "prop:variant"?: CbpTooltip["variant"];
  /**  */
  "prop:alignment"?: CbpTooltip["alignment"];
  /**  */
  "attr:field-id"?: CbpTooltip["fieldId"];
  /**  */
  "prop:fieldId"?: CbpTooltip["fieldId"];
  /**  */
  "prop:context"?: CbpTooltip["context"];
  /**  */
  "prop:sx"?: CbpTooltip["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpTreeviewProps = {
  /**  */
  selectable?: CbpTreeview["selectable"];
  /**  */
  name?: CbpTreeview["name"];
  /**  */
  "accessibility-text"?: CbpTreeview["accessibilityText"];
  /**  */
  accessibilityText?: CbpTreeview["accessibilityText"];
  /**  */
  context?: CbpTreeview["context"];
  /**  */
  sx?: CbpTreeview["sx"];
  /**  */
  host?: CbpTreeview["host"];

  /** A custom event that rolls up all selected values and is emitted when any selectable item is changed. 
Only selectable items that have both a name and value specified will be included.
If all items/checkboxes have the same name, specified by the `cbp-treeview`, then the values are returned as a simple array.
If items/checkboxes have individually specified names, values are returned as an array of objects containing name-value pairs. */
  onvalueChange?: (e: EventEmitter) => void;
};

export type CbpTreeviewSolidJsProps = {
  /**  */
  "prop:selectable"?: CbpTreeview["selectable"];
  /**  */
  "prop:name"?: CbpTreeview["name"];
  /**  */
  "attr:accessibility-text"?: CbpTreeview["accessibilityText"];
  /**  */
  "prop:accessibilityText"?: CbpTreeview["accessibilityText"];
  /**  */
  "prop:context"?: CbpTreeview["context"];
  /**  */
  "prop:sx"?: CbpTreeview["sx"];
  /**  */
  "prop:host"?: CbpTreeview["host"];
  /** A custom event that rolls up all selected values and is emitted when any selectable item is changed. 
Only selectable items that have both a name and value specified will be included.
If all items/checkboxes have the same name, specified by the `cbp-treeview`, then the values are returned as a simple array.
If items/checkboxes have individually specified names, values are returned as an array of objects containing name-value pairs. */
  "on:valueChange"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpTreeviewItemProps = {
  /**  */
  label?: CbpTreeviewItem["label"];
  /**  */
  open?: CbpTreeviewItem["open"];
  /**  */
  selectable?: CbpTreeviewItem["selectable"];
  /**  */
  name?: CbpTreeviewItem["name"];
  /**  */
  value?: CbpTreeviewItem["value"];
  /**  */
  checked?: CbpTreeviewItem["checked"];
  /**  */
  indeterminate?: CbpTreeviewItem["indeterminate"];
  /**  */
  uid?: CbpTreeviewItem["uid"];
  /**  */
  context?: CbpTreeviewItem["context"];
  /**  */
  host?: CbpTreeviewItem["host"];

  /** Custom event emitted to the parent treeview item to re-evaluate its checked/indeterminate state based on actions below it. */
  onupdateTreeviewItemParent?: (e: EventEmitter) => void;
};

export type CbpTreeviewItemSolidJsProps = {
  /**  */
  "prop:label"?: CbpTreeviewItem["label"];
  /**  */
  "prop:open"?: CbpTreeviewItem["open"];
  /**  */
  "prop:selectable"?: CbpTreeviewItem["selectable"];
  /**  */
  "prop:name"?: CbpTreeviewItem["name"];
  /**  */
  "prop:value"?: CbpTreeviewItem["value"];
  /**  */
  "prop:checked"?: CbpTreeviewItem["checked"];
  /**  */
  "prop:indeterminate"?: CbpTreeviewItem["indeterminate"];
  /**  */
  "prop:uid"?: CbpTreeviewItem["uid"];
  /**  */
  "prop:context"?: CbpTreeviewItem["context"];
  /**  */
  "prop:host"?: CbpTreeviewItem["host"];
  /** Custom event emitted to the parent treeview item to re-evaluate its checked/indeterminate state based on actions below it. */
  "on:updateTreeviewItemParent"?: (e: EventEmitter) => void;

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpTypographyProps = {
  /**  */
  tag?: CbpTypography["tag"];
  /**  */
  variant?: CbpTypography["variant"];
  /**  */
  divider?: CbpTypography["divider"];
  /**  */
  context?: CbpTypography["context"];
  /**  */
  sx?: CbpTypography["sx"];
};

export type CbpTypographySolidJsProps = {
  /**  */
  "prop:tag"?: CbpTypography["tag"];
  /**  */
  "prop:variant"?: CbpTypography["variant"];
  /**  */
  "prop:divider"?: CbpTypography["divider"];
  /**  */
  "prop:context"?: CbpTypography["context"];
  /**  */
  "prop:sx"?: CbpTypography["sx"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpUniversalHeaderProps = {
  /**  */
  "logo-src-lg"?: CbpUniversalHeader["logoSrcLg"];
  /**  */
  logoSrcLg?: CbpUniversalHeader["logoSrcLg"];
  /**  */
  "logo-src-sm"?: CbpUniversalHeader["logoSrcSm"];
  /**  */
  logoSrcSm?: CbpUniversalHeader["logoSrcSm"];
};

export type CbpUniversalHeaderSolidJsProps = {
  /**  */
  "attr:logo-src-lg"?: CbpUniversalHeader["logoSrcLg"];
  /**  */
  "prop:logoSrcLg"?: CbpUniversalHeader["logoSrcLg"];
  /**  */
  "attr:logo-src-sm"?: CbpUniversalHeader["logoSrcSm"];
  /**  */
  "prop:logoSrcSm"?: CbpUniversalHeader["logoSrcSm"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CbpUsaBannerProps = {
  /**  */
  open?: CbpUsaBanner["open"];
};

export type CbpUsaBannerSolidJsProps = {
  /**  */
  "prop:open"?: CbpUsaBanner["open"];

  /** Set the innerHTML of the element */
  innerHTML?: string;
  /** Set the textContent of the element */
  textContent?: string | number;
};

export type CustomElements = {
  /**
   * An Accordion is a common paradigm for progressive disclosure, organizing content under a relevant heading
   * that is used as a control for revealing and hiding its content. This component wraps multiple `cbp-accordion-item` tags.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `multiple`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Accordion Items shall be slotted in the default slot. While other content may be included within the default slot, it is not recommended.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `init() => void`: undefined
   * - `accordionActionHandler({ detail: { host, open } }) => void`: undefined
   */
  "cbp-accordion": Partial<
    CbpAccordionProps & BaseProps<CbpAccordion> & BaseEvents
  >;

  /**
   * The Action Bar acts as a container for form controls (buttons) or other tools to affect the content of the page.
   * It is often used for batch actions on table or structured list data.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `variant`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Any controls or content may be slotted into the default slot and will be aligned to the right of the bar.
   * - `cbp-action-bar-info`: This named slot is intended for information placed before the default slot content, aligned to the left of the bar.
   */
  "cbp-action-bar": Partial<
    CbpActionBarProps & BaseProps<CbpActionBar> & BaseEvents
  >;

  /**
   * Accordion Items are placed as children of the parent `cbp-accordion` tag. The content is slotted and the
   * heading control text is provided via the label property or the optional named slot.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `heading-id`/`headingId`: undefined
   * - `open`: undefined
   * - `label`: undefined
   * - `heading-level`/`headingLevel`: undefined
   * - `color`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `accordionItemClick`: A custom event emitted when the accordion item control is activated.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Accordion Item content is placed in the default slot.
   * - `cbp-accordion-item-label`: Optionally, an Accordion Item heading with markup may be placed in this slot rather than via the labal property.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleClick(e) => void`: undefined
   */
  "cbp-accordion-item": Partial<
    CbpAccordionItemProps & BaseProps<CbpAccordionItem> & BaseEvents
  >;

  /**
   * An overarching App tag acts as a low-barrier way to get core design system elements (design tokens and styles)
   * as well as a way to manage site/page-level settings such as dark mode.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `theme`: undefined
   * - `debug`: undefined
   * - `app-name`/`appName`: undefined
   * - `app-version`/`appVersion`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: All application markup should be placed within the default slot to inherit the base CSS, design tokens, and dark mode styling.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleThemeChange(mql) => void`: undefined
   */
  "cbp-app": Partial<CbpAppProps & BaseProps<CbpApp> & BaseEvents>;

  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `subnav-drawer-id`/`subnavDrawerId`: undefined
   * - `search`: undefined
   * - `search-method`/`searchMethod`: undefined
   * - `search-action`/`searchAction`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `searchInput`: A custom event emitted in accordance with the native input's onInput event.
   * - `searchSubmit`: A custom event emitted in accordance with the native search form's submit event.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot usually contains only `cbp-nav-item` tags, but other content may also be included.
   * - `(default)`: cbp-home - The link to the home page containing the Application Name as link text should be placed within this named slot for the intended visual treatment.
   * - `(default)`: cbp-app-header-extras - Optional extra buttons/links that are right-aligned may be slotted within the app header but outside of the `nav` landmark.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleNavDrawerClose(e) => void`: undefined
   * - `handleSearchInput(e) => void`: undefined
   * - `handleSearchSubmit(e) => void`: undefined
   * - `handleKeyDown(ev: KeyboardEvent) => void`: undefined
   * - `handleClick(event: MouseEvent) => void`: undefined
   * - `openSearch() => void`: A public method to show the search form in the application header.
   * - `closeSearch() => void`: A public method to close/hide the search form in the application header.
   * - `handleTabFocusOut({ key, shiftKey }) => void`: undefined
   * - `handleShiftTabFocusOut({ key, shiftKey }) => void`: undefined
   * - `updateCurrentItem(newValue) => void`: undefined
   * - `setCurrentNav(activatedNav) => void`: undefined
   * - `updateActiveItem(newValue) => void`: undefined
   * - `handleResize(width) => void`: undefined
   * - `doResponsive() => void`: undefined
   * - `doFullSize() => void`: undefined
   */
  "cbp-app-header": Partial<
    CbpAppHeaderProps & BaseProps<CbpAppHeader> & BaseEvents
  >;

  /**
   * The Badge component is generally used for emphasizing a numeric characteristic of an object
   * (e.g., the number of unread items in a folder).
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `color`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The slotted badge content should be a short 1-2 digit number.
   */
  "cbp-badge": Partial<CbpBadgeProps & BaseProps<CbpBadge> & BaseEvents>;

  /**
   * The Banner is a container spanning the entire viewport meant to highlight urgent or important content.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `color`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `bannerDismiss`: A custom event emitted with the Banner is dismissed.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The main content of the banner goes in the default slot.
   * - `cbp-banner-title`: An optional banner title may be slotted here.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleDismiss(e) => void`: undefined
   */
  "cbp-banner": Partial<CbpBannerProps & BaseProps<CbpBanner> & BaseEvents>;

  /**
   * Breadcrumbs give users an indicator of where they are within a site/application hierarchy,
   * especially helpful when deeper within the site’s architecture. This component should wrap links
   * representing the parent sections of the current page, but not including the current page.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `divider`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The individual links making up the breadcrumbs are placed in the default slot.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleResize(width) => void`: undefined
   * - `resizeResponsive(mode) => void`: undefined
   * - `createMenu(breadcrumbs) => void`: undefined
   */
  "cbp-breadcrumb": Partial<
    CbpBreadcrumbProps & BaseProps<CbpBreadcrumb> & BaseEvents
  >;

  /**
   * The Button component represents a UI control visually styled like a button, regardless of whether
   * it renders (or wraps) a button or an anchor tag.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `tag`: undefined
   * - `type`: undefined
   * - `fill`: undefined
   * - `color`: undefined
   * - `variant`: undefined
   * - `control-id`/`controlId`: undefined
   * - `name`: undefined
   * - `value`: undefined
   * - `href`: undefined
   * - `rel`: undefined
   * - `target`: undefined
   * - `download`: undefined
   * - `width`: undefined
   * - `height`: undefined
   * - `pressed`: undefined
   * - `expanded`: undefined
   * - `controls`: undefined
   * - `target-prop`/`targetProp`: undefined
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `disabled`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `buttonClick`: A custom event emitted when the click event occurs for either a rendered button or anchor/link.
   * - `componentLoad`: A custom event emitted when the component has completed loading and its internal lifecycles.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The button's label, which may contain markup such as icons, is placed in the default slot.
   * - `(default)`: cbp-button-custom - Custom buttons/anchors may be slotted via named-slot, which prevents the web component from rendering its own tag. In such a case, component properties that render attributes directly onto the rendered button will have no effect, as they are expected to be supplied directly on the slotted element.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleClick(e) => void`: undefined
   */
  "cbp-button": Partial<CbpButtonProps & BaseProps<CbpButton> & BaseEvents>;

  /**
   * The Card component is a visual treatment for a container meant for similarly-sized, repeated chunks of content.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `color`: undefined
   * - `variant`: undefined
   * - `interactive`: undefined
   * - `href`: undefined
   * - `disabled`: undefined
   * - `stretch`: undefined
   * - `sx`: undefined
   * - `context`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot contains the body of the card.
   * - `cbp-card-title`: Contains the card title, if present.
   * - `cbp-card-actions`: Contains the links/buttons for cards.
   */
  "cbp-card": Partial<CbpCardProps & BaseProps<CbpCard> & BaseEvents>;

  /**
   * The Carousel is a control meant to take slotted Carousel-items to visually
   * iterate though to display with a slotted control of a dot-indicator or other control
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `height`: undefined
   * - `width`: undefined
   * - `current`: undefined
   * - `sx`: undefined
   * - `context`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Intended for a collection of CBP-Carousel-Items to be rendered in the cbp-carousel-container
   * - `cbp-carousel-controls`: This named slot is intended for a control of the carousel, for example: cbp-dot-indicator
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `watchCurrent() => void`: undefined
   * - `navigateCollection(e) => void`: undefined
   * - `handleResize() => void`: undefined
   * - `scrollToItem() => void`: undefined
   * - `updateCurrent(index) => void`: undefined
   */
  "cbp-carousel": Partial<
    CbpCarouselProps & BaseProps<CbpCarousel> & BaseEvents
  >;

  /**
   * The Carousel Item is meant to be slotted into the CBP-Carousel and represents a single
   * iteration of content for the CBP-Carousel
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `height`: undefined
   * - `width`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Anything placed into the default slot will be rendered in the cbp-carousel-item
   */
  "cbp-carousel-item": Partial<
    CbpCarouselItemProps & BaseProps<CbpCarouselItem> & BaseEvents
  >;

  /**
   * The Checkbox component wraps the slotted native form control (`input type="checkbox"`) and label text,
   * providing cross-browser styling according to the design system specifications.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `name`: undefined
   * - `value`: undefined
   * - `field-id`/`fieldId`: undefined
   * - `checked`: undefined
   * - `indeterminate`: undefined
   * - `disabled`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `stateChanged`: A custom event emitted when the checked state changes due to user interaction.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: the checkbox control and label text are placed in the default slot, both of which are rendered inside of the `label` element. The label should not include excessively long descriptive text.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleChange(e) => void`: undefined
   * - `reset() => void`: A custom method to reset the Checkbox component to its initial state and value since it does not update
   * properly on a native form reset when the checked state is set via the component property. This method may
   * be called manually, but is automatically called on form reset when using the `cbp-form` component.
   * - `watchDisabledHandler(newValue: boolean) => void`: undefined
   * - `watchChecked(newValue: boolean) => void`: undefined
   * - `watchIndeterminateHandler(newValue: boolean) => void`: undefined
   */
  "cbp-checkbox": Partial<
    CbpCheckboxProps & BaseProps<CbpCheckbox> & BaseEvents
  >;

  /**
   * The Chip component acts like an interactive version of the Tag and is typically used for selecting or filtering.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `name`: undefined
   * - `value`: undefined
   * - `pressed`: undefined
   * - `disabled`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `chipClick`: A custom event emitted when the chip is activated/toggled.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot defines the chip's label.
   * - `cbp-chip-icon`: Optionally slot a custom icon for the default state (will still show the x for removal when pressed).
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleClick(e) => void`: undefined
   */
  "cbp-chip": Partial<CbpChipProps & BaseProps<CbpChip> & BaseEvents>;

  /**
   * The Code Snippet component is used to display code in a readable format and facilitate copying it.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `variant`: undefined
   * - `height`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `copyTextClick`: Emits a custom event when the "Copy" button is activated, copying the code to the clipboard.
   * - `toggleShowAllClick`: Emits a custom event when the the "Show More/Less" control is activated (for code blocks overflowing the specified height).
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Raw, unescaped code is slotted in the default slot and escaped for display purposes.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `copyText(e) => void`: undefined
   * - `toggleShowAll(e) => void`: undefined
   */
  "cbp-code-snippet": Partial<
    CbpCodeSnippetProps & BaseProps<CbpCodeSnippet> & BaseEvents
  >;

  /**
   * The Container component is a building block component for wrapping content and providing
   * visual treatment such as a background image or color.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `background`: undefined
   * - `text-color`/`textColor`: undefined
   * - `width`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Any content or layout components may be slotted within the container.
   */
  "cbp-container": Partial<
    CbpContainerProps & BaseProps<CbpContainer> & BaseEvents
  >;

  /**
   * The Dialog component represents a dialog overlaid on top of the web page, which can be used similar
   * to an alert/confirm dialog or contain a small form.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `open`: undefined
   * - `height`: undefined
   * - `width`: undefined
   * - `uid`: undefined
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `color`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `dialogOpen`: Custom event fired when the dialog is opened.
   * - `dialogClose`: Custom event fired when the dialog is closed.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The body content of the dialog goes in the default slot.
   * - `cbp-dialog-header`: The dialog header, which should render a semantic h2 tag, is slotted into this named slot.
   * - `cbp-dialog-body`: Body content may optionally be slotted into this named slot.
   * - `cbp-dialog-actions`: The dialog actions (buttons) shall be slotted in this named slot.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `watchOpenHandler(newValue: boolean) => void`: undefined
   * - `openDialog() => void`: A public method for opening the dialog.
   * - `closeDialog() => void`: A public method for closing the dialog.
   * - `setFocus() => void`: undefined
   * - `handleBackdropClick({ target }) => void`: undefined
   */
  "cbp-dialog": Partial<CbpDialogProps & BaseProps<CbpDialog> & BaseEvents>;

  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `current`: undefined
   * - `item-name`/`itemName`: undefined
   * - `items`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `navigateCollection`: Custom event emitted when the Dot-indicator changes active indicator
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `setIndexActive(index) => void`: undefined
   * - `generateIndicator() => void`: undefined
   * - `keyboardNav(key) => void`: undefined
   */
  "cbp-dot-indicator": Partial<
    CbpDotIndicatorProps & BaseProps<CbpDotIndicator> & BaseEvents
  >;

  /**
   * The Drawer is a container that may be hidden and revealed, sliding in from either side of the viewport,
   * containing application-defined contents. The Drawer may optionally be rendered in the flow of the page
   * at larger screen sizes.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `position`: undefined
   * - `open`: undefined
   * - `uid`: undefined
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `persist-at`/`persistAt`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   * - `persistent`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `drawerOpen`: Custom event fired when the drawer is opened.
   * - `drawerClose`: Custom event fired when the drawer is closed.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The Drawer contents go in the default slot.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `watchOpenHandler(newValue: boolean) => void`: undefined
   * - `openDrawer() => void`: A public method for opening the drawer.
   * - `closeDrawer() => void`: A public method for closing the drawer.
   * - `setFocus() => void`: undefined
   * - `handleBackdropClick(e) => void`: undefined
   * - `handleKeyUp(e) => void`: undefined
   * - `doPersistAt(mql) => void`: undefined
   */
  "cbp-drawer": Partial<CbpDrawerProps & BaseProps<CbpDrawer> & BaseEvents>;

  /**
   * The Dropdown component offers an alternative to the native select element that can be fully styled
   * and support additional variants, such as a multi-select and/or combobox.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `multiple`: undefined
   * - `filter`: undefined
   * - `async`: undefined
   * - `minimum-input-length`/`minimumInputLength`: undefined
   * - `items`: undefined
   * - `create`: undefined
   * - `field-id`/`fieldId`: undefined
   * - `name`: undefined
   * - `placeholder`: undefined
   * - `selected-label`/`selectedLabel`: undefined
   * - `value`: undefined
   * - `open`: undefined
   * - `error`: undefined
   * - `readonly`: undefined
   * - `disabled`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   * - `debug`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `valueChange`: A custom event emitted when the a selection is made in the dropdown.
   * - `createItem`: A custom event that is fired when the "create item" option is clicked.
   * - `filterKeypress`: A custom event that is fired when a key is pressed while filtering a combobox.
   * - `populateCombobox`: A custom event emitted for asynchronous comboboxes (`async=true` and `filter=true`) and
   * the search string meets the `minimumInputLength` requirement.
   * This event can be listened for and the `items` (JSON) updated via application logic/service call.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Only Dropdown Items should be placed in the default slot. They get auto-slotted into 'cbp-dropdown-items' behind the scenes.
   * - `cbp-dropdown-items`: Dropdown items are auto-slotted here. Not need to specify this named slot.
   * - `cbp-dropdown-attached-button-start`: Allows for an optional button control to be slotted as an overlay at the start of the dropdown (such as a "previous" button).
   * - `cbp-dropdown-attached-button-end`: Allows for an optional button control to be slotted as an overlay at the end of the dropdown (such as a "next" button).
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleDropdownItemClick(e) => void`: undefined
   * - `watchOpen(newValue) => void`: undefined
   * - `watchValue(newValue, oldValue) => void`: undefined
   * - `watchItems(newValue) => void`: undefined
   * - `reset() => void`: A custom method to reset the Dropdown component to its initial state and value since it does not update
   * properly on a native form reset. This method may be called manually, but is automatically called on
   * form reset when using the `cbp-form` component.
   * - `clearSelections(e = undefined) => void`: A public method to clear all selected items in a dropdown (single or multi-select).
   * Emits the valueChange event afterward.
   * - `doCreateItem(e) => void`: undefined
   * - `updateValue(value: string, selected: boolean = true) => void`: undefined
   * - `setSelectedFromValue() => void`: undefined
   * - `setValueFromSelected() => void`: undefined
   * - `generateItems(items) => void`: undefined
   * - `checkExactMatch() => boolean`: undefined
   * - `handleSlotChange(e) => void`: undefined
   * - `handleCounterClick(e) => void`: undefined
   * - `handleCounterKeydown(e) => void`: undefined
   * - `handleDropdownClick(e) => void`: undefined
   * - `getActionFromKey(event) => void`: undefined
   * - `jumpToLetter(letter) => void`: undefined
   * - `getFirstLetterMatches(letter) => void`: undefined
   * - `handleComboBoxInput(event) => void`: undefined
   * - `searchByString(searchString, e) => void`: undefined
   * - `getSearchStringMatches(searchString) => void`: undefined
   * - `filterDropdownItems(matches) => void`: undefined
   * - `clearFilters() => void`: undefined
   * - `setDefaultItem() => void`: undefined
   * - `setCurrent(newValue: number = 0, oldValue: number | undefined = undefined) => void`: undefined
   * - `isScrollable(element) => void`: undefined
   * - `maintainScrollVisibility(activeElement, scrollParent) => void`: undefined
   * - `getSizeInfo() => void`: undefined
   */
  "cbp-dropdown": Partial<
    CbpDropdownProps & BaseProps<CbpDropdown> & BaseEvents
  >;

  /**
   * The Dropdown Item represents an individual option for the Dropdown, similar to an option in a
   * native `select` but with more flexibility.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `value`: undefined
   * - `disabled`: undefined
   * - `current`: undefined
   * - `item-id`/`itemId`: undefined
   * - `selected`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `dropdownItemClick`: Internal use: A custom event emitted when a dropdown item is clicked/activated and is handled by the
   * parent dropdown, also resulting in a `valueChange` event emitted from the dropdown component.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The Dropdown Item's label or content goes in the default slot; for multi-select dropdowns, this includes the checkbox component and slotted native `input type="checkbox"` and label.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleClick(e) => void`: undefined
   * - `watchSelected(newValue) => void`: undefined
   */
  "cbp-dropdown-item": Partial<
    CbpDropdownItemProps & BaseProps<CbpDropdownItem> & BaseEvents
  >;

  /**
   * A standalone component used for progressive disclosure, the Expand component organizes content under a relevant heading,
   * which is used as a control for revealing and hiding its content.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `heading-id`/`headingId`: undefined
   * - `open`: undefined
   * - `label`: undefined
   * - `heading-level`/`headingLevel`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `expandClick`: A custom event emitted when the accordion item control is activated.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Hidden/revealed content is placed in the default slot.
   * - `cbp-expand-label`: Optionally the component label/heading may be slotted via named slot if it contains markup rather than plain text.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleClick(e) => void`: undefined
   */
  "cbp-expand": Partial<CbpExpandProps & BaseProps<CbpExpand> & BaseEvents>;

  /**
   * The File Input component builds upon the native file input, allowing for custom styles and
   * enhancing functionality when integrated with JavaScript frameworks. This component should
   * be used within the `cbp-form-field` component like any other input pattern.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `name`: undefined
   * - `field-id`/`fieldId`: undefined
   * - `multiple`: undefined
   * - `accept`: undefined
   * - `enhanced`: undefined
   * - `status`: undefined
   * - `error`: undefined
   * - `disabled`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `valueChange`: A custom event emitted when the value of the component changes, either by selecting (non-duplicate) files
   * or canceling the dialog, or clicking the button in the file list to remove a file.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The native `input type="file"` gets slotted in the default slot.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleChange(e) => void`: undefined
   * - `reset() => void`: A custom method to reset the file input component (for enhanced/multi-file inputs) to its initial state and value
   * since it does not update properly on a native form reset. This method may be called manually, but is automatically
   * called on form reset when using the `cbp-form` component.
   * - `getData() => void`: undefined
   * - `watchDisabledHandler(newValue: boolean) => void`: undefined
   * - `watchStatusHandler(newValue: any) => void`: undefined
   * - `handleDelete(e) => void`: undefined
   */
  "cbp-file-input": Partial<
    CbpFileInputProps & BaseProps<CbpFileInput> & BaseEvents
  >;

  /**
   * The Flex component invokes a CSS Flexbox context, acting as the flex parent and implementing
   * CSS Flexbox as a component API. Immediate child nodes are automatically considered flex items.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `display`: undefined
   * - `wrap`: undefined
   * - `direction`: undefined
   * - `align-items`/`alignItems`: undefined
   * - `align-content`/`alignContent`: undefined
   * - `justify-content`/`justifyContent`: undefined
   * - `gap`: undefined
   * - `breakpoint`: undefined
   * - `content-breakpoint`/`contentBreakpoint`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: DOM nodes placed in the default slot automatically become flex children. The use of `cbp-flex-item` is only required for granular control of individual flex item properties.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleBreakpointChange(mql) => void`: undefined
   */
  "cbp-flex": Partial<CbpFlexProps & BaseProps<CbpFlex> & BaseEvents>;

  /**
   * The Flex Item component may optionally be used to specify properties of an individual flex item.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `align-self`/`alignSelf`: undefined
   * - `order`: undefined
   * - `flex-grow`/`flexGrow`: undefined
   * - `flex-shrink`/`flexShrink`: undefined
   * - `flex-basis`/`flexBasis`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Content slotted in the default slot may consist of any combination of text or DOM nodes.
   */
  "cbp-flex-item": Partial<
    CbpFlexItemProps & BaseProps<CbpFlexItem> & BaseEvents
  >;

  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `top`: undefined
   * - `right`: undefined
   * - `bottom`: undefined
   * - `left`: undefined
   * - `sx`: undefined
   */
  "cbp-floating-action": Partial<
    CbpFloatingActionProps & BaseProps<CbpFloatingAction> & BaseEvents
  >;

  /**
   * The Footer component serves site visitors who arrive at the bottom of a page without finding
   * what they want, typically containing information about the agency and navigation links.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The main footer content goes in the default slot.
   * - `cbp-footer-nav`: Footer navigation links are slotted within this named slot.
   */
  "cbp-footer": Partial<CbpFooterProps & BaseProps<CbpFooter> & BaseEvents>;

  /**
   * The Form component may optionally be used to wrap a native HTML form, providing enhanced functionality and support
   * for some component functionality that would otherwise not be supported by the native platform, e.g., an enhanced
   * file input that supports manipulating the file list and reset functionality for some custom form components.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `prevent-submit`/`preventSubmit`: undefined
   * - `debug`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `suppressedSubmit`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: This tag is a wrapper for the native `form` tag and its contents, which are slotted in the default slot.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleReset() => void`: undefined
   * - `handleFormData(e) => void`: undefined
   * - `handleSubmit(e) => void`: undefined
   * - `addFiles(formData) => void`: undefined
   * - `handleEnhancedFileInput(e) => void`: undefined
   */
  "cbp-form": Partial<CbpFormProps & BaseProps<CbpForm> & BaseEvents>;

  /**
   * The Form Field component represents a generic, reusable pattern for form fields of all types, displaying the
   * label and form control, along with optional descriptive text and error state in a consistent and accessible manner.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: undefined
   * - `description`: undefined
   * - `field-id`/`fieldId`: undefined
   * - `group`: undefined
   * - `error`: undefined
   * - `error-messages`/`errorMessages`: undefined
   * - `readonly`: undefined
   * - `disabled`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `valueChange`: A custom event emitted when the the nested input is changed by user interaction.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: the default slot holds the form control(s)/input(s).
   * - `cbp-form-field-label`: An optional slot for labels containing markup.
   * - `cbp-form-field-description`: An optional slot for descriptions containing markup.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleChange(e) => void`: undefined
   * - `handleValueChange() => void`: undefined
   * - `watchReadonlyHandler(newValue: boolean) => void`: undefined
   * - `watchDisabledHandler(newValue: boolean) => void`: undefined
   * - `watchErrorHandler(newValue: boolean) => void`: undefined
   */
  "cbp-form-field": Partial<
    CbpFormFieldProps & BaseProps<CbpFormField> & BaseEvents
  >;

  /**
   * The Form Field Wrapper component is an optional wrapper that offers means for applying overlays
   * and button controls to form inputs in accordance with design requirements.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot holds the form control.
   * - `cbp-form-field-overlay-start`: Optionally slot an overlay positioned on the left side of the form field.
   * - `cbp-form-field-overlay-end`: Optionally slot an overlay positioned on the right side of the form field.
   * - `cbp-form-field-attached-button`: Optionally slot in any buttons that appear attached to the native form field.
   * - `cbp-form-field-unattached-buttons`: Optionally slot in any buttons that appear horizontally after the native form field, but not attached to it.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `getSizeInfo() => void`: undefined
   */
  "cbp-form-field-wrapper": Partial<
    CbpFormFieldWrapperProps & BaseProps<CbpFormFieldWrapper> & BaseEvents
  >;

  /**
   * The Grid component invokes a CSS Grid context, acting as the grid parent and implementing
   * CSS Grid as a component API. Immediate child nodes are automatically considered grid items.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `display`: undefined
   * - `grid-template-areas`/`gridTemplateAreas`: undefined
   * - `grid-template-columns`/`gridTemplateColumns`: undefined
   * - `grid-template-rows`/`gridTemplateRows`: undefined
   * - `grid-auto-flow`/`gridAutoFlow`: undefined
   * - `grid-auto-columns`/`gridAutoColumns`: undefined
   * - `grid-auto-rows`/`gridAutoRows`: undefined
   * - `align-items`/`alignItems`: undefined
   * - `justify-items`/`justifyItems`: undefined
   * - `align-content`/`alignContent`: undefined
   * - `justify-content`/`justifyContent`: undefined
   * - `gap`: undefined
   * - `breakpoint`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot accepts grid items. These should be `cbp-grid-item` components or DOM nodes; inserting plain text nodes as a direct descendant of the grid may yield unexpected results.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleBreakpointChange(mql) => void`: undefined
   */
  "cbp-grid": Partial<CbpGridProps & BaseProps<CbpGrid> & BaseEvents>;

  /**
   * The Grid Item component may optionally be used to specify properties of an individual grid item.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `grid-column-start`/`gridColumnStart`: undefined
   * - `grid-column-end`/`gridColumnEnd`: undefined
   * - `grid-row-start`/`gridRowStart`: undefined
   * - `grid-row-end`/`gridRowEnd`: undefined
   * - `align-self`/`alignSelf`: undefined
   * - `justify-self`/`justifySelf`: undefined
   * - `grid-area`/`gridArea`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot may contain any content representing the grid item.
   */
  "cbp-grid-item": Partial<
    CbpGridItemProps & BaseProps<CbpGridItem> & BaseEvents
  >;

  /**
   * The Hide component represents a component-based implementation for programmatically hiding
   * (or visually hiding) content based on application logic or media query.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `display`: undefined
   * - `hide`: undefined
   * - `visually-hide`/`visuallyHide`: undefined
   * - `hide-at`/`hideAt`: undefined
   * - `visually-hide-at`/`visuallyHideAt`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `hideToggle`: A custom event emitted when the accordion item control is activated.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Content in the default slot to be conditionally hidden.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `doHideAt(mql) => void`: undefined
   * - `doVisuallyHideAt(mql) => void`: undefined
   */
  "cbp-hide": Partial<CbpHideProps & BaseProps<CbpHide> & BaseEvents>;

  /**
   * The Icon component represents a standard API for embedding accessible Scalable Vector Graphics (SVG) icons
   * into applications/documents. This component contains a number of icons used by the design system and may be used to wrap
   * external icons for consistent styling via the component API.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `name`: undefined
   * - `src`: undefined
   * - `size`: undefined
   * - `color`: undefined
   * - `rotate`: undefined
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: For icons that are not baked into this component, the SVG of an external icon may be slotted within this component to inherit the component properties for controlling some aspects such as color, sizing, and rotation.
   */
  "cbp-icon": Partial<CbpIconProps & BaseProps<CbpIcon> & BaseEvents>;

  /**
   * The cbp-link component is used to render an anchor or provide consistent styling for a slotted anchor.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `href`: undefined
   * - `rel`: undefined
   * - `target`: undefined
   * - `download`: undefined
   * - `language`: undefined
   * - `shortcut-key`/`shortcutKey`: undefined
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `disabled`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `linkClick`: A custom event emitted with the anchor is activated/clicked.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: the default slot represents the linked content, which may include markup, for the rendered anchor tag.
   * - `cbp-link-custom`: Custom anchors may be slotted via named-slot, which prevents the web component from rendering its own anchor tag.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleClick(e) => void`: undefined
   */
  "cbp-link": Partial<CbpLinkProps & BaseProps<CbpLink> & BaseEvents>;

  /**
   * The List component is used to render semantic HTML lists in accordance with the design system,
   * supporting additional variants with custom/user-defined icons and description lists.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `variant`: undefined
   * - `tag`: undefined
   * - `size`: undefined
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `sx`: undefined
   * - `context`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Only list items of the proper semantic type should be slotted in the default slot.
   */
  "cbp-list": Partial<CbpListProps & BaseProps<CbpList> & BaseEvents>;

  /**
   * A Listbox wraps a standard text or search input, enhancing it by providing suggestions in a format visually similar to a dropdown, from which a selection may optionally be made.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `uid`: undefined
   * - `open`: undefined
   * - `items`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `updateListboxSuggestions`: A custom event emitted when the value of the wrapped input changes to update the listbox suggestions (items)
   * via application logic.
   * - `valueChange`: A custom event emitted only when a selection is made in the listbox.
   * This event will be listened for in addition to the native input's change event by the parent `cbp-form-field`,
   * as selection does not trigger a native change event on the input.
   * To get all changes to the wrapped input, listen to the `valueChange` event on the parent `cbp-form-field`.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: A native text or search input (or optionally `cbp-form-field-wrapper as well) should be slotted in the default slot.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `watchOpen(newValue) => void`: undefined
   * - `watchItems(newValue) => void`: undefined
   * - `getActionFromKey(event) => void`: undefined
   * - `setCurrent(newValue = 0, oldValue = undefined) => void`: undefined
   * - `isScrollable(element) => void`: undefined
   * - `maintainScrollVisibility(activeElement, scrollParent) => void`: undefined
   */
  "cbp-listbox": Partial<CbpListboxProps & BaseProps<CbpListbox> & BaseEvents>;

  /**
   * The Loader is used as a visual indicator of progress during waiting periods.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `progress-id`/`progressId`: undefined
   * - `variant`: undefined
   * - `size`: undefined
   * - `determinate`: undefined
   * - `value`: undefined
   * - `max`: undefined
   * - `orientation`: undefined
   * - `success`: undefined
   * - `error`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Label text may be provided in the default slot.
   */
  "cbp-loader": Partial<CbpLoaderProps & BaseProps<CbpLoader> & BaseEvents>;

  /**
   * A Menu contains additional actions in the form of links or buttons, which can be shown by activating a control.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `position`: undefined
   * - `open`: undefined
   * - `uid`: undefined
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `toggleMenu`: A custom event fired when the menu is opened or closed.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Both the menu control and the menu items are slotted in the default slot. (The menu items are auto-slotting into their proper place).
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `openMenu() => void`: A public method for opening the menu.
   * - `closeMenu() => void`: A public method for closing the menu.
   * - `watchOpen(newValue) => void`: undefined
   * - `clickAwayHandler({ target }) => void`: undefined
   * - `handleKeyPress(e) => void`: undefined
   * - `setCurrentMenuItem(i = 0) => void`: undefined
   * - `handleKeyPressCloseButton(e) => void`: undefined
   */
  "cbp-menu": Partial<CbpMenuProps & BaseProps<CbpMenu> & BaseEvents>;

  /**
   * The Menu Item component wraps each individual control (link or button) within the menu.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `indent-level`/`indentLevel`: undefined
   * - `color`: undefined
   * - `slot`: undefined (property only)
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Any form of control may be slotted in the default slot (a link, button, link component, button component, component-based Router, etc.). But any components should render a semantic anchor or button element.
   */
  "cbp-menu-item": Partial<
    CbpMenuItemProps & BaseProps<CbpMenuItem> & BaseEvents
  >;

  /**
   * The Multicol component is a wrapper that invokes a CSS Multi-column layout context, ideal for
   * using with semantic lists and checklists/radio lists.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `columns`: undefined
   * - `width`: undefined
   * - `gap`: undefined
   * - `rule`: undefined
   * - `nobreak`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot contains any content or children to be arranged in a multi-column layout.
   */
  "cbp-multicol": Partial<
    CbpMulticolProps & BaseProps<CbpMulticol> & BaseEvents
  >;

  /**
   * The Nav Item component wraps each individual control (link or button) within the App Header.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `current`: undefined
   * - `name`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `navItemClick`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Any form of control may be slotted in the default slot (a link, button, link component, button component, component-based Router, etc.). But any components should render a semantic anchor or button element.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleNavItemClick(e) => void`: undefined
   * - `doSelected(newValue) => void`: undefined
   */
  "cbp-nav-item": Partial<CbpNavItemProps & BaseProps<CbpNavItem> & BaseEvents>;

  /**
   * The Notice component presents persistent information that gives extra insight into a particular content area.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `color`: undefined
   * - `sx`: undefined
   * - `context`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The notice body content is placed in the default slot.
   * - `cbp-notice-title`: The notice title is placed in this named slot.
   */
  "cbp-notice": Partial<CbpNoticeProps & BaseProps<CbpNotice> & BaseEvents>;

  /**
   * The Pagination component presents a common UI pattern for displaying data sets broken up into smaller,
   * more consumable (and performant) chunks or "pages."
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `records`: undefined
   * - `page-size`/`pageSize`: undefined
   * - `page`: undefined
   * - `max-pages`/`maxPages`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `paginationChange`: A custom event emitted when the click event occurs for either a rendered button or anchor/link.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot positions specified content between the "showing items" text and page controls. This slot should rarely be used.
   * - `cbp-pagination-items-per-page`: Slot a `cbp-dropdown` here with numeric values (or "All") defining the options for page size.
   * - `cbp-pagination-pages`: Slot an empty `cbp-dropdown` here with next/previous controls for the page selection. The Pagination component will manage the items within this dropdown.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handlePagesButtonNav({detail: {value} }) => void`: undefined
   */
  "cbp-pagination": Partial<
    CbpPaginationProps & BaseProps<CbpPagination> & BaseEvents
  >;

  /**
   * A panel is a styled container for displaying information within the main page content area or to either side.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Panel content goes in the default slot.
   * - `cbp-panel-header`: The panel header is placed in this named slot.
   */
  "cbp-panel": Partial<CbpPanelProps & BaseProps<CbpPanel> & BaseEvents>;

  /**
   * The Radio component wraps the slotted native form control (`input type="radio"`) and label text, providing cross-browser styling.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `name`: undefined
   * - `value`: undefined
   * - `field-id`/`fieldId`: undefined
   * - `checked`: undefined
   * - `disabled`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `stateChanged`: A custom event emitted when the click event occurs for either a rendered button or anchor/link.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The radio control and label text goes in the default slot, both of which are placed inside of the `label` element. The label should not include excessively long descriptive text.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleChange(e) => void`: undefined
   * - `reset() => void`: A custom method to reset the Radio component to its initial state and value since it does not update
   * properly on a native form reset when the checked state is set via the component property. This method may
   * be called manually, but is automatically called on form reset when using the `cbp-form` component.
   * - `watchDisabledHandler(newValue: boolean) => void`: undefined
   */
  "cbp-radio": Partial<CbpRadioProps & BaseProps<CbpRadio> & BaseEvents>;

  /**
   * The Resize Observer component is a wrapper that implements a resizeObserver to detect changes to its size,
   * typically to compare to an immediate child that is wrapping a collection of variable-sized elements
   * (e.g., links, tabs, etc.), in order to implement responsive functionality that cannot be accomplished
   * with a media query or container query.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `debounce`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `resized`: A custom event emitted when the component is resized to give new values for size of component.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: any markup or content may be placed in the default slot.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `getCurrentSize() => void`: undefined
   * - `getClientRect() => void`: undefined
   */
  "cbp-resize-observer": Partial<
    CbpResizeObserverProps & BaseProps<CbpResizeObserver> & BaseEvents
  >;

  /**
   * The Section component represents a generic block that may be used for semantic meaning or as
   * a generic container for styling.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `tag`: undefined
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Content slotted in the default slot is rendered inside of the specified tag, if any.
   */
  "cbp-section": Partial<CbpSectionProps & BaseProps<CbpSection> & BaseEvents>;

  /**
   * The Segmented Button Group component wraps multiple buttons and can be used as a multi-option
   * toggle or group of controls.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `name`: undefined
   * - `value`: undefined
   * - `multiple`: undefined
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `disabled`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `segmentedButtonGroupClick`: A custom event fired when any of the group's buttons are clicked, whether toggled on or off.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Only `cbp-button` components should be slotted within the default slot to make up the button group.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `reset() => void`: A custom method to reset the Segmented Button Group component to its initial state and value (when a name is specified)
   * since the hidden input does not update on a native form reset. This method may be called manually, but is automatically
   * called on form reset when using the `cbp-form` component.
   * - `handleComponentLoad({ detail: { nativeElement: element, host } }) => void`: undefined
   * - `handleButtonClick(e) => void`: undefined
   * - `watchValueHandler(newValue) => void`: undefined
   * - `setValueFromButtons() => void`: undefined
   */
  "cbp-segmented-button-group": Partial<
    SegmentedButtonGroupProps & BaseProps<SegmentedButtonGroup> & BaseEvents
  >;

  /**
   * The Skip Navigation link (or "Skip Nav") is an essential accessibility feature that allows screen
   * reader users to skip repetitive portions of the page and get right to the main content.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `target-id`/`targetId`: undefined
   * - `shortcut-key`/`shortcutKey`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot accepts custom link text, which is only needed if multiple skip links are present. Otherwise, it is advised to use the default "Skip to main content", which has been validated for clarity and pronunciation.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleClick(e) => void`: undefined
   */
  "cbp-skip-nav": Partial<CbpSkipNavProps & BaseProps<CbpSkipNav> & BaseEvents>;

  /**
   * The Slider component allows for the selection of a value within a range, styled to design system specifications.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `field-id`/`fieldId`: undefined
   * - `value`: undefined
   * - `gap`: undefined
   * - `variant`: undefined
   * - `min`: undefined
   * - `max`: undefined
   * - `step`: undefined
   * - `hide-minmax`/`hideMinmax`: undefined
   * - `hide-input`/`hideInput`: undefined
   * - `error`: undefined
   * - `disabled`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `valueChange`: A custom event fired when the value of the slider changes.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: A native `input type="range"` (or 2 for range sliders) gets slotted within the default slot.
   * - `cpb-slider-before`: an optional slot to place content (e.g., an icon) before the slider control.
   * - `cpb-slider-after`: an optional slot to place content (e.g., an icon) after the slider control.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `reset() => void`: A custom method to reset the Slider component to its initial state and value since it does not update
   * properly on a native form reset. This method may be called manually, but is automatically called on
   * form reset when using the `cbp-form` component.
   * - `watchDisabledHandler(newValue: boolean) => void`: undefined
   * - `handleChange(e, i = 0) => void`: undefined
   * - `setSliderBar() => void`: undefined
   * - `initRangeSlider() => void`: undefined
   * - `updateRangeBoundaries() => void`: undefined
   */
  "cbp-slider": Partial<CbpSliderProps & BaseProps<CbpSlider> & BaseEvents>;

  /**
   * Structured lists are a way of displaying long lists of data where the user is not directly comparing
   * raw data one row at a time.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `header-id`/`headerId`: undefined
   * - `striped`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Only list items may be slotted within the default content.
   * - `cbp-structured-list-header`: Optional information such as number of results, filters, etc. are provided by the application and slotted into this named slot.
   * - `cbp-structured-list-footer`: Optional information and/or interactive elements are provided by the application and slotted into this named slot.
   */
  "cbp-structured-list": Partial<
    CbpStructuredListProps & BaseProps<CbpStructuredList> & BaseEvents
  >;

  /**
   * The Structured List Item component may optionally be used to hold each list item's content. This component
   * is needed primarily when designating an item with the "danger" color or when list items are selectable.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `color`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The list item content is placed in the default slot. Content may be wrapped in a CSS grid (e.g., `cbp-grid`) to give each list item consistent structure and sizing.
   */
  "cbp-structured-list-item": Partial<
    CbpStructuredListItemProps & BaseProps<CbpStructuredListItem> & BaseEvents
  >;

  /**
   * Sub-Navigation (Subnav) is meant to be used as a secondary, vertical navigation.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `flat`: undefined
   * - `store`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Subnav Items (and rarely anything else) should be slotted in the default slot.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `updateActiveItem(newValue) => void`: undefined
   * - `updateCurrent(newValue) => void`: undefined
   * - `handleSubnavItemClick({detail: {host}}) => void`: undefined
   * - `findParent(subnavItem: HTMLCbpSubnavItemElement) => HTMLCbpSubnavItemElement`: undefined
   */
  "cbp-subnav": Partial<CbpSubNavProps & BaseProps<CbpSubNav> & BaseEvents>;

  /**
   * The Subnav Item component represents a single navigation link and can also be nested multiple levels to convey a site/navigation hierarchy.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: undefined
   * - `href`: undefined
   * - `uid`: undefined
   * - `name`: undefined
   * - `current`: undefined
   * - `open`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `toggleSubnavItem`: undefined
   * - `subnavItemClick`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The Subnav Item's children are placed in the default slot.
   * - `(default)`: cbp-subnav-item-label - An optional slot in support of a label with markup. Replaces the `label` property if used.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleToggleSubnavItem(e) => void`: undefined
   * - `handleSubnavClick(e) => void`: undefined
   */
  "cbp-subnav-item": Partial<
    CbpSubnavItemProps & BaseProps<CbpSubnavItem> & BaseEvents
  >;

  /**
   * The Tab component represents an individual tab control within a tab set.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `name`: undefined
   * - `selected`: undefined
   * - `color`: undefined
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `tabLoaded`: Emits an event when the tab has been fully loaded for registration with the parent tabset.
   * - `tabClicked`: Emits a custom even containing an object that describes the tab that was activated.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot holds the tab's label (rendered as a button label), which may include text as well as icons, badges, and tags.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleTabClick(e = undefined) => void`: undefined
   */
  "cbp-tab": Partial<CbpTabProps & BaseProps<CbpTab> & BaseEvents>;

  /**
   * The Tab Panel component is a wrapper representing a tabpanel role and containing the content to be progressively disclosed.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `name`: undefined
   * - `selected`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot holds the contents of a tab panel, which may include any form of text, markup, and media elements.
   */
  "cbp-tab-panel": Partial<
    CbpTabPanelProps & BaseProps<CbpTabPanel> & BaseEvents
  >;

  /**
   * The Table component is a wrapper component encapsulating design system styles for semantic HTML
   * tables as well as applying progressive enhancements to the contained table.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `striped`: undefined
   * - `hover`: undefined
   * - `column-hover`/`columnHover`: undefined
   * - `overflow`: undefined
   * - `debug`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `tableSort`: An event emitted when the table is sorted via user interaction activating a table header control.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The semantic table HTML is placed within the default slot.
   * - `cbp-table-toolbar`: Any sort of filters or table controls may be slotted within this named slot.
   * - `cbp-table-live-region`: For complex tables with many controls and/or pagination, the state of the data may be quantified and described accessibly via an `aria-live` region, which is hidden from view. E.g., Filtered by the term "test", ordered by Column 1 ascending, displaying records 100-200 of 1234.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `doSort(column: number, e: any = undefined) => void`: Updates the UI statefullness (`aria-pressed`, `aria-sort`, and visual arrow icon) and
   * emits a custom event to hook up to application logic for the actual sorting
   */
  "cbp-table": Partial<CbpTableProps & BaseProps<CbpTable> & BaseEvents>;

  /**
   * Tabs are a common UI pattern of progressive disclosure mimicking the real world paradigm of tabbed
   * folders, each with a label and containing their own set of contents. Tabs allow the user to navigate
   * multiple views without leaving the page. This component wraps individual `cbp-tab` components.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Only `cbp-tab` components shall be slotted within the default slot.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `initTabset() => void`: undefined
   * - `setActiveTab(activatedTab, init = false) => void`: undefined
   * - `keyboardNav(key) => void`: undefined
   * - `responsiveNav(direction) => void`: undefined
   */
  "cbp-tabs": Partial<CbpTabsProps & BaseProps<CbpTabs> & BaseEvents>;

  /**
   * The Tag component is a non-interactive visual treatment for text, typically representing labels, keywords, or search terms.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `color`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The tag label or content is placed in the default slot.
   */
  "cbp-tag": Partial<CbpTagProps & BaseProps<CbpTag> & BaseEvents>;

  /**
   * The Toast component displays a brief, non-intrusive message that appears on a user interface to
   * provide feedback about an action or status update.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `color`: undefined
   * - `duration`: undefined
   * - `open`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The toast content is slotted in the default slot.
   * - `cbp-toast-icon`: The large toast icon, usually corresponding to the color variant, is slotted in this named slot.
   * - `cbp-toast-title`: The toast title is slotted within this named slot.
   * - `cbp-toast-buttons`: The toast action buttons, including a button to dismiss the toast at a minimum, are placed within this named slot.
   */
  "cbp-toast": Partial<CbpToastProps & BaseProps<CbpToast> & BaseEvents>;

  /**
   * The Toggle component is a visual variant of a Boolean selection form control (checkbox),
   * representing an on/off toggle switch.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `checked`: undefined
   * - `disabled`: undefined
   * - `hide-status`/`hideStatus`: undefined
   * - `status-text-on`/`statusTextOn`: undefined
   * - `status-text-off`/`statusTextOff`: undefined
   * - `name`: undefined
   * - `value`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `toggleClick`: Custom event fired when the control is toggled by the user.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The label text followed by the native `input type="checkbox"` control are provided in the default slot.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `toggleEvent(e) => void`: undefined
   * - `reset() => void`: A custom method to reset the Toggle component to its initial state and value since it does not update
   * properly on a native form reset when the checked state is set via the component property. This method may
   * be called manually, but is automatically called on form reset when using the `cbp-form` component.
   * - `watchDisabledHandler(newValue: boolean) => void`: undefined
   * - `watchCheckedHandler(newValue: boolean) => void`: undefined
   */
  "cbp-toggle": Partial<CbpToggleProps & BaseProps<CbpToggle> & BaseEvents>;

  /**
   * The Tooltip component allows for the disclosure of supplemental, non-essential information via a triggering element.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `open`: undefined
   * - `variant`: undefined
   * - `alignment`: undefined
   * - `field-id`/`fieldId`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The tooltip control label is provided in the default slot.
   * - `cbp-tooltip-content`: The tooltip content is placed in this named slot.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `dismissTooltip() => void`: undefined
   * - `handleFocusOut({ key, shiftKey }) => void`: undefined
   * - `handleKeyDown(ev: KeyboardEvent) => void`: undefined
   * - `invertContext() => void`: undefined
   */
  "cbp-tooltip": Partial<CbpTooltipProps & BaseProps<CbpTooltip> & BaseEvents>;

  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `selectable`: undefined
   * - `name`: undefined
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   * - `host`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `valueChange`: A custom event that rolls up all selected values and is emitted when any selectable item is changed.
   * Only selectable items that have both a name and value specified will be included.
   * If all items/checkboxes have the same name, specified by the `cbp-treeview`, then the values are returned as a simple array.
   * If items/checkboxes have individually specified names, values are returned as an array of objects containing name-value pairs.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleUpdateTreeviewItemParent(e) => void`: undefined
   */
  "cbp-treeview": Partial<
    CbpTreeviewProps & BaseProps<CbpTreeview> & BaseEvents
  >;

  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: undefined
   * - `open`: undefined
   * - `selectable`: undefined
   * - `name`: undefined
   * - `value`: undefined
   * - `checked`: undefined
   * - `indeterminate`: undefined
   * - `uid`: undefined
   * - `context`: undefined
   * - `host`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `updateTreeviewItemParent`: Custom event emitted to the parent treeview item to re-evaluate its checked/indeterminate state based on actions below it.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleCheck(e = undefined) => void`: undefined
   * - `handleUpdateTreeviewItemParent(e) => void`: undefined
   */
  "cbp-treeview-item": Partial<
    CbpTreeviewItemProps & BaseProps<CbpTreeviewItem> & BaseEvents
  >;

  /**
   * The Typography component encapsulates predefined styles for different kinds of text that makes
   * up a website, merging design language with CSS and HTML implementations.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `tag`: undefined
   * - `variant`: undefined
   * - `divider`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The content provided in the default slot is wrapped within the specified HTML tag.
   */
  "cbp-typography": Partial<
    CbpTypographyProps & BaseProps<CbpTypography> & BaseEvents
  >;

  /**
   * The Universal Header component establishes CBP branding, displaying the seal in a standard DHS blue header.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `logo-src-lg`/`logoSrcLg`: undefined
   * - `logo-src-sm`/`logoSrcSm`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot may contain any application-specific markup placed to the right of the CBP seal, usually a list of links.
   */
  "cbp-universal-header": Partial<
    CbpUniversalHeaderProps & BaseProps<CbpUniversalHeader> & BaseEvents
  >;

  /**
   * The "USA Banner" is similar to the U.S. Web Design System "banner" component, intended to establish trust
   * as a common identifier on public-facing government sites.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `open`: undefined
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleClick() => void`: undefined
   */
  "cbp-usa-banner": Partial<
    CbpUsaBannerProps & BaseProps<CbpUsaBanner> & BaseEvents
  >;
};

export type CustomElementsSolidJs = {
  /**
   * An Accordion is a common paradigm for progressive disclosure, organizing content under a relevant heading
   * that is used as a control for revealing and hiding its content. This component wraps multiple `cbp-accordion-item` tags.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `multiple`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Accordion Items shall be slotted in the default slot. While other content may be included within the default slot, it is not recommended.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `init() => void`: undefined
   * - `accordionActionHandler({ detail: { host, open } }) => void`: undefined
   */
  "cbp-accordion": Partial<
    CbpAccordionProps &
      CbpAccordionSolidJsProps &
      BaseProps<CbpAccordion> &
      BaseEvents
  >;

  /**
   * The Action Bar acts as a container for form controls (buttons) or other tools to affect the content of the page.
   * It is often used for batch actions on table or structured list data.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `variant`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Any controls or content may be slotted into the default slot and will be aligned to the right of the bar.
   * - `cbp-action-bar-info`: This named slot is intended for information placed before the default slot content, aligned to the left of the bar.
   */
  "cbp-action-bar": Partial<
    CbpActionBarProps &
      CbpActionBarSolidJsProps &
      BaseProps<CbpActionBar> &
      BaseEvents
  >;

  /**
   * Accordion Items are placed as children of the parent `cbp-accordion` tag. The content is slotted and the
   * heading control text is provided via the label property or the optional named slot.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `heading-id`/`headingId`: undefined
   * - `open`: undefined
   * - `label`: undefined
   * - `heading-level`/`headingLevel`: undefined
   * - `color`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `accordionItemClick`: A custom event emitted when the accordion item control is activated.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Accordion Item content is placed in the default slot.
   * - `cbp-accordion-item-label`: Optionally, an Accordion Item heading with markup may be placed in this slot rather than via the labal property.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleClick(e) => void`: undefined
   */
  "cbp-accordion-item": Partial<
    CbpAccordionItemProps &
      CbpAccordionItemSolidJsProps &
      BaseProps<CbpAccordionItem> &
      BaseEvents
  >;

  /**
   * An overarching App tag acts as a low-barrier way to get core design system elements (design tokens and styles)
   * as well as a way to manage site/page-level settings such as dark mode.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `theme`: undefined
   * - `debug`: undefined
   * - `app-name`/`appName`: undefined
   * - `app-version`/`appVersion`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: All application markup should be placed within the default slot to inherit the base CSS, design tokens, and dark mode styling.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleThemeChange(mql) => void`: undefined
   */
  "cbp-app": Partial<
    CbpAppProps & CbpAppSolidJsProps & BaseProps<CbpApp> & BaseEvents
  >;

  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `subnav-drawer-id`/`subnavDrawerId`: undefined
   * - `search`: undefined
   * - `search-method`/`searchMethod`: undefined
   * - `search-action`/`searchAction`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `searchInput`: A custom event emitted in accordance with the native input's onInput event.
   * - `searchSubmit`: A custom event emitted in accordance with the native search form's submit event.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot usually contains only `cbp-nav-item` tags, but other content may also be included.
   * - `(default)`: cbp-home - The link to the home page containing the Application Name as link text should be placed within this named slot for the intended visual treatment.
   * - `(default)`: cbp-app-header-extras - Optional extra buttons/links that are right-aligned may be slotted within the app header but outside of the `nav` landmark.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleNavDrawerClose(e) => void`: undefined
   * - `handleSearchInput(e) => void`: undefined
   * - `handleSearchSubmit(e) => void`: undefined
   * - `handleKeyDown(ev: KeyboardEvent) => void`: undefined
   * - `handleClick(event: MouseEvent) => void`: undefined
   * - `openSearch() => void`: A public method to show the search form in the application header.
   * - `closeSearch() => void`: A public method to close/hide the search form in the application header.
   * - `handleTabFocusOut({ key, shiftKey }) => void`: undefined
   * - `handleShiftTabFocusOut({ key, shiftKey }) => void`: undefined
   * - `updateCurrentItem(newValue) => void`: undefined
   * - `setCurrentNav(activatedNav) => void`: undefined
   * - `updateActiveItem(newValue) => void`: undefined
   * - `handleResize(width) => void`: undefined
   * - `doResponsive() => void`: undefined
   * - `doFullSize() => void`: undefined
   */
  "cbp-app-header": Partial<
    CbpAppHeaderProps &
      CbpAppHeaderSolidJsProps &
      BaseProps<CbpAppHeader> &
      BaseEvents
  >;

  /**
   * The Badge component is generally used for emphasizing a numeric characteristic of an object
   * (e.g., the number of unread items in a folder).
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `color`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The slotted badge content should be a short 1-2 digit number.
   */
  "cbp-badge": Partial<
    CbpBadgeProps & CbpBadgeSolidJsProps & BaseProps<CbpBadge> & BaseEvents
  >;

  /**
   * The Banner is a container spanning the entire viewport meant to highlight urgent or important content.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `color`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `bannerDismiss`: A custom event emitted with the Banner is dismissed.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The main content of the banner goes in the default slot.
   * - `cbp-banner-title`: An optional banner title may be slotted here.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleDismiss(e) => void`: undefined
   */
  "cbp-banner": Partial<
    CbpBannerProps & CbpBannerSolidJsProps & BaseProps<CbpBanner> & BaseEvents
  >;

  /**
   * Breadcrumbs give users an indicator of where they are within a site/application hierarchy,
   * especially helpful when deeper within the site’s architecture. This component should wrap links
   * representing the parent sections of the current page, but not including the current page.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `divider`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The individual links making up the breadcrumbs are placed in the default slot.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleResize(width) => void`: undefined
   * - `resizeResponsive(mode) => void`: undefined
   * - `createMenu(breadcrumbs) => void`: undefined
   */
  "cbp-breadcrumb": Partial<
    CbpBreadcrumbProps &
      CbpBreadcrumbSolidJsProps &
      BaseProps<CbpBreadcrumb> &
      BaseEvents
  >;

  /**
   * The Button component represents a UI control visually styled like a button, regardless of whether
   * it renders (or wraps) a button or an anchor tag.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `tag`: undefined
   * - `type`: undefined
   * - `fill`: undefined
   * - `color`: undefined
   * - `variant`: undefined
   * - `control-id`/`controlId`: undefined
   * - `name`: undefined
   * - `value`: undefined
   * - `href`: undefined
   * - `rel`: undefined
   * - `target`: undefined
   * - `download`: undefined
   * - `width`: undefined
   * - `height`: undefined
   * - `pressed`: undefined
   * - `expanded`: undefined
   * - `controls`: undefined
   * - `target-prop`/`targetProp`: undefined
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `disabled`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `buttonClick`: A custom event emitted when the click event occurs for either a rendered button or anchor/link.
   * - `componentLoad`: A custom event emitted when the component has completed loading and its internal lifecycles.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The button's label, which may contain markup such as icons, is placed in the default slot.
   * - `(default)`: cbp-button-custom - Custom buttons/anchors may be slotted via named-slot, which prevents the web component from rendering its own tag. In such a case, component properties that render attributes directly onto the rendered button will have no effect, as they are expected to be supplied directly on the slotted element.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleClick(e) => void`: undefined
   */
  "cbp-button": Partial<
    CbpButtonProps & CbpButtonSolidJsProps & BaseProps<CbpButton> & BaseEvents
  >;

  /**
   * The Card component is a visual treatment for a container meant for similarly-sized, repeated chunks of content.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `color`: undefined
   * - `variant`: undefined
   * - `interactive`: undefined
   * - `href`: undefined
   * - `disabled`: undefined
   * - `stretch`: undefined
   * - `sx`: undefined
   * - `context`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot contains the body of the card.
   * - `cbp-card-title`: Contains the card title, if present.
   * - `cbp-card-actions`: Contains the links/buttons for cards.
   */
  "cbp-card": Partial<
    CbpCardProps & CbpCardSolidJsProps & BaseProps<CbpCard> & BaseEvents
  >;

  /**
   * The Carousel is a control meant to take slotted Carousel-items to visually
   * iterate though to display with a slotted control of a dot-indicator or other control
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `height`: undefined
   * - `width`: undefined
   * - `current`: undefined
   * - `sx`: undefined
   * - `context`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Intended for a collection of CBP-Carousel-Items to be rendered in the cbp-carousel-container
   * - `cbp-carousel-controls`: This named slot is intended for a control of the carousel, for example: cbp-dot-indicator
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `watchCurrent() => void`: undefined
   * - `navigateCollection(e) => void`: undefined
   * - `handleResize() => void`: undefined
   * - `scrollToItem() => void`: undefined
   * - `updateCurrent(index) => void`: undefined
   */
  "cbp-carousel": Partial<
    CbpCarouselProps &
      CbpCarouselSolidJsProps &
      BaseProps<CbpCarousel> &
      BaseEvents
  >;

  /**
   * The Carousel Item is meant to be slotted into the CBP-Carousel and represents a single
   * iteration of content for the CBP-Carousel
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `height`: undefined
   * - `width`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Anything placed into the default slot will be rendered in the cbp-carousel-item
   */
  "cbp-carousel-item": Partial<
    CbpCarouselItemProps &
      CbpCarouselItemSolidJsProps &
      BaseProps<CbpCarouselItem> &
      BaseEvents
  >;

  /**
   * The Checkbox component wraps the slotted native form control (`input type="checkbox"`) and label text,
   * providing cross-browser styling according to the design system specifications.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `name`: undefined
   * - `value`: undefined
   * - `field-id`/`fieldId`: undefined
   * - `checked`: undefined
   * - `indeterminate`: undefined
   * - `disabled`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `stateChanged`: A custom event emitted when the checked state changes due to user interaction.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: the checkbox control and label text are placed in the default slot, both of which are rendered inside of the `label` element. The label should not include excessively long descriptive text.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleChange(e) => void`: undefined
   * - `reset() => void`: A custom method to reset the Checkbox component to its initial state and value since it does not update
   * properly on a native form reset when the checked state is set via the component property. This method may
   * be called manually, but is automatically called on form reset when using the `cbp-form` component.
   * - `watchDisabledHandler(newValue: boolean) => void`: undefined
   * - `watchChecked(newValue: boolean) => void`: undefined
   * - `watchIndeterminateHandler(newValue: boolean) => void`: undefined
   */
  "cbp-checkbox": Partial<
    CbpCheckboxProps &
      CbpCheckboxSolidJsProps &
      BaseProps<CbpCheckbox> &
      BaseEvents
  >;

  /**
   * The Chip component acts like an interactive version of the Tag and is typically used for selecting or filtering.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `name`: undefined
   * - `value`: undefined
   * - `pressed`: undefined
   * - `disabled`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `chipClick`: A custom event emitted when the chip is activated/toggled.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot defines the chip's label.
   * - `cbp-chip-icon`: Optionally slot a custom icon for the default state (will still show the x for removal when pressed).
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleClick(e) => void`: undefined
   */
  "cbp-chip": Partial<
    CbpChipProps & CbpChipSolidJsProps & BaseProps<CbpChip> & BaseEvents
  >;

  /**
   * The Code Snippet component is used to display code in a readable format and facilitate copying it.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `variant`: undefined
   * - `height`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `copyTextClick`: Emits a custom event when the "Copy" button is activated, copying the code to the clipboard.
   * - `toggleShowAllClick`: Emits a custom event when the the "Show More/Less" control is activated (for code blocks overflowing the specified height).
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Raw, unescaped code is slotted in the default slot and escaped for display purposes.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `copyText(e) => void`: undefined
   * - `toggleShowAll(e) => void`: undefined
   */
  "cbp-code-snippet": Partial<
    CbpCodeSnippetProps &
      CbpCodeSnippetSolidJsProps &
      BaseProps<CbpCodeSnippet> &
      BaseEvents
  >;

  /**
   * The Container component is a building block component for wrapping content and providing
   * visual treatment such as a background image or color.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `background`: undefined
   * - `text-color`/`textColor`: undefined
   * - `width`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Any content or layout components may be slotted within the container.
   */
  "cbp-container": Partial<
    CbpContainerProps &
      CbpContainerSolidJsProps &
      BaseProps<CbpContainer> &
      BaseEvents
  >;

  /**
   * The Dialog component represents a dialog overlaid on top of the web page, which can be used similar
   * to an alert/confirm dialog or contain a small form.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `open`: undefined
   * - `height`: undefined
   * - `width`: undefined
   * - `uid`: undefined
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `color`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `dialogOpen`: Custom event fired when the dialog is opened.
   * - `dialogClose`: Custom event fired when the dialog is closed.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The body content of the dialog goes in the default slot.
   * - `cbp-dialog-header`: The dialog header, which should render a semantic h2 tag, is slotted into this named slot.
   * - `cbp-dialog-body`: Body content may optionally be slotted into this named slot.
   * - `cbp-dialog-actions`: The dialog actions (buttons) shall be slotted in this named slot.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `watchOpenHandler(newValue: boolean) => void`: undefined
   * - `openDialog() => void`: A public method for opening the dialog.
   * - `closeDialog() => void`: A public method for closing the dialog.
   * - `setFocus() => void`: undefined
   * - `handleBackdropClick({ target }) => void`: undefined
   */
  "cbp-dialog": Partial<
    CbpDialogProps & CbpDialogSolidJsProps & BaseProps<CbpDialog> & BaseEvents
  >;

  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `current`: undefined
   * - `item-name`/`itemName`: undefined
   * - `items`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `navigateCollection`: Custom event emitted when the Dot-indicator changes active indicator
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `setIndexActive(index) => void`: undefined
   * - `generateIndicator() => void`: undefined
   * - `keyboardNav(key) => void`: undefined
   */
  "cbp-dot-indicator": Partial<
    CbpDotIndicatorProps &
      CbpDotIndicatorSolidJsProps &
      BaseProps<CbpDotIndicator> &
      BaseEvents
  >;

  /**
   * The Drawer is a container that may be hidden and revealed, sliding in from either side of the viewport,
   * containing application-defined contents. The Drawer may optionally be rendered in the flow of the page
   * at larger screen sizes.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `position`: undefined
   * - `open`: undefined
   * - `uid`: undefined
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `persist-at`/`persistAt`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   * - `persistent`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `drawerOpen`: Custom event fired when the drawer is opened.
   * - `drawerClose`: Custom event fired when the drawer is closed.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The Drawer contents go in the default slot.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `watchOpenHandler(newValue: boolean) => void`: undefined
   * - `openDrawer() => void`: A public method for opening the drawer.
   * - `closeDrawer() => void`: A public method for closing the drawer.
   * - `setFocus() => void`: undefined
   * - `handleBackdropClick(e) => void`: undefined
   * - `handleKeyUp(e) => void`: undefined
   * - `doPersistAt(mql) => void`: undefined
   */
  "cbp-drawer": Partial<
    CbpDrawerProps & CbpDrawerSolidJsProps & BaseProps<CbpDrawer> & BaseEvents
  >;

  /**
   * The Dropdown component offers an alternative to the native select element that can be fully styled
   * and support additional variants, such as a multi-select and/or combobox.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `multiple`: undefined
   * - `filter`: undefined
   * - `async`: undefined
   * - `minimum-input-length`/`minimumInputLength`: undefined
   * - `items`: undefined
   * - `create`: undefined
   * - `field-id`/`fieldId`: undefined
   * - `name`: undefined
   * - `placeholder`: undefined
   * - `selected-label`/`selectedLabel`: undefined
   * - `value`: undefined
   * - `open`: undefined
   * - `error`: undefined
   * - `readonly`: undefined
   * - `disabled`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   * - `debug`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `valueChange`: A custom event emitted when the a selection is made in the dropdown.
   * - `createItem`: A custom event that is fired when the "create item" option is clicked.
   * - `filterKeypress`: A custom event that is fired when a key is pressed while filtering a combobox.
   * - `populateCombobox`: A custom event emitted for asynchronous comboboxes (`async=true` and `filter=true`) and
   * the search string meets the `minimumInputLength` requirement.
   * This event can be listened for and the `items` (JSON) updated via application logic/service call.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Only Dropdown Items should be placed in the default slot. They get auto-slotted into 'cbp-dropdown-items' behind the scenes.
   * - `cbp-dropdown-items`: Dropdown items are auto-slotted here. Not need to specify this named slot.
   * - `cbp-dropdown-attached-button-start`: Allows for an optional button control to be slotted as an overlay at the start of the dropdown (such as a "previous" button).
   * - `cbp-dropdown-attached-button-end`: Allows for an optional button control to be slotted as an overlay at the end of the dropdown (such as a "next" button).
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleDropdownItemClick(e) => void`: undefined
   * - `watchOpen(newValue) => void`: undefined
   * - `watchValue(newValue, oldValue) => void`: undefined
   * - `watchItems(newValue) => void`: undefined
   * - `reset() => void`: A custom method to reset the Dropdown component to its initial state and value since it does not update
   * properly on a native form reset. This method may be called manually, but is automatically called on
   * form reset when using the `cbp-form` component.
   * - `clearSelections(e = undefined) => void`: A public method to clear all selected items in a dropdown (single or multi-select).
   * Emits the valueChange event afterward.
   * - `doCreateItem(e) => void`: undefined
   * - `updateValue(value: string, selected: boolean = true) => void`: undefined
   * - `setSelectedFromValue() => void`: undefined
   * - `setValueFromSelected() => void`: undefined
   * - `generateItems(items) => void`: undefined
   * - `checkExactMatch() => boolean`: undefined
   * - `handleSlotChange(e) => void`: undefined
   * - `handleCounterClick(e) => void`: undefined
   * - `handleCounterKeydown(e) => void`: undefined
   * - `handleDropdownClick(e) => void`: undefined
   * - `getActionFromKey(event) => void`: undefined
   * - `jumpToLetter(letter) => void`: undefined
   * - `getFirstLetterMatches(letter) => void`: undefined
   * - `handleComboBoxInput(event) => void`: undefined
   * - `searchByString(searchString, e) => void`: undefined
   * - `getSearchStringMatches(searchString) => void`: undefined
   * - `filterDropdownItems(matches) => void`: undefined
   * - `clearFilters() => void`: undefined
   * - `setDefaultItem() => void`: undefined
   * - `setCurrent(newValue: number = 0, oldValue: number | undefined = undefined) => void`: undefined
   * - `isScrollable(element) => void`: undefined
   * - `maintainScrollVisibility(activeElement, scrollParent) => void`: undefined
   * - `getSizeInfo() => void`: undefined
   */
  "cbp-dropdown": Partial<
    CbpDropdownProps &
      CbpDropdownSolidJsProps &
      BaseProps<CbpDropdown> &
      BaseEvents
  >;

  /**
   * The Dropdown Item represents an individual option for the Dropdown, similar to an option in a
   * native `select` but with more flexibility.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `value`: undefined
   * - `disabled`: undefined
   * - `current`: undefined
   * - `item-id`/`itemId`: undefined
   * - `selected`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `dropdownItemClick`: Internal use: A custom event emitted when a dropdown item is clicked/activated and is handled by the
   * parent dropdown, also resulting in a `valueChange` event emitted from the dropdown component.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The Dropdown Item's label or content goes in the default slot; for multi-select dropdowns, this includes the checkbox component and slotted native `input type="checkbox"` and label.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleClick(e) => void`: undefined
   * - `watchSelected(newValue) => void`: undefined
   */
  "cbp-dropdown-item": Partial<
    CbpDropdownItemProps &
      CbpDropdownItemSolidJsProps &
      BaseProps<CbpDropdownItem> &
      BaseEvents
  >;

  /**
   * A standalone component used for progressive disclosure, the Expand component organizes content under a relevant heading,
   * which is used as a control for revealing and hiding its content.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `heading-id`/`headingId`: undefined
   * - `open`: undefined
   * - `label`: undefined
   * - `heading-level`/`headingLevel`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `expandClick`: A custom event emitted when the accordion item control is activated.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Hidden/revealed content is placed in the default slot.
   * - `cbp-expand-label`: Optionally the component label/heading may be slotted via named slot if it contains markup rather than plain text.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleClick(e) => void`: undefined
   */
  "cbp-expand": Partial<
    CbpExpandProps & CbpExpandSolidJsProps & BaseProps<CbpExpand> & BaseEvents
  >;

  /**
   * The File Input component builds upon the native file input, allowing for custom styles and
   * enhancing functionality when integrated with JavaScript frameworks. This component should
   * be used within the `cbp-form-field` component like any other input pattern.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `name`: undefined
   * - `field-id`/`fieldId`: undefined
   * - `multiple`: undefined
   * - `accept`: undefined
   * - `enhanced`: undefined
   * - `status`: undefined
   * - `error`: undefined
   * - `disabled`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `valueChange`: A custom event emitted when the value of the component changes, either by selecting (non-duplicate) files
   * or canceling the dialog, or clicking the button in the file list to remove a file.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The native `input type="file"` gets slotted in the default slot.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleChange(e) => void`: undefined
   * - `reset() => void`: A custom method to reset the file input component (for enhanced/multi-file inputs) to its initial state and value
   * since it does not update properly on a native form reset. This method may be called manually, but is automatically
   * called on form reset when using the `cbp-form` component.
   * - `getData() => void`: undefined
   * - `watchDisabledHandler(newValue: boolean) => void`: undefined
   * - `watchStatusHandler(newValue: any) => void`: undefined
   * - `handleDelete(e) => void`: undefined
   */
  "cbp-file-input": Partial<
    CbpFileInputProps &
      CbpFileInputSolidJsProps &
      BaseProps<CbpFileInput> &
      BaseEvents
  >;

  /**
   * The Flex component invokes a CSS Flexbox context, acting as the flex parent and implementing
   * CSS Flexbox as a component API. Immediate child nodes are automatically considered flex items.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `display`: undefined
   * - `wrap`: undefined
   * - `direction`: undefined
   * - `align-items`/`alignItems`: undefined
   * - `align-content`/`alignContent`: undefined
   * - `justify-content`/`justifyContent`: undefined
   * - `gap`: undefined
   * - `breakpoint`: undefined
   * - `content-breakpoint`/`contentBreakpoint`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: DOM nodes placed in the default slot automatically become flex children. The use of `cbp-flex-item` is only required for granular control of individual flex item properties.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleBreakpointChange(mql) => void`: undefined
   */
  "cbp-flex": Partial<
    CbpFlexProps & CbpFlexSolidJsProps & BaseProps<CbpFlex> & BaseEvents
  >;

  /**
   * The Flex Item component may optionally be used to specify properties of an individual flex item.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `align-self`/`alignSelf`: undefined
   * - `order`: undefined
   * - `flex-grow`/`flexGrow`: undefined
   * - `flex-shrink`/`flexShrink`: undefined
   * - `flex-basis`/`flexBasis`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Content slotted in the default slot may consist of any combination of text or DOM nodes.
   */
  "cbp-flex-item": Partial<
    CbpFlexItemProps &
      CbpFlexItemSolidJsProps &
      BaseProps<CbpFlexItem> &
      BaseEvents
  >;

  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `top`: undefined
   * - `right`: undefined
   * - `bottom`: undefined
   * - `left`: undefined
   * - `sx`: undefined
   */
  "cbp-floating-action": Partial<
    CbpFloatingActionProps &
      CbpFloatingActionSolidJsProps &
      BaseProps<CbpFloatingAction> &
      BaseEvents
  >;

  /**
   * The Footer component serves site visitors who arrive at the bottom of a page without finding
   * what they want, typically containing information about the agency and navigation links.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The main footer content goes in the default slot.
   * - `cbp-footer-nav`: Footer navigation links are slotted within this named slot.
   */
  "cbp-footer": Partial<
    CbpFooterProps & CbpFooterSolidJsProps & BaseProps<CbpFooter> & BaseEvents
  >;

  /**
   * The Form component may optionally be used to wrap a native HTML form, providing enhanced functionality and support
   * for some component functionality that would otherwise not be supported by the native platform, e.g., an enhanced
   * file input that supports manipulating the file list and reset functionality for some custom form components.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `prevent-submit`/`preventSubmit`: undefined
   * - `debug`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `suppressedSubmit`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: This tag is a wrapper for the native `form` tag and its contents, which are slotted in the default slot.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleReset() => void`: undefined
   * - `handleFormData(e) => void`: undefined
   * - `handleSubmit(e) => void`: undefined
   * - `addFiles(formData) => void`: undefined
   * - `handleEnhancedFileInput(e) => void`: undefined
   */
  "cbp-form": Partial<
    CbpFormProps & CbpFormSolidJsProps & BaseProps<CbpForm> & BaseEvents
  >;

  /**
   * The Form Field component represents a generic, reusable pattern for form fields of all types, displaying the
   * label and form control, along with optional descriptive text and error state in a consistent and accessible manner.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: undefined
   * - `description`: undefined
   * - `field-id`/`fieldId`: undefined
   * - `group`: undefined
   * - `error`: undefined
   * - `error-messages`/`errorMessages`: undefined
   * - `readonly`: undefined
   * - `disabled`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `valueChange`: A custom event emitted when the the nested input is changed by user interaction.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: the default slot holds the form control(s)/input(s).
   * - `cbp-form-field-label`: An optional slot for labels containing markup.
   * - `cbp-form-field-description`: An optional slot for descriptions containing markup.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleChange(e) => void`: undefined
   * - `handleValueChange() => void`: undefined
   * - `watchReadonlyHandler(newValue: boolean) => void`: undefined
   * - `watchDisabledHandler(newValue: boolean) => void`: undefined
   * - `watchErrorHandler(newValue: boolean) => void`: undefined
   */
  "cbp-form-field": Partial<
    CbpFormFieldProps &
      CbpFormFieldSolidJsProps &
      BaseProps<CbpFormField> &
      BaseEvents
  >;

  /**
   * The Form Field Wrapper component is an optional wrapper that offers means for applying overlays
   * and button controls to form inputs in accordance with design requirements.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot holds the form control.
   * - `cbp-form-field-overlay-start`: Optionally slot an overlay positioned on the left side of the form field.
   * - `cbp-form-field-overlay-end`: Optionally slot an overlay positioned on the right side of the form field.
   * - `cbp-form-field-attached-button`: Optionally slot in any buttons that appear attached to the native form field.
   * - `cbp-form-field-unattached-buttons`: Optionally slot in any buttons that appear horizontally after the native form field, but not attached to it.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `getSizeInfo() => void`: undefined
   */
  "cbp-form-field-wrapper": Partial<
    CbpFormFieldWrapperProps &
      CbpFormFieldWrapperSolidJsProps &
      BaseProps<CbpFormFieldWrapper> &
      BaseEvents
  >;

  /**
   * The Grid component invokes a CSS Grid context, acting as the grid parent and implementing
   * CSS Grid as a component API. Immediate child nodes are automatically considered grid items.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `display`: undefined
   * - `grid-template-areas`/`gridTemplateAreas`: undefined
   * - `grid-template-columns`/`gridTemplateColumns`: undefined
   * - `grid-template-rows`/`gridTemplateRows`: undefined
   * - `grid-auto-flow`/`gridAutoFlow`: undefined
   * - `grid-auto-columns`/`gridAutoColumns`: undefined
   * - `grid-auto-rows`/`gridAutoRows`: undefined
   * - `align-items`/`alignItems`: undefined
   * - `justify-items`/`justifyItems`: undefined
   * - `align-content`/`alignContent`: undefined
   * - `justify-content`/`justifyContent`: undefined
   * - `gap`: undefined
   * - `breakpoint`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot accepts grid items. These should be `cbp-grid-item` components or DOM nodes; inserting plain text nodes as a direct descendant of the grid may yield unexpected results.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleBreakpointChange(mql) => void`: undefined
   */
  "cbp-grid": Partial<
    CbpGridProps & CbpGridSolidJsProps & BaseProps<CbpGrid> & BaseEvents
  >;

  /**
   * The Grid Item component may optionally be used to specify properties of an individual grid item.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `grid-column-start`/`gridColumnStart`: undefined
   * - `grid-column-end`/`gridColumnEnd`: undefined
   * - `grid-row-start`/`gridRowStart`: undefined
   * - `grid-row-end`/`gridRowEnd`: undefined
   * - `align-self`/`alignSelf`: undefined
   * - `justify-self`/`justifySelf`: undefined
   * - `grid-area`/`gridArea`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot may contain any content representing the grid item.
   */
  "cbp-grid-item": Partial<
    CbpGridItemProps &
      CbpGridItemSolidJsProps &
      BaseProps<CbpGridItem> &
      BaseEvents
  >;

  /**
   * The Hide component represents a component-based implementation for programmatically hiding
   * (or visually hiding) content based on application logic or media query.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `display`: undefined
   * - `hide`: undefined
   * - `visually-hide`/`visuallyHide`: undefined
   * - `hide-at`/`hideAt`: undefined
   * - `visually-hide-at`/`visuallyHideAt`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `hideToggle`: A custom event emitted when the accordion item control is activated.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Content in the default slot to be conditionally hidden.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `doHideAt(mql) => void`: undefined
   * - `doVisuallyHideAt(mql) => void`: undefined
   */
  "cbp-hide": Partial<
    CbpHideProps & CbpHideSolidJsProps & BaseProps<CbpHide> & BaseEvents
  >;

  /**
   * The Icon component represents a standard API for embedding accessible Scalable Vector Graphics (SVG) icons
   * into applications/documents. This component contains a number of icons used by the design system and may be used to wrap
   * external icons for consistent styling via the component API.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `name`: undefined
   * - `src`: undefined
   * - `size`: undefined
   * - `color`: undefined
   * - `rotate`: undefined
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: For icons that are not baked into this component, the SVG of an external icon may be slotted within this component to inherit the component properties for controlling some aspects such as color, sizing, and rotation.
   */
  "cbp-icon": Partial<
    CbpIconProps & CbpIconSolidJsProps & BaseProps<CbpIcon> & BaseEvents
  >;

  /**
   * The cbp-link component is used to render an anchor or provide consistent styling for a slotted anchor.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `href`: undefined
   * - `rel`: undefined
   * - `target`: undefined
   * - `download`: undefined
   * - `language`: undefined
   * - `shortcut-key`/`shortcutKey`: undefined
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `disabled`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `linkClick`: A custom event emitted with the anchor is activated/clicked.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: the default slot represents the linked content, which may include markup, for the rendered anchor tag.
   * - `cbp-link-custom`: Custom anchors may be slotted via named-slot, which prevents the web component from rendering its own anchor tag.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleClick(e) => void`: undefined
   */
  "cbp-link": Partial<
    CbpLinkProps & CbpLinkSolidJsProps & BaseProps<CbpLink> & BaseEvents
  >;

  /**
   * The List component is used to render semantic HTML lists in accordance with the design system,
   * supporting additional variants with custom/user-defined icons and description lists.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `variant`: undefined
   * - `tag`: undefined
   * - `size`: undefined
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `sx`: undefined
   * - `context`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Only list items of the proper semantic type should be slotted in the default slot.
   */
  "cbp-list": Partial<
    CbpListProps & CbpListSolidJsProps & BaseProps<CbpList> & BaseEvents
  >;

  /**
   * A Listbox wraps a standard text or search input, enhancing it by providing suggestions in a format visually similar to a dropdown, from which a selection may optionally be made.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `uid`: undefined
   * - `open`: undefined
   * - `items`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `updateListboxSuggestions`: A custom event emitted when the value of the wrapped input changes to update the listbox suggestions (items)
   * via application logic.
   * - `valueChange`: A custom event emitted only when a selection is made in the listbox.
   * This event will be listened for in addition to the native input's change event by the parent `cbp-form-field`,
   * as selection does not trigger a native change event on the input.
   * To get all changes to the wrapped input, listen to the `valueChange` event on the parent `cbp-form-field`.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: A native text or search input (or optionally `cbp-form-field-wrapper as well) should be slotted in the default slot.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `watchOpen(newValue) => void`: undefined
   * - `watchItems(newValue) => void`: undefined
   * - `getActionFromKey(event) => void`: undefined
   * - `setCurrent(newValue = 0, oldValue = undefined) => void`: undefined
   * - `isScrollable(element) => void`: undefined
   * - `maintainScrollVisibility(activeElement, scrollParent) => void`: undefined
   */
  "cbp-listbox": Partial<
    CbpListboxProps &
      CbpListboxSolidJsProps &
      BaseProps<CbpListbox> &
      BaseEvents
  >;

  /**
   * The Loader is used as a visual indicator of progress during waiting periods.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `progress-id`/`progressId`: undefined
   * - `variant`: undefined
   * - `size`: undefined
   * - `determinate`: undefined
   * - `value`: undefined
   * - `max`: undefined
   * - `orientation`: undefined
   * - `success`: undefined
   * - `error`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Label text may be provided in the default slot.
   */
  "cbp-loader": Partial<
    CbpLoaderProps & CbpLoaderSolidJsProps & BaseProps<CbpLoader> & BaseEvents
  >;

  /**
   * A Menu contains additional actions in the form of links or buttons, which can be shown by activating a control.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `position`: undefined
   * - `open`: undefined
   * - `uid`: undefined
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `toggleMenu`: A custom event fired when the menu is opened or closed.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Both the menu control and the menu items are slotted in the default slot. (The menu items are auto-slotting into their proper place).
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `openMenu() => void`: A public method for opening the menu.
   * - `closeMenu() => void`: A public method for closing the menu.
   * - `watchOpen(newValue) => void`: undefined
   * - `clickAwayHandler({ target }) => void`: undefined
   * - `handleKeyPress(e) => void`: undefined
   * - `setCurrentMenuItem(i = 0) => void`: undefined
   * - `handleKeyPressCloseButton(e) => void`: undefined
   */
  "cbp-menu": Partial<
    CbpMenuProps & CbpMenuSolidJsProps & BaseProps<CbpMenu> & BaseEvents
  >;

  /**
   * The Menu Item component wraps each individual control (link or button) within the menu.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `indent-level`/`indentLevel`: undefined
   * - `color`: undefined
   * - `slot`: undefined (property only)
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Any form of control may be slotted in the default slot (a link, button, link component, button component, component-based Router, etc.). But any components should render a semantic anchor or button element.
   */
  "cbp-menu-item": Partial<
    CbpMenuItemProps &
      CbpMenuItemSolidJsProps &
      BaseProps<CbpMenuItem> &
      BaseEvents
  >;

  /**
   * The Multicol component is a wrapper that invokes a CSS Multi-column layout context, ideal for
   * using with semantic lists and checklists/radio lists.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `columns`: undefined
   * - `width`: undefined
   * - `gap`: undefined
   * - `rule`: undefined
   * - `nobreak`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot contains any content or children to be arranged in a multi-column layout.
   */
  "cbp-multicol": Partial<
    CbpMulticolProps &
      CbpMulticolSolidJsProps &
      BaseProps<CbpMulticol> &
      BaseEvents
  >;

  /**
   * The Nav Item component wraps each individual control (link or button) within the App Header.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `current`: undefined
   * - `name`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `navItemClick`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Any form of control may be slotted in the default slot (a link, button, link component, button component, component-based Router, etc.). But any components should render a semantic anchor or button element.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleNavItemClick(e) => void`: undefined
   * - `doSelected(newValue) => void`: undefined
   */
  "cbp-nav-item": Partial<
    CbpNavItemProps &
      CbpNavItemSolidJsProps &
      BaseProps<CbpNavItem> &
      BaseEvents
  >;

  /**
   * The Notice component presents persistent information that gives extra insight into a particular content area.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `color`: undefined
   * - `sx`: undefined
   * - `context`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The notice body content is placed in the default slot.
   * - `cbp-notice-title`: The notice title is placed in this named slot.
   */
  "cbp-notice": Partial<
    CbpNoticeProps & CbpNoticeSolidJsProps & BaseProps<CbpNotice> & BaseEvents
  >;

  /**
   * The Pagination component presents a common UI pattern for displaying data sets broken up into smaller,
   * more consumable (and performant) chunks or "pages."
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `records`: undefined
   * - `page-size`/`pageSize`: undefined
   * - `page`: undefined
   * - `max-pages`/`maxPages`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `paginationChange`: A custom event emitted when the click event occurs for either a rendered button or anchor/link.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot positions specified content between the "showing items" text and page controls. This slot should rarely be used.
   * - `cbp-pagination-items-per-page`: Slot a `cbp-dropdown` here with numeric values (or "All") defining the options for page size.
   * - `cbp-pagination-pages`: Slot an empty `cbp-dropdown` here with next/previous controls for the page selection. The Pagination component will manage the items within this dropdown.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handlePagesButtonNav({detail: {value} }) => void`: undefined
   */
  "cbp-pagination": Partial<
    CbpPaginationProps &
      CbpPaginationSolidJsProps &
      BaseProps<CbpPagination> &
      BaseEvents
  >;

  /**
   * A panel is a styled container for displaying information within the main page content area or to either side.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Panel content goes in the default slot.
   * - `cbp-panel-header`: The panel header is placed in this named slot.
   */
  "cbp-panel": Partial<
    CbpPanelProps & CbpPanelSolidJsProps & BaseProps<CbpPanel> & BaseEvents
  >;

  /**
   * The Radio component wraps the slotted native form control (`input type="radio"`) and label text, providing cross-browser styling.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `name`: undefined
   * - `value`: undefined
   * - `field-id`/`fieldId`: undefined
   * - `checked`: undefined
   * - `disabled`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `stateChanged`: A custom event emitted when the click event occurs for either a rendered button or anchor/link.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The radio control and label text goes in the default slot, both of which are placed inside of the `label` element. The label should not include excessively long descriptive text.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleChange(e) => void`: undefined
   * - `reset() => void`: A custom method to reset the Radio component to its initial state and value since it does not update
   * properly on a native form reset when the checked state is set via the component property. This method may
   * be called manually, but is automatically called on form reset when using the `cbp-form` component.
   * - `watchDisabledHandler(newValue: boolean) => void`: undefined
   */
  "cbp-radio": Partial<
    CbpRadioProps & CbpRadioSolidJsProps & BaseProps<CbpRadio> & BaseEvents
  >;

  /**
   * The Resize Observer component is a wrapper that implements a resizeObserver to detect changes to its size,
   * typically to compare to an immediate child that is wrapping a collection of variable-sized elements
   * (e.g., links, tabs, etc.), in order to implement responsive functionality that cannot be accomplished
   * with a media query or container query.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `debounce`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `resized`: A custom event emitted when the component is resized to give new values for size of component.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: any markup or content may be placed in the default slot.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `getCurrentSize() => void`: undefined
   * - `getClientRect() => void`: undefined
   */
  "cbp-resize-observer": Partial<
    CbpResizeObserverProps &
      CbpResizeObserverSolidJsProps &
      BaseProps<CbpResizeObserver> &
      BaseEvents
  >;

  /**
   * The Section component represents a generic block that may be used for semantic meaning or as
   * a generic container for styling.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `tag`: undefined
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Content slotted in the default slot is rendered inside of the specified tag, if any.
   */
  "cbp-section": Partial<
    CbpSectionProps &
      CbpSectionSolidJsProps &
      BaseProps<CbpSection> &
      BaseEvents
  >;

  /**
   * The Segmented Button Group component wraps multiple buttons and can be used as a multi-option
   * toggle or group of controls.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `name`: undefined
   * - `value`: undefined
   * - `multiple`: undefined
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `disabled`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `segmentedButtonGroupClick`: A custom event fired when any of the group's buttons are clicked, whether toggled on or off.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Only `cbp-button` components should be slotted within the default slot to make up the button group.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `reset() => void`: A custom method to reset the Segmented Button Group component to its initial state and value (when a name is specified)
   * since the hidden input does not update on a native form reset. This method may be called manually, but is automatically
   * called on form reset when using the `cbp-form` component.
   * - `handleComponentLoad({ detail: { nativeElement: element, host } }) => void`: undefined
   * - `handleButtonClick(e) => void`: undefined
   * - `watchValueHandler(newValue) => void`: undefined
   * - `setValueFromButtons() => void`: undefined
   */
  "cbp-segmented-button-group": Partial<
    SegmentedButtonGroupProps &
      SegmentedButtonGroupSolidJsProps &
      BaseProps<SegmentedButtonGroup> &
      BaseEvents
  >;

  /**
   * The Skip Navigation link (or "Skip Nav") is an essential accessibility feature that allows screen
   * reader users to skip repetitive portions of the page and get right to the main content.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `target-id`/`targetId`: undefined
   * - `shortcut-key`/`shortcutKey`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot accepts custom link text, which is only needed if multiple skip links are present. Otherwise, it is advised to use the default "Skip to main content", which has been validated for clarity and pronunciation.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleClick(e) => void`: undefined
   */
  "cbp-skip-nav": Partial<
    CbpSkipNavProps &
      CbpSkipNavSolidJsProps &
      BaseProps<CbpSkipNav> &
      BaseEvents
  >;

  /**
   * The Slider component allows for the selection of a value within a range, styled to design system specifications.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `field-id`/`fieldId`: undefined
   * - `value`: undefined
   * - `gap`: undefined
   * - `variant`: undefined
   * - `min`: undefined
   * - `max`: undefined
   * - `step`: undefined
   * - `hide-minmax`/`hideMinmax`: undefined
   * - `hide-input`/`hideInput`: undefined
   * - `error`: undefined
   * - `disabled`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `valueChange`: A custom event fired when the value of the slider changes.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: A native `input type="range"` (or 2 for range sliders) gets slotted within the default slot.
   * - `cpb-slider-before`: an optional slot to place content (e.g., an icon) before the slider control.
   * - `cpb-slider-after`: an optional slot to place content (e.g., an icon) after the slider control.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `reset() => void`: A custom method to reset the Slider component to its initial state and value since it does not update
   * properly on a native form reset. This method may be called manually, but is automatically called on
   * form reset when using the `cbp-form` component.
   * - `watchDisabledHandler(newValue: boolean) => void`: undefined
   * - `handleChange(e, i = 0) => void`: undefined
   * - `setSliderBar() => void`: undefined
   * - `initRangeSlider() => void`: undefined
   * - `updateRangeBoundaries() => void`: undefined
   */
  "cbp-slider": Partial<
    CbpSliderProps & CbpSliderSolidJsProps & BaseProps<CbpSlider> & BaseEvents
  >;

  /**
   * Structured lists are a way of displaying long lists of data where the user is not directly comparing
   * raw data one row at a time.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `header-id`/`headerId`: undefined
   * - `striped`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Only list items may be slotted within the default content.
   * - `cbp-structured-list-header`: Optional information such as number of results, filters, etc. are provided by the application and slotted into this named slot.
   * - `cbp-structured-list-footer`: Optional information and/or interactive elements are provided by the application and slotted into this named slot.
   */
  "cbp-structured-list": Partial<
    CbpStructuredListProps &
      CbpStructuredListSolidJsProps &
      BaseProps<CbpStructuredList> &
      BaseEvents
  >;

  /**
   * The Structured List Item component may optionally be used to hold each list item's content. This component
   * is needed primarily when designating an item with the "danger" color or when list items are selectable.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `color`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The list item content is placed in the default slot. Content may be wrapped in a CSS grid (e.g., `cbp-grid`) to give each list item consistent structure and sizing.
   */
  "cbp-structured-list-item": Partial<
    CbpStructuredListItemProps &
      CbpStructuredListItemSolidJsProps &
      BaseProps<CbpStructuredListItem> &
      BaseEvents
  >;

  /**
   * Sub-Navigation (Subnav) is meant to be used as a secondary, vertical navigation.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `flat`: undefined
   * - `store`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Subnav Items (and rarely anything else) should be slotted in the default slot.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `updateActiveItem(newValue) => void`: undefined
   * - `updateCurrent(newValue) => void`: undefined
   * - `handleSubnavItemClick({detail: {host}}) => void`: undefined
   * - `findParent(subnavItem: HTMLCbpSubnavItemElement) => HTMLCbpSubnavItemElement`: undefined
   */
  "cbp-subnav": Partial<
    CbpSubNavProps & CbpSubNavSolidJsProps & BaseProps<CbpSubNav> & BaseEvents
  >;

  /**
   * The Subnav Item component represents a single navigation link and can also be nested multiple levels to convey a site/navigation hierarchy.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: undefined
   * - `href`: undefined
   * - `uid`: undefined
   * - `name`: undefined
   * - `current`: undefined
   * - `open`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `toggleSubnavItem`: undefined
   * - `subnavItemClick`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The Subnav Item's children are placed in the default slot.
   * - `(default)`: cbp-subnav-item-label - An optional slot in support of a label with markup. Replaces the `label` property if used.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleToggleSubnavItem(e) => void`: undefined
   * - `handleSubnavClick(e) => void`: undefined
   */
  "cbp-subnav-item": Partial<
    CbpSubnavItemProps &
      CbpSubnavItemSolidJsProps &
      BaseProps<CbpSubnavItem> &
      BaseEvents
  >;

  /**
   * The Tab component represents an individual tab control within a tab set.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `name`: undefined
   * - `selected`: undefined
   * - `color`: undefined
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `tabLoaded`: Emits an event when the tab has been fully loaded for registration with the parent tabset.
   * - `tabClicked`: Emits a custom even containing an object that describes the tab that was activated.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot holds the tab's label (rendered as a button label), which may include text as well as icons, badges, and tags.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleTabClick(e = undefined) => void`: undefined
   */
  "cbp-tab": Partial<
    CbpTabProps & CbpTabSolidJsProps & BaseProps<CbpTab> & BaseEvents
  >;

  /**
   * The Tab Panel component is a wrapper representing a tabpanel role and containing the content to be progressively disclosed.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `name`: undefined
   * - `selected`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot holds the contents of a tab panel, which may include any form of text, markup, and media elements.
   */
  "cbp-tab-panel": Partial<
    CbpTabPanelProps &
      CbpTabPanelSolidJsProps &
      BaseProps<CbpTabPanel> &
      BaseEvents
  >;

  /**
   * The Table component is a wrapper component encapsulating design system styles for semantic HTML
   * tables as well as applying progressive enhancements to the contained table.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `striped`: undefined
   * - `hover`: undefined
   * - `column-hover`/`columnHover`: undefined
   * - `overflow`: undefined
   * - `debug`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `tableSort`: An event emitted when the table is sorted via user interaction activating a table header control.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The semantic table HTML is placed within the default slot.
   * - `cbp-table-toolbar`: Any sort of filters or table controls may be slotted within this named slot.
   * - `cbp-table-live-region`: For complex tables with many controls and/or pagination, the state of the data may be quantified and described accessibly via an `aria-live` region, which is hidden from view. E.g., Filtered by the term "test", ordered by Column 1 ascending, displaying records 100-200 of 1234.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `doSort(column: number, e: any = undefined) => void`: Updates the UI statefullness (`aria-pressed`, `aria-sort`, and visual arrow icon) and
   * emits a custom event to hook up to application logic for the actual sorting
   */
  "cbp-table": Partial<
    CbpTableProps & CbpTableSolidJsProps & BaseProps<CbpTable> & BaseEvents
  >;

  /**
   * Tabs are a common UI pattern of progressive disclosure mimicking the real world paradigm of tabbed
   * folders, each with a label and containing their own set of contents. Tabs allow the user to navigate
   * multiple views without leaving the page. This component wraps individual `cbp-tab` components.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: Only `cbp-tab` components shall be slotted within the default slot.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `initTabset() => void`: undefined
   * - `setActiveTab(activatedTab, init = false) => void`: undefined
   * - `keyboardNav(key) => void`: undefined
   * - `responsiveNav(direction) => void`: undefined
   */
  "cbp-tabs": Partial<
    CbpTabsProps & CbpTabsSolidJsProps & BaseProps<CbpTabs> & BaseEvents
  >;

  /**
   * The Tag component is a non-interactive visual treatment for text, typically representing labels, keywords, or search terms.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `color`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The tag label or content is placed in the default slot.
   */
  "cbp-tag": Partial<
    CbpTagProps & CbpTagSolidJsProps & BaseProps<CbpTag> & BaseEvents
  >;

  /**
   * The Toast component displays a brief, non-intrusive message that appears on a user interface to
   * provide feedback about an action or status update.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `color`: undefined
   * - `duration`: undefined
   * - `open`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The toast content is slotted in the default slot.
   * - `cbp-toast-icon`: The large toast icon, usually corresponding to the color variant, is slotted in this named slot.
   * - `cbp-toast-title`: The toast title is slotted within this named slot.
   * - `cbp-toast-buttons`: The toast action buttons, including a button to dismiss the toast at a minimum, are placed within this named slot.
   */
  "cbp-toast": Partial<
    CbpToastProps & CbpToastSolidJsProps & BaseProps<CbpToast> & BaseEvents
  >;

  /**
   * The Toggle component is a visual variant of a Boolean selection form control (checkbox),
   * representing an on/off toggle switch.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `checked`: undefined
   * - `disabled`: undefined
   * - `hide-status`/`hideStatus`: undefined
   * - `status-text-on`/`statusTextOn`: undefined
   * - `status-text-off`/`statusTextOff`: undefined
   * - `name`: undefined
   * - `value`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `toggleClick`: Custom event fired when the control is toggled by the user.
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The label text followed by the native `input type="checkbox"` control are provided in the default slot.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `toggleEvent(e) => void`: undefined
   * - `reset() => void`: A custom method to reset the Toggle component to its initial state and value since it does not update
   * properly on a native form reset when the checked state is set via the component property. This method may
   * be called manually, but is automatically called on form reset when using the `cbp-form` component.
   * - `watchDisabledHandler(newValue: boolean) => void`: undefined
   * - `watchCheckedHandler(newValue: boolean) => void`: undefined
   */
  "cbp-toggle": Partial<
    CbpToggleProps & CbpToggleSolidJsProps & BaseProps<CbpToggle> & BaseEvents
  >;

  /**
   * The Tooltip component allows for the disclosure of supplemental, non-essential information via a triggering element.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `open`: undefined
   * - `variant`: undefined
   * - `alignment`: undefined
   * - `field-id`/`fieldId`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The tooltip control label is provided in the default slot.
   * - `cbp-tooltip-content`: The tooltip content is placed in this named slot.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `dismissTooltip() => void`: undefined
   * - `handleFocusOut({ key, shiftKey }) => void`: undefined
   * - `handleKeyDown(ev: KeyboardEvent) => void`: undefined
   * - `invertContext() => void`: undefined
   */
  "cbp-tooltip": Partial<
    CbpTooltipProps &
      CbpTooltipSolidJsProps &
      BaseProps<CbpTooltip> &
      BaseEvents
  >;

  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `selectable`: undefined
   * - `name`: undefined
   * - `accessibility-text`/`accessibilityText`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   * - `host`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `valueChange`: A custom event that rolls up all selected values and is emitted when any selectable item is changed.
   * Only selectable items that have both a name and value specified will be included.
   * If all items/checkboxes have the same name, specified by the `cbp-treeview`, then the values are returned as a simple array.
   * If items/checkboxes have individually specified names, values are returned as an array of objects containing name-value pairs.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleUpdateTreeviewItemParent(e) => void`: undefined
   */
  "cbp-treeview": Partial<
    CbpTreeviewProps &
      CbpTreeviewSolidJsProps &
      BaseProps<CbpTreeview> &
      BaseEvents
  >;

  /**
   *
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `label`: undefined
   * - `open`: undefined
   * - `selectable`: undefined
   * - `name`: undefined
   * - `value`: undefined
   * - `checked`: undefined
   * - `indeterminate`: undefined
   * - `uid`: undefined
   * - `context`: undefined
   * - `host`: undefined (property only)
   *
   * ## Events
   *
   * Events that will be emitted by the component.
   *
   * - `updateTreeviewItemParent`: Custom event emitted to the parent treeview item to re-evaluate its checked/indeterminate state based on actions below it.
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleCheck(e = undefined) => void`: undefined
   * - `handleUpdateTreeviewItemParent(e) => void`: undefined
   */
  "cbp-treeview-item": Partial<
    CbpTreeviewItemProps &
      CbpTreeviewItemSolidJsProps &
      BaseProps<CbpTreeviewItem> &
      BaseEvents
  >;

  /**
   * The Typography component encapsulates predefined styles for different kinds of text that makes
   * up a website, merging design language with CSS and HTML implementations.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `tag`: undefined
   * - `variant`: undefined
   * - `divider`: undefined
   * - `context`: undefined
   * - `sx`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The content provided in the default slot is wrapped within the specified HTML tag.
   */
  "cbp-typography": Partial<
    CbpTypographyProps &
      CbpTypographySolidJsProps &
      BaseProps<CbpTypography> &
      BaseEvents
  >;

  /**
   * The Universal Header component establishes CBP branding, displaying the seal in a standard DHS blue header.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `logo-src-lg`/`logoSrcLg`: undefined
   * - `logo-src-sm`/`logoSrcSm`: undefined
   *
   * ## Slots
   *
   * Areas where markup can be added to the component.
   *
   * - `(default)`: The default slot may contain any application-specific markup placed to the right of the CBP seal, usually a list of links.
   */
  "cbp-universal-header": Partial<
    CbpUniversalHeaderProps &
      CbpUniversalHeaderSolidJsProps &
      BaseProps<CbpUniversalHeader> &
      BaseEvents
  >;

  /**
   * The "USA Banner" is similar to the U.S. Web Design System "banner" component, intended to establish trust
   * as a common identifier on public-facing government sites.
   *
   * ## Attributes & Properties
   *
   * Component attributes and properties that can be applied to the element or by using JavaScript.
   *
   * - `open`: undefined
   *
   * ## Methods
   *
   * Methods that can be called to access component functionality.
   *
   * - `handleClick() => void`: undefined
   */
  "cbp-usa-banner": Partial<
    CbpUsaBannerProps &
      CbpUsaBannerSolidJsProps &
      BaseProps<CbpUsaBanner> &
      BaseEvents
  >;
};

export type CustomCssProperties = {};

declare module "react" {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module "preact" {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module "@builder.io/qwik" {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module "@stencil/core" {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module "hono/jsx" {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module "react-native" {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements extends CustomElementsSolidJs {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}

declare global {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
  export interface CSSProperties extends CustomCssProperties {}
}