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

Web Components for Esri's Calcite Design System.

{
  "$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-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-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": "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-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-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": "--calci