{
  "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": "sticky"
            }
          ]
        }
      ]
    },
    {
      "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": "circle"
            },
            {
              "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": "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 dialog color (different from the default color) based on predefined design token values.",
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "info"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "height",
          "description": "Specifies the dialog height in CSS units (preferably relative units such as rem)."
        },
        {
          "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": "width",
          "description": "Specifies the dialog width in CSS units (preferably relative units such as rem)."
        }
      ]
    },
    {
      "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. (This prop is temporary and will be removed)"
        },
        {
          "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 \nwith 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": "A standalone component used for progressive disclosure, the Expand component organizes content under a relevant heading, \nwhich 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 expand 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 \n(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-floating-action",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "bottom",
          "description": "Sets the bottom position (in CSS units) of the floating action component within the viewport."
        },
        {
          "name": "left",
          "description": "Sets the left position (in CSS units) of the floating action component within the viewport."
        },
        {
          "name": "right",
          "description": "Sets the right position (in CSS units) of the floating action component within the viewport."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles (to the host) as an object. This property is not reactive."
        },
        {
          "name": "top",
          "description": "Sets the top position (in CSS units) of the floating action component within the viewport."
        }
      ]
    },
    {
      "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": "debug",
          "description": ""
        },
        {
          "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",
          "description": "Provide a visible/accessible label for the form field/group."
        },
        {
          "name": "readonly",
          "description": "Specifies that the field is readonly; sets all form fields as readonly and related button controls to disabled."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-form-field-wrapper",
      "description": {
        "kind": "markdown",
        "value": "The Form Field Wrapper component is an optional wrapper that offers means for applying overlays \nand button controls to form inputs in accordance with design requirements."
      },
      "attributes": []
    },
    {
      "name": "cbp-grid",
      "description": {
        "kind": "markdown",
        "value": "The Grid component invokes a CSS Grid context, acting as the grid parent and implementing \nCSS Grid as a component API. Immediate child nodes are automatically considered grid items."
      },
      "attributes": [
        {
          "name": "align-content",
          "description": "Aligns grid content vertically when total grid size is smaller than container.",
          "values": [
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "normal"
            },
            {
              "name": "safe center"
            },
            {
              "name": "space-around"
            },
            {
              "name": "space-between"
            },
            {
              "name": "space-evenly"
            },
            {
              "name": "start"
            },
            {
              "name": "stretch"
            },
            {
              "name": "unsafe center"
            }
          ]
        },
        {
          "name": "align-items",
          "description": "Aligns grid items in the vertical/column axis, perpendicular to the inline axis.",
          "values": [
            {
              "name": "baseline"
            },
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "first baseline"
            },
            {
              "name": "last baseline"
            },
            {
              "name": "normal"
            },
            {
              "name": "self-end"
            },
            {
              "name": "self-start"
            },
            {
              "name": "start"
            },
            {
              "name": "stretch"
            }
          ]
        },
        {
          "name": "breakpoint",
          "description": "The size (in CSS units; preferably relative units such as `rem`) below which the grid items linearize."
        },
        {
          "name": "display",
          "description": "Specifies the grid display. Defaults to \"grid\".",
          "values": [
            {
              "name": "grid"
            },
            {
              "name": "inline-grid"
            }
          ]
        },
        {
          "name": "gap",
          "description": "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)."
        },
        {
          "name": "grid-auto-columns",
          "description": "Specifies the size (in CSS units) of implicitly-created columns using the auto-placement algorithm."
        },
        {
          "name": "grid-auto-flow",
          "description": "Specifies how auto-placed items get flowed into the grid.",
          "values": [
            {
              "name": "column dense"
            },
            {
              "name": "column"
            },
            {
              "name": "row dense"
            },
            {
              "name": "row"
            }
          ]
        },
        {
          "name": "grid-auto-rows",
          "description": "Specifies the size (in CSS units) of implicitly-created rows using the auto-placement algorithm."
        },
        {
          "name": "grid-template-areas",
          "description": "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."
        },
        {
          "name": "grid-template-columns",
          "description": "Specifies the track sizing functions (and optionally line names) of the grid columns as a space-separated track list."
        },
        {
          "name": "grid-template-rows",
          "description": "Specifies the track sizing functions (and optionally line names) of the grid rows as a space-separated track list."
        },
        {
          "name": "justify-content",
          "description": "Justifies grid content horizontally when total grid size is smaller than container.",
          "values": [
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "left"
            },
            {
              "name": "normal"
            },
            {
              "name": "right"
            },
            {
              "name": "safe center"
            },
            {
              "name": "space-around"
            },
            {
              "name": "space-between"
            },
            {
              "name": "space-evenly"
            },
            {
              "name": "start"
            },
            {
              "name": "stretch"
            },
            {
              "name": "unsafe center"
            }
          ]
        },
        {
          "name": "justify-items",
          "description": "Justifies grid content horizontally, along the inline/row axis.",
          "values": [
            {
              "name": "baseline"
            },
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "first baseline"
            },
            {
              "name": "last baseline"
            },
            {
              "name": "left"
            },
            {
              "name": "legacy"
            },
            {
              "name": "normal"
            },
            {
              "name": "right"
            },
            {
              "name": "safe center"
            },
            {
              "name": "self-end"
            },
            {
              "name": "self-start"
            },
            {
              "name": "start"
            },
            {
              "name": "stretch"
            },
            {
              "name": "unsafe center"
            }
          ]
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-grid-item",
      "description": {
        "kind": "markdown",
        "value": "The Grid Item component may optionally be used to specify properties of an individual grid item."
      },
      "attributes": [
        {
          "name": "align-self",
          "description": "Aligns this specific grid item in the vertical/column axis, perpendicular to the inline axis, separate from the parent context."
        },
        {
          "name": "grid-area",
          "description": "Names the Grid Area for use with grid-template-area on the parent."
        },
        {
          "name": "grid-column-end",
          "description": "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."
        },
        {
          "name": "grid-column-start",
          "description": "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."
        },
        {
          "name": "grid-row-end",
          "description": "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."
        },
        {
          "name": "grid-row-start",
          "description": "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."
        },
        {
          "name": "justify-self",
          "description": "Justifies this specific grid item content horizontally, along the inline/row axis, separate from the parent context."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-hide",
      "description": {
        "kind": "markdown",
        "value": "The Hide component represents a component-based implementation for programmatically hiding \n(or visually hiding) content based on application logic or media query."
      },
      "attributes": [
        {
          "name": "display",
          "description": "Specifies the host's display when visible. The default is `inline`, which is the default display of a custom element."
        },
        {
          "name": "hide",
          "description": "When set to true, the host is hidden. Allows for toggling via property binding rather than media query."
        },
        {
          "name": "hide-at",
          "description": "Specifies a valid CSS media query (preferably using relative units), when met will hide the wrapped content\nusing display: none; (e.g., `max-width: 64em`). \nFor complex media queries using AND/OR operators, each condition must be enclosed in parentheses \n(e.g., `(width < 37.5rem) OR (width > 63rem)`)."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "visually-hide",
          "description": "When set to true, the host is visually hidden in an accessible manner. Allows for toggling via property binding rather than media query."
        },
        {
          "name": "visually-hide-at",
          "description": "Specifies a valid CSS media query (preferably using relative units), when met will visually hide the wrapped content \nin a way that is it still accessible as a label (e.g., `max-width: 64em`),\nFor complex media queries using AND/OR operators, each condition must be enclosed in parentheses \n(e.g., `(width < 37.5rem) OR (width > 63rem)`)."
        }
      ]
    },
    {
      "name": "cbp-icon",
      "description": {
        "kind": "markdown",
        "value": "The Icon component represents a standard API for embedding accessible Scalable Vector Graphics (SVG) icons \ninto applications/documents. This component contains a number of icons used by the design system and may be used to wrap\nexternal icons for consistent styling via the component API."
      },
      "attributes": [
        {
          "name": "accessibility-text",
          "description": "For icons that are not decorative, accessibilityText is rendered as an `aria-label` on the `svg` tag."
        },
        {
          "name": "color",
          "description": "Optionally specifies the color of the icon (ideally using design-token-based CSS variables). Defaults to \"currentColor.\""
        },
        {
          "name": "name",
          "description": "Specifies which icon to use from the built-in set of icons."
        },
        {
          "name": "rotate",
          "description": "Optionally specify the degrees of rotation."
        },
        {
          "name": "size",
          "description": "Optionally specifies the size (both width and height) of the icon, which \ndefaults (via CSS) to `1rem` (16px), the intended size of icons alongside body text. \nIcon size may be specified via this property/attribute or the custom \nCSS property `--cbp-icon-size`."
        },
        {
          "name": "src",
          "description": "Specifies the exact `src` of an SVG file to use."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-link",
      "description": {
        "kind": "markdown",
        "value": "The cbp-link component is used to render an anchor or provide consistent styling for a slotted anchor."
      },
      "attributes": [
        {
          "name": "accessibility-text",
          "description": "Specifies an accessible label for the rendered anchor via `aria-label`."
        },
        {
          "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": "Specifies whether the the rendered anchor is \"disabled\". Creating disabled anchors may introduce accessibility concerns - use with caution."
        },
        {
          "name": "download",
          "description": "Specifies the `download` boolean attribute of the rendered anchor."
        },
        {
          "name": "href",
          "description": "Specifies the `href` of the rendered anchor."
        },
        {
          "name": "language",
          "description": "Specifies the `lang` attribute of the rendered anchor."
        },
        {
          "name": "rel",
          "description": "Specifies the `rel` attribute of the rendered anchor."
        },
        {
          "name": "shortcut-key",
          "description": "Defines an `accesskey` attribute of the rendered anchor."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "target",
          "description": "Specifies the `target` attribute of the rendered anchor."
        }
      ]
    },
    {
      "name": "cbp-list",
      "description": {
        "kind": "markdown",
        "value": "The List component is used to render semantic HTML lists in accordance with the design system, \nsupporting additional variants with custom/user-defined icons and description lists."
      },
      "attributes": [
        {
          "name": "accessibility-text",
          "description": "Specifies an accessible label for the list as an `aria-label`, similar to a table `caption`."
        },
        {
          "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": "size",
          "description": "Specifies the font size for the list",
          "values": [
            {
              "name": "large"
            },
            {
              "name": "normal"
            }
          ]
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "tag",
          "description": "Specifies the semantic tag to be rendered.",
          "values": [
            {
              "name": "dl"
            },
            {
              "name": "ol"
            },
            {
              "name": "ul"
            }
          ]
        },
        {
          "name": "variant",
          "description": "Specifies the variant of list (unstyled, icon, special)",
          "values": [
            {
              "name": "icon"
            },
            {
              "name": "link"
            },
            {
              "name": "unstyled"
            }
          ]
        }
      ]
    },
    {
      "name": "cbp-listbox",
      "description": {
        "kind": "markdown",
        "value": "A Listbox wraps a standard text or search input, enhancing it by providing suggestions in a format visually similar to a dropdown, from which a selection may optionally be made."
      },
      "attributes": [
        {
          "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.\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": "items",
          "description": "A JSON object (or stringified JSON) containing an array of labels. Labels may contain markup as needed but \nonly the text can be populated into the native input upon selection.\nThe expected format is [{\"label\":\"string\"}, ...]"
        },
        {
          "name": "open",
          "description": "Specifies whether the listbox is open/visible."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles (to the host) as an object. This property is not reactive."
        },
        {
          "name": "uid",
          "description": "Optionally specify the ID of the listbox element (role=listbox), which is used to generate related \npattern node IDs and associate it to the wrapped input for accessibility."
        }
      ]
    },
    {
      "name": "cbp-loader",
      "description": {
        "kind": "markdown",
        "value": "The Loader is used as a visual indicator of progress during waiting periods."
      },
      "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. \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": "determinate",
          "description": "Defines if the loader will be in determinate/indeterminate, if true loader will display the current value out of max value"
        },
        {
          "name": "error",
          "description": "Used to set the loader to the 'error' state of the loader"
        },
        {
          "name": "max",
          "description": "Used in deternminate mode to display the max value of loaded content"
        },
        {
          "name": "orientation",
          "description": "Used to set the text orientation for the circular determinate loader's description",
          "values": [
            {
              "name": "horizontal"
            },
            {
              "name": "vertical"
            }
          ]
        },
        {
          "name": "progress-id",
          "description": "Specifies a unique `ID` for the loader, used to wire up the controls and accessibility features."
        },
        {
          "name": "size",
          "description": "Defines the size of the loader render, default value of large",
          "values": [
            {
              "name": "large"
            },
            {
              "name": "small"
            }
          ]
        },
        {
          "name": "success",
          "description": "Used to set the loader to the 'success' state of the loader"
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "value",
          "description": "Used in deternminate mode to display the current value of loaded content"
        },
        {
          "name": "variant",
          "description": "Defines if the loader will be in displayed as a circular or linear variant",
          "values": [
            {
              "name": "circular"
            },
            {
              "name": "linear"
            }
          ]
        }
      ]
    },
    {
      "name": "cbp-menu",
      "description": {
        "kind": "markdown",
        "value": "A Menu contains additional actions in the form of links or buttons, which can be shown by activating a control."
      },
      "attributes": [
        {
          "name": "accessibility-text",
          "description": "Creates an accessible label for the menu control."
        },
        {
          "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 menu is open."
        },
        {
          "name": "position",
          "description": "Specifies the position of the menu. Defaults to \"bottom-start\".",
          "values": [
            {
              "name": "bottom-end"
            },
            {
              "name": "bottom-start"
            },
            {
              "name": "top-end"
            },
            {
              "name": "top-start"
            }
          ]
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "uid",
          "description": "Specifies a unique `ID` for the menu, used to wire up the controls and accessibility features."
        }
      ]
    },
    {
      "name": "cbp-menu-item",
      "description": {
        "kind": "markdown",
        "value": "The Menu Item component wraps each individual control (link or button) within the menu."
      },
      "attributes": [
        {
          "name": "color",
          "description": "Specifies a color variant for the menu item. Currently the only supported variant is \"danger\".",
          "values": [
            {
              "name": "danger"
            }
          ]
        },
        {
          "name": "indent-level",
          "description": "Specifies an indent level to represent hierarchical items. Defaults to zero."
        }
      ]
    },
    {
      "name": "cbp-multicol",
      "description": {
        "kind": "markdown",
        "value": "The Multicol component is a wrapper that invokes a CSS Multi-column layout context, ideal for \nusing with semantic lists and checklists/radio lists."
      },
      "attributes": [
        {
          "name": "columns",
          "description": "Specifies the maximum number of columns"
        },
        {
          "name": "gap",
          "description": "Specifies the gap between columns in CSS units (preferably relative units such as `rem`)."
        },
        {
          "name": "nobreak",
          "description": "Specifies that children shall not be broken to spread contents across columns (using `break-inside: avoid` CSS)."
        },
        {
          "name": "rule",
          "description": "Specifies the rule separating each column (syntax is similar to CSS borders, including a width, style, and color)."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "width",
          "description": "Specifies the minimum column width in CSS units (preferably relative units such as `rem`). \nThe column width may affect how many columns are actually used based upon available space."
        }
      ]
    },
    {
      "name": "cbp-nav-item",
      "description": {
        "kind": "markdown",
        "value": "The Nav Item component wraps each individual control (link or button) within the App Header."
      },
      "attributes": [
        {
          "name": "current",
          "description": "Specifies whether this is the Nav Item that represents the current page. Only one item per set should be marked as current."
        },
        {
          "name": "name",
          "description": "Specifies a name used to associated Nav Items with Subnav Items."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object."
        }
      ]
    },
    {
      "name": "cbp-notice",
      "description": {
        "kind": "markdown",
        "value": "The Notice component presents persistent information that gives extra insight into a particular content area."
      },
      "attributes": [
        {
          "name": "color",
          "description": "Optionally specifies a notice color based on predefined design token values. Defaults to \"info\".",
          "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": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-pagination",
      "description": {
        "kind": "markdown",
        "value": "The Pagination component presents a common UI pattern for displaying data sets broken up into smaller, \nmore consumable (and performant) chunks or \"pages.\""
      },
      "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": "max-pages",
          "description": "Specifies the current maximum number of pages allowed. This property should be used for extremely large data sets \nthat have the potential to returns hundreds or thousands of pages."
        },
        {
          "name": "page",
          "description": "Specifies the current page being viewed. Defaults to 1."
        },
        {
          "name": "page-size",
          "description": "Specifies the number of items to show per page. Accepts any number or \"all\". Defaults to 10.",
          "values": [
            {
              "name": "all"
            }
          ]
        },
        {
          "name": "records",
          "description": "Specifies the number of records in the entire data set (complete or filtered) to be paginated."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-panel",
      "description": {
        "kind": "markdown",
        "value": "A panel is a styled container for displaying information within the main page content area or to either side."
      },
      "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": "cbp-radio",
      "description": {
        "kind": "markdown",
        "value": "The Radio component wraps the slotted native form control (`input type=\"radio\"`) and label text, providing cross-browser styling."
      },
      "attributes": [
        {
          "name": "checked",
          "description": "Marks the radio button 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 radio button 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": "name",
          "description": "The `name` attribute of the radio button, which is passed as part of formData (as a key) only when the radio button is checked."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "value",
          "description": "Optionally set the `value` attribute of the radio button at the component level. Not needed if the slotted radio button has a value."
        }
      ]
    },
    {
      "name": "cbp-resize-observer",
      "description": {
        "kind": "markdown",
        "value": "The Resize Observer component is a wrapper that implements a resizeObserver to detect changes to its size,\ntypically to compare to an immediate child that is wrapping a collection of variable-sized elements \n(e.g., links, tabs, etc.), in order to implement responsive functionality that cannot be accomplished \nwith a media query or container query."
      },
      "attributes": [
        {
          "name": "debounce",
          "description": "The number of milliseconds to debounce the event emitter. Defaults to 0.\nWhile the native resize observer is very performant, the calculations within its handler function may\nnot be, and performance may benefit from debouncing this event emitter."
        }
      ]
    },
    {
      "name": "cbp-section",
      "description": {
        "kind": "markdown",
        "value": "The Section component represents a generic block that may be used for semantic meaning or as \na generic container for styling."
      },
      "attributes": [
        {
          "name": "accessibility-text",
          "description": "Specifies an accessible label as `aria-label` to make a `section` tag an accessible landmark element. Likely has no effect otherwise."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "tag",
          "description": "Specifies the tag to render. Use `section` with the `accessibilityText` property to make an accessible landmark element.",
          "values": [
            {
              "name": "div"
            },
            {
              "name": "none"
            },
            {
              "name": "section"
            }
          ]
        }
      ]
    },
    {
      "name": "cbp-segmented-button-group",
      "description": {
        "kind": "markdown",
        "value": "The Segmented Button Group component wraps multiple buttons and can be used as a multi-option \ntoggle or group of controls."
      },
      "attributes": [
        {
          "name": "accessibility-text",
          "description": "Specifies accessibility text used to label the group, applied to the group via aria-label."
        },
        {
          "name": "disabled",
          "description": ""
        },
        {
          "name": "multiple",
          "description": "Specifies whether multiple buttons may be activated at the same time. Defaults to false."
        },
        {
          "name": "name",
          "description": "Optionally specifies the name of the (hidden) form field as a formData key \nwhen a value is intended to be passed."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "value",
          "description": "Optionally specifies a value of the group as a way to set the initial button pressed states and/or\nto be passed as part of submitted formData when a name is also specified. \nRequires that the individual buttons have a value specified for the group to pass a value."
        }
      ]
    },
    {
      "name": "cbp-skip-nav",
      "description": {
        "kind": "markdown",
        "value": "The Skip Navigation link (or \"Skip Nav\") is an essential accessibility feature that allows screen \nreader users to skip repetitive portions of the page and get right to the main content."
      },
      "attributes": [
        {
          "name": "shortcut-key",
          "description": "Specifies a shortcut key, which is applied as an `accessKey` attribute."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "target-id",
          "description": "Specifies the target `id` where focus is sent when the \"skip nav\" link is activated. Defaults to \"main\"."
        }
      ]
    },
    {
      "name": "cbp-slider",
      "description": {
        "kind": "markdown",
        "value": "The Slider component allows for the selection of a value within a range, styled to design system specifications."
      },
      "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. \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": "error",
          "description": "Specifies that the field has an error (and sets aria-invalid accordingly). Primarily controlled by the parent `cbp-form-field` component."
        },
        {
          "name": "field-id",
          "description": "Optionally specify the ID of the visible control here, which is used to generate related pattern node IDs and associate everything for accessibility. \nFor range sliders, \"-start\" and \"-end\" are appended to the specified/generated value automatically."
        },
        {
          "name": "gap",
          "description": "Specifies the minimum difference in values in a range slider. If a non-zero value is specified, keep in mind the interaction with the \"step\" property."
        },
        {
          "name": "hide-input",
          "description": "Specifies whether the numeric input is hidden (shown by default)."
        },
        {
          "name": "hide-minmax",
          "description": "Specifies whether the min/max values are hidden (shown by default)."
        },
        {
          "name": "max",
          "description": "Specifies the maximum value of the slider and numeric entry field (defaults to 100). \nThis prop should be set on this component rather than (or in addition to) the slotted `input type=\"range\"`."
        },
        {
          "name": "min",
          "description": "Specifies the minimum value of the slider and numeric entry field (defaults to 0). \nThis prop should be set on this component rather than (or in addition to) the slotted `input type=\"range\"`."
        },
        {
          "name": "step",
          "description": "Specifies the step value of the slider and numeric entry field (defaults to 1). \nThis prop should be set on this component rather than (or in addition to) the slotted `input type=\"range\"`."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "value",
          "description": "Specifies the value of the slider and numeric entry field. It is highly recommended to set a contextually sensible default because\nthe native `input type=\"range\" cannot have an undefined or empty string as a value. If no value is specified, the default value will \nbe reported (and submitted) as halfway between the specified minimum and maximum; unless the maximum is actually less than the minimum, \nin which case the default is set to the value of the minimum attribute.\nThis prop should be set on this component rather than (or in addition to) the slotted `input type=\"range\"`."
        },
        {
          "name": "variant",
          "description": "Specifies whether the control is a single slider or a range with two values (can be auto-detected by the number of slotted `input[type=range]` tags).",
          "values": [
            {
              "name": "range"
            },
            {
              "name": "single"
            }
          ]
        }
      ]
    },
    {
      "name": "cbp-structured-list",
      "description": {
        "kind": "markdown",
        "value": "Structured lists are a way of displaying long lists of data where the user is not directly comparing \nraw data one row at a time."
      },
      "attributes": [
        {
          "name": "accessibility-text",
          "description": "Specifies an accessible label for the list as an `aria-label`, similar to a table `caption`. \nSince the structured list contains significant amount of data, it is advised to always specify a label describing the list."
        },
        {
          "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": "header-id",
          "description": "References an `id` placed on the element slotted into the `cbp-structured-list-header` named slot to provide additional accessible context to the list label."
        },
        {
          "name": "striped",
          "description": "Specifies whether the list is striped, designating whether the colored rows are the odd or even rows (CBP DS standard is even when used).",
          "values": [
            {
              "name": "even"
            },
            {
              "name": "odd"
            }
          ]
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-structured-list-item",
      "description": {
        "kind": "markdown",
        "value": "The Structured List Item component may optionally be used to hold each list item's content. This component \nis needed primarily when designating an item with the \"danger\" color or when list items are selectable."
      },
      "attributes": [
        {
          "name": "color",
          "description": "Optionally specifies a color variant based on design tokens.",
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "info"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-subnav",
      "description": {
        "kind": "markdown",
        "value": "Sub-Navigation (Subnav) is meant to be used as a secondary, vertical navigation."
      },
      "attributes": [
        {
          "name": "accessibility-text",
          "description": "Sets the aria-label for the `nav` landmark element rendered by the subnav."
        },
        {
          "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": "flat",
          "description": "Specifies a flat display, rather than the default indented layout based on tag hierarchy."
        },
        {
          "name": "store",
          "description": "Specifies whether the Subnav pushes updates to a state store to integrate with the Application Header."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-subnav-item",
      "description": {
        "kind": "markdown",
        "value": "The Subnav Item component represents a single navigation link and can also be nested multiple levels to convey a site/navigation hierarchy."
      },
      "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": "Specifies the current item within the collection of Subnav Items."
        },
        {
          "name": "href",
          "description": "Specifies the href for the Subnav Item anchor."
        },
        {
          "name": "label",
          "description": "Specifies the text label for the subnav item."
        },
        {
          "name": "name",
          "description": "Specifies a name used to associated Nav Items with Subnav Items."
        },
        {
          "name": "open",
          "description": "Specifies whether a Subnav Item with nested children is expanded or collapsed. \nPrimarily used internally for user interactions."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "uid",
          "description": "Optionally specifies a unique `ID` for the menu, used to wire up the controls and accessibility features."
        }
      ]
    },
    {
      "name": "cbp-tab",
      "description": {
        "kind": "markdown",
        "value": "The Tab component represents an individual tab control within a tab set."
      },
      "attributes": [
        {
          "name": "accessibility-text",
          "description": "For tabs without a visible text label (e.g., icon tabs) or a label that is insufficiently unique/descriptive, you may provide accessibility text, which is rendered as an `aria-label` on the tab control (button element)."
        },
        {
          "name": "color",
          "description": "An optional color variant.",
          "values": [
            {
              "name": "danger"
            }
          ]
        },
        {
          "name": "name",
          "description": "An `ID`-conformant unique name of the tab; This value should match the corresponding cbp-tab-panel name and links the two together."
        },
        {
          "name": "selected",
          "description": "Specifies whether this is the selected tab. Only one tab per tabset should be marked as selected."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-tab-panel",
      "description": {
        "kind": "markdown",
        "value": "The Tab Panel component is a wrapper representing a tabpanel role and containing the content to be progressively disclosed."
      },
      "attributes": [
        {
          "name": "name",
          "description": "An `ID`-conformant unique name of the tab-panel, applied as an `id` on this tab panel; This value should match the corresponding cbp-tab name and links the two together."
        },
        {
          "name": "selected",
          "description": "Specifies if this is the tab panel corresponding to the selected tab and currently visible. This property is managed by the parent cbp-tabs component and does not need to be set manually."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-table",
      "description": {
        "kind": "markdown",
        "value": "The Table component is a wrapper component encapsulating design system styles for semantic HTML \ntables as well as applying progressive enhancements to the contained table."
      },
      "attributes": [
        {
          "name": "column-hover",
          "description": "Specifies whether a hover effect is applied to columns when the column header is hovered. This feature is opt-in."
        },
        {
          "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. \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": "debug",
          "description": "Turning on debug mode will log some calculations to the console for troubleshooting."
        },
        {
          "name": "hover",
          "description": "Specifies whether the mouse cursor highlights the table row or cell on hover. Defaults to \"row\".",
          "values": [
            {
              "name": "cell"
            },
            {
              "name": "row"
            }
          ]
        },
        {
          "name": "overflow",
          "description": "Specifies whether the table is striped, designating whether the colored rows are the odd or even rows (CBP DS standard is even when used).",
          "values": [
            {
              "name": "linearize"
            },
            {
              "name": "scroll"
            }
          ]
        },
        {
          "name": "striped",
          "description": "Specifies whether the table is striped, designating whether the colored rows are the odd or even rows (CBP DS standard is even when used).",
          "values": [
            {
              "name": "even"
            },
            {
              "name": "odd"
            }
          ]
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-tabs",
      "description": {
        "kind": "markdown",
        "value": "Tabs are a common UI pattern of progressive disclosure mimicking the real world paradigm of tabbed \nfolders, each with a label and containing their own set of contents. Tabs allow the user to navigate \nmultiple views without leaving the page. This component wraps individual `cbp-tab` components."
      },
      "attributes": [
        {
          "name": "accessibility-text",
          "description": "The accessible label of the tablist. Required unless `aria-labelledby` is specified on the host tag directly."
        },
        {
          "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-tag",
      "description": {
        "kind": "markdown",
        "value": "The Tag component is a non-interactive visual treatment for text, typically representing labels, keywords, or search terms."
      },
      "attributes": [
        {
          "name": "color",
          "description": "Specifies a tag color variant. Default does not need to be specified.",
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "default"
            },
            {
              "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": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-toast",
      "description": {
        "kind": "markdown",
        "value": "The Toast component displays a brief, non-intrusive message that appears on a user interface to \nprovide feedback about an action or status update."
      },
      "attributes": [
        {
          "name": "color",
          "description": "specifies the color for the toast",
          "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": "duration",
          "description": "specifies time in seconds for the toast to be displayed"
        },
        {
          "name": "open",
          "description": "When set, specifies that the toast is open"
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-toggle",
      "description": {
        "kind": "markdown",
        "value": "The Toggle component is a visual variant of a Boolean selection form control (checkbox), \nrepresenting an on/off toggle switch."
      },
      "attributes": [
        {
          "name": "checked",
          "description": "Marks the toggle as checked (on) 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. \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": "Marks the toggle in a disabled state when specified."
        },
        {
          "name": "hide-status",
          "description": "Hides the status text after the toggle control when specified."
        },
        {
          "name": "name",
          "description": "Optionally set the `name` attribute of the checkbox at the component level, which is passed as part of \nformData (as a key) only when the checkbox is checked. \nNot needed if the slotted checkbox has a name."
        },
        {
          "name": "status-text-off",
          "description": "Specifies the status text for the false toggle."
        },
        {
          "name": "status-text-on",
          "description": "Specifies the status text for the true toggle."
        },
        {
          "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. \nNot needed if the slotted checkbox has a value."
        }
      ]
    },
    {
      "name": "cbp-tooltip",
      "description": {
        "kind": "markdown",
        "value": "The Tooltip component allows for the disclosure of supplemental, non-essential information via a triggering element."
      },
      "attributes": [
        {
          "name": "alignment",
          "description": "sets where the tooltip will be displayed and where the caret will be placed",
          "values": [
            {
              "name": "bottom-center"
            },
            {
              "name": "bottom-left"
            },
            {
              "name": "bottom-right"
            },
            {
              "name": "left-bottom"
            },
            {
              "name": "left-center"
            },
            {
              "name": "left-top"
            },
            {
              "name": "right-bottom"
            },
            {
              "name": "right-center"
            },
            {
              "name": "right-top"
            },
            {
              "name": "top-center"
            },
            {
              "name": "top-left"
            }
          ]
        },
        {
          "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": "field-id",
          "description": "Optionally specify the ID of the visible control here, which is used to generate related pattern node IDs and associate everything for accessibility"
        },
        {
          "name": "open",
          "description": "When set, specifies that the tooltip is open"
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "variant",
          "description": "used to set styles for the definition link for text controls",
          "values": [
            {
              "name": "definition"
            }
          ]
        }
      ]
    },
    {
      "name": "cbp-treeview",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "accessibility-text",
          "description": "Creates an accessible label for the treeview control if one has not been associated via `aria-labelledby`."
        },
        {
          "name": "context",
          "description": "Specifies the context of the component (and its child items) as it applies to the visual design and whether it \ninverts 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": "name",
          "description": "Specifies the name for all checkboxes in selectable treeviews, similar to a checklist."
        },
        {
          "name": "selectable",
          "description": "Specifies that the entire tree is selectable. Setting this property at this level overrides all child treeview items."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-treeview-item",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "checked",
          "description": "Specifies whether a selectable item (and its rendered checkbox) is in a checked state."
        },
        {
          "name": "context",
          "description": "Specifies the context of the component as it applies to the visual design and whether it \ninverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified. \nThis property is passed down from the parent `cbp-treeview` and does not need to be set at this level.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "indeterminate",
          "description": "Specifies whether a selectable item (and its rendered checkbox) is in an indeterminate state. This logic is handled internally and should not need to be set manually."
        },
        {
          "name": "label",
          "description": "Specifies the label to be displayed in the treeview item control. For selectable items, this becomes the checkbox label."
        },
        {
          "name": "name",
          "description": "Specifies a name for a selectable item's checkbox."
        },
        {
          "name": "open",
          "description": "Specifies whether the item, if a parent to nested items, is open/expanded."
        },
        {
          "name": "selectable",
          "description": "Specifies whether this item is selectable, and if so renders a checkbox within the item.\nThis property can be set on the parent `cbp-treeview` component to be applied to all treeview items."
        },
        {
          "name": "uid",
          "description": "Specifies a unique `id` for the treeview item, used to wire up the controls and accessibility features. \nThis property is not required and will auto-generate an `id` if none is specified."
        },
        {
          "name": "value",
          "description": "Specifies the value for a selectable item's checkbox and to pass in the `cbp-treeview`'s custom event emitter."
        }
      ]
    },
    {
      "name": "cbp-typography",
      "description": {
        "kind": "markdown",
        "value": "The Typography component encapsulates predefined styles for different kinds of text that makes \nup a website, merging design language with CSS and HTML implementations."
      },
      "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 whether the text contains visual treatments that act as a divider.",
          "values": [
            {
              "name": "fill"
            },
            {
              "name": "underline"
            }
          ]
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "tag",
          "description": "Specifies the semantic tag to be rendered.",
          "values": [
            {
              "name": "code"
            },
            {
              "name": "div"
            },
            {
              "name": "h1"
            },
            {
              "name": "h2"
            },
            {
              "name": "h3"
            },
            {
              "name": "h4"
            },
            {
              "name": "h5"
            },
            {
              "name": "h6"
            },
            {
              "name": "p"
            },
            {
              "name": "pre"
            },
            {
              "name": "span"
            }
          ]
        },
        {
          "name": "variant",
          "description": "Specifies the visual style of the text regardless of the semantic tag.",
          "values": [
            {
              "name": "body-text"
            },
            {
              "name": "heading-dialog"
            },
            {
              "name": "heading-lg"
            },
            {
              "name": "heading-md"
            },
            {
              "name": "heading-sm"
            },
            {
              "name": "heading-xl"
            },
            {
              "name": "heading-xs"
            },
            {
              "name": "heading-xxl"
            },
            {
              "name": "masthead-1"
            },
            {
              "name": "masthead-2"
            },
            {
              "name": "subhead"
            }
          ]
        }
      ]
    },
    {
      "name": "cbp-universal-header",
      "description": {
        "kind": "markdown",
        "value": "The Universal Header component establishes CBP branding, displaying the seal in a standard DHS blue header."
      },
      "attributes": [
        {
          "name": "logo-src-lg",
          "description": "Fully qualified or relative URL pointing to the larger SVG containing the CPB seal with text."
        },
        {
          "name": "logo-src-sm",
          "description": "Fully qualified or relative URL pointing to the plain SVG version of the CPB seal for smaller screens (\"CBP\" text is supplied via CSS automatically)."
        }
      ]
    },
    {
      "name": "cbp-usa-banner",
      "description": {
        "kind": "markdown",
        "value": "The \"USA Banner\" is similar to the U.S. Web Design System \"banner\" component, intended to establish trust \nas a common identifier on public-facing government sites."
      },
      "attributes": [
        {
          "name": "open",
          "description": "Specifies that the banner is open. Primarily used for internal component logic."
        }
      ]
    }
  ]
}