/* eslint-disable */
/* tslint:disable */
/**
 * This is an autogenerated file created by the Stencil compiler.
 * It contains typing information for all components that exist in this project.
 */
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
export namespace Components {
    /**
     * 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.
     */
    interface CbpAccordion {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Specifies whether multiple accordion items can be open at the same time. Defaults to false.
         */
        "multiple": boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    /**
     * 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.
     */
    interface CbpAccordionItem {
        /**
          * Specifies an optional color variant of the accordion item.
         */
        "color": 'danger';
        /**
          * Specifies an optional `id` for the accordion item heading, also used to generate an `id` for  the accordion item content wrapper. If this property is not specified, a unique string will  automatically be generated.
         */
        "headingId": string;
        /**
          * The heading level of the accordion item control. Defaults to h3.
         */
        "headingLevel": 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
        /**
          * The accordion control label.
         */
        "label": string;
        /**
          * Specifies whether the accordion is open.
         */
        "open": boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    /**
     * 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.
     */
    interface CbpActionBar {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * Specifies whether the action bar is inline or floating. Defaults to inline.
         */
        "variant": 'inline' | 'floating' | 'sticky';
    }
    /**
     * 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.
     */
    interface CbpApp {
        /**
          * Specifies the application name for logging with debug information.
         */
        "appName": string;
        /**
          * Specifies the application version for logging with debug information. This may be automated by importing it from the application's package.json, if used.
         */
        "appVersion": string;
        /**
          * Turning on debug mode will log the version of the design system package and Stencil version it was built with to the console, in addition to application name and version, if specified.
         */
        "debug": boolean;
        /**
          * Optionally specifies light/dark mode. This is only needed if the application can change the theme separate from OS settings.
         */
        "theme": "light" | "dark" | "system";
    }
    interface CbpAppHeader {
        /**
          * A public method to close/hide the search form in the application header.
         */
        "closeSearch": () => Promise<void>;
        /**
          * A public method to show the search form in the application header.
         */
        "openSearch": () => Promise<void>;
        /**
          * Specifies if there will be a slotted input for global search
         */
        "search": boolean;
        /**
          * Specifies the action attribute for the search form
         */
        "searchAction": string;
        /**
          * Specifies the method attribute for the search form
         */
        "searchMethod": string;
        /**
          * Specifies the id of the drawer to be launched
         */
        "subnavDrawerId": string;
    }
    /**
     * The Badge component is generally used for emphasizing a numeric characteristic of an object 
     * (e.g., the number of unread items in a folder).
     */
    interface CbpBadge {
        /**
          * Specifies a color variant. Currently the only variant supported is "danger".
         */
        "color": "default"| "danger";
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    /**
     * The Banner is a container spanning the entire viewport meant to highlight urgent or important content.
     */
    interface CbpBanner {
        /**
          * Specifies a color variant for the banner.
         */
        "color": "info";
    }
    /**
     * 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.
     */
    interface CbpBreadcrumb {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Specifies a character as a divider between breadcrumb links. Defaults to "/".
         */
        "divider": string;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    /**
     * 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.
     */
    interface CbpButton {
        /**
          * Specifies an accessible label for the button/link as an `aria-label` when the button does not contain label text or a sufficiently unique label. This text overrides the default label and is not additive to it.
         */
        "accessibilityText": string;
        /**
          * The color of the button: primary, secondary, or danger. Defaults to "primary."
         */
        "color": 'primary' | 'secondary' | 'danger';
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Optionally specify the ID of the control here, which is used to generate related pattern node IDs and associate everything for accessibility
         */
        "controlId": string;
        /**
          * Specifies the DOM element that the button controls and results in the `aria-controls` attribute rendered on the button with the specified value.
         */
        "controls": string;
        /**
          * Marks the rendered button/link in a disabled state when specified.
         */
        "disabled": boolean;
        /**
          * The `download` attribute of a link button; when present tells the browser to download the specified href URI instead of viewing or navigating to it.
         */
        "download": boolean | string;
        /**
          * Specifies if a controlled UI widget is expanded and results in `aria-pressed="true|false"` being placed  on the button when specified. This property is usually used for progressive disclosure patterns such as  accordions, menus, expand/collapse, etc., where focus remains on the control after the user action.
         */
        "expanded": "true" | "false";
        /**
          * The visual fill of the button: solid, outline, or ghost. Defaults to "solid."
         */
        "fill": 'solid' | 'outline' | 'ghost';
        /**
          * Specifies the (min-)height of the button (in CSS units) when different from the default size.
         */
        "height": string;
        /**
          * The `href` attribute of a link button.
         */
        "href": string;
        /**
          * The `name` attribute of the button, which is passed as part of formData (as a key) for the the pressed submit button.
         */
        "name": string;
        /**
          * Specifies if the button is pressed and results in `aria-pressed="true|false"` being placed on the  button when specified. Only valid on actual `button` elements.
         */
        "pressed": "true" | "false";
        /**
          * The `rel` attribute of a link button.
         */
        "rel": string;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * Specifies whether the button is a true button element or "link button."
         */
        "tag": 'button' | 'a';
        /**
          * The `target` attribute of a link button.
         */
        "target": string;
        /**
          * The property on the target element being toggled by the button/control (e.g., "open").
         */
        "targetProp": string;
        /**
          * The `type` attribute of the button: button, submit, or reset. Defaults to "button."
         */
        "type": 'button' | 'submit' | 'reset';
        /**
          * The `value` attribute of the button, which is passed as part of formData (as a value) for the the pressed submit button.
         */
        "value": string;
        /**
          * Specifies a variant of the buttons, such as square for buttons with only an icon and call-to-action button.
         */
        "variant": 'square' | 'circle' | 'cta';
        /**
          * Specifies the (min-)width of the button (in CSS units) when different from the default size.
         */
        "width": string;
    }
    /**
     * The Card component is a visual treatment for a container meant for similarly-sized, repeated chunks of content.
     */
    interface CbpCard {
        /**
          * Optionally specifies a card color (different from the default color) based on predefined design token values.
         */
        "color": "info" | "success" | "warning" | "danger";
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Marks the rendered card in a disabled state when specified.
         */
        "disabled": boolean;
        /**
          * Specifies the `href` value for the "clickable" interactive cards.
         */
        "href": string;
        /**
          * Specifies the interactivity of the card.
         */
        "interactive": "clickable" | "selectable" | "radio";
        /**
          * When present, the card will stretch vertically to fill its parent container; most useful when placed in an equally sized grid or row of cards.
         */
        "stretch": boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * Specifies optional variants with difference from the default card.
         */
        "variant": "banner" | "flag";
    }
    /**
     * 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
     */
    interface CbpCarousel {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * used to set the current for the carousel
         */
        "current": number;
        /**
          * used to set the height (in CSS units or content values) of the carousel
         */
        "height": string;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * used to set the width (in CSS units or content values) of the carousel
         */
        "width": string;
    }
    /**
     * The Carousel Item is meant to be slotted into the CBP-Carousel and represents a single 
     * iteration of content for the CBP-Carousel
     */
    interface CbpCarouselItem {
        /**
          * used to set the height (in CSS units or content values) of the carousel-item
         */
        "height": string;
        /**
          * used to set the width (in CSS units or content values) of the carousel-item
         */
        "width": string;
    }
    /**
     * 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.
     */
    interface CbpCheckbox {
        /**
          * Marks the checkbox as checked by default when specified.
         */
        "checked": boolean;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Marks the checkbox in a disabled state when specified.
         */
        "disabled": boolean;
        /**
          * Optionally specify the ID of the checkbox input here, which is used to generate related pattern node IDs and associate everything for accessibility
         */
        "fieldId": string;
        /**
          * Marks the checkbox as checked by default when specified.
         */
        "indeterminate": boolean;
        /**
          * The `name` attribute of the checkbox, which is passed as part of formData (as a key) only when the checkbox is checked.
         */
        "name": string;
        /**
          * 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.
         */
        "reset": () => Promise<void>;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * Optionally set the `value` attribute of the checkbox at the component level. Not needed if the slotted checkbox has a value.
         */
        "value": string;
    }
    /**
     * The Chip component acts like an interactive version of the Tag and is typically used for selecting or filtering.
     */
    interface CbpChip {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Marks the rendered button/link in a disabled state when specified.
         */
        "disabled": boolean;
        /**
          * Specifies the `name` attribute of the rendered button
         */
        "name": string;
        /**
          * Specifies the pressed state of the button and `aria-pressed` attribute of the rendered button
         */
        "pressed": boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * Specifies the `value` attribute of the rendered button
         */
        "value": string;
    }
    /**
     * The Code Snippet component is used to display code in a readable format and facilitate copying it.
     */
    interface CbpCodeSnippet {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Specifies the height (in CSS units) for a multiple line block variant while not expanded.
         */
        "height": string;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * Specifies inline or block layouts of the code snippet. Defaults to inline.
         */
        "variant": 'inline' | 'block';
    }
    /**
     * The Container component is a building block component for wrapping content and providing 
     * visual treatment such as a background image or color.
     */
    interface CbpContainer {
        /**
          * Specifies the CSS background of the parent container, which could be a solid color, an image, a gradient, or any combination (or multiples) achievable via the CSS `background` property.
         */
        "background": string;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * Specifies the text color for content within the container, since it could be on any background.
         */
        "textColor": string;
        /**
          * Specifies the width of the inner container area.
         */
        "width": string;
    }
    /**
     * 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.
     */
    interface CbpDialog {
        /**
          * Creates an accessible label for the dialog.
         */
        "accessibilityText": string;
        /**
          * A public method for closing the dialog.
         */
        "closeDialog": () => Promise<void>;
        /**
          * Optionally specifies a dialog color (different from the default color) based on predefined design token values.
         */
        "color": 'info' | 'success' | 'warning' | 'danger';
        /**
          * Specifies the dialog height in CSS units (preferably relative units such as rem).
         */
        "height": string;
        /**
          * When set, specifies that the dialog is open
         */
        "open": boolean;
        /**
          * A public method for opening the dialog.
         */
        "openDialog": () => Promise<void>;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * Specifies a unique `ID` for the dialog, used to wire up the controls and accessibility features.
         */
        "uid": string;
        /**
          * Specifies the dialog width in CSS units (preferably relative units such as rem).
         */
        "width": string;
    }
    interface CbpDotIndicator {
        /**
          * the currently active dot
         */
        "current": number;
        /**
          * unit of measure for what the dot indicator is measuring
         */
        "itemName": string;
        /**
          * Length of index dot-indicator is tracking
         */
        "items": number;
    }
    /**
     * 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.
     */
    interface CbpDrawer {
        /**
          * Creates an accessible label for the drawer (dialog).
         */
        "accessibilityText": string;
        /**
          * A public method for closing the drawer.
         */
        "closeDrawer": () => Promise<void>;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * When set, specifies that the drawer is open
         */
        "open": boolean;
        /**
          * A public method for opening the drawer.
         */
        "openDrawer": () => Promise<void>;
        /**
          * Specifies a valid CSS media query (preferably using relative units), when met will hide the wrapped content using display: none. E.g., `min-width:64em`
         */
        "persistAt": string;
        /**
          * Specifies the position of the drawer (left or right)
         */
        "position": 'left' | 'right';
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * Specifies a unique `ID` for the drawer, used to wire up the controls and accessibility features.
         */
        "uid": string;
    }
    /**
     * 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.
     */
    interface CbpDropdown {
        /**
          * Indicates that the filtering will be performed by asynchronous calls (handled by application logic).
         */
        "async": boolean;
        /**
          * A public method to clear all selected items in a dropdown (single or multi-select). Emits the valueChange event afterward.
         */
        "clearSelections": (e?: any) => Promise<void>;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Specifies that when an exact match is not found for a search string (for combobox functionality), an option to create a new item is presented.
         */
        "create": boolean;
        /**
          * Turns on debug mode, since the dropdown is complex and has complex integration concerns. (This prop is temporary and will be removed)
         */
        "debug": boolean;
        /**
          * Specifies that the field is disabled. Primarily controlled by the parent `cbp-form-field` component.
         */
        "disabled": boolean;
        /**
          * Specifies that the field has an error (and sets aria-invalid accordingly). Primarily controlled by the  parent `cbp-form-field` component.
         */
        "error": boolean;
        /**
          * Optionally specify the ID of the visible control here, which is used to generate related  pattern node IDs and associate everything for accessibility.
         */
        "fieldId": string;
        /**
          * Specifies whether the dropdown accepts key presses to filter results, enabling combobox functionality.
         */
        "filter": boolean;
        /**
          * A JSON object (or stringified JSON) containing an array of labels, values, and optionally selected status.  Labels may contain markup as needed, but in such cases, a value should always be specified explicitly. The expected format is [{"label":"string","value":"string","selected":"boolean (optional"}, ...]
         */
        "items": string | object;
        /**
          * Specifies the number of characters need to emit an event to make an API call and return filtered results.  This property is only used when filter=true AND async=true.
         */
        "minimumInputLength": number;
        /**
          * Specifies whether multiple selections are supported, in which case checkboxes shall be slotted in accordance  with the design system specified pattern. Defaults to false, which renders a single-select dropdown.
         */
        "multiple": boolean;
        /**
          * Specifies the name of the (hidden) form field
         */
        "name": string;
        /**
          * Specifies whether the dropdown menu is open/visible.
         */
        "open": boolean;
        /**
          * Represents placeholder text on the dropdown control, displayed in a distinctive style from the  selected item. Defaults to "Choose Item". Has no effect on multi-selects, as the component manages this text.
         */
        "placeholder": string;
        /**
          * Specifies that the field is readonly. Primarily controlled by the parent `cbp-form-field` component.
         */
        "readonly": boolean;
        /**
          * 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.
         */
        "reset": () => Promise<void>;
        /**
          * Specifies the visible label on the dropdown control of the selected item.  Primarily updated dynamically by the component.
         */
        "selectedLabel": string | undefined;
        /**
          * Supports adding inline styles (to the host) as an object. This property is not reactive.
         */
        "sx": any;
        /**
          * Specifies the value of the hidden input holding the value (or barring one, the text label)  of the selected item. Primarily updated dynamically by the component.
         */
        "value": any;
    }
    /**
     * The Dropdown Item represents an individual option for the Dropdown, similar to an option in a
     * native `select` but with more flexibility.
     */
    interface CbpDropdownItem {
        /**
          * For Internal Use: Specifies the current item (referenced by `aria-activedescendant`) while using keyboard navigation.
         */
        "current": boolean;
        "disabled": boolean;
        /**
          * Optionally specify the ID of each dropdown item, which is used by the parent dropdown to associate `aria-activedescendant`. If no `itemId` is specified, one will be automatically generated.
         */
        "itemId": string;
        /**
          * Specifies if an item is selected
         */
        "selected": boolean;
        /**
          * Specifies an optional value to be passed in the FormData instead of the display text/label.
         */
        "value": string;
    }
    /**
     * 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.
     */
    interface CbpExpand {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Specifies an optional `id` for the component item heading, also used to generate an `id` for  the content wrapper. If this property is not specified, a unique string will  automatically be generated.
         */
        "headingId": string;
        /**
          * The heading level of the expand item control. Defaults to h3.
         */
        "headingLevel": 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
        /**
          * The component control label.
         */
        "label": string;
        /**
          * Specifies whether the content is expanded and visible.
         */
        "open": boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    /**
     * 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.
     */
    interface CbpFileInput {
        /**
          * Specifies the files types accepted by the file input (may also be set directly on the slotted input).  This property is merely a suggestion to the browser and any file type restrictions should still be  enforced in form validation.
         */
        "accept": string;
        /**
          * Specifies the context of the component as it applies to the visual design and whether  it inverts when light/dark mode is toggled.  Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Specifies that the field is disabled. Primarily controlled by the parent `cbp-form-field` component.
         */
        "disabled": boolean;
        /**
          * Experimental: Specifies whether the functionality is enhanced over the native web platform file input.  This functionality requires integration with a framework or manual handling of the custom events and will not work with a native form post.
         */
        "enhanced": boolean;
        /**
          * Specifies that the field has an error (and sets aria-invalid accordingly). Primarily controlled by the  parent `cbp-form-field` component.
         */
        "error": boolean;
        /**
          * Optionally specify the ID of the input here, which is used to generate related pattern  node IDs and associate everything for accessibility.
         */
        "fieldId": string;
        "getData": () => Promise<{ host: HTMLElement; name: string; files: File[]; }>;
        /**
          * Specifies whether the file input accepts multiple files rather than a single file  (may also be set directly on the slotted input).
         */
        "multiple": boolean;
        /**
          * The `name` attribute of the input, which is passed as part of formData (as a key).
         */
        "name": string;
        /**
          * 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.
         */
        "reset": () => Promise<void>;
        /**
          * Supports passing back status and error messages as an array of objects or stringified JSON  from the application. The array shall be the same length as the current file list. E.g., [ {"status": "error|success|undefined", "message": "string"}, ... ] One could take the valueChange event's detail.value key, which contains an array of File objects,  and add these keys to it before feeding it back to this component via the `status` property.
         */
        "status": any;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    /**
     * 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.
     */
    interface CbpFlex {
        /**
          * Specifies the alignment of a flex container's items within the flex container (only when there is extra space in the cross-axis).
         */
        "alignContent": 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch';
        /**
          * Specifies the alignment for all of the flex container’s items along the cross-axis. Defaults to "stretch".
         */
        "alignItems": 'auto' | 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline';
        /**
          * Specifies the size at which the flex children are linearized, specified in CSS units (preferably relative units such as rem).
         */
        "breakpoint": string;
        /**
          * Not yet implemented
         */
        "contentBreakpoint": string;
        /**
          * Specifies how flex items are placed in the flex container by setting the direction of the flex container’s main axis. Defaults to "row" for a horizontal flex context.
         */
        "direction": 'row' | 'row-reverse' | 'column' | 'column-reverse';
        /**
          * Specifies the display mode. Defaults to "flex"
         */
        "display": 'flex' | 'inline-flex';
        /**
          * Specifies the gap between items in CSS units (preferably relative units such as rem). Accepts a single value for horizontal and vertical gap or two values representing column gap and row gap, respectively.
         */
        "gap": string;
        /**
          * Specifies the alignment of flex items along the main axis (of the current line) of the flex container.
         */
        "justifyContent": 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * Specifies the wrapping behavior of the flex children. Browser default behavior is "nowrap".
         */
        "wrap": 'nowrap' | 'wrap' | 'wrap-reverse';
    }
    /**
     * The Flex Item component may optionally be used to specify properties of an individual flex item.
     */
    interface CbpFlexItem {
        /**
          * Specifies the alignment of the specific flex item along the cross-axis separate from the parent context.
         */
        "alignSelf": "auto" | "stretch" | "flex-start" | "flex-end" | "center" | "baseline";
        /**
          * Specifies a basis (in CSS units or content values) for calculating flex behavior different from the default of "auto" (which usually evaluates to "content").
         */
        "flexBasis": string;
        /**
          * Specifies the growth factor the item will grow at relative to other items. Defaults to zero, as flex items do not grow by default.
         */
        "flexGrow": number;
        /**
          * Specifies the shrink factor the item will shrink at relative to other items. Defaults to 1, as flex items will shrink at an equal rate by default, taking content size into consideration.
         */
        "flexShrink": number;
        /**
          * Specifies an ordinal group value for sorting this flex item within its group. Defaults to zero, which renders the items in DOM order.
         */
        "order": number;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    interface CbpFloatingAction {
        /**
          * Sets the bottom position (in CSS units) of the floating action component within the viewport.
         */
        "bottom": string;
        /**
          * Sets the left position (in CSS units) of the floating action component within the viewport.
         */
        "left": string;
        /**
          * Sets the right position (in CSS units) of the floating action component within the viewport.
         */
        "right": string;
        /**
          * Supports adding inline styles (to the host) as an object. This property is not reactive.
         */
        "sx": any;
        /**
          * Sets the top position (in CSS units) of the floating action component within the viewport.
         */
        "top": string;
    }
    /**
     * 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.
     */
    interface CbpFooter {
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    /**
     * 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.
     */
    interface CbpForm {
        "debug": boolean;
        /**
          * When specified, applies preventDefault() to the submit event and emits a custom event with the formData to hand off to the application.
         */
        "preventSubmit": boolean;
    }
    /**
     * 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.
     */
    interface CbpFormField {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Provide additional details about the field, including whether it's required, which is applied to the form field via `aria-describedby`.
         */
        "description": string;
        /**
          * Specifies that the field is disabled; sets all form fields and button controls as disabled.
         */
        "disabled": boolean;
        /**
          * Specifies that the field has an error (and sets aria-invalid accordingly).
         */
        "error": boolean;
        /**
          * Specifies the error message(s) to replace the description text while in an error state.
         */
        "errorMessages": string | any;
        /**
          * Optionally specify the ID of the field here, which is used to generate related pattern node IDs and associate everything for accessibility
         */
        "fieldId": string;
        /**
          * Specifies that this form field represents a group of (slotted) inputs, such as a radio list, checklist, or related inputs in a compound pattern.
         */
        "group": boolean;
        /**
          * Provide a visible/accessible label for the form field/group.
         */
        "label": string;
        /**
          * Specifies that the field is readonly; sets all form fields as readonly and related button controls to disabled.
         */
        "readonly": boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    /**
     * 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.
     */
    interface CbpFormFieldWrapper {
    }
    /**
     * 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.
     */
    interface CbpGrid {
        /**
          * Aligns grid content vertically when total grid size is smaller than container.
         */
        "alignContent": 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'space-around' | 'space-between' | 'space-evenly' | 'safe center' | 'unsafe center';
        /**
          * Aligns grid items in the vertical/column axis, perpendicular to the inline axis.
         */
        "alignItems": 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'self-start' | 'self-end' | 'baseline' | 'first baseline' | 'last baseline';
        /**
          * The size (in CSS units; preferably relative units such as `rem`) below which the grid items linearize.
         */
        "breakpoint": string;
        /**
          * Specifies the grid display. Defaults to "grid".
         */
        "display": 'grid' | 'inline-grid';
        /**
          * Specifies the spacing between grid items in the form of a single value or space-separated row-gap and column-gap values (in CSS units).
         */
        "gap": string;
        /**
          * Specifies the size (in CSS units) of implicitly-created columns using the auto-placement algorithm.
         */
        "gridAutoColumns": string;
        /**
          * Specifies how auto-placed items get flowed into the grid.
         */
        "gridAutoFlow": 'row' | 'column' | 'row dense' | 'column dense';
        /**
          * Specifies the size (in CSS units) of implicitly-created rows using the auto-placement algorithm.
         */
        "gridAutoRows": string;
        /**
          * Defines the grid via named grid areas (providing a visualization of the structure of the grid), which are not associated with any particular grid item, but can be referenced from the grid-placement properties.
         */
        "gridTemplateAreas": string;
        /**
          * Specifies the track sizing functions (and optionally line names) of the grid columns as a space-separated track list.
         */
        "gridTemplateColumns": 'none' | string;
        /**
          * Specifies the track sizing functions (and optionally line names) of the grid rows as a space-separated track list.
         */
        "gridTemplateRows": 'none' | string;
        /**
          * Justifies grid content horizontally when total grid size is smaller than container.
         */
        "justifyContent": 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'left' | 'right' | 'space-around' | 'space-between' | 'space-evenly' | 'safe center' | 'unsafe center';
        /**
          * Justifies grid content horizontally, along the inline/row axis.
         */
        "justifyItems": 'legacy' | 'normal' | 'stretch' | 'center' | 'safe center' | 'unsafe center' | 'start' | 'end' | 'self-start' | 'self-end' | 'left' | 'right' | 'baseline' | 'first baseline' | 'last baseline';
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    /**
     * The Grid Item component may optionally be used to specify properties of an individual grid item.
     */
    interface CbpGridItem {
        /**
          * Aligns this specific grid item in the vertical/column axis, perpendicular to the inline axis, separate from the parent context.
         */
        "alignSelf": string;
        /**
          * Names the Grid Area for use with grid-template-area on the parent.
         */
        "gridArea": string;
        /**
          * Specifies the ending position/edge (non-inclusive) of the grid item in the horizontal/column plane, which is used to calculate the size (including column and row spanning) and location within the grid.
         */
        "gridColumnEnd": number | string;
        /**
          * Specifies the starting position/edge of the grid item in the horizontal/column plane, which is used to calculate the size (including column and row spanning) and location within the grid.
         */
        "gridColumnStart": number | string;
        /**
          * Specifies the ending position/edge (non-inclusive) of the grid item in the vertical/row plane, which is used to calculate the size (including column and row spanning) and location within the grid.
         */
        "gridRowEnd": number | string;
        /**
          * Specifies the starting position/edge of the grid item in the vertical/row plane, which is used to calculate the size (including column and row spanning) and location within the grid.
         */
        "gridRowStart": number | string;
        /**
          * Justifies this specific grid item content horizontally, along the inline/row axis, separate from the parent context.
         */
        "justifySelf": string;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    /**
     * The Hide component represents a component-based implementation for programmatically hiding 
     * (or visually hiding) content based on application logic or media query.
     */
    interface CbpHide {
        /**
          * Specifies the host's display when visible. The default is `inline`, which is the default display of a custom element.
         */
        "display": string;
        /**
          * When set to true, the host is hidden. Allows for toggling via property binding rather than media query.
         */
        "hide": boolean;
        /**
          * Specifies a valid CSS media query (preferably using relative units), when met will hide the wrapped content using display: none; (e.g., `max-width: 64em`).  For complex media queries using AND/OR operators, each condition must be enclosed in parentheses  (e.g., `(width < 37.5rem) OR (width > 63rem)`).
         */
        "hideAt": string;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * When set to true, the host is visually hidden in an accessible manner. Allows for toggling via property binding rather than media query.
         */
        "visuallyHide": boolean;
        /**
          * Specifies a valid CSS media query (preferably using relative units), when met will visually hide the wrapped content  in a way that is it still accessible as a label (e.g., `max-width: 64em`), For complex media queries using AND/OR operators, each condition must be enclosed in parentheses  (e.g., `(width < 37.5rem) OR (width > 63rem)`).
         */
        "visuallyHideAt": string;
    }
    /**
     * 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.
     */
    interface CbpIcon {
        /**
          * For icons that are not decorative, accessibilityText is rendered as an `aria-label` on the `svg` tag.
         */
        "accessibilityText": string;
        /**
          * Optionally specifies the color of the icon (ideally using design-token-based CSS variables). Defaults to "currentColor."
         */
        "color": string;
        /**
          * Specifies which icon to use from the built-in set of icons.
         */
        "name": string;
        /**
          * Optionally specify the degrees of rotation.
         */
        "rotate": number;
        /**
          * Optionally specifies the size (both width and height) of the icon, which  defaults (via CSS) to `1rem` (16px), the intended size of icons alongside body text.  Icon size may be specified via this property/attribute or the custom  CSS property `--cbp-icon-size`.
         */
        "size": string;
        /**
          * Specifies the exact `src` of an SVG file to use.
         */
        "src": string;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    /**
     * The cbp-link component is used to render an anchor or provide consistent styling for a slotted anchor.
     */
    interface CbpLink {
        /**
          * Specifies an accessible label for the rendered anchor via `aria-label`.
         */
        "accessibilityText": string;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Specifies whether the the rendered anchor is "disabled". Creating disabled anchors may introduce accessibility concerns - use with caution.
         */
        "disabled": boolean;
        /**
          * Specifies the `download` boolean attribute of the rendered anchor.
         */
        "download": boolean | string;
        /**
          * Specifies the `href` of the rendered anchor.
         */
        "href": string;
        /**
          * Specifies the `lang` attribute of the rendered anchor.
         */
        "language": string;
        /**
          * Specifies the `rel` attribute of the rendered anchor.
         */
        "rel": string;
        /**
          * Defines an `accesskey` attribute of the rendered anchor.
         */
        "shortcutKey": string;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * Specifies the `target` attribute of the rendered anchor.
         */
        "target": string;
    }
    /**
     * 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.
     */
    interface CbpList {
        /**
          * Specifies an accessible label for the list as an `aria-label`, similar to a table `caption`.
         */
        "accessibilityText": string;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Specifies the font size for the list
         */
        "size": 'normal' | 'large';
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * Specifies the semantic tag to be rendered.
         */
        "tag": 'ul' | 'ol' | 'dl';
        /**
          * Specifies the variant of list (unstyled, icon, special)
         */
        "variant": 'unstyled' | 'link' | 'icon';
    }
    /**
     * 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.
     */
    interface CbpListbox {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * A JSON object (or stringified JSON) containing an array of labels. Labels may contain markup as needed but  only the text can be populated into the native input upon selection. The expected format is [{"label":"string"}, ...]
         */
        "items": string | object;
        /**
          * Specifies whether the listbox is open/visible.
         */
        "open": boolean;
        /**
          * Supports adding inline styles (to the host) as an object. This property is not reactive.
         */
        "sx": any;
        /**
          * Optionally specify the ID of the listbox element (role=listbox), which is used to generate related  pattern node IDs and associate it to the wrapped input for accessibility.
         */
        "uid": string;
    }
    /**
     * The Loader is used as a visual indicator of progress during waiting periods.
     */
    interface CbpLoader {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled.  Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Defines if the loader will be in determinate/indeterminate, if true loader will display the current value out of max value
         */
        "determinate": boolean;
        /**
          * Used to set the loader to the 'error' state of the loader
         */
        "error": boolean;
        /**
          * Used in deternminate mode to display the max value of loaded content
         */
        "max": number;
        /**
          * Used to set the text orientation for the circular determinate loader's description
         */
        "orientation": "horizontal" | "vertical";
        /**
          * Specifies a unique `ID` for the loader, used to wire up the controls and accessibility features.
         */
        "progressId": string;
        /**
          * Defines the size of the loader render, default value of large
         */
        "size": "large" | "small";
        /**
          * Used to set the loader to the 'success' state of the loader
         */
        "success": boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * Used in deternminate mode to display the current value of loaded content
         */
        "value": number;
        /**
          * Defines if the loader will be in displayed as a circular or linear variant
         */
        "variant": "circular" | "linear";
    }
    /**
     * A Menu contains additional actions in the form of links or buttons, which can be shown by activating a control.
     */
    interface CbpMenu {
        /**
          * Creates an accessible label for the menu control.
         */
        "accessibilityText": string;
        /**
          * A public method for closing the menu.
         */
        "closeMenu": () => Promise<void>;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * When set, specifies that the menu is open.
         */
        "open": boolean;
        /**
          * A public method for opening the menu.
         */
        "openMenu": () => Promise<void>;
        /**
          * Specifies the position of the menu. Defaults to "bottom-start".
         */
        "position": 'bottom-start' | "bottom-end" | 'top-start' | "top-end";
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * Specifies a unique `ID` for the menu, used to wire up the controls and accessibility features.
         */
        "uid": string;
    }
    /**
     * The Menu Item component wraps each individual control (link or button) within the menu.
     */
    interface CbpMenuItem {
        /**
          * Specifies a color variant for the menu item. Currently the only supported variant is "danger".
         */
        "color": "danger";
        /**
          * Specifies an indent level to represent hierarchical items. Defaults to zero.
         */
        "indentLevel": number;
    }
    /**
     * The Multicol component is a wrapper that invokes a CSS Multi-column layout context, ideal for 
     * using with semantic lists and checklists/radio lists.
     */
    interface CbpMulticol {
        /**
          * Specifies the maximum number of columns
         */
        "columns": number;
        /**
          * Specifies the gap between columns in CSS units (preferably relative units such as `rem`).
         */
        "gap": string;
        /**
          * Specifies that children shall not be broken to spread contents across columns (using `break-inside: avoid` CSS).
         */
        "nobreak": boolean;
        /**
          * Specifies the rule separating each column (syntax is similar to CSS borders, including a width, style, and color).
         */
        "rule": string;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * Specifies the minimum column width in CSS units (preferably relative units such as `rem`).  The column width may affect how many columns are actually used based upon available space.
         */
        "width": string;
    }
    /**
     * The Nav Item component wraps each individual control (link or button) within the App Header.
     */
    interface CbpNavItem {
        /**
          * Specifies whether this is the Nav Item that represents the current page. Only one item per set should be marked as current.
         */
        "current": boolean;
        /**
          * Specifies a name used to associated Nav Items with Subnav Items.
         */
        "name": string;
        /**
          * Supports adding inline styles as an object.
         */
        "sx": any;
    }
    /**
     * The Notice component presents persistent information that gives extra insight into a particular content area.
     */
    interface CbpNotice {
        /**
          * Optionally specifies a notice color based on predefined design token values. Defaults to "info".
         */
        "color": 'info' | 'success' | 'warning' | 'danger';
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    /**
     * The Pagination component presents a common UI pattern for displaying data sets broken up into smaller, 
     * more consumable (and performant) chunks or "pages."
     */
    interface CbpPagination {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Specifies the current maximum number of pages allowed. This property should be used for extremely large data sets  that have the potential to returns hundreds or thousands of pages.
         */
        "maxPages": number | undefined;
        /**
          * Specifies the current page being viewed. Defaults to 1.
         */
        "page": number;
        /**
          * Specifies the number of items to show per page. Accepts any number or "all". Defaults to 10.
         */
        "pageSize": number | "all";
        /**
          * Specifies the number of records in the entire data set (complete or filtered) to be paginated.
         */
        "records": number;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    /**
     * A panel is a styled container for displaying information within the main page content area or to either side.
     */
    interface CbpPanel {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    /**
     * The Radio component wraps the slotted native form control (`input type="radio"`) and label text, providing cross-browser styling.
     */
    interface CbpRadio {
        /**
          * Marks the radio button as checked by default when specified.
         */
        "checked": boolean;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Marks the radio button in a disabled state when specified.
         */
        "disabled": boolean;
        /**
          * Optionally specify the ID of the checkbox input here, which is used to generate related pattern node IDs and associate everything for accessibility
         */
        "fieldId": string;
        /**
          * The `name` attribute of the radio button, which is passed as part of formData (as a key) only when the radio button is checked.
         */
        "name": string;
        /**
          * 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.
         */
        "reset": () => Promise<void>;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * Optionally set the `value` attribute of the radio button at the component level. Not needed if the slotted radio button has a value.
         */
        "value": string;
    }
    /**
     * 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.
     */
    interface CbpResizeObserver {
        /**
          * The number of milliseconds to debounce the event emitter. Defaults to 0. While the native resize observer is very performant, the calculations within its handler function may not be, and performance may benefit from debouncing this event emitter.
         */
        "debounce": number;
    }
    /**
     * The Section component represents a generic block that may be used for semantic meaning or as 
     * a generic container for styling.
     */
    interface CbpSection {
        /**
          * Specifies an accessible label as `aria-label` to make a `section` tag an accessible landmark element. Likely has no effect otherwise.
         */
        "accessibilityText": string;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * Specifies the tag to render. Use `section` with the `accessibilityText` property to make an accessible landmark element.
         */
        "tag": 'div' | 'section' | 'none';
    }
    /**
     * The Segmented Button Group component wraps multiple buttons and can be used as a multi-option 
     * toggle or group of controls.
     */
    interface CbpSegmentedButtonGroup {
        /**
          * Specifies accessibility text used to label the group, applied to the group via aria-label.
         */
        "accessibilityText": string;
        "disabled": boolean;
        /**
          * Specifies whether multiple buttons may be activated at the same time. Defaults to false.
         */
        "multiple": boolean;
        /**
          * Optionally specifies the name of the (hidden) form field as a formData key  when a value is intended to be passed.
         */
        "name": string;
        /**
          * 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.
         */
        "reset": () => Promise<void>;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * Optionally specifies a value of the group as a way to set the initial button pressed states and/or to be passed as part of submitted formData when a name is also specified.  Requires that the individual buttons have a value specified for the group to pass a value.
         */
        "value": any;
    }
    /**
     * 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.
     */
    interface CbpSkipNav {
        /**
          * Specifies a shortcut key, which is applied as an `accessKey` attribute.
         */
        "shortcutKey": string;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * Specifies the target `id` where focus is sent when the "skip nav" link is activated. Defaults to "main".
         */
        "targetId": string;
    }
    /**
     * The Slider component allows for the selection of a value within a range, styled to design system specifications.
     */
    interface CbpSlider {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled.  Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Specifies that the field is disabled. Primarily controlled by the parent `cbp-form-field` component.
         */
        "disabled": boolean;
        /**
          * Specifies that the field has an error (and sets aria-invalid accordingly). Primarily controlled by the parent `cbp-form-field` component.
         */
        "error": boolean;
        /**
          * Optionally specify the ID of the visible control here, which is used to generate related pattern node IDs and associate everything for accessibility.  For range sliders, "-start" and "-end" are appended to the specified/generated value automatically.
         */
        "fieldId": string;
        /**
          * Specifies the minimum difference in values in a range slider. If a non-zero value is specified, keep in mind the interaction with the "step" property.
         */
        "gap": number;
        /**
          * Specifies whether the numeric input is hidden (shown by default).
         */
        "hideInput": boolean;
        /**
          * Specifies whether the min/max values are hidden (shown by default).
         */
        "hideMinmax": boolean;
        /**
          * Specifies the maximum value of the slider and numeric entry field (defaults to 100).  This prop should be set on this component rather than (or in addition to) the slotted `input type="range"`.
         */
        "max": number;
        /**
          * Specifies the minimum value of the slider and numeric entry field (defaults to 0).  This prop should be set on this component rather than (or in addition to) the slotted `input type="range"`.
         */
        "min": number;
        /**
          * 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.
         */
        "reset": () => Promise<void>;
        /**
          * Specifies the step value of the slider and numeric entry field (defaults to 1).  This prop should be set on this component rather than (or in addition to) the slotted `input type="range"`.
         */
        "step": number;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * Specifies the value of the slider and numeric entry field. It is highly recommended to set a contextually sensible default because the native `input type="range" cannot have an undefined or empty string as a value. If no value is specified, the default value will  be reported (and submitted) as halfway between the specified minimum and maximum; unless the maximum is actually less than the minimum,  in which case the default is set to the value of the minimum attribute. This prop should be set on this component rather than (or in addition to) the slotted `input type="range"`.
         */
        "value": number | number[] | string | string[];
        /**
          * Specifies whether the control is a single slider or a range with two values (can be auto-detected by the number of slotted `input[type=range]` tags).
         */
        "variant": "single" | "range";
    }
    /**
     * 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.
     */
    interface CbpStructuredList {
        /**
          * Specifies an accessible label for the list as an `aria-label`, similar to a table `caption`.  Since the structured list contains significant amount of data, it is advised to always specify a label describing the list.
         */
        "accessibilityText": string;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * References an `id` placed on the element slotted into the `cbp-structured-list-header` named slot to provide additional accessible context to the list label.
         */
        "headerId": string;
        /**
          * Specifies whether the list is striped, designating whether the colored rows are the odd or even rows (CBP DS standard is even when used).
         */
        "striped": 'odd' | 'even';
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    /**
     * 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.
     */
    interface CbpStructuredListItem {
        /**
          * Optionally specifies a color variant based on design tokens.
         */
        "color": 'danger' | 'warning' | 'success' | 'info';
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    /**
     * Sub-Navigation (Subnav) is meant to be used as a secondary, vertical navigation.
     */
    interface CbpSubnav {
        /**
          * Sets the aria-label for the `nav` landmark element rendered by the subnav.
         */
        "accessibilityText": string;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Specifies a flat display, rather than the default indented layout based on tag hierarchy.
         */
        "flat": boolean;
        /**
          * Specifies whether the Subnav pushes updates to a state store to integrate with the Application Header.
         */
        "store": boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    /**
     * The Subnav Item component represents a single navigation link and can also be nested multiple levels to convey a site/navigation hierarchy.
     */
    interface CbpSubnavItem {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Specifies the current item within the collection of Subnav Items.
         */
        "current": boolean;
        /**
          * Specifies the href for the Subnav Item anchor.
         */
        "href": string;
        /**
          * Specifies the text label for the subnav item.
         */
        "label": string;
        /**
          * Specifies a name used to associated Nav Items with Subnav Items.
         */
        "name": string;
        /**
          * Specifies whether a Subnav Item with nested children is expanded or collapsed.  Primarily used internally for user interactions.
         */
        "open": boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * Optionally specifies a unique `ID` for the menu, used to wire up the controls and accessibility features.
         */
        "uid": string;
    }
    /**
     * The Tab component represents an individual tab control within a tab set.
     */
    interface CbpTab {
        /**
          * For tabs without a visible text label (e.g., icon tabs) or a label that is insufficiently unique/descriptive, you may provide accessibility text, which is rendered as an `aria-label` on the tab control (button element).
         */
        "accessibilityText": string;
        /**
          * An optional color variant.
         */
        "color": 'danger';
        /**
          * An `ID`-conformant unique name of the tab; This value should match the corresponding cbp-tab-panel name and links the two together.
         */
        "name": string;
        /**
          * Specifies whether this is the selected tab. Only one tab per tabset should be marked as selected.
         */
        "selected": boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    /**
     * The Tab Panel component is a wrapper representing a tabpanel role and containing the content to be progressively disclosed.
     */
    interface CbpTabPanel {
        /**
          * An `ID`-conformant unique name of the tab-panel, applied as an `id` on this tab panel; This value should match the corresponding cbp-tab name and links the two together.
         */
        "name": string;
        /**
          * Specifies if this is the tab panel corresponding to the selected tab and currently visible. This property is managed by the parent cbp-tabs component and does not need to be set manually.
         */
        "selected": boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    /**
     * 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.
     */
    interface CbpTable {
        /**
          * Specifies whether a hover effect is applied to columns when the column header is hovered. This feature is opt-in.
         */
        "columnHover": boolean;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled.  Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Turning on debug mode will log some calculations to the console for troubleshooting.
         */
        "debug": boolean;
        /**
          * 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
         */
        "doSort": (column: number, e?: any) => Promise<void>;
        /**
          * Specifies whether the mouse cursor highlights the table row or cell on hover. Defaults to "row".
         */
        "hover": 'row' | 'cell';
        /**
          * Specifies whether the table is striped, designating whether the colored rows are the odd or even rows (CBP DS standard is even when used).
         */
        "overflow": 'scroll' | 'linearize';
        /**
          * Specifies whether the table is striped, designating whether the colored rows are the odd or even rows (CBP DS standard is even when used).
         */
        "striped": 'odd' | 'even';
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    /**
     * 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.
     */
    interface CbpTabs {
        /**
          * The accessible label of the tablist. Required unless `aria-labelledby` is specified on the host tag directly.
         */
        "accessibilityText": string;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    /**
     * The Tag component is a non-interactive visual treatment for text, typically representing labels, keywords, or search terms.
     */
    interface CbpTag {
        /**
          * Specifies a tag color variant. Default does not need to be specified.
         */
        "color": 'default' | 'danger' | 'success' | 'warning';
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    /**
     * The Toast component displays a brief, non-intrusive message that appears on a user interface to 
     * provide feedback about an action or status update.
     */
    interface CbpToast {
        /**
          * specifies the color for the toast
         */
        "color": 'info' | 'danger' | 'success' | 'warning';
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * specifies time in seconds for the toast to be displayed
         */
        "duration": 3 | 5 | 10;
        /**
          * When set, specifies that the toast is open
         */
        "open": boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    /**
     * The Toggle component is a visual variant of a Boolean selection form control (checkbox), 
     * representing an on/off toggle switch.
     */
    interface CbpToggle {
        /**
          * Marks the toggle as checked (on) by default when specified.
         */
        "checked": boolean;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled.  Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Marks the toggle in a disabled state when specified.
         */
        "disabled": boolean;
        /**
          * Hides the status text after the toggle control when specified.
         */
        "hideStatus": boolean;
        /**
          * Optionally set the `name` attribute of the checkbox at the component level, which is passed as part of  formData (as a key) only when the checkbox is checked.  Not needed if the slotted checkbox has a name.
         */
        "name": string;
        /**
          * 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.
         */
        "reset": () => Promise<void>;
        /**
          * Specifies the status text for the false toggle.
         */
        "statusTextOff": string;
        /**
          * Specifies the status text for the true toggle.
         */
        "statusTextOn": string;
        /**
          * Supports adding inline styles as an object.
         */
        "sx": any;
        /**
          * Optionally set the `value` attribute of the checkbox at the component level.  Not needed if the slotted checkbox has a value.
         */
        "value": string;
    }
    /**
     * The Tooltip component allows for the disclosure of supplemental, non-essential information via a triggering element.
     */
    interface CbpTooltip {
        /**
          * sets where the tooltip will be displayed and where the caret will be placed
         */
        "alignment": "top-left" | "top-center" | "top-left" | "right-top" | "right-center" | "right-bottom" | "bottom-left" | "bottom-center" | "bottom-right" | "left-top" | "left-center" | "left-bottom";
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Optionally specify the ID of the visible control here, which is used to generate related pattern node IDs and associate everything for accessibility
         */
        "fieldId": string;
        /**
          * When set, specifies that the tooltip is open
         */
        "open": boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * used to set styles for the definition link for text controls
         */
        "variant": 'definition';
    }
    interface CbpTreeview {
        /**
          * Creates an accessible label for the treeview control if one has not been associated via `aria-labelledby`.
         */
        "accessibilityText": string;
        /**
          * Specifies the context of the component (and its child items) as it applies to the visual design and whether it  inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Specifies the name for all checkboxes in selectable treeviews, similar to a checklist.
         */
        "name": string;
        /**
          * Specifies that the entire tree is selectable. Setting this property at this level overrides all child treeview items.
         */
        "selectable": boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
    }
    interface CbpTreeviewItem {
        /**
          * Specifies whether a selectable item (and its rendered checkbox) is in a checked state.
         */
        "checked": boolean;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it  inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.  This property is passed down from the parent `cbp-treeview` and does not need to be set at this level.
         */
        "context": 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Specifies whether a selectable item (and its rendered checkbox) is in an indeterminate state. This logic is handled internally and should not need to be set manually.
         */
        "indeterminate": boolean;
        /**
          * Specifies the label to be displayed in the treeview item control. For selectable items, this becomes the checkbox label.
         */
        "label": string;
        /**
          * Specifies a name for a selectable item's checkbox.
         */
        "name": string;
        /**
          * Specifies whether the item, if a parent to nested items, is open/expanded.
         */
        "open": boolean;
        /**
          * Specifies whether this item is selectable, and if so renders a checkbox within the item. This property can be set on the parent `cbp-treeview` component to be applied to all treeview items.
         */
        "selectable": boolean;
        /**
          * Specifies a unique `id` for the treeview item, used to wire up the controls and accessibility features.  This property is not required and will auto-generate an `id` if none is specified.
         */
        "uid": string;
        /**
          * Specifies the value for a selectable item's checkbox and to pass in the `cbp-treeview`'s custom event emitter.
         */
        "value": string;
    }
    /**
     * The Typography component encapsulates predefined styles for different kinds of text that makes 
     * up a website, merging design language with CSS and HTML implementations.
     */
    interface CbpTypography {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context": "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Specifies whether the text contains visual treatments that act as a divider.
         */
        "divider": 'underline' | 'fill';
        /**
          * Supports adding inline styles as an object
         */
        "sx": any;
        /**
          * Specifies the semantic tag to be rendered.
         */
        "tag": 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'code' | 'pre' | 'div' | 'span';
        /**
          * Specifies the visual style of the text regardless of the semantic tag.
         */
        "variant": 'masthead-1' | 'masthead-2' | 'heading-xxl' | 'heading-xl' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'heading-xs' | 'body-text' | 'subhead' | 'heading-dialog';
    }
    /**
     * The Universal Header component establishes CBP branding, displaying the seal in a standard DHS blue header.
     */
    interface CbpUniversalHeader {
        /**
          * Fully qualified or relative URL pointing to the larger SVG containing the CPB seal with text.
         */
        "logoSrcLg": string;
        /**
          * Fully qualified or relative URL pointing to the plain SVG version of the CPB seal for smaller screens ("CBP" text is supplied via CSS automatically).
         */
        "logoSrcSm": string;
    }
    /**
     * 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.
     */
    interface CbpUsaBanner {
        /**
          * Specifies that the banner is open. Primarily used for internal component logic.
         */
        "open": boolean;
    }
}
export interface CbpAccordionItemCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpAccordionItemElement;
}
export interface CbpAppHeaderCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpAppHeaderElement;
}
export interface CbpBannerCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpBannerElement;
}
export interface CbpButtonCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpButtonElement;
}
export interface CbpCheckboxCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpCheckboxElement;
}
export interface CbpChipCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpChipElement;
}
export interface CbpCodeSnippetCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpCodeSnippetElement;
}
export interface CbpDialogCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpDialogElement;
}
export interface CbpDotIndicatorCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpDotIndicatorElement;
}
export interface CbpDrawerCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpDrawerElement;
}
export interface CbpDropdownCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpDropdownElement;
}
export interface CbpDropdownItemCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpDropdownItemElement;
}
export interface CbpExpandCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpExpandElement;
}
export interface CbpFileInputCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpFileInputElement;
}
export interface CbpFormCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpFormElement;
}
export interface CbpFormFieldCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpFormFieldElement;
}
export interface CbpHideCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpHideElement;
}
export interface CbpLinkCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpLinkElement;
}
export interface CbpListboxCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpListboxElement;
}
export interface CbpMenuCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpMenuElement;
}
export interface CbpNavItemCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpNavItemElement;
}
export interface CbpPaginationCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpPaginationElement;
}
export interface CbpRadioCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpRadioElement;
}
export interface CbpResizeObserverCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpResizeObserverElement;
}
export interface CbpSegmentedButtonGroupCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpSegmentedButtonGroupElement;
}
export interface CbpSliderCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpSliderElement;
}
export interface CbpSubnavItemCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpSubnavItemElement;
}
export interface CbpTabCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpTabElement;
}
export interface CbpTableCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpTableElement;
}
export interface CbpToggleCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpToggleElement;
}
export interface CbpTreeviewCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpTreeviewElement;
}
export interface CbpTreeviewItemCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLCbpTreeviewItemElement;
}
declare global {
    /**
     * 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.
     */
    interface HTMLCbpAccordionElement extends Components.CbpAccordion, HTMLStencilElement {
    }
    var HTMLCbpAccordionElement: {
        prototype: HTMLCbpAccordionElement;
        new (): HTMLCbpAccordionElement;
    };
    interface HTMLCbpAccordionItemElementEventMap {
        "accordionItemClick": any;
    }
    /**
     * 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.
     */
    interface HTMLCbpAccordionItemElement extends Components.CbpAccordionItem, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpAccordionItemElementEventMap>(type: K, listener: (this: HTMLCbpAccordionItemElement, ev: CbpAccordionItemCustomEvent<HTMLCbpAccordionItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpAccordionItemElementEventMap>(type: K, listener: (this: HTMLCbpAccordionItemElement, ev: CbpAccordionItemCustomEvent<HTMLCbpAccordionItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpAccordionItemElement: {
        prototype: HTMLCbpAccordionItemElement;
        new (): HTMLCbpAccordionItemElement;
    };
    /**
     * 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.
     */
    interface HTMLCbpActionBarElement extends Components.CbpActionBar, HTMLStencilElement {
    }
    var HTMLCbpActionBarElement: {
        prototype: HTMLCbpActionBarElement;
        new (): HTMLCbpActionBarElement;
    };
    /**
     * 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.
     */
    interface HTMLCbpAppElement extends Components.CbpApp, HTMLStencilElement {
    }
    var HTMLCbpAppElement: {
        prototype: HTMLCbpAppElement;
        new (): HTMLCbpAppElement;
    };
    interface HTMLCbpAppHeaderElementEventMap {
        "searchInput": any;
        "searchSubmit": any;
    }
    interface HTMLCbpAppHeaderElement extends Components.CbpAppHeader, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpAppHeaderElementEventMap>(type: K, listener: (this: HTMLCbpAppHeaderElement, ev: CbpAppHeaderCustomEvent<HTMLCbpAppHeaderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpAppHeaderElementEventMap>(type: K, listener: (this: HTMLCbpAppHeaderElement, ev: CbpAppHeaderCustomEvent<HTMLCbpAppHeaderElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpAppHeaderElement: {
        prototype: HTMLCbpAppHeaderElement;
        new (): HTMLCbpAppHeaderElement;
    };
    /**
     * The Badge component is generally used for emphasizing a numeric characteristic of an object 
     * (e.g., the number of unread items in a folder).
     */
    interface HTMLCbpBadgeElement extends Components.CbpBadge, HTMLStencilElement {
    }
    var HTMLCbpBadgeElement: {
        prototype: HTMLCbpBadgeElement;
        new (): HTMLCbpBadgeElement;
    };
    interface HTMLCbpBannerElementEventMap {
        "bannerDismiss": any;
    }
    /**
     * The Banner is a container spanning the entire viewport meant to highlight urgent or important content.
     */
    interface HTMLCbpBannerElement extends Components.CbpBanner, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpBannerElementEventMap>(type: K, listener: (this: HTMLCbpBannerElement, ev: CbpBannerCustomEvent<HTMLCbpBannerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpBannerElementEventMap>(type: K, listener: (this: HTMLCbpBannerElement, ev: CbpBannerCustomEvent<HTMLCbpBannerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpBannerElement: {
        prototype: HTMLCbpBannerElement;
        new (): HTMLCbpBannerElement;
    };
    /**
     * 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.
     */
    interface HTMLCbpBreadcrumbElement extends Components.CbpBreadcrumb, HTMLStencilElement {
    }
    var HTMLCbpBreadcrumbElement: {
        prototype: HTMLCbpBreadcrumbElement;
        new (): HTMLCbpBreadcrumbElement;
    };
    interface HTMLCbpButtonElementEventMap {
        "buttonClick": any;
        "componentLoad": any;
    }
    /**
     * 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.
     */
    interface HTMLCbpButtonElement extends Components.CbpButton, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpButtonElementEventMap>(type: K, listener: (this: HTMLCbpButtonElement, ev: CbpButtonCustomEvent<HTMLCbpButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpButtonElementEventMap>(type: K, listener: (this: HTMLCbpButtonElement, ev: CbpButtonCustomEvent<HTMLCbpButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpButtonElement: {
        prototype: HTMLCbpButtonElement;
        new (): HTMLCbpButtonElement;
    };
    /**
     * The Card component is a visual treatment for a container meant for similarly-sized, repeated chunks of content.
     */
    interface HTMLCbpCardElement extends Components.CbpCard, HTMLStencilElement {
    }
    var HTMLCbpCardElement: {
        prototype: HTMLCbpCardElement;
        new (): HTMLCbpCardElement;
    };
    /**
     * 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
     */
    interface HTMLCbpCarouselElement extends Components.CbpCarousel, HTMLStencilElement {
    }
    var HTMLCbpCarouselElement: {
        prototype: HTMLCbpCarouselElement;
        new (): HTMLCbpCarouselElement;
    };
    /**
     * The Carousel Item is meant to be slotted into the CBP-Carousel and represents a single 
     * iteration of content for the CBP-Carousel
     */
    interface HTMLCbpCarouselItemElement extends Components.CbpCarouselItem, HTMLStencilElement {
    }
    var HTMLCbpCarouselItemElement: {
        prototype: HTMLCbpCarouselItemElement;
        new (): HTMLCbpCarouselItemElement;
    };
    interface HTMLCbpCheckboxElementEventMap {
        "stateChanged": any;
    }
    /**
     * 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.
     */
    interface HTMLCbpCheckboxElement extends Components.CbpCheckbox, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpCheckboxElementEventMap>(type: K, listener: (this: HTMLCbpCheckboxElement, ev: CbpCheckboxCustomEvent<HTMLCbpCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpCheckboxElementEventMap>(type: K, listener: (this: HTMLCbpCheckboxElement, ev: CbpCheckboxCustomEvent<HTMLCbpCheckboxElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpCheckboxElement: {
        prototype: HTMLCbpCheckboxElement;
        new (): HTMLCbpCheckboxElement;
    };
    interface HTMLCbpChipElementEventMap {
        "chipClick": any;
    }
    /**
     * The Chip component acts like an interactive version of the Tag and is typically used for selecting or filtering.
     */
    interface HTMLCbpChipElement extends Components.CbpChip, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpChipElementEventMap>(type: K, listener: (this: HTMLCbpChipElement, ev: CbpChipCustomEvent<HTMLCbpChipElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpChipElementEventMap>(type: K, listener: (this: HTMLCbpChipElement, ev: CbpChipCustomEvent<HTMLCbpChipElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpChipElement: {
        prototype: HTMLCbpChipElement;
        new (): HTMLCbpChipElement;
    };
    interface HTMLCbpCodeSnippetElementEventMap {
        "copyTextClick": any;
        "toggleShowAllClick": any;
    }
    /**
     * The Code Snippet component is used to display code in a readable format and facilitate copying it.
     */
    interface HTMLCbpCodeSnippetElement extends Components.CbpCodeSnippet, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpCodeSnippetElementEventMap>(type: K, listener: (this: HTMLCbpCodeSnippetElement, ev: CbpCodeSnippetCustomEvent<HTMLCbpCodeSnippetElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpCodeSnippetElementEventMap>(type: K, listener: (this: HTMLCbpCodeSnippetElement, ev: CbpCodeSnippetCustomEvent<HTMLCbpCodeSnippetElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpCodeSnippetElement: {
        prototype: HTMLCbpCodeSnippetElement;
        new (): HTMLCbpCodeSnippetElement;
    };
    /**
     * The Container component is a building block component for wrapping content and providing 
     * visual treatment such as a background image or color.
     */
    interface HTMLCbpContainerElement extends Components.CbpContainer, HTMLStencilElement {
    }
    var HTMLCbpContainerElement: {
        prototype: HTMLCbpContainerElement;
        new (): HTMLCbpContainerElement;
    };
    interface HTMLCbpDialogElementEventMap {
        "dialogOpen": any;
        "dialogClose": any;
    }
    /**
     * 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.
     */
    interface HTMLCbpDialogElement extends Components.CbpDialog, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpDialogElementEventMap>(type: K, listener: (this: HTMLCbpDialogElement, ev: CbpDialogCustomEvent<HTMLCbpDialogElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpDialogElementEventMap>(type: K, listener: (this: HTMLCbpDialogElement, ev: CbpDialogCustomEvent<HTMLCbpDialogElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpDialogElement: {
        prototype: HTMLCbpDialogElement;
        new (): HTMLCbpDialogElement;
    };
    interface HTMLCbpDotIndicatorElementEventMap {
        "navigateCollection": any;
    }
    interface HTMLCbpDotIndicatorElement extends Components.CbpDotIndicator, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpDotIndicatorElementEventMap>(type: K, listener: (this: HTMLCbpDotIndicatorElement, ev: CbpDotIndicatorCustomEvent<HTMLCbpDotIndicatorElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpDotIndicatorElementEventMap>(type: K, listener: (this: HTMLCbpDotIndicatorElement, ev: CbpDotIndicatorCustomEvent<HTMLCbpDotIndicatorElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpDotIndicatorElement: {
        prototype: HTMLCbpDotIndicatorElement;
        new (): HTMLCbpDotIndicatorElement;
    };
    interface HTMLCbpDrawerElementEventMap {
        "drawerOpen": any;
        "drawerClose": any;
    }
    /**
     * 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.
     */
    interface HTMLCbpDrawerElement extends Components.CbpDrawer, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpDrawerElementEventMap>(type: K, listener: (this: HTMLCbpDrawerElement, ev: CbpDrawerCustomEvent<HTMLCbpDrawerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpDrawerElementEventMap>(type: K, listener: (this: HTMLCbpDrawerElement, ev: CbpDrawerCustomEvent<HTMLCbpDrawerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpDrawerElement: {
        prototype: HTMLCbpDrawerElement;
        new (): HTMLCbpDrawerElement;
    };
    interface HTMLCbpDropdownElementEventMap {
        "valueChange": any;
        "createItem": any;
        "filterKeypress": any;
        "populateCombobox": any;
    }
    /**
     * 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.
     */
    interface HTMLCbpDropdownElement extends Components.CbpDropdown, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpDropdownElementEventMap>(type: K, listener: (this: HTMLCbpDropdownElement, ev: CbpDropdownCustomEvent<HTMLCbpDropdownElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpDropdownElementEventMap>(type: K, listener: (this: HTMLCbpDropdownElement, ev: CbpDropdownCustomEvent<HTMLCbpDropdownElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpDropdownElement: {
        prototype: HTMLCbpDropdownElement;
        new (): HTMLCbpDropdownElement;
    };
    interface HTMLCbpDropdownItemElementEventMap {
        "dropdownItemClick": any;
    }
    /**
     * The Dropdown Item represents an individual option for the Dropdown, similar to an option in a
     * native `select` but with more flexibility.
     */
    interface HTMLCbpDropdownItemElement extends Components.CbpDropdownItem, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpDropdownItemElementEventMap>(type: K, listener: (this: HTMLCbpDropdownItemElement, ev: CbpDropdownItemCustomEvent<HTMLCbpDropdownItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpDropdownItemElementEventMap>(type: K, listener: (this: HTMLCbpDropdownItemElement, ev: CbpDropdownItemCustomEvent<HTMLCbpDropdownItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpDropdownItemElement: {
        prototype: HTMLCbpDropdownItemElement;
        new (): HTMLCbpDropdownItemElement;
    };
    interface HTMLCbpExpandElementEventMap {
        "expandClick": any;
    }
    /**
     * 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.
     */
    interface HTMLCbpExpandElement extends Components.CbpExpand, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpExpandElementEventMap>(type: K, listener: (this: HTMLCbpExpandElement, ev: CbpExpandCustomEvent<HTMLCbpExpandElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpExpandElementEventMap>(type: K, listener: (this: HTMLCbpExpandElement, ev: CbpExpandCustomEvent<HTMLCbpExpandElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpExpandElement: {
        prototype: HTMLCbpExpandElement;
        new (): HTMLCbpExpandElement;
    };
    interface HTMLCbpFileInputElementEventMap {
        "valueChange": any;
    }
    /**
     * 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.
     */
    interface HTMLCbpFileInputElement extends Components.CbpFileInput, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpFileInputElementEventMap>(type: K, listener: (this: HTMLCbpFileInputElement, ev: CbpFileInputCustomEvent<HTMLCbpFileInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpFileInputElementEventMap>(type: K, listener: (this: HTMLCbpFileInputElement, ev: CbpFileInputCustomEvent<HTMLCbpFileInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpFileInputElement: {
        prototype: HTMLCbpFileInputElement;
        new (): HTMLCbpFileInputElement;
    };
    /**
     * 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.
     */
    interface HTMLCbpFlexElement extends Components.CbpFlex, HTMLStencilElement {
    }
    var HTMLCbpFlexElement: {
        prototype: HTMLCbpFlexElement;
        new (): HTMLCbpFlexElement;
    };
    /**
     * The Flex Item component may optionally be used to specify properties of an individual flex item.
     */
    interface HTMLCbpFlexItemElement extends Components.CbpFlexItem, HTMLStencilElement {
    }
    var HTMLCbpFlexItemElement: {
        prototype: HTMLCbpFlexItemElement;
        new (): HTMLCbpFlexItemElement;
    };
    interface HTMLCbpFloatingActionElement extends Components.CbpFloatingAction, HTMLStencilElement {
    }
    var HTMLCbpFloatingActionElement: {
        prototype: HTMLCbpFloatingActionElement;
        new (): HTMLCbpFloatingActionElement;
    };
    /**
     * 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.
     */
    interface HTMLCbpFooterElement extends Components.CbpFooter, HTMLStencilElement {
    }
    var HTMLCbpFooterElement: {
        prototype: HTMLCbpFooterElement;
        new (): HTMLCbpFooterElement;
    };
    interface HTMLCbpFormElementEventMap {
        "suppressedSubmit": any;
    }
    /**
     * 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.
     */
    interface HTMLCbpFormElement extends Components.CbpForm, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpFormElementEventMap>(type: K, listener: (this: HTMLCbpFormElement, ev: CbpFormCustomEvent<HTMLCbpFormElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpFormElementEventMap>(type: K, listener: (this: HTMLCbpFormElement, ev: CbpFormCustomEvent<HTMLCbpFormElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpFormElement: {
        prototype: HTMLCbpFormElement;
        new (): HTMLCbpFormElement;
    };
    interface HTMLCbpFormFieldElementEventMap {
        "valueChange": any;
    }
    /**
     * 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.
     */
    interface HTMLCbpFormFieldElement extends Components.CbpFormField, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpFormFieldElementEventMap>(type: K, listener: (this: HTMLCbpFormFieldElement, ev: CbpFormFieldCustomEvent<HTMLCbpFormFieldElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpFormFieldElementEventMap>(type: K, listener: (this: HTMLCbpFormFieldElement, ev: CbpFormFieldCustomEvent<HTMLCbpFormFieldElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpFormFieldElement: {
        prototype: HTMLCbpFormFieldElement;
        new (): HTMLCbpFormFieldElement;
    };
    /**
     * 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.
     */
    interface HTMLCbpFormFieldWrapperElement extends Components.CbpFormFieldWrapper, HTMLStencilElement {
    }
    var HTMLCbpFormFieldWrapperElement: {
        prototype: HTMLCbpFormFieldWrapperElement;
        new (): HTMLCbpFormFieldWrapperElement;
    };
    /**
     * 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.
     */
    interface HTMLCbpGridElement extends Components.CbpGrid, HTMLStencilElement {
    }
    var HTMLCbpGridElement: {
        prototype: HTMLCbpGridElement;
        new (): HTMLCbpGridElement;
    };
    /**
     * The Grid Item component may optionally be used to specify properties of an individual grid item.
     */
    interface HTMLCbpGridItemElement extends Components.CbpGridItem, HTMLStencilElement {
    }
    var HTMLCbpGridItemElement: {
        prototype: HTMLCbpGridItemElement;
        new (): HTMLCbpGridItemElement;
    };
    interface HTMLCbpHideElementEventMap {
        "hideToggle": any;
    }
    /**
     * The Hide component represents a component-based implementation for programmatically hiding 
     * (or visually hiding) content based on application logic or media query.
     */
    interface HTMLCbpHideElement extends Components.CbpHide, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpHideElementEventMap>(type: K, listener: (this: HTMLCbpHideElement, ev: CbpHideCustomEvent<HTMLCbpHideElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpHideElementEventMap>(type: K, listener: (this: HTMLCbpHideElement, ev: CbpHideCustomEvent<HTMLCbpHideElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpHideElement: {
        prototype: HTMLCbpHideElement;
        new (): HTMLCbpHideElement;
    };
    /**
     * 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.
     */
    interface HTMLCbpIconElement extends Components.CbpIcon, HTMLStencilElement {
    }
    var HTMLCbpIconElement: {
        prototype: HTMLCbpIconElement;
        new (): HTMLCbpIconElement;
    };
    interface HTMLCbpLinkElementEventMap {
        "linkClick": any;
    }
    /**
     * The cbp-link component is used to render an anchor or provide consistent styling for a slotted anchor.
     */
    interface HTMLCbpLinkElement extends Components.CbpLink, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpLinkElementEventMap>(type: K, listener: (this: HTMLCbpLinkElement, ev: CbpLinkCustomEvent<HTMLCbpLinkElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpLinkElementEventMap>(type: K, listener: (this: HTMLCbpLinkElement, ev: CbpLinkCustomEvent<HTMLCbpLinkElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpLinkElement: {
        prototype: HTMLCbpLinkElement;
        new (): HTMLCbpLinkElement;
    };
    /**
     * 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.
     */
    interface HTMLCbpListElement extends Components.CbpList, HTMLStencilElement {
    }
    var HTMLCbpListElement: {
        prototype: HTMLCbpListElement;
        new (): HTMLCbpListElement;
    };
    interface HTMLCbpListboxElementEventMap {
        "updateListboxSuggestions": any;
        "valueChange": any;
    }
    /**
     * 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.
     */
    interface HTMLCbpListboxElement extends Components.CbpListbox, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpListboxElementEventMap>(type: K, listener: (this: HTMLCbpListboxElement, ev: CbpListboxCustomEvent<HTMLCbpListboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpListboxElementEventMap>(type: K, listener: (this: HTMLCbpListboxElement, ev: CbpListboxCustomEvent<HTMLCbpListboxElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpListboxElement: {
        prototype: HTMLCbpListboxElement;
        new (): HTMLCbpListboxElement;
    };
    /**
     * The Loader is used as a visual indicator of progress during waiting periods.
     */
    interface HTMLCbpLoaderElement extends Components.CbpLoader, HTMLStencilElement {
    }
    var HTMLCbpLoaderElement: {
        prototype: HTMLCbpLoaderElement;
        new (): HTMLCbpLoaderElement;
    };
    interface HTMLCbpMenuElementEventMap {
        "toggleMenu": any;
    }
    /**
     * A Menu contains additional actions in the form of links or buttons, which can be shown by activating a control.
     */
    interface HTMLCbpMenuElement extends Components.CbpMenu, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpMenuElementEventMap>(type: K, listener: (this: HTMLCbpMenuElement, ev: CbpMenuCustomEvent<HTMLCbpMenuElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpMenuElementEventMap>(type: K, listener: (this: HTMLCbpMenuElement, ev: CbpMenuCustomEvent<HTMLCbpMenuElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpMenuElement: {
        prototype: HTMLCbpMenuElement;
        new (): HTMLCbpMenuElement;
    };
    /**
     * The Menu Item component wraps each individual control (link or button) within the menu.
     */
    interface HTMLCbpMenuItemElement extends Components.CbpMenuItem, HTMLStencilElement {
    }
    var HTMLCbpMenuItemElement: {
        prototype: HTMLCbpMenuItemElement;
        new (): HTMLCbpMenuItemElement;
    };
    /**
     * The Multicol component is a wrapper that invokes a CSS Multi-column layout context, ideal for 
     * using with semantic lists and checklists/radio lists.
     */
    interface HTMLCbpMulticolElement extends Components.CbpMulticol, HTMLStencilElement {
    }
    var HTMLCbpMulticolElement: {
        prototype: HTMLCbpMulticolElement;
        new (): HTMLCbpMulticolElement;
    };
    interface HTMLCbpNavItemElementEventMap {
        "navItemClick": any;
    }
    /**
     * The Nav Item component wraps each individual control (link or button) within the App Header.
     */
    interface HTMLCbpNavItemElement extends Components.CbpNavItem, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpNavItemElementEventMap>(type: K, listener: (this: HTMLCbpNavItemElement, ev: CbpNavItemCustomEvent<HTMLCbpNavItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpNavItemElementEventMap>(type: K, listener: (this: HTMLCbpNavItemElement, ev: CbpNavItemCustomEvent<HTMLCbpNavItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpNavItemElement: {
        prototype: HTMLCbpNavItemElement;
        new (): HTMLCbpNavItemElement;
    };
    /**
     * The Notice component presents persistent information that gives extra insight into a particular content area.
     */
    interface HTMLCbpNoticeElement extends Components.CbpNotice, HTMLStencilElement {
    }
    var HTMLCbpNoticeElement: {
        prototype: HTMLCbpNoticeElement;
        new (): HTMLCbpNoticeElement;
    };
    interface HTMLCbpPaginationElementEventMap {
        "paginationChange": any;
    }
    /**
     * The Pagination component presents a common UI pattern for displaying data sets broken up into smaller, 
     * more consumable (and performant) chunks or "pages."
     */
    interface HTMLCbpPaginationElement extends Components.CbpPagination, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpPaginationElementEventMap>(type: K, listener: (this: HTMLCbpPaginationElement, ev: CbpPaginationCustomEvent<HTMLCbpPaginationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpPaginationElementEventMap>(type: K, listener: (this: HTMLCbpPaginationElement, ev: CbpPaginationCustomEvent<HTMLCbpPaginationElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpPaginationElement: {
        prototype: HTMLCbpPaginationElement;
        new (): HTMLCbpPaginationElement;
    };
    /**
     * A panel is a styled container for displaying information within the main page content area or to either side.
     */
    interface HTMLCbpPanelElement extends Components.CbpPanel, HTMLStencilElement {
    }
    var HTMLCbpPanelElement: {
        prototype: HTMLCbpPanelElement;
        new (): HTMLCbpPanelElement;
    };
    interface HTMLCbpRadioElementEventMap {
        "stateChanged": any;
    }
    /**
     * The Radio component wraps the slotted native form control (`input type="radio"`) and label text, providing cross-browser styling.
     */
    interface HTMLCbpRadioElement extends Components.CbpRadio, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpRadioElementEventMap>(type: K, listener: (this: HTMLCbpRadioElement, ev: CbpRadioCustomEvent<HTMLCbpRadioElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpRadioElementEventMap>(type: K, listener: (this: HTMLCbpRadioElement, ev: CbpRadioCustomEvent<HTMLCbpRadioElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpRadioElement: {
        prototype: HTMLCbpRadioElement;
        new (): HTMLCbpRadioElement;
    };
    interface HTMLCbpResizeObserverElementEventMap {
        "resized": any;
    }
    /**
     * 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.
     */
    interface HTMLCbpResizeObserverElement extends Components.CbpResizeObserver, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpResizeObserverElementEventMap>(type: K, listener: (this: HTMLCbpResizeObserverElement, ev: CbpResizeObserverCustomEvent<HTMLCbpResizeObserverElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpResizeObserverElementEventMap>(type: K, listener: (this: HTMLCbpResizeObserverElement, ev: CbpResizeObserverCustomEvent<HTMLCbpResizeObserverElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpResizeObserverElement: {
        prototype: HTMLCbpResizeObserverElement;
        new (): HTMLCbpResizeObserverElement;
    };
    /**
     * The Section component represents a generic block that may be used for semantic meaning or as 
     * a generic container for styling.
     */
    interface HTMLCbpSectionElement extends Components.CbpSection, HTMLStencilElement {
    }
    var HTMLCbpSectionElement: {
        prototype: HTMLCbpSectionElement;
        new (): HTMLCbpSectionElement;
    };
    interface HTMLCbpSegmentedButtonGroupElementEventMap {
        "segmentedButtonGroupClick": any;
    }
    /**
     * The Segmented Button Group component wraps multiple buttons and can be used as a multi-option 
     * toggle or group of controls.
     */
    interface HTMLCbpSegmentedButtonGroupElement extends Components.CbpSegmentedButtonGroup, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpSegmentedButtonGroupElementEventMap>(type: K, listener: (this: HTMLCbpSegmentedButtonGroupElement, ev: CbpSegmentedButtonGroupCustomEvent<HTMLCbpSegmentedButtonGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpSegmentedButtonGroupElementEventMap>(type: K, listener: (this: HTMLCbpSegmentedButtonGroupElement, ev: CbpSegmentedButtonGroupCustomEvent<HTMLCbpSegmentedButtonGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpSegmentedButtonGroupElement: {
        prototype: HTMLCbpSegmentedButtonGroupElement;
        new (): HTMLCbpSegmentedButtonGroupElement;
    };
    /**
     * 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.
     */
    interface HTMLCbpSkipNavElement extends Components.CbpSkipNav, HTMLStencilElement {
    }
    var HTMLCbpSkipNavElement: {
        prototype: HTMLCbpSkipNavElement;
        new (): HTMLCbpSkipNavElement;
    };
    interface HTMLCbpSliderElementEventMap {
        "valueChange": any;
    }
    /**
     * The Slider component allows for the selection of a value within a range, styled to design system specifications.
     */
    interface HTMLCbpSliderElement extends Components.CbpSlider, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpSliderElementEventMap>(type: K, listener: (this: HTMLCbpSliderElement, ev: CbpSliderCustomEvent<HTMLCbpSliderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpSliderElementEventMap>(type: K, listener: (this: HTMLCbpSliderElement, ev: CbpSliderCustomEvent<HTMLCbpSliderElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpSliderElement: {
        prototype: HTMLCbpSliderElement;
        new (): HTMLCbpSliderElement;
    };
    /**
     * 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.
     */
    interface HTMLCbpStructuredListElement extends Components.CbpStructuredList, HTMLStencilElement {
    }
    var HTMLCbpStructuredListElement: {
        prototype: HTMLCbpStructuredListElement;
        new (): HTMLCbpStructuredListElement;
    };
    /**
     * 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.
     */
    interface HTMLCbpStructuredListItemElement extends Components.CbpStructuredListItem, HTMLStencilElement {
    }
    var HTMLCbpStructuredListItemElement: {
        prototype: HTMLCbpStructuredListItemElement;
        new (): HTMLCbpStructuredListItemElement;
    };
    /**
     * Sub-Navigation (Subnav) is meant to be used as a secondary, vertical navigation.
     */
    interface HTMLCbpSubnavElement extends Components.CbpSubnav, HTMLStencilElement {
    }
    var HTMLCbpSubnavElement: {
        prototype: HTMLCbpSubnavElement;
        new (): HTMLCbpSubnavElement;
    };
    interface HTMLCbpSubnavItemElementEventMap {
        "toggleSubnavItem": any;
        "subnavItemClick": any;
    }
    /**
     * The Subnav Item component represents a single navigation link and can also be nested multiple levels to convey a site/navigation hierarchy.
     */
    interface HTMLCbpSubnavItemElement extends Components.CbpSubnavItem, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpSubnavItemElementEventMap>(type: K, listener: (this: HTMLCbpSubnavItemElement, ev: CbpSubnavItemCustomEvent<HTMLCbpSubnavItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpSubnavItemElementEventMap>(type: K, listener: (this: HTMLCbpSubnavItemElement, ev: CbpSubnavItemCustomEvent<HTMLCbpSubnavItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpSubnavItemElement: {
        prototype: HTMLCbpSubnavItemElement;
        new (): HTMLCbpSubnavItemElement;
    };
    interface HTMLCbpTabElementEventMap {
        "tabLoaded": any;
        "tabClicked": any;
    }
    /**
     * The Tab component represents an individual tab control within a tab set.
     */
    interface HTMLCbpTabElement extends Components.CbpTab, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpTabElementEventMap>(type: K, listener: (this: HTMLCbpTabElement, ev: CbpTabCustomEvent<HTMLCbpTabElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpTabElementEventMap>(type: K, listener: (this: HTMLCbpTabElement, ev: CbpTabCustomEvent<HTMLCbpTabElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpTabElement: {
        prototype: HTMLCbpTabElement;
        new (): HTMLCbpTabElement;
    };
    /**
     * The Tab Panel component is a wrapper representing a tabpanel role and containing the content to be progressively disclosed.
     */
    interface HTMLCbpTabPanelElement extends Components.CbpTabPanel, HTMLStencilElement {
    }
    var HTMLCbpTabPanelElement: {
        prototype: HTMLCbpTabPanelElement;
        new (): HTMLCbpTabPanelElement;
    };
    interface HTMLCbpTableElementEventMap {
        "tableSort": any;
    }
    /**
     * 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.
     */
    interface HTMLCbpTableElement extends Components.CbpTable, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpTableElementEventMap>(type: K, listener: (this: HTMLCbpTableElement, ev: CbpTableCustomEvent<HTMLCbpTableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpTableElementEventMap>(type: K, listener: (this: HTMLCbpTableElement, ev: CbpTableCustomEvent<HTMLCbpTableElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpTableElement: {
        prototype: HTMLCbpTableElement;
        new (): HTMLCbpTableElement;
    };
    /**
     * 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.
     */
    interface HTMLCbpTabsElement extends Components.CbpTabs, HTMLStencilElement {
    }
    var HTMLCbpTabsElement: {
        prototype: HTMLCbpTabsElement;
        new (): HTMLCbpTabsElement;
    };
    /**
     * The Tag component is a non-interactive visual treatment for text, typically representing labels, keywords, or search terms.
     */
    interface HTMLCbpTagElement extends Components.CbpTag, HTMLStencilElement {
    }
    var HTMLCbpTagElement: {
        prototype: HTMLCbpTagElement;
        new (): HTMLCbpTagElement;
    };
    /**
     * The Toast component displays a brief, non-intrusive message that appears on a user interface to 
     * provide feedback about an action or status update.
     */
    interface HTMLCbpToastElement extends Components.CbpToast, HTMLStencilElement {
    }
    var HTMLCbpToastElement: {
        prototype: HTMLCbpToastElement;
        new (): HTMLCbpToastElement;
    };
    interface HTMLCbpToggleElementEventMap {
        "toggleClick": any;
    }
    /**
     * The Toggle component is a visual variant of a Boolean selection form control (checkbox), 
     * representing an on/off toggle switch.
     */
    interface HTMLCbpToggleElement extends Components.CbpToggle, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpToggleElementEventMap>(type: K, listener: (this: HTMLCbpToggleElement, ev: CbpToggleCustomEvent<HTMLCbpToggleElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpToggleElementEventMap>(type: K, listener: (this: HTMLCbpToggleElement, ev: CbpToggleCustomEvent<HTMLCbpToggleElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpToggleElement: {
        prototype: HTMLCbpToggleElement;
        new (): HTMLCbpToggleElement;
    };
    /**
     * The Tooltip component allows for the disclosure of supplemental, non-essential information via a triggering element.
     */
    interface HTMLCbpTooltipElement extends Components.CbpTooltip, HTMLStencilElement {
    }
    var HTMLCbpTooltipElement: {
        prototype: HTMLCbpTooltipElement;
        new (): HTMLCbpTooltipElement;
    };
    interface HTMLCbpTreeviewElementEventMap {
        "valueChange": any;
    }
    interface HTMLCbpTreeviewElement extends Components.CbpTreeview, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpTreeviewElementEventMap>(type: K, listener: (this: HTMLCbpTreeviewElement, ev: CbpTreeviewCustomEvent<HTMLCbpTreeviewElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpTreeviewElementEventMap>(type: K, listener: (this: HTMLCbpTreeviewElement, ev: CbpTreeviewCustomEvent<HTMLCbpTreeviewElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpTreeviewElement: {
        prototype: HTMLCbpTreeviewElement;
        new (): HTMLCbpTreeviewElement;
    };
    interface HTMLCbpTreeviewItemElementEventMap {
        "updateTreeviewItemParent": any;
    }
    interface HTMLCbpTreeviewItemElement extends Components.CbpTreeviewItem, HTMLStencilElement {
        addEventListener<K extends keyof HTMLCbpTreeviewItemElementEventMap>(type: K, listener: (this: HTMLCbpTreeviewItemElement, ev: CbpTreeviewItemCustomEvent<HTMLCbpTreeviewItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLCbpTreeviewItemElementEventMap>(type: K, listener: (this: HTMLCbpTreeviewItemElement, ev: CbpTreeviewItemCustomEvent<HTMLCbpTreeviewItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLCbpTreeviewItemElement: {
        prototype: HTMLCbpTreeviewItemElement;
        new (): HTMLCbpTreeviewItemElement;
    };
    /**
     * The Typography component encapsulates predefined styles for different kinds of text that makes 
     * up a website, merging design language with CSS and HTML implementations.
     */
    interface HTMLCbpTypographyElement extends Components.CbpTypography, HTMLStencilElement {
    }
    var HTMLCbpTypographyElement: {
        prototype: HTMLCbpTypographyElement;
        new (): HTMLCbpTypographyElement;
    };
    /**
     * The Universal Header component establishes CBP branding, displaying the seal in a standard DHS blue header.
     */
    interface HTMLCbpUniversalHeaderElement extends Components.CbpUniversalHeader, HTMLStencilElement {
    }
    var HTMLCbpUniversalHeaderElement: {
        prototype: HTMLCbpUniversalHeaderElement;
        new (): HTMLCbpUniversalHeaderElement;
    };
    /**
     * 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.
     */
    interface HTMLCbpUsaBannerElement extends Components.CbpUsaBanner, HTMLStencilElement {
    }
    var HTMLCbpUsaBannerElement: {
        prototype: HTMLCbpUsaBannerElement;
        new (): HTMLCbpUsaBannerElement;
    };
    interface HTMLElementTagNameMap {
        "cbp-accordion": HTMLCbpAccordionElement;
        "cbp-accordion-item": HTMLCbpAccordionItemElement;
        "cbp-action-bar": HTMLCbpActionBarElement;
        "cbp-app": HTMLCbpAppElement;
        "cbp-app-header": HTMLCbpAppHeaderElement;
        "cbp-badge": HTMLCbpBadgeElement;
        "cbp-banner": HTMLCbpBannerElement;
        "cbp-breadcrumb": HTMLCbpBreadcrumbElement;
        "cbp-button": HTMLCbpButtonElement;
        "cbp-card": HTMLCbpCardElement;
        "cbp-carousel": HTMLCbpCarouselElement;
        "cbp-carousel-item": HTMLCbpCarouselItemElement;
        "cbp-checkbox": HTMLCbpCheckboxElement;
        "cbp-chip": HTMLCbpChipElement;
        "cbp-code-snippet": HTMLCbpCodeSnippetElement;
        "cbp-container": HTMLCbpContainerElement;
        "cbp-dialog": HTMLCbpDialogElement;
        "cbp-dot-indicator": HTMLCbpDotIndicatorElement;
        "cbp-drawer": HTMLCbpDrawerElement;
        "cbp-dropdown": HTMLCbpDropdownElement;
        "cbp-dropdown-item": HTMLCbpDropdownItemElement;
        "cbp-expand": HTMLCbpExpandElement;
        "cbp-file-input": HTMLCbpFileInputElement;
        "cbp-flex": HTMLCbpFlexElement;
        "cbp-flex-item": HTMLCbpFlexItemElement;
        "cbp-floating-action": HTMLCbpFloatingActionElement;
        "cbp-footer": HTMLCbpFooterElement;
        "cbp-form": HTMLCbpFormElement;
        "cbp-form-field": HTMLCbpFormFieldElement;
        "cbp-form-field-wrapper": HTMLCbpFormFieldWrapperElement;
        "cbp-grid": HTMLCbpGridElement;
        "cbp-grid-item": HTMLCbpGridItemElement;
        "cbp-hide": HTMLCbpHideElement;
        "cbp-icon": HTMLCbpIconElement;
        "cbp-link": HTMLCbpLinkElement;
        "cbp-list": HTMLCbpListElement;
        "cbp-listbox": HTMLCbpListboxElement;
        "cbp-loader": HTMLCbpLoaderElement;
        "cbp-menu": HTMLCbpMenuElement;
        "cbp-menu-item": HTMLCbpMenuItemElement;
        "cbp-multicol": HTMLCbpMulticolElement;
        "cbp-nav-item": HTMLCbpNavItemElement;
        "cbp-notice": HTMLCbpNoticeElement;
        "cbp-pagination": HTMLCbpPaginationElement;
        "cbp-panel": HTMLCbpPanelElement;
        "cbp-radio": HTMLCbpRadioElement;
        "cbp-resize-observer": HTMLCbpResizeObserverElement;
        "cbp-section": HTMLCbpSectionElement;
        "cbp-segmented-button-group": HTMLCbpSegmentedButtonGroupElement;
        "cbp-skip-nav": HTMLCbpSkipNavElement;
        "cbp-slider": HTMLCbpSliderElement;
        "cbp-structured-list": HTMLCbpStructuredListElement;
        "cbp-structured-list-item": HTMLCbpStructuredListItemElement;
        "cbp-subnav": HTMLCbpSubnavElement;
        "cbp-subnav-item": HTMLCbpSubnavItemElement;
        "cbp-tab": HTMLCbpTabElement;
        "cbp-tab-panel": HTMLCbpTabPanelElement;
        "cbp-table": HTMLCbpTableElement;
        "cbp-tabs": HTMLCbpTabsElement;
        "cbp-tag": HTMLCbpTagElement;
        "cbp-toast": HTMLCbpToastElement;
        "cbp-toggle": HTMLCbpToggleElement;
        "cbp-tooltip": HTMLCbpTooltipElement;
        "cbp-treeview": HTMLCbpTreeviewElement;
        "cbp-treeview-item": HTMLCbpTreeviewItemElement;
        "cbp-typography": HTMLCbpTypographyElement;
        "cbp-universal-header": HTMLCbpUniversalHeaderElement;
        "cbp-usa-banner": HTMLCbpUsaBannerElement;
    }
}
declare namespace LocalJSX {
    /**
     * 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.
     */
    interface CbpAccordion {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Specifies whether multiple accordion items can be open at the same time. Defaults to false.
         */
        "multiple"?: boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    /**
     * 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.
     */
    interface CbpAccordionItem {
        /**
          * Specifies an optional color variant of the accordion item.
         */
        "color"?: 'danger';
        /**
          * Specifies an optional `id` for the accordion item heading, also used to generate an `id` for  the accordion item content wrapper. If this property is not specified, a unique string will  automatically be generated.
         */
        "headingId"?: string;
        /**
          * The heading level of the accordion item control. Defaults to h3.
         */
        "headingLevel"?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
        /**
          * The accordion control label.
         */
        "label"?: string;
        /**
          * A custom event emitted when the accordion item control is activated.
         */
        "onAccordionItemClick"?: (event: CbpAccordionItemCustomEvent<any>) => void;
        /**
          * Specifies whether the accordion is open.
         */
        "open"?: boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    /**
     * 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.
     */
    interface CbpActionBar {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * Specifies whether the action bar is inline or floating. Defaults to inline.
         */
        "variant"?: 'inline' | 'floating' | 'sticky';
    }
    /**
     * 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.
     */
    interface CbpApp {
        /**
          * Specifies the application name for logging with debug information.
         */
        "appName"?: string;
        /**
          * Specifies the application version for logging with debug information. This may be automated by importing it from the application's package.json, if used.
         */
        "appVersion"?: string;
        /**
          * Turning on debug mode will log the version of the design system package and Stencil version it was built with to the console, in addition to application name and version, if specified.
         */
        "debug"?: boolean;
        /**
          * Optionally specifies light/dark mode. This is only needed if the application can change the theme separate from OS settings.
         */
        "theme"?: "light" | "dark" | "system";
    }
    interface CbpAppHeader {
        /**
          * A custom event emitted in accordance with the native input's onInput event.
         */
        "onSearchInput"?: (event: CbpAppHeaderCustomEvent<any>) => void;
        /**
          * A custom event emitted in accordance with the native search form's submit event.
         */
        "onSearchSubmit"?: (event: CbpAppHeaderCustomEvent<any>) => void;
        /**
          * Specifies if there will be a slotted input for global search
         */
        "search"?: boolean;
        /**
          * Specifies the action attribute for the search form
         */
        "searchAction"?: string;
        /**
          * Specifies the method attribute for the search form
         */
        "searchMethod"?: string;
        /**
          * Specifies the id of the drawer to be launched
         */
        "subnavDrawerId"?: string;
    }
    /**
     * The Badge component is generally used for emphasizing a numeric characteristic of an object 
     * (e.g., the number of unread items in a folder).
     */
    interface CbpBadge {
        /**
          * Specifies a color variant. Currently the only variant supported is "danger".
         */
        "color"?: "default"| "danger";
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    /**
     * The Banner is a container spanning the entire viewport meant to highlight urgent or important content.
     */
    interface CbpBanner {
        /**
          * Specifies a color variant for the banner.
         */
        "color"?: "info";
        /**
          * A custom event emitted with the Banner is dismissed.
         */
        "onBannerDismiss"?: (event: CbpBannerCustomEvent<any>) => void;
    }
    /**
     * 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.
     */
    interface CbpBreadcrumb {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Specifies a character as a divider between breadcrumb links. Defaults to "/".
         */
        "divider"?: string;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    /**
     * 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.
     */
    interface CbpButton {
        /**
          * Specifies an accessible label for the button/link as an `aria-label` when the button does not contain label text or a sufficiently unique label. This text overrides the default label and is not additive to it.
         */
        "accessibilityText"?: string;
        /**
          * The color of the button: primary, secondary, or danger. Defaults to "primary."
         */
        "color"?: 'primary' | 'secondary' | 'danger';
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Optionally specify the ID of the control here, which is used to generate related pattern node IDs and associate everything for accessibility
         */
        "controlId"?: string;
        /**
          * Specifies the DOM element that the button controls and results in the `aria-controls` attribute rendered on the button with the specified value.
         */
        "controls"?: string;
        /**
          * Marks the rendered button/link in a disabled state when specified.
         */
        "disabled"?: boolean;
        /**
          * The `download` attribute of a link button; when present tells the browser to download the specified href URI instead of viewing or navigating to it.
         */
        "download"?: boolean | string;
        /**
          * Specifies if a controlled UI widget is expanded and results in `aria-pressed="true|false"` being placed  on the button when specified. This property is usually used for progressive disclosure patterns such as  accordions, menus, expand/collapse, etc., where focus remains on the control after the user action.
         */
        "expanded"?: "true" | "false";
        /**
          * The visual fill of the button: solid, outline, or ghost. Defaults to "solid."
         */
        "fill"?: 'solid' | 'outline' | 'ghost';
        /**
          * Specifies the (min-)height of the button (in CSS units) when different from the default size.
         */
        "height"?: string;
        /**
          * The `href` attribute of a link button.
         */
        "href"?: string;
        /**
          * The `name` attribute of the button, which is passed as part of formData (as a key) for the the pressed submit button.
         */
        "name"?: string;
        /**
          * A custom event emitted when the click event occurs for either a rendered button or anchor/link.
         */
        "onButtonClick"?: (event: CbpButtonCustomEvent<any>) => void;
        /**
          * A custom event emitted when the component has completed loading and its internal lifecycles.
         */
        "onComponentLoad"?: (event: CbpButtonCustomEvent<any>) => void;
        /**
          * Specifies if the button is pressed and results in `aria-pressed="true|false"` being placed on the  button when specified. Only valid on actual `button` elements.
         */
        "pressed"?: "true" | "false";
        /**
          * The `rel` attribute of a link button.
         */
        "rel"?: string;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * Specifies whether the button is a true button element or "link button."
         */
        "tag"?: 'button' | 'a';
        /**
          * The `target` attribute of a link button.
         */
        "target"?: string;
        /**
          * The property on the target element being toggled by the button/control (e.g., "open").
         */
        "targetProp"?: string;
        /**
          * The `type` attribute of the button: button, submit, or reset. Defaults to "button."
         */
        "type"?: 'button' | 'submit' | 'reset';
        /**
          * The `value` attribute of the button, which is passed as part of formData (as a value) for the the pressed submit button.
         */
        "value"?: string;
        /**
          * Specifies a variant of the buttons, such as square for buttons with only an icon and call-to-action button.
         */
        "variant"?: 'square' | 'circle' | 'cta';
        /**
          * Specifies the (min-)width of the button (in CSS units) when different from the default size.
         */
        "width"?: string;
    }
    /**
     * The Card component is a visual treatment for a container meant for similarly-sized, repeated chunks of content.
     */
    interface CbpCard {
        /**
          * Optionally specifies a card color (different from the default color) based on predefined design token values.
         */
        "color"?: "info" | "success" | "warning" | "danger";
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Marks the rendered card in a disabled state when specified.
         */
        "disabled"?: boolean;
        /**
          * Specifies the `href` value for the "clickable" interactive cards.
         */
        "href"?: string;
        /**
          * Specifies the interactivity of the card.
         */
        "interactive"?: "clickable" | "selectable" | "radio";
        /**
          * When present, the card will stretch vertically to fill its parent container; most useful when placed in an equally sized grid or row of cards.
         */
        "stretch"?: boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * Specifies optional variants with difference from the default card.
         */
        "variant"?: "banner" | "flag";
    }
    /**
     * 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
     */
    interface CbpCarousel {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * used to set the current for the carousel
         */
        "current"?: number;
        /**
          * used to set the height (in CSS units or content values) of the carousel
         */
        "height"?: string;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * used to set the width (in CSS units or content values) of the carousel
         */
        "width"?: string;
    }
    /**
     * The Carousel Item is meant to be slotted into the CBP-Carousel and represents a single 
     * iteration of content for the CBP-Carousel
     */
    interface CbpCarouselItem {
        /**
          * used to set the height (in CSS units or content values) of the carousel-item
         */
        "height"?: string;
        /**
          * used to set the width (in CSS units or content values) of the carousel-item
         */
        "width"?: string;
    }
    /**
     * 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.
     */
    interface CbpCheckbox {
        /**
          * Marks the checkbox as checked by default when specified.
         */
        "checked"?: boolean;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Marks the checkbox in a disabled state when specified.
         */
        "disabled"?: boolean;
        /**
          * Optionally specify the ID of the checkbox input here, which is used to generate related pattern node IDs and associate everything for accessibility
         */
        "fieldId"?: string;
        /**
          * Marks the checkbox as checked by default when specified.
         */
        "indeterminate"?: boolean;
        /**
          * The `name` attribute of the checkbox, which is passed as part of formData (as a key) only when the checkbox is checked.
         */
        "name"?: string;
        /**
          * A custom event emitted when the checked state changes due to user interaction.
         */
        "onStateChanged"?: (event: CbpCheckboxCustomEvent<any>) => void;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * Optionally set the `value` attribute of the checkbox at the component level. Not needed if the slotted checkbox has a value.
         */
        "value"?: string;
    }
    /**
     * The Chip component acts like an interactive version of the Tag and is typically used for selecting or filtering.
     */
    interface CbpChip {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Marks the rendered button/link in a disabled state when specified.
         */
        "disabled"?: boolean;
        /**
          * Specifies the `name` attribute of the rendered button
         */
        "name"?: string;
        /**
          * A custom event emitted when the chip is activated/toggled.
         */
        "onChipClick"?: (event: CbpChipCustomEvent<any>) => void;
        /**
          * Specifies the pressed state of the button and `aria-pressed` attribute of the rendered button
         */
        "pressed"?: boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * Specifies the `value` attribute of the rendered button
         */
        "value"?: string;
    }
    /**
     * The Code Snippet component is used to display code in a readable format and facilitate copying it.
     */
    interface CbpCodeSnippet {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Specifies the height (in CSS units) for a multiple line block variant while not expanded.
         */
        "height"?: string;
        /**
          * Emits a custom event when the "Copy" button is activated, copying the code to the clipboard.
         */
        "onCopyTextClick"?: (event: CbpCodeSnippetCustomEvent<any>) => void;
        /**
          * Emits a custom event when the the "Show More/Less" control is activated (for code blocks overflowing the specified height).
         */
        "onToggleShowAllClick"?: (event: CbpCodeSnippetCustomEvent<any>) => void;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * Specifies inline or block layouts of the code snippet. Defaults to inline.
         */
        "variant"?: 'inline' | 'block';
    }
    /**
     * The Container component is a building block component for wrapping content and providing 
     * visual treatment such as a background image or color.
     */
    interface CbpContainer {
        /**
          * Specifies the CSS background of the parent container, which could be a solid color, an image, a gradient, or any combination (or multiples) achievable via the CSS `background` property.
         */
        "background"?: string;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * Specifies the text color for content within the container, since it could be on any background.
         */
        "textColor"?: string;
        /**
          * Specifies the width of the inner container area.
         */
        "width"?: string;
    }
    /**
     * 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.
     */
    interface CbpDialog {
        /**
          * Creates an accessible label for the dialog.
         */
        "accessibilityText"?: string;
        /**
          * Optionally specifies a dialog color (different from the default color) based on predefined design token values.
         */
        "color"?: 'info' | 'success' | 'warning' | 'danger';
        /**
          * Specifies the dialog height in CSS units (preferably relative units such as rem).
         */
        "height"?: string;
        /**
          * Custom event fired when the dialog is closed.
         */
        "onDialogClose"?: (event: CbpDialogCustomEvent<any>) => void;
        /**
          * Custom event fired when the dialog is opened.
         */
        "onDialogOpen"?: (event: CbpDialogCustomEvent<any>) => void;
        /**
          * When set, specifies that the dialog is open
         */
        "open"?: boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * Specifies a unique `ID` for the dialog, used to wire up the controls and accessibility features.
         */
        "uid"?: string;
        /**
          * Specifies the dialog width in CSS units (preferably relative units such as rem).
         */
        "width"?: string;
    }
    interface CbpDotIndicator {
        /**
          * the currently active dot
         */
        "current"?: number;
        /**
          * unit of measure for what the dot indicator is measuring
         */
        "itemName"?: string;
        /**
          * Length of index dot-indicator is tracking
         */
        "items"?: number;
        /**
          * Custom event emitted when the Dot-indicator changes active indicator
         */
        "onNavigateCollection"?: (event: CbpDotIndicatorCustomEvent<any>) => void;
    }
    /**
     * 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.
     */
    interface CbpDrawer {
        /**
          * Creates an accessible label for the drawer (dialog).
         */
        "accessibilityText"?: string;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Custom event fired when the drawer is closed.
         */
        "onDrawerClose"?: (event: CbpDrawerCustomEvent<any>) => void;
        /**
          * Custom event fired when the drawer is opened.
         */
        "onDrawerOpen"?: (event: CbpDrawerCustomEvent<any>) => void;
        /**
          * When set, specifies that the drawer is open
         */
        "open"?: boolean;
        /**
          * Specifies a valid CSS media query (preferably using relative units), when met will hide the wrapped content using display: none. E.g., `min-width:64em`
         */
        "persistAt"?: string;
        /**
          * Specifies the position of the drawer (left or right)
         */
        "position"?: 'left' | 'right';
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * Specifies a unique `ID` for the drawer, used to wire up the controls and accessibility features.
         */
        "uid"?: string;
    }
    /**
     * 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.
     */
    interface CbpDropdown {
        /**
          * Indicates that the filtering will be performed by asynchronous calls (handled by application logic).
         */
        "async"?: boolean;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Specifies that when an exact match is not found for a search string (for combobox functionality), an option to create a new item is presented.
         */
        "create"?: boolean;
        /**
          * Turns on debug mode, since the dropdown is complex and has complex integration concerns. (This prop is temporary and will be removed)
         */
        "debug"?: boolean;
        /**
          * Specifies that the field is disabled. Primarily controlled by the parent `cbp-form-field` component.
         */
        "disabled"?: boolean;
        /**
          * Specifies that the field has an error (and sets aria-invalid accordingly). Primarily controlled by the  parent `cbp-form-field` component.
         */
        "error"?: boolean;
        /**
          * Optionally specify the ID of the visible control here, which is used to generate related  pattern node IDs and associate everything for accessibility.
         */
        "fieldId"?: string;
        /**
          * Specifies whether the dropdown accepts key presses to filter results, enabling combobox functionality.
         */
        "filter"?: boolean;
        /**
          * A JSON object (or stringified JSON) containing an array of labels, values, and optionally selected status.  Labels may contain markup as needed, but in such cases, a value should always be specified explicitly. The expected format is [{"label":"string","value":"string","selected":"boolean (optional"}, ...]
         */
        "items"?: string | object;
        /**
          * Specifies the number of characters need to emit an event to make an API call and return filtered results.  This property is only used when filter=true AND async=true.
         */
        "minimumInputLength"?: number;
        /**
          * Specifies whether multiple selections are supported, in which case checkboxes shall be slotted in accordance  with the design system specified pattern. Defaults to false, which renders a single-select dropdown.
         */
        "multiple"?: boolean;
        /**
          * Specifies the name of the (hidden) form field
         */
        "name"?: string;
        /**
          * A custom event that is fired when the "create item" option is clicked.
         */
        "onCreateItem"?: (event: CbpDropdownCustomEvent<any>) => void;
        /**
          * A custom event that is fired when a key is pressed while filtering a combobox.
         */
        "onFilterKeypress"?: (event: CbpDropdownCustomEvent<any>) => 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"?: (event: CbpDropdownCustomEvent<any>) => void;
        /**
          * A custom event emitted when the a selection is made in the dropdown.
         */
        "onValueChange"?: (event: CbpDropdownCustomEvent<any>) => void;
        /**
          * Specifies whether the dropdown menu is open/visible.
         */
        "open"?: boolean;
        /**
          * Represents placeholder text on the dropdown control, displayed in a distinctive style from the  selected item. Defaults to "Choose Item". Has no effect on multi-selects, as the component manages this text.
         */
        "placeholder"?: string;
        /**
          * Specifies that the field is readonly. Primarily controlled by the parent `cbp-form-field` component.
         */
        "readonly"?: boolean;
        /**
          * Specifies the visible label on the dropdown control of the selected item.  Primarily updated dynamically by the component.
         */
        "selectedLabel"?: string | undefined;
        /**
          * Supports adding inline styles (to the host) as an object. This property is not reactive.
         */
        "sx"?: any;
        /**
          * Specifies the value of the hidden input holding the value (or barring one, the text label)  of the selected item. Primarily updated dynamically by the component.
         */
        "value"?: any;
    }
    /**
     * The Dropdown Item represents an individual option for the Dropdown, similar to an option in a
     * native `select` but with more flexibility.
     */
    interface CbpDropdownItem {
        /**
          * For Internal Use: Specifies the current item (referenced by `aria-activedescendant`) while using keyboard navigation.
         */
        "current"?: boolean;
        "disabled"?: boolean;
        /**
          * Optionally specify the ID of each dropdown item, which is used by the parent dropdown to associate `aria-activedescendant`. If no `itemId` is specified, one will be automatically generated.
         */
        "itemId"?: string;
        /**
          * 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"?: (event: CbpDropdownItemCustomEvent<any>) => void;
        /**
          * Specifies if an item is selected
         */
        "selected"?: boolean;
        /**
          * Specifies an optional value to be passed in the FormData instead of the display text/label.
         */
        "value"?: string;
    }
    /**
     * 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.
     */
    interface CbpExpand {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Specifies an optional `id` for the component item heading, also used to generate an `id` for  the content wrapper. If this property is not specified, a unique string will  automatically be generated.
         */
        "headingId"?: string;
        /**
          * The heading level of the expand item control. Defaults to h3.
         */
        "headingLevel"?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
        /**
          * The component control label.
         */
        "label"?: string;
        /**
          * A custom event emitted when the accordion item control is activated.
         */
        "onExpandClick"?: (event: CbpExpandCustomEvent<any>) => void;
        /**
          * Specifies whether the content is expanded and visible.
         */
        "open"?: boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    /**
     * 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.
     */
    interface CbpFileInput {
        /**
          * Specifies the files types accepted by the file input (may also be set directly on the slotted input).  This property is merely a suggestion to the browser and any file type restrictions should still be  enforced in form validation.
         */
        "accept"?: string;
        /**
          * Specifies the context of the component as it applies to the visual design and whether  it inverts when light/dark mode is toggled.  Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Specifies that the field is disabled. Primarily controlled by the parent `cbp-form-field` component.
         */
        "disabled"?: boolean;
        /**
          * Experimental: Specifies whether the functionality is enhanced over the native web platform file input.  This functionality requires integration with a framework or manual handling of the custom events and will not work with a native form post.
         */
        "enhanced"?: boolean;
        /**
          * Specifies that the field has an error (and sets aria-invalid accordingly). Primarily controlled by the  parent `cbp-form-field` component.
         */
        "error"?: boolean;
        /**
          * Optionally specify the ID of the input here, which is used to generate related pattern  node IDs and associate everything for accessibility.
         */
        "fieldId"?: string;
        /**
          * Specifies whether the file input accepts multiple files rather than a single file  (may also be set directly on the slotted input).
         */
        "multiple"?: boolean;
        /**
          * The `name` attribute of the input, which is passed as part of formData (as a key).
         */
        "name"?: string;
        /**
          * 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"?: (event: CbpFileInputCustomEvent<any>) => void;
        /**
          * Supports passing back status and error messages as an array of objects or stringified JSON  from the application. The array shall be the same length as the current file list. E.g., [ {"status": "error|success|undefined", "message": "string"}, ... ] One could take the valueChange event's detail.value key, which contains an array of File objects,  and add these keys to it before feeding it back to this component via the `status` property.
         */
        "status"?: any;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    /**
     * 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.
     */
    interface CbpFlex {
        /**
          * Specifies the alignment of a flex container's items within the flex container (only when there is extra space in the cross-axis).
         */
        "alignContent"?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch';
        /**
          * Specifies the alignment for all of the flex container’s items along the cross-axis. Defaults to "stretch".
         */
        "alignItems"?: 'auto' | 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline';
        /**
          * Specifies the size at which the flex children are linearized, specified in CSS units (preferably relative units such as rem).
         */
        "breakpoint"?: string;
        /**
          * Not yet implemented
         */
        "contentBreakpoint"?: string;
        /**
          * Specifies how flex items are placed in the flex container by setting the direction of the flex container’s main axis. Defaults to "row" for a horizontal flex context.
         */
        "direction"?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
        /**
          * Specifies the display mode. Defaults to "flex"
         */
        "display"?: 'flex' | 'inline-flex';
        /**
          * Specifies the gap between items in CSS units (preferably relative units such as rem). Accepts a single value for horizontal and vertical gap or two values representing column gap and row gap, respectively.
         */
        "gap"?: string;
        /**
          * Specifies the alignment of flex items along the main axis (of the current line) of the flex container.
         */
        "justifyContent"?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * Specifies the wrapping behavior of the flex children. Browser default behavior is "nowrap".
         */
        "wrap"?: 'nowrap' | 'wrap' | 'wrap-reverse';
    }
    /**
     * The Flex Item component may optionally be used to specify properties of an individual flex item.
     */
    interface CbpFlexItem {
        /**
          * Specifies the alignment of the specific flex item along the cross-axis separate from the parent context.
         */
        "alignSelf"?: "auto" | "stretch" | "flex-start" | "flex-end" | "center" | "baseline";
        /**
          * Specifies a basis (in CSS units or content values) for calculating flex behavior different from the default of "auto" (which usually evaluates to "content").
         */
        "flexBasis"?: string;
        /**
          * Specifies the growth factor the item will grow at relative to other items. Defaults to zero, as flex items do not grow by default.
         */
        "flexGrow"?: number;
        /**
          * Specifies the shrink factor the item will shrink at relative to other items. Defaults to 1, as flex items will shrink at an equal rate by default, taking content size into consideration.
         */
        "flexShrink"?: number;
        /**
          * Specifies an ordinal group value for sorting this flex item within its group. Defaults to zero, which renders the items in DOM order.
         */
        "order"?: number;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    interface CbpFloatingAction {
        /**
          * Sets the bottom position (in CSS units) of the floating action component within the viewport.
         */
        "bottom"?: string;
        /**
          * Sets the left position (in CSS units) of the floating action component within the viewport.
         */
        "left"?: string;
        /**
          * Sets the right position (in CSS units) of the floating action component within the viewport.
         */
        "right"?: string;
        /**
          * Supports adding inline styles (to the host) as an object. This property is not reactive.
         */
        "sx"?: any;
        /**
          * Sets the top position (in CSS units) of the floating action component within the viewport.
         */
        "top"?: string;
    }
    /**
     * 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.
     */
    interface CbpFooter {
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    /**
     * 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.
     */
    interface CbpForm {
        "debug"?: boolean;
        "onSuppressedSubmit"?: (event: CbpFormCustomEvent<any>) => void;
        /**
          * When specified, applies preventDefault() to the submit event and emits a custom event with the formData to hand off to the application.
         */
        "preventSubmit"?: boolean;
    }
    /**
     * 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.
     */
    interface CbpFormField {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Provide additional details about the field, including whether it's required, which is applied to the form field via `aria-describedby`.
         */
        "description"?: string;
        /**
          * Specifies that the field is disabled; sets all form fields and button controls as disabled.
         */
        "disabled"?: boolean;
        /**
          * Specifies that the field has an error (and sets aria-invalid accordingly).
         */
        "error"?: boolean;
        /**
          * Specifies the error message(s) to replace the description text while in an error state.
         */
        "errorMessages"?: string | any;
        /**
          * Optionally specify the ID of the field here, which is used to generate related pattern node IDs and associate everything for accessibility
         */
        "fieldId"?: string;
        /**
          * Specifies that this form field represents a group of (slotted) inputs, such as a radio list, checklist, or related inputs in a compound pattern.
         */
        "group"?: boolean;
        /**
          * Provide a visible/accessible label for the form field/group.
         */
        "label"?: string;
        /**
          * A custom event emitted when the the nested input is changed by user interaction.
         */
        "onValueChange"?: (event: CbpFormFieldCustomEvent<any>) => void;
        /**
          * Specifies that the field is readonly; sets all form fields as readonly and related button controls to disabled.
         */
        "readonly"?: boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    /**
     * 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.
     */
    interface CbpFormFieldWrapper {
    }
    /**
     * 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.
     */
    interface CbpGrid {
        /**
          * Aligns grid content vertically when total grid size is smaller than container.
         */
        "alignContent"?: 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'space-around' | 'space-between' | 'space-evenly' | 'safe center' | 'unsafe center';
        /**
          * Aligns grid items in the vertical/column axis, perpendicular to the inline axis.
         */
        "alignItems"?: 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'self-start' | 'self-end' | 'baseline' | 'first baseline' | 'last baseline';
        /**
          * The size (in CSS units; preferably relative units such as `rem`) below which the grid items linearize.
         */
        "breakpoint"?: string;
        /**
          * Specifies the grid display. Defaults to "grid".
         */
        "display"?: 'grid' | 'inline-grid';
        /**
          * Specifies the spacing between grid items in the form of a single value or space-separated row-gap and column-gap values (in CSS units).
         */
        "gap"?: string;
        /**
          * Specifies the size (in CSS units) of implicitly-created columns using the auto-placement algorithm.
         */
        "gridAutoColumns"?: string;
        /**
          * Specifies how auto-placed items get flowed into the grid.
         */
        "gridAutoFlow"?: 'row' | 'column' | 'row dense' | 'column dense';
        /**
          * Specifies the size (in CSS units) of implicitly-created rows using the auto-placement algorithm.
         */
        "gridAutoRows"?: string;
        /**
          * Defines the grid via named grid areas (providing a visualization of the structure of the grid), which are not associated with any particular grid item, but can be referenced from the grid-placement properties.
         */
        "gridTemplateAreas"?: string;
        /**
          * Specifies the track sizing functions (and optionally line names) of the grid columns as a space-separated track list.
         */
        "gridTemplateColumns"?: 'none' | string;
        /**
          * Specifies the track sizing functions (and optionally line names) of the grid rows as a space-separated track list.
         */
        "gridTemplateRows"?: 'none' | string;
        /**
          * Justifies grid content horizontally when total grid size is smaller than container.
         */
        "justifyContent"?: 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'left' | 'right' | 'space-around' | 'space-between' | 'space-evenly' | 'safe center' | 'unsafe center';
        /**
          * Justifies grid content horizontally, along the inline/row axis.
         */
        "justifyItems"?: 'legacy' | 'normal' | 'stretch' | 'center' | 'safe center' | 'unsafe center' | 'start' | 'end' | 'self-start' | 'self-end' | 'left' | 'right' | 'baseline' | 'first baseline' | 'last baseline';
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    /**
     * The Grid Item component may optionally be used to specify properties of an individual grid item.
     */
    interface CbpGridItem {
        /**
          * Aligns this specific grid item in the vertical/column axis, perpendicular to the inline axis, separate from the parent context.
         */
        "alignSelf"?: string;
        /**
          * Names the Grid Area for use with grid-template-area on the parent.
         */
        "gridArea"?: string;
        /**
          * Specifies the ending position/edge (non-inclusive) of the grid item in the horizontal/column plane, which is used to calculate the size (including column and row spanning) and location within the grid.
         */
        "gridColumnEnd"?: number | string;
        /**
          * Specifies the starting position/edge of the grid item in the horizontal/column plane, which is used to calculate the size (including column and row spanning) and location within the grid.
         */
        "gridColumnStart"?: number | string;
        /**
          * Specifies the ending position/edge (non-inclusive) of the grid item in the vertical/row plane, which is used to calculate the size (including column and row spanning) and location within the grid.
         */
        "gridRowEnd"?: number | string;
        /**
          * Specifies the starting position/edge of the grid item in the vertical/row plane, which is used to calculate the size (including column and row spanning) and location within the grid.
         */
        "gridRowStart"?: number | string;
        /**
          * Justifies this specific grid item content horizontally, along the inline/row axis, separate from the parent context.
         */
        "justifySelf"?: string;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    /**
     * The Hide component represents a component-based implementation for programmatically hiding 
     * (or visually hiding) content based on application logic or media query.
     */
    interface CbpHide {
        /**
          * Specifies the host's display when visible. The default is `inline`, which is the default display of a custom element.
         */
        "display"?: string;
        /**
          * When set to true, the host is hidden. Allows for toggling via property binding rather than media query.
         */
        "hide"?: boolean;
        /**
          * Specifies a valid CSS media query (preferably using relative units), when met will hide the wrapped content using display: none; (e.g., `max-width: 64em`).  For complex media queries using AND/OR operators, each condition must be enclosed in parentheses  (e.g., `(width < 37.5rem) OR (width > 63rem)`).
         */
        "hideAt"?: string;
        /**
          * A custom event emitted when the accordion item control is activated.
         */
        "onHideToggle"?: (event: CbpHideCustomEvent<any>) => void;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * When set to true, the host is visually hidden in an accessible manner. Allows for toggling via property binding rather than media query.
         */
        "visuallyHide"?: boolean;
        /**
          * Specifies a valid CSS media query (preferably using relative units), when met will visually hide the wrapped content  in a way that is it still accessible as a label (e.g., `max-width: 64em`), For complex media queries using AND/OR operators, each condition must be enclosed in parentheses  (e.g., `(width < 37.5rem) OR (width > 63rem)`).
         */
        "visuallyHideAt"?: string;
    }
    /**
     * 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.
     */
    interface CbpIcon {
        /**
          * For icons that are not decorative, accessibilityText is rendered as an `aria-label` on the `svg` tag.
         */
        "accessibilityText"?: string;
        /**
          * Optionally specifies the color of the icon (ideally using design-token-based CSS variables). Defaults to "currentColor."
         */
        "color"?: string;
        /**
          * Specifies which icon to use from the built-in set of icons.
         */
        "name"?: string;
        /**
          * Optionally specify the degrees of rotation.
         */
        "rotate"?: number;
        /**
          * Optionally specifies the size (both width and height) of the icon, which  defaults (via CSS) to `1rem` (16px), the intended size of icons alongside body text.  Icon size may be specified via this property/attribute or the custom  CSS property `--cbp-icon-size`.
         */
        "size"?: string;
        /**
          * Specifies the exact `src` of an SVG file to use.
         */
        "src"?: string;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    /**
     * The cbp-link component is used to render an anchor or provide consistent styling for a slotted anchor.
     */
    interface CbpLink {
        /**
          * Specifies an accessible label for the rendered anchor via `aria-label`.
         */
        "accessibilityText"?: string;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Specifies whether the the rendered anchor is "disabled". Creating disabled anchors may introduce accessibility concerns - use with caution.
         */
        "disabled"?: boolean;
        /**
          * Specifies the `download` boolean attribute of the rendered anchor.
         */
        "download"?: boolean | string;
        /**
          * Specifies the `href` of the rendered anchor.
         */
        "href"?: string;
        /**
          * Specifies the `lang` attribute of the rendered anchor.
         */
        "language"?: string;
        /**
          * A custom event emitted with the anchor is activated/clicked.
         */
        "onLinkClick"?: (event: CbpLinkCustomEvent<any>) => void;
        /**
          * Specifies the `rel` attribute of the rendered anchor.
         */
        "rel"?: string;
        /**
          * Defines an `accesskey` attribute of the rendered anchor.
         */
        "shortcutKey"?: string;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * Specifies the `target` attribute of the rendered anchor.
         */
        "target"?: string;
    }
    /**
     * 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.
     */
    interface CbpList {
        /**
          * Specifies an accessible label for the list as an `aria-label`, similar to a table `caption`.
         */
        "accessibilityText"?: string;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Specifies the font size for the list
         */
        "size"?: 'normal' | 'large';
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * Specifies the semantic tag to be rendered.
         */
        "tag"?: 'ul' | 'ol' | 'dl';
        /**
          * Specifies the variant of list (unstyled, icon, special)
         */
        "variant"?: 'unstyled' | 'link' | 'icon';
    }
    /**
     * 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.
     */
    interface CbpListbox {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * A JSON object (or stringified JSON) containing an array of labels. Labels may contain markup as needed but  only the text can be populated into the native input upon selection. The expected format is [{"label":"string"}, ...]
         */
        "items"?: string | object;
        /**
          * A custom event emitted when the value of the wrapped input changes to update the listbox suggestions (items)  via application logic.
         */
        "onUpdateListboxSuggestions"?: (event: CbpListboxCustomEvent<any>) => 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"?: (event: CbpListboxCustomEvent<any>) => void;
        /**
          * Specifies whether the listbox is open/visible.
         */
        "open"?: boolean;
        /**
          * Supports adding inline styles (to the host) as an object. This property is not reactive.
         */
        "sx"?: any;
        /**
          * Optionally specify the ID of the listbox element (role=listbox), which is used to generate related  pattern node IDs and associate it to the wrapped input for accessibility.
         */
        "uid"?: string;
    }
    /**
     * The Loader is used as a visual indicator of progress during waiting periods.
     */
    interface CbpLoader {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled.  Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Defines if the loader will be in determinate/indeterminate, if true loader will display the current value out of max value
         */
        "determinate"?: boolean;
        /**
          * Used to set the loader to the 'error' state of the loader
         */
        "error"?: boolean;
        /**
          * Used in deternminate mode to display the max value of loaded content
         */
        "max"?: number;
        /**
          * Used to set the text orientation for the circular determinate loader's description
         */
        "orientation"?: "horizontal" | "vertical";
        /**
          * Specifies a unique `ID` for the loader, used to wire up the controls and accessibility features.
         */
        "progressId"?: string;
        /**
          * Defines the size of the loader render, default value of large
         */
        "size"?: "large" | "small";
        /**
          * Used to set the loader to the 'success' state of the loader
         */
        "success"?: boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * Used in deternminate mode to display the current value of loaded content
         */
        "value"?: number;
        /**
          * Defines if the loader will be in displayed as a circular or linear variant
         */
        "variant"?: "circular" | "linear";
    }
    /**
     * A Menu contains additional actions in the form of links or buttons, which can be shown by activating a control.
     */
    interface CbpMenu {
        /**
          * Creates an accessible label for the menu control.
         */
        "accessibilityText"?: string;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * A custom event fired when the menu is opened or closed.
         */
        "onToggleMenu"?: (event: CbpMenuCustomEvent<any>) => void;
        /**
          * When set, specifies that the menu is open.
         */
        "open"?: boolean;
        /**
          * Specifies the position of the menu. Defaults to "bottom-start".
         */
        "position"?: 'bottom-start' | "bottom-end" | 'top-start' | "top-end";
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * Specifies a unique `ID` for the menu, used to wire up the controls and accessibility features.
         */
        "uid"?: string;
    }
    /**
     * The Menu Item component wraps each individual control (link or button) within the menu.
     */
    interface CbpMenuItem {
        /**
          * Specifies a color variant for the menu item. Currently the only supported variant is "danger".
         */
        "color"?: "danger";
        /**
          * Specifies an indent level to represent hierarchical items. Defaults to zero.
         */
        "indentLevel"?: number;
    }
    /**
     * The Multicol component is a wrapper that invokes a CSS Multi-column layout context, ideal for 
     * using with semantic lists and checklists/radio lists.
     */
    interface CbpMulticol {
        /**
          * Specifies the maximum number of columns
         */
        "columns"?: number;
        /**
          * Specifies the gap between columns in CSS units (preferably relative units such as `rem`).
         */
        "gap"?: string;
        /**
          * Specifies that children shall not be broken to spread contents across columns (using `break-inside: avoid` CSS).
         */
        "nobreak"?: boolean;
        /**
          * Specifies the rule separating each column (syntax is similar to CSS borders, including a width, style, and color).
         */
        "rule"?: string;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * Specifies the minimum column width in CSS units (preferably relative units such as `rem`).  The column width may affect how many columns are actually used based upon available space.
         */
        "width"?: string;
    }
    /**
     * The Nav Item component wraps each individual control (link or button) within the App Header.
     */
    interface CbpNavItem {
        /**
          * Specifies whether this is the Nav Item that represents the current page. Only one item per set should be marked as current.
         */
        "current"?: boolean;
        /**
          * Specifies a name used to associated Nav Items with Subnav Items.
         */
        "name"?: string;
        "onNavItemClick"?: (event: CbpNavItemCustomEvent<any>) => void;
        /**
          * Supports adding inline styles as an object.
         */
        "sx"?: any;
    }
    /**
     * The Notice component presents persistent information that gives extra insight into a particular content area.
     */
    interface CbpNotice {
        /**
          * Optionally specifies a notice color based on predefined design token values. Defaults to "info".
         */
        "color"?: 'info' | 'success' | 'warning' | 'danger';
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    /**
     * The Pagination component presents a common UI pattern for displaying data sets broken up into smaller, 
     * more consumable (and performant) chunks or "pages."
     */
    interface CbpPagination {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Specifies the current maximum number of pages allowed. This property should be used for extremely large data sets  that have the potential to returns hundreds or thousands of pages.
         */
        "maxPages"?: number | undefined;
        /**
          * A custom event emitted when the click event occurs for either a rendered button or anchor/link.
         */
        "onPaginationChange"?: (event: CbpPaginationCustomEvent<any>) => void;
        /**
          * Specifies the current page being viewed. Defaults to 1.
         */
        "page"?: number;
        /**
          * Specifies the number of items to show per page. Accepts any number or "all". Defaults to 10.
         */
        "pageSize"?: number | "all";
        /**
          * Specifies the number of records in the entire data set (complete or filtered) to be paginated.
         */
        "records"?: number;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    /**
     * A panel is a styled container for displaying information within the main page content area or to either side.
     */
    interface CbpPanel {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    /**
     * The Radio component wraps the slotted native form control (`input type="radio"`) and label text, providing cross-browser styling.
     */
    interface CbpRadio {
        /**
          * Marks the radio button as checked by default when specified.
         */
        "checked"?: boolean;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Marks the radio button in a disabled state when specified.
         */
        "disabled"?: boolean;
        /**
          * Optionally specify the ID of the checkbox input here, which is used to generate related pattern node IDs and associate everything for accessibility
         */
        "fieldId"?: string;
        /**
          * The `name` attribute of the radio button, which is passed as part of formData (as a key) only when the radio button is checked.
         */
        "name"?: string;
        /**
          * A custom event emitted when the click event occurs for either a rendered button or anchor/link.
         */
        "onStateChanged"?: (event: CbpRadioCustomEvent<any>) => void;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * Optionally set the `value` attribute of the radio button at the component level. Not needed if the slotted radio button has a value.
         */
        "value"?: string;
    }
    /**
     * 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.
     */
    interface CbpResizeObserver {
        /**
          * The number of milliseconds to debounce the event emitter. Defaults to 0. While the native resize observer is very performant, the calculations within its handler function may not be, and performance may benefit from debouncing this event emitter.
         */
        "debounce"?: number;
        /**
          * A custom event emitted when the component is resized to give new values for size of component.
         */
        "onResized"?: (event: CbpResizeObserverCustomEvent<any>) => void;
    }
    /**
     * The Section component represents a generic block that may be used for semantic meaning or as 
     * a generic container for styling.
     */
    interface CbpSection {
        /**
          * Specifies an accessible label as `aria-label` to make a `section` tag an accessible landmark element. Likely has no effect otherwise.
         */
        "accessibilityText"?: string;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * Specifies the tag to render. Use `section` with the `accessibilityText` property to make an accessible landmark element.
         */
        "tag"?: 'div' | 'section' | 'none';
    }
    /**
     * The Segmented Button Group component wraps multiple buttons and can be used as a multi-option 
     * toggle or group of controls.
     */
    interface CbpSegmentedButtonGroup {
        /**
          * Specifies accessibility text used to label the group, applied to the group via aria-label.
         */
        "accessibilityText"?: string;
        "disabled"?: boolean;
        /**
          * Specifies whether multiple buttons may be activated at the same time. Defaults to false.
         */
        "multiple"?: boolean;
        /**
          * Optionally specifies the name of the (hidden) form field as a formData key  when a value is intended to be passed.
         */
        "name"?: string;
        /**
          * A custom event fired when any of the group's buttons are clicked, whether toggled on or off.
         */
        "onSegmentedButtonGroupClick"?: (event: CbpSegmentedButtonGroupCustomEvent<any>) => void;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * Optionally specifies a value of the group as a way to set the initial button pressed states and/or to be passed as part of submitted formData when a name is also specified.  Requires that the individual buttons have a value specified for the group to pass a value.
         */
        "value"?: any;
    }
    /**
     * 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.
     */
    interface CbpSkipNav {
        /**
          * Specifies a shortcut key, which is applied as an `accessKey` attribute.
         */
        "shortcutKey"?: string;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * Specifies the target `id` where focus is sent when the "skip nav" link is activated. Defaults to "main".
         */
        "targetId"?: string;
    }
    /**
     * The Slider component allows for the selection of a value within a range, styled to design system specifications.
     */
    interface CbpSlider {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled.  Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Specifies that the field is disabled. Primarily controlled by the parent `cbp-form-field` component.
         */
        "disabled"?: boolean;
        /**
          * Specifies that the field has an error (and sets aria-invalid accordingly). Primarily controlled by the parent `cbp-form-field` component.
         */
        "error"?: boolean;
        /**
          * Optionally specify the ID of the visible control here, which is used to generate related pattern node IDs and associate everything for accessibility.  For range sliders, "-start" and "-end" are appended to the specified/generated value automatically.
         */
        "fieldId"?: string;
        /**
          * Specifies the minimum difference in values in a range slider. If a non-zero value is specified, keep in mind the interaction with the "step" property.
         */
        "gap"?: number;
        /**
          * Specifies whether the numeric input is hidden (shown by default).
         */
        "hideInput"?: boolean;
        /**
          * Specifies whether the min/max values are hidden (shown by default).
         */
        "hideMinmax"?: boolean;
        /**
          * Specifies the maximum value of the slider and numeric entry field (defaults to 100).  This prop should be set on this component rather than (or in addition to) the slotted `input type="range"`.
         */
        "max"?: number;
        /**
          * Specifies the minimum value of the slider and numeric entry field (defaults to 0).  This prop should be set on this component rather than (or in addition to) the slotted `input type="range"`.
         */
        "min"?: number;
        /**
          * A custom event fired when the value of the slider changes.
         */
        "onValueChange"?: (event: CbpSliderCustomEvent<any>) => void;
        /**
          * Specifies the step value of the slider and numeric entry field (defaults to 1).  This prop should be set on this component rather than (or in addition to) the slotted `input type="range"`.
         */
        "step"?: number;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * Specifies the value of the slider and numeric entry field. It is highly recommended to set a contextually sensible default because the native `input type="range" cannot have an undefined or empty string as a value. If no value is specified, the default value will  be reported (and submitted) as halfway between the specified minimum and maximum; unless the maximum is actually less than the minimum,  in which case the default is set to the value of the minimum attribute. This prop should be set on this component rather than (or in addition to) the slotted `input type="range"`.
         */
        "value"?: number | number[] | string | string[];
        /**
          * Specifies whether the control is a single slider or a range with two values (can be auto-detected by the number of slotted `input[type=range]` tags).
         */
        "variant"?: "single" | "range";
    }
    /**
     * 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.
     */
    interface CbpStructuredList {
        /**
          * Specifies an accessible label for the list as an `aria-label`, similar to a table `caption`.  Since the structured list contains significant amount of data, it is advised to always specify a label describing the list.
         */
        "accessibilityText"?: string;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * References an `id` placed on the element slotted into the `cbp-structured-list-header` named slot to provide additional accessible context to the list label.
         */
        "headerId"?: string;
        /**
          * Specifies whether the list is striped, designating whether the colored rows are the odd or even rows (CBP DS standard is even when used).
         */
        "striped"?: 'odd' | 'even';
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    /**
     * 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.
     */
    interface CbpStructuredListItem {
        /**
          * Optionally specifies a color variant based on design tokens.
         */
        "color"?: 'danger' | 'warning' | 'success' | 'info';
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    /**
     * Sub-Navigation (Subnav) is meant to be used as a secondary, vertical navigation.
     */
    interface CbpSubnav {
        /**
          * Sets the aria-label for the `nav` landmark element rendered by the subnav.
         */
        "accessibilityText"?: string;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Specifies a flat display, rather than the default indented layout based on tag hierarchy.
         */
        "flat"?: boolean;
        /**
          * Specifies whether the Subnav pushes updates to a state store to integrate with the Application Header.
         */
        "store"?: boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    /**
     * The Subnav Item component represents a single navigation link and can also be nested multiple levels to convey a site/navigation hierarchy.
     */
    interface CbpSubnavItem {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Specifies the current item within the collection of Subnav Items.
         */
        "current"?: boolean;
        /**
          * Specifies the href for the Subnav Item anchor.
         */
        "href"?: string;
        /**
          * Specifies the text label for the subnav item.
         */
        "label"?: string;
        /**
          * Specifies a name used to associated Nav Items with Subnav Items.
         */
        "name"?: string;
        "onSubnavItemClick"?: (event: CbpSubnavItemCustomEvent<any>) => void;
        "onToggleSubnavItem"?: (event: CbpSubnavItemCustomEvent<any>) => void;
        /**
          * Specifies whether a Subnav Item with nested children is expanded or collapsed.  Primarily used internally for user interactions.
         */
        "open"?: boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * Optionally specifies a unique `ID` for the menu, used to wire up the controls and accessibility features.
         */
        "uid"?: string;
    }
    /**
     * The Tab component represents an individual tab control within a tab set.
     */
    interface CbpTab {
        /**
          * For tabs without a visible text label (e.g., icon tabs) or a label that is insufficiently unique/descriptive, you may provide accessibility text, which is rendered as an `aria-label` on the tab control (button element).
         */
        "accessibilityText"?: string;
        /**
          * An optional color variant.
         */
        "color"?: 'danger';
        /**
          * An `ID`-conformant unique name of the tab; This value should match the corresponding cbp-tab-panel name and links the two together.
         */
        "name": string;
        /**
          * Emits a custom even containing an object that describes the tab that was activated.
         */
        "onTabClicked"?: (event: CbpTabCustomEvent<any>) => void;
        /**
          * Emits an event when the tab has been fully loaded for registration with the parent tabset.
         */
        "onTabLoaded"?: (event: CbpTabCustomEvent<any>) => void;
        /**
          * Specifies whether this is the selected tab. Only one tab per tabset should be marked as selected.
         */
        "selected"?: boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    /**
     * The Tab Panel component is a wrapper representing a tabpanel role and containing the content to be progressively disclosed.
     */
    interface CbpTabPanel {
        /**
          * An `ID`-conformant unique name of the tab-panel, applied as an `id` on this tab panel; This value should match the corresponding cbp-tab name and links the two together.
         */
        "name": string;
        /**
          * Specifies if this is the tab panel corresponding to the selected tab and currently visible. This property is managed by the parent cbp-tabs component and does not need to be set manually.
         */
        "selected"?: boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    /**
     * 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.
     */
    interface CbpTable {
        /**
          * Specifies whether a hover effect is applied to columns when the column header is hovered. This feature is opt-in.
         */
        "columnHover"?: boolean;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled.  Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Turning on debug mode will log some calculations to the console for troubleshooting.
         */
        "debug"?: boolean;
        /**
          * Specifies whether the mouse cursor highlights the table row or cell on hover. Defaults to "row".
         */
        "hover"?: 'row' | 'cell';
        /**
          * An event emitted when the table is sorted via user interaction activating a table header control.
         */
        "onTableSort"?: (event: CbpTableCustomEvent<any>) => void;
        /**
          * Specifies whether the table is striped, designating whether the colored rows are the odd or even rows (CBP DS standard is even when used).
         */
        "overflow"?: 'scroll' | 'linearize';
        /**
          * Specifies whether the table is striped, designating whether the colored rows are the odd or even rows (CBP DS standard is even when used).
         */
        "striped"?: 'odd' | 'even';
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    /**
     * 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.
     */
    interface CbpTabs {
        /**
          * The accessible label of the tablist. Required unless `aria-labelledby` is specified on the host tag directly.
         */
        "accessibilityText"?: string;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    /**
     * The Tag component is a non-interactive visual treatment for text, typically representing labels, keywords, or search terms.
     */
    interface CbpTag {
        /**
          * Specifies a tag color variant. Default does not need to be specified.
         */
        "color"?: 'default' | 'danger' | 'success' | 'warning';
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    /**
     * The Toast component displays a brief, non-intrusive message that appears on a user interface to 
     * provide feedback about an action or status update.
     */
    interface CbpToast {
        /**
          * specifies the color for the toast
         */
        "color"?: 'info' | 'danger' | 'success' | 'warning';
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * specifies time in seconds for the toast to be displayed
         */
        "duration"?: 3 | 5 | 10;
        /**
          * When set, specifies that the toast is open
         */
        "open"?: boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    /**
     * The Toggle component is a visual variant of a Boolean selection form control (checkbox), 
     * representing an on/off toggle switch.
     */
    interface CbpToggle {
        /**
          * Marks the toggle as checked (on) by default when specified.
         */
        "checked"?: boolean;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled.  Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Marks the toggle in a disabled state when specified.
         */
        "disabled"?: boolean;
        /**
          * Hides the status text after the toggle control when specified.
         */
        "hideStatus"?: boolean;
        /**
          * Optionally set the `name` attribute of the checkbox at the component level, which is passed as part of  formData (as a key) only when the checkbox is checked.  Not needed if the slotted checkbox has a name.
         */
        "name"?: string;
        /**
          * Custom event fired when the control is toggled by the user.
         */
        "onToggleClick"?: (event: CbpToggleCustomEvent<any>) => void;
        /**
          * Specifies the status text for the false toggle.
         */
        "statusTextOff"?: string;
        /**
          * Specifies the status text for the true toggle.
         */
        "statusTextOn"?: string;
        /**
          * Supports adding inline styles as an object.
         */
        "sx"?: any;
        /**
          * Optionally set the `value` attribute of the checkbox at the component level.  Not needed if the slotted checkbox has a value.
         */
        "value"?: string;
    }
    /**
     * The Tooltip component allows for the disclosure of supplemental, non-essential information via a triggering element.
     */
    interface CbpTooltip {
        /**
          * sets where the tooltip will be displayed and where the caret will be placed
         */
        "alignment"?: "top-left" | "top-center" | "top-left" | "right-top" | "right-center" | "right-bottom" | "bottom-left" | "bottom-center" | "bottom-right" | "left-top" | "left-center" | "left-bottom";
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Optionally specify the ID of the visible control here, which is used to generate related pattern node IDs and associate everything for accessibility
         */
        "fieldId"?: string;
        /**
          * When set, specifies that the tooltip is open
         */
        "open"?: boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * used to set styles for the definition link for text controls
         */
        "variant"?: 'definition';
    }
    interface CbpTreeview {
        /**
          * Creates an accessible label for the treeview control if one has not been associated via `aria-labelledby`.
         */
        "accessibilityText"?: string;
        /**
          * Specifies the context of the component (and its child items) as it applies to the visual design and whether it  inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Specifies the name for all checkboxes in selectable treeviews, similar to a checklist.
         */
        "name"?: string;
        /**
          * 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"?: (event: CbpTreeviewCustomEvent<any>) => void;
        /**
          * Specifies that the entire tree is selectable. Setting this property at this level overrides all child treeview items.
         */
        "selectable"?: boolean;
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
    }
    interface CbpTreeviewItem {
        /**
          * Specifies whether a selectable item (and its rendered checkbox) is in a checked state.
         */
        "checked"?: boolean;
        /**
          * Specifies the context of the component as it applies to the visual design and whether it  inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.  This property is passed down from the parent `cbp-treeview` and does not need to be set at this level.
         */
        "context"?: 'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always';
        /**
          * Specifies whether a selectable item (and its rendered checkbox) is in an indeterminate state. This logic is handled internally and should not need to be set manually.
         */
        "indeterminate"?: boolean;
        /**
          * Specifies the label to be displayed in the treeview item control. For selectable items, this becomes the checkbox label.
         */
        "label"?: string;
        /**
          * Specifies a name for a selectable item's checkbox.
         */
        "name"?: string;
        /**
          * Custom event emitted to the parent treeview item to re-evaluate its checked/indeterminate state based on actions below it.
         */
        "onUpdateTreeviewItemParent"?: (event: CbpTreeviewItemCustomEvent<any>) => void;
        /**
          * Specifies whether the item, if a parent to nested items, is open/expanded.
         */
        "open"?: boolean;
        /**
          * Specifies whether this item is selectable, and if so renders a checkbox within the item. This property can be set on the parent `cbp-treeview` component to be applied to all treeview items.
         */
        "selectable"?: boolean;
        /**
          * Specifies a unique `id` for the treeview item, used to wire up the controls and accessibility features.  This property is not required and will auto-generate an `id` if none is specified.
         */
        "uid"?: string;
        /**
          * Specifies the value for a selectable item's checkbox and to pass in the `cbp-treeview`'s custom event emitter.
         */
        "value"?: string;
    }
    /**
     * The Typography component encapsulates predefined styles for different kinds of text that makes 
     * up a website, merging design language with CSS and HTML implementations.
     */
    interface CbpTypography {
        /**
          * Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is "light-inverts" and does not have to be specified.
         */
        "context"?: "light-inverts" | "light-always" | "dark-inverts" | "dark-always";
        /**
          * Specifies whether the text contains visual treatments that act as a divider.
         */
        "divider"?: 'underline' | 'fill';
        /**
          * Supports adding inline styles as an object
         */
        "sx"?: any;
        /**
          * Specifies the semantic tag to be rendered.
         */
        "tag"?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'code' | 'pre' | 'div' | 'span';
        /**
          * Specifies the visual style of the text regardless of the semantic tag.
         */
        "variant"?: 'masthead-1' | 'masthead-2' | 'heading-xxl' | 'heading-xl' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'heading-xs' | 'body-text' | 'subhead' | 'heading-dialog';
    }
    /**
     * The Universal Header component establishes CBP branding, displaying the seal in a standard DHS blue header.
     */
    interface CbpUniversalHeader {
        /**
          * Fully qualified or relative URL pointing to the larger SVG containing the CPB seal with text.
         */
        "logoSrcLg"?: string;
        /**
          * Fully qualified or relative URL pointing to the plain SVG version of the CPB seal for smaller screens ("CBP" text is supplied via CSS automatically).
         */
        "logoSrcSm"?: string;
    }
    /**
     * 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.
     */
    interface CbpUsaBanner {
        /**
          * Specifies that the banner is open. Primarily used for internal component logic.
         */
        "open"?: boolean;
    }
    interface IntrinsicElements {
        "cbp-accordion": CbpAccordion;
        "cbp-accordion-item": CbpAccordionItem;
        "cbp-action-bar": CbpActionBar;
        "cbp-app": CbpApp;
        "cbp-app-header": CbpAppHeader;
        "cbp-badge": CbpBadge;
        "cbp-banner": CbpBanner;
        "cbp-breadcrumb": CbpBreadcrumb;
        "cbp-button": CbpButton;
        "cbp-card": CbpCard;
        "cbp-carousel": CbpCarousel;
        "cbp-carousel-item": CbpCarouselItem;
        "cbp-checkbox": CbpCheckbox;
        "cbp-chip": CbpChip;
        "cbp-code-snippet": CbpCodeSnippet;
        "cbp-container": CbpContainer;
        "cbp-dialog": CbpDialog;
        "cbp-dot-indicator": CbpDotIndicator;
        "cbp-drawer": CbpDrawer;
        "cbp-dropdown": CbpDropdown;
        "cbp-dropdown-item": CbpDropdownItem;
        "cbp-expand": CbpExpand;
        "cbp-file-input": CbpFileInput;
        "cbp-flex": CbpFlex;
        "cbp-flex-item": CbpFlexItem;
        "cbp-floating-action": CbpFloatingAction;
        "cbp-footer": CbpFooter;
        "cbp-form": CbpForm;
        "cbp-form-field": CbpFormField;
        "cbp-form-field-wrapper": CbpFormFieldWrapper;
        "cbp-grid": CbpGrid;
        "cbp-grid-item": CbpGridItem;
        "cbp-hide": CbpHide;
        "cbp-icon": CbpIcon;
        "cbp-link": CbpLink;
        "cbp-list": CbpList;
        "cbp-listbox": CbpListbox;
        "cbp-loader": CbpLoader;
        "cbp-menu": CbpMenu;
        "cbp-menu-item": CbpMenuItem;
        "cbp-multicol": CbpMulticol;
        "cbp-nav-item": CbpNavItem;
        "cbp-notice": CbpNotice;
        "cbp-pagination": CbpPagination;
        "cbp-panel": CbpPanel;
        "cbp-radio": CbpRadio;
        "cbp-resize-observer": CbpResizeObserver;
        "cbp-section": CbpSection;
        "cbp-segmented-button-group": CbpSegmentedButtonGroup;
        "cbp-skip-nav": CbpSkipNav;
        "cbp-slider": CbpSlider;
        "cbp-structured-list": CbpStructuredList;
        "cbp-structured-list-item": CbpStructuredListItem;
        "cbp-subnav": CbpSubnav;
        "cbp-subnav-item": CbpSubnavItem;
        "cbp-tab": CbpTab;
        "cbp-tab-panel": CbpTabPanel;
        "cbp-table": CbpTable;
        "cbp-tabs": CbpTabs;
        "cbp-tag": CbpTag;
        "cbp-toast": CbpToast;
        "cbp-toggle": CbpToggle;
        "cbp-tooltip": CbpTooltip;
        "cbp-treeview": CbpTreeview;
        "cbp-treeview-item": CbpTreeviewItem;
        "cbp-typography": CbpTypography;
        "cbp-universal-header": CbpUniversalHeader;
        "cbp-usa-banner": CbpUsaBanner;
    }
}
export { LocalJSX as JSX };
declare module "@stencil/core" {
    export namespace JSX {
        interface IntrinsicElements {
            /**
             * 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.
             */
            "cbp-accordion": LocalJSX.CbpAccordion & JSXBase.HTMLAttributes<HTMLCbpAccordionElement>;
            /**
             * 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.
             */
            "cbp-accordion-item": LocalJSX.CbpAccordionItem & JSXBase.HTMLAttributes<HTMLCbpAccordionItemElement>;
            /**
             * 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.
             */
            "cbp-action-bar": LocalJSX.CbpActionBar & JSXBase.HTMLAttributes<HTMLCbpActionBarElement>;
            /**
             * 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.
             */
            "cbp-app": LocalJSX.CbpApp & JSXBase.HTMLAttributes<HTMLCbpAppElement>;
            "cbp-app-header": LocalJSX.CbpAppHeader & JSXBase.HTMLAttributes<HTMLCbpAppHeaderElement>;
            /**
             * The Badge component is generally used for emphasizing a numeric characteristic of an object 
             * (e.g., the number of unread items in a folder).
             */
            "cbp-badge": LocalJSX.CbpBadge & JSXBase.HTMLAttributes<HTMLCbpBadgeElement>;
            /**
             * The Banner is a container spanning the entire viewport meant to highlight urgent or important content.
             */
            "cbp-banner": LocalJSX.CbpBanner & JSXBase.HTMLAttributes<HTMLCbpBannerElement>;
            /**
             * 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.
             */
            "cbp-breadcrumb": LocalJSX.CbpBreadcrumb & JSXBase.HTMLAttributes<HTMLCbpBreadcrumbElement>;
            /**
             * 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.
             */
            "cbp-button": LocalJSX.CbpButton & JSXBase.HTMLAttributes<HTMLCbpButtonElement>;
            /**
             * The Card component is a visual treatment for a container meant for similarly-sized, repeated chunks of content.
             */
            "cbp-card": LocalJSX.CbpCard & JSXBase.HTMLAttributes<HTMLCbpCardElement>;
            /**
             * 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
             */
            "cbp-carousel": LocalJSX.CbpCarousel & JSXBase.HTMLAttributes<HTMLCbpCarouselElement>;
            /**
             * The Carousel Item is meant to be slotted into the CBP-Carousel and represents a single 
             * iteration of content for the CBP-Carousel
             */
            "cbp-carousel-item": LocalJSX.CbpCarouselItem & JSXBase.HTMLAttributes<HTMLCbpCarouselItemElement>;
            /**
             * 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.
             */
            "cbp-checkbox": LocalJSX.CbpCheckbox & JSXBase.HTMLAttributes<HTMLCbpCheckboxElement>;
            /**
             * The Chip component acts like an interactive version of the Tag and is typically used for selecting or filtering.
             */
            "cbp-chip": LocalJSX.CbpChip & JSXBase.HTMLAttributes<HTMLCbpChipElement>;
            /**
             * The Code Snippet component is used to display code in a readable format and facilitate copying it.
             */
            "cbp-code-snippet": LocalJSX.CbpCodeSnippet & JSXBase.HTMLAttributes<HTMLCbpCodeSnippetElement>;
            /**
             * The Container component is a building block component for wrapping content and providing 
             * visual treatment such as a background image or color.
             */
            "cbp-container": LocalJSX.CbpContainer & JSXBase.HTMLAttributes<HTMLCbpContainerElement>;
            /**
             * 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.
             */
            "cbp-dialog": LocalJSX.CbpDialog & JSXBase.HTMLAttributes<HTMLCbpDialogElement>;
            "cbp-dot-indicator": LocalJSX.CbpDotIndicator & JSXBase.HTMLAttributes<HTMLCbpDotIndicatorElement>;
            /**
             * 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.
             */
            "cbp-drawer": LocalJSX.CbpDrawer & JSXBase.HTMLAttributes<HTMLCbpDrawerElement>;
            /**
             * 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.
             */
            "cbp-dropdown": LocalJSX.CbpDropdown & JSXBase.HTMLAttributes<HTMLCbpDropdownElement>;
            /**
             * The Dropdown Item represents an individual option for the Dropdown, similar to an option in a
             * native `select` but with more flexibility.
             */
            "cbp-dropdown-item": LocalJSX.CbpDropdownItem & JSXBase.HTMLAttributes<HTMLCbpDropdownItemElement>;
            /**
             * 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.
             */
            "cbp-expand": LocalJSX.CbpExpand & JSXBase.HTMLAttributes<HTMLCbpExpandElement>;
            /**
             * 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.
             */
            "cbp-file-input": LocalJSX.CbpFileInput & JSXBase.HTMLAttributes<HTMLCbpFileInputElement>;
            /**
             * 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.
             */
            "cbp-flex": LocalJSX.CbpFlex & JSXBase.HTMLAttributes<HTMLCbpFlexElement>;
            /**
             * The Flex Item component may optionally be used to specify properties of an individual flex item.
             */
            "cbp-flex-item": LocalJSX.CbpFlexItem & JSXBase.HTMLAttributes<HTMLCbpFlexItemElement>;
            "cbp-floating-action": LocalJSX.CbpFloatingAction & JSXBase.HTMLAttributes<HTMLCbpFloatingActionElement>;
            /**
             * 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.
             */
            "cbp-footer": LocalJSX.CbpFooter & JSXBase.HTMLAttributes<HTMLCbpFooterElement>;
            /**
             * 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.
             */
            "cbp-form": LocalJSX.CbpForm & JSXBase.HTMLAttributes<HTMLCbpFormElement>;
            /**
             * 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.
             */
            "cbp-form-field": LocalJSX.CbpFormField & JSXBase.HTMLAttributes<HTMLCbpFormFieldElement>;
            /**
             * 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.
             */
            "cbp-form-field-wrapper": LocalJSX.CbpFormFieldWrapper & JSXBase.HTMLAttributes<HTMLCbpFormFieldWrapperElement>;
            /**
             * 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.
             */
            "cbp-grid": LocalJSX.CbpGrid & JSXBase.HTMLAttributes<HTMLCbpGridElement>;
            /**
             * The Grid Item component may optionally be used to specify properties of an individual grid item.
             */
            "cbp-grid-item": LocalJSX.CbpGridItem & JSXBase.HTMLAttributes<HTMLCbpGridItemElement>;
            /**
             * The Hide component represents a component-based implementation for programmatically hiding 
             * (or visually hiding) content based on application logic or media query.
             */
            "cbp-hide": LocalJSX.CbpHide & JSXBase.HTMLAttributes<HTMLCbpHideElement>;
            /**
             * 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.
             */
            "cbp-icon": LocalJSX.CbpIcon & JSXBase.HTMLAttributes<HTMLCbpIconElement>;
            /**
             * The cbp-link component is used to render an anchor or provide consistent styling for a slotted anchor.
             */
            "cbp-link": LocalJSX.CbpLink & JSXBase.HTMLAttributes<HTMLCbpLinkElement>;
            /**
             * 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.
             */
            "cbp-list": LocalJSX.CbpList & JSXBase.HTMLAttributes<HTMLCbpListElement>;
            /**
             * 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.
             */
            "cbp-listbox": LocalJSX.CbpListbox & JSXBase.HTMLAttributes<HTMLCbpListboxElement>;
            /**
             * The Loader is used as a visual indicator of progress during waiting periods.
             */
            "cbp-loader": LocalJSX.CbpLoader & JSXBase.HTMLAttributes<HTMLCbpLoaderElement>;
            /**
             * A Menu contains additional actions in the form of links or buttons, which can be shown by activating a control.
             */
            "cbp-menu": LocalJSX.CbpMenu & JSXBase.HTMLAttributes<HTMLCbpMenuElement>;
            /**
             * The Menu Item component wraps each individual control (link or button) within the menu.
             */
            "cbp-menu-item": LocalJSX.CbpMenuItem & JSXBase.HTMLAttributes<HTMLCbpMenuItemElement>;
            /**
             * The Multicol component is a wrapper that invokes a CSS Multi-column layout context, ideal for 
             * using with semantic lists and checklists/radio lists.
             */
            "cbp-multicol": LocalJSX.CbpMulticol & JSXBase.HTMLAttributes<HTMLCbpMulticolElement>;
            /**
             * The Nav Item component wraps each individual control (link or button) within the App Header.
             */
            "cbp-nav-item": LocalJSX.CbpNavItem & JSXBase.HTMLAttributes<HTMLCbpNavItemElement>;
            /**
             * The Notice component presents persistent information that gives extra insight into a particular content area.
             */
            "cbp-notice": LocalJSX.CbpNotice & JSXBase.HTMLAttributes<HTMLCbpNoticeElement>;
            /**
             * The Pagination component presents a common UI pattern for displaying data sets broken up into smaller, 
             * more consumable (and performant) chunks or "pages."
             */
            "cbp-pagination": LocalJSX.CbpPagination & JSXBase.HTMLAttributes<HTMLCbpPaginationElement>;
            /**
             * A panel is a styled container for displaying information within the main page content area or to either side.
             */
            "cbp-panel": LocalJSX.CbpPanel & JSXBase.HTMLAttributes<HTMLCbpPanelElement>;
            /**
             * The Radio component wraps the slotted native form control (`input type="radio"`) and label text, providing cross-browser styling.
             */
            "cbp-radio": LocalJSX.CbpRadio & JSXBase.HTMLAttributes<HTMLCbpRadioElement>;
            /**
             * 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.
             */
            "cbp-resize-observer": LocalJSX.CbpResizeObserver & JSXBase.HTMLAttributes<HTMLCbpResizeObserverElement>;
            /**
             * The Section component represents a generic block that may be used for semantic meaning or as 
             * a generic container for styling.
             */
            "cbp-section": LocalJSX.CbpSection & JSXBase.HTMLAttributes<HTMLCbpSectionElement>;
            /**
             * The Segmented Button Group component wraps multiple buttons and can be used as a multi-option 
             * toggle or group of controls.
             */
            "cbp-segmented-button-group": LocalJSX.CbpSegmentedButtonGroup & JSXBase.HTMLAttributes<HTMLCbpSegmentedButtonGroupElement>;
            /**
             * 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.
             */
            "cbp-skip-nav": LocalJSX.CbpSkipNav & JSXBase.HTMLAttributes<HTMLCbpSkipNavElement>;
            /**
             * The Slider component allows for the selection of a value within a range, styled to design system specifications.
             */
            "cbp-slider": LocalJSX.CbpSlider & JSXBase.HTMLAttributes<HTMLCbpSliderElement>;
            /**
             * 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.
             */
            "cbp-structured-list": LocalJSX.CbpStructuredList & JSXBase.HTMLAttributes<HTMLCbpStructuredListElement>;
            /**
             * 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.
             */
            "cbp-structured-list-item": LocalJSX.CbpStructuredListItem & JSXBase.HTMLAttributes<HTMLCbpStructuredListItemElement>;
            /**
             * Sub-Navigation (Subnav) is meant to be used as a secondary, vertical navigation.
             */
            "cbp-subnav": LocalJSX.CbpSubnav & JSXBase.HTMLAttributes<HTMLCbpSubnavElement>;
            /**
             * The Subnav Item component represents a single navigation link and can also be nested multiple levels to convey a site/navigation hierarchy.
             */
            "cbp-subnav-item": LocalJSX.CbpSubnavItem & JSXBase.HTMLAttributes<HTMLCbpSubnavItemElement>;
            /**
             * The Tab component represents an individual tab control within a tab set.
             */
            "cbp-tab": LocalJSX.CbpTab & JSXBase.HTMLAttributes<HTMLCbpTabElement>;
            /**
             * The Tab Panel component is a wrapper representing a tabpanel role and containing the content to be progressively disclosed.
             */
            "cbp-tab-panel": LocalJSX.CbpTabPanel & JSXBase.HTMLAttributes<HTMLCbpTabPanelElement>;
            /**
             * 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.
             */
            "cbp-table": LocalJSX.CbpTable & JSXBase.HTMLAttributes<HTMLCbpTableElement>;
            /**
             * 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.
             */
            "cbp-tabs": LocalJSX.CbpTabs & JSXBase.HTMLAttributes<HTMLCbpTabsElement>;
            /**
             * The Tag component is a non-interactive visual treatment for text, typically representing labels, keywords, or search terms.
             */
            "cbp-tag": LocalJSX.CbpTag & JSXBase.HTMLAttributes<HTMLCbpTagElement>;
            /**
             * The Toast component displays a brief, non-intrusive message that appears on a user interface to 
             * provide feedback about an action or status update.
             */
            "cbp-toast": LocalJSX.CbpToast & JSXBase.HTMLAttributes<HTMLCbpToastElement>;
            /**
             * The Toggle component is a visual variant of a Boolean selection form control (checkbox), 
             * representing an on/off toggle switch.
             */
            "cbp-toggle": LocalJSX.CbpToggle & JSXBase.HTMLAttributes<HTMLCbpToggleElement>;
            /**
             * The Tooltip component allows for the disclosure of supplemental, non-essential information via a triggering element.
             */
            "cbp-tooltip": LocalJSX.CbpTooltip & JSXBase.HTMLAttributes<HTMLCbpTooltipElement>;
            "cbp-treeview": LocalJSX.CbpTreeview & JSXBase.HTMLAttributes<HTMLCbpTreeviewElement>;
            "cbp-treeview-item": LocalJSX.CbpTreeviewItem & JSXBase.HTMLAttributes<HTMLCbpTreeviewItemElement>;
            /**
             * The Typography component encapsulates predefined styles for different kinds of text that makes 
             * up a website, merging design language with CSS and HTML implementations.
             */
            "cbp-typography": LocalJSX.CbpTypography & JSXBase.HTMLAttributes<HTMLCbpTypographyElement>;
            /**
             * The Universal Header component establishes CBP branding, displaying the seal in a standard DHS blue header.
             */
            "cbp-universal-header": LocalJSX.CbpUniversalHeader & JSXBase.HTMLAttributes<HTMLCbpUniversalHeaderElement>;
            /**
             * 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.
             */
            "cbp-usa-banner": LocalJSX.CbpUsaBanner & JSXBase.HTMLAttributes<HTMLCbpUsaBannerElement>;
        }
    }
}