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

Web components for the CBP Design System.

{
  "version": 1.1,
  "tags": [
    {
      "name": "cbp-accordion",
      "description": {
        "kind": "markdown",
        "value": "An Accordion is a common paradigm for progressive disclosure, organizing content under a relevant heading \nthat is used as a control for revealing and hiding its content. This component wraps multiple `cbp-accordion-item` tags."
      },
      "attributes": [
        {
          "name": "context",
          "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "multiple",
          "description": "Specifies whether multiple accordion items can be open at the same time. Defaults to false."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-accordion-item",
      "description": {
        "kind": "markdown",
        "value": "Accordion Items are placed as children of the parent `cbp-accordion` tag. The content is slotted and the \nheading control text is provided via the label property or the optional named slot."
      },
      "attributes": [
        {
          "name": "color",
          "description": "Specifies an optional color variant of the accordion item.",
          "values": [
            {
              "name": "danger"
            }
          ]
        },
        {
          "name": "heading-id",
          "description": "Specifies an optional `id` for the accordion item heading, also used to generate an `id` for \nthe accordion item content wrapper. If this property is not specified, a unique string will \nautomatically be generated."
        },
        {
          "name": "heading-level",
          "description": "The heading level of the accordion item control. Defaults to h3.",
          "values": [
            {
              "name": "h2"
            },
            {
              "name": "h3"
            },
            {
              "name": "h4"
            },
            {
              "name": "h5"
            },
            {
              "name": "h6"
            }
          ]
        },
        {
          "name": "label",
          "description": "The accordion control label."
        },
        {
          "name": "open",
          "description": "Specifies whether the accordion is open."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-action-bar",
      "description": {
        "kind": "markdown",
        "value": "The Action Bar acts as a container for form controls (buttons) or other tools to affect the content of the page. \nIt is often used for batch actions on table or structured list data."
      },
      "attributes": [
        {
          "name": "context",
          "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "variant",
          "description": "Specifies whether the action bar is inline or floating. Defaults to inline.",
          "values": [
            {
              "name": "floating"
            },
            {
              "name": "inline"
            }
          ]
        }
      ]
    },
    {
      "name": "cbp-app",
      "description": {
        "kind": "markdown",
        "value": "An overarching App tag acts as a low-barrier way to get core design system elements (design tokens and styles)\nas well as a way to manage site/page-level settings such as dark mode."
      },
      "attributes": [
        {
          "name": "app-name",
          "description": "Specifies the application name for logging with debug information."
        },
        {
          "name": "app-version",
          "description": "Specifies the application version for logging with debug information. This may be automated by importing it from the application's package.json, if used."
        },
        {
          "name": "debug",
          "description": "Turning on debug mode will log the version of the design system package and Stencil version it was built with to the console, in addition to application name and version, if specified."
        },
        {
          "name": "theme",
          "description": "Optionally specifies light/dark mode. This is only needed if the application can change the theme separate from OS settings.",
          "values": [
            {
              "name": "dark"
            },
            {
              "name": "light"
            },
            {
              "name": "system"
            }
          ]
        }
      ]
    },
    {
      "name": "cbp-app-header",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "subnav-drawer-id",
          "description": "Specifies the id of the drawer to be launched"
        }
      ]
    },
    {
      "name": "cbp-badge",
      "description": {
        "kind": "markdown",
        "value": "The Badge component is generally used for emphasizing a numeric characteristic of an object \n(e.g., the number of unread items in a folder)."
      },
      "attributes": [
        {
          "name": "color",
          "description": "Specifies a color variant. Currently the only variant supported is \"danger\".",
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "default"
            }
          ]
        },
        {
          "name": "context",
          "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-banner",
      "description": {
        "kind": "markdown",
        "value": "The Banner is a container spanning the entire viewport meant to highlight urgent or important content."
      },
      "attributes": [
        {
          "name": "color",
          "description": "Specifies a color variant for the banner.",
          "values": [
            {
              "name": "info"
            }
          ]
        }
      ]
    },
    {
      "name": "cbp-breadcrumb",
      "description": {
        "kind": "markdown",
        "value": "Breadcrumbs give users an indicator of where they are within a site/application hierarchy, \nespecially helpful when deeper within the site’s architecture. This component should wrap links \nrepresenting the parent sections of the current page, but not including the current page."
      },
      "attributes": [
        {
          "name": "context",
          "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "divider",
          "description": "Specifies a character as a divider between breadcrumb links. Defaults to \"/\"."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-button",
      "description": {
        "kind": "markdown",
        "value": "The Button component represents a UI control visually styled like a button, regardless of whether \nit renders (or wraps) a button or an anchor tag."
      },
      "attributes": [
        {
          "name": "accessibility-text",
          "description": "Specifies an accessible label for the button/link as an `aria-label` when the button does not contain label text\nor a sufficiently unique label. This text overrides the default label and is not additive to it."
        },
        {
          "name": "color",
          "description": "The color of the button: primary, secondary, or danger. Defaults to \"primary.\"",
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            }
          ]
        },
        {
          "name": "context",
          "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "control-id",
          "description": "Optionally specify the ID of the control here, which is used to generate related pattern node IDs and associate everything for accessibility"
        },
        {
          "name": "controls",
          "description": "Specifies the DOM element that the button controls and results in the `aria-controls` attribute\nrendered on the button with the specified value."
        },
        {
          "name": "disabled",
          "description": "Marks the rendered button/link in a disabled state when specified."
        },
        {
          "name": "download",
          "description": "The `download` attribute of a link button; when present tells the browser to download the specified href URI instead\nof viewing or navigating to it."
        },
        {
          "name": "expanded",
          "description": "Specifies if a controlled UI widget is expanded and results in `aria-pressed=\"true|false\"` being placed \non the button when specified. This property is usually used for progressive disclosure patterns such as \naccordions, menus, expand/collapse, etc., where focus remains on the control after the user action.",
          "values": [
            {
              "name": "false"
            },
            {
              "name": "true"
            }
          ]
        },
        {
          "name": "fill",
          "description": "The visual fill of the button: solid, outline, or ghost. Defaults to \"solid.\"",
          "values": [
            {
              "name": "ghost"
            },
            {
              "name": "outline"
            },
            {
              "name": "solid"
            }
          ]
        },
        {
          "name": "height",
          "description": "Specifies the (min-)height of the button (in CSS units) when different from the default size."
        },
        {
          "name": "href",
          "description": "The `href` attribute of a link button."
        },
        {
          "name": "name",
          "description": "The `name` attribute of the button, which is passed as part of formData (as a key) for the the pressed submit button."
        },
        {
          "name": "pressed",
          "description": "Specifies if the button is pressed and results in `aria-pressed=\"true|false\"` being placed on the \nbutton when specified. Only valid on actual `button` elements.",
          "values": [
            {
              "name": "false"
            },
            {
              "name": "true"
            }
          ]
        },
        {
          "name": "rel",
          "description": "The `rel` attribute of a link button."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "tag",
          "description": "Specifies whether the button is a true button element or \"link button.\"",
          "values": [
            {
              "name": "a"
            },
            {
              "name": "button"
            }
          ]
        },
        {
          "name": "target",
          "description": "The `target` attribute of a link button."
        },
        {
          "name": "target-prop",
          "description": "The property on the target element being toggled by the button/control (e.g., \"open\")."
        },
        {
          "name": "type",
          "description": "The `type` attribute of the button: button, submit, or reset. Defaults to \"button.\"",
          "values": [
            {
              "name": "button"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            }
          ]
        },
        {
          "name": "value",
          "description": "The `value` attribute of the button, which is passed as part of formData (as a value) for the the pressed submit button."
        },
        {
          "name": "variant",
          "description": "Specifies a variant of the buttons, such as square for buttons with only an icon and call-to-action button.",
          "values": [
            {
              "name": "cta"
            },
            {
              "name": "square"
            }
          ]
        },
        {
          "name": "width",
          "description": "Specifies the (min-)width of the button (in CSS units) when different from the default size."
        }
      ]
    },
    {
      "name": "cbp-card",
      "description": {
        "kind": "markdown",
        "value": "The Card component is a visual treatment for a container meant for similarly-sized, repeated chunks of content."
      },
      "attributes": [
        {
          "name": "color",
          "description": "Optionally specifies a card color (different from the default color) based on predefined design token values.",
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "info"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "context",
          "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "disabled",
          "description": "Marks the rendered card in a disabled state when specified."
        },
        {
          "name": "href",
          "description": "Specifies the `href` value for the \"clickable\" interactive cards."
        },
        {
          "name": "interactive",
          "description": "Specifies the interactivity of the card.",
          "values": [
            {
              "name": "clickable"
            },
            {
              "name": "selectable"
            }
          ]
        },
        {
          "name": "stretch",
          "description": "When present, the card will stretch vertically to fill its parent container; most useful when placed in an equally sized grid or row of cards."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "variant",
          "description": "Specifies optional variants with difference from the default card.",
          "values": [
            {
              "name": "banner"
            },
            {
              "name": "decision"
            },
            {
              "name": "flag"
            }
          ]
        }
      ]
    },
    {
      "name": "cbp-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": "name",
          "description": "Specifies the `name` attribute of the rendered button"
        },
        {
          "name": "pressed",
          "description": "Specifies the pressed state of the button and `aria-pressed` attribute of the rendered button"
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "value",
          "description": "Specifies the `value` attribute of the rendered button"
        }
      ]
    },
    {
      "name": "cbp-code-snippet",
      "description": {
        "kind": "markdown",
        "value": "The Code Snippet component is used to display code in a readable format and facilitate copying it."
      },
      "attributes": [
        {
          "name": "context",
          "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "height",
          "description": "Specifies the height (in CSS units) for a multiple line block variant while not expanded."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "variant",
          "description": "Specifies inline or block layouts of the code snippet. Defaults to inline.",
          "values": [
            {
              "name": "block"
            },
            {
              "name": "inline"
            }
          ]
        }
      ]
    },
    {
      "name": "cbp-container",
      "description": {
        "kind": "markdown",
        "value": "The Container component is a building block component for wrapping content and providing \nvisual treatment such as a background image or color."
      },
      "attributes": [
        {
          "name": "background",
          "description": "Specifies the CSS background of the parent container, which could be a solid color, an image, a gradient, or any combination (or multiples) achievable via the CSS `background` property."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "text-color",
          "description": "Specifies the text color for content within the container, since it could be on any background."
        },
        {
          "name": "width",
          "description": "Specifies the width of the inner container area."
        }
      ]
    },
    {
      "name": "cbp-dialog",
      "description": {
        "kind": "markdown",
        "value": "The Dialog component represents a dialog overlaid on top of the web page, which can be used similar \nto an alert/confirm dialog or contain a small form."
      },
      "attributes": [
        {
          "name": "accessibility-text",
          "description": "Creates an accessible label for the dialog."
        },
        {
          "name": "color",
          "description": "Optionally specifies a card color (different from the default color) based on predefined design token values.",
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "info"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "open",
          "description": "When set, specifies that the dialog is open"
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "uid",
          "description": "Specifies a unique `ID` for the dialog, used to wire up the controls and accessibility features."
        }
      ]
    },
    {
      "name": "cbp-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 asyncronous 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": "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."
        },
        {
          "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 and values. Labels may contain markup as needed, but in such cases, a value should always be specified explicitly."
        },
        {
          "name": "minimum-input-length",
          "description": "Specifies the number of characters need to emit an event to make an API call and return filtered results. This property is only used when"
        },
        {
          "name": "multiple",
          "description": "Specifies whether multiple selections are supported, in which case checkboxes shall be slotted in accordance with the design system specified pattern. Defaults to false, which renders a single-select dropdown."
        },
        {
          "name": "name",
          "description": "Specifies the name of the (hidden) form field"
        },
        {
          "name": "open",
          "description": "Specifies whether the dropdown menu is open/visible."
        },
        {
          "name": "placeholder",
          "description": "Represents placeholder text on the dropdown control, displayed in a distinctive style from the selected 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. Primarily updated dynamically by the component."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "value",
          "description": "Specifies the value of the hidden input holding the value (or barring one, the text label) of the selected item. Primarily updated dynamically by the component."
        }
      ]
    },
    {
      "name": "cbp-dropdown-item",
      "description": {
        "kind": "markdown",
        "value": "The Dropdown Item represents an individual option for the Dropdown, similar to an option in a \nnative `select` but with more flexibility."
      },
      "attributes": [
        {
          "name": "current",
          "description": "For Internal Use: Specifies the current item (referenced by `aria-activedescendant`) while using keyboard navigation."
        },
        {
          "name": "disabled",
          "description": ""
        },
        {
          "name": "item-id",
          "description": "Optionally specify the ID of each dropdown item, which is used by the parent dropdown to associate `aria-activedescendant`. If no `itemId` is specified, one will be automatically generated."
        },
        {
          "name": "selected",
          "description": "Specifies if an item is selected"
        },
        {
          "name": "value",
          "description": "Specifies an optional value to be passed in the FormData instead of the display text/label."
        }
      ]
    },
    {
      "name": "cbp-expand",
      "description": {
        "kind": "markdown",
        "value": "The Expand component is a standalone component used for progressive disclosure, organizing content under \na relevant heading, which is used as a control for revealing and hiding its content."
      },
      "attributes": [
        {
          "name": "context",
          "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified.",
          "values": [
            {
              "name": "dark-always"
            },
            {
              "name": "dark-inverts"
            },
            {
              "name": "light-always"
            },
            {
              "name": "light-inverts"
            }
          ]
        },
        {
          "name": "heading-id",
          "description": "Specifies an optional `id` for the component item heading, also used to generate an `id` for \nthe content wrapper. If this property is not specified, a unique string will \nautomatically be generated."
        },
        {
          "name": "heading-level",
          "description": "The heading level of the accordion item control. Defaults to h3.",
          "values": [
            {
              "name": "h2"
            },
            {
              "name": "h3"
            },
            {
              "name": "h4"
            },
            {
              "name": "h5"
            },
            {
              "name": "h6"
            }
          ]
        },
        {
          "name": "label",
          "description": "The component control label."
        },
        {
          "name": "open",
          "description": "Specifies whether the content is expanded and visible."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-file-input",
      "description": {
        "kind": "markdown",
        "value": "The File Input component builds upon the native file input, allowing for custom styles and \nenhancing functionality when integrated with JavaScript frameworks."
      },
      "attributes": [
        {
          "name": "accept",
          "description": "Specifies the files types accepted by the file input (may also be set directly on the slotted input). This property is merely a suggestion to the browser and any file type restrictions should still be enforced in form validation."
        },
        {
          "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 input here, which is used to generate related pattern node IDs and associate everything for accessibility."
        },
        {
          "name": "multiple",
          "description": "Specifies whether the file input accepts multiple files rather than a single file (may also be set directly on the slotted input)."
        },
        {
          "name": "name",
          "description": "The `name` attribute of the input, which is passed as part of formData (as a key)."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-flex",
      "description": {
        "kind": "markdown",
        "value": "The Flex component invokes a CSS Flexbox context, acting as the flex parent and implementing \nCSS Flexbox as a component API. Immediate child nodes are automatically considered flex items."
      },
      "attributes": [
        {
          "name": "align-content",
          "description": "Specifies the alignment of a flex container's items within the flex container (only when there is extra space in the cross-axis).",
          "values": [
            {
              "name": "center"
            },
            {
              "name": "flex-end"
            },
            {
              "name": "flex-start"
            },
            {
              "name": "space-around"
            },
            {
              "name": "space-between"
            },
            {
              "name": "stretch"
            }
          ]
        },
        {
          "name": "align-items",
          "description": "Specifies the alignment for all of the flex container’s items along the cross-axis. Defaults to \"stretch\".",
          "values": [
            {
              "name": "auto"
            },
            {
              "name": "baseline"
            },
            {
              "name": "center"
            },
            {
              "name": "flex-end"
            },
            {
              "name": "flex-start"
            },
            {
              "name": "stretch"
            }
          ]
        },
        {
          "name": "breakpoint",
          "description": "Specifies the size at which the flex children are linearized, specified in CSS units (preferably relative units such as rem)."
        },
        {
          "name": "content-breakpoint",
          "description": "Not yet implemented"
        },
        {
          "name": "direction",
          "description": "Specifies how flex items are placed in the flex container by setting the direction of the flex container’s main axis. Defaults to \"row\" for a horizontal flex context.",
          "values": [
            {
              "name": "column"
            },
            {
              "name": "column-reverse"
            },
            {
              "name": "row"
            },
            {
              "name": "row-reverse"
            }
          ]
        },
        {
          "name": "display",
          "description": "Specifies the display mode. Defaults to \"flex\"",
          "values": [
            {
              "name": "flex"
            },
            {
              "name": "inline-flex"
            }
          ]
        },
        {
          "name": "gap",
          "description": "Specifies the gap between items in CSS units (preferably relative units such as rem). Accepts a single value for horizontal and vertical gap or two values representing column gap and row gap, respectively."
        },
        {
          "name": "justify-content",
          "description": "Specifies the alignment of flex items along the main axis (of the current line) of the flex container.",
          "values": [
            {
              "name": "center"
            },
            {
              "name": "flex-end"
            },
            {
              "name": "flex-start"
            },
            {
              "name": "space-around"
            },
            {
              "name": "space-between"
            },
            {
              "name": "space-evenly"
            }
          ]
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        },
        {
          "name": "wrap",
          "description": "Specifies the wrapping behavior of the flex children. Browser default behavior is \"nowrap\".",
          "values": [
            {
              "name": "nowrap"
            },
            {
              "name": "wrap"
            },
            {
              "name": "wrap-reverse"
            }
          ]
        }
      ]
    },
    {
      "name": "cbp-flex-item",
      "description": {
        "kind": "markdown",
        "value": "The Flex Item component may optionally be used to specify properties of an individual flex item."
      },
      "attributes": [
        {
          "name": "align-self",
          "description": "Specifies the alignment of the specific flex item along the cross-axis separate from the parent context.",
          "values": [
            {
              "name": "auto"
            },
            {
              "name": "baseline"
            },
            {
              "name": "center"
            },
            {
              "name": "flex-end"
            },
            {
              "name": "flex-start"
            },
            {
              "name": "stretch"
            }
          ]
        },
        {
          "name": "flex-basis",
          "description": "Specifies a basis (in CSS units or content values) for calculating flex behavior different from the default of \"auto\" (which usually evaluates to \"content\")."
        },
        {
          "name": "flex-grow",
          "description": "Specifies the growth factor the item will grow at relative to other items. Defaults to zero, as flex items do not grow by default."
        },
        {
          "name": "flex-shrink",
          "description": "Specifies the shrink factor the item will shrink at relative to other items. Defaults to 1, as flex items will shrink at an equal rate by default, taking content size into consideration."
        },
        {
          "name": "order",
          "description": "Specifies an ordinal group value for sorting this flex item within its group. Defaults to zero, which renders the items in DOM order."
        },
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-footer",
      "description": {
        "kind": "markdown",
        "value": "The Footer component serves site visitors who arrive at the bottom of a page without finding \nwhat they want, typically containing information about the agency and navigation links."
      },
      "attributes": [
        {
          "name": "sx",
          "description": "Supports adding inline styles as an object"
        }
      ]
    },
    {
      "name": "cbp-form-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"
            }
          ]