@cbpds/web-components/dist/types/components.d.ts

Web components for the CBP Design System.

/* 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';
    }
    /**
     * 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;
        /**
          * 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' | '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" | "decision" | "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;
        /**
          * 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 card color (different from the default color) based on predefined design token values.
         */
        "color": 'info' | 'success' | 'warning' | 'danger';
        /**
          * 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;
    }
    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": (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';
        /**
          * When set, specifies that the drawer is open
         */
        "open": boolean;
        /**
          * A public method for opening the drawer.
         */
        "openDrawer": (e?: any) => 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;
        /**
          * 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 and values. Labels may contain markup as needed, but in such cases, a value should always be specified explicitly.
         */
        "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
         */
        "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;
        /**
          * Specifies the visible label on the dropdown control of the selected item.  Primarily updated dynamically by the component.
         */
        "selectedLabel": string;
        /**
          * 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;
    }
    /**
     * The Expand component is a standalone component used for progressive disclosure, organizing 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 accordion 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;
        /**
          * 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;
        /**
          * 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;
    }
    /**
     * 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 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`
         */
        "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`
         */
        "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;
        /**
          * 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';
    }
    /**
     * 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