{
  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-css-languageservice/main/docs/customData.schema.json",
  "version": 1.1,
  "properties": [
    {
      "name": "--calcite-accordion-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-accordion-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-accordion-text-color",
      "description": "Specifies the component's text color."
    },
    {
      "name": "--calcite-accordion-text-color-hover",
      "description": "Specifies the component's main text color on hover."
    },
    {
      "name": "--calcite-accordion-text-color-press",
      "description": "Specifies the component's main text color when pressed."
    },
    {
      "name": "--calcite-accordion-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-accordion-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-accordion-text-color",
      "description": "Specifies the component's text color."
    },
    {
      "name": "--calcite-accordion-text-color-hover",
      "description": "Specifies the component's main text color on hover."
    },
    {
      "name": "--calcite-accordion-text-color-press",
      "description": "Specifies the component's main text color when pressed."
    },
    {
      "name": "--calcite-accordion-item-background-color",
      "description": "[Deprecated] Use `--calcite-accordion-background-color`. Specifies the component's background color."
    },
    {
      "name": "--calcite-accordion-item-border-color",
      "description": "[Deprecated] Use `--calcite-accordion-border-color`. Specifies the component's border color."
    },
    {
      "name": "--calcite-accordion-item-content-space",
      "description": "Specifies the component's padding."
    },
    {
      "name": "--calcite-accordion-item-end-icon-color",
      "description": "Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color."
    },
    {
      "name": "--calcite-accordion-item-expand-icon-color",
      "description": "Specifies the component's expand icon color."
    },
    {
      "name": "--calcite-accordion-item-header-background-color",
      "description": "Specifies the component's `heading` background color."
    },
    {
      "name": "--calcite-accordion-item-header-background-color-hover",
      "description": "Specifies the component's `heading` background color when hovered."
    },
    {
      "name": "--calcite-accordion-item-header-background-color-press",
      "description": "Specifies the component's `heading` background color when pressed."
    },
    {
      "name": "--calcite-accordion-item-heading-text-color",
      "description": "Specifies the component's `heading` text color."
    },
    {
      "name": "--calcite-accordion-item-icon-color",
      "description": "[Deprecated] Use `--calcite-icon-color`. Specifies the component's default icon color."
    },
    {
      "name": "--calcite-accordion-item-start-icon-color",
      "description": "Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color."
    },
    {
      "name": "--calcite-accordion-item-text-color",
      "description": "[Deprecated] Use `--calcite-accordion-text-color`. Specifies the component's text color."
    },
    {
      "name": "--calcite-accordion-item-text-color-hover",
      "description": "[Deprecated] Use `--calcite-accordion-text-color-hover`. Specifies the component's text color on hover."
    },
    {
      "name": "--calcite-accordion-item-text-color-press",
      "description": "[Deprecated] Use `--calcite-accordion-text-color-press`. Specifies the component's text color on press."
    },
    {
      "name": "--calcite-action-background-color-hover",
      "description": "Specifies the component's background color when hovered or focused."
    },
    {
      "name": "--calcite-action-background-color-press",
      "description": "Specifies the component's background color when active."
    },
    {
      "name": "--calcite-action-background-color-pressed",
      "description": "[Deprecated] Use --calcite-action-background-color-press. Specifies the component's background color when active."
    },
    {
      "name": "--calcite-action-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-action-corner-radius-end-end",
      "description": "[Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end end."
    },
    {
      "name": "--calcite-action-corner-radius-end-start",
      "description": "[Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end start."
    },
    {
      "name": "--calcite-action-corner-radius-start-end",
      "description": "[Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start end."
    },
    {
      "name": "--calcite-action-corner-radius-start-start",
      "description": "[Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start start."
    },
    {
      "name": "--calcite-action-corner-radius",
      "description": "Specifies the component's corner radius."
    },
    {
      "name": "--calcite-action-indicator-color",
      "description": "Specifies the component's indicator color."
    },
    {
      "name": "--calcite-action-text-color-press",
      "description": "Specifies the component's text color when pressed or hovered."
    },
    {
      "name": "--calcite-action-text-color-pressed",
      "description": "[Deprecated] Use --calcite-action-text-color-press. Specifies the component's text color when hovered."
    },
    {
      "name": "--calcite-action-text-color",
      "description": "Specifies the component's text color."
    },
    {
      "name": "--calcite-action-bar-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-action-bar-corner-radius",
      "description": "Specifies the component's border radius when `floating` is `true`."
    },
    {
      "name": "--calcite-action-bar-expanded-max-width",
      "description": "When `layout` is `\"vertical\"`, specifies the component's maximum width."
    },
    {
      "name": "--calcite-action-bar-items-space",
      "description": "Specifies the space between slotted components in the component."
    },
    {
      "name": "--calcite-action-bar-shadow",
      "description": "Specifies the component's shadow when `floating` is `true`."
    },
    {
      "name": "--calcite-action-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-action-group-border-color",
      "description": "Specifies the component's border color when used in a `calcite-action-bar` or `calcite-action-menu`."
    },
    {
      "name": "--calcite-action-group-columns",
      "description": "When `layout` is `\"grid\"`, specifies the component's grid-template-columns."
    },
    {
      "name": "--calcite-action-group-gap",
      "description": "When `layout` is `\"grid\"`, specifies the component's gap."
    },
    {
      "name": "--calcite-action-group-padding",
      "description": "[Deprecated] Use `--calcite-action-group-gap`. Specifies the component's padding."
    },
    {
      "name": "--calcite-action-menu-items-space",
      "description": "Specifies the space between actions in the menu."
    },
    {
      "name": "--calcite-action-pad-corner-radius",
      "description": "Specifies the component's border radius."
    },
    {
      "name": "--calcite-action-pad-expanded-max-width",
      "description": "When `layout` is `\"vertical\"`, specifies the component's maximum width when `expanded`."
    },
    {
      "name": "--calcite-action-pad-items-space",
      "description": "Specifies the component's space between slotted components."
    },
    {
      "name": "--calcite-alert-width",
      "description": "Specifies the width of the component."
    },
    {
      "name": "--calcite-alert-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-alert-corner-radius",
      "description": "Specifies the component's corner radius."
    },
    {
      "name": "--calcite-alert-shadow",
      "description": "Specifies the component's shadow."
    },
    {
      "name": "--calcite-alert-offset-size",
      "description": "Specifies the component's `placement` offset."
    },
    {
      "name": "--calcite-autocomplete-background-color",
      "description": "Specifies the background color of the component."
    },
    {
      "name": "--calcite-autocomplete-corner-radius",
      "description": "Specifies the component's corner radius."
    },
    {
      "name": "--calcite-autocomplete-text-color",
      "description": "Specifies the text color of the component."
    },
    {
      "name": "--calcite-autocomplete-input-prefix-size",
      "description": "Specifies the Input's prefix width, when present."
    },
    {
      "name": "--calcite-autocomplete-input-suffix-size",
      "description": "Specifies the Input's suffix width, when present."
    },
    {
      "name": "--calcite-autocomplete-input-background-color",
      "description": "Specifies the background color of the Input."
    },
    {
      "name": "--calcite-autocomplete-input-border-color",
      "description": "Specifies the border color of the Input."
    },
    {
      "name": "--calcite-autocomplete-input-corner-radius",
      "description": "Specifies the corner radius of the Input."
    },
    {
      "name": "--calcite-autocomplete-input-shadow",
      "description": "Specifies the shadow of the Input."
    },
    {
      "name": "--calcite-autocomplete-input-icon-color",
      "description": "Specifies the icon color of the Input."
    },
    {
      "name": "--calcite-autocomplete-input-text-color",
      "description": "Specifies the text color of the Input."
    },
    {
      "name": "--calcite-autocomplete-input-placeholder-text-color",
      "description": "Specifies the color of placeholder text in the Input."
    },
    {
      "name": "--calcite-autocomplete-input-actions-background-color",
      "description": "Specifies the background color of Input's `clearable` element."
    },
    {
      "name": "--calcite-autocomplete-input-actions-background-color-hover",
      "description": "Specifies the background color of Input's `clearable` element when hovered."
    },
    {
      "name": "--calcite-autocomplete-input-actions-background-color-press",
      "description": "Specifies the background color of Input's `clearable` element when pressed."
    },
    {
      "name": "--calcite-autocomplete-input-actions-icon-color",
      "description": "Specifies the icon color of Input's `clearable` element."
    },
    {
      "name": "--calcite-autocomplete-input-actions-icon-color-hover",
      "description": "Specifies the icon color of Input's `clearable` element when hovered."
    },
    {
      "name": "--calcite-autocomplete-input-actions-icon-color-press",
      "description": "Specifies the icon color of Input's `clearable` element when pressed."
    },
    {
      "name": "--calcite-autocomplete-input-loading-background-color",
      "description": "Specifies the background color of the Input's `loading` element, when present."
    },
    {
      "name": "--calcite-autocomplete-input-loading-fill-color",
      "description": "Specifies the fill color of the Input's `loading` element, when present."
    },
    {
      "name": "--calcite-autocomplete-input-prefix-background-color",
      "description": "Specifies the background color of the Input's prefix, when present."
    },
    {
      "name": "--calcite-autocomplete-input-prefix-text-color",
      "description": "Specifies the text color of the Input's prefix, when present."
    },
    {
      "name": "--calcite-autocomplete-input-suffix-background-color",
      "description": "Specifies the background color of the Input's suffix, when present."
    },
    {
      "name": "--calcite-autocomplete-input-suffix-text-color",
      "description": "Specifies the text color of the Input's suffix, when present."
    },
    {
      "name": "--calcite-autocomplete-background-color",
      "description": "Specifies the background color of the component."
    },
    {
      "name": "--calcite-autocomplete-description-text-color",
      "description": "Specifies the text color of the component's description."
    },
    {
      "name": "--calcite-autocomplete-heading-text-color",
      "description": "Specifies the text color of the component's heading."
    },
    {
      "name": "--calcite-autocomplete-text-color",
      "description": "Specifies the text color of the component."
    },
    {
      "name": "--calcite-autocomplete-background-color",
      "description": "Specifies the background color of the component."
    },
    {
      "name": "--calcite-autocomplete-border-color",
      "description": "Specifies the border color of the component."
    },
    {
      "name": "--calcite-autocomplete-text-color",
      "description": "Specifies the text color of the component."
    },
    {
      "name": "--calcite-avatar-corner-radius",
      "description": "Specifies the component's corner radius."
    },
    {
      "name": "--calcite-avatar-color",
      "description": "Specifies the component's icon or initial color."
    },
    {
      "name": "--calcite-avatar-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-block-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-block-header-background-color",
      "description": "Specifies the component's `heading` background color."
    },
    {
      "name": "--calcite-block-header-background-color-hover",
      "description": "Specifies the component's `heading` background color when hovered."
    },
    {
      "name": "--calcite-block-header-background-color-press",
      "description": "Specifies the component's `heading` background color when pressed."
    },
    {
      "name": "--calcite-block-heading-text-color",
      "description": "Specifies the component's `heading` text color."
    },
    {
      "name": "--calcite-block-heading-text-color-press",
      "description": "When the component is `expanded`, specifies the `heading` text color."
    },
    {
      "name": "--calcite-block-padding",
      "description": "[Deprecated] Specifies the padding of the component's `default` slot."
    },
    {
      "name": "--calcite-block-text-color",
      "description": "Specifies the component's text color."
    },
    {
      "name": "--calcite-block-description-text-color",
      "description": "Specifies the component's `description` text color."
    },
    {
      "name": "--calcite-block-icon-color",
      "description": "Specifies the component's `collapsible` icon, `iconStart` and `iconEnd` color."
    },
    {
      "name": "--calcite-block-icon-color-hover",
      "description": "Specifies the component's `collapsible` icon color when hovered."
    },
    {
      "name": "--calcite-block-section-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-block-section-border-color",
      "description": "Specifies the component's border color. When `expanded`, applies to the component's bottom border."
    },
    {
      "name": "--calcite-block-section-header-text-color",
      "description": "Specifies the component's header text color."
    },
    {
      "name": "--calcite-block-section-text-color",
      "description": "Specifies the component's text color."
    },
    {
      "name": "--calcite-block-section-text-color-hover",
      "description": "Specifies the component's text color on hover."
    },
    {
      "name": "--calcite-button-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-button-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-button-corner-radius",
      "description": "Specifies the component's corner radius."
    },
    {
      "name": "--calcite-button-icon-color",
      "description": "Specifies the component's `iconStart` and"
    },
    {
      "name": "--calcite-button-loader-color",
      "description": "Specifies the component's loader color."
    },
    {
      "name": "--calcite-button-shadow-color",
      "description": "Specifies the component's box-shadow color."
    },
    {
      "name": "--calcite-button-text-color",
      "description": "Specifies the component's text color."
    },
    {
      "name": "--calcite-card-accent-color-selected",
      "description": "Specifies the component's accent color when `selected`."
    },
    {
      "name": "--calcite-card-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-card-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-card-corner-radius",
      "description": "Specifies the component's corner radius."
    },
    {
      "name": "--calcite-card-selection-background-color-active",
      "description": "[Deprecated] Use `--calcite-card-selection-background-color-press`. Specifies the component's selection element background color when active."
    },
    {
      "name": "--calcite-card-selection-background-color-hover",
      "description": "Specifies the component's selection element background color when hovered."
    },
    {
      "name": "--calcite-card-selection-background-color-press",
      "description": "Specifies the component's selection element background color when active."
    },
    {
      "name": "--calcite-card-selection-background-color-selected",
      "description": "[Deprecated] Use `--calcite-card-background-color`. Specifies the component's selection element icon color when `selected`."
    },
    {
      "name": "--calcite-card-selection-background-color",
      "description": "[Deprecated] Use `--calcite-card-background-color`. Specifies the component's selection element background color."
    },
    {
      "name": "--calcite-card-selection-color-hover",
      "description": "Specifies the component's selection element color when hovered or focused."
    },
    {
      "name": "--calcite-card-selection-color",
      "description": "Specifies the component's selection element color."
    },
    {
      "name": "--calcite-card-selection-icon-color-hover",
      "description": "[Deprecated] Use `--calcite-card-selection-color-hover`. Specifies the component's selection element icon color when hovered."
    },
    {
      "name": "--calcite-card-selection-icon-color-selected",
      "description": "[Deprecated] Use `--calcite-card-accent-color-selected`. Specifies the component's selection element icon color when `selected`."
    },
    {
      "name": "--calcite-card-selection-icon-color",
      "description": "[Deprecated] Use `--calcite-card-selection-color`. Specifies the component's selection element icon color."
    },
    {
      "name": "--calcite-card-shadow",
      "description": "Specifies the component's shadow."
    },
    {
      "name": "--calcite-card-group-gap",
      "description": "[Deprecated] Use `--calcite-card-group-space`. Specifies the gap between slotted elements."
    },
    {
      "name": "--calcite-card-group-space",
      "description": "Specifies the space between slotted elements."
    },
    {
      "name": "--calcite-checkbox-size",
      "description": "Specifies the component's height and width."
    },
    {
      "name": "--calcite-checkbox-border-color",
      "description": "Specifies the component's color."
    },
    {
      "name": "--calcite-checkbox-border-color-hover",
      "description": "Specifies the component's color when hovered."
    },
    {
      "name": "--calcite-checkbox-border-color-press",
      "description": "Specifies the component's color when pressed."
    },
    {
      "name": "--calcite-checkbox-icon-color",
      "description": "Specifies the component's icon color."
    },
    {
      "name": "--calcite-chip-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-chip-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-chip-close-icon-color",
      "description": "Specifies the component's close element icon color."
    },
    {
      "name": "--calcite-chip-corner-radius",
      "description": "Specifies the component's corner radius."
    },
    {
      "name": "--calcite-chip-icon-color",
      "description": "Specifies the component's icon color."
    },
    {
      "name": "--calcite-chip-select-icon-color-press",
      "description": "Specifies the component's selection element icon color when active."
    },
    {
      "name": "--calcite-chip-select-icon-color-pressed",
      "description": "[Deprecated] Use `--calcite-chip-select-icon-color-press`. Specifies the component's selection element icon color when active."
    },
    {
      "name": "--calcite-chip-select-icon-color",
      "description": "Specifies the component's selection element icon color."
    },
    {
      "name": "--calcite-chip-text-color",
      "description": "Specifies the component's text color."
    },
    {
      "name": "--calcite-combobox-divider-color",
      "description": "Specifies the component's divider color."
    },
    {
      "name": "--calcite-combobox-icon-color",
      "description": "Specifies the component's icon color."
    },
    {
      "name": "--calcite-combobox-icon-color-hover",
      "description": "Specifies the component's icon color when hovered."
    },
    {
      "name": "--calcite-combobox-background-color",
      "description": "Specifies the background color of the component's listbox."
    },
    {
      "name": "--calcite-combobox-input-border-color",
      "description": "Specifies the border color of the component's input."
    },
    {
      "name": "--calcite-combobox-input-background-color",
      "description": "Specifies the background color of the component's input."
    },
    {
      "name": "--calcite-combobox-input-height",
      "description": "Specifies the height of the component's input."
    },
    {
      "name": "--calcite-combobox-input-text-color",
      "description": "When `selectionDisplay` is `\"single\"`, specifies the text color of the component's input."
    },
    {
      "name": "--calcite-combobox-item-border-color",
      "description": "[Deprecated] Specifies the component's border color."
    },
    {
      "name": "--calcite-combobox-text-color",
      "description": "Specifies the component's text and `icon` color."
    },
    {
      "name": "--calcite-combobox-text-color-hover",
      "description": "Specifies the component's text and `icon` color when hovered."
    },
    {
      "name": "--calcite-combobox-item-background-color-active",
      "description": "Specifies the component's background color when active."
    },
    {
      "name": "--calcite-combobox-item-background-color-hover",
      "description": "Specifies the component's background color when hovered."
    },
    {
      "name": "--calcite-combobox-item-shadow",
      "description": "Specifies the component's shadow."
    },
    {
      "name": "--calcite-combobox-selected-icon-color",
      "description": "Specifies the component's selected indicator icon color."
    },
    {
      "name": "--calcite-combobox-description-text-color",
      "description": "Specifies the component's `description` and `shortHeading` text color."
    },
    {
      "name": "--calcite-combobox-description-text-color-press",
      "description": "Specifies the component's `description` and `shortHeading` text color when hovered."
    },
    {
      "name": "--calcite-combobox-heading-text-color",
      "description": "Specifies the component's `heading` text color."
    },
    {
      "name": "--calcite-combobox-item-group-text-color",
      "description": "Specifies the text color of the component."
    },
    {
      "name": "--calcite-combobox-item-group-border-color",
      "description": "Specifies the border color of the component."
    },
    {
      "name": "--calcite-date-picker-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-date-picker-corner-radius",
      "description": "Specifies the component's border radius."
    },
    {
      "name": "--calcite-date-picker-range-calendar-divider-color",
      "description": "Specifies the divider color between calendar's when `range=\"true\"`."
    },
    {
      "name": "--calcite-date-picker-week-header-text-color",
      "description": "Specifies the week header text color."
    },
    {
      "name": "--calcite-date-picker-header-action-background-color",
      "description": "Specifies the background color of header action's of the component."
    },
    {
      "name": "--calcite-date-picker-header-action-background-color-hover",
      "description": "Specifies the background color of header action's of the component when hovered."
    },
    {
      "name": "--calcite-date-picker-header-action-background-color-press",
      "description": "Specifies the background color of header action's of the component when pressed."
    },
    {
      "name": "--calcite-date-picker-header-action-text-color",
      "description": "Specifies the text color of header action's of the component."
    },
    {
      "name": "--calcite-date-picker-header-action-text-color-press",
      "description": "Specifies the text color of header action's of the component when pressed."
    },
    {
      "name": "--calcite-date-picker-year-text-color",
      "description": "Specifies the text color of year & suffix of the component."
    },
    {
      "name": "--calcite-date-picker-month-select-font-size",
      "description": "Specifies the font size of month select of the component."
    },
    {
      "name": "--calcite-date-picker-month-select-text-color",
      "description": "Specifies the text color of month select of the component."
    },
    {
      "name": "--calcite-date-picker-month-select-icon-color",
      "description": "Specifies the icon color of month select of the component."
    },
    {
      "name": "--calcite-date-picker-month-select-icon-color-hover",
      "description": "Specifies the icon color of month select of the component when hovered."
    },
    {
      "name": "--calcite-date-picker-day-background-color",
      "description": "Specifies the background color of day of the component."
    },
    {
      "name": "--calcite-date-picker-day-background-color-hover",
      "description": "Specifies the background color of day of the component when hovered."
    },
    {
      "name": "--calcite-date-picker-day-text-color",
      "description": "Specifies the text color of day of the component."
    },
    {
      "name": "--calcite-date-picker-day-text-color-hover",
      "description": "Specifies the text color of day of the component when hovered."
    },
    {
      "name": "--calcite-date-picker-current-day-text-color",
      "description": "Specifies the text color of current day of the component."
    },
    {
      "name": "--calcite-date-picker-day-background-color-selected",
      "description": "Specifies the background color of selected day of the component."
    },
    {
      "name": "--calcite-date-picker-day-text-color-selected",
      "description": "Specifies the text color of selected day of the component."
    },
    {
      "name": "--calcite-date-picker-day-range-text-color",
      "description": "Specifies the text color of select day range of the component."
    },
    {
      "name": "--calcite-date-picker-day-range-background-color",
      "description": "Specifies the background color of select day range of the component."
    },
    {
      "name": "--calcite-date-picker-day-outside-range-background-color-hover",
      "description": "Specifies the background color of day's outside current range when hovered."
    },
    {
      "name": "--calcite-date-picker-day-outside-range-text-color-hover",
      "description": "Specifies the text color of day's outside current range when hovered."
    },
    {
      "name": "--calcite-dialog-scrim-background-color",
      "description": "Specifies the background color of the component's scrim."
    },
    {
      "name": "--calcite-dialog-size-x",
      "description": "Specifies the width of the component, using `px`, `em`, `rem`, `vw`, or `%`. Does not exceed the viewport's width - applies when `placement=\"cover\"` is set."
    },
    {
      "name": "--calcite-dialog-min-size-x",
      "description": "Specifies the minimum width of the component, using `px`, `em`, `rem`, `vw`, or `%`."
    },
    {
      "name": "--calcite-dialog-max-size-x",
      "description": "Specifies the maximum width of the component, using `px`, `em`, `rem`, `vw`, or `%`."
    },
    {
      "name": "--calcite-dialog-size-y",
      "description": "Specifies the height of the component, using `px`, `em`, `rem`, `vh`, or `%`. Does not exceed the viewport's height - applies when `placement=\"cover\"` is set."
    },
    {
      "name": "--calcite-dialog-min-size-y",
      "description": "Specifies the minimum height of the component, using `px`, `em`, `rem`, `vh`, or `%`."
    },
    {
      "name": "--calcite-dialog-max-size-y",
      "description": "Specifies the maximum height of the component, using `px`, `em`, `rem`, `vh`, or `%`."
    },
    {
      "name": "--calcite-dialog-content-space",
      "description": "Specifies the padding of the component's content."
    },
    {
      "name": "--calcite-dialog-footer-space",
      "description": "Specifies the padding of the component's footer."
    },
    {
      "name": "--calcite-dialog-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-dialog-offset-x",
      "description": "Specifies the horizontal offset of the component."
    },
    {
      "name": "--calcite-dialog-offset-y",
      "description": "Specifies the vertical offset of the component."
    },
    {
      "name": "--calcite-dialog-background-color",
      "description": "Specifies the background color of the component."
    },
    {
      "name": "--calcite-dialog-icon-color",
      "description": "Specifies the color of the component's icon."
    },
    {
      "name": "--calcite-dropdown-width",
      "description": "Specifies the width of the component's wrapper."
    },
    {
      "name": "--calcite-dropdown-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-dropdown-group-border-color",
      "description": "Specifies the `calcite-dropdown`'s border color."
    },
    {
      "name": "--calcite-dropdown-group-title-text-color",
      "description": "Specifies the component's `groupTitle` color."
    },
    {
      "name": "--calcite-dropdown-item-background-color-hover",
      "description": "Specifies the item's background color when hovered."
    },
    {
      "name": "--calcite-dropdown-item-background-color-press",
      "description": "Specifies the item's background color when selected or active."
    },
    {
      "name": "--calcite-dropdown-item-icon-color-hover",
      "description": "[Deprecated] Specifies the item's icon selection color when hovered."
    },
    {
      "name": "--calcite-dropdown-item-icon-color-press",
      "description": "Specifies the item's icon selection color when selected or active."
    },
    {
      "name": "--calcite-dropdown-item-text-color-press",
      "description": "Specifies the item's text when selected or active."
    },
    {
      "name": "--calcite-dropdown-item-text-color",
      "description": "Specifies the item's text color."
    },
    {
      "name": "--calcite-fab-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-fab-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-fab-corner-radius",
      "description": "Specifies the component's corner radius."
    },
    {
      "name": "--calcite-fab-text-color",
      "description": "Specifies the component's text color."
    },
    {
      "name": "--calcite-fab-loader-color",
      "description": "Specifies the component's loader color."
    },
    {
      "name": "--calcite-fab-shadow",
      "description": "Specifies the component's shadow."
    },
    {
      "name": "--calcite-filter-content-space",
      "description": "Specifies the padding of the component's content."
    },
    {
      "name": "--calcite-filter-input-background-color",
      "description": "Specifies the input's background color."
    },
    {
      "name": "--calcite-filter-input-border-color",
      "description": "Specifies the input's border color."
    },
    {
      "name": "--calcite-filter-input-corner-radius",
      "description": "Specifies the input's corner radius."
    },
    {
      "name": "--calcite-filter-input-shadow",
      "description": "Specifies the shadow around the input."
    },
    {
      "name": "--calcite-filter-input-icon-color",
      "description": "Specifies the input's icon color."
    },
    {
      "name": "--calcite-filter-input-text-color",
      "description": "Specifies the input's text color."
    },
    {
      "name": "--calcite-filter-input-placeholder-text-color",
      "description": "Specifies the input's placeholder text color."
    },
    {
      "name": "--calcite-filter-input-actions-background-color",
      "description": "Specifies the background color of the input's `clearable` element."
    },
    {
      "name": "--calcite-filter-input-actions-background-color-hover",
      "description": "Specifies the background color of the input's `clearable` element when hovered."
    },
    {
      "name": "--calcite-filter-input-actions-background-color-press",
      "description": "Specifies the background color of the input's `clearable` element when pressed."
    },
    {
      "name": "--calcite-filter-input-actions-icon-color",
      "description": "Specifies the icon color of the input's `clearable` element."
    },
    {
      "name": "--calcite-filter-input-actions-icon-color-hover",
      "description": "Specifies the icon color of the input's `clearable` element when hovered."
    },
    {
      "name": "--calcite-filter-input-actions-icon-color-press",
      "description": "Specifies the icon color of the input's `clearable` element when pressed."
    },
    {
      "name": "--calcite-flow-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-flow-item-footer-padding",
      "description": "[Deprecated] Use `--calcite-flow-footer-space` instead. Specifies the padding of the component's footer."
    },
    {
      "name": "--calcite-flow-item-header-border-block-end",
      "description": "[Deprecated] Use `--calcite-flow-border-color` instead. Specifies the component header's block end border."
    },
    {
      "name": "--calcite-flow-corner-radius",
      "description": "Specifies the component's corner radius."
    },
    {
      "name": "--calcite-flow-heading-text-color",
      "description": "Specifies the text color of the component's `heading`."
    },
    {
      "name": "--calcite-flow-icon-color",
      "description": "Specifies the color of the component's icon."
    },
    {
      "name": "--calcite-flow-description-text-color",
      "description": "Specifies the text color of the component's `description`."
    },
    {
      "name": "--calcite-flow-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-flow-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-flow-header-background-color",
      "description": "Specifies the background color of the component's header."
    },
    {
      "name": "--calcite-flow-footer-background-color",
      "description": "Specifies the background color of the component's footer."
    },
    {
      "name": "--calcite-flow-space",
      "description": "Specifies the padding of the component's `\"unnamed (default)\"` slot."
    },
    {
      "name": "--calcite-flow-header-content-space",
      "description": "Specifies the padding of the `\"header-content\"` slot."
    },
    {
      "name": "--calcite-flow-footer-space",
      "description": "Specifies the padding of the component's footer."
    },
    {
      "name": "--calcite-action-background-color",
      "description": "Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s."
    },
    {
      "name": "--calcite-action-background-color-hover",
      "description": "Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s."
    },
    {
      "name": "--calcite-action-background-color-pressed",
      "description": "Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s."
    },
    {
      "name": "--calcite-action-text-color-hover",
      "description": "Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s."
    },
    {
      "name": "--calcite-action-text-color-pressed",
      "description": "Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s."
    },
    {
      "name": "--calcite-popover-border-color",
      "description": "Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s."
    },
    {
      "name": "--calcite-flow-header-action-background-color-hover",
      "description": "Specifies the background color of the component's `calcite-action` items  in the flow item header when hovered."
    },
    {
      "name": "--calcite-flow-header-action-background-color-press",
      "description": "Specifies the background color of the component's `calcite-action` items  in the flow item header when pressed."
    },
    {
      "name": "--calcite-flow-header-action-background-color",
      "description": "Specifies the background color of the component's `calcite-action` items  in the flow item header."
    },
    {
      "name": "--calcite-flow-header-action-indicator-color",
      "description": "Specifies the color of the component's `calcite-action` items' indicator in the flow item header."
    },
    {
      "name": "--calcite-flow-header-action-text-color-press",
      "description": "Specifies the text color of the component's `calcite-action` items in the flow item header when pressed."
    },
    {
      "name": "--calcite-flow-header-action-text-color",
      "description": "Specifies the text color of the component's `calcite-action` items in the flow item header."
    },
    {
      "name": "--calcite-graph-highlight-fill-color",
      "description": "Specifies the fill color of the `highlight` element, when present."
    },
    {
      "name": "--calcite-handle-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-handle-background-color-hover",
      "description": "Specifies the component's background color on hover."
    },
    {
      "name": "--calcite-handle-background-color-selected",
      "description": "Specifies the component's background color when selected."
    },
    {
      "name": "--calcite-handle-icon-color",
      "description": "Specifies the component's icon color."
    },
    {
      "name": "--calcite-handle-icon-color-hover",
      "description": "Specifies the component's icon color on hover."
    },
    {
      "name": "--calcite-handle-icon-color-selected",
      "description": "Specifies the component's icon color when selected."
    },
    {
      "name": "--calcite-ui-icon-color",
      "description": "[Deprecated] Use `--calcite-icon-color`. Specifies the component's color. Defaults to current color."
    },
    {
      "name": "--calcite-icon-color",
      "description": "Specifies the component's color. Defaults to current color."
    },
    {
      "name": "--calcite-inline-editable-background-color-hover",
      "description": "Specifies the component's background color when hovered."
    },
    {
      "name": "--calcite-inline-editable-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-inline-editable-button-background-color",
      "description": "Specifies the button element's background color when appearance=\"solid\" or appearance=\"outline-fill\"."
    },
    {
      "name": "--calcite-inline-editable-button-corner-radius",
      "description": "Specifies the button element's corner radius."
    },
    {
      "name": "--calcite-inline-editable-button-loader-color",
      "description": "Specifies the button element's loader color."
    },
    {
      "name": "--calcite-inline-editable-button-shadow-color",
      "description": "Specifies the button element's box-shadow color."
    },
    {
      "name": "--calcite-inline-editable-button-text-color",
      "description": "Specifies the button element's text color."
    },
    {
      "name": "--calcite-input-prefix-size",
      "description": "Specifies the component's prefix width, when present."
    },
    {
      "name": "--calcite-input-suffix-size",
      "description": "Specifies the component's suffix width, when present."
    },
    {
      "name": "--calcite-input-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-input-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-input-corner-radius",
      "description": "Specifies the component's corner radius."
    },
    {
      "name": "--calcite-input-shadow",
      "description": "Specifies the shadow around the component."
    },
    {
      "name": "--calcite-input-icon-color",
      "description": "Specifies the component's icon color."
    },
    {
      "name": "--calcite-input-text-color",
      "description": "Specifies the component's text color."
    },
    {
      "name": "--calcite-input-placeholder-text-color",
      "description": "Specifies the component's placeholder text color."
    },
    {
      "name": "--calcite-input-actions-background-color",
      "description": "Specifies the background color of the component's `clearable` and `number-button-type` elements."
    },
    {
      "name": "--calcite-input-actions-background-color-hover",
      "description": "Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered."
    },
    {
      "name": "--calcite-input-actions-background-color-press",
      "description": "Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed."
    },
    {
      "name": "--calcite-input-actions-icon-color",
      "description": "Specifies the icon color of the component's `clearable` and `number-button-type` elements."
    },
    {
      "name": "--calcite-input-actions-icon-color-hover",
      "description": "Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered."
    },
    {
      "name": "--calcite-input-actions-icon-color-press",
      "description": "Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed."
    },
    {
      "name": "--calcite-input-loading-background-color",
      "description": "Specifies the background color of the `loading` element, when present."
    },
    {
      "name": "--calcite-input-loading-fill-color",
      "description": "Specifies the fill color of the `loading` element, when present."
    },
    {
      "name": "--calcite-input-prefix-background-color",
      "description": "Specifies the component's prefix background color, when present."
    },
    {
      "name": "--calcite-input-prefix-text-color",
      "description": "Specifies the component's prefix text color, when present."
    },
    {
      "name": "--calcite-input-suffix-background-color",
      "description": "Specifies the component's suffix background color, when present."
    },
    {
      "name": "--calcite-input-suffix-text-color",
      "description": "Specifies the component's suffix text color, when present."
    },
    {
      "name": "--calcite-input-message-spacing-value",
      "description": "[Deprecated] Use `--calcite-input-message-spacing`. Specifies the margin spacing at the top of the component."
    },
    {
      "name": "--calcite-input-message-spacing",
      "description": "Specifies the margin spacing at the top of the component."
    },
    {
      "name": "--calcite-input-message-icon-color",
      "description": "Specifies the component's icon color."
    },
    {
      "name": "--calcite-input-actions-background-color",
      "description": "Specifies the background color of the component's `clearable` and `number-button-type` elements."
    },
    {
      "name": "--calcite-input-actions-background-color-hover",
      "description": "Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered."
    },
    {
      "name": "--calcite-input-actions-background-color-press",
      "description": "Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed."
    },
    {
      "name": "--calcite-input-actions-icon-color",
      "description": "Specifies the icon color of the component's `clearable` and `number-button-type` elements."
    },
    {
      "name": "--calcite-input-actions-icon-color-hover",
      "description": "Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered."
    },
    {
      "name": "--calcite-input-actions-icon-color-press",
      "description": "Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed."
    },
    {
      "name": "--calcite-input-loading-background-color",
      "description": "Specifies the background color of the `loading` element."
    },
    {
      "name": "--calcite-input-loading-fill-color",
      "description": "Specifies the fill color of the `loading` element."
    },
    {
      "name": "--calcite-input-number-background-color",
      "description": "Specifies the background color of the component."
    },
    {
      "name": "--calcite-input-number-border-color",
      "description": "Specifies the border color of the component."
    },
    {
      "name": "--calcite-input-number-corner-radius",
      "description": "Specifies the border radius of the component."
    },
    {
      "name": "--calcite-input-number-height",
      "description": "Specifies the height of the component."
    },
    {
      "name": "--calcite-input-number-placeholder-text-color",
      "description": "Specifies the text color of the placeholder in the component."
    },
    {
      "name": "--calcite-input-number-text-color",
      "description": "Specifies the text color of the component."
    },
    {
      "name": "--calcite-input-number-text-color-focus",
      "description": "Specifies the text color of the component when focused."
    },
    {
      "name": "--calcite-input-prefix-background-color",
      "description": "Specifies the background color of the prefix element."
    },
    {
      "name": "--calcite-input-prefix-size",
      "description": "Specifies the width of the prefix element."
    },
    {
      "name": "--calcite-input-prefix-text-color",
      "description": "Specifies the text color of the prefix element."
    },
    {
      "name": "--calcite-input-suffix-background-color",
      "description": "Specifies the background color of the suffix element."
    },
    {
      "name": "--calcite-input-suffix-size",
      "description": "Specifies the width of the suffix element."
    },
    {
      "name": "--calcite-input-suffix-text-color",
      "description": "Specifies the text color of the suffix element."
    },
    {
      "name": "--calcite-input-prefix-size",
      "description": "Specifies the component's prefix width."
    },
    {
      "name": "--calcite-input-suffix-size",
      "description": "Specifies the component's suffix width."
    },
    {
      "name": "--calcite-label-margin-bottom",
      "description": "Specifies the component's bottom spacing."
    },
    {
      "name": "--calcite-label-text-color",
      "description": "Specifies the component's text color."
    },
    {
      "name": "--calcite-link-text-color",
      "description": "Specifies the component's text color."
    },
    {
      "name": "--calcite-list-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-list-background-color-hover",
      "description": "Specifies the component's background color when hovered."
    },
    {
      "name": "--calcite-list-background-color-press",
      "description": "Specifies the component's background color when pressed."
    },
    {
      "name": "--calcite-list-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-list-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-list-content-text-color",
      "description": "Specifies the content color."
    },
    {
      "name": "--calcite-list-description-text-color",
      "description": "Specifies the `description` color."
    },
    {
      "name": "--calcite-list-icon-color",
      "description": "Specifies the component's icon color."
    },
    {
      "name": "--calcite-list-label-text-color",
      "description": "Specifies the `label` color."
    },
    {
      "name": "--calcite-list-selection-border-color",
      "description": "Specifies the component's selection border color."
    },
    {
      "name": "--calcite-list-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-list-color",
      "description": "Specifies the component's color."
    },
    {
      "name": "--calcite-loader-font-size",
      "description": "When `type` is not `\"indeterminate\"` or `inline`, specifies the font size of the loading percentage."
    },
    {
      "name": "--calcite-loader-size",
      "description": "When `inline` is not set, specifies the component's width and height."
    },
    {
      "name": "--calcite-loader-size-inline",
      "description": "[Deprecated] Use `--calcite-loader-size`. Specifies the width and height of the component when set to inline."
    },
    {
      "name": "--calcite-loader-spacing",
      "description": "Specifies the the component's padding."
    },
    {
      "name": "--calcite-loader-progress-color-inline",
      "description": "When `inline`, specifies the component's progress ring color."
    },
    {
      "name": "--calcite-loader-text-spacing",
      "description": "When not `inline`, specifies the component's `text` margin."
    },
    {
      "name": "--calcite-loader-text-weight",
      "description": "When not `inline` and `text` is provided, specifies the component's `text` font weight."
    },
    {
      "name": "--calcite-loader-text-color",
      "description": "When not `inline` and `text` is provided, specifies the component's `text` color."
    },
    {
      "name": "--calcite-loader-progress-color",
      "description": "When not `inline`, specifies the component's progress ring color."
    },
    {
      "name": "--calcite-loader-track-color",
      "description": "Specifies the component's track color."
    },
    {
      "name": "--calcite-menu-item-accent-color",
      "description": "Specifies the border color of the component when `active`."
    },
    {
      "name": "--calcite-menu-background-color",
      "description": "Specifies the background color of the component."
    },
    {
      "name": "--calcite-menu-item-sub-menu-border-color",
      "description": "Specifies the border color of sub-menu."
    },
    {
      "name": "--calcite-menu-item-sub-menu-corner-radius",
      "description": "Specifies the border radius of sub-menu."
    },
    {
      "name": "--calcite-menu-text-color",
      "description": "Specifies the text color of the component."
    },
    {
      "name": "--calcite-meter-background-color",
      "description": "Specifies the background color of the component."
    },
    {
      "name": "--calcite-meter-border-color",
      "description": "Specifies the border color of the component and displayed step lines."
    },
    {
      "name": "--calcite-meter-shadow",
      "description": "Specifies the box shadow of the component."
    },
    {
      "name": "--calcite-meter-corner-radius",
      "description": "Specifies the corner radius of the component."
    },
    {
      "name": "--calcite-meter-fill-color",
      "description": "Specifies the color of the component's fill."
    },
    {
      "name": "--calcite-meter-range-text-color",
      "description": "Specifies the color of the component's range labels."
    },
    {
      "name": "--calcite-meter-value-text-color",
      "description": "Specifies the color of the component's value label."
    },
    {
      "name": "--calcite-modal-content-background",
      "description": "Specifies the background color of content placed in the component's `\"content\"` slot."
    },
    {
      "name": "--calcite-modal-content-padding",
      "description": "Specifies the padding of the component's `\"content\"` slot."
    },
    {
      "name": "--calcite-modal-scrim-background",
      "description": "Specifies the background color of the component's scrim."
    },
    {
      "name": "--calcite-modal-width",
      "description": "Specifies the width of the component, using `px`, `em`, `rem`, `vw`, or `%`. Will never exceed the width of the viewport. Will not apply if `fullscreen` if set."
    },
    {
      "name": "--calcite-modal-height",
      "description": "Specifies the height of the component, using `px`, `em`, `rem`, `vh`, or `%`. Will never exceed the height of the viewport. Will not apply if `fullscreen` if set."
    },
    {
      "name": "--calcite-navigation-width",
      "description": "Specifies the width of the component's content area."
    },
    {
      "name": "--calcite-navigation-background",
      "description": "[Deprecated] Use `--calcite-navigation-background-color`. Specifies the background color of the component."
    },
    {
      "name": "--calcite-navigation-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-navigation-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-navigation-accent-color",
      "description": "Specifies the component's border color when `active`."
    },
    {
      "name": "--calcite-navigation-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-navigation-logo-heading-text-color",
      "description": "Specifies the component's default color for heading text."
    },
    {
      "name": "--calcite-navigation-logo-text-color",
      "description": "Specifies the component's default color for icon and description text."
    },
    {
      "name": "--calcite-navigation-accent-color",
      "description": "Specifies the components's border color when `active`."
    },
    {
      "name": "--calcite-navigation-user-avatar-corner-radius",
      "description": "Specifies the component's avatar corner radius."
    },
    {
      "name": "--calcite-navigation-user-avatar-color",
      "description": "Specifies the component's avatar icon color."
    },
    {
      "name": "--calcite-navigation-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-navigation-user-full-name-text-color",
      "description": "Specifies the component's `fullName` text color."
    },
    {
      "name": "--calcite-navigation-user-name-text-color",
      "description": "Specifies the component's `username` text color."
    },
    {
      "name": "--calcite-notice-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-notice-close-background-color-focus",
      "description": "Specifies the component's background color when focused."
    },
    {
      "name": "--calcite-notice-close-background-color-press",
      "description": "Specifies the component's background color when active."
    },
    {
      "name": "--calcite-notice-close-icon-color-hover",
      "description": "Specifies the background color of the component's close button when hovered."
    },
    {
      "name": "--calcite-notice-close-icon-color",
      "description": "Specifies the text color of the component's close button."
    },
    {
      "name": "--calcite-notice-title-text-color",
      "description": "Specifies the component's title text color."
    },
    {
      "name": "--calcite-notice-content-text-color",
      "description": "Specifies the component's content text color."
    },
    {
      "name": "--calcite-notice-width",
      "description": "[Deprecated] Specifies the component's width."
    },
    {
      "name": "--calcite-notice-close-text-color-hover",
      "description": "[Deprecated] Use `--calcite-notice-close-icon-color-hover`. Specifies the background color of the component's close button when hovered."
    },
    {
      "name": "--calcite-notice-close-text-color",
      "description": "[Deprecated] Use `--calcite-notice-close-icon-color`. Specifies the text color of the component's close button."
    },
    {
      "name": "--calcite-pagination-color",
      "description": "Specifies the component's item color."
    },
    {
      "name": "--calcite-pagination-color-hover",
      "description": "Specifies the component's item color when hovered or selected."
    },
    {
      "name": "--calcite-pagination-color-border-hover",
      "description": "Specifies the component's item bottom border color when hovered."
    },
    {
      "name": "--calcite-pagination-color-border-active",
      "description": "Specifies the component's item bottom border color when selected."
    },
    {
      "name": "--calcite-pagination-background-color",
      "description": "Specifies the component's item background color when active."
    },
    {
      "name": "--calcite-pagination-icon-color-background-hover",
      "description": "Specifies the component's chevron item background color when hovered."
    },
    {
      "name": "--calcite-panel-corner-radius",
      "description": "Specifies the component's corner radius."
    },
    {
      "name": "--calcite-panel-heading-text-color",
      "description": "Specifies the text color of the component's `heading`."
    },
    {
      "name": "--calcite-panel-icon-color",
      "description": "Specifies the color of the component's icon."
    },
    {
      "name": "--calcite-panel-description-text-color",
      "description": "Specifies the text color of the component's `description`."
    },
    {
      "name": "--calcite-panel-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-panel-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-panel-header-background-color",
      "description": "Specifies the background color of the component's header."
    },
    {
      "name": "--calcite-panel-header-action-background-color",
      "description": "Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions`."
    },
    {
      "name": "--calcite-panel-header-action-background-color-hover",
      "description": "Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when hovered."
    },
    {
      "name": "--calcite-panel-header-action-background-color-press",
      "description": "Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed."
    },
    {
      "name": "--calcite-panel-header-action-text-color",
      "description": "Specifies the text color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions`."
    },
    {
      "name": "--calcite-panel-header-action-text-color-press",
      "description": "Specifies the text color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed or hovered."
    },
    {
      "name": "--calcite-panel-footer-background-color",
      "description": "Specifies the background color of the component's footer."
    },
    {
      "name": "--calcite-panel-space",
      "description": "Specifies the padding of the component's `\"unnamed (default)\"` slot."
    },
    {
      "name": "--calcite-panel-header-content-space",
      "description": "Specifies the padding of the `\"header-content\"` slot."
    },
    {
      "name": "--calcite-panel-footer-space",
      "description": "Specifies the padding of the component's footer."
    },
    {
      "name": "--calcite-popover-border-color",
      "description": "Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s."
    },
    {
      "name": "--calcite-panel-content-space",
      "description": "[Deprecated] Use `--calcite-panel-space` instead. Specifies the padding of the component's content."
    },
    {
      "name": "--calcite-panel-footer-padding",
      "description": "[Deprecated] Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer."
    },
    {
      "name": "--calcite-panel-header-border-block-end",
      "description": "[Deprecated] Use `--calcite-panel-border-color` instead. Specifies the component header's block end border."
    },
    {
      "name": "--calcite-popover-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-popover-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-popover-corner-radius",
      "description": "Specifies the component's corner radius."
    },
    {
      "name": "--calcite-popover-text-color",
      "description": "Specifies the component's text color."
    },
    {
      "name": "--calcite-popover-z-index",
      "description": "Specifies the component's z-index value."
    },
    {
      "name": "--calcite-progress-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-progress-fill-color",
      "description": "Specifies the component's fill color."
    },
    {
      "name": "--calcite-progress-text-color",
      "description": "Specifies the component's text color."
    },
    {
      "name": "--calcite-radio-button-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-radio-button-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-radio-button-corner-radius",
      "description": "Specifies the component's corner radius."
    },
    {
      "name": "--calcite-radio-button-size",
      "description": "Specifies the component's size."
    },
    {
      "name": "--calcite-radio-size",
      "description": "[Deprecated] Use `--calcite-radio-button-size`. Specifies the component's size."
    },
    {
      "name": "--calcite-radio-button-group-gap",
      "description": "Specifies the space between slotted components in the component."
    },
    {
      "name": "--calcite-radio-button-input-message-spacing",
      "description": "Specifies the margin spacing at the top of the input-message component."
    },
    {
      "name": "--calcite-rating-spacing-unit",
      "description": "[Deprecated] Use `--calcite-rating-spacing`. Specifies the amount of left and right margin spacing between each item."
    },
    {
      "name": "--calcite-rating-spacing",
      "description": "Specifies the amount of left and right margin spacing between each item."
    },
    {
      "name": "--calcite-rating-color-hover",
      "description": "Specifies the component's item color when hovered."
    },
    {
      "name": "--calcite-rating-color-press",
      "description": "Specifies the component's item color when active."
    },
    {
      "name": "--calcite-rating-color",
      "description": "Specifies the component's item color."
    },
    {
      "name": "--calcite-rating-average-color",
      "description": "Specifies the component's item color when average is set."
    },
    {
      "name": "--calcite-rating-average-text-color",
      "description": "Specifies the component's average text color."
    },
    {
      "name": "--calcite-rating-count-text-color",
      "description": "Specifies the component's count text color."
    },
    {
      "name": "--calcite-scrim-background",
      "description": "Specifies the background color of the scrim."
    },
    {
      "name": "--calcite-segmented-control-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-segmented-control-color",
      "description": "Specifies the component's color."
    },
    {
      "name": "--calcite-segmented-control-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-segmented-control-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-segmented-control-shadow",
      "description": "Specifies the component's shadow."
    },
    {
      "name": "--calcite-segmented-control-icon-color",
      "description": "Specifies the icons's color."
    },
    {
      "name": "--calcite-select-font-size",
      "description": "Specifies the font size of `calcite-option`s in the component."
    },
    {
      "name": "--calcite-select-text-color",
      "description": "Specifies the text color of `calcite-option`s in the component."
    },
    {
      "name": "--calcite-select-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-select-icon-color",
      "description": "Specifies the component's icon color."
    },
    {
      "name": "--calcite-select-icon-color-hover",
      "description": "Specifies the component's icon color when hovered or active."
    },
    {
      "name": "--calcite-sheet-background-color",
      "description": "Specifies the background color of the sheet."
    },
    {
      "name": "--calcite-sheet-corner-radius",
      "description": "Specifies the corner radius of the component."
    },
    {
      "name": "--calcite-sheet-shadow",
      "description": "Specifies the shadow of the component."
    },
    {
      "name": "--calcite-sheet-text-color",
      "description": "Specifies the text color of the component."
    },
    {
      "name": "--calcite-sheet-resize-background-color",
      "description": "Specifies the background color of the resize handle."
    },
    {
      "name": "--calcite-sheet-resize-icon-color",
      "description": "Specifies the text color of the resize handle."
    },
    {
      "name": "--calcite-sheet-scrim-background",
      "description": "Specifies the background color of the sheet scrim."
    },
    {
      "name": "--calcite-sheet-width",
      "description": "When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the width of the component."
    },
    {
      "name": "--calcite-sheet-max-width",
      "description": "When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the maximum width of the component."
    },
    {
      "name": "--calcite-sheet-min-width",
      "description": "When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the minimum width of the component."
    },
    {
      "name": "--calcite-sheet-height",
      "description": "When `position` is `\"block-start\"` or `\"block-end\"`, specifies the height of the component."
    },
    {
      "name": "--calcite-sheet-max-height",
      "description": "When `position` is `\"block-start\"` or `\"block-end\"`, specifies the maximum height of the component."
    },
    {
      "name": "--calcite-sheet-min-height",
      "description": "When `position` is `\"block-start\"` or `\"block-end\"`, specifies the minimum height of the component."
    },
    {
      "name": "--calcite-shell-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-shell-tip-spacing",
      "description": "[Deprecated] This component has been deprecated. The left and right spacing of the `calcite-tip-manager` when slotted in the component."
    },
    {
      "name": "--calcite-shell-panel-background-color",
      "description": "Specifies the background color of the component."
    },
    {
      "name": "--calcite-shell-panel-border-color",
      "description": "When `displayMode` is `\"float-all\"`, specifies the component's border color."
    },
    {
      "name": "--calcite-shell-panel-corner-radius",
      "description": "When `displayMode` is `\"float-all\"`, specifies the component's corner radius."
    },
    {
      "name": "--calcite-shell-panel-height",
      "description": "When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the height of the component."
    },
    {
      "name": "--calcite-shell-panel-max-height",
      "description": "When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the maximum height of the component."
    },
    {
      "name": "--calcite-shell-panel-max-width",
      "description": "Specifies the maximum width of the component."
    },
    {
      "name": "--calcite-shell-panel-min-height",
      "description": "When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the minimum height of the component."
    },
    {
      "name": "--calcite-shell-panel-min-width",
      "description": "Specifies the minimum width of the component."
    },
    {
      "name": "--calcite-shell-panel-resize-background-color",
      "description": "Specifies the background color of the resize handle."
    },
    {
      "name": "--calcite-shell-panel-resize-icon-color",
      "description": "Specifies the text color of the resize handle."
    },
    {
      "name": "--calcite-shell-panel-shadow",
      "description": "When `displayMode` is `\"float-all\"`, specifies the component's shadow."
    },
    {
      "name": "--calcite-shell-panel-text-color",
      "description": "Specifies the text color of the component."
    },
    {
      "name": "--calcite-shell-panel-width",
      "description": "Specifies the width of the component."
    },
    {
      "name": "--calcite-shell-panel-z-index",
      "description": "Specifies the z-index value for the component."
    },
    {
      "name": "--calcite-slider-text-color",
      "description": "Specifies the component's text color."
    },
    {
      "name": "--calcite-slider-track-color",
      "description": "Specifies the component's track color."
    },
    {
      "name": "--calcite-slider-track-fill-color",
      "description": "Specifies the component's track fill color."
    },
    {
      "name": "--calcite-slider-handle-fill-color",
      "description": "Specifies the component's handle fill color."
    },
    {
      "name": "--calcite-slider-handle-extension-color",
      "description": "Specifies the component's handle extension color."
    },
    {
      "name": "--calcite-slider-accent-color",
      "description": "Specifies the component's accent color."
    },
    {
      "name": "--calcite-slider-tick-color",
      "description": "Specifies the component's tick color."
    },
    {
      "name": "--calcite-slider-tick-border-color",
      "description": "Specifies the component's tick border color."
    },
    {
      "name": "--calcite-slider-tick-selected-color",
      "description": "Specifies the component's tick color when in selected range."
    },
    {
      "name": "--calcite-slider-graph-color",
      "description": "Specifies the component's graph color."
    },
    {
      "name": "--calcite-stack-padding-inline",
      "description": "Specifies the inline padding of the component's content."
    },
    {
      "name": "--calcite-stack-padding-block",
      "description": "Specifies the block padding of the component's content."
    },
    {
      "name": "--calcite-stepper-bar-gap",
      "description": "Specifies the space between items in the component."
    },
    {
      "name": "--calcite-stepper-bar-inactive-fill-color",
      "description": "Specifies the fill color of items in the component."
    },
    {
      "name": "--calcite-stepper-bar-active-fill-color",
      "description": "Specifies the fill color of active items in the component."
    },
    {
      "name": "--calcite-stepper-bar-complete-fill-color",
      "description": "Specifies the fill color of complete items in the component."
    },
    {
      "name": "--calcite-stepper-bar-error-fill-color",
      "description": "Specifies the fill color of error items in the component."
    },
    {
      "name": "--calcite-stepper-item-background-color-press",
      "description": "Specifies the component's background-color when active."
    },
    {
      "name": "--calcite-stepper-item-header-text-color",
      "description": "Specifies the component's header text color."
    },
    {
      "name": "--calcite-stepper-item-header-text-color-hover",
      "description": "Specifies the component's header text color when hovered or focused."
    },
    {
      "name": "--calcite-stepper-item-selected-header-text-color",
      "description": "Specifies the component's header text color when selected."
    },
    {
      "name": "--calcite-stepper-item-icon-color",
      "description": "Specifies the component's icon color."
    },
    {
      "name": "--calcite-stepper-item-complete-icon-color",
      "description": "Specifies the component's icon color when complete."
    },
    {
      "name": "--calcite-stepper-item-error-icon-color",
      "description": "Specifies the component's icon and number color when in error."
    },
    {
      "name": "--calcite-stepper-item-selected-icon-color",
      "description": "Specifies the component's icon and number color when selected."
    },
    {
      "name": "--calcite-stepper-item-description-text-color",
      "description": "Specifies the component's description and number text color."
    },
    {
      "name": "--calcite-stepper-item-description-text-color-hover",
      "description": "Specifies the component's description text color when hovered, focused or selected."
    },
    {
      "name": "--calcite-stepper-bar-gap",
      "description": "Specifies the component's bottom spacing."
    },
    {
      "name": "--calcite-stepper-bar-fill-color",
      "description": "Specifies the component's fill color."
    },
    {
      "name": "--calcite-stepper-bar-fill-color-hover",
      "description": "Specifies the component's fill color when hovered or focused."
    },
    {
      "name": "--calcite-stepper-bar-complete-fill-color",
      "description": "Specifies the component's fill color when complete."
    },
    {
      "name": "--calcite-stepper-bar-complete-fill-color-hover",
      "description": "When the component is `complete`, specifies the component's fill color when hovered or focused."
    },
    {
      "name": "--calcite-stepper-bar-error-fill-color",
      "description": "Specifies the component's fill color when in error."
    },
    {
      "name": "--calcite-stepper-bar-error-fill-color-hover",
      "description": "When the component contains an `error`, specifies the component's fill color when hovered or focused."
    },
    {
      "name": "--calcite-stepper-bar-selected-fill-color",
      "description": "Specifies the component's fill color when selected."
    },
    {
      "name": "--calcite-switch-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-switch-background-color-hover",
      "description": "Specifies the component's background color when hovered or pressed."
    },
    {
      "name": "--calcite-switch-border-color",
      "description": "[Deprecated] No longer necessary. Specifies the component's border color."
    },
    {
      "name": "--calcite-switch-corner-radius",
      "description": "Specifies the component's corner radius."
    },
    {
      "name": "--calcite-switch-handle-background-color",
      "description": "Specifies the handle's background color."
    },
    {
      "name": "--calcite-switch-handle-border-color",
      "description": "[Deprecated] No longer necessary. Specifies the handle's border color."
    },
    {
      "name": "--calcite-switch-handle-shadow",
      "description": "[Deprecated] No longer necessary. Specifies the handle's shadow."
    },
    {
      "name": "--calcite-tab-content-space-y",
      "description": "Specifies the vertical space between the component's content in the `default` slot."
    },
    {
      "name": "--calcite-tab-content-block-padding",
      "description": "[Deprecated] Use `--calcite-tab-content-space-y` instead. Specifies the block padding of the component's content in the `default` slot."
    },
    {
      "name": "--calcite-tab-background-color",
      "description": "When `calcite-tabs` is `bordered`, specifies the component's background color."
    },
    {
      "name": "--calcite-tab-border-color",
      "description": "When `calcite-tabs` is `bordered`, specifies the component's border color."
    },
    {
      "name": "--calcite-tab-text-color",
      "description": "Specifies the component's `iconStart, `iconEnd`, and text color."
    },
    {
      "name": "--calcite-tab-text-color",
      "description": "Specifies the component's text color."
    },
    {
      "name": "--calcite-tab-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-tab-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-tab-background-color-hover",
      "description": "When `calcite-tabs` is `bordered`, specifies the component's background color when hovered."
    },
    {
      "name": "--calcite-tab-accent-color-press",
      "description": "Specifies the component's accent color when selected or active."
    },
    {
      "name": "--calcite-tab-icon-color-end",
      "description": "Specifies the component's `iconEnd` color. Fallback to `--calcite-icon-color`."
    },
    {
      "name": "--calcite-tab-icon-color-start",
      "description": "Specifies the component's `iconStart` color. Fallback to `--calcite-icon-color`."
    },
    {
      "name": "--calcite-tab-close-icon-color",
      "description": "Specifies the component's close element icon color."
    },
    {
      "name": "--calcite-tab-close-icon-color-press",
      "description": "Specifies the component's close element icon color when hovered, focused, and active."
    },
    {
      "name": "--calcite-tab-close-icon-background-color",
      "description": "Specifies the component's close element icon background color."
    },
    {
      "name": "--calcite-tab-close-icon-background-color-press",
      "description": "Specifies the component's close element icon background color when hovered, focused, and active."
    },
    {
      "name": "--calcite-table-cell-background",
      "description": "Specifies the background color of the component."
    },
    {
      "name": "--calcite-table-header-background",
      "description": "Specifies the background color of the component."
    },
    {
      "name": "--calcite-table-header-border-color",
      "description": "Specifies the border color of the component."
    },
    {
      "name": "--calcite-table-row-background",
      "description": "Specifies the background color of the component."
    },
    {
      "name": "--calcite-table-row-border-color",
      "description": "Specifies the border color of the component."
    },
    {
      "name": "--calcite-tab-background-color",
      "description": "When `bordered`, specifies the component's background color."
    },
    {
      "name": "--calcite-tab-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-text-area-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-text-area-border-color",
      "description": "Specifies the component's text area border color."
    },
    {
      "name": "--calcite-text-area-character-limit-text-color",
      "description": "Specifies the color of the character limit text displayed in the footer of the component."
    },
    {
      "name": "--calcite-text-area-divider-color",
      "description": "Specifies the color of the divider between the text area and footer."
    },
    {
      "name": "--calcite-text-area-font-size",
      "description": "Specifies the font size of the text area and footer."
    },
    {
      "name": "--calcite-text-area-max-height",
      "description": "Specifies the component's text area maximum height."
    },
    {
      "name": "--calcite-text-area-min-height",
      "description": "Specifies the component's text area minimum height."
    },
    {
      "name": "--calcite-text-area-max-width",
      "description": "Specifies the component's text area maximum width."
    },
    {
      "name": "--calcite-text-area-min-width",
      "description": "Specifies the component's text area minimum width."
    },
    {
      "name": "--calcite-text-area-text-color",
      "description": "Specifies the component's text color."
    },
    {
      "name": "--calcite-text-area-footer-border-color",
      "description": "Specifies the footer's border color."
    },
    {
      "name": "--calcite-text-area-corner-radius",
      "description": "Specifies component's corner radius."
    },
    {
      "name": "--calcite-text-area-shadow",
      "description": "Specifies the component's shadow."
    },
    {
      "name": "--calcite-text-area-footer-background-color",
      "description": "Specifies the footer's background color."
    },
    {
      "name": "--calcite-tile-accent-color-press",
      "description": "When the parent `calcite-tile-group` has a `selectionMode` that is not `\"none\"`, specifies the color of the component's selection elements, such as the radio, checkbox, and border."
    },
    {
      "name": "--calcite-tile-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-tile-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-tile-corner-radius",
      "description": "Specifies the component's corner radius."
    },
    {
      "name": "--calcite-tile-heading-text-color",
      "description": "Specifies the component's `heading` text color."
    },
    {
      "name": "--calcite-tile-link-color",
      "description": "When `href` is present, specifies the component's link color."
    },
    {
      "name": "--calcite-tile-shadow",
      "description": "Specifies the shadow around the component."
    },
    {
      "name": "--calcite-tile-text-color",
      "description": "Specifies the component's `description` and `icon` text color, but not the `heading` text color."
    },
    {
      "name": "--calcite-tile-link-text-color",
      "description": "Specifies the component's link text color."
    },
    {
      "name": "--calcite-time-picker-background-color",
      "description": "Specifies the background color of the time picker."
    },
    {
      "name": "--calcite-time-picker-corner-radius",
      "description": "Specifies the border radius of the time picker."
    },
    {
      "name": "--calcite-time-picker-button-background-color-hover",
      "description": "Specifies the button's background color when hovered or focused."
    },
    {
      "name": "--calcite-time-picker-button-background-color-press",
      "description": "Specifies the button's background color when active."
    },
    {
      "name": "--calcite-time-picker-color",
      "description": "Specifies the component's text color."
    },
    {
      "name": "--calcite-time-picker-icon-color",
      "description": "Specifies the component's icon color."
    },
    {
      "name": "--calcite-time-picker-input-border-color-press",
      "description": "Specifies the input's border color when active."
    },
    {
      "name": "--calcite-time-picker-input-border-color-hover",
      "description": "Specifies the input's border color when hovered."
    },
    {
      "name": "--calcite-tip-manager-height",
      "description": "The maximum height of the component."
    },
    {
      "name": "--calcite-tip-max-width",
      "description": "The maximum width of a slotted `calcite-tip` within the component."
    },
    {
      "name": "--calcite-tooltip-background-color",
      "description": "Specifies the component's background color."
    },
    {
      "name": "--calcite-tooltip-border-color",
      "description": "Specifies the component's border color."
    },
    {
      "name": "--calcite-tooltip-corner-radius",
      "description": "Specifies the component's corner radius."
    },
    {
      "name": "--calcite-tooltip-text-color",
      "description": "Specifies the component's text color."
    },
    {
      "name": "--calcite-tooltip-z-index",
      "description": "Specifies the z-index value for the component."
    },
    {
      "name": "--calcite-tree-text-color",
      "description": "Specifies the component's text color."
    },
    {
      "name": "--calcite-tree-text-color-selected",
      "description": "Specifies the component's text color when selected."
    },
    {
      "name": "--calcite-tree-selected-icon-color",
      "description": "Specifies the component's selection icon color."
    }
  ],
  "pseudoElements": []
}