@cbpds/web-components/dist/vscode/cbpds-vscode-data.json

Web components for the CBP Design System.

{
  "version": 1.1,
  "tags": [
    {
      "name": "cbp-accordion",
      "description": {
        "kind": "markdown",
        "value": "An Accordion is a common paradigm for progressive disclosure, organizing content under a relevant heading \nthat is used as a control for revealing and hiding its content. This component wraps multiple `cbp-accordion-item` tags."
      },
      "attributes": [
        {
          "name": "context",
          "description": "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.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "multiple",
          "description": "Specifies whether multiple accordion items can be open at the same time. Defaults to false."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-accordion-item",
      "description": {
        "kind": "markdown",
        "value": "Accordion Items are placed as children of the parent `cbp-accordion` tag. The content is slotted and the \nheading control text is provided via the label property or the optional named slot."
      },
      "attributes": [
        {
          "name": "color",
          "description": "Specifies an optional color variant of the accordion item.",
          "values": [
            {
              "name": "danger"
            }
          ]
        },
        {
          "name": "heading-id",
          "description": "Specifies an optional `id` for the accordion item heading, also used to generate an `id` for \nthe accordion item content wrapper. If this property is not specified, a unique string will \nautomatically be generated."
        },
        {
          "name": "heading-level",
          "description": "The heading level of the accordion item control. Defaults to h3.",
          "values": [
            {
              "name": "h2"
            },
            {
              "name": "h3"
            },
            {
              "name": "h4"
            },
            {
              "name": "h5"
            },
            {
              "name": "h6"
            }
          ]
        },
        {
          "name": "label",
          "description": "The accordion control label."
        },
        {
          "name": "open",
          "description": "Specifies whether the accordion is open."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-action-bar",
      "description": {
        "kind": "markdown",
        "value": "The Action Bar acts as a container for form controls (buttons) or other tools to affect the content of the page. \nIt is often used for batch actions on table or structured list data."
      },
      "attributes": [
        {
          "name": "context",
          "description": "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.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "variant",
          "description": "Specifies whether the action bar is inline or floating. Defaults to inline.",
          "values": [
            {
              "name": "floating"
            },
            {
              "name": "inline"
            }
          ]
        }
      ]
    },
    {
      "name": "cbp-app",
      "description": {
        "kind": "markdown",
        "value": "An overarching App tag acts as a low-barrier way to get core design system elements (design tokens and styles)\nas well as a way to manage site/page-level settings such as dark mode."
      },
      "attributes": [
        {
          "name": "app-name",
          "description": "Specifies the application name for logging with debug information."
        },
        {
          "name": "app-version",
          "description": "Specifies the application version for logging with debug information. This may be automated by importing it from the application's package.json, if used."
        },
        {
          "name": "debug",
          "description": "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."
        },
        {
          "name": "theme",
          "description": "Optionally specifies light/dark mode. This is only needed if the application can change the theme separate from OS settings.",
          "values": [
            {
              "name": "dark"
            },
            {
              "name": "light"
            },
            {
              "name": "system"
            }
          ]
        }
      ]
    },
    {
      "name": "cbp-app-header",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "search",
          "description": "Specifies if there will be a slotted input for global search"
        },
        {
          "name": "search-action",
          "description": "Specifies the action attribute for the search form"
        },
        {
          "name": "search-method",
          "description": "Specifies the method attribute for the search form"
        },
        {
          "name": "subnav-drawer-id",
          "description": "Specifies the id of the drawer to be launched"
        }
      ]
    },
    {
      "name": "cbp-badge",
      "description": {
        "kind": "markdown",
        "value": "The Badge component is generally used for emphasizing a numeric characteristic of an object \n(e.g., the number of unread items in a folder)."
      },
      "attributes": [
        {
          "name": "color",
          "description": "Specifies a color variant. Currently the only variant supported is \"danger\".",
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "default"
            }
          ]
        },
        {
          "name": "context",
          "description": "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.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-banner",
      "description": {
        "kind": "markdown",
        "value": "The Banner is a container spanning the entire viewport meant to highlight urgent or important content."
      },
      "attributes": [
        {
          "name": "color",
          "description": "Specifies a color variant for the banner.",
          "values": [
            {
              "name": "info"
            }
          ]
        }
      ]
    },
    {
      "name": "cbp-breadcrumb",
      "description": {
        "kind": "markdown",
        "value": "Breadcrumbs give users an indicator of where they are within a site/application hierarchy, \nespecially helpful when deeper within the site’s architecture. This component should wrap links \nrepresenting the parent sections of the current page, but not including the current page."
      },
      "attributes": [
        {
          "name": "context",
          "description": "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.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "divider",
          "description": "Specifies a character as a divider between breadcrumb links. Defaults to \"/\"."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-button",
      "description": {
        "kind": "markdown",
        "value": "The Button component represents a UI control visually styled like a button, regardless of whether \nit renders (or wraps) a button or an anchor tag."
      },
      "attributes": [
        {
          "name": "accessibility-text",
          "description": "Specifies an accessible label for the button/link as an `aria-label` when the button does not contain label text\nor a sufficiently unique label. This text overrides the default label and is not additive to it."
        },
        {
          "name": "color",
          "description": "The color of the button: primary, secondary, or danger. Defaults to \"primary.\"",
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            }
          ]
        },
        {
          "name": "context",
          "description": "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.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "control-id",
          "description": "Optionally specify the ID of the control here, which is used to generate related pattern node IDs and associate everything for accessibility"
        },
        {
          "name": "controls",
          "description": "Specifies the DOM element that the button controls and results in the `aria-controls` attribute\nrendered on the button with the specified value."
        },
        {
          "name": "disabled",
          "description": "Marks the rendered button/link in a disabled state when specified."
        },
        {
          "name": "download",
          "description": "The `download` attribute of a link button; when present tells the browser to download the specified href URI instead\nof viewing or navigating to it."
        },
        {
          "name": "expanded",
          "description": "Specifies if a controlled UI widget is expanded and results in `aria-pressed=\"true|false\"` being placed \non the button when specified. This property is usually used for progressive disclosure patterns such as \naccordions, menus, expand/collapse, etc., where focus remains on the control after the user action.",
          "values": [
            {
              "name": "false"
            },
            {
              "name": "true"
            }
          ]
        },
        {
          "name": "fill",
          "description": "The visual fill of the button: solid, outline, or ghost. Defaults to \"solid.\"",
          "values": [
            {
              "name": "ghost"
            },
            {
              "name": "outline"
            },
            {
              "name": "solid"
            }
          ]
        },
        {
          "name": "height",
          "description": "Specifies the (min-)height of the button (in CSS units) when different from the default size."
        },
        {
          "name": "href",
          "description": "The `href` attribute of a link button."
        },
        {
          "name": "name",
          "description": "The `name` attribute of the button, which is passed as part of formData (as a key) for the the pressed submit button."
        },
        {
          "name": "pressed",
          "description": "Specifies if the button is pressed and results in `aria-pressed=\"true|false\"` being placed on the \nbutton when specified. Only valid on actual `button` elements.",
          "values": [
            {
              "name": "false"
            },
            {
              "name": "true"
            }
          ]
        },
        {
          "name": "rel",
          "description": "The `rel` attribute of a link button."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "tag",
          "description": "Specifies whether the button is a true button element or \"link button.\"",
          "values": [
            {
              "name": "a"
            },
            {
              "name": "button"
            }
          ]
        },
        {
          "name": "target",
          "description": "The `target` attribute of a link button."
        },
        {
          "name": "target-prop",
          "description": "The property on the target element being toggled by the button/control (e.g., \"open\")."
        },
        {
          "name": "type",
          "description": "The `type` attribute of the button: button, submit, or reset. Defaults to \"button.\"",
          "values": [
            {
              "name": "button"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            }
          ]
        },
        {
          "name": "value",
          "description": "The `value` attribute of the button, which is passed as part of formData (as a value) for the the pressed submit button."
        },
        {
          "name": "variant",
          "description": "Specifies a variant of the buttons, such as square for buttons with only an icon and call-to-action button.",
          "values": [
            {
              "name": "cta"
            },
            {
              "name": "square"
            }
          ]
        },
        {
          "name": "width",
          "description": "Specifies the (min-)width of the button (in CSS units) when different from the default size."
        }
      ]
    },
    {
      "name": "cbp-card",
      "description": {
        "kind": "markdown",
        "value": "The Card component is a visual treatment for a container meant for similarly-sized, repeated chunks of content."
      },
      "attributes": [
        {
          "name": "color",
          "description": "Optionally specifies a card color (different from the default color) based on predefined design token values.",
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "info"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "context",
          "description": "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.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "disabled",
          "description": "Marks the rendered card in a disabled state when specified."
        },
        {
          "name": "href",
          "description": "Specifies the `href` value for the \"clickable\" interactive cards."
        },
        {
          "name": "interactive",
          "description": "Specifies the interactivity of the card.",
          "values": [
            {
              "name": "clickable"
            },
            {
              "name": "radio"
            },
            {
              "name": "selectable"
            }
          ]
        },
        {
          "name": "stretch",
          "description": "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."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "variant",
          "description": "Specifies optional variants with difference from the default card.",
          "values": [
            {
              "name": "banner"
            },
            {
              "name": "decision"
            },
            {
              "name": "flag"
            }
          ]
        }
      ]
    },
    {
      "name": "cbp-carousel",
      "description": {
        "kind": "markdown",
        "value": "The Carousel is a control meant to take slotted Carousel-items to visually\niterate though to display with a slotted control of a dot-indicator or other control"
      },
      "attributes": [
        {
          "name": "context",
          "description": "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.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "current",
          "description": "used to set the current for the carousel"
        },
        {
          "name": "height",
          "description": "used to set the height (in CSS units or content values) of the carousel"
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "width",
          "description": "used to set the width (in CSS units or content values) of the carousel"
        }
      ]
    },
    {
      "name": "cbp-carousel-item",
      "description": {
        "kind": "markdown",
        "value": "The Carousel Item is meant to be slotted into the CBP-Carousel and represents a single \niteration of content for the CBP-Carousel"
      },
      "attributes": [
        {
          "name": "height",
          "description": "used to set the height (in CSS units or content values) of the carousel-item"
        },
        {
          "name": "width",
          "description": "used to set the width (in CSS units or content values) of the carousel-item"
        }
      ]
    },
    {
      "name": "cbp-checkbox",
      "description": {
        "kind": "markdown",
        "value": "The Checkbox component wraps the slotted native form control (`input type=\"checkbox\"`) and label text, \nproviding cross-browser styling according to the design system specifications."
      },
      "attributes": [
        {
          "name": "checked",
          "description": "Marks the checkbox as checked by default when specified."
        },
        {
          "name": "context",
          "description": "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.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "disabled",
          "description": "Marks the checkbox in a disabled state when specified."
        },
        {
          "name": "field-id",
          "description": "Optionally specify the ID of the checkbox input here, which is used to generate related pattern node IDs and associate everything for accessibility"
        },
        {
          "name": "indeterminate",
          "description": "Marks the checkbox as checked by default when specified."
        },
        {
          "name": "name",
          "description": "The `name` attribute of the checkbox, which is passed as part of formData (as a key) only when the checkbox is checked."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "value",
          "description": "Optionally set the `value` attribute of the checkbox at the component level. Not needed if the slotted checkbox has a value."
        }
      ]
    },
    {
      "name": "cbp-chip",
      "description": {
        "kind": "markdown",
        "value": "The Chip component acts like an interactive version of the Tag and is typically used for selecting or filtering."
      },
      "attributes": [
        {
          "name": "context",
          "description": "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.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "disabled",
          "description": "Marks the rendered button/link in a disabled state when specified."
        },
        {
          "name": "name",
          "description": "Specifies the `name` attribute of the rendered button"
        },
        {
          "name": "pressed",
          "description": "Specifies the pressed state of the button and `aria-pressed` attribute of the rendered button"
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "value",
          "description": "Specifies the `value` attribute of the rendered button"
        }
      ]
    },
    {
      "name": "cbp-code-snippet",
      "description": {
        "kind": "markdown",
        "value": "The Code Snippet component is used to display code in a readable format and facilitate copying it."
      },
      "attributes": [
        {
          "name": "context",
          "description": "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.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "height",
          "description": "Specifies the height (in CSS units) for a multiple line block variant while not expanded."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "variant",
          "description": "Specifies inline or block layouts of the code snippet. Defaults to inline.",
          "values": [
            {
              "name": "block"
            },
            {
              "name": "inline"
            }
          ]
        }
      ]
    },
    {
      "name": "cbp-container",
      "description": {
        "kind": "markdown",
        "value": "The Container component is a building block component for wrapping content and providing \nvisual treatment such as a background image or color."
      },
      "attributes": [
        {
          "name": "background",
          "description": "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."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "text-color",
          "description": "Specifies the text color for content within the container, since it could be on any background."
        },
        {
          "name": "width",
          "description": "Specifies the width of the inner container area."
        }
      ]
    },
    {
      "name": "cbp-dialog",
      "description": {
        "kind": "markdown",
        "value": "The Dialog component represents a dialog overlaid on top of the web page, which can be used similar \nto an alert/confirm dialog or contain a small form."
      },
      "attributes": [
        {
          "name": "accessibility-text",
          "description": "Creates an accessible label for the dialog."
        },
        {
          "name": "color",
          "description": "Optionally specifies a card color (different from the default color) based on predefined design token values.",
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "info"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "open",
          "description": "When set, specifies that the dialog is open"
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "uid",
          "description": "Specifies a unique `ID` for the dialog, used to wire up the controls and accessibility features."
        }
      ]
    },
    {
      "name": "cbp-dot-indicator",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "current",
          "description": "the currently active dot"
        },
        {
          "name": "item-name",
          "description": "unit of measure for what the dot indicator is measuring"
        },
        {
          "name": "items",
          "description": "Length of index dot-indicator is tracking"
        }
      ]
    },
    {
      "name": "cbp-drawer",
      "description": {
        "kind": "markdown",
        "value": "The Drawer is a container that may be hidden and revealed, sliding in from either side of the viewport, \ncontaining application-defined contents. The Drawer may optionally be rendered in the flow of the page \nat larger screen sizes."
      },
      "attributes": [
        {
          "name": "accessibility-text",
          "description": "Creates an accessible label for the drawer (dialog)."
        },
        {
          "name": "context",
          "description": "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.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "open",
          "description": "When set, specifies that the drawer is open"
        },
        {
          "name": "persist-at",
          "description": "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`"
        },
        {
          "name": "position",
          "description": "Specifies the position of the drawer (left or right)",
          "values": [
            {
              "name": "left"
            },
            {
              "name": "right"
            }
          ]
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "uid",
          "description": "Specifies a unique `ID` for the drawer, used to wire up the controls and accessibility features."
        }
      ]
    },
    {
      "name": "cbp-dropdown",
      "description": {
        "kind": "markdown",
        "value": "The Dropdown component offers an alternative to the native select element that can be fully styled \nand support additional variants, such as a multi-select and/or combobox."
      },
      "attributes": [
        {
          "name": "async",
          "description": "Indicates that the filtering will be performed by asynchronous calls (handled by application logic)."
        },
        {
          "name": "context",
          "description": "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.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "create",
          "description": "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."
        },
        {
          "name": "debug",
          "description": "Turns on debug mode, since the dropdown is complex and has complex integration concerns."
        },
        {
          "name": "disabled",
          "description": "Specifies that the field is disabled. Primarily controlled by the parent `cbp-form-field` component."
        },
        {
          "name": "error",
          "description": "Specifies that the field has an error (and sets aria-invalid accordingly). Primarily controlled by the \nparent `cbp-form-field` component."
        },
        {
          "name": "field-id",
          "description": "Optionally specify the ID of the visible control here, which is used to generate related \npattern node IDs and associate everything for accessibility."
        },
        {
          "name": "filter",
          "description": "Specifies whether the dropdown accepts key presses to filter results, enabling combobox functionality."
        },
        {
          "name": "items",
          "description": "A JSON object (or stringified JSON) containing an array of labels, values, and optionally selected status. \nLabels may contain markup as needed, but in such cases, a value should always be specified explicitly.\nThe expected format is [{\"label\":\"string\",\"value\":\"string\",\"selected\":\"boolean (optional\"}, ...]"
        },
        {
          "name": "minimum-input-length",
          "description": "Specifies the number of characters need to emit an event to make an API call and return filtered results. \nThis property is only used when filter=true AND async=true."
        },
        {
          "name": "multiple",
          "description": "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."
        },
        {
          "name": "name",
          "description": "Specifies the name of the (hidden) form field"
        },
        {
          "name": "open",
          "description": "Specifies whether the dropdown menu is open/visible."
        },
        {
          "name": "placeholder",
          "description": "Represents placeholder text on the dropdown control, displayed in a distinctive style from the \nselected item. Defaults to \"Choose Item\". Has no effect on multi-selects, as the component manages this text."
        },
        {
          "name": "readonly",
          "description": "Specifies that the field is readonly. Primarily controlled by the parent `cbp-form-field` component."
        },
        {
          "name": "selected-label",
          "description": "Specifies the visible label on the dropdown control of the selected item. \nPrimarily updated dynamically by the component."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles (to the host) as an object. This property is not reactive."
        },
        {
          "name": "value",
          "description": "Specifies the value of the hidden input holding the value (or barring one, the text label) \nof the selected item. Primarily updated dynamically by the component."
        }
      ]
    },
    {
      "name": "cbp-dropdown-item",
      "description": {
        "kind": "markdown",
        "value": "The Dropdown Item represents an individual option for the Dropdown, similar to an option in a\nnative `select` but with more flexibility."
      },
      "attributes": [
        {
          "name": "current",
          "description": "For Internal Use: Specifies the current item (referenced by `aria-activedescendant`) while using keyboard navigation."
        },
        {
          "name": "disabled",
          "description": ""
        },
        {
          "name": "item-id",
          "description": "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."
        },
        {
          "name": "selected",
          "description": "Specifies if an item is selected"
        },
        {
          "name": "value",
          "description": "Specifies an optional value to be passed in the FormData instead of the display text/label."
        }
      ]
    },
    {
      "name": "cbp-expand",
      "description": {
        "kind": "markdown",
        "value": "The Expand component is a standalone component used for progressive disclosure, organizing content under \na relevant heading, which is used as a control for revealing and hiding its content."
      },
      "attributes": [
        {
          "name": "context",
          "description": "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.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "heading-id",
          "description": "Specifies an optional `id` for the component item heading, also used to generate an `id` for \nthe content wrapper. If this property is not specified, a unique string will \nautomatically be generated."
        },
        {
          "name": "heading-level",
          "description": "The heading level of the accordion item control. Defaults to h3.",
          "values": [
            {
              "name": "h2"
            },
            {
              "name": "h3"
            },
            {
              "name": "h4"
            },
            {
              "name": "h5"
            },
            {
              "name": "h6"
            }
          ]
        },
        {
          "name": "label",
          "description": "The component control label."
        },
        {
          "name": "open",
          "description": "Specifies whether the content is expanded and visible."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-file-input",
      "description": {
        "kind": "markdown",
        "value": "The File Input component builds upon the native file input, allowing for custom styles and \nenhancing functionality when integrated with JavaScript frameworks. This component should \nbe used within the `cbp-form-field` component like any other input pattern."
      },
      "attributes": [
        {
          "name": "accept",
          "description": "Specifies the files types accepted by the file input (may also be set directly on the slotted input). \nThis property is merely a suggestion to the browser and any file type restrictions should still be \nenforced in form validation."
        },
        {
          "name": "context",
          "description": "Specifies the context of the component as it applies to the visual design and whether \nit inverts when light/dark mode is toggled. \nDefault behavior is \"light-inverts\" and does not have to be specified.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "disabled",
          "description": "Specifies that the field is disabled. Primarily controlled by the parent `cbp-form-field` component."
        },
        {
          "name": "enhanced",
          "description": "Experimental: Specifies whether the functionality is enhanced over the native web platform file input. \nThis functionality requires integration with a framework or manual handling of the custom events\nand will not work with a native form post."
        },
        {
          "name": "error",
          "description": "Specifies that the field has an error (and sets aria-invalid accordingly). Primarily controlled by the \nparent `cbp-form-field` component."
        },
        {
          "name": "field-id",
          "description": "Optionally specify the ID of the input here, which is used to generate related pattern \nnode IDs and associate everything for accessibility."
        },
        {
          "name": "multiple",
          "description": "Specifies whether the file input accepts multiple files rather than a single file (may also be set directly on the slotted input)."
        },
        {
          "name": "name",
          "description": "The `name` attribute of the input, which is passed as part of formData (as a key)."
        },
        {
          "name": "status",
          "description": "Supports passing back status and error messages as an array of objects or stringified JSON \nfrom the application. The array shall be the same length as the current file list.\nE.g., [ {\"status\": \"error|success|undefined\", \"message\": \"string\"}, ... ]\nOne could take the valueChange event's detail.value key, which contains an array of File objects, \nand add these keys to it before feeding it back to this component via the `status` property."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-flex",
      "description": {
        "kind": "markdown",
        "value": "The Flex component invokes a CSS Flexbox context, acting as the flex parent and implementing \nCSS Flexbox as a component API. Immediate child nodes are automatically considered flex items."
      },
      "attributes": [
        {
          "name": "align-content",
          "description": "Specifies the alignment of a flex container's items within the flex container (only when there is extra space in the cross-axis).",
          "values": [
            {
              "name": "center"
            },
            {
              "name": "flex-end"
            },
            {
              "name": "flex-start"
            },
            {
              "name": "space-around"
            },
            {
              "name": "space-between"
            },
            {
              "name": "stretch"
            }
          ]
        },
        {
          "name": "align-items",
          "description": "Specifies the alignment for all of the flex container’s items along the cross-axis. Defaults to \"stretch\".",
          "values": [
            {
              "name": "auto"
            },
            {
              "name": "baseline"
            },
            {
              "name": "center"
            },
            {
              "name": "flex-end"
            },
            {
              "name": "flex-start"
            },
            {
              "name": "stretch"
            }
          ]
        },
        {
          "name": "breakpoint",
          "description": "Specifies the size at which the flex children are linearized, specified in CSS units (preferably relative units such as rem)."
        },
        {
          "name": "content-breakpoint",
          "description": "Not yet implemented"
        },
        {
          "name": "direction",
          "description": "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.",
          "values": [
            {
              "name": "column"
            },
            {
              "name": "column-reverse"
            },
            {
              "name": "row"
            },
            {
              "name": "row-reverse"
            }
          ]
        },
        {
          "name": "display",
          "description": "Specifies the display mode. Defaults to \"flex\"",
          "values": [
            {
              "name": "flex"
            },
            {
              "name": "inline-flex"
            }
          ]
        },
        {
          "name": "gap",
          "description": "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."
        },
        {
          "name": "justify-content",
          "description": "Specifies the alignment of flex items along the main axis (of the current line) of the flex container.",
          "values": [
            {
              "name": "center"
            },
            {
              "name": "flex-end"
            },
            {
              "name": "flex-start"
            },
            {
              "name": "space-around"
            },
            {
              "name": "space-between"
            },
            {
              "name": "space-evenly"
            }
          ]
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "wrap",
          "description": "Specifies the wrapping behavior of the flex children. Browser default behavior is \"nowrap\".",
          "values": [
            {
              "name": "nowrap"
            },
            {
              "name": "wrap"
            },
            {
              "name": "wrap-reverse"
            }
          ]
        }
      ]
    },
    {
      "name": "cbp-flex-item",
      "description": {
        "kind": "markdown",
        "value": "The Flex Item component may optionally be used to specify properties of an individual flex item."
      },
      "attributes": [
        {
          "name": "align-self",
          "description": "Specifies the alignment of the specific flex item along the cross-axis separate from the parent context.",
          "values": [
            {
              "name": "auto"
            },
            {
              "name": "baseline"
            },
            {
              "name": "center"
            },
            {
              "name": "flex-end"
            },
            {
              "name": "flex-start"
            },
            {
              "name": "stretch"
            }
          ]
        },
        {
          "name": "flex-basis",
          "description": "Specifies a basis (in CSS units or content values) for calculating flex behavior different from the default of \"auto\" (which usually evaluates to \"content\")."
        },
        {
          "name": "flex-grow",
          "description": "Specifies the growth factor the item will grow at relative to other items. Defaults to zero, as flex items do not grow by default."
        },
        {
          "name": "flex-shrink",
          "description": "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."
        },
        {
          "name": "order",
          "description": "Specifies an ordinal group value for sorting this flex item within its group. Defaults to zero, which renders the items in DOM order."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-footer",
      "description": {
        "kind": "markdown",
        "value": "The Footer component serves site visitors who arrive at the bottom of a page without finding \nwhat they want, typically containing information about the agency and navigation links."
      },
      "attributes": [
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-form",
      "description": {
        "kind": "markdown",
        "value": "The Form component may optionally be used to wrap a native HTML form, providing enhanced functionality and support \nfor some component functionality that would otherwise not be supported by the native platform, e.g., an enhanced \nfile input that supports manipulating the file list and reset functionality for some custom form components."
      },
      "attributes": [
        {
          "name": "prevent-submit",
          "description": "When specified, applies preventDefault() to the submit event and emits a custom event with the formData to hand off to the application."
        }
      ]
    },
    {
      "name": "cbp-form-field",
      "description": {
        "kind": "markdown",
        "value": "The Form Field component represents a generic, reusable pattern for form fields of all types, displaying the \nlabel and form control, along with optional descriptive text and error state in a consistent and accessible manner."
      },
      "attributes": [
        {
          "name": "context",
          "description": "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.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "description",
          "description": "Provide additional details about the field, including whether it's required, which is applied to the form field via `aria-describedby`."
        },
        {
          "name": "disabled",
          "description": "Specifies that the field is disabled; sets all form fields and button controls as disabled."
        },
        {
          "name": "error",
          "description": "Specifies that the field has an error (and sets aria-invalid accordingly)."
        },
        {
          "name": "error-messages",
          "description": "Specifies the error message(s) to replace the description text while in an error state."
        },
        {
          "name": "field-id",
          "description": "Optionally specify the ID of the field here, which is used to generate related pattern node IDs and associate everything for accessibility"
        },
        {
          "name": "group",
          "description": "Specifies that this form field represents a group of (slotted) inputs, such as a radio list, checklist, or related inputs in a compound pattern."
        },
        {
          "name": "label",
          "de