@esri/calcite-components/dist/docs/vscode.html-custom-data.json

Web Components for Esri's Calcite Design System.

{
  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
  "version": 1.1,
  "tags": [
    {
      "name": "calcite-accordion",
      "description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however `calcite-accordion-item`s can.\n\n### CSS Properties\n- **--calcite-accordion-border-color** - Specifies the component's border color. \n- **--calcite-accordion-background-color** - Specifies the component's background color. \n- **--calcite-accordion-text-color** - Specifies the component's text color. \n- **--calcite-accordion-text-color-hover** - Specifies the component's main text color on hover. \n- **--calcite-accordion-text-color-press** - Specifies the component's main text color when pressed. ",
      "attributes": [
        {
          "name": "appearance",
          "description": "Specifies the appearance of the component.",
          "values": [
            {
              "name": "solid"
            },
            {
              "name": "transparent"
            }
          ]
        },
        {
          "name": "icon-position",
          "description": "Specifies the placement of the icon in the header.",
          "values": [
            {
              "name": "end"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "icon-type",
          "description": "Specifies the type of the icon in the header.",
          "values": [
            {
              "name": "caret"
            },
            {
              "name": "chevron"
            },
            {
              "name": "plus-minus"
            }
          ]
        },
        {
          "name": "scale",
          "description": "Specifies the size of the component.",
          "values": [
            {
              "name": "l"
            },
            {
              "name": "m"
            },
            {
              "name": "s"
            }
          ]
        },
        {
          "name": "selection-mode",
          "description": "Specifies the selection mode of the component, where:\n\n`\"multiple\"` allows any number of selections,\n\n`\"single\"` allows only one selection, and\n\n`\"single-persist\"` allows one selection and prevents de-selection.",
          "values": [
            {
              "name": "multiple"
            },
            {
              "name": "single"
            },
            {
              "name": "single-persist"
            }
          ]
        }
      ],
      "references": []
    },
    {
      "name": "calcite-accordion-item",
      "description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding custom content, including nested `calcite-accordion-item`s.\n- **actions-end** - A slot for adding `calcite-action`s or content to the end side of the component's header.\n- **actions-start** - A slot for adding `calcite-action`s or content to the start side of the component's header.\n\n### CSS Properties\n- **--calcite-accordion-border-color** - Specifies the component's border color. \n- **--calcite-accordion-background-color** - Specifies the component's background color. \n- **--calcite-accordion-text-color** - Specifies the component's text color. \n- **--calcite-accordion-text-color-hover** - Specifies the component's main text color on hover. \n- **--calcite-accordion-text-color-press** - Specifies the component's main text color when pressed. \n- **--calcite-accordion-item-background-color** - [Deprecated] Use `--calcite-accordion-background-color`. Specifies the component's background color. \n- **--calcite-accordion-item-border-color** - [Deprecated] Use `--calcite-accordion-border-color`. Specifies the component's border color. \n- **--calcite-accordion-item-content-space** - Specifies the component's padding. \n- **--calcite-accordion-item-end-icon-color** - Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color. \n- **--calcite-accordion-item-expand-icon-color** - Specifies the component's expand icon color. \n- **--calcite-accordion-item-header-background-color** - Specifies the component's `heading` background color. \n- **--calcite-accordion-item-header-background-color-hover** - Specifies the component's `heading` background color when hovered. \n- **--calcite-accordion-item-header-background-color-press** - Specifies the component's `heading` background color when pressed. \n- **--calcite-accordion-item-heading-text-color** - Specifies the component's `heading` text color. \n- **--calcite-accordion-item-icon-color** - [Deprecated] Use `--calcite-icon-color`. Specifies the component's default icon color. \n- **--calcite-accordion-item-start-icon-color** - Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color. \n- **--calcite-accordion-item-text-color** - [Deprecated] Use `--calcite-accordion-text-color`. Specifies the component's text color. \n- **--calcite-accordion-item-text-color-hover** - [Deprecated] Use `--calcite-accordion-text-color-hover`. Specifies the component's text color on hover. \n- **--calcite-accordion-item-text-color-press** - [Deprecated] Use `--calcite-accordion-text-color-press`. Specifies the component's text color on press. ",
      "attributes": [
        {
          "name": "description",
          "description": "Specifies a description for the component.",
          "values": []
        },
        {
          "name": "expanded",
          "description": "When `true`, the component is expanded.",
          "values": []
        },
        {
          "name": "heading",
          "description": "Specifies heading text for the component.",
          "values": []
        },
        {
          "name": "icon-end",
          "description": "Specifies an icon to display at the end of the component.",
          "values": []
        },
        {
          "name": "icon-flip-rtl",
          "description": "Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).",
          "values": [
            {
              "name": "both"
            },
            {
              "name": "end"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "icon-start",
          "description": "Specifies an icon to display at the start of the component.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "calcite-action",
      "description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding a `calcite-icon`.\n- **tooltip** - [Deprecated] Use the `calcite-tooltip` component instead.\n\n### CSS Properties\n- **--calcite-action-background-color-hover** - Specifies the component's background color when hovered or focused. \n- **--calcite-action-background-color-press** - Specifies the component's background color when active. \n- **--calcite-action-background-color-pressed** - [Deprecated] Use --calcite-action-background-color-press. Specifies the component's background color when active. \n- **--calcite-action-background-color** - Specifies the component's background color. \n- **--calcite-action-corner-radius-end-end** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end end. \n- **--calcite-action-corner-radius-end-start** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end start. \n- **--calcite-action-corner-radius-start-end** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start end. \n- **--calcite-action-corner-radius-start-start** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start start. \n- **--calcite-action-corner-radius** - Specifies the component's corner radius. \n- **--calcite-action-indicator-color** - Specifies the component's indicator color. \n- **--calcite-action-text-color-press** - Specifies the component's text color when pressed or hovered. \n- **--calcite-action-text-color-pressed** - [Deprecated] Use --calcite-action-text-color-press. Specifies the component's text color when hovered. \n- **--calcite-action-text-color** - Specifies the component's text color. ",
      "attributes": [
        {
          "name": "active",
          "description": "When `true`, the component is highlighted.",
          "values": []
        },
        {
          "name": "alignment",
          "description": "Specifies the horizontal alignment of button elements with text content.",
          "values": [
            {
              "name": "center"
            },
            {
              "name": "end"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "appearance",
          "description": "Specifies the appearance of the component.",
          "values": [
            {
              "name": "solid"
            },
            {
              "name": "transparent"
            }
          ]
        },
        {
          "name": "compact",
          "description": "**Deprecated**: No longer necessary.. When `true`, the side padding of the component is reduced.",
          "values": []
        },
        {
          "name": "disabled",
          "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.",
          "values": []
        },
        {
          "name": "icon",
          "description": "Specifies an icon to display.",
          "values": []
        },
        {
          "name": "icon-flip-rtl",
          "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).",
          "values": []
        },
        {
          "name": "indicator",
          "description": "When `true`, displays a visual indicator.",
          "values": []
        },
        {
          "name": "label",
          "description": "Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop.",
          "values": []
        },
        {
          "name": "loading",
          "description": "When `true`, a busy indicator is displayed.",
          "values": []
        },
        {
          "name": "scale",
          "description": "Specifies the size of the component.",
          "values": [
            {
              "name": "l"
            },
            {
              "name": "m"
            },
            {
              "name": "s"
            }
          ]
        },
        {
          "name": "text",
          "description": "Specifies text that accompanies the icon.",
          "values": []
        },
        {
          "name": "text-enabled",
          "description": "Indicates whether the text is displayed.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "calcite-action-bar",
      "description": "### Events\n- **calciteActionBarToggle** - Fires when the `expanded` property is toggled.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `calcite-action`s that will appear at the top of the component.\n- **bottom-actions** - [Deprecated] Use the `\"actions-end\"` slot instead. A slot for adding `calcite-action`s that will appear at the bottom of the component, above the collapse/expand button.\n- **actions-end** - A slot for adding `calcite-action`s that will appear at the end of the component, prior to the collapse/expand button.\n- **expand-tooltip** - A slot to set the `calcite-tooltip` for the expand toggle.\n\n### CSS Properties\n- **--calcite-action-bar-background-color** - Specifies the component's background color. \n- **--calcite-action-bar-corner-radius** - Specifies the component's border radius when `floating` is `true`. \n- **--calcite-action-bar-expanded-max-width** - When `layout` is `\"vertical\"`, specifies the component's maximum width. \n- **--calcite-action-bar-items-space** - Specifies the space between slotted components in the component. \n- **--calcite-action-bar-shadow** - Specifies the component's shadow when `floating` is `true`. ",
      "attributes": [
        {
          "name": "actions-end-group-label",
          "description": "Specifies the accessible label for the last `calcite-action-group`.",
          "values": []
        },
        {
          "name": "expand-disabled",
          "description": "When `true`, the expand-toggling behavior is disabled.",
          "values": []
        },
        {
          "name": "expanded",
          "description": "When `true`, the component is expanded.",
          "values": []
        },
        {
          "name": "floating",
          "description": "When `true`, the component is in a floating state.",
          "values": []
        },
        {
          "name": "layout",
          "description": "Specifies the layout direction of the actions.",
          "values": [
            {
              "name": "grid"
            },
            {
              "name": "horizontal"
            },
            {
              "name": "vertical"
            }
          ]
        },
        {
          "name": "overflow-actions-disabled",
          "description": "Disables automatically overflowing `calcite-action`s that won't fit into menus.",
          "values": []
        },
        {
          "name": "overlay-positioning",
          "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.",
          "values": [
            {
              "name": "absolute"
            },
            {
              "name": "fixed"
            }
          ]
        },
        {
          "name": "position",
          "description": "Arranges the component depending on the element's `dir` property.",
          "values": [
            {
              "name": "end"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "scale",
          "description": "Specifies the size of the expand `calcite-action`.",
          "values": [
            {
              "name": "l"
            },
            {
              "name": "m"
            },
            {
              "name": "s"
            }
          ]
        }
      ],
      "references": []
    },
    {
      "name": "calcite-action-group",
      "description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding a group of `calcite-action`s.\n- **menu-actions** - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.\n- **menu-tooltip** - A slot for adding a `calcite-tooltip` for the menu.\n\n### CSS Properties\n- **--calcite-action-background-color** - Specifies the component's background color. \n- **--calcite-action-group-border-color** - Specifies the component's border color when used in a `calcite-action-bar` or `calcite-action-menu`. \n- **--calcite-action-group-columns** - When `layout` is `\"grid\"`, specifies the component's grid-template-columns. \n- **--calcite-action-group-gap** - When `layout` is `\"grid\"`, specifies the component's gap. \n- **--calcite-action-group-padding** - [Deprecated] Use `--calcite-action-group-gap`. Specifies the component's padding. ",
      "attributes": [
        {
          "name": "columns",
          "description": "Indicates number of columns.",
          "values": [
            {
              "name": "1"
            },
            {
              "name": "2"
            },
            {
              "name": "3"
            },
            {
              "name": "4"
            },
            {
              "name": "5"
            },
            {
              "name": "6"
            }
          ]
        },
        {
          "name": "expanded",
          "description": "When `true`, the component is expanded.",
          "values": []
        },
        {
          "name": "label",
          "description": "Accessible name for the component.",
          "values": []
        },
        {
          "name": "layout",
          "description": "Indicates the layout of the component.",
          "values": [
            {
              "name": "grid"
            },
            {
              "name": "horizontal"
            },
            {
              "name": "vertical"
            }
          ]
        },
        {
          "name": "menu-open",
          "description": "When `true`, the `calcite-action-menu` is open.",
          "values": []
        },
        {
          "name": "menu-placement",
          "description": "Determines where the action menu will be positioned.",
          "values": [
            {
              "name": "auto"
            },
            {
              "name": "auto-end"
            },
            {
              "name": "auto-start"
            },
            {
              "name": "bottom"
            },
            {
              "name": "bottom-end"
            },
            {
              "name": "bottom-start"
            },
            {
              "name": "leading"
            },
            {
              "name": "leading-end"
            },
            {
              "name": "leading-start"
            },
            {
              "name": "left"
            },
            {
              "name": "left-end"
            },
            {
              "name": "left-start"
            },
            {
              "name": "right"
            },
            {
              "name": "right-end"
            },
            {
              "name": "right-start"
            },
            {
              "name": "top"
            },
            {
              "name": "top-end"
            },
            {
              "name": "top-start"
            },
            {
              "name": "trailing"
            },
            {
              "name": "trailing-end"
            },
            {
              "name": "trailing-start"
            }
          ]
        },
        {
          "name": "overlay-positioning",
          "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.",
          "values": [
            {
              "name": "absolute"
            },
            {
              "name": "fixed"
            }
          ]
        },
        {
          "name": "scale",
          "description": "Specifies the size of the `calcite-action-menu`.",
          "values": [
            {
              "name": "l"
            },
            {
              "name": "m"
            },
            {
              "name": "s"
            }
          ]
        }
      ],
      "references": []
    },
    {
      "name": "calcite-action-menu",
      "description": "### Events\n- **calciteActionMenuOpen** - Fires when the `open` property is toggled.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-action`s.\n- **trigger** - A slot for adding a `calcite-action` to trigger opening the menu.\n- **tooltip** - A slot for adding a tooltip for the menu.\n\n### CSS Properties\n- **--calcite-action-menu-items-space** - Specifies the space between actions in the menu. ",
      "attributes": [
        {
          "name": "appearance",
          "description": "Specifies the appearance of the component.",
          "values": [
            {
              "name": "solid"
            },
            {
              "name": "transparent"
            }
          ]
        },
        {
          "name": "expanded",
          "description": "When `true`, the component is expanded.",
          "values": []
        },
        {
          "name": "label",
          "description": "Specifies the text string for the component.",
          "values": []
        },
        {
          "name": "open",
          "description": "When `true`, the component is open.",
          "values": []
        },
        {
          "name": "overlay-positioning",
          "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.",
          "values": [
            {
              "name": "absolute"
            },
            {
              "name": "fixed"
            }
          ]
        },
        {
          "name": "placement",
          "description": "Determines where the component will be positioned relative to the `referenceElement`.",
          "values": [
            {
              "name": "auto"
            },
            {
              "name": "auto-end"
            },
            {
              "name": "auto-start"
            },
            {
              "name": "bottom"
            },
            {
              "name": "bottom-end"
            },
            {
              "name": "bottom-start"
            },
            {
              "name": "leading"
            },
            {
              "name": "leading-end"
            },
            {
              "name": "leading-start"
            },
            {
              "name": "left"
            },
            {
              "name": "left-end"
            },
            {
              "name": "left-start"
            },
            {
              "name": "right"
            },
            {
              "name": "right-end"
            },
            {
              "name": "right-start"
            },
            {
              "name": "top"
            },
            {
              "name": "top-end"
            },
            {
              "name": "top-start"
            },
            {
              "name": "trailing"
            },
            {
              "name": "trailing-end"
            },
            {
              "name": "trailing-start"
            }
          ]
        },
        {
          "name": "scale",
          "description": "Specifies the size of the component's trigger `calcite-action`.",
          "values": [
            {
              "name": "l"
            },
            {
              "name": "m"
            },
            {
              "name": "s"
            }
          ]
        }
      ],
      "references": []
    },
    {
      "name": "calcite-action-pad",
      "description": "**Deprecated**: Use the `calcite-action-pad` component instead..\n--\n\n### Events\n- **calciteActionPadToggle** - Fires when the `expanded` property is toggled.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `calcite-action`s to the component.\n- **expand-tooltip** - A slot to set the `calcite-tooltip` for the expand toggle.\n\n### CSS Properties\n- **--calcite-action-pad-corner-radius** - Specifies the component's border radius. \n- **--calcite-action-pad-expanded-max-width** - When `layout` is `\"vertical\"`, specifies the component's maximum width when `expanded`. \n- **--calcite-action-pad-items-space** - Specifies the component's space between slotted components. ",
      "attributes": [
        {
          "name": "actions-end-group-label",
          "description": "Specifies the accessible label for the last `calcite-action-group`.",
          "values": []
        },
        {
          "name": "expand-disabled",
          "description": "When `true`, the expand-toggling behavior is disabled.",
          "values": []
        },
        {
          "name": "expanded",
          "description": "When `true`, the component is expanded.",
          "values": []
        },
        {
          "name": "layout",
          "description": "Indicates the layout of the component.",
          "values": [
            {
              "name": "grid"
            },
            {
              "name": "horizontal"
            },
            {
              "name": "vertical"
            }
          ]
        },
        {
          "name": "overlay-positioning",
          "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.",
          "values": [
            {
              "name": "absolute"
            },
            {
              "name": "fixed"
            }
          ]
        },
        {
          "name": "position",
          "description": "Arranges the component depending on the element's `dir` property.",
          "values": [
            {
              "name": "end"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "scale",
          "description": "Specifies the size of the expand `calcite-action`.",
          "values": [
            {
              "name": "l"
            },
            {
              "name": "m"
            },
            {
              "name": "s"
            }
          ]
        }
      ],
      "references": []
    },
    {
      "name": "calcite-alert",
      "description": "Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned\nat the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided.\n--\n\n### Events\n- **calciteAlertBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteAlertBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteAlertClose** - Fires when the component is closed and animation is complete.\n- **calciteAlertOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's \"close\" button, the first focusable item.\n\n    `@returns` {Promise<void>}\n\n### Slots\n- **title** - A slot for adding a title to the component.\n- **message** - A slot for adding main text to the component.\n- **link** - A slot for adding a `calcite-action` to take from the component such as: \"undo\", \"try again\", \"link to page\", etc.\n- **actions-end** - A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or fewer actions.\n\n### CSS Properties\n- **--calcite-alert-width** - Specifies the width of the component. \n- **--calcite-alert-background-color** - Specifies the component's background color. \n- **--calcite-alert-corner-radius** - Specifies the component's corner radius. \n- **--calcite-alert-shadow** - Specifies the component's shadow. \n- **--calcite-alert-offset-size** - Specifies the component's `placement` offset. ",
      "attributes": [
        {
          "name": "auto-close",
          "description": "When `true`, the component closes automatically. Recommended for passive, non-blocking alerts.",
          "values": []
        },
        {
          "name": "auto-close-duration",
          "description": "Specifies the duration before the component automatically closes - only use with `autoClose`.",
          "values": [
            {
              "name": "fast"
            },
            {
              "name": "medium"
            },
            {
              "name": "slow"
            }
          ]
        },
        {
          "name": "icon",
          "description": "When `true`, shows a default recommended icon. Alternatively,\npass a Calcite UI Icon name to display a specific icon.",
          "values": []
        },
        {
          "name": "icon-flip-rtl",
          "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).",
          "values": []
        },
        {
          "name": "kind",
          "description": "Specifies the kind of the component, which will apply to top border and icon.",
          "values": [
            {
              "name": "brand"
            },
            {
              "name": "danger"
            },
            {
              "name": "info"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "label",
          "description": "Specifies an accessible name for the component.",
          "values": []
        },
        {
          "name": "numbering-system",
          "description": "Specifies the Unicode numeral system used by the component for localization.",
          "values": [
            {
              "name": "arab"
            },
            {
              "name": "arabext"
            },
            {
              "name": "latn"
            }
          ]
        },
        {
          "name": "open",
          "description": "When `true`, displays and positions the component.",
          "values": []
        },
        {
          "name": "placement",
          "description": "Specifies the placement of the component.",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "bottom-end"
            },
            {
              "name": "bottom-start"
            },
            {
              "name": "top"
            },
            {
              "name": "top-end"
            },
            {
              "name": "top-start"
            }
          ]
        },
        {
          "name": "queue",
          "description": "Specifies the ordering priority of the component when opened.",
          "values": [
            {
              "name": "immediate"
            },
            {
              "name": "last"
            },
            {
              "name": "next"
            }
          ]
        },
        {
          "name": "scale",
          "description": "Specifies the size of the component.",
          "values": [
            {
              "name": "l"
            },
            {
              "name": "m"
            },
            {
              "name": "s"
            }
          ]
        }
      ],
      "references": []
    },
    {
      "name": "calcite-autocomplete",
      "description": "### Events\n- **calciteAutocompleteBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteAutocompleteBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteAutocompleteChange** - Fires each time a new `value` is typed and committed.\n- **calciteAutocompleteClose** - Fires when the component is closed and animation is complete.\n- **calciteAutocompleteOpen** - Fires when the component is open and animation is complete.\n- **calciteAutocompleteTextChange** - Fires each time a new `inputValue` is typed and committed.\n- **calciteAutocompleteTextInput** - Fires each time a new `inputValue` is typed.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise<void>` - Updates the position of the component.\n- `scrollContentTo(options?: ScrollToOptions): Promise<void>` - Scrolls the component's content to a specified set of coordinates.\n- `selectText(): Promise<void>` - Selects the text of the component's `value`.\n- `setFocus(): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `calcite-autocomplete-item` elements.\n- **content-bottom** - A slot for adding content below `calcite-autocomplete-item` elements.\n- **content-top** - A slot for adding content above `calcite-autocomplete-item` elements.\n\n### CSS Properties\n- **--calcite-autocomplete-background-color** - Specifies the background color of the component. \n- **--calcite-autocomplete-corner-radius** - Specifies the component's corner radius. \n- **--calcite-autocomplete-text-color** - Specifies the text color of the component. \n- **--calcite-autocomplete-input-prefix-size** - Specifies the Input's prefix width, when present. \n- **--calcite-autocomplete-input-suffix-size** - Specifies the Input's suffix width, when present. \n- **--calcite-autocomplete-input-background-color** - Specifies the background color of the Input. \n- **--calcite-autocomplete-input-border-color** - Specifies the border color of the Input. \n- **--calcite-autocomplete-input-corner-radius** - Specifies the corner radius of the Input. \n- **--calcite-autocomplete-input-shadow** - Specifies the shadow of the Input. \n- **--calcite-autocomplete-input-icon-color** - Specifies the icon color of the Input. \n- **--calcite-autocomplete-input-text-color** - Specifies the text color of the Input. \n- **--calcite-autocomplete-input-placeholder-text-color** - Specifies the color of placeholder text in the Input. \n- **--calcite-autocomplete-input-actions-background-color** - Specifies the background color of Input's `clearable` element. \n- **--calcite-autocomplete-input-actions-background-color-hover** - Specifies the background color of Input's `clearable` element when hovered. \n- **--calcite-autocomplete-input-actions-background-color-press** - Specifies the background color of Input's `clearable` element when pressed. \n- **--calcite-autocomplete-input-actions-icon-color** - Specifies the icon color of Input's `clearable` element. \n- **--calcite-autocomplete-input-actions-icon-color-hover** - Specifies the icon color of Input's `clearable` element when hovered. \n- **--calcite-autocomplete-input-actions-icon-color-press** - Specifies the icon color of Input's `clearable` element when pressed. \n- **--calcite-autocomplete-input-loading-background-color** - Specifies the background color of the Input's `loading` element, when present. \n- **--calcite-autocomplete-input-loading-fill-color** - Specifies the fill color of the Input's `loading` element, when present. \n- **--calcite-autocomplete-input-prefix-background-color** - Specifies the background color of the Input's prefix, when present. \n- **--calcite-autocomplete-input-prefix-text-color** - Specifies the text color of the Input's prefix, when present. \n- **--calcite-autocomplete-input-suffix-background-color** - Specifies the background color of the Input's suffix, when present. \n- **--calcite-autocomplete-input-suffix-text-color** - Specifies the text color of the Input's suffix, when present. ",
      "attributes": [
        {
          "name": "alignment",
          "description": "Specifies the text alignment of the component's value.",
          "values": [
            {
              "name": "end"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "disabled",
          "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.",
          "values": []
        },
        {
          "name": "form",
          "description": "The `id` of the form that will be associated with the component.\n\nWhen not set, the component will be associated with its ancestor form element, if any.",
          "values": []
        },
        {
          "name": "icon",
          "description": "When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.",
          "values": []
        },
        {
          "name": "icon-flip-rtl",
          "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).",
          "values": []
        },
        {
          "name": "input-value",
          "description": "The component's input value.",
          "values": []
        },
        {
          "name": "label",
          "description": "Accessible name for the component.",
          "values": []
        },
        {
          "name": "loading",
          "description": "When `true`, a busy indicator is displayed.",
          "values": []
        },
        {
          "name": "max-length",
          "description": "When the component resides in a form,\nspecifies the maximum length of text for the component's value.",
          "values": []
        },
        {
          "name": "min-length",
          "description": "When the component resides in a form,\nspecifies the minimum length of text for the component's value.",
          "values": []
        },
        {
          "name": "name",
          "description": "Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.",
          "values": []
        },
        {
          "name": "open",
          "description": "When `true`, displays and positions the component.",
          "values": []
        },
        {
          "name": "overlay-positioning",
          "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.",
          "values": [
            {
              "name": "absolute"
            },
            {
              "name": "fixed"
            }
          ]
        },
        {
          "name": "pattern",
          "description": "When the component resides in a form,\nspecifies a regular expression (regex) pattern the component's `value` must match for validation.\nRead the native attribute's documentation on MDN for more info.",
          "values": []
        },
        {
          "name": "placeholder",
          "description": "Specifies placeholder text for the component.",
          "values": []
        },
        {
          "name": "placement",
          "description": "Determines where the component will be positioned relative to the container element.",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "bottom-end"
            },
            {
              "name": "bottom-start"
            },
            {
              "name": "top"
            },
            {
              "name": "top-end"
            },
            {
              "name": "top-start"
            }
          ]
        },
        {
          "name": "prefix-text",
          "description": "Adds text to the start of the component.",
          "values": []
        },
        {
          "name": "read-only",
          "description": "When `true`, the component's value can be read, but cannot be modified.",
          "values": []
        },
        {
          "name": "required",
          "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
          "values": []
        },
        {
          "name": "scale",
          "description": "Specifies the size of the component.",
          "values": [
            {
              "name": "l"
            },
            {
              "name": "m"
            },
            {
              "name": "s"
            }
          ]
        },
        {
          "name": "status",
          "description": "Specifies the status of the input field, which determines message and icons.",
          "values": [
            {
              "name": "idle"
            },
            {
              "name": "invalid"
            },
            {
              "name": "valid"
            }
          ]
        },
        {
          "name": "suffix-text",
          "description": "Adds text to the end of the component.",
          "values": []
        },
        {
          "name": "validation-icon",
          "description": "Specifies the validation icon to display under the component.",
          "values": []
        },
        {
          "name": "validation-message",
          "description": "Specifies the validation message to display under the component.",
          "values": []
        },
        {
          "name": "value",
          "description": "The component's value.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "calcite-autocomplete-item",
      "description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- **content-end** - A slot for adding non-actionable elements after content of the component.\n- **content-start** - A slot for adding non-actionable elements before content of the component.\n\n### CSS Properties\n- **--calcite-autocomplete-background-color** - Specifies the background color of the component. \n- **--calcite-autocomplete-description-text-color** - Specifies the text color of the component's description. \n- **--calcite-autocomplete-heading-text-color** - Specifies the text color of the component's heading. \n- **--calcite-autocomplete-text-color** - Specifies the text color of the component. ",
      "attributes": [
        {
          "name": "description",
          "description": "A description for the component. Displays below the label text.",
          "values": []
        },
        {
          "name": "disabled",
          "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.",
          "values": []
        },
        {
          "name": "heading",
          "description": "Specifies heading text for the component.",
          "values": []
        },
        {
          "name": "icon-end",
          "description": "Specifies an icon to display at the end of the component.",
          "values": []
        },
        {
          "name": "icon-flip-rtl",
          "description": "Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).",
          "values": [
            {
              "name": "both"
            },
            {
              "name": "end"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "icon-start",
          "description": "Specifies an icon to display at the start of the component.",
          "values": []
        },
        {
          "name": "label",
          "description": "Accessible name for the component.",
          "values": []
        },
        {
          "name": "value",
          "description": "The component's value.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "calcite-autocomplete-item-group",
      "description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding `calcite-autocomplete-item`s.\n\n### CSS Properties\n- **--calcite-autocomplete-background-color** - Specifies the background color of the component. \n- **--calcite-autocomplete-border-color** - Specifies the border color of the component. \n- **--calcite-autocomplete-text-color** - Specifies the text color of the component. ",
      "attributes": [
        {
          "name": "heading",
          "description": "Specifies heading text for the component.",
          "values": []
        },
        {
          "name": "label",
          "description": "Accessible name for the component.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "calcite-avatar",
      "description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### CSS Properties\n- **--calcite-avatar-corner-radius** - Specifies the component's corner radius. \n- **--calcite-avatar-color** - Specifies the component's icon or initial color. \n- **--calcite-avatar-background-color** - Specifies the component's background color. ",
      "attributes": [
        {
          "name": "full-name",
          "description": "Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component.",
          "values": []
        },
        {
          "name": "label",
          "description": "Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label.",
          "values": []
        },
        {
          "name": "scale",
          "description": "Specifies the size of the component.",
          "values": [
            {
              "name": "l"
            },
            {
              "name": "m"
            },
            {
              "name": "s"
            }
          ]
        },
        {
          "name": "thumbnail",
          "description": "Specifies the `src` to an image (remember to add a token if the user is private).",
          "values": []
        },
        {
          "name": "user-id",
          "description": "Specifies the unique id of the user.",
          "values": []
        },
        {
          "name": "username",
          "description": "Specifies the username of the user.",
          "values": []
        }
      ],
      "references": []
    },
    {
      "name": "calcite-block",
      "description": "### Events\n- **calciteBlockBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteBlockBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteBlockClose** - Fires when the component is closed and animation is complete.\n- **calciteBlockOpen** - Fires when the component is open and animation is complete.\n- **calciteBlockSortHandleBeforeClose** - Fires when the sort handle is requested to be closed and before the closing transition begins.\n- **calciteBlockSortHandleBeforeOpen** - Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteBlockSortHandleClose** - Fires when the sort handle is closed and animation is complete.\n- **calciteBlockSortHandleOpen** - Fires when the sort handle is open and animation is complete.\n- **calciteBlockToggle** - Fires when the component's header is clicked.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's first tabbable element.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **actions-end** - A slot for adding actionable `calcite-action` elements after the content of the component. It is recommended to use two or fewer actions.\n- **icon** - [Deprecated] A slot for adding a leading header icon with `calcite-icon`. Use `icon-start` instead.\n- **content-start** - A slot for adding non-actionable elements before content of the component.\n- **control** - [Deprecated] A slot for adding a single HTML input element in a header. Use `actions-end` instead.\n- **header-menu-actions** - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu.\n\n### CSS Properties\n- **--calcite-block-border-color** - Specifies the component's border color. \n- **--calcite-block-header-background-color** - Specifies the component's `heading` background color. \n- **--calcite-block-header-background-color-hover** - Specifies the compo