{ "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json", "version": 1.1, "tags": [ { "name": "calcite-accordion", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however `calcite-accordion-item`s can.\n\n### CSS Properties\n- **--calcite-accordion-border-color** - Specifies the component's border color. \n- **--calcite-accordion-background-color** - Specifies the component's background color. \n- **--calcite-accordion-text-color** - Specifies the component's text color. \n- **--calcite-accordion-text-color-hover** - Specifies the component's main text color on hover. \n- **--calcite-accordion-text-color-press** - Specifies the component's main text color when pressed. ", "attributes": [ { "name": "appearance", "description": "Specifies the appearance of the component.", "values": [ { "name": "solid" }, { "name": "transparent" } ] }, { "name": "icon-position", "description": "Specifies the placement of the icon in the header.", "values": [ { "name": "end" }, { "name": "start" } ] }, { "name": "icon-type", "description": "Specifies the type of the icon in the header.", "values": [ { "name": "caret" }, { "name": "chevron" }, { "name": "plus-minus" } ] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "selection-mode", "description": "Specifies the selection mode of the component, where:\n\n`\"multiple\"` allows any number of selections,\n\n`\"single\"` allows only one selection, and\n\n`\"single-persist\"` allows one selection and prevents de-selection.", "values": [ { "name": "multiple" }, { "name": "single" }, { "name": "single-persist" } ] } ], "references": [] }, { "name": "calcite-accordion-item", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding custom content, including nested `calcite-accordion-item`s.\n- **actions-end** - A slot for adding `calcite-action`s or content to the end side of the component's header.\n- **actions-start** - A slot for adding `calcite-action`s or content to the start side of the component's header.\n\n### CSS Properties\n- **--calcite-accordion-border-color** - Specifies the component's border color. \n- **--calcite-accordion-background-color** - Specifies the component's background color. \n- **--calcite-accordion-text-color** - Specifies the component's text color. \n- **--calcite-accordion-text-color-hover** - Specifies the component's main text color on hover. \n- **--calcite-accordion-text-color-press** - Specifies the component's main text color when pressed. \n- **--calcite-accordion-item-background-color** - [Deprecated] Use `--calcite-accordion-background-color`. Specifies the component's background color. \n- **--calcite-accordion-item-border-color** - [Deprecated] Use `--calcite-accordion-border-color`. Specifies the component's border color. \n- **--calcite-accordion-item-content-space** - Specifies the component's padding. \n- **--calcite-accordion-item-end-icon-color** - Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color. \n- **--calcite-accordion-item-expand-icon-color** - Specifies the component's expand icon color. \n- **--calcite-accordion-item-header-background-color** - Specifies the component's `heading` background color. \n- **--calcite-accordion-item-header-background-color-hover** - Specifies the component's `heading` background color when hovered. \n- **--calcite-accordion-item-header-background-color-press** - Specifies the component's `heading` background color when pressed. \n- **--calcite-accordion-item-heading-text-color** - Specifies the component's `heading` text color. \n- **--calcite-accordion-item-icon-color** - [Deprecated] Use `--calcite-icon-color`. Specifies the component's default icon color. \n- **--calcite-accordion-item-start-icon-color** - Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color. \n- **--calcite-accordion-item-text-color** - [Deprecated] Use `--calcite-accordion-text-color`. Specifies the component's text color. \n- **--calcite-accordion-item-text-color-hover** - [Deprecated] Use `--calcite-accordion-text-color-hover`. Specifies the component's text color on hover. \n- **--calcite-accordion-item-text-color-press** - [Deprecated] Use `--calcite-accordion-text-color-press`. Specifies the component's text color on press. ", "attributes": [ { "name": "description", "description": "Specifies a description for the component.", "values": [] }, { "name": "expanded", "description": "When `true`, the component is expanded.", "values": [] }, { "name": "heading", "description": "Specifies heading text for the component.", "values": [] }, { "name": "icon-end", "description": "Specifies an icon to display at the end of the component.", "values": [] }, { "name": "icon-flip-rtl", "description": "Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [ { "name": "both" }, { "name": "end" }, { "name": "start" } ] }, { "name": "icon-start", "description": "Specifies an icon to display at the start of the component.", "values": [] } ], "references": [] }, { "name": "calcite-action", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding a `calcite-icon`.\n- **tooltip** - [Deprecated] Use the `calcite-tooltip` component instead.\n\n### CSS Properties\n- **--calcite-action-background-color-hover** - Specifies the component's background color when hovered or focused. \n- **--calcite-action-background-color-press** - Specifies the component's background color when active. \n- **--calcite-action-background-color-pressed** - [Deprecated] Use --calcite-action-background-color-press. Specifies the component's background color when active. \n- **--calcite-action-background-color** - Specifies the component's background color. \n- **--calcite-action-corner-radius-end-end** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end end. \n- **--calcite-action-corner-radius-end-start** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end start. \n- **--calcite-action-corner-radius-start-end** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start end. \n- **--calcite-action-corner-radius-start-start** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start start. \n- **--calcite-action-corner-radius** - Specifies the component's corner radius. \n- **--calcite-action-indicator-color** - Specifies the component's indicator color. \n- **--calcite-action-text-color-press** - Specifies the component's text color when pressed or hovered. \n- **--calcite-action-text-color-pressed** - [Deprecated] Use --calcite-action-text-color-press. Specifies the component's text color when hovered. \n- **--calcite-action-text-color** - Specifies the component's text color. ", "attributes": [ { "name": "active", "description": "When `true`, the component is highlighted.", "values": [] }, { "name": "alignment", "description": "Specifies the horizontal alignment of button elements with text content.", "values": [ { "name": "center" }, { "name": "end" }, { "name": "start" } ] }, { "name": "appearance", "description": "Specifies the appearance of the component.", "values": [ { "name": "solid" }, { "name": "transparent" } ] }, { "name": "compact", "description": "**Deprecated**: No longer necessary.. When `true`, the side padding of the component is reduced.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "icon", "description": "Specifies an icon to display.", "values": [] }, { "name": "icon-flip-rtl", "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [] }, { "name": "indicator", "description": "When `true`, displays a visual indicator.", "values": [] }, { "name": "label", "description": "Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop.", "values": [] }, { "name": "loading", "description": "When `true`, a busy indicator is displayed.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "text", "description": "Specifies text that accompanies the icon.", "values": [] }, { "name": "text-enabled", "description": "Indicates whether the text is displayed.", "values": [] } ], "references": [] }, { "name": "calcite-action-bar", "description": "### Events\n- **calciteActionBarToggle** - Fires when the `expanded` property is toggled.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `calcite-action`s that will appear at the top of the component.\n- **bottom-actions** - [Deprecated] Use the `\"actions-end\"` slot instead. A slot for adding `calcite-action`s that will appear at the bottom of the component, above the collapse/expand button.\n- **actions-end** - A slot for adding `calcite-action`s that will appear at the end of the component, prior to the collapse/expand button.\n- **expand-tooltip** - A slot to set the `calcite-tooltip` for the expand toggle.\n\n### CSS Properties\n- **--calcite-action-bar-background-color** - Specifies the component's background color. \n- **--calcite-action-bar-corner-radius** - Specifies the component's border radius when `floating` is `true`. \n- **--calcite-action-bar-expanded-max-width** - When `layout` is `\"vertical\"`, specifies the component's maximum width. \n- **--calcite-action-bar-items-space** - Specifies the space between slotted components in the component. \n- **--calcite-action-bar-shadow** - Specifies the component's shadow when `floating` is `true`. ", "attributes": [ { "name": "actions-end-group-label", "description": "Specifies the accessible label for the last `calcite-action-group`.", "values": [] }, { "name": "expand-disabled", "description": "When `true`, the expand-toggling behavior is disabled.", "values": [] }, { "name": "expanded", "description": "When `true`, the component is expanded.", "values": [] }, { "name": "floating", "description": "When `true`, the component is in a floating state.", "values": [] }, { "name": "layout", "description": "Specifies the layout direction of the actions.", "values": [ { "name": "grid" }, { "name": "horizontal" }, { "name": "vertical" } ] }, { "name": "overflow-actions-disabled", "description": "Disables automatically overflowing `calcite-action`s that won't fit into menus.", "values": [] }, { "name": "overlay-positioning", "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.", "values": [ { "name": "absolute" }, { "name": "fixed" } ] }, { "name": "position", "description": "Arranges the component depending on the element's `dir` property.", "values": [ { "name": "end" }, { "name": "start" } ] }, { "name": "scale", "description": "Specifies the size of the expand `calcite-action`.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] } ], "references": [] }, { "name": "calcite-action-group", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding a group of `calcite-action`s.\n- **menu-actions** - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.\n- **menu-tooltip** - A slot for adding a `calcite-tooltip` for the menu.\n\n### CSS Properties\n- **--calcite-action-background-color** - Specifies the component's background color. \n- **--calcite-action-group-border-color** - Specifies the component's border color when used in a `calcite-action-bar` or `calcite-action-menu`. \n- **--calcite-action-group-columns** - When `layout` is `\"grid\"`, specifies the component's grid-template-columns. \n- **--calcite-action-group-gap** - When `layout` is `\"grid\"`, specifies the component's gap. \n- **--calcite-action-group-padding** - [Deprecated] Use `--calcite-action-group-gap`. Specifies the component's padding. ", "attributes": [ { "name": "columns", "description": "Indicates number of columns.", "values": [ { "name": "1" }, { "name": "2" }, { "name": "3" }, { "name": "4" }, { "name": "5" }, { "name": "6" } ] }, { "name": "expanded", "description": "When `true`, the component is expanded.", "values": [] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "layout", "description": "Indicates the layout of the component.", "values": [ { "name": "grid" }, { "name": "horizontal" }, { "name": "vertical" } ] }, { "name": "menu-open", "description": "When `true`, the `calcite-action-menu` is open.", "values": [] }, { "name": "menu-placement", "description": "Determines where the action menu will be positioned.", "values": [ { "name": "auto" }, { "name": "auto-end" }, { "name": "auto-start" }, { "name": "bottom" }, { "name": "bottom-end" }, { "name": "bottom-start" }, { "name": "leading" }, { "name": "leading-end" }, { "name": "leading-start" }, { "name": "left" }, { "name": "left-end" }, { "name": "left-start" }, { "name": "right" }, { "name": "right-end" }, { "name": "right-start" }, { "name": "top" }, { "name": "top-end" }, { "name": "top-start" }, { "name": "trailing" }, { "name": "trailing-end" }, { "name": "trailing-start" } ] }, { "name": "overlay-positioning", "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.", "values": [ { "name": "absolute" }, { "name": "fixed" } ] }, { "name": "scale", "description": "Specifies the size of the `calcite-action-menu`.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] } ], "references": [] }, { "name": "calcite-action-menu", "description": "### Events\n- **calciteActionMenuOpen** - Fires when the `open` property is toggled.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-action`s.\n- **trigger** - A slot for adding a `calcite-action` to trigger opening the menu.\n- **tooltip** - A slot for adding a tooltip for the menu.\n\n### CSS Properties\n- **--calcite-action-menu-items-space** - Specifies the space between actions in the menu. ", "attributes": [ { "name": "appearance", "description": "Specifies the appearance of the component.", "values": [ { "name": "solid" }, { "name": "transparent" } ] }, { "name": "expanded", "description": "When `true`, the component is expanded.", "values": [] }, { "name": "label", "description": "Specifies the text string for the component.", "values": [] }, { "name": "open", "description": "When `true`, the component is open.", "values": [] }, { "name": "overlay-positioning", "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.", "values": [ { "name": "absolute" }, { "name": "fixed" } ] }, { "name": "placement", "description": "Determines where the component will be positioned relative to the `referenceElement`.", "values": [ { "name": "auto" }, { "name": "auto-end" }, { "name": "auto-start" }, { "name": "bottom" }, { "name": "bottom-end" }, { "name": "bottom-start" }, { "name": "leading" }, { "name": "leading-end" }, { "name": "leading-start" }, { "name": "left" }, { "name": "left-end" }, { "name": "left-start" }, { "name": "right" }, { "name": "right-end" }, { "name": "right-start" }, { "name": "top" }, { "name": "top-end" }, { "name": "top-start" }, { "name": "trailing" }, { "name": "trailing-end" }, { "name": "trailing-start" } ] }, { "name": "scale", "description": "Specifies the size of the component's trigger `calcite-action`.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] } ], "references": [] }, { "name": "calcite-action-pad", "description": "**Deprecated**: Use the `calcite-action-pad` component instead..\n--\n\n### Events\n- **calciteActionPadToggle** - Fires when the `expanded` property is toggled.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `calcite-action`s to the component.\n- **expand-tooltip** - A slot to set the `calcite-tooltip` for the expand toggle.\n\n### CSS Properties\n- **--calcite-action-pad-corner-radius** - Specifies the component's border radius. \n- **--calcite-action-pad-expanded-max-width** - When `layout` is `\"vertical\"`, specifies the component's maximum width when `expanded`. \n- **--calcite-action-pad-items-space** - Specifies the component's space between slotted components. ", "attributes": [ { "name": "actions-end-group-label", "description": "Specifies the accessible label for the last `calcite-action-group`.", "values": [] }, { "name": "expand-disabled", "description": "When `true`, the expand-toggling behavior is disabled.", "values": [] }, { "name": "expanded", "description": "When `true`, the component is expanded.", "values": [] }, { "name": "layout", "description": "Indicates the layout of the component.", "values": [ { "name": "grid" }, { "name": "horizontal" }, { "name": "vertical" } ] }, { "name": "overlay-positioning", "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.", "values": [ { "name": "absolute" }, { "name": "fixed" } ] }, { "name": "position", "description": "Arranges the component depending on the element's `dir` property.", "values": [ { "name": "end" }, { "name": "start" } ] }, { "name": "scale", "description": "Specifies the size of the expand `calcite-action`.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] } ], "references": [] }, { "name": "calcite-alert", "description": "Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned\nat the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided.\n--\n\n### Events\n- **calciteAlertBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteAlertBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteAlertClose** - Fires when the component is closed and animation is complete.\n- **calciteAlertOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component's \"close\" button, the first focusable item.\n\n `@returns` {Promise}\n\n### Slots\n- **title** - A slot for adding a title to the component.\n- **message** - A slot for adding main text to the component.\n- **link** - A slot for adding a `calcite-action` to take from the component such as: \"undo\", \"try again\", \"link to page\", etc.\n- **actions-end** - A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or fewer actions.\n\n### CSS Properties\n- **--calcite-alert-width** - Specifies the width of the component. \n- **--calcite-alert-background-color** - Specifies the component's background color. \n- **--calcite-alert-corner-radius** - Specifies the component's corner radius. \n- **--calcite-alert-shadow** - Specifies the component's shadow. \n- **--calcite-alert-offset-size** - Specifies the component's `placement` offset. ", "attributes": [ { "name": "auto-close", "description": "When `true`, the component closes automatically. Recommended for passive, non-blocking alerts.", "values": [] }, { "name": "auto-close-duration", "description": "Specifies the duration before the component automatically closes - only use with `autoClose`.", "values": [ { "name": "fast" }, { "name": "medium" }, { "name": "slow" } ] }, { "name": "icon", "description": "When `true`, shows a default recommended icon. Alternatively,\npass a Calcite UI Icon name to display a specific icon.", "values": [] }, { "name": "icon-flip-rtl", "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [] }, { "name": "kind", "description": "Specifies the kind of the component, which will apply to top border and icon.", "values": [ { "name": "brand" }, { "name": "danger" }, { "name": "info" }, { "name": "success" }, { "name": "warning" } ] }, { "name": "label", "description": "Specifies an accessible name for the component.", "values": [] }, { "name": "numbering-system", "description": "Specifies the Unicode numeral system used by the component for localization.", "values": [ { "name": "arab" }, { "name": "arabext" }, { "name": "latn" } ] }, { "name": "open", "description": "When `true`, displays and positions the component.", "values": [] }, { "name": "placement", "description": "Specifies the placement of the component.", "values": [ { "name": "bottom" }, { "name": "bottom-end" }, { "name": "bottom-start" }, { "name": "top" }, { "name": "top-end" }, { "name": "top-start" } ] }, { "name": "queue", "description": "Specifies the ordering priority of the component when opened.", "values": [ { "name": "immediate" }, { "name": "last" }, { "name": "next" } ] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] } ], "references": [] }, { "name": "calcite-autocomplete", "description": "### Events\n- **calciteAutocompleteBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteAutocompleteBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteAutocompleteChange** - Fires each time a new `value` is typed and committed.\n- **calciteAutocompleteClose** - Fires when the component is closed and animation is complete.\n- **calciteAutocompleteOpen** - Fires when the component is open and animation is complete.\n- **calciteAutocompleteTextChange** - Fires each time a new `inputValue` is typed and committed.\n- **calciteAutocompleteTextInput** - Fires each time a new `inputValue` is typed.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise` - Updates the position of the component.\n- `scrollContentTo(options?: ScrollToOptions): Promise` - Scrolls the component's content to a specified set of coordinates.\n- `selectText(): Promise` - Selects the text of the component's `value`.\n- `setFocus(): Promise` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `calcite-autocomplete-item` elements.\n- **content-bottom** - A slot for adding content below `calcite-autocomplete-item` elements.\n- **content-top** - A slot for adding content above `calcite-autocomplete-item` elements.\n\n### CSS Properties\n- **--calcite-autocomplete-background-color** - Specifies the background color of the component. \n- **--calcite-autocomplete-corner-radius** - Specifies the component's corner radius. \n- **--calcite-autocomplete-text-color** - Specifies the text color of the component. \n- **--calcite-autocomplete-input-prefix-size** - Specifies the Input's prefix width, when present. \n- **--calcite-autocomplete-input-suffix-size** - Specifies the Input's suffix width, when present. \n- **--calcite-autocomplete-input-background-color** - Specifies the background color of the Input. \n- **--calcite-autocomplete-input-border-color** - Specifies the border color of the Input. \n- **--calcite-autocomplete-input-corner-radius** - Specifies the corner radius of the Input. \n- **--calcite-autocomplete-input-shadow** - Specifies the shadow of the Input. \n- **--calcite-autocomplete-input-icon-color** - Specifies the icon color of the Input. \n- **--calcite-autocomplete-input-text-color** - Specifies the text color of the Input. \n- **--calcite-autocomplete-input-placeholder-text-color** - Specifies the color of placeholder text in the Input. \n- **--calcite-autocomplete-input-actions-background-color** - Specifies the background color of Input's `clearable` element. \n- **--calcite-autocomplete-input-actions-background-color-hover** - Specifies the background color of Input's `clearable` element when hovered. \n- **--calcite-autocomplete-input-actions-background-color-press** - Specifies the background color of Input's `clearable` element when pressed. \n- **--calcite-autocomplete-input-actions-icon-color** - Specifies the icon color of Input's `clearable` element. \n- **--calcite-autocomplete-input-actions-icon-color-hover** - Specifies the icon color of Input's `clearable` element when hovered. \n- **--calcite-autocomplete-input-actions-icon-color-press** - Specifies the icon color of Input's `clearable` element when pressed. \n- **--calcite-autocomplete-input-loading-background-color** - Specifies the background color of the Input's `loading` element, when present. \n- **--calcite-autocomplete-input-loading-fill-color** - Specifies the fill color of the Input's `loading` element, when present. \n- **--calcite-autocomplete-input-prefix-background-color** - Specifies the background color of the Input's prefix, when present. \n- **--calcite-autocomplete-input-prefix-text-color** - Specifies the text color of the Input's prefix, when present. \n- **--calcite-autocomplete-input-suffix-background-color** - Specifies the background color of the Input's suffix, when present. \n- **--calcite-autocomplete-input-suffix-text-color** - Specifies the text color of the Input's suffix, when present. ", "attributes": [ { "name": "alignment", "description": "Specifies the text alignment of the component's value.", "values": [ { "name": "end" }, { "name": "start" } ] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "form", "description": "The `id` of the form that will be associated with the component.\n\nWhen not set, the component will be associated with its ancestor form element, if any.", "values": [] }, { "name": "icon", "description": "When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.", "values": [] }, { "name": "icon-flip-rtl", "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [] }, { "name": "input-value", "description": "The component's input value.", "values": [] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "loading", "description": "When `true`, a busy indicator is displayed.", "values": [] }, { "name": "max-length", "description": "When the component resides in a form,\nspecifies the maximum length of text for the component's value.", "values": [] }, { "name": "min-length", "description": "When the component resides in a form,\nspecifies the minimum length of text for the component's value.", "values": [] }, { "name": "name", "description": "Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.", "values": [] }, { "name": "open", "description": "When `true`, displays and positions the component.", "values": [] }, { "name": "overlay-positioning", "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.", "values": [ { "name": "absolute" }, { "name": "fixed" } ] }, { "name": "pattern", "description": "When the component resides in a form,\nspecifies a regular expression (regex) pattern the component's `value` must match for validation.\nRead the native attribute's documentation on MDN for more info.", "values": [] }, { "name": "placeholder", "description": "Specifies placeholder text for the component.", "values": [] }, { "name": "placement", "description": "Determines where the component will be positioned relative to the container element.", "values": [ { "name": "bottom" }, { "name": "bottom-end" }, { "name": "bottom-start" }, { "name": "top" }, { "name": "top-end" }, { "name": "top-start" } ] }, { "name": "prefix-text", "description": "Adds text to the start of the component.", "values": [] }, { "name": "read-only", "description": "When `true`, the component's value can be read, but cannot be modified.", "values": [] }, { "name": "required", "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "status", "description": "Specifies the status of the input field, which determines message and icons.", "values": [ { "name": "idle" }, { "name": "invalid" }, { "name": "valid" } ] }, { "name": "suffix-text", "description": "Adds text to the end of the component.", "values": [] }, { "name": "validation-icon", "description": "Specifies the validation icon to display under the component.", "values": [] }, { "name": "validation-message", "description": "Specifies the validation message to display under the component.", "values": [] }, { "name": "value", "description": "The component's value.", "values": [] } ], "references": [] }, { "name": "calcite-autocomplete-item", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- **content-end** - A slot for adding non-actionable elements after content of the component.\n- **content-start** - A slot for adding non-actionable elements before content of the component.\n\n### CSS Properties\n- **--calcite-autocomplete-background-color** - Specifies the background color of the component. \n- **--calcite-autocomplete-description-text-color** - Specifies the text color of the component's description. \n- **--calcite-autocomplete-heading-text-color** - Specifies the text color of the component's heading. \n- **--calcite-autocomplete-text-color** - Specifies the text color of the component. ", "attributes": [ { "name": "description", "description": "A description for the component. Displays below the label text.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "heading", "description": "Specifies heading text for the component.", "values": [] }, { "name": "icon-end", "description": "Specifies an icon to display at the end of the component.", "values": [] }, { "name": "icon-flip-rtl", "description": "Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [ { "name": "both" }, { "name": "end" }, { "name": "start" } ] }, { "name": "icon-start", "description": "Specifies an icon to display at the start of the component.", "values": [] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "value", "description": "The component's value.", "values": [] } ], "references": [] }, { "name": "calcite-autocomplete-item-group", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding `calcite-autocomplete-item`s.\n\n### CSS Properties\n- **--calcite-autocomplete-background-color** - Specifies the background color of the component. \n- **--calcite-autocomplete-border-color** - Specifies the border color of the component. \n- **--calcite-autocomplete-text-color** - Specifies the text color of the component. ", "attributes": [ { "name": "heading", "description": "Specifies heading text for the component.", "values": [] }, { "name": "label", "description": "Accessible name for the component.", "values": [] } ], "references": [] }, { "name": "calcite-avatar", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### CSS Properties\n- **--calcite-avatar-corner-radius** - Specifies the component's corner radius. \n- **--calcite-avatar-color** - Specifies the component's icon or initial color. \n- **--calcite-avatar-background-color** - Specifies the component's background color. ", "attributes": [ { "name": "full-name", "description": "Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component.", "values": [] }, { "name": "label", "description": "Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "thumbnail", "description": "Specifies the `src` to an image (remember to add a token if the user is private).", "values": [] }, { "name": "user-id", "description": "Specifies the unique id of the user.", "values": [] }, { "name": "username", "description": "Specifies the username of the user.", "values": [] } ], "references": [] }, { "name": "calcite-block", "description": "### Events\n- **calciteBlockBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteBlockBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteBlockClose** - Fires when the component is closed and animation is complete.\n- **calciteBlockOpen** - Fires when the component is open and animation is complete.\n- **calciteBlockSortHandleBeforeClose** - Fires when the sort handle is requested to be closed and before the closing transition begins.\n- **calciteBlockSortHandleBeforeOpen** - Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteBlockSortHandleClose** - Fires when the sort handle is closed and animation is complete.\n- **calciteBlockSortHandleOpen** - Fires when the sort handle is open and animation is complete.\n- **calciteBlockToggle** - Fires when the component's header is clicked.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component's first tabbable element.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **actions-end** - A slot for adding actionable `calcite-action` elements after the content of the component. It is recommended to use two or fewer actions.\n- **icon** - [Deprecated] A slot for adding a leading header icon with `calcite-icon`. Use `icon-start` instead.\n- **content-start** - A slot for adding non-actionable elements before content of the component.\n- **control** - [Deprecated] A slot for adding a single HTML input element in a header. Use `actions-end` instead.\n- **header-menu-actions** - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu.\n\n### CSS Properties\n- **--calcite-block-border-color** - Specifies the component's border color. \n- **--calcite-block-header-background-color** - Specifies the component's `heading` background color. \n- **--calcite-block-header-background-color-hover** - Specifies the component's `heading` background color when hovered. \n- **--calcite-block-header-background-color-press** - Specifies the component's `heading` background color when pressed. \n- **--calcite-block-heading-text-color** - Specifies the component's `heading` text color. \n- **--calcite-block-heading-text-color-press** - When the component is `expanded`, specifies the `heading` text color. \n- **--calcite-block-padding** - [Deprecated] Specifies the padding of the component's `default` slot. \n- **--calcite-block-text-color** - Specifies the component's text color. \n- **--calcite-block-description-text-color** - Specifies the component's `description` text color. \n- **--calcite-block-icon-color** - Specifies the component's `collapsible` icon, `iconStart` and `iconEnd` color. \n- **--calcite-block-icon-color-hover** - Specifies the component's `collapsible` icon color when hovered. ", "attributes": [ { "name": "collapsible", "description": "When `true`, the component is collapsible.", "values": [] }, { "name": "description", "description": "A description for the component, which displays below the heading.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "drag-disabled", "description": "When `true`, and a parent Block Group is `dragEnabled`, the component is not draggable.", "values": [] }, { "name": "drag-handle", "description": "**Deprecated**: No longer necessary. Use Block Group for draggable functionality.. When `true`, the component displays a draggable button.", "values": [] }, { "name": "expanded", "description": "When `true`, the component is expanded to show child components.", "values": [] }, { "name": "heading", "description": "The component header text.", "values": [] }, { "name": "heading-level", "description": "Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.", "values": [ { "name": "1" }, { "name": "2" }, { "name": "3" }, { "name": "4" }, { "name": "5" }, { "name": "6" } ] }, { "name": "icon-end", "description": "Specifies an icon to display at the end of the component.", "values": [] }, { "name": "icon-flip-rtl", "description": "Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [ { "name": "both" }, { "name": "end" }, { "name": "start" } ] }, { "name": "icon-start", "description": "Specifies an icon to display at the start of the component.", "values": [] }, { "name": "label", "description": "Specifies an accessible name for the component.", "values": [] }, { "name": "loading", "description": "When `true`, a busy indicator is displayed.", "values": [] }, { "name": "menu-placement", "description": "Determines where the action menu will be positioned.", "values": [ { "name": "auto" }, { "name": "auto-end" }, { "name": "auto-start" }, { "name": "bottom" }, { "name": "bottom-end" }, { "name": "bottom-start" }, { "name": "leading" }, { "name": "leading-end" }, { "name": "leading-start" }, { "name": "left" }, { "name": "left-end" }, { "name": "left-start" }, { "name": "right" }, { "name": "right-end" }, { "name": "right-start" }, { "name": "top" }, { "name": "top-end" }, { "name": "top-start" }, { "name": "trailing" }, { "name": "trailing-end" }, { "name": "trailing-start" } ] }, { "name": "open", "description": "**Deprecated**: Use `expanded` prop instead.. When `true`, expands the component and its contents.", "values": [] }, { "name": "overlay-positioning", "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.", "values": [ { "name": "absolute" }, { "name": "fixed" } ] }, { "name": "sort-handle-open", "description": "When `true`, displays and positions the sort handle.", "values": [] }, { "name": "status", "description": "**Deprecated**: Use `icon-start` instead.. Displays a status-related indicator icon.", "values": [ { "name": "idle" }, { "name": "invalid" }, { "name": "valid" } ] } ], "references": [] }, { "name": "calcite-block-group", "description": "### Events\n- **calciteBlockGroupDragEnd** - Fires when the component's dragging has ended.\n- **calciteBlockGroupDragStart** - Fires when the component's dragging has started.\n- **calciteBlockGroupMoveHalt** - Fires when a user attempts to move an element using the sort menu and 'canPut' or 'canPull' returns falsy.\n- **calciteBlockGroupOrderChange** - Fires when the component's item order changes.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `calcite-block` elements.", "attributes": [ { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "drag-enabled", "description": "When `true`, `calcite-block`s are sortable via a draggable button.", "values": [] }, { "name": "group", "description": "The block-group's group identifier.\n\nTo drag elements from one group into another, both groups must have the same group value.", "values": [] }, { "name": "label", "description": "Specifies an accessible name for the component.\n\nWhen `dragEnabled` is `true` and multiple group sorting is enabled with `group`, specifies the component's name for dragging between groups.", "values": [] }, { "name": "loading", "description": "When `true`, a busy indicator is displayed.", "values": [] } ], "references": [] }, { "name": "calcite-block-section", "description": "### Events\n- **calciteBlockSectionToggle** - Fires when the header has been clicked.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component's first tabbable element.\n\n### Slots\n- _default_ - A slot for adding custom content.\n\n### CSS Properties\n- **--calcite-block-section-background-color** - Specifies the component's background color. \n- **--calcite-block-section-border-color** - Specifies the component's border color. When `expanded`, applies to the component's bottom border. \n- **--calcite-block-section-header-text-color** - Specifies the component's header text color. \n- **--calcite-block-section-text-color** - Specifies the component's text color. \n- **--calcite-block-section-text-color-hover** - Specifies the component's text color on hover. ", "attributes": [ { "name": "expanded", "description": "When `true`, the component is expanded to show child components.", "values": [] }, { "name": "icon-end", "description": "Specifies an icon to display at the end of the component.", "values": [] }, { "name": "icon-flip-rtl", "description": "Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [ { "name": "both" }, { "name": "end" }, { "name": "start" } ] }, { "name": "icon-start", "description": "Specifies an icon to display at the start of the component.", "values": [] }, { "name": "open", "description": "**Deprecated**: Use `expanded` prop instead.. When `true`, expands the component and its contents.", "values": [] }, { "name": "status", "description": "**Deprecated**: Use `icon-start` instead.. Displays a status-related indicator icon.", "values": [ { "name": "idle" }, { "name": "invalid" }, { "name": "valid" } ] }, { "name": "text", "description": "The component header text.", "values": [] }, { "name": "toggle-display", "description": "Specifies how the component's toggle is displayed, where:\n\n`\"button\"` sets the toggle to a selectable header, and\n\n`\"switch\"` sets the toggle to a switch.", "values": [ { "name": "button" }, { "name": "switch" } ] } ], "references": [] }, { "name": "calcite-button", "description": "Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this.\n\nIt is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission\n--\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding text.\n\n### CSS Properties\n- **--calcite-button-background-color** - Specifies the component's background color. \n- **--calcite-button-border-color** - Specifies the component's border color. \n- **--calcite-button-corner-radius** - Specifies the component's corner radius. \n- **--calcite-button-icon-color** - Specifies the component's `iconStart` and \n- **--calcite-button-loader-color** - Specifies the component's loader color. \n- **--calcite-button-shadow-color** - Specifies the component's box-shadow color. \n- **--calcite-button-text-color** - Specifies the component's text color. ", "attributes": [ { "name": "alignment", "description": "Specifies the alignment of the component's elements.", "values": [ { "name": "center" }, { "name": "end" }, { "name": "icon-end-space-between" }, { "name": "icon-start-space-between" }, { "name": "space-between" }, { "name": "start" } ] }, { "name": "appearance", "description": "Specifies the appearance style of the component.", "values": [ { "name": "outline" }, { "name": "outline-fill" }, { "name": "solid" }, { "name": "transparent" } ] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "download", "description": "Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:\nWithout a value, the browser will suggest a filename/extension.", "values": [] }, { "name": "form", "description": "The `id` of the form that will be associated with the component.\n\nWhen not set, the component will be associated with its ancestor form element, if any.", "values": [] }, { "name": "href", "description": "Specifies the URL of the linked resource, which can be set as an absolute or relative path.", "values": [] }, { "name": "icon-end", "description": "Specifies an icon to display at the end of the component.", "values": [] }, { "name": "icon-flip-rtl", "description": "Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [ { "name": "both" }, { "name": "end" }, { "name": "start" } ] }, { "name": "icon-start", "description": "Specifies an icon to display at the start of the component.", "values": [] }, { "name": "kind", "description": "Specifies the kind of the component, which will apply to the border and background if applicable.", "values": [ { "name": "brand" }, { "name": "danger" }, { "name": "inverse" }, { "name": "neutral" } ] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "loading", "description": "When `true`, a busy indicator is displayed and interaction is disabled.", "values": [] }, { "name": "name", "description": "Specifies the name of the component on form submission.", "values": [] }, { "name": "rel", "description": "Defines the relationship between the `href` value and the current document.", "values": [] }, { "name": "round", "description": "When `true`, adds a round style to the component.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "split-child", "description": "Specifies if the component is a child of a `calcite-split-button`.", "values": [ { "name": "primary" }, { "name": "secondary" } ] }, { "name": "target", "description": "Specifies where to open the linked document defined in the `href` property.", "values": [] }, { "name": "type", "description": "Specifies the default behavior of the component.", "values": [] }, { "name": "width", "description": "Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.", "values": [ { "name": "auto" }, { "name": "full" }, { "name": "half" } ] } ], "references": [] }, { "name": "calcite-card", "description": "### Events\n- **calciteCardSelect** - Fires when the deprecated `selectable` is true, or `selectionMode` set on parent `calcite-card-group` is not `none` and the component is selected.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding content.\n- **title** - [Deprecated] use `heading` instead. A slot for adding a heading.\n- **subtitle** - [Deprecated] use `description` instead. A slot for adding a description.\n- **thumbnail** - A slot for adding a thumbnail.\n- **heading** - A slot for adding a heading.\n- **description** - A slot for adding a description.\n- **footer-start** - A slot for adding a leading footer.\n- **footer-end** - A slot for adding a trailing footer.\n\n### CSS Properties\n- **--calcite-card-accent-color-selected** - Specifies the component's accent color when `selected`. \n- **--calcite-card-background-color** - Specifies the component's background color. \n- **--calcite-card-border-color** - Specifies the component's border color. \n- **--calcite-card-corner-radius** - Specifies the component's corner radius. \n- **--calcite-card-selection-background-color-active** - [Deprecated] Use `--calcite-card-selection-background-color-press`. Specifies the component's selection element background color when active. \n- **--calcite-card-selection-background-color-hover** - Specifies the component's selection element background color when hovered. \n- **--calcite-card-selection-background-color-press** - Specifies the component's selection element background color when active. \n- **--calcite-card-selection-background-color-selected** - [Deprecated] Use `--calcite-card-background-color`. Specifies the component's selection element icon color when `selected`. \n- **--calcite-card-selection-background-color** - [Deprecated] Use `--calcite-card-background-color`. Specifies the component's selection element background color. \n- **--calcite-card-selection-color-hover** - Specifies the component's selection element color when hovered or focused. \n- **--calcite-card-selection-color** - Specifies the component's selection element color. \n- **--calcite-card-selection-icon-color-hover** - [Deprecated] Use `--calcite-card-selection-color-hover`. Specifies the component's selection element icon color when hovered. \n- **--calcite-card-selection-icon-color-selected** - [Deprecated] Use `--calcite-card-accent-color-selected`. Specifies the component's selection element icon color when `selected`. \n- **--calcite-card-selection-icon-color** - [Deprecated] Use `--calcite-card-selection-color`. Specifies the component's selection element icon color. \n- **--calcite-card-shadow** - Specifies the component's shadow. ", "attributes": [ { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "loading", "description": "When `true`, a busy indicator is displayed.", "values": [] }, { "name": "selectable", "description": "**Deprecated**: use `selectionMode` property on a parent `calcite-card-group` instead.. When `true`, the component is selectable.", "values": [] }, { "name": "selected", "description": "When `true`, the component is selected.", "values": [] }, { "name": "thumbnail-position", "description": "Sets the placement of the thumbnail defined in the `thumbnail` slot.", "values": [ { "name": "block-end" }, { "name": "block-start" }, { "name": "inline-end" }, { "name": "inline-start" } ] } ], "references": [] }, { "name": "calcite-card-group", "description": "### Events\n- **calciteCardGroupSelect** - Emits when the component's selection changes and the `selectionMode` is not `none`.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding one or more `calcite-card`s.\n\n### CSS Properties\n- **--calcite-card-group-gap** - [Deprecated] Use `--calcite-card-group-space`. Specifies the gap between slotted elements. \n- **--calcite-card-group-space** - Specifies the space between slotted elements. ", "attributes": [ { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "selection-mode", "description": "Specifies the selection mode of the component.", "values": [ { "name": "multiple" }, { "name": "none" }, { "name": "single" }, { "name": "single-persist" } ] } ], "references": [] }, { "name": "calcite-carousel", "description": "### Events\n- **calciteCarouselChange** - Fires when the selected `calcite-carousel-item` changes.\n- **calciteCarouselPause** - Fires when the carousel autoplay state pauses due to a user hovering over the component or focusing on the component or slotted content\n- **calciteCarouselPlay** - Fires when the carousel autoplay is invoked by the user.\n- **calciteCarouselResume** - Fires when the carousel autoplay state resumes due to a user no longer hovering over the component or focusing on the component or slotted content\n- **calciteCarouselStop** - Fires when the carousel autoplay state is stopped by a user.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `play(): Promise` - Play the carousel. If `autoplay` is not enabled (initialized either to `true` or `\"paused\"`), these methods will have no effect.\n- `setFocus(): Promise` - Sets focus on the component.\n- `stop(): Promise` - Stop the carousel. If `autoplay` is not enabled (initialized either to `true` or `\"paused\"`), these methods will have no effect.\n\n### Slots\n- _default_ - A slot for adding `calcite-carousel-item`s.", "attributes": [ { "name": "arrow-type", "description": "Specifies how and if the \"previous\" and \"next\" arrows are displayed.", "values": [ { "name": "edge" }, { "name": "inline" }, { "name": "none" } ] }, { "name": "autoplay", "description": "When `true`, the carousel will autoplay and controls will be displayed. When \"paused\" at time of initialization, the carousel will not autoplay, but controls will be displayed.", "values": [ { "name": "paused" } ] }, { "name": "autoplay-duration", "description": "When `autoplay` is `true`, specifies in milliseconds the length of time to display each Carousel Item.", "values": [] }, { "name": "control-overlay", "description": "Specifies if the component's controls are positioned absolutely on top of slotted Carousel Items.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "label", "description": "Accessible name for the component.", "values": [] } ], "references": [] }, { "name": "calcite-carousel-item", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding content.", "attributes": [ { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "selected", "description": "When `true`, the component is selected.", "values": [] } ], "references": [] }, { "name": "calcite-checkbox", "description": "### Events\n- **calciteCheckboxChange** - Fires when the component's `checked` status changes.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### CSS Properties\n- **--calcite-checkbox-size** - Specifies the component's height and width. \n- **--calcite-checkbox-border-color** - Specifies the component's color. \n- **--calcite-checkbox-border-color-hover** - Specifies the component's color when hovered. \n- **--calcite-checkbox-border-color-press** - Specifies the component's color when pressed. \n- **--calcite-checkbox-icon-color** - Specifies the component's icon color. ", "attributes": [ { "name": "checked", "description": "When `true`, the component is checked.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "form", "description": "The `id` of the form that will be associated with the component.\n\nWhen not set, the component will be associated with its ancestor form element, if any.", "values": [] }, { "name": "indeterminate", "description": "When `true`, the component is initially indeterminate, which is independent from its `checked` value.\n\nThe state is visual only, and can look different across browsers.", "values": [] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "name", "description": "Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.", "values": [] }, { "name": "required", "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "status", "description": "Specifies the status of the input field, which determines message and icons.", "values": [ { "name": "idle" }, { "name": "invalid" }, { "name": "valid" } ] }, { "name": "value", "description": "The component's value.", "values": [] } ], "references": [] }, { "name": "calcite-chip", "description": "### Events\n- **calciteChipClose** - Fires when the component's close button is selected.\n- **calciteChipSelect** - Fires when the selected state of the component changes.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding text.\n- **image** - A slot for adding an image.\n\n### CSS Properties\n- **--calcite-chip-background-color** - Specifies the component's background color. \n- **--calcite-chip-border-color** - Specifies the component's border color. \n- **--calcite-chip-close-icon-color** - Specifies the component's close element icon color. \n- **--calcite-chip-corner-radius** - Specifies the component's corner radius. \n- **--calcite-chip-icon-color** - Specifies the component's icon color. \n- **--calcite-chip-select-icon-color-press** - Specifies the component's selection element icon color when active. \n- **--calcite-chip-select-icon-color-pressed** - [Deprecated] Use `--calcite-chip-select-icon-color-press`. Specifies the component's selection element icon color when active. \n- **--calcite-chip-select-icon-color** - Specifies the component's selection element icon color. \n- **--calcite-chip-text-color** - Specifies the component's text color. ", "attributes": [ { "name": "appearance", "description": "Specifies the appearance style of the component.", "values": [ { "name": "outline" }, { "name": "outline-fill" }, { "name": "solid" } ] }, { "name": "closable", "description": "When `true`, a close button is added to the component.", "values": [] }, { "name": "close-on-delete", "description": "When `true`, the component closes when the Delete or Backspace key is pressed while focused.", "values": [] }, { "name": "closed", "description": "When `true`, hides the component.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "icon", "description": "Specifies an icon to display.", "values": [] }, { "name": "icon-flip-rtl", "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [] }, { "name": "kind", "description": "Specifies the kind of the component, which will apply to border and background if applicable.", "values": [ { "name": "brand" }, { "name": "inverse" }, { "name": "neutral" } ] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component. When contained in a parent `calcite-chip-group` inherits the parent's `scale` value.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "selected", "description": "When `true`, the component is selected.", "values": [] }, { "name": "value", "description": "The component's value.", "values": [] } ], "references": [] }, { "name": "calcite-chip-group", "description": "### Events\n- **calciteChipGroupSelect** - Fires when the component's selection changes.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding one or more `calcite-chip`s.", "attributes": [ { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component. Child `calcite-chip`s inherit the component's value.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "selection-mode", "description": "Specifies the selection mode of the component, where:\n\n`\"multiple\"` allows any number of selections,\n\n`\"single\"` allows only one selection,\n\n`\"single-persist\"` allows one selection and prevents de-selection, and\n\n`\"none\"` does not allow any selections.", "values": [ { "name": "multiple" }, { "name": "none" }, { "name": "single" }, { "name": "single-persist" } ] } ], "references": [] }, { "name": "calcite-color-picker", "description": "### Events\n- **calciteColorPickerChange** - Fires when the color value has changed.\n- **calciteColorPickerInput** - Fires as the color value changes.\n\nSimilar to the `calciteColorPickerChange` event with the exception of dragging. When dragging the color field or hue slider thumb, this event fires as the thumb is moved.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component's first focusable element.", "attributes": [ { "name": "allow-empty", "description": "**Deprecated**: Use `clearable` instead. When `true`, an empty color (`null`) will be allowed as a `value`.\n\nWhen `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.", "values": [] }, { "name": "alpha-channel", "description": "When `true`, the component will allow updates to the color's alpha value.", "values": [] }, { "name": "channels-disabled", "description": "When `true`, hides the RGB/HSV channel inputs.", "values": [] }, { "name": "clearable", "description": "When `true`, an empty color (`null`) will be allowed as a `value`.\n\nWhen `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "format", "description": "The format of `value`.\n\nWhen `\"auto\"`, the format will be inferred from `value` when set.", "values": [ { "name": "auto" }, { "name": "hex" }, { "name": "hexa" }, { "name": "hsl" }, { "name": "hsl-css" }, { "name": "hsla" }, { "name": "hsla-css" }, { "name": "hsv" }, { "name": "hsva" }, { "name": "rgb" }, { "name": "rgb-css" }, { "name": "rgba" }, { "name": "rgba-css" } ] }, { "name": "hex-disabled", "description": "When `true`, hides the hex input.", "values": [] }, { "name": "numbering-system", "description": "Specifies the Unicode numeral system used by the component for localization.", "values": [ { "name": "arab" }, { "name": "arabext" }, { "name": "latn" } ] }, { "name": "saved-disabled", "description": "When `true`, hides the saved colors section.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "storage-id", "description": "Specifies the storage ID for colors.", "values": [] }, { "name": "value", "description": "The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object.\n\nThe type will be preserved as the color is updated.", "values": [] } ], "references": [] }, { "name": "calcite-color-picker-hex-input", "description": "### Events\n- **calciteColorPickerHexInputChange** - Emitted when the hex value changes.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.", "attributes": [ { "name": "allow-empty", "description": "When `true`, an empty color (`undefined`) will be allowed as a `value`.\n\nWhen `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.", "values": [] }, { "name": "alpha-channel", "description": "When `true`, the component will allow updates to the color's alpha value.", "values": [] }, { "name": "hex-label", "description": "**Deprecated**: use `messages` instead. Specifies accessible label for the input field.", "values": [] }, { "name": "numbering-system", "description": "Specifies the Unicode numeral system used by the component for localization.", "values": [ { "name": "arab" }, { "name": "arabext" }, { "name": "latn" } ] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "value", "description": "The hex value.", "values": [] } ], "references": [] }, { "name": "calcite-color-picker-swatch", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [ { "name": "active", "description": "When `true`, the component is active.", "values": [] }, { "name": "color", "description": "The color value.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] } ], "references": [] }, { "name": "calcite-combobox", "description": "### Events\n- **calciteComboboxBeforeClose** - Fires when the component is requested to be closed, and before the closing transition begins.\n- **calciteComboboxBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteComboboxChange** - Fires when the selected item(s) changes.\n- **calciteComboboxChipClose** - Fires when a selected item in the component is closed via its `calcite-chip`.\n- **calciteComboboxClose** - Fires when the component is closed and animation is complete.\n- **calciteComboboxFilterChange** - Fires when text is added to filter the options list.\n- **calciteComboboxOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise` - Updates the position of the component.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-combobox-item`s.\n\n### CSS Properties\n- **--calcite-combobox-divider-color** - Specifies the component's divider color. \n- **--calcite-combobox-icon-color** - Specifies the component's icon color. \n- **--calcite-combobox-icon-color-hover** - Specifies the component's icon color when hovered. \n- **--calcite-combobox-background-color** - Specifies the background color of the component's listbox. \n- **--calcite-combobox-input-border-color** - Specifies the border color of the component's input. \n- **--calcite-combobox-input-background-color** - Specifies the background color of the component's input. \n- **--calcite-combobox-input-height** - Specifies the height of the component's input. \n- **--calcite-combobox-input-text-color** - When `selectionDisplay` is `\"single\"`, specifies the text color of the component's input. ", "attributes": [ { "name": "allow-custom-values", "description": "When `true`, allows entry of custom values, which are not in the original set of items.", "values": [] }, { "name": "clear-disabled", "description": "When `true`, the value-clearing will be disabled.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "filter-text", "description": "Text for the component's filter input field.", "values": [] }, { "name": "form", "description": "The `id` of the form that will be associated with the component.\n\nWhen not set, the component will be associated with its ancestor form element, if any.", "values": [] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "max-items", "description": "Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar.", "values": [] }, { "name": "name", "description": "Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.", "values": [] }, { "name": "open", "description": "When `true`, displays and positions the component.", "values": [] }, { "name": "overlay-positioning", "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.", "values": [ { "name": "absolute" }, { "name": "fixed" } ] }, { "name": "placeholder", "description": "Specifies the placeholder text for the input.", "values": [] }, { "name": "placeholder-icon", "description": "Specifies the placeholder icon for the input.", "values": [] }, { "name": "placeholder-icon-flip-rtl", "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [] }, { "name": "read-only", "description": "When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.", "values": [] }, { "name": "required", "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "select-all-enabled", "description": "When `true` and `selectionMode` is `\"multiple\"` or `\"ancestors\"`, provides a checkbox for selecting all `calcite-combobox-item`s.", "values": [] }, { "name": "selection-display", "description": "When `selectionMode` is `\"ancestors\"` or `\"multiple\"`, specifies the display of multiple `calcite-combobox-item` selections, where:\n\n`\"all\"` displays all selections with individual `calcite-chip`s,\n\n`\"fit\"` displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed, and\n\n`\"single\"` displays one `calcite-chip` with the total number of selections.", "values": [ { "name": "all" }, { "name": "fit" }, { "name": "single" } ] }, { "name": "selection-mode", "description": "Specifies the selection mode of the component, where:\n\n`\"multiple\"` allows any number of selections,\n\n`\"single\"` allows only one selection,\n\n`\"single-persist\"` allows one selection and prevents de-selection, and\n\n`\"ancestors\"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips.", "values": [ { "name": "ancestors" }, { "name": "multiple" }, { "name": "single" }, { "name": "single-persist" } ] }, { "name": "status", "description": "Specifies the status of the input field, which determines message and icons.", "values": [ { "name": "idle" }, { "name": "invalid" }, { "name": "valid" } ] }, { "name": "validation-icon", "description": "Specifies the validation icon to display under the component.", "values": [] }, { "name": "validation-message", "description": "Specifies the validation message to display under the component.", "values": [] }, { "name": "value", "description": "The component's value(s) from the selected `calcite-combobox-item`(s).", "values": [] } ], "references": [] }, { "name": "calcite-combobox-item", "description": "### Events\n- **calciteComboboxItemChange** - Fires whenever the component is selected or unselected.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding nested `calcite-combobox-item`s.\n- **content-end** - A slot for adding non-actionable elements after the component's content.\n- **content-start** - A slot for adding non-actionable elements before the component's content.\n\n### CSS Properties\n- **--calcite-combobox-item-border-color** - [Deprecated] Specifies the component's border color. \n- **--calcite-combobox-text-color** - Specifies the component's text and `icon` color. \n- **--calcite-combobox-text-color-hover** - Specifies the component's text and `icon` color when hovered. \n- **--calcite-combobox-item-background-color-active** - Specifies the component's background color when active. \n- **--calcite-combobox-item-background-color-hover** - Specifies the component's background color when hovered. \n- **--calcite-combobox-item-shadow** - Specifies the component's shadow. \n- **--calcite-combobox-selected-icon-color** - Specifies the component's selected indicator icon color. \n- **--calcite-combobox-description-text-color** - Specifies the component's `description` and `shortHeading` text color. \n- **--calcite-combobox-description-text-color-press** - Specifies the component's `description` and `shortHeading` text color when hovered. \n- **--calcite-combobox-heading-text-color** - Specifies the component's `heading` text color. ", "attributes": [ { "name": "active", "description": "When `true`, the component is active.", "values": [] }, { "name": "description", "description": "A description for the component, which displays below the heading.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "filter-disabled", "description": "When `true`, omits the component from the `calcite-combobox` filtered search results.", "values": [] }, { "name": "guid", "description": "The `id` attribute of the component. When omitted, a globally unique identifier is used.", "values": [] }, { "name": "heading", "description": "The component's text.", "values": [] }, { "name": "icon", "description": "Specifies an icon to display.", "values": [] }, { "name": "icon-flip-rtl", "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [] }, { "name": "label", "description": "The component's label.", "values": [] }, { "name": "selected", "description": "When `true`, the component is selected.", "values": [] }, { "name": "short-heading", "description": "The component's short heading.\n\nWhen provided, the short heading will be displayed in the component's selection.\n\nIt is recommended to use 5 characters or fewer.", "values": [] }, { "name": "text-label", "description": "**Deprecated**: Use `heading` instead.. The component's text.", "values": [] }, { "name": "value", "description": "The component's value.", "values": [] } ], "references": [] }, { "name": "calcite-combobox-item-group", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding `calcite-combobox-item`s.\n\n### CSS Properties\n- **--calcite-combobox-item-group-text-color** - Specifies the text color of the component. \n- **--calcite-combobox-item-group-border-color** - Specifies the border color of the component. ", "attributes": [ { "name": "label", "description": "Specifies the title of the component.", "values": [] } ], "references": [] }, { "name": "calcite-date-picker", "description": "### Events\n- **calciteDatePickerChange** - Fires when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`.\n- **calciteDatePickerRangeChange** - Fires when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component's first focusable element.\n\n### CSS Properties\n- **--calcite-date-picker-border-color** - Specifies the component's border color. \n- **--calcite-date-picker-corner-radius** - Specifies the component's border radius. \n- **--calcite-date-picker-range-calendar-divider-color** - Specifies the divider color between calendar's when `range=\"true\"`. \n- **--calcite-date-picker-week-header-text-color** - Specifies the week header text color. \n- **--calcite-date-picker-header-action-background-color** - Specifies the background color of header action's of the component. \n- **--calcite-date-picker-header-action-background-color-hover** - Specifies the background color of header action's of the component when hovered. \n- **--calcite-date-picker-header-action-background-color-press** - Specifies the background color of header action's of the component when pressed. \n- **--calcite-date-picker-header-action-text-color** - Specifies the text color of header action's of the component. \n- **--calcite-date-picker-header-action-text-color-press** - Specifies the text color of header action's of the component when pressed. \n- **--calcite-date-picker-year-text-color** - Specifies the text color of year & suffix of the component. \n- **--calcite-date-picker-month-select-font-size** - Specifies the font size of month select of the component. \n- **--calcite-date-picker-month-select-text-color** - Specifies the text color of month select of the component. \n- **--calcite-date-picker-month-select-icon-color** - Specifies the icon color of month select of the component. \n- **--calcite-date-picker-month-select-icon-color-hover** - Specifies the icon color of month select of the component when hovered. \n- **--calcite-date-picker-day-background-color** - Specifies the background color of day of the component. \n- **--calcite-date-picker-day-background-color-hover** - Specifies the background color of day of the component when hovered. \n- **--calcite-date-picker-day-text-color** - Specifies the text color of day of the component. \n- **--calcite-date-picker-day-text-color-hover** - Specifies the text color of day of the component when hovered. \n- **--calcite-date-picker-current-day-text-color** - Specifies the text color of current day of the component. \n- **--calcite-date-picker-day-background-color-selected** - Specifies the background color of selected day of the component. \n- **--calcite-date-picker-day-text-color-selected** - Specifies the text color of selected day of the component. \n- **--calcite-date-picker-day-range-text-color** - Specifies the text color of select day range of the component. \n- **--calcite-date-picker-day-range-background-color** - Specifies the background color of select day range of the component. \n- **--calcite-date-picker-day-outside-range-background-color-hover** - Specifies the background color of day's outside current range when hovered. \n- **--calcite-date-picker-day-outside-range-text-color-hover** - Specifies the text color of day's outside current range when hovered. ", "attributes": [ { "name": "active-range", "description": "When `range` is true, specifies the active `range`. Where `\"start\"` specifies the starting range date and `\"end\"` the ending range date.", "values": [ { "name": "end" }, { "name": "start" } ] }, { "name": "heading-level", "description": "Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.", "values": [ { "name": "1" }, { "name": "2" }, { "name": "3" }, { "name": "4" }, { "name": "5" }, { "name": "6" } ] }, { "name": "layout", "description": "Defines the layout of the component.", "values": [ { "name": "horizontal" }, { "name": "vertical" } ] }, { "name": "max", "description": "When the component resides in a form,\nspecifies the latest allowed date (`\"yyyy-mm-dd\"`).", "values": [] }, { "name": "min", "description": "When the component resides in a form,\nspecifies the earliest allowed date (`\"yyyy-mm-dd\"`).", "values": [] }, { "name": "month-style", "description": "Specifies the monthStyle used by the component.", "values": [ { "name": "abbreviated" }, { "name": "wide" } ] }, { "name": "numbering-system", "description": "Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed.", "values": [ { "name": "arab" }, { "name": "arabext" }, { "name": "latn" } ] }, { "name": "proximity-selection-disabled", "description": "When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range.", "values": [] }, { "name": "range", "description": "When `true`, activates the component's range mode to allow a start and end date.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "value", "description": "Specifies the selected date as a string (`\"yyyy-mm-dd\"`), or an array of strings for `range` values (`[\"yyyy-mm-dd\", \"yyyy-mm-dd\"]`).", "values": [] } ], "references": [] }, { "name": "calcite-date-picker-day", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.", "attributes": [ { "name": "active", "description": "When `true`, the component is active.", "values": [] }, { "name": "current-month", "description": "Date is in the current month.", "values": [] }, { "name": "day", "description": "Day of the month to be shown.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "end-of-range", "description": "Date is the end of date range.", "values": [] }, { "name": "highlighted", "description": "Date is currently highlighted as part of the range,", "values": [] }, { "name": "range", "description": "When `true`, activates the component's range mode to allow a start and end date.", "values": [] }, { "name": "range-hover", "description": "Date is being hovered and within the set range.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "selected", "description": "When `true`, the component is selected.", "values": [] }, { "name": "start-of-range", "description": "Date is the start of date range.", "values": [] } ], "references": [] }, { "name": "calcite-date-picker-month", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [ { "name": "heading-level", "description": "Specifies the number at which section headings should start.", "values": [ { "name": "1" }, { "name": "2" }, { "name": "3" }, { "name": "4" }, { "name": "5" }, { "name": "6" } ] }, { "name": "month-style", "description": "Specifies the monthStyle used by the component.", "values": [ { "name": "abbreviated" }, { "name": "wide" } ] }, { "name": "range", "description": "When `true`, activates the component's range mode which renders two calendars for selecting ranges of dates.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] } ], "references": [] }, { "name": "calcite-date-picker-month-header", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [ { "name": "heading-level", "description": "Specifies the number at which section headings should start.", "values": [ { "name": "1" }, { "name": "2" }, { "name": "3" }, { "name": "4" }, { "name": "5" }, { "name": "6" } ] }, { "name": "month-style", "description": "Specifies the monthStyle used by the component.", "values": [ { "name": "abbreviated" }, { "name": "wide" } ] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] } ], "references": [] }, { "name": "calcite-dialog", "description": "### Events\n- **calciteDialogBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteDialogBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteDialogClose** - Fires when the component is closed and animation is complete.\n- **calciteDialogOpen** - Fires when the component is open and animation is complete.\n- **calciteDialogScroll** - Fires when the content is scrolled.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `scrollContentTo(options?: ScrollToOptions): Promise` - Scrolls the component's content to a specified set of coordinates.\n- `setFocus(): Promise` - Sets focus on the component's \"close\" button (the first focusable item).\n- `updateFocusTrapElements(extraContainers?: FocusTrapOptions[\"extraContainers\"]): Promise` - Updates the element(s) that are included in the focus-trap of the component.\n\n### Slots\n- _default_ - A slot for adding content.\n- **content** - [Deprecated] Use `custom-content` slot instead.\n- **custom-content** - A slot for displaying custom content. Will prevent the rendering of any default Dialog UI, except for `box-shadow` and `corner-radius`.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the component.\n- **alerts** - A slot for adding `calcite-alert`s to the component.\n- **content-bottom** - A slot for adding content below the unnamed (default) slot and - if populated - the `footer` slot.\n- **content-top** - A slot for adding content above the unnamed (default) slot and - if populated - below the `action-bar` slot.\n- **header-actions-start** - A slot for adding actions or content to the starting side of the component's header.\n- **header-actions-end** - A slot for adding actions or content to the ending side of the component's header.\n- **header-content** - A slot for adding custom content to the component's header.\n- **header-menu-actions** - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.\n- **fab** - A slot for adding a `calcite-fab` (floating action button) to perform an action.\n- **footer** - A slot for adding custom content to the component's footer. Should not be used with the `\"footer-start\"` or `\"footer-end\"` slots.\n- **footer-end** - A slot for adding a trailing footer custom content. Should not be used with the `\"footer\"` slot.\n- **footer-start** - A slot for adding a leading footer custom content. Should not be used with the `\"footer\"` slot.\n\n### CSS Properties\n- **--calcite-dialog-scrim-background-color** - Specifies the background color of the component's scrim. \n- **--calcite-dialog-size-x** - 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. \n- **--calcite-dialog-min-size-x** - Specifies the minimum width of the component, using `px`, `em`, `rem`, `vw`, or `%`. \n- **--calcite-dialog-max-size-x** - Specifies the maximum width of the component, using `px`, `em`, `rem`, `vw`, or `%`. \n- **--calcite-dialog-size-y** - 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. \n- **--calcite-dialog-min-size-y** - Specifies the minimum height of the component, using `px`, `em`, `rem`, `vh`, or `%`. \n- **--calcite-dialog-max-size-y** - Specifies the maximum height of the component, using `px`, `em`, `rem`, `vh`, or `%`. \n- **--calcite-dialog-content-space** - Specifies the padding of the component's content. \n- **--calcite-dialog-footer-space** - Specifies the padding of the component's footer. \n- **--calcite-dialog-border-color** - Specifies the component's border color. \n- **--calcite-dialog-offset-x** - Specifies the horizontal offset of the component. \n- **--calcite-dialog-offset-y** - Specifies the vertical offset of the component. \n- **--calcite-dialog-background-color** - Specifies the background color of the component. \n- **--calcite-dialog-icon-color** - Specifies the color of the component's icon. ", "attributes": [ { "name": "close-disabled", "description": "When `true`, disables the component's close button.", "values": [] }, { "name": "description", "description": "A description for the component.", "values": [] }, { "name": "drag-enabled", "description": "When `true`, the component is draggable.", "values": [] }, { "name": "escape-disabled", "description": "When `true`, disables the default close on escape behavior.\n\nBy default, an open dialog can be dismissed by pressing the Esc key.", "values": [] }, { "name": "focus-trap-disabled", "description": "When `true` and `modal` is `false`, prevents focus trapping.", "values": [] }, { "name": "heading", "description": "The component header text.", "values": [] }, { "name": "heading-level", "description": "Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.", "values": [ { "name": "1" }, { "name": "2" }, { "name": "3" }, { "name": "4" }, { "name": "5" }, { "name": "6" } ] }, { "name": "icon", "description": "Specifies an icon to display.", "values": [] }, { "name": "icon-flip-rtl", "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [] }, { "name": "kind", "description": "Specifies the kind of the component, which will style the top border.", "values": [ { "name": "brand" }, { "name": "danger" }, { "name": "info" }, { "name": "success" }, { "name": "warning" } ] }, { "name": "loading", "description": "When `true`, a busy indicator is displayed.", "values": [] }, { "name": "menu-open", "description": "When `true`, the action menu items in the `header-menu-actions` slot are open.", "values": [] }, { "name": "modal", "description": "When `true`, displays a scrim blocking interaction underneath the component.", "values": [] }, { "name": "open", "description": "When `true`, displays and positions the component.", "values": [] }, { "name": "outside-close-disabled", "description": "When `true`, disables the closing of the component when clicked outside.", "values": [] }, { "name": "overlay-positioning", "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.", "values": [ { "name": "absolute" }, { "name": "fixed" } ] }, { "name": "placement", "description": "Specifies the placement of the dialog.", "values": [ { "name": "bottom" }, { "name": "bottom-end" }, { "name": "bottom-start" }, { "name": "center" }, { "name": "cover" }, { "name": "top" }, { "name": "top-end" }, { "name": "top-start" } ] }, { "name": "resizable", "description": "When `true`, the component is resizable.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "width", "description": "Specifies the width of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "width-scale", "description": "**Deprecated**: Use the `width` property instead.. Specifies the width of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] } ], "references": [] }, { "name": "calcite-dropdown", "description": "### Events\n- **calciteDropdownBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteDropdownBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteDropdownClose** - Fires when the component is closed and animation is complete.\n- **calciteDropdownOpen** - Fires when the component is open and animation is complete.\n- **calciteDropdownSelect** - Fires when a `calcite-dropdown-item`'s selection changes.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise` - Updates the position of the component.\n- `setFocus(): Promise` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `calcite-dropdown-group` elements. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.\n- **trigger** - A slot for the element that triggers the `calcite-dropdown`.\n\n### CSS Properties\n- **--calcite-dropdown-width** - Specifies the width of the component's wrapper. \n- **--calcite-dropdown-background-color** - Specifies the component's background color. ", "attributes": [ { "name": "close-on-select-disabled", "description": "When `true`, the component will remain open after a selection is made.\n\nIf the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `\"none\"`, the component will always close.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "max-items", "description": "Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller.\nValue must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`.", "values": [] }, { "name": "offset-distance", "description": "Offset the position of the component away from the `referenceElement`.", "values": [] }, { "name": "offset-skidding", "description": "Offset the position of the component along the `referenceElement`.", "values": [] }, { "name": "open", "description": "When `true`, displays and positions the component.", "values": [] }, { "name": "overlay-positioning", "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.", "values": [ { "name": "absolute" }, { "name": "fixed" } ] }, { "name": "placement", "description": "Determines where the component will be positioned relative to the container element.", "values": [ { "name": "bottom" }, { "name": "bottom-end" }, { "name": "bottom-start" }, { "name": "top" }, { "name": "top-end" }, { "name": "top-start" } ] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "type", "description": "Specifies the action to open the component from the container element.", "values": [ { "name": "click" }, { "name": "hover" } ] }, { "name": "width", "description": "Specifies the width of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "width-scale", "description": "**Deprecated**: Use the `width` property instead.. Specifies the width of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] } ], "references": [] }, { "name": "calcite-dropdown-group", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding `calcite-dropdown-item`s.\n\n### CSS Properties\n- **--calcite-dropdown-group-border-color** - Specifies the `calcite-dropdown`'s border color. \n- **--calcite-dropdown-group-title-text-color** - Specifies the component's `groupTitle` color. ", "attributes": [ { "name": "group-title", "description": "Specifies and displays a group title.", "values": [] }, { "name": "position", "description": "The position of the group in the dropdown menu.", "values": [] }, { "name": "selection-mode", "description": "Specifies the selection mode of the component, where:\n\n`\"multiple\"` allows any number of selections,\n\n`\"single\"` allows only one selection, and\n\n`\"none\"` does not allow any selections.", "values": [ { "name": "multiple" }, { "name": "none" }, { "name": "single" } ] } ], "references": [] }, { "name": "calcite-dropdown-item", "description": "### Events\n- **calciteDropdownItemSelect** - Fires when the component is selected.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding text.\n\n### CSS Properties\n- **--calcite-dropdown-item-background-color-hover** - Specifies the item's background color when hovered. \n- **--calcite-dropdown-item-background-color-press** - Specifies the item's background color when selected or active. \n- **--calcite-dropdown-item-icon-color-hover** - [Deprecated] Specifies the item's icon selection color when hovered. \n- **--calcite-dropdown-item-icon-color-press** - Specifies the item's icon selection color when selected or active. \n- **--calcite-dropdown-item-text-color-press** - Specifies the item's text when selected or active. \n- **--calcite-dropdown-item-text-color** - Specifies the item's text color. ", "attributes": [ { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "href", "description": "Specifies the URL of the linked resource, which can be set as an absolute or relative path.\n\nDetermines if the component will render as an anchor.", "values": [] }, { "name": "icon-end", "description": "Specifies an icon to display at the end of the component.", "values": [] }, { "name": "icon-flip-rtl", "description": "Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [ { "name": "both" }, { "name": "end" }, { "name": "start" } ] }, { "name": "icon-start", "description": "Specifies an icon to display at the start of the component.", "values": [] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "rel", "description": "Specifies the relationship to the linked document defined in `href`.", "values": [] }, { "name": "selected", "description": "When `true`, the component is selected.", "values": [] }, { "name": "target", "description": "Specifies the frame or window to open the linked document.", "values": [] } ], "references": [] }, { "name": "calcite-fab", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### CSS Properties\n- **--calcite-fab-background-color** - Specifies the component's background color. \n- **--calcite-fab-border-color** - Specifies the component's border color. \n- **--calcite-fab-corner-radius** - Specifies the component's corner radius. \n- **--calcite-fab-text-color** - Specifies the component's text color. \n- **--calcite-fab-loader-color** - Specifies the component's loader color. \n- **--calcite-fab-shadow** - Specifies the component's shadow. ", "attributes": [ { "name": "appearance", "description": "Specifies the appearance style of the component.", "values": [ { "name": "outline-fill" }, { "name": "solid" } ] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "icon", "description": "Specifies an icon to display.", "values": [] }, { "name": "icon-flip-rtl", "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [] }, { "name": "kind", "description": "Specifies the kind of the component, which will apply to border and background.", "values": [ { "name": "brand" }, { "name": "danger" }, { "name": "inverse" }, { "name": "neutral" } ] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "loading", "description": "When `true`, a busy indicator is displayed.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "text", "description": "Specifies text to accompany the component's icon.", "values": [] }, { "name": "text-enabled", "description": "When `true`, displays the `text` value in the component.", "values": [] } ], "references": [] }, { "name": "calcite-filter", "description": "### Events\n- **calciteFilterChange** - Fires when the filter text changes.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `filter(value?: string): Promise` - Performs a filter on the component.\n\nThis method can be useful because filtering is delayed and asynchronous.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### CSS Properties\n- **--calcite-filter-content-space** - Specifies the padding of the component's content. \n- **--calcite-filter-input-background-color** - Specifies the input's background color. \n- **--calcite-filter-input-border-color** - Specifies the input's border color. \n- **--calcite-filter-input-corner-radius** - Specifies the input's corner radius. \n- **--calcite-filter-input-shadow** - Specifies the shadow around the input. \n- **--calcite-filter-input-icon-color** - Specifies the input's icon color. \n- **--calcite-filter-input-text-color** - Specifies the input's text color. \n- **--calcite-filter-input-placeholder-text-color** - Specifies the input's placeholder text color. \n- **--calcite-filter-input-actions-background-color** - Specifies the background color of the input's `clearable` element. \n- **--calcite-filter-input-actions-background-color-hover** - Specifies the background color of the input's `clearable` element when hovered. \n- **--calcite-filter-input-actions-background-color-press** - Specifies the background color of the input's `clearable` element when pressed. \n- **--calcite-filter-input-actions-icon-color** - Specifies the icon color of the input's `clearable` element. \n- **--calcite-filter-input-actions-icon-color-hover** - Specifies the icon color of the input's `clearable` element when hovered. \n- **--calcite-filter-input-actions-icon-color-press** - Specifies the icon color of the input's `clearable` element when pressed. ", "attributes": [ { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "label", "description": "Specifies an accessible name for the component.", "values": [] }, { "name": "placeholder", "description": "Specifies placeholder text for the input element.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "value", "description": "The component's value.", "values": [] } ], "references": [] }, { "name": "calcite-flow", "description": "### Methods\n- `back(): Promise` - Removes the currently active `calcite-flow-item`.\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-flow-item` elements to the component.\n\n### CSS Properties\n- **--calcite-flow-background-color** - Specifies the component's background color. ", "attributes": [], "references": [] }, { "name": "calcite-flow-item", "description": "### Events\n- **calciteFlowItemBack** - Fires when the back button is clicked.\n- **calciteFlowItemClose** - Fires when the close button is clicked.\n- **calciteFlowItemScroll** - Fires when the content is scrolled.\n- **calciteFlowItemToggle** - Fires when the collapse button is clicked.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `scrollContentTo(options?: ScrollToOptions): Promise` - Scrolls the component's content to a specified set of coordinates.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the component.\n- **alerts** - A slot for adding `calcite-alert`s to the component.\n- **content-top** - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).\n- **content-bottom** - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)\n- **header-actions-start** - A slot for adding `calcite-action`s or content to the start side of the component's header.\n- **header-actions-end** - A slot for adding `calcite-action`s or content to the end side of the component's header.\n- **header-content** - A slot for adding custom content to the component's header.\n- **header-menu-actions** - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.\n- **fab** - A slot for adding a `calcite-fab` (floating action button) to perform an action.\n- **footer** - A slot for adding custom content to the component's footer. Should not be used with the `\"footer-start\"` or `\"footer-end\"` slots.\n- **footer-actions** - [Deprecated] Use the `\"footer\"` slot instead. A slot for adding `calcite-button`s to the component's footer.\n- **footer-end** - A slot for adding a trailing footer custom content. Should not be used with the `\"footer\"` slot.\n- **footer-start** - A slot for adding a leading footer custom content. Should not be used with the `\"footer\"` slot.\n\n### CSS Properties\n- **--calcite-flow-item-footer-padding** - [Deprecated] Use `--calcite-flow-footer-space` instead. Specifies the padding of the component's footer. \n- **--calcite-flow-item-header-border-block-end** - [Deprecated] Use `--calcite-flow-border-color` instead. Specifies the component header's block end border. \n- **--calcite-flow-corner-radius** - Specifies the component's corner radius. \n- **--calcite-flow-heading-text-color** - Specifies the text color of the component's `heading`. \n- **--calcite-flow-icon-color** - Specifies the color of the component's icon. \n- **--calcite-flow-description-text-color** - Specifies the text color of the component's `description`. \n- **--calcite-flow-border-color** - Specifies the component's border color. \n- **--calcite-flow-background-color** - Specifies the component's background color. \n- **--calcite-flow-header-background-color** - Specifies the background color of the component's header. \n- **--calcite-flow-footer-background-color** - Specifies the background color of the component's footer. \n- **--calcite-flow-space** - Specifies the padding of the component's `\"unnamed (default)\"` slot. \n- **--calcite-flow-header-content-space** - Specifies the padding of the `\"header-content\"` slot. \n- **--calcite-flow-footer-space** - Specifies the padding of the component's footer. \n- **--calcite-action-background-color** - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s. \n- **--calcite-action-background-color-hover** - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s. \n- **--calcite-action-background-color-pressed** - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s. \n- **--calcite-action-text-color-hover** - 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. \n- **--calcite-action-text-color-pressed** - 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. \n- **--calcite-popover-border-color** - 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. \n- **--calcite-flow-header-action-background-color-hover** - Specifies the background color of the component's `calcite-action` items in the flow item header when hovered. \n- **--calcite-flow-header-action-background-color-press** - Specifies the background color of the component's `calcite-action` items in the flow item header when pressed. \n- **--calcite-flow-header-action-background-color** - Specifies the background color of the component's `calcite-action` items in the flow item header. \n- **--calcite-flow-header-action-indicator-color** - Specifies the color of the component's `calcite-action` items' indicator in the flow item header. \n- **--calcite-flow-header-action-text-color-press** - Specifies the text color of the component's `calcite-action` items in the flow item header when pressed. \n- **--calcite-flow-header-action-text-color** - Specifies the text color of the component's `calcite-action` items in the flow item header. ", "attributes": [ { "name": "closable", "description": "When `true`, displays a close button in the trailing side of the component's header.", "values": [] }, { "name": "closed", "description": "When `true`, the component will be hidden.", "values": [] }, { "name": "collapsed", "description": "When `true`, hides the component's content area.", "values": [] }, { "name": "collapsible", "description": "When `true`, the component is collapsible.", "values": [] }, { "name": "description", "description": "A description for the component.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "heading", "description": "The component header text.", "values": [] }, { "name": "heading-level", "description": "Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.", "values": [ { "name": "1" }, { "name": "2" }, { "name": "3" }, { "name": "4" }, { "name": "5" }, { "name": "6" } ] }, { "name": "icon", "description": "Specifies an icon to display.", "values": [] }, { "name": "icon-flip-rtl", "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [] }, { "name": "loading", "description": "When `true`, a busy indicator is displayed.", "values": [] }, { "name": "menu-open", "description": "When `true`, the action menu items in the `header-menu-actions` slot are open.", "values": [] }, { "name": "overlay-positioning", "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.", "values": [ { "name": "absolute" }, { "name": "fixed" } ] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "selected", "description": "When true, flow-item is displayed within a parent flow.", "values": [] }, { "name": "show-back-button", "description": "When `true`, displays a back button in the component's header.", "values": [] } ], "references": [] }, { "name": "calcite-graph", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### CSS Properties\n- **--calcite-graph-highlight-fill-color** - Specifies the fill color of the `highlight` element, when present. ", "attributes": [ { "name": "highlight-max", "description": "End of highlight color if highlighting range.", "values": [] }, { "name": "highlight-min", "description": "Start of highlight color if highlighting range.", "values": [] }, { "name": "max", "description": "Highest point of the range.", "values": [] }, { "name": "min", "description": "Lowest point of the range.", "values": [] } ], "references": [] }, { "name": "calcite-handle", "description": "**Deprecated**: Use the `calcite-sort-handle` component instead..\n--\n\n### Events\n- **calciteHandleChange** - Fires whenever the component is selected or unselected.\n- **calciteHandleNudge** - Fires when the handle is selected and the up or down arrow key is pressed.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### CSS Properties\n- **--calcite-handle-background-color** - Specifies the component's background color. \n- **--calcite-handle-background-color-hover** - Specifies the component's background color on hover. \n- **--calcite-handle-background-color-selected** - Specifies the component's background color when selected. \n- **--calcite-handle-icon-color** - Specifies the component's icon color. \n- **--calcite-handle-icon-color-hover** - Specifies the component's icon color on hover. \n- **--calcite-handle-icon-color-selected** - Specifies the component's icon color when selected. ", "attributes": [ { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "drag-handle", "description": "Value for the button title attribute.", "values": [] }, { "name": "selected", "description": "When `true`, the component is selected.", "values": [] } ], "references": [] }, { "name": "calcite-icon", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### CSS Properties\n- **--calcite-ui-icon-color** - [Deprecated] Use `--calcite-icon-color`. Specifies the component's color. Defaults to current color. \n- **--calcite-icon-color** - Specifies the component's color. Defaults to current color. ", "attributes": [ { "name": "flip-rtl", "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [] }, { "name": "icon", "description": "Displays a specific icon.", "values": [] }, { "name": "preload", "description": "When true, it loads preloads the icon data.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "text-label", "description": "Accessible name for the component.\n\nIt is recommended to set this value if your icon is semantic.", "values": [] } ], "references": [] }, { "name": "calcite-inline-editable", "description": "### Events\n- **calciteInlineEditableEditCancel** - Emits when the component's \"cancel editing\" button is pressed.\n- **calciteInlineEditableEditConfirm** - Emits when the component's \"confirm edits\" button is pressed.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding a `calcite-input`.\n\n### CSS Properties\n- **--calcite-inline-editable-background-color-hover** - Specifies the component's background color when hovered. \n- **--calcite-inline-editable-background-color** - Specifies the component's background color. \n- **--calcite-inline-editable-button-background-color** - Specifies the button element's background color when appearance=\"solid\" or appearance=\"outline-fill\". \n- **--calcite-inline-editable-button-corner-radius** - Specifies the button element's corner radius. \n- **--calcite-inline-editable-button-loader-color** - Specifies the button element's loader color. \n- **--calcite-inline-editable-button-shadow-color** - Specifies the button element's box-shadow color. \n- **--calcite-inline-editable-button-text-color** - Specifies the button element's text color. ", "attributes": [ { "name": "controls", "description": "When `true` and `editingEnabled` is `true`, displays save and cancel controls on the component.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "editing-enabled", "description": "When `true`, inline editing is enabled on the component.", "values": [] }, { "name": "loading", "description": "When `true`, a busy indicator is displayed.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component. Defaults to the scale of the wrapped `calcite-input` or the scale of the closest wrapping component with a set scale.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] } ], "references": [] }, { "name": "calcite-input", "description": "### Events\n- **calciteInputChange** - Fires each time a new `value` is typed and committed.\n- **calciteInputInput** - Fires each time a new `value` is typed.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `selectText(): Promise` - Selects the text of the component's `value`.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- **action** - A slot for positioning a `calcite-button` next to the component.\n\n### CSS Properties\n- **--calcite-input-prefix-size** - Specifies the component's prefix width, when present. \n- **--calcite-input-suffix-size** - Specifies the component's suffix width, when present. \n- **--calcite-input-background-color** - Specifies the component's background color. \n- **--calcite-input-border-color** - Specifies the component's border color. \n- **--calcite-input-corner-radius** - Specifies the component's corner radius. \n- **--calcite-input-shadow** - Specifies the shadow around the component. \n- **--calcite-input-icon-color** - Specifies the component's icon color. \n- **--calcite-input-text-color** - Specifies the component's text color. \n- **--calcite-input-placeholder-text-color** - Specifies the component's placeholder text color. \n- **--calcite-input-actions-background-color** - Specifies the background color of the component's `clearable` and `number-button-type` elements. \n- **--calcite-input-actions-background-color-hover** - Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered. \n- **--calcite-input-actions-background-color-press** - Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed. \n- **--calcite-input-actions-icon-color** - Specifies the icon color of the component's `clearable` and `number-button-type` elements. \n- **--calcite-input-actions-icon-color-hover** - Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered. \n- **--calcite-input-actions-icon-color-press** - Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed. \n- **--calcite-input-loading-background-color** - Specifies the background color of the `loading` element, when present. \n- **--calcite-input-loading-fill-color** - Specifies the fill color of the `loading` element, when present. \n- **--calcite-input-prefix-background-color** - Specifies the component's prefix background color, when present. \n- **--calcite-input-prefix-text-color** - Specifies the component's prefix text color, when present. \n- **--calcite-input-suffix-background-color** - Specifies the component's suffix background color, when present. \n- **--calcite-input-suffix-text-color** - Specifies the component's suffix text color, when present. ", "attributes": [ { "name": "accept", "description": "Specifies a comma separated list of unique file type specifiers for limiting accepted file types.\nThis property only has an effect when `type` is \"file\".\nRead the native attribute's documentation on MDN for more info.", "values": [] }, { "name": "alignment", "description": "Specifies the text alignment of the component's value.", "values": [ { "name": "end" }, { "name": "start" } ] }, { "name": "clearable", "description": "When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `\"search\"`, `\"time\"`, and `\"date\"` types, and will not display for the `\"textarea\"` type.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "form", "description": "The `id` of the form that will be associated with the component.\n\nWhen not set, the component will be associated with its ancestor form element, if any.", "values": [] }, { "name": "group-separator", "description": "When `true`, number values are displayed with a group separator corresponding to the language and country format.", "values": [] }, { "name": "icon", "description": "When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.", "values": [] }, { "name": "icon-flip-rtl", "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "loading", "description": "When `true`, a busy indicator is displayed.", "values": [] }, { "name": "max", "description": "When the component resides in a form,\nspecifies the maximum value for `type=\"number\"`.", "values": [] }, { "name": "max-length", "description": "When the component resides in a form,\nspecifies the maximum length of text for the component's value.", "values": [] }, { "name": "min", "description": "When the component resides in a form,\nspecifies the minimum value for `type=\"number\"`.", "values": [] }, { "name": "min-length", "description": "When the component resides in a form,\nspecifies the minimum length of text for the component's value.", "values": [] }, { "name": "multiple", "description": "When `true`, the component can accept more than one value.\nThis property only has an effect when `type` is \"email\" or \"file\".\nRead the native attribute's documentation on MDN for more info.", "values": [] }, { "name": "name", "description": "Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.", "values": [] }, { "name": "number-button-type", "description": "Specifies the placement of the buttons for `type=\"number\"`.", "values": [ { "name": "horizontal" }, { "name": "none" }, { "name": "vertical" } ] }, { "name": "numbering-system", "description": "Specifies the Unicode numeral system used by the component for localization.", "values": [ { "name": "arab" }, { "name": "arabext" }, { "name": "latn" } ] }, { "name": "pattern", "description": "When the component resides in a form,\nspecifies a regular expression (regex) pattern the component's `value` must match for validation.\nRead the native attribute's documentation on MDN for more info.", "values": [] }, { "name": "placeholder", "description": "Specifies placeholder text for the component.", "values": [] }, { "name": "prefix-text", "description": "Adds text to the start of the component.", "values": [] }, { "name": "read-only", "description": "When `true`, the component's value can be read, but cannot be modified.", "values": [] }, { "name": "required", "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "status", "description": "Specifies the status of the input field, which determines message and icons.", "values": [ { "name": "idle" }, { "name": "invalid" }, { "name": "valid" } ] }, { "name": "step", "description": "Specifies the granularity the component's `value` must adhere to.", "values": [ { "name": "any" } ] }, { "name": "suffix-text", "description": "Adds text to the end of the component.", "values": [] }, { "name": "type", "description": "Specifies the component type.\n\nNote that the following `type`s add type-specific icons by default: `\"date\"`, `\"email\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"time\"`.\n\n `\"textarea\"` [Deprecated] use the `calcite-text-area` component instead.", "values": [ { "name": "color" }, { "name": "date" }, { "name": "datetime-local" }, { "name": "email" }, { "name": "file" }, { "name": "image" }, { "name": "month" }, { "name": "number" }, { "name": "password" }, { "name": "search" }, { "name": "tel" }, { "name": "text" }, { "name": "textarea" }, { "name": "time" }, { "name": "url" }, { "name": "week" } ] }, { "name": "validation-icon", "description": "Specifies the validation icon to display under the component.", "values": [] }, { "name": "validation-message", "description": "Specifies the validation message to display under the component.", "values": [] }, { "name": "value", "description": "The component's value.", "values": [] } ], "references": [] }, { "name": "calcite-input-date-picker", "description": "### Events\n- **calciteInputDatePickerBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteInputDatePickerBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteInputDatePickerChange** - Fires when the component's `value` changes.\n- **calciteInputDatePickerClose** - Fires when the component is closed and animation is complete.\n- **calciteInputDatePickerOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise` - Updates the position of the component.\n- `setFocus(): Promise` - Sets focus on the component.", "attributes": [ { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "focus-trap-disabled", "description": "When `true`, prevents focus trapping.", "values": [] }, { "name": "form", "description": "The `id` of the form that will be associated with the component.\n\nWhen not set, the component will be associated with its ancestor form element, if any.", "values": [] }, { "name": "heading-level", "description": "Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.", "values": [ { "name": "1" }, { "name": "2" }, { "name": "3" }, { "name": "4" }, { "name": "5" }, { "name": "6" } ] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "layout", "description": "Defines the layout of the component.", "values": [ { "name": "horizontal" }, { "name": "vertical" } ] }, { "name": "max", "description": "When the component resides in a form,\nspecifies the latest allowed date (\"yyyy-mm-dd\").", "values": [] }, { "name": "min", "description": "When the component resides in a form,\nspecifies the earliest allowed date (\"yyyy-mm-dd\").", "values": [] }, { "name": "month-style", "description": "Specifies the monthStyle used by the component.", "values": [ { "name": "abbreviated" }, { "name": "wide" } ] }, { "name": "name", "description": "Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.", "values": [] }, { "name": "numbering-system", "description": "Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed.", "values": [ { "name": "arab" }, { "name": "arabext" }, { "name": "latn" } ] }, { "name": "open", "description": "When `true`, displays the `calcite-date-picker` component.", "values": [] }, { "name": "overlay-positioning", "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.", "values": [ { "name": "absolute" }, { "name": "fixed" } ] }, { "name": "placement", "description": "Specifies the placement of the `calcite-date-picker` relative to the component.", "values": [ { "name": "bottom" }, { "name": "bottom-end" }, { "name": "bottom-start" }, { "name": "top" }, { "name": "top-end" }, { "name": "top-start" } ] }, { "name": "proximity-selection-disabled", "description": "When `true`, disables the default behavior on the third click of narrowing or extending the range.\nInstead starts a new range.", "values": [] }, { "name": "range", "description": "When `true`, activates a range for the component.", "values": [] }, { "name": "read-only", "description": "When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.", "values": [] }, { "name": "required", "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "status", "description": "Specifies the status of the input field, which determines message and icons.", "values": [ { "name": "idle" }, { "name": "invalid" }, { "name": "valid" } ] }, { "name": "validation-icon", "description": "Specifies the validation icon to display under the component.", "values": [] }, { "name": "validation-message", "description": "Specifies the validation message to display under the component.", "values": [] }, { "name": "value", "description": "Selected date as a string in ISO format (`\"yyyy-mm-dd\"`).", "values": [] } ], "references": [] }, { "name": "calcite-input-message", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding text.\n\n### CSS Properties\n- **--calcite-input-message-spacing-value** - [Deprecated] Use `--calcite-input-message-spacing`. Specifies the margin spacing at the top of the component. \n- **--calcite-input-message-spacing** - Specifies the margin spacing at the top of the component. \n- **--calcite-input-message-icon-color** - Specifies the component's icon color. ", "attributes": [ { "name": "icon", "description": "Specifies an icon to display.", "values": [] }, { "name": "icon-flip-rtl", "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "status", "description": "Specifies the status of the input field, which determines message and icons.", "values": [ { "name": "idle" }, { "name": "invalid" }, { "name": "valid" } ] } ], "references": [] }, { "name": "calcite-input-number", "description": "### Events\n- **calciteInputNumberChange** - Fires each time a new value is typed and committed.\n- **calciteInputNumberInput** - Fires each time a new value is typed.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `selectText(): Promise` - Selects the text of the component's `value`.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- **action** - A slot for positioning a button next to the component.\n\n### CSS Properties\n- **--calcite-input-actions-background-color** - Specifies the background color of the component's `clearable` and `number-button-type` elements. \n- **--calcite-input-actions-background-color-hover** - Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered. \n- **--calcite-input-actions-background-color-press** - Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed. \n- **--calcite-input-actions-icon-color** - Specifies the icon color of the component's `clearable` and `number-button-type` elements. \n- **--calcite-input-actions-icon-color-hover** - Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered. \n- **--calcite-input-actions-icon-color-press** - Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed. \n- **--calcite-input-loading-background-color** - Specifies the background color of the `loading` element. \n- **--calcite-input-loading-fill-color** - Specifies the fill color of the `loading` element. \n- **--calcite-input-number-background-color** - Specifies the background color of the component. \n- **--calcite-input-number-border-color** - Specifies the border color of the component. \n- **--calcite-input-number-corner-radius** - Specifies the border radius of the component. \n- **--calcite-input-number-height** - Specifies the height of the component. \n- **--calcite-input-number-placeholder-text-color** - Specifies the text color of the placeholder in the component. \n- **--calcite-input-number-text-color** - Specifies the text color of the component. \n- **--calcite-input-number-text-color-focus** - Specifies the text color of the component when focused. \n- **--calcite-input-prefix-background-color** - Specifies the background color of the prefix element. \n- **--calcite-input-prefix-size** - Specifies the width of the prefix element. \n- **--calcite-input-prefix-text-color** - Specifies the text color of the prefix element. \n- **--calcite-input-suffix-background-color** - Specifies the background color of the suffix element. \n- **--calcite-input-suffix-size** - Specifies the width of the suffix element. \n- **--calcite-input-suffix-text-color** - Specifies the text color of the suffix element. ", "attributes": [ { "name": "alignment", "description": "Specifies the text alignment of the component's value.", "values": [ { "name": "end" }, { "name": "start" } ] }, { "name": "clearable", "description": "When `true`, a clear button is displayed when the component has a value.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "form", "description": "The `id` of the form that will be associated with the component.\n\nWhen not set, the component will be associated with its ancestor form element, if any.", "values": [] }, { "name": "group-separator", "description": "When `true`, number values are displayed with a group separator corresponding to the language and country format.", "values": [] }, { "name": "icon", "description": "Specifies an icon to display.", "values": [] }, { "name": "icon-flip-rtl", "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [] }, { "name": "integer", "description": "When `true`, restricts the component to integer numbers only and disables exponential notation.", "values": [] }, { "name": "label", "description": "Accessible name for the component's button or hyperlink.", "values": [] }, { "name": "loading", "description": "When `true`, the component is in the loading state and `calcite-progress` is displayed.", "values": [] }, { "name": "max", "description": "When the component resides in a form,\nspecifies the maximum value.", "values": [] }, { "name": "max-length", "description": "**Deprecated**: This property has no effect on the component.. When the component resides in a form,\nspecifies the maximum length of text for the component's value.", "values": [] }, { "name": "min", "description": "When the component resides in a form,\nspecifies the minimum value.", "values": [] }, { "name": "min-length", "description": "**Deprecated**: This property has no effect on the component.. When the component resides in a form,\nspecifies the minimum length of text for the component's value.", "values": [] }, { "name": "name", "description": "Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.", "values": [] }, { "name": "number-button-type", "description": "Specifies the placement of the buttons.", "values": [ { "name": "horizontal" }, { "name": "none" }, { "name": "vertical" } ] }, { "name": "numbering-system", "description": "Specifies the Unicode numeral system used by the component for localization.", "values": [ { "name": "arab" }, { "name": "arabext" }, { "name": "latn" } ] }, { "name": "placeholder", "description": "Specifies placeholder text for the component.", "values": [] }, { "name": "prefix-text", "description": "Adds text to the start of the component.", "values": [] }, { "name": "read-only", "description": "When `true`, the component's value can be read, but cannot be modified.", "values": [] }, { "name": "required", "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "status", "description": "Specifies the status of the input field, which determines message and icons.", "values": [ { "name": "idle" }, { "name": "invalid" }, { "name": "valid" } ] }, { "name": "step", "description": "Specifies the granularity that the component's value must adhere to.", "values": [ { "name": "any" } ] }, { "name": "suffix-text", "description": "Adds text to the end of the component.", "values": [] }, { "name": "validation-icon", "description": "Specifies the validation icon to display under the component.", "values": [] }, { "name": "validation-message", "description": "Specifies the validation message to display under the component.", "values": [] }, { "name": "value", "description": "The component's value.", "values": [] } ], "references": [] }, { "name": "calcite-input-text", "description": "### Events\n- **calciteInputTextChange** - Fires each time a new value is typed and committed.\n- **calciteInputTextInput** - Fires each time a new value is typed.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `selectText(): Promise` - Selects the text of the component's `value`.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- **action** - A slot for positioning a button next to the component.\n\n### CSS Properties\n- **--calcite-input-prefix-size** - Specifies the component's prefix width. \n- **--calcite-input-suffix-size** - Specifies the component's suffix width. ", "attributes": [ { "name": "alignment", "description": "Specifies the text alignment of the component's value.", "values": [ { "name": "end" }, { "name": "start" } ] }, { "name": "clearable", "description": "When `true`, a clear button is displayed when the component has a value.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "form", "description": "The `id` of the form that will be associated with the component.\n\nWhen not set, the component will be associated with its ancestor form element, if any.", "values": [] }, { "name": "icon", "description": "Specifies an icon to display.", "values": [] }, { "name": "icon-flip-rtl", "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [] }, { "name": "label", "description": "Accessible name for the component's button or hyperlink.", "values": [] }, { "name": "loading", "description": "When `true`, the component is in the loading state and `calcite-progress` is displayed.", "values": [] }, { "name": "max-length", "description": "When the component resides in a form,\nspecifies the maximum length of text for the component's value.", "values": [] }, { "name": "min-length", "description": "When the component resides in a form,\nspecifies the minimum length of text for the component's value.", "values": [] }, { "name": "name", "description": "Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.", "values": [] }, { "name": "pattern", "description": "When the component resides in a form,\nspecifies a regular expression (regex) pattern the component's `value` must match for validation.\nRead the native attribute's documentation on MDN for more info.", "values": [] }, { "name": "placeholder", "description": "Specifies placeholder text for the component.", "values": [] }, { "name": "prefix-text", "description": "Adds text to the start of the component.", "values": [] }, { "name": "read-only", "description": "When `true`, the component's value can be read, but cannot be modified.", "values": [] }, { "name": "required", "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "status", "description": "Specifies the status of the input field, which determines message and icons.", "values": [ { "name": "idle" }, { "name": "invalid" }, { "name": "valid" } ] }, { "name": "suffix-text", "description": "Adds text to the end of the component.", "values": [] }, { "name": "validation-icon", "description": "Specifies the validation icon to display under the component.", "values": [] }, { "name": "validation-message", "description": "Specifies the validation message to display under the component.", "values": [] }, { "name": "value", "description": "The component's value.", "values": [] } ], "references": [] }, { "name": "calcite-input-time-picker", "description": "### Events\n- **calciteInputTimePickerBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteInputTimePickerBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteInputTimePickerChange** - Fires when the component's `value` is modified by the user.\n- **calciteInputTimePickerClose** - Fires when the component is closed and animation is complete.\n- **calciteInputTimePickerOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise` - Updates the position of the component.\n- `setFocus(): Promise` - Sets focus on the component.", "attributes": [ { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "focus-trap-disabled", "description": "When `true`, prevents focus trapping.", "values": [] }, { "name": "form", "description": "The `id` of the form that will be associated with the component.\n\nWhen not set, the component will be associated with its ancestor form element, if any.", "values": [] }, { "name": "hour-format", "description": "Specifies the component's hour format, where:\n\n`\"user\"` displays the user's locale format,\n`\"12\"` displays a 12-hour format, and\n`\"24\"` displays a 24-hour format.", "values": [ { "name": "12" }, { "name": "24" }, { "name": "user" } ] }, { "name": "max", "description": "When the component resides in a form,\nspecifies the maximum value.", "values": [] }, { "name": "min", "description": "When the component resides in a form,\nspecifies the minimum value.", "values": [] }, { "name": "name", "description": "Specifies the name of the component on form submission.", "values": [] }, { "name": "numbering-system", "description": "Specifies the Unicode numeral system used by the component for localization.", "values": [ { "name": "arab" }, { "name": "arabext" }, { "name": "latn" } ] }, { "name": "open", "description": "When `true`, displays the `calcite-time-picker` component.", "values": [] }, { "name": "overlay-positioning", "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.", "values": [ { "name": "absolute" }, { "name": "fixed" } ] }, { "name": "placement", "description": "Determines where the popover will be positioned relative to the input.", "values": [ { "name": "auto" }, { "name": "auto-end" }, { "name": "auto-start" }, { "name": "bottom" }, { "name": "bottom-end" }, { "name": "bottom-start" }, { "name": "leading" }, { "name": "leading-end" }, { "name": "leading-start" }, { "name": "left" }, { "name": "left-end" }, { "name": "left-start" }, { "name": "right" }, { "name": "right-end" }, { "name": "right-start" }, { "name": "top" }, { "name": "top-end" }, { "name": "top-start" }, { "name": "trailing" }, { "name": "trailing-end" }, { "name": "trailing-start" } ] }, { "name": "read-only", "description": "When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.", "values": [] }, { "name": "required", "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "status", "description": "Specifies the status of the input field, which determines message and icons.", "values": [ { "name": "idle" }, { "name": "invalid" }, { "name": "valid" } ] }, { "name": "step", "description": "Specifies the granularity the component's `value` must adhere to (in seconds).", "values": [] }, { "name": "validation-icon", "description": "Specifies the validation icon to display under the component.", "values": [] }, { "name": "validation-message", "description": "Specifies the validation message to display under the component.", "values": [] }, { "name": "value", "description": "The time value in ISO (24-hour) format.", "values": [] } ], "references": [] }, { "name": "calcite-input-time-zone", "description": "### Events\n- **calciteInputTimeZoneBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteInputTimeZoneBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteInputTimeZoneChange** - Fires when the component's `value` changes.\n- **calciteInputTimeZoneClose** - Fires after the component is closed and animation is complete.\n- **calciteInputTimeZoneOpen** - Fires after the component is opened and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.", "attributes": [ { "name": "clearable", "description": "When `true`, an empty value (`null`) will be allowed as a `value`.\n\nWhen `false`, an offset or name value is enforced, and clearing the input or blurring will restore the last valid `value`.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "form", "description": "The `id` of the form that will be associated with the component.\n\nWhen not set, the component will be associated with its ancestor form element, if any.", "values": [] }, { "name": "max-items", "description": "Specifies the component's maximum number of options to display before displaying a scrollbar.", "values": [] }, { "name": "mode", "description": "This specifies the type of `value` and the associated options presented to the user:\n\nUsing `\"offset\"` will provide options that show timezone offsets.\n\nUsing `\"name\"` will provide options that show the IANA time zone names.", "values": [ { "name": "name" }, { "name": "offset" }, { "name": "region" } ] }, { "name": "name", "description": "Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.", "values": [] }, { "name": "offset-style", "description": "Specifies how the offset will be displayed, where\n\n`\"user\"` uses `UTC` or `GMT` depending on the user's locale,\n`\"gmt\"` always uses `GMT`, and\n`\"utc\"` always uses `UTC`.\n\nThis only applies to the `offset` mode.", "values": [ { "name": "gmt" }, { "name": "user" }, { "name": "utc" } ] }, { "name": "open", "description": "When `true`, displays and positions the component.", "values": [] }, { "name": "overlay-positioning", "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.", "values": [ { "name": "absolute" }, { "name": "fixed" } ] }, { "name": "read-only", "description": "When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.", "values": [] }, { "name": "reference-date", "description": "This `date` will be used as a reference to Daylight Savings Time when creating time zone item groups.\n\nIt can be either a Date instance or a string in ISO format (`\"YYYY-MM-DD\"`, `\"YYYY-MM-DDTHH:MM:SS.SSSZ\"`).", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "status", "description": "Specifies the status of the input field, which determines message and icons.", "values": [ { "name": "idle" }, { "name": "invalid" }, { "name": "valid" } ] }, { "name": "validation-icon", "description": "Specifies the validation icon to display under the component.", "values": [] }, { "name": "validation-message", "description": "Specifies the validation message to display under the component.", "values": [] }, { "name": "value", "description": "The component's value, where the value is the time zone offset or the difference, in minutes, between the selected time zone and UTC.\n\nIf no value is provided, the user's time zone offset will be selected by default.", "values": [] } ], "references": [] }, { "name": "calcite-label", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding text and a component that can be labeled.\n\n### CSS Properties\n- **--calcite-label-margin-bottom** - Specifies the component's bottom spacing. \n- **--calcite-label-text-color** - Specifies the component's text color. ", "attributes": [ { "name": "alignment", "description": "Specifies the text alignment of the component.", "values": [ { "name": "center" }, { "name": "end" }, { "name": "start" } ] }, { "name": "for", "description": "Specifies the `id` of the component the label is bound to. Use when the component the label is bound to does not reside within the component.", "values": [] }, { "name": "layout", "description": "Defines the layout of the label in relation to the component. Use `\"inline\"` positions to wrap the label and component on the same line.", "values": [ { "name": "default" }, { "name": "inline" }, { "name": "inline-space-between" } ] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] } ], "references": [] }, { "name": "calcite-link", "description": "Any attributes placed on component will propagate to the rendered child\n\nPassing a 'href' will render an anchor link, instead of a button.\n\nIt is the consumers responsibility to add aria information, rel, target, for links, and any link attributes for form submission\n--\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding text.\n\n### CSS Properties\n- **--calcite-link-text-color** - Specifies the component's text color. ", "attributes": [ { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "download", "description": "Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:\nWithout a value, the browser will suggest a filename/extension.", "values": [] }, { "name": "href", "description": "Specifies the URL of the linked resource, which can be set as an absolute or relative path.", "values": [] }, { "name": "icon-end", "description": "Specifies an icon to display at the end of the component.", "values": [] }, { "name": "icon-flip-rtl", "description": "Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [ { "name": "both" }, { "name": "end" }, { "name": "start" } ] }, { "name": "icon-start", "description": "Specifies an icon to display at the start of the component.", "values": [] }, { "name": "rel", "description": "Specifies the relationship to the linked document defined in `href`.", "values": [] }, { "name": "target", "description": "Specifies the frame or window to open the linked document.", "values": [] } ], "references": [] }, { "name": "calcite-list", "description": "A general purpose list that enables users to construct list items that conform to Calcite styling.\n--\n\n### Events\n- **calciteListChange** - Fires when the component's selected items have changed.\n- **calciteListDragEnd** - Fires when the component's dragging has ended.\n- **calciteListDragStart** - Fires when the component's dragging has started.\n- **calciteListFilter** - Fires when the component's filter has changed.\n- **calciteListMoveHalt** - Fires when a user attempts to move an element using the sort menu and 'canPut' or 'canPull' returns falsy.\n- **calciteListOrderChange** - Fires when the component's item order changes.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.\n- **filter-actions-start** - A slot for adding actionable `calcite-action` elements before the filter component.\n- **filter-actions-end** - A slot for adding actionable `calcite-action` elements after the filter component.\n- **filter-no-results** - When `filterEnabled` is `true`, a slot for adding content to display when no results are found.\n\n### CSS Properties\n- **--calcite-list-background-color** - Specifies the component's background color. ", "attributes": [ { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "display-mode", "description": "Specifies the nesting behavior of `calcite-list-item`s, where\n\n`\"flat\"` displays `calcite-list-item`s in a uniform list, and\n\n`\"nested\"` displays `calcite-list-item`s under their parent element.\n\n The parent component's behavior should follow throughout its child elements.", "values": [ { "name": "flat" }, { "name": "nested" } ] }, { "name": "drag-enabled", "description": "When `true`, `calcite-list-item`s are sortable via a draggable button.", "values": [] }, { "name": "filter-enabled", "description": "When `true`, an input appears at the top of the component that can be used by end users to filter `calcite-list-item`s.", "values": [] }, { "name": "filter-label", "description": "Specifies an accessible name for the filter input field.", "values": [] }, { "name": "filter-placeholder", "description": "Placeholder text for the component's filter input field.", "values": [] }, { "name": "filter-text", "description": "Text for the component's filter input field.", "values": [] }, { "name": "group", "description": "The list's group identifier.\n\nTo drag elements from one list into another, both lists must have the same group value.", "values": [] }, { "name": "interaction-mode", "description": "Specifies the interaction mode of the component.\n\n`\"interactive\"` allows interaction styling and pointer changes on hover\n\n`\"static\"` does not allow interaction styling and pointer changes on hover\n\nThe `\"static\"` value should only be used when `selectionMode` is `\"none\"`.", "values": [ { "name": "interactive" }, { "name": "static" } ] }, { "name": "label", "description": "Specifies an accessible name for the component.\n\nWhen `dragEnabled` is `true` and multiple list sorting is enabled with `group`, specifies the component's name for dragging between lists.", "values": [] }, { "name": "loading", "description": "When `true`, a busy indicator is displayed.", "values": [] }, { "name": "numbering-system", "description": "Specifies the Unicode numeral system used by the component for localization.", "values": [ { "name": "arab" }, { "name": "arabext" }, { "name": "latn" } ] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "selection-appearance", "description": "Specifies the selection appearance - `\"icon\"` (displays a checkmark or dot) or `\"border\"` (displays a border).", "values": [ { "name": "border" }, { "name": "icon" } ] }, { "name": "selection-mode", "description": "Specifies the selection mode of the component, where:\n\n`\"multiple\"` allows any number of selections,\n\n`\"single\"` allows only one selection,\n\n`\"single-persist\"` allows one selection and prevents de-selection, and\n\n`\"none\"` does not allow any selections.", "values": [ { "name": "multiple" }, { "name": "none" }, { "name": "single" }, { "name": "single-persist" } ] } ], "references": [] }, { "name": "calcite-list-item", "description": "### Events\n- **calciteListItemClose** - Fires when the close button is clicked.\n- **calciteListItemSelect** - Fires when the component is selected.\n- **calciteListItemSortHandleBeforeClose** - Fires when the sort handle is requested to be closed and before the closing transition begins.\n- **calciteListItemSortHandleBeforeOpen** - Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteListItemSortHandleClose** - Fires when the sort handle is closed and animation is complete.\n- **calciteListItemSortHandleOpen** - Fires when the sort handle is open and animation is complete.\n- **calciteListItemToggle** - Fires when the open button is clicked.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-list`, `calcite-list-item` and `calcite-list-item-group` elements.\n- **actions-start** - A slot for adding actionable `calcite-action` elements before the content of the component.\n- **content-start** - A slot for adding non-actionable elements before the label and description of the component.\n- **content** - A slot for adding non-actionable, centered content in place of the `label` and `description` of the component.\n- **content-end** - A slot for adding non-actionable elements after the label and description of the component.\n- **actions-end** - A slot for adding actionable `calcite-action` elements after the content of the component.\n- **content-bottom** - A slot for adding content below the component's `label` and `description`.\n\n### CSS Properties\n- **--calcite-list-background-color-hover** - Specifies the component's background color when hovered. \n- **--calcite-list-background-color-press** - Specifies the component's background color when pressed. \n- **--calcite-list-background-color** - Specifies the component's background color. \n- **--calcite-list-border-color** - Specifies the component's border color. \n- **--calcite-list-content-text-color** - Specifies the content color. \n- **--calcite-list-description-text-color** - Specifies the `description` color. \n- **--calcite-list-icon-color** - Specifies the component's icon color. \n- **--calcite-list-label-text-color** - Specifies the `label` color. \n- **--calcite-list-selection-border-color** - Specifies the component's selection border color. ", "attributes": [ { "name": "closable", "description": "When `true`, a close button is added to the component.", "values": [] }, { "name": "closed", "description": "When `true`, hides the component.", "values": [] }, { "name": "description", "description": "A description for the component. Displays below the label text.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "drag-disabled", "description": "When `true`, the item is not draggable.", "values": [] }, { "name": "expanded", "description": "When `true`, the item is expanded to show child components.", "values": [] }, { "name": "icon-end", "description": "Specifies an icon to display at the end of the component.", "values": [] }, { "name": "icon-flip-rtl", "description": "Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [ { "name": "both" }, { "name": "end" }, { "name": "start" } ] }, { "name": "icon-start", "description": "Specifies an icon to display at the start of the component.", "values": [] }, { "name": "label", "description": "The label text of the component. Displays above the description text.", "values": [] }, { "name": "open", "description": "**Deprecated**: Use `expanded` prop instead.. When `true`, the item is open to show child components.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "selected", "description": "When `true` and the parent `calcite-list`'s `selectionMode` is `\"single\"`, `\"single-persist\"', or `\"multiple\"`, the component is selected.", "values": [] }, { "name": "sort-handle-open", "description": "When `true`, displays and positions the sort handle.", "values": [] }, { "name": "unavailable", "description": "When `true`, the component's content appears inactive.", "values": [] }, { "name": "value", "description": "The component's value.", "values": [] } ], "references": [] }, { "name": "calcite-list-item-group", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.\n\n### CSS Properties\n- **--calcite-list-background-color** - Specifies the component's background color. \n- **--calcite-list-color** - Specifies the component's color. ", "attributes": [ { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "heading", "description": "The header text for all nested `calcite-list-item` rows.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] } ], "references": [] }, { "name": "calcite-loader", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### CSS Properties\n- **--calcite-loader-font-size** - When `type` is not `\"indeterminate\"` or `inline`, specifies the font size of the loading percentage. \n- **--calcite-loader-size** - When `inline` is not set, specifies the component's width and height. \n- **--calcite-loader-size-inline** - [Deprecated] Use `--calcite-loader-size`. Specifies the width and height of the component when set to inline. \n- **--calcite-loader-spacing** - Specifies the the component's padding. \n- **--calcite-loader-progress-color-inline** - When `inline`, specifies the component's progress ring color. \n- **--calcite-loader-text-spacing** - When not `inline`, specifies the component's `text` margin. \n- **--calcite-loader-text-weight** - When not `inline` and `text` is provided, specifies the component's `text` font weight. \n- **--calcite-loader-text-color** - When not `inline` and `text` is provided, specifies the component's `text` color. \n- **--calcite-loader-progress-color** - When not `inline`, specifies the component's progress ring color. \n- **--calcite-loader-track-color** - Specifies the component's track color. ", "attributes": [ { "name": "inline", "description": "When `true`, the component displays smaller.", "values": [] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "text", "description": "When not `inline`, displays text under the component's indicator.", "values": [] }, { "name": "type", "description": "Specifies the component type.\n\nUse `\"indeterminate\"` if finding actual progress value is impossible. Otherwise, use `\"determinate\"` to have the value indicate the progress or `\"determinate-value\"` to have the value label displayed along the progress.", "values": [ { "name": "determinate" }, { "name": "determinate-value" }, { "name": "indeterminate" } ] }, { "name": "value", "description": "The component's value. Valid only for `\"determinate\"` indicators. Percent complete of 100.", "values": [] } ], "references": [] }, { "name": "calcite-menu", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component's first focusable element.", "attributes": [ { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "layout", "description": "Specifies the layout of the component.", "values": [ { "name": "horizontal" }, { "name": "vertical" } ] } ], "references": [] }, { "name": "calcite-menu-item", "description": "### Events\n- **calciteMenuItemSelect** - Emits when the component is selected.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- **submenu-item** - A slot for adding `calcite-menu-item`s in a submenu.\n\n### CSS Properties\n- **--calcite-menu-item-accent-color** - Specifies the border color of the component when `active`. \n- **--calcite-menu-background-color** - Specifies the background color of the component. \n- **--calcite-menu-item-sub-menu-border-color** - Specifies the border color of sub-menu. \n- **--calcite-menu-item-sub-menu-corner-radius** - Specifies the border radius of sub-menu. \n- **--calcite-menu-text-color** - Specifies the text color of the component. ", "attributes": [ { "name": "active", "description": "When `true`, the component is highlighted.", "values": [] }, { "name": "breadcrumb", "description": "When `true`, the component displays a breadcrumb trail for use as a navigational aid.", "values": [] }, { "name": "href", "description": "Specifies the URL destination of the component, which can be set as an absolute or relative path.", "values": [] }, { "name": "icon-end", "description": "Specifies an icon to display at the end of the component.", "values": [] }, { "name": "icon-flip-rtl", "description": "Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [ { "name": "both" }, { "name": "end" }, { "name": "start" } ] }, { "name": "icon-start", "description": "Specifies an icon to display at the start of the component.", "values": [] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "open", "description": "When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu.", "values": [] }, { "name": "rel", "description": "Defines the relationship between the `href` value and the current document.", "values": [] }, { "name": "target", "description": "Specifies where to open the linked document defined in the `href` property.", "values": [] }, { "name": "text", "description": "Specifies the text to display.", "values": [] } ], "references": [] }, { "name": "calcite-meter", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### CSS Properties\n- **--calcite-meter-background-color** - Specifies the background color of the component. \n- **--calcite-meter-border-color** - Specifies the border color of the component and displayed step lines. \n- **--calcite-meter-shadow** - Specifies the box shadow of the component. \n- **--calcite-meter-corner-radius** - Specifies the corner radius of the component. \n- **--calcite-meter-fill-color** - Specifies the color of the component's fill. \n- **--calcite-meter-range-text-color** - Specifies the color of the component's range labels. \n- **--calcite-meter-value-text-color** - Specifies the color of the component's value label. ", "attributes": [ { "name": "appearance", "description": "Specifies the appearance style of the component.", "values": [ { "name": "outline" }, { "name": "outline-fill" }, { "name": "solid" } ] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "fill-type", "description": "Specifies the component's display, where `\"single\"` displays a single color and `\"range\"` displays a range of colors based on provided `low`, `high`, `min` or `max` values.", "values": [ { "name": "range" }, { "name": "single" } ] }, { "name": "form", "description": "The `id` of the form that will be associated with the component.\n\nWhen not set, the component will be associated with its ancestor form element, if any.", "values": [] }, { "name": "group-separator", "description": "When `true`, number values are displayed with a group separator corresponding to the language and country format.", "values": [] }, { "name": "high", "description": "Specifies a high value. When `fillType` is `\"range\"`, displays a different color when above the specified threshold.", "values": [] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "low", "description": "Specifies a low value. When `fillType` is `\"range\"`, displays a different color when above the specified threshold.", "values": [] }, { "name": "max", "description": "Specifies the highest allowed value of the component.", "values": [] }, { "name": "min", "description": "Specifies the lowest allowed value of the component.", "values": [] }, { "name": "name", "description": "Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.", "values": [] }, { "name": "numbering-system", "description": "Specifies the Unicode numeral system used by the component for localization.", "values": [ { "name": "arab" }, { "name": "arabext" }, { "name": "latn" } ] }, { "name": "range-label-type", "description": "When `rangeLabels` is `true`, specifies the format of displayed labels.", "values": [ { "name": "percent" }, { "name": "units" } ] }, { "name": "range-labels", "description": "When `true`, displays the values of `high`, `low`, `min`, and `max`.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "unit-label", "description": "When `rangeLabelType` is `\"units\"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or `min` values.", "values": [] }, { "name": "value", "description": "Specifies the current value of the component.", "values": [] }, { "name": "value-label", "description": "When `true`, displays the current value.", "values": [] }, { "name": "value-label-type", "description": "When `valueLabel` is `true`, specifies the format of displayed label.", "values": [ { "name": "percent" }, { "name": "units" } ] } ], "references": [] }, { "name": "calcite-modal", "description": "**Deprecated**: Use the `calcite-dialog` component instead..\n--\n\n### Events\n- **calciteModalBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteModalBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteModalClose** - Fires when the component is closed and animation is complete.\n- **calciteModalOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `scrollContent(top?: number, left?: number): Promise` - Sets the scroll top of the component's content.\n- `setFocus(): Promise` - Sets focus on the component's \"close\" button (the first focusable item).\n- `updateFocusTrapElements(extraContainers?: FocusTrapOptions[\"extraContainers\"]): Promise` - Updates the element(s) that are included in the focus-trap of the component.\n\n### Slots\n- **header** - A slot for adding header text.\n- **content** - A slot for adding the component's content.\n- **content-top** - A slot for adding content to the component's sticky header, where content remains at the top of the component when scrolling up and down.\n- **content-bottom** - A slot for adding content to the component's sticky footer, where content remains at the bottom of the component when scrolling up and down.\n- **primary** - A slot for adding a primary button.\n- **secondary** - A slot for adding a secondary button.\n- **back** - A slot for adding a back button.\n\n### CSS Properties\n- **--calcite-modal-content-background** - Specifies the background color of content placed in the component's `\"content\"` slot. \n- **--calcite-modal-content-padding** - Specifies the padding of the component's `\"content\"` slot. \n- **--calcite-modal-scrim-background** - Specifies the background color of the component's scrim. \n- **--calcite-modal-width** - 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. \n- **--calcite-modal-height** - 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. ", "attributes": [ { "name": "close-button-disabled", "description": "When `true`, disables the component's close button.", "values": [] }, { "name": "docked", "description": "When `true`, prevents the component from expanding to the entire screen on mobile devices.", "values": [] }, { "name": "escape-disabled", "description": "When `true`, disables the default close on escape behavior.", "values": [] }, { "name": "focus-trap-disabled", "description": "When `true`, prevents focus trapping.", "values": [] }, { "name": "fullscreen", "description": "Sets the component to always be fullscreen. Overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`.", "values": [] }, { "name": "kind", "description": "Specifies the kind of the component, which will apply to top border.", "values": [ { "name": "brand" }, { "name": "danger" }, { "name": "info" }, { "name": "success" }, { "name": "warning" } ] }, { "name": "open", "description": "When `true`, displays and positions the component.", "values": [] }, { "name": "outside-close-disabled", "description": "When `true`, disables the closing of the component when clicked outside.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "width-scale", "description": "Specifies the width of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] } ], "references": [] }, { "name": "calcite-navigation", "description": "### Events\n- **calciteNavigationActionSelect** - When `navigationAction` is `true`, emits when the displayed action selection changes.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - When `navigationAction` is `true`, sets focus on the component's action element.\n\n### Slots\n- **logo** - A slot for adding a `calcite-logo` component to the primary navigation level.\n- **user** - A slot for adding a `calcite-user` component to the primary navigation level.\n- **progress** - A slot for adding a `calcite-progress` component to the primary navigation level.\n- **navigation-action** - A slot for adding a `calcite-action` component to the primary navigation level.\n- **content-start** - A slot for adding a `calcite-menu`, `calcite-action`, or other interactive elements in the start position of any navigation level.\n- **content-center** - A slot for adding a `calcite-menu`, `calcite-action`, or other interactive elements in the center position of the primary navigation level.\n- **content-end** - A slot for adding a `calcite-menu`, `calcite-action`, or other interactive elements in the end position of any navigation level.\n- **navigation-secondary** - A slot for adding a `calcite-navigation` component in the secondary navigation level. Components rendered here will not display `calcite-navigation-logo` or `calcite-navigation-user` components.\n- **navigation-tertiary** - A slot for adding a `calcite-navigation` component in the tertiary navigation level. Components rendered here will not display `calcite-navigation-logo` or `calcite-navigation-user` components.\n\n### CSS Properties\n- **--calcite-navigation-width** - Specifies the width of the component's content area. \n- **--calcite-navigation-background** - [Deprecated] Use `--calcite-navigation-background-color`. Specifies the background color of the component. \n- **--calcite-navigation-background-color** - Specifies the component's background color. \n- **--calcite-navigation-border-color** - Specifies the component's border color. ", "attributes": [ { "name": "label", "description": "When `navigationAction` is `true`, specifies the label of the `calcite-action`.", "values": [] }, { "name": "navigation-action", "description": "When `true`, displays a `calcite-action` and emits a `calciteNavActionSelect` event on selection change.", "values": [] } ], "references": [] }, { "name": "calcite-navigation-logo", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### CSS Properties\n- **--calcite-navigation-accent-color** - Specifies the component's border color when `active`. \n- **--calcite-navigation-background-color** - Specifies the component's background color. \n- **--calcite-navigation-logo-heading-text-color** - Specifies the component's default color for heading text. \n- **--calcite-navigation-logo-text-color** - Specifies the component's default color for icon and description text. ", "attributes": [ { "name": "active", "description": "When `true`, the component is highlighted.", "values": [] }, { "name": "description", "description": "A description for the component, which displays below the `heading`.", "values": [] }, { "name": "heading", "description": "Specifies heading text for the component, such as a product or organization name.", "values": [] }, { "name": "heading-level", "description": "Specifies the heading level of the component's heading for proper document structure, without affecting visual styling.", "values": [ { "name": "1" }, { "name": "2" }, { "name": "3" }, { "name": "4" }, { "name": "5" }, { "name": "6" } ] }, { "name": "href", "description": "Specifies the URL destination of the component, which can be set as an absolute or relative path.", "values": [] }, { "name": "icon", "description": "Specifies an icon to display.", "values": [] }, { "name": "icon-flip-rtl", "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [] }, { "name": "label", "description": "Describes the appearance or function of the `thumbnail`. If no label is provided, context will not be provided to assistive technologies.", "values": [] }, { "name": "rel", "description": "Defines the relationship between the `href` value and the current document.", "values": [] }, { "name": "target", "description": "Specifies where to open the linked document defined in the `href` property.", "values": [] }, { "name": "thumbnail", "description": "Specifies the `src` to an image.", "values": [] } ], "references": [] }, { "name": "calcite-navigation-user", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### CSS Properties\n- **--calcite-navigation-accent-color** - Specifies the components's border color when `active`. \n- **--calcite-navigation-user-avatar-corner-radius** - Specifies the component's avatar corner radius. \n- **--calcite-navigation-user-avatar-color** - Specifies the component's avatar icon color. \n- **--calcite-navigation-background-color** - Specifies the component's background color. \n- **--calcite-navigation-user-full-name-text-color** - Specifies the component's `fullName` text color. \n- **--calcite-navigation-user-name-text-color** - Specifies the component's `username` text color. ", "attributes": [ { "name": "active", "description": "When `true`, the component is highlighted.", "values": [] }, { "name": "full-name", "description": "Specifies the full name of the user.", "values": [] }, { "name": "label", "description": "Describes the appearance of the avatar. If no label is provided, context will not be provided to assistive technologies.", "values": [] }, { "name": "text-disabled", "description": "When `true`, hides the `fullName` and `username` contents.", "values": [] }, { "name": "thumbnail", "description": "Specifies the `src` to an image (remember to add a token if the user is private).", "values": [] }, { "name": "user-id", "description": "Specifies the unique id of the user.", "values": [] }, { "name": "username", "description": "Specifies the username of the user.", "values": [] } ], "references": [] }, { "name": "calcite-notice", "description": "Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because\nnotices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy.\nThey are optionally closable - useful for keeping track of whether or not a user has closed the notice. You can also choose not\nto display a notice on page load and set the \"active\" attribute as needed to contextually provide inline messaging to users.\n--\n\n### Events\n- **calciteNoticeBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteNoticeBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteNoticeClose** - Fires when the component is closed and animation is complete.\n- **calciteNoticeOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component's first focusable element.\n\n### Slots\n- **title** - A slot for adding the title.\n- **message** - A slot for adding the message.\n- **link** - A slot for adding a `calcite-action` to take, such as: \"undo\", \"try again\", \"link to page\", etc.\n- **actions-end** - A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or less actions.\n\n### CSS Properties\n- **--calcite-notice-background-color** - Specifies the component's background color. \n- **--calcite-notice-close-background-color-focus** - Specifies the component's background color when focused. \n- **--calcite-notice-close-background-color-press** - Specifies the component's background color when active. \n- **--calcite-notice-close-icon-color-hover** - Specifies the background color of the component's close button when hovered. \n- **--calcite-notice-close-icon-color** - Specifies the text color of the component's close button. \n- **--calcite-notice-title-text-color** - Specifies the component's title text color. \n- **--calcite-notice-content-text-color** - Specifies the component's content text color. \n- **--calcite-notice-width** - [Deprecated] Specifies the component's width. \n- **--calcite-notice-close-text-color-hover** - [Deprecated] Use `--calcite-notice-close-icon-color-hover`. Specifies the background color of the component's close button when hovered. \n- **--calcite-notice-close-text-color** - [Deprecated] Use `--calcite-notice-close-icon-color`. Specifies the text color of the component's close button. ", "attributes": [ { "name": "closable", "description": "When `true`, a close button is added to the component.", "values": [] }, { "name": "icon", "description": "When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.", "values": [] }, { "name": "icon-flip-rtl", "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [] }, { "name": "kind", "description": "Specifies the kind of the component, which will apply to top border and icon.", "values": [ { "name": "brand" }, { "name": "danger" }, { "name": "info" }, { "name": "success" }, { "name": "warning" } ] }, { "name": "open", "description": "When `true`, the component is visible.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "width", "description": "Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.", "values": [ { "name": "auto" }, { "name": "full" }, { "name": "half" } ] } ], "references": [] }, { "name": "calcite-option", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [ { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "selected", "description": "When `true`, the component is selected.", "values": [] }, { "name": "value", "description": "The component's value.", "values": [] } ], "references": [] }, { "name": "calcite-option-group", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding `calcite-option`s.", "attributes": [ { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "label", "description": "Accessible name for the component.", "values": [] } ], "references": [] }, { "name": "calcite-pagination", "description": "### Events\n- **calcitePaginationChange** - Emits when the selected page changes.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `goTo(page: number | \"start\" | \"end\"): Promise` - Set a specified page as active.\n- `nextPage(): Promise` - Go to the next page of results.\n- `previousPage(): Promise` - Go to the previous page of results.\n- `setFocus(): Promise` - Sets focus on the component's first focusable element.\n\n### CSS Properties\n- **--calcite-pagination-color** - Specifies the component's item color. \n- **--calcite-pagination-color-hover** - Specifies the component's item color when hovered or selected. \n- **--calcite-pagination-color-border-hover** - Specifies the component's item bottom border color when hovered. \n- **--calcite-pagination-color-border-active** - Specifies the component's item bottom border color when selected. \n- **--calcite-pagination-background-color** - Specifies the component's item background color when active. \n- **--calcite-pagination-icon-color-background-hover** - Specifies the component's chevron item background color when hovered. ", "attributes": [ { "name": "group-separator", "description": "When `true`, number values are displayed with a group separator corresponding to the language and country format.", "values": [] }, { "name": "numbering-system", "description": "Specifies the Unicode numeral system used by the component for localization.", "values": [ { "name": "arab" }, { "name": "arabext" }, { "name": "latn" } ] }, { "name": "page-size", "description": "Specifies the number of items per page.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "start-item", "description": "Specifies the starting item number.", "values": [] }, { "name": "total-items", "description": "Specifies the total number of items.", "values": [] } ], "references": [] }, { "name": "calcite-panel", "description": "### Events\n- **calcitePanelClose** - Fires when the close button is clicked.\n- **calcitePanelScroll** - Fires when the content is scrolled.\n- **calcitePanelToggle** - Fires when the collapse button is clicked.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `scrollContentTo(options?: ScrollToOptions): Promise` - Scrolls the component's content to a specified set of coordinates.\n- `setFocus(): Promise` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the component.\n- **alerts** - A slot for adding `calcite-alert`s to the component.\n- **content-bottom** - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)\n- **content-top** - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).\n- **header-actions-start** - A slot for adding actions or content to the start side of the header.\n- **header-actions-end** - A slot for adding actions or content to the end side of the header.\n- **header-content** - A slot for adding custom content to the header.\n- **header-menu-actions** - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.\n- **fab** - A slot for adding a `calcite-fab` (floating action button) to perform an action.\n- **footer** - A slot for adding custom content to the component's footer. Should not be used with the `\"footer-start\"` or `\"footer-end\"` slots.\n- **footer-actions** - [Deprecated] Use the `footer-start` and `footer-end` slots instead. A slot for adding `calcite-button`s to the component's footer.\n- **footer-end** - A slot for adding a trailing footer custom content. Should not be used with the `\"footer\"` slot.\n- **footer-start** - A slot for adding a leading footer custom content. Should not be used with the `\"footer\"` slot.\n\n### CSS Properties\n- **--calcite-panel-corner-radius** - Specifies the component's corner radius. \n- **--calcite-panel-heading-text-color** - Specifies the text color of the component's `heading`. \n- **--calcite-panel-icon-color** - Specifies the color of the component's icon. \n- **--calcite-panel-description-text-color** - Specifies the text color of the component's `description`. \n- **--calcite-panel-border-color** - Specifies the component's border color. \n- **--calcite-panel-background-color** - Specifies the component's background color. \n- **--calcite-panel-header-background-color** - Specifies the background color of the component's header. \n- **--calcite-panel-header-action-background-color** - Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions`. \n- **--calcite-panel-header-action-background-color-hover** - Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when hovered. \n- **--calcite-panel-header-action-background-color-press** - Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed. \n- **--calcite-panel-header-action-text-color** - Specifies the text color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions`. \n- **--calcite-panel-header-action-text-color-press** - Specifies the text color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed or hovered. \n- **--calcite-panel-footer-background-color** - Specifies the background color of the component's footer. \n- **--calcite-panel-space** - Specifies the padding of the component's `\"unnamed (default)\"` slot. \n- **--calcite-panel-header-content-space** - Specifies the padding of the `\"header-content\"` slot. \n- **--calcite-panel-footer-space** - Specifies the padding of the component's footer. \n- **--calcite-popover-border-color** - 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. \n- **--calcite-panel-content-space** - [Deprecated] Use `--calcite-panel-space` instead. Specifies the padding of the component's content. \n- **--calcite-panel-footer-padding** - [Deprecated] Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer. \n- **--calcite-panel-header-border-block-end** - [Deprecated] Use `--calcite-panel-border-color` instead. Specifies the component header's block end border. ", "attributes": [ { "name": "closable", "description": "When `true`, displays a close button in the trailing side of the header.", "values": [] }, { "name": "closed", "description": "When `true`, the component will be hidden.", "values": [] }, { "name": "collapsed", "description": "When `true`, hides the component's content area.", "values": [] }, { "name": "collapsible", "description": "When `true`, the component is collapsible.", "values": [] }, { "name": "description", "description": "A description for the component.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "heading", "description": "The component header text.", "values": [] }, { "name": "heading-level", "description": "Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.", "values": [ { "name": "1" }, { "name": "2" }, { "name": "3" }, { "name": "4" }, { "name": "5" }, { "name": "6" } ] }, { "name": "icon", "description": "Specifies an icon to display.", "values": [] }, { "name": "icon-flip-rtl", "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [] }, { "name": "loading", "description": "When `true`, a busy indicator is displayed.", "values": [] }, { "name": "menu-open", "description": "When `true`, the action menu items in the `header-menu-actions` slot are open.", "values": [] }, { "name": "menu-placement", "description": "Determines where the action menu will be positioned.", "values": [ { "name": "auto" }, { "name": "auto-end" }, { "name": "auto-start" }, { "name": "bottom" }, { "name": "bottom-end" }, { "name": "bottom-start" }, { "name": "leading" }, { "name": "leading-end" }, { "name": "leading-start" }, { "name": "left" }, { "name": "left-end" }, { "name": "left-start" }, { "name": "right" }, { "name": "right-end" }, { "name": "right-start" }, { "name": "top" }, { "name": "top-end" }, { "name": "top-start" }, { "name": "trailing" }, { "name": "trailing-end" }, { "name": "trailing-start" } ] }, { "name": "overlay-positioning", "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.", "values": [ { "name": "absolute" }, { "name": "fixed" } ] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] } ], "references": [] }, { "name": "calcite-popover", "description": "### Events\n- **calcitePopoverBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calcitePopoverBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calcitePopoverClose** - Fires when the component is closed and animation is complete.\n- **calcitePopoverOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise` - Updates the position of the component.\n- `setFocus(): Promise` - Sets focus on the component's first focusable element.\n- `updateFocusTrapElements(): Promise` - Updates the element(s) that are used within the focus-trap of the component.\n\n### Slots\n- _default_ - A slot for adding custom content.\n\n### CSS Properties\n- **--calcite-popover-background-color** - Specifies the component's background color. \n- **--calcite-popover-border-color** - Specifies the component's border color. \n- **--calcite-popover-corner-radius** - Specifies the component's corner radius. \n- **--calcite-popover-text-color** - Specifies the component's text color. \n- **--calcite-popover-z-index** - Specifies the component's z-index value. ", "attributes": [ { "name": "auto-close", "description": "When `true`, clicking outside of the component automatically closes open `calcite-popover`s.", "values": [] }, { "name": "closable", "description": "When `true`, displays a close button within the component.", "values": [] }, { "name": "flip-disabled", "description": "When `true`, prevents flipping the component's placement when overlapping its `referenceElement`.", "values": [] }, { "name": "focus-trap-disabled", "description": "When `true`, prevents focus trapping.", "values": [] }, { "name": "heading", "description": "The component header text.", "values": [] }, { "name": "heading-level", "description": "Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.", "values": [ { "name": "1" }, { "name": "2" }, { "name": "3" }, { "name": "4" }, { "name": "5" }, { "name": "6" } ] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "offset-distance", "description": "Offsets the position of the popover away from the `referenceElement`.", "values": [] }, { "name": "offset-skidding", "description": "Offsets the position of the component along the `referenceElement`.", "values": [] }, { "name": "open", "description": "When `true`, displays and positions the component.", "values": [] }, { "name": "overlay-positioning", "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.", "values": [ { "name": "absolute" }, { "name": "fixed" } ] }, { "name": "placement", "description": "Determines where the component will be positioned relative to the `referenceElement`.", "values": [ { "name": "auto" }, { "name": "auto-end" }, { "name": "auto-start" }, { "name": "bottom" }, { "name": "bottom-end" }, { "name": "bottom-start" }, { "name": "leading" }, { "name": "leading-end" }, { "name": "leading-start" }, { "name": "left" }, { "name": "left-end" }, { "name": "left-start" }, { "name": "right" }, { "name": "right-end" }, { "name": "right-start" }, { "name": "top" }, { "name": "top-end" }, { "name": "top-start" }, { "name": "trailing" }, { "name": "trailing-end" }, { "name": "trailing-start" } ] }, { "name": "pointer-disabled", "description": "When `true`, removes the caret pointer.", "values": [] }, { "name": "reference-element", "description": "The `referenceElement` used to position the component according to its `placement` value.\n\nSetting to an `HTMLElement` is preferred so the component does not need to query the DOM.\n\nHowever, a string `id` of the reference element can also be used.\n\nThe component should not be placed within its own `referenceElement` to avoid unintended behavior.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "trigger-disabled", "description": "When `true`, disables automatically toggling the component when its `referenceElement` has been triggered.\n\nThis property can be set to `true` to manage when the component is open.", "values": [] } ], "references": [] }, { "name": "calcite-progress", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### CSS Properties\n- **--calcite-progress-background-color** - Specifies the component's background color. \n- **--calcite-progress-fill-color** - Specifies the component's fill color. \n- **--calcite-progress-text-color** - Specifies the component's text color. ", "attributes": [ { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "reversed", "description": "When `true` and for `\"indeterminate\"` progress bars, reverses the animation direction.", "values": [] }, { "name": "text", "description": "Text that displays under the component's indicator.", "values": [] }, { "name": "type", "description": "Specifies the component type.\n\nUse `\"indeterminate\"` if finding actual progress value is impossible.", "values": [ { "name": "determinate" }, { "name": "indeterminate" } ] }, { "name": "value", "description": "When `type` is `\"determinate\"`, specifies the component's value with a range of 0 to 100.", "values": [] } ], "references": [] }, { "name": "calcite-radio-button", "description": "### Events\n- **calciteRadioButtonChange** - Fires only when the radio button is checked. This behavior is identical to the native HTML input element.\nSince this event does not fire when the radio button is unchecked, it's not recommended to attach a listener for this event\ndirectly on the element, but instead either attach it to a node that contains all of the radio buttons in the group\nor use the `calciteRadioButtonGroupChange` event if using this with `calcite-radio-button-group`.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### CSS Properties\n- **--calcite-radio-button-background-color** - Specifies the component's background color. \n- **--calcite-radio-button-border-color** - Specifies the component's border color. \n- **--calcite-radio-button-corner-radius** - Specifies the component's corner radius. \n- **--calcite-radio-button-size** - Specifies the component's size. \n- **--calcite-radio-size** - [Deprecated] Use `--calcite-radio-button-size`. Specifies the component's size. ", "attributes": [ { "name": "checked", "description": "When `true`, the component is checked.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "form", "description": "The `id` of the form that will be associated with the component.\n\nWhen not set, the component will be associated with its ancestor form element, if any.", "values": [] }, { "name": "name", "description": "Specifies the name of the component. Can be inherited from `calcite-radio-button-group`.\n\nRequired to pass the component's `value` on form submission.", "values": [] }, { "name": "required", "description": "When `true` and the component resides in a form,\nthe component must have a value selected from the `calcite-radio-button-group` in order for the form to submit.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component inherited from the `calcite-radio-button-group`.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "value", "description": "The component's value.", "values": [] } ], "references": [] }, { "name": "calcite-radio-button-group", "description": "### Events\n- **calciteRadioButtonGroupChange** - Fires when the component has changed.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the fist focusable `calcite-radio-button` element in the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-radio-button`s.\n\n### CSS Properties\n- **--calcite-radio-button-group-gap** - Specifies the space between slotted components in the component. \n- **--calcite-radio-button-input-message-spacing** - Specifies the margin spacing at the top of the input-message component. ", "attributes": [ { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "layout", "description": "Defines the layout of the component.", "values": [ { "name": "grid" }, { "name": "horizontal" }, { "name": "vertical" } ] }, { "name": "name", "description": "Specifies the name of the component on form submission. Must be unique to other component instances.", "values": [] }, { "name": "required", "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "status", "description": "Specifies the status of the validation message.", "values": [ { "name": "idle" }, { "name": "invalid" }, { "name": "valid" } ] }, { "name": "validation-icon", "description": "Specifies the validation icon to display under the component.", "values": [] }, { "name": "validation-message", "description": "Specifies the validation message to display under the component.", "values": [] } ], "references": [] }, { "name": "calcite-rating", "description": "### Events\n- **calciteRatingChange** - Fires when the component's value changes.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### CSS Properties\n- **--calcite-rating-spacing-unit** - [Deprecated] Use `--calcite-rating-spacing`. Specifies the amount of left and right margin spacing between each item. \n- **--calcite-rating-spacing** - Specifies the amount of left and right margin spacing between each item. \n- **--calcite-rating-color-hover** - Specifies the component's item color when hovered. \n- **--calcite-rating-color-press** - Specifies the component's item color when active. \n- **--calcite-rating-color** - Specifies the component's item color. \n- **--calcite-rating-average-color** - Specifies the component's item color when average is set. \n- **--calcite-rating-average-text-color** - Specifies the component's average text color. \n- **--calcite-rating-count-text-color** - Specifies the component's count text color. ", "attributes": [ { "name": "average", "description": "Specifies a cumulative average from previous ratings to display.", "values": [] }, { "name": "count", "description": "Specifies the number of previous ratings to display.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "form", "description": "The `id` of the form that will be associated with the component.\n\nWhen not set, the component will be associated with its ancestor form element, if any.", "values": [] }, { "name": "name", "description": "Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.", "values": [] }, { "name": "read-only", "description": "When `true`, the component's value can be read, but cannot be modified.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "show-chip", "description": "When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`.", "values": [] }, { "name": "status", "description": "Specifies the status of the input field, which determines message and icons.", "values": [ { "name": "idle" }, { "name": "invalid" }, { "name": "valid" } ] }, { "name": "validation-icon", "description": "Specifies the validation icon to display under the component.", "values": [] }, { "name": "validation-message", "description": "Specifies the validation message to display under the component.", "values": [] }, { "name": "value", "description": "The component's value.", "values": [] } ], "references": [] }, { "name": "calcite-scrim", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding custom content, primarily loading information.\n\n### CSS Properties\n- **--calcite-scrim-background** - Specifies the background color of the scrim. ", "attributes": [ { "name": "loading", "description": "When `true`, a busy indicator is displayed.", "values": [] } ], "references": [] }, { "name": "calcite-segmented-control", "description": "### Events\n- **calciteSegmentedControlChange** - Fires when the `calcite-segmented-control-item` selection changes.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-segmented-control-item`s.\n\n### CSS Properties\n- **--calcite-segmented-control-border-color** - Specifies the component's border color. ", "attributes": [ { "name": "appearance", "description": "Specifies the appearance style of the component.", "values": [ { "name": "outline" }, { "name": "outline-fill" }, { "name": "solid" } ] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "form", "description": "The `id` of the form that will be associated with the component.\n\nWhen not set, the component will be associated with its ancestor form element, if any.", "values": [] }, { "name": "layout", "description": "Defines the layout of the component.", "values": [ { "name": "horizontal" }, { "name": "vertical" } ] }, { "name": "name", "description": "Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.", "values": [] }, { "name": "required", "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "status", "description": "Specifies the status of the validation message.", "values": [ { "name": "idle" }, { "name": "invalid" }, { "name": "valid" } ] }, { "name": "validation-icon", "description": "Specifies the validation icon to display under the component.", "values": [] }, { "name": "validation-message", "description": "Specifies the validation message to display under the component.", "values": [] }, { "name": "value", "description": "The component's `selectedItem` value.", "values": [] }, { "name": "width", "description": "Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.", "values": [ { "name": "auto" }, { "name": "full" } ] } ], "references": [] }, { "name": "calcite-segmented-control-item", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### CSS Properties\n- **--calcite-segmented-control-color** - Specifies the component's color. \n- **--calcite-segmented-control-background-color** - Specifies the component's background color. \n- **--calcite-segmented-control-border-color** - Specifies the component's border color. \n- **--calcite-segmented-control-shadow** - Specifies the component's shadow. \n- **--calcite-segmented-control-icon-color** - Specifies the icons's color. ", "attributes": [ { "name": "checked", "description": "When `true`, the component is checked.", "values": [] }, { "name": "icon-end", "description": "Specifies an icon to display at the end of the component.", "values": [] }, { "name": "icon-flip-rtl", "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [] }, { "name": "icon-start", "description": "Specifies an icon to display at the start of the component.", "values": [] }, { "name": "value", "description": "The component's value.", "values": [] } ], "references": [] }, { "name": "calcite-select", "description": "### Events\n- **calciteSelectChange** - Fires when the `selectedOption` changes.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-option`s.\n\n### CSS Properties\n- **--calcite-select-font-size** - Specifies the font size of `calcite-option`s in the component. \n- **--calcite-select-text-color** - Specifies the text color of `calcite-option`s in the component. \n- **--calcite-select-border-color** - Specifies the component's border color. \n- **--calcite-select-icon-color** - Specifies the component's icon color. \n- **--calcite-select-icon-color-hover** - Specifies the component's icon color when hovered or active. ", "attributes": [ { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "form", "description": "The `id` of the form that will be associated with the component.\n\nWhen not set, the component will be associated with its ancestor form element, if any.", "values": [] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "name", "description": "Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.", "values": [] }, { "name": "required", "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "status", "description": "Specifies the status of the input field, which determines message and icons.", "values": [ { "name": "idle" }, { "name": "invalid" }, { "name": "valid" } ] }, { "name": "validation-icon", "description": "Specifies the validation icon to display under the component.", "values": [] }, { "name": "validation-message", "description": "Specifies the validation message to display under the component.", "values": [] }, { "name": "value", "description": "The component's `selectedOption` value.", "values": [] }, { "name": "width", "description": "Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.", "values": [ { "name": "auto" }, { "name": "full" }, { "name": "half" } ] } ], "references": [] }, { "name": "calcite-sheet", "description": "### Events\n- **calciteSheetBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteSheetBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteSheetClose** - Fires when the component is closed and animation is complete.\n- **calciteSheetOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component's \"close\" button - the first focusable item.\n- `updateFocusTrapElements(extraContainers?: FocusTrapOptions[\"extraContainers\"]): Promise` - Updates the element(s) that are included in the focus-trap of the component.\n\n### Slots\n- _default_ - A slot for adding custom content.\n\n### CSS Properties\n- **--calcite-sheet-background-color** - Specifies the background color of the sheet. \n- **--calcite-sheet-corner-radius** - Specifies the corner radius of the component. \n- **--calcite-sheet-shadow** - Specifies the shadow of the component. \n- **--calcite-sheet-text-color** - Specifies the text color of the component. \n- **--calcite-sheet-resize-background-color** - Specifies the background color of the resize handle. \n- **--calcite-sheet-resize-icon-color** - Specifies the text color of the resize handle. \n- **--calcite-sheet-scrim-background** - Specifies the background color of the sheet scrim. \n- **--calcite-sheet-width** - When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the width of the component. \n- **--calcite-sheet-max-width** - When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the maximum width of the component. \n- **--calcite-sheet-min-width** - When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the minimum width of the component. \n- **--calcite-sheet-height** - When `position` is `\"block-start\"` or `\"block-end\"`, specifies the height of the component. \n- **--calcite-sheet-max-height** - When `position` is `\"block-start\"` or `\"block-end\"`, specifies the maximum height of the component. \n- **--calcite-sheet-min-height** - When `position` is `\"block-start\"` or `\"block-end\"`, specifies the minimum height of the component. ", "attributes": [ { "name": "display-mode", "description": "Specifies the display mode - `\"float\"` (content is separated detached),\nor `\"overlay\"` (displays on top of center content).", "values": [ { "name": "float" }, { "name": "overlay" } ] }, { "name": "escape-disabled", "description": "When `true`, disables the default close on escape behavior.", "values": [] }, { "name": "focus-trap-disabled", "description": "When `true`, prevents focus trapping.", "values": [] }, { "name": "height", "description": "Specifies the height of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "height-scale", "description": "**Deprecated**: Use the `height` property instead.. When `position` is `\"block-start\"` or `\"block-end\"`, specifies the height of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "label", "description": "Specifies the label of the component.", "values": [] }, { "name": "open", "description": "When `true`, displays and positions the component.", "values": [] }, { "name": "outside-close-disabled", "description": "When `true`, disables the closing of the component when clicked outside.", "values": [] }, { "name": "position", "description": "Determines where the component will be positioned.", "values": [ { "name": "block-end" }, { "name": "block-start" }, { "name": "inline-end" }, { "name": "inline-start" } ] }, { "name": "resizable", "description": "When `true`, the component is resizable.", "values": [] }, { "name": "width", "description": "Specifies the width of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "width-scale", "description": "**Deprecated**: Use the `width` property instead.. When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the width of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] } ], "references": [] }, { "name": "calcite-shell", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding custom content. This content will appear between any leading and trailing panels added to the component, such as a map.\n- **header** - A slot for adding header content. This content will be positioned at the top of the component.\n- **footer** - A slot for adding footer content. This content will be positioned at the bottom of the component.\n- **panel-start** - A slot for adding the starting `calcite-shell-panel`.\n- **panel-end** - A slot for adding the ending `calcite-shell-panel`.\n- **panel-top** - A slot for adding the top `calcite-shell-panel`.\n- **panel-bottom** - A slot for adding the bottom `calcite-shell-panel`.\n- **center-row** - [Deprecated] Use the `\"panel-bottom\"` slot instead. A slot for adding the bottom `calcite-shell-center-row`.\n- **modals** - A slot for adding `calcite-modal` components. When placed in this slot, the modal position will be constrained to the extent of the `calcite-shell`.\n- **dialogs** - A slot for adding `calcite-dialog` components. When placed in this slot, the dialog position will be constrained to the extent of the `calcite-shell`.\n- **alerts** - A slot for adding `calcite-alert` components. When placed in this slot, the alert position will be constrained to the extent of the `calcite-shell`.\n- **sheets** - A slot for adding `calcite-sheet` components. When placed in this slot, the sheet position will be constrained to the extent of the `calcite-shell`.\n\n### CSS Properties\n- **--calcite-shell-border-color** - Specifies the component's border color. \n- **--calcite-shell-tip-spacing** - [Deprecated] This component has been deprecated. The left and right spacing of the `calcite-tip-manager` when slotted in the component. ", "attributes": [ { "name": "content-behind", "description": "Positions the center content behind any `calcite-shell-panel`s.", "values": [] } ], "references": [] }, { "name": "calcite-shell-center-row", "description": "**Deprecated**: Use the `calcite-shell-panel` component instead..\n--\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding content to the `calcite-shell-panel`.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the `calcite-shell-panel`.", "attributes": [ { "name": "detached", "description": "When `true`, the content area displays like a floating panel.", "values": [] }, { "name": "height-scale", "description": "Specifies the maximum height of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "position", "description": "Specifies the component's position. Will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [ { "name": "end" }, { "name": "start" } ] } ], "references": [] }, { "name": "calcite-shell-panel", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the component.\n\n### CSS Properties\n- **--calcite-shell-panel-background-color** - Specifies the background color of the component. \n- **--calcite-shell-panel-border-color** - When `displayMode` is `\"float-all\"`, specifies the component's border color. \n- **--calcite-shell-panel-corner-radius** - When `displayMode` is `\"float-all\"`, specifies the component's corner radius. \n- **--calcite-shell-panel-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the height of the component. \n- **--calcite-shell-panel-max-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the maximum height of the component. \n- **--calcite-shell-panel-max-width** - Specifies the maximum width of the component. \n- **--calcite-shell-panel-min-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the minimum height of the component. \n- **--calcite-shell-panel-min-width** - Specifies the minimum width of the component. \n- **--calcite-shell-panel-resize-background-color** - Specifies the background color of the resize handle. \n- **--calcite-shell-panel-resize-icon-color** - Specifies the text color of the resize handle. \n- **--calcite-shell-panel-shadow** - When `displayMode` is `\"float-all\"`, specifies the component's shadow. \n- **--calcite-shell-panel-text-color** - Specifies the text color of the component. \n- **--calcite-shell-panel-width** - Specifies the width of the component. \n- **--calcite-shell-panel-z-index** - Specifies the z-index value for the component. ", "attributes": [ { "name": "collapsed", "description": "When `true`, hides the component's content area.", "values": [] }, { "name": "display-mode", "description": "Specifies the display mode of the component, where:\n\n`\"dock\"` displays at full height adjacent to center content,\n\n`\"overlay\"` displays at full height on top of center content, and\n\n`\"float\"` [Deprecated] does not display at full height with content separately detached from `calcite-action-bar` on top of center content.\n\n`\"float-content\"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content.\n\n`\"float-all\"` detaches the `calcite-panel` and `calcite-action-bar` on top of center content.", "values": [ { "name": "dock" }, { "name": "float" }, { "name": "float-all" }, { "name": "float-content" }, { "name": "overlay" } ] }, { "name": "height", "description": "Specifies the height of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "height-scale", "description": "**Deprecated**: Use the `height` property instead.. When `layout` is `horizontal`, specifies the maximum height of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "layout", "description": "The direction of the component.", "values": [ { "name": "horizontal" }, { "name": "vertical" } ] }, { "name": "position", "description": "Specifies the component's position. Will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [ { "name": "end" }, { "name": "start" } ] }, { "name": "resizable", "description": "When `true` and `displayMode` is not `float-content` or `float`, the component's content area is resizable.", "values": [] }, { "name": "width", "description": "Specifies the width of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "width-scale", "description": "**Deprecated**: Use the `width` property instead.. When `layout` is `vertical`, specifies the width of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] } ], "references": [] }, { "name": "calcite-slider", "description": "### Events\n- **calciteSliderChange** - Fires when the thumb is released on the component.\n\nNote: To constantly listen to the drag event,\nuse `calciteSliderInput` instead.\n- **calciteSliderInput** - Fires on all updates to the component.\n\nNote: Fires frequently during drag. To perform\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### CSS Properties\n- **--calcite-slider-text-color** - Specifies the component's text color. \n- **--calcite-slider-track-color** - Specifies the component's track color. \n- **--calcite-slider-track-fill-color** - Specifies the component's track fill color. \n- **--calcite-slider-handle-fill-color** - Specifies the component's handle fill color. \n- **--calcite-slider-handle-extension-color** - Specifies the component's handle extension color. \n- **--calcite-slider-accent-color** - Specifies the component's accent color. \n- **--calcite-slider-tick-color** - Specifies the component's tick color. \n- **--calcite-slider-tick-border-color** - Specifies the component's tick border color. \n- **--calcite-slider-tick-selected-color** - Specifies the component's tick color when in selected range. \n- **--calcite-slider-graph-color** - Specifies the component's graph color. ", "attributes": [ { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "fill-placement", "description": "Used to configure where the fill is placed along the slider track in relation to the value handle.\n\nRange mode will always display the fill between the min and max handles.", "values": [ { "name": "end" }, { "name": "none" }, { "name": "start" } ] }, { "name": "form", "description": "The `id` of the form that will be associated with the component.\n\nWhen not set, the component will be associated with its ancestor form element, if any.", "values": [] }, { "name": "group-separator", "description": "When `true`, number values are displayed with a group separator corresponding to the language and country format.", "values": [] }, { "name": "has-histogram", "description": "When `true`, indicates a histogram is present.", "values": [] }, { "name": "label-handles", "description": "When `true`, displays label handles with their numeric value.", "values": [] }, { "name": "label-ticks", "description": "When `true` and `ticks` is specified, displays label tick marks with their numeric value.", "values": [] }, { "name": "max", "description": "The component's maximum selectable value.", "values": [] }, { "name": "max-label", "description": "For multiple selections, the accessible name for the second handle, such as `\"Temperature, upper bound\"`.", "values": [] }, { "name": "max-value", "description": "For multiple selections, the component's upper value.", "values": [] }, { "name": "min", "description": "The component's minimum selectable value.", "values": [] }, { "name": "min-label", "description": "Accessible name for first (or only) handle, such as `\"Temperature, lower bound\"`.", "values": [] }, { "name": "min-value", "description": "For multiple selections, the component's lower value.", "values": [] }, { "name": "mirrored", "description": "When `true`, the slider will display values from high to low.\n\nNote that this value will be ignored if the slider has an associated histogram.", "values": [] }, { "name": "name", "description": "Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.", "values": [] }, { "name": "numbering-system", "description": "Specifies the Unicode numeral system used by the component for localization.", "values": [ { "name": "arab" }, { "name": "arabext" }, { "name": "latn" } ] }, { "name": "page-step", "description": "Specifies the interval to move with the page up, or page down keys.", "values": [] }, { "name": "precise", "description": "When `true`, sets a finer point for handles.", "values": [] }, { "name": "required", "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "snap", "description": "When `true`, enables snap selection in coordination with `step` via a mouse.", "values": [] }, { "name": "status", "description": "Specifies the status of the input field, which determines message and icons.", "values": [ { "name": "idle" }, { "name": "invalid" }, { "name": "valid" } ] }, { "name": "step", "description": "Specifies the interval to move with the up, or down keys.", "values": [] }, { "name": "ticks", "description": "Displays tick marks on the number line at a specified interval.", "values": [] }, { "name": "validation-icon", "description": "Specifies the validation icon to display under the component.", "values": [] }, { "name": "validation-message", "description": "Specifies the validation message to display under the component.", "values": [] }, { "name": "value", "description": "The component's value.", "values": [] } ], "references": [] }, { "name": "calcite-sort-handle", "description": "### Events\n- **calciteSortHandleBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteSortHandleBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteSortHandleClose** - Fires when the component is closed and animation is complete.\n- **calciteSortHandleMove** - Fires when a move item has been selected.\n- **calciteSortHandleOpen** - Fires when the component is open and animation is complete.\n- **calciteSortHandleReorder** - Fires when a reorder has been selected.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.", "attributes": [ { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "label", "description": "Specifies the label of the component.", "values": [] }, { "name": "open", "description": "When `true`, displays and positions the component.", "values": [] }, { "name": "overlay-positioning", "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.", "values": [ { "name": "absolute" }, { "name": "fixed" } ] }, { "name": "placement", "description": "Determines where the component will be positioned relative to the container element.", "values": [ { "name": "bottom" }, { "name": "bottom-end" }, { "name": "bottom-start" }, { "name": "top" }, { "name": "top-end" }, { "name": "top-start" } ] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "set-position", "description": "The current position of the handle.", "values": [] }, { "name": "set-size", "description": "The total number of sortable items.", "values": [] }, { "name": "width-scale", "description": "Specifies the width of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] } ], "references": [] }, { "name": "calcite-sortable-list", "description": "**Deprecated**: Use the `calcite-block-group` component instead..\n--\n\n### Events\n- **calciteListOrderChange** - Emitted when the order of the list has changed.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding sortable items.", "attributes": [ { "name": "disabled", "description": "When true, disabled prevents interaction. This state shows items with lower opacity/grayed.", "values": [] }, { "name": "drag-selector", "description": "Specifies which items inside the element should be draggable.", "values": [] }, { "name": "group", "description": "The list's group identifier.\n\nTo drag elements from one list into another, both lists must have the same group value.", "values": [] }, { "name": "handle-selector", "description": "The selector for the handle elements.", "values": [] }, { "name": "layout", "description": "Indicates the horizontal or vertical orientation of the component.", "values": [ { "name": "grid" }, { "name": "horizontal" }, { "name": "vertical" } ] }, { "name": "loading", "description": "When true, content is waiting to be loaded. This state shows a busy indicator.", "values": [] } ], "references": [] }, { "name": "calcite-split-button", "description": "### Events\n- **calciteSplitButtonPrimaryClick** - Fires when the primary button is clicked.\n- **calciteSplitButtonSecondaryClick** - Fires when the dropdown menu is clicked.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `calcite-dropdown` content.", "attributes": [ { "name": "appearance", "description": "Specifies the appearance style of the component.", "values": [ { "name": "outline" }, { "name": "outline-fill" }, { "name": "solid" }, { "name": "transparent" } ] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "download", "description": "Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:\nWithout a value, the browser will suggest a filename/extension.", "values": [] }, { "name": "dropdown-icon-type", "description": "Specifies the icon used for the dropdown menu.", "values": [ { "name": "caret" }, { "name": "chevron" }, { "name": "ellipsis" }, { "name": "overflow" } ] }, { "name": "dropdown-label", "description": "Accessible name for the dropdown menu.", "values": [] }, { "name": "href", "description": "Specifies the URL of the linked resource, which can be set as an absolute or relative path.", "values": [] }, { "name": "kind", "description": "Specifies the kind of the component, which will apply to border and background, if applicable.", "values": [ { "name": "brand" }, { "name": "danger" }, { "name": "inverse" }, { "name": "neutral" } ] }, { "name": "loading", "description": "When `true`, a busy indicator is displayed on the primary button.", "values": [] }, { "name": "overlay-positioning", "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.", "values": [ { "name": "absolute" }, { "name": "fixed" } ] }, { "name": "placement", "description": "Determines where the component will be positioned relative to the container element.", "values": [ { "name": "bottom" }, { "name": "bottom-end" }, { "name": "bottom-start" }, { "name": "top" }, { "name": "top-end" }, { "name": "top-start" } ] }, { "name": "primary-icon-end", "description": "Specifies an icon to display at the end of the primary button.", "values": [] }, { "name": "primary-icon-flip-rtl", "description": "Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [ { "name": "both" }, { "name": "end" }, { "name": "start" } ] }, { "name": "primary-icon-start", "description": "Specifies an icon to display at the start of the primary button.", "values": [] }, { "name": "primary-label", "description": "Accessible name for the primary button.", "values": [] }, { "name": "primary-text", "description": "Text displayed in the primary button.", "values": [] }, { "name": "rel", "description": "Defines the relationship between the `href` value and the current document.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "target", "description": "Specifies where to open the linked document defined in the `href` property.", "values": [] }, { "name": "width", "description": "Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.", "values": [ { "name": "auto" }, { "name": "full" }, { "name": "half" } ] } ], "references": [] }, { "name": "calcite-stack", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding content.\n- **actions-start** - A slot for adding actionable `calcite-action` elements before the content of the component.\n- **content-start** - A slot for adding non-actionable elements before content of the component.\n- **content-end** - A slot for adding non-actionable elements after content of the component.\n- **actions-end** - A slot for adding actionable `calcite-action` elements after the content of the component.\n\n### CSS Properties\n- **--calcite-stack-padding-inline** - Specifies the inline padding of the component's content. \n- **--calcite-stack-padding-block** - Specifies the block padding of the component's content. ", "attributes": [ { "name": "disabled", "description": "When `true`, content interaction is prevented and displayed with lower opacity.", "values": [] } ], "references": [] }, { "name": "calcite-stepper", "description": "### Events\n- **calciteStepperChange** - Fires when the active `calcite-stepper-item` changes.\n- **calciteStepperItemChange** - Fires when the active `calcite-stepper-item` changes.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `endStep(): Promise` - Set the last `calcite-stepper-item` as active.\n- `goToStep(step: number): Promise` - Set a specified `calcite-stepper-item` as active.\n- `nextStep(): Promise` - Set the next `calcite-stepper-item` as active.\n- `prevStep(): Promise` - Set the previous `calcite-stepper-item` as active.\n- `startStep(): Promise` - Set the first `calcite-stepper-item` as active.\n\n### Slots\n- _default_ - A slot for adding `calcite-stepper-item` elements.\n\n### CSS Properties\n- **--calcite-stepper-bar-gap** - Specifies the space between items in the component. \n- **--calcite-stepper-bar-inactive-fill-color** - Specifies the fill color of items in the component. \n- **--calcite-stepper-bar-active-fill-color** - Specifies the fill color of active items in the component. \n- **--calcite-stepper-bar-complete-fill-color** - Specifies the fill color of complete items in the component. \n- **--calcite-stepper-bar-error-fill-color** - Specifies the fill color of error items in the component. ", "attributes": [ { "name": "icon", "description": "When `true`, displays a status icon in the `calcite-stepper-item` heading.", "values": [] }, { "name": "layout", "description": "Defines the layout of the component.", "values": [ { "name": "horizontal" }, { "name": "horizontal-single" }, { "name": "vertical" } ] }, { "name": "numbered", "description": "When `true`, displays the step number in the `calcite-stepper-item` heading.", "values": [] }, { "name": "numbering-system", "description": "Specifies the Unicode numeral system used by the component for localization.", "values": [ { "name": "arab" }, { "name": "arabext" }, { "name": "latn" } ] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] } ], "references": [] }, { "name": "calcite-stepper-item", "description": "### Events\n- **calciteStepperItemSelect** - Fires when the active `calcite-stepper-item` changes.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding custom content.\n\n### CSS Properties\n- **--calcite-stepper-item-background-color-press** - Specifies the component's background-color when active. \n- **--calcite-stepper-item-header-text-color** - Specifies the component's header text color. \n- **--calcite-stepper-item-header-text-color-hover** - Specifies the component's header text color when hovered or focused. \n- **--calcite-stepper-item-selected-header-text-color** - Specifies the component's header text color when selected. \n- **--calcite-stepper-item-icon-color** - Specifies the component's icon color. \n- **--calcite-stepper-item-complete-icon-color** - Specifies the component's icon color when complete. \n- **--calcite-stepper-item-error-icon-color** - Specifies the component's icon and number color when in error. \n- **--calcite-stepper-item-selected-icon-color** - Specifies the component's icon and number color when selected. \n- **--calcite-stepper-item-description-text-color** - Specifies the component's description and number text color. \n- **--calcite-stepper-item-description-text-color-hover** - Specifies the component's description text color when hovered, focused or selected. \n- **--calcite-stepper-bar-gap** - Specifies the component's bottom spacing. \n- **--calcite-stepper-bar-fill-color** - Specifies the component's fill color. \n- **--calcite-stepper-bar-fill-color-hover** - Specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-complete-fill-color** - Specifies the component's fill color when complete. \n- **--calcite-stepper-bar-complete-fill-color-hover** - When the component is `complete`, specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-error-fill-color** - Specifies the component's fill color when in error. \n- **--calcite-stepper-bar-error-fill-color-hover** - When the component contains an `error`, specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-selected-fill-color** - Specifies the component's fill color when selected. ", "attributes": [ { "name": "complete", "description": "When `true`, the step has been completed.", "values": [] }, { "name": "description", "description": "A description for the component. Displays below the header text.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "error", "description": "When `true`, the component contains an error that requires resolution from the user.", "values": [] }, { "name": "heading", "description": "The component header text.", "values": [] }, { "name": "icon-flip-rtl", "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [] }, { "name": "selected", "description": "When `true`, the component is selected.", "values": [] } ], "references": [] }, { "name": "calcite-switch", "description": "### Events\n- **calciteSwitchChange** - Fires when the `checked` value has changed.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### CSS Properties\n- **--calcite-switch-background-color** - Specifies the component's background color. \n- **--calcite-switch-background-color-hover** - Specifies the component's background color when hovered or pressed. \n- **--calcite-switch-border-color** - [Deprecated] No longer necessary. Specifies the component's border color. \n- **--calcite-switch-corner-radius** - Specifies the component's corner radius. \n- **--calcite-switch-handle-background-color** - Specifies the handle's background color. \n- **--calcite-switch-handle-border-color** - [Deprecated] No longer necessary. Specifies the handle's border color. \n- **--calcite-switch-handle-shadow** - [Deprecated] No longer necessary. Specifies the handle's shadow. ", "attributes": [ { "name": "checked", "description": "When `true`, the component is checked.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "form", "description": "The `id` of the form that will be associated with the component.\n\nWhen not set, the component will be associated with its ancestor form element, if any.", "values": [] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "name", "description": "Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "value", "description": "The component's value.", "values": [] } ], "references": [] }, { "name": "calcite-tab", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `getTabIndex(): Promise` - Returns the index of the component item within the tab array.\n\n### Slots\n- _default_ - A slot for adding custom content.\n\n### CSS Properties\n- **--calcite-tab-content-space-y** - Specifies the vertical space between the component's content in the `default` slot. \n- **--calcite-tab-content-block-padding** - [Deprecated] Use `--calcite-tab-content-space-y` instead. Specifies the block padding of the component's content in the `default` slot. ", "attributes": [ { "name": "selected", "description": "When `true`, the component's contents are selected.\n\nOnly one tab can be selected within the `calcite-tabs` parent.", "values": [] }, { "name": "tab", "description": "Specifies a unique name for the component.\n\nWhen specified, use the same value on the `calcite-tab-title`.", "values": [] } ], "references": [] }, { "name": "calcite-tab-nav", "description": "### Events\n- **calciteTabChange** - Emits when the selected `calcite-tab` changes.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding `calcite-tab-title`s.\n\n### CSS Properties\n- **--calcite-tab-background-color** - When `calcite-tabs` is `bordered`, specifies the component's background color. \n- **--calcite-tab-border-color** - When `calcite-tabs` is `bordered`, specifies the component's border color. \n- **--calcite-tab-text-color** - Specifies the component's `iconStart, `iconEnd`, and text color. ", "attributes": [ { "name": "position", "description": "Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`.\n\n `@internal`", "values": [ { "name": "bottom" }, { "name": "top" } ] }, { "name": "storage-id", "description": "Specifies the name when saving selected `calcite-tab` data to `localStorage`.", "values": [] }, { "name": "sync-id", "description": "Specifies text to update multiple components to keep in sync if one changes.", "values": [] } ], "references": [] }, { "name": "calcite-tab-title", "description": "Tab-titles are optionally individually closable.\n--\n\n### Events\n- **calciteTabsActivate** - Fires when a `calcite-tab` is selected.\n- **calciteTabsClose** - Fires when a `calcite-tab` is closed.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `getTabIndex(): Promise` - Returns the index of the title within the `calcite-tab-nav`.\n\n### Slots\n- _default_ - A slot for adding text.\n\n### CSS Properties\n- **--calcite-tab-text-color** - Specifies the component's text color. \n- **--calcite-tab-border-color** - Specifies the component's border color. \n- **--calcite-tab-background-color** - Specifies the component's background color. \n- **--calcite-tab-background-color-hover** - When `calcite-tabs` is `bordered`, specifies the component's background color when hovered. \n- **--calcite-tab-accent-color-press** - Specifies the component's accent color when selected or active. \n- **--calcite-tab-icon-color-end** - Specifies the component's `iconEnd` color. Fallback to `--calcite-icon-color`. \n- **--calcite-tab-icon-color-start** - Specifies the component's `iconStart` color. Fallback to `--calcite-icon-color`. \n- **--calcite-tab-close-icon-color** - Specifies the component's close element icon color. \n- **--calcite-tab-close-icon-color-press** - Specifies the component's close element icon color when hovered, focused, and active. \n- **--calcite-tab-close-icon-background-color** - Specifies the component's close element icon background color. \n- **--calcite-tab-close-icon-background-color-press** - Specifies the component's close element icon background color when hovered, focused, and active. ", "attributes": [ { "name": "closable", "description": "When `true`, a close button is added to the component.", "values": [] }, { "name": "closed", "description": "When `true`, does not display or position the component.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "icon-end", "description": "Specifies an icon to display at the end of the component.", "values": [] }, { "name": "icon-flip-rtl", "description": "Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [ { "name": "both" }, { "name": "end" }, { "name": "start" } ] }, { "name": "icon-start", "description": "Specifies an icon to display at the start of the component.", "values": [] }, { "name": "position", "description": "Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`.\n\n `@internal`", "values": [ { "name": "bottom" }, { "name": "top" } ] }, { "name": "selected", "description": "When `true`, the component and its respective `calcite-tab` contents are selected.\n\nOnly one tab can be selected within the `calcite-tabs` parent.", "values": [] }, { "name": "tab", "description": "Specifies a unique name for the component.\n\nWhen specified, use the same value on the `calcite-tab`.", "values": [] } ], "references": [] }, { "name": "calcite-table", "description": "### Events\n- **calciteTablePageChange** - Emits when the component's page selection changes.\n- **calciteTableSelect** - Emits when the component's selected rows change.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding `calcite-table-row` elements containing `calcite-table-cell` and/or `calcite-table-header` elements.\n- **table-header** - A slot for adding `calcite-table-row` elements containing `calcite-table-header` elements.\n- **table-footer** - A slot for adding `calcite-table-row` elements containing `calcite-table-cell` and/or `calcite-table-header` elements.\n- **selection-actions** - A slot for adding `calcite-actions` or other elements to display when `selectionMode` is not `\"none\"` and `selectionDisplay` is not `\"none\"`.", "attributes": [ { "name": "bordered", "description": "When `true`, displays borders in the component.", "values": [] }, { "name": "caption", "description": "Specifies an accessible title for the component.", "values": [] }, { "name": "group-separator", "description": "When `true`, number values are displayed with a group separator corresponding to the language and country format.", "values": [] }, { "name": "interaction-mode", "description": "When `\"interactive\"`, allows focus and keyboard navigation of `table-header`s and `table-cell`s. When `\"static\"`, prevents focus and keyboard navigation of `table-header`s and `table-cell`s when assistive technologies are not active. Selection affordances and slotted content within `table-cell`s remain focusable.", "values": [ { "name": "interactive" }, { "name": "static" } ] }, { "name": "layout", "description": "Specifies the layout of the component.", "values": [ { "name": "auto" }, { "name": "fixed" } ] }, { "name": "numbered", "description": "When `true`, displays the position of the row in numeric form.", "values": [] }, { "name": "numbering-system", "description": "Specifies the Unicode numeral system used by the component for localization.", "values": [ { "name": "arab" }, { "name": "arabext" }, { "name": "latn" } ] }, { "name": "page-size", "description": "Specifies the page size of the component. When `true`, renders `calcite-pagination`.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "selection-display", "description": "Specifies the display of the selection interface when `selection-mode` is not `\"none\"`. When `\"none\"`, content slotted the `selection-actions` slot will not be displayed.", "values": [ { "name": "none" }, { "name": "top" } ] }, { "name": "selection-mode", "description": "Specifies the selection mode of the component, where:\n\n`\"multiple\"` allows any number of selections,\n\n`\"single\"` allows only one selection, and\n\n`\"none\"` does not allow any selections.", "values": [ { "name": "multiple" }, { "name": "none" }, { "name": "single" } ] }, { "name": "striped", "description": "When `true`, displays striped styling in the component.", "values": [] } ], "references": [] }, { "name": "calcite-table-cell", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding content, usually text content.\n\n### CSS Properties\n- **--calcite-table-cell-background** - Specifies the background color of the component. ", "attributes": [ { "name": "alignment", "description": "Specifies the alignment of the component.", "values": [ { "name": "center" }, { "name": "end" }, { "name": "start" } ] }, { "name": "col-span", "description": "Specifies the number of columns the component should span.", "values": [] }, { "name": "row-span", "description": "Specifies the number of rows the component should span.", "values": [] } ], "references": [] }, { "name": "calcite-table-header", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### CSS Properties\n- **--calcite-table-header-background** - Specifies the background color of the component. \n- **--calcite-table-header-border-color** - Specifies the border color of the component. ", "attributes": [ { "name": "alignment", "description": "Specifies the alignment of the component.", "values": [ { "name": "center" }, { "name": "end" }, { "name": "start" } ] }, { "name": "col-span", "description": "Specifies the number of columns the component should span.", "values": [] }, { "name": "description", "description": "A description to display beneath heading content.", "values": [] }, { "name": "heading", "description": "A heading to display above description content.", "values": [] }, { "name": "row-span", "description": "Specifies the number of rows the component should span.", "values": [] } ], "references": [] }, { "name": "calcite-table-row", "description": "### Events\n- **calciteTableRowSelect** - Fires when the selected state of the component changes.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding `calcite-table-cell` or `calcite-table-header` elements.\n\n### CSS Properties\n- **--calcite-table-row-background** - Specifies the background color of the component. \n- **--calcite-table-row-border-color** - Specifies the border color of the component. ", "attributes": [ { "name": "alignment", "description": "Specifies the alignment of the component.", "values": [ { "name": "center" }, { "name": "end" }, { "name": "start" } ] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "selected", "description": "When `true`, the component is selected.", "values": [] } ], "references": [] }, { "name": "calcite-tabs", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding `calcite-tab`s.\n- **title-group** - A slot for adding a `calcite-tab-nav`.\n\n### CSS Properties\n- **--calcite-tab-background-color** - When `bordered`, specifies the component's background color. \n- **--calcite-tab-border-color** - Specifies the component's border color. ", "attributes": [ { "name": "bordered", "description": "When `true`, the component will display with a folder style menu.", "values": [] }, { "name": "layout", "description": "Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start (`\"inline\"`), or across and centered (`\"center\"`).", "values": [ { "name": "center" }, { "name": "inline" } ] }, { "name": "position", "description": "Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to the `calcite-tabs`.", "values": [ { "name": "bottom" }, { "name": "top" } ] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] } ], "references": [] }, { "name": "calcite-text-area", "description": "### Events\n- **calciteTextAreaChange** - Fires each time a new `value` is typed and committed.\n- **calciteTextAreaInput** - Fires each time a new `value` is typed.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `selectText(): Promise` - Selects the text of the component's `value`.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding text.\n- **footer-start** - A slot for adding content to the start of the component's footer.\n- **footer-end** - A slot for adding content to the end of the component's footer.\n\n### CSS Properties\n- **--calcite-text-area-background-color** - Specifies the component's background color. \n- **--calcite-text-area-border-color** - Specifies the component's text area border color. \n- **--calcite-text-area-character-limit-text-color** - Specifies the color of the character limit text displayed in the footer of the component. \n- **--calcite-text-area-divider-color** - Specifies the color of the divider between the text area and footer. \n- **--calcite-text-area-font-size** - Specifies the font size of the text area and footer. \n- **--calcite-text-area-max-height** - Specifies the component's text area maximum height. \n- **--calcite-text-area-min-height** - Specifies the component's text area minimum height. \n- **--calcite-text-area-max-width** - Specifies the component's text area maximum width. \n- **--calcite-text-area-min-width** - Specifies the component's text area minimum width. \n- **--calcite-text-area-text-color** - Specifies the component's text color. \n- **--calcite-text-area-footer-border-color** - Specifies the footer's border color. \n- **--calcite-text-area-corner-radius** - Specifies component's corner radius. \n- **--calcite-text-area-shadow** - Specifies the component's shadow. \n- **--calcite-text-area-footer-background-color** - Specifies the footer's background color. ", "attributes": [ { "name": "columns", "description": "Specifies the component's number of columns.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "form", "description": "The `id` of the form that will be associated with the component.\n\nWhen not set, the component will be associated with its ancestor form element, if any.", "values": [] }, { "name": "group-separator", "description": "When `true`, number values are displayed with a group separator corresponding to the language and country format.", "values": [] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "limit-text", "description": "When `true`, prevents input beyond the `maxLength` value, mimicking native text area behavior.", "values": [] }, { "name": "max-length", "description": "When the component resides in a form,\nspecifies the maximum number of characters allowed.", "values": [] }, { "name": "min-length", "description": "When the component resides in a form,\nspecifies the minimum number of characters allowed.", "values": [] }, { "name": "name", "description": "Specifies the name of the component.", "values": [] }, { "name": "numbering-system", "description": "Specifies the Unicode numeral system used by the component for localization.", "values": [ { "name": "arab" }, { "name": "arabext" }, { "name": "latn" } ] }, { "name": "placeholder", "description": "Specifies the placeholder text for the component.", "values": [] }, { "name": "read-only", "description": "When `true`, the component's `value` can be read, but cannot be modified.", "values": [] }, { "name": "required", "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.", "values": [] }, { "name": "resize", "description": "Specifies if the component is resizable.", "values": [ { "name": "both" }, { "name": "horizontal" }, { "name": "none" }, { "name": "vertical" } ] }, { "name": "rows", "description": "Specifies the component's number of rows.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "status", "description": "Specifies the status of the input field, which determines message and icons.", "values": [ { "name": "idle" }, { "name": "invalid" }, { "name": "valid" } ] }, { "name": "validation-icon", "description": "Specifies the validation icon to display under the component.", "values": [] }, { "name": "validation-message", "description": "Specifies the validation message to display under the component.", "values": [] }, { "name": "value", "description": "The component's value.", "values": [] }, { "name": "wrap", "description": "Specifies the wrapping mechanism for the text.", "values": [ { "name": "hard" }, { "name": "soft" } ] } ], "references": [] }, { "name": "calcite-tile", "description": "### Events\n- **calciteTileSelect** - Fires when the selected state of the component changes.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- **content-top** - A slot for adding non-actionable elements above the component's content. Content slotted here will render in place of the `icon` property.\n- **content-bottom** - A slot for adding non-actionable elements below the component's content.\n- **content-start** - [Deprecated] use `content-top` slot instead. A slot for adding non-actionable elements before the component's content.\n- **content-end** - [Deprecated] use `content-bottom` slot instead. A slot for adding non-actionable elements after the component's content.\n\n### CSS Properties\n- **--calcite-tile-accent-color-press** - 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. \n- **--calcite-tile-background-color** - Specifies the component's background color. \n- **--calcite-tile-border-color** - Specifies the component's border color. \n- **--calcite-tile-corner-radius** - Specifies the component's corner radius. \n- **--calcite-tile-heading-text-color** - Specifies the component's `heading` text color. \n- **--calcite-tile-link-color** - When `href` is present, specifies the component's link color. \n- **--calcite-tile-shadow** - Specifies the shadow around the component. \n- **--calcite-tile-text-color** - Specifies the component's `description` and `icon` text color, but not the `heading` text color. \n- **--calcite-tile-link-text-color** - Specifies the component's link text color. ", "attributes": [ { "name": "active", "description": "**Deprecated**. When `true`, the component is active.", "values": [] }, { "name": "alignment", "description": "Specifies the alignment of the Tile's content.", "values": [ { "name": "center" }, { "name": "start" } ] }, { "name": "description", "description": "A description for the component, which displays below the heading.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "embed", "description": "**Deprecated**: No longer necessary.. The component's embed mode.\n\nWhen `true`, renders without a border and padding for use by other components.", "values": [] }, { "name": "heading", "description": "The component header text, which displays between the icon and description.", "values": [] }, { "name": "href", "description": "When embed is `\"false\"`, the URL for the component.", "values": [] }, { "name": "icon", "description": "Specifies an icon to display.", "values": [] }, { "name": "icon-flip-rtl", "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "selected", "description": "When `true` and the parent's `selectionMode` is `\"single\"`, `\"single-persist\"', or `\"multiple\"`, the component is selected.", "values": [] } ], "references": [] }, { "name": "calcite-tile-group", "description": "### Events\n- **calciteTileGroupSelect** - Fires when the component's selection changes.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding `calcite-tile` elements.", "attributes": [ { "name": "alignment", "description": "Specifies the alignment of each `calcite-tile`'s content.", "values": [ { "name": "center" }, { "name": "start" } ] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "layout", "description": "Defines the layout of the component.\n\nUse `\"horizontal\"` for rows, and `\"vertical\"` for a single column.", "values": [ { "name": "horizontal" }, { "name": "vertical" } ] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "selection-appearance", "description": "Specifies the selection appearance, where:\n\n- `\"icon\"` (displays a checkmark or dot), or\n- `\"border\"` (displays a border).", "values": [ { "name": "border" }, { "name": "icon" } ] }, { "name": "selection-mode", "description": "Specifies the selection mode, where:\n\n- `\"multiple\"` (allows any number of selected items),\n- `\"single\"` (allows only one selected item),\n- `\"single-persist\"` (allows only one selected item and prevents de-selection),\n- `\"none\"` (allows no selected items).", "values": [ { "name": "multiple" }, { "name": "none" }, { "name": "single" }, { "name": "single-persist" } ] } ], "references": [] }, { "name": "calcite-tile-select", "description": "**Deprecated**: Use the `calcite-tile` component instead..\n--\n\n### Events\n- **calciteTileSelectChange** - Emits a custom change event.\n\nFor checkboxes it emits when checked or unchecked.\n\nFor radios it only emits when checked.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding custom content.", "attributes": [ { "name": "checked", "description": "When `true`, the component is checked.", "values": [] }, { "name": "description", "description": "A description for the component, which displays below the heading.", "values": [] }, { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "heading", "description": "The component header text, which displays between the icon and description.", "values": [] }, { "name": "icon", "description": "Specifies an icon to display.", "values": [] }, { "name": "icon-flip-rtl", "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [] }, { "name": "input-alignment", "description": "When `inputEnabled` is `true`, specifies the placement of the interactive input on the component.", "values": [ { "name": "end" }, { "name": "start" } ] }, { "name": "input-enabled", "description": "When `true`, displays an interactive input based on the `type` property.", "values": [] }, { "name": "name", "description": "Specifies the name of the component on form submission.", "values": [] }, { "name": "type", "description": "Specifies the selection mode of the component, where:\n\n`\"radio\"` is for single selection, and\n\n`\"checkbox\"` is for multiple selections.", "values": [ { "name": "checkbox" }, { "name": "radio" } ] }, { "name": "value", "description": "The component's value.", "values": [] }, { "name": "width", "description": "Specifies the width of the component.", "values": [ { "name": "auto" }, { "name": "full" } ] } ], "references": [] }, { "name": "calcite-tile-select-group", "description": "**Deprecated**: Use the `calcite-tile-group` component instead..\n--\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding `calcite-tile-select` elements.", "attributes": [ { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "layout", "description": "Defines the layout of the component.\n\nUse `\"horizontal\"` for rows, and `\"vertical\"` for a single column.", "values": [ { "name": "horizontal" }, { "name": "vertical" } ] } ], "references": [] }, { "name": "calcite-time-picker", "description": "### Events\n- **calciteTimePickerChange** - Fires when a user changes the component's time\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - Sets focus on the component's first focusable element.\n\n### CSS Properties\n- **--calcite-time-picker-background-color** - Specifies the background color of the time picker. \n- **--calcite-time-picker-corner-radius** - Specifies the border radius of the time picker. \n- **--calcite-time-picker-button-background-color-hover** - Specifies the button's background color when hovered or focused. \n- **--calcite-time-picker-button-background-color-press** - Specifies the button's background color when active. \n- **--calcite-time-picker-color** - Specifies the component's text color. \n- **--calcite-time-picker-icon-color** - Specifies the component's icon color. \n- **--calcite-time-picker-input-border-color-press** - Specifies the input's border color when active. \n- **--calcite-time-picker-input-border-color-hover** - Specifies the input's border color when hovered. ", "attributes": [ { "name": "hour-format", "description": "Specifies the component's hour format, where:\n\n`\"user\"` displays the user's locale format,\n`\"12\"` displays a 12-hour format, and\n`\"24\"` displays a 24-hour format.", "values": [ { "name": "12" }, { "name": "24" }, { "name": "user" } ] }, { "name": "numbering-system", "description": "Specifies the Unicode numeral system used by the component for localization.", "values": [ { "name": "arab" }, { "name": "arabext" }, { "name": "latn" } ] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "step", "description": "Specifies the granularity the `value` must adhere to (in seconds).", "values": [] }, { "name": "value", "description": "The component's value in UTC (always 24-hour format).", "values": [] } ], "references": [] }, { "name": "calcite-tip", "description": "**Deprecated**: Use the `calcite-card`, `calcite-notice`, `calcite-panel`, or `calcite-tile` component instead..\n--\n\n### Events\n- **calciteTipDismiss** - Emits when the component has been closed.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding text and a hyperlink.\n- **thumbnail** - A slot for adding an HTML image element.", "attributes": [ { "name": "close-disabled", "description": "When `true`, the close button is not present on the component.", "values": [] }, { "name": "closed", "description": "When `true`, the component does not display.", "values": [] }, { "name": "heading", "description": "The component header text.", "values": [] }, { "name": "heading-level", "description": "Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.", "values": [ { "name": "1" }, { "name": "2" }, { "name": "3" }, { "name": "4" }, { "name": "5" }, { "name": "6" } ] }, { "name": "selected", "description": "When `true`, the component is selected if it has a parent `calcite-tip-manager`.\n\nOnly one tip can be selected within the `calcite-tip-manager` parent.", "values": [] } ], "references": [] }, { "name": "calcite-tip-group", "description": "**Deprecated**: Use the `calcite-carousel` and `calcite-carousel-item` components instead..\n--\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding `calcite-tip`s.", "attributes": [ { "name": "group-title", "description": "The component header text for all nested `calcite-tip`s.", "values": [] } ], "references": [] }, { "name": "calcite-tip-manager", "description": "**Deprecated**: Use the `calcite-carousel` and `calcite-carousel-item` components instead..\n--\n\n### Events\n- **calciteTipManagerClose** - Emits when the component has been closed.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `nextTip(): Promise` - Selects the next `calcite-tip` to display.\n- `previousTip(): Promise` - Selects the previous `calcite-tip` to display.\n\n### Slots\n- _default_ - A slot for adding `calcite-tip`s.\n\n### CSS Properties\n- **--calcite-tip-manager-height** - The maximum height of the component. \n- **--calcite-tip-max-width** - The maximum width of a slotted `calcite-tip` within the component. ", "attributes": [ { "name": "closed", "description": "When `true`, does not display or position the component.", "values": [] }, { "name": "heading-level", "description": "Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.", "values": [ { "name": "1" }, { "name": "2" }, { "name": "3" }, { "name": "4" }, { "name": "5" }, { "name": "6" } ] } ], "references": [] }, { "name": "calcite-tooltip", "description": "### Events\n- **calciteTooltipBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteTooltipBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteTooltipClose** - Fires when the component is closed and animation is complete.\n- **calciteTooltipOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise` - Updates the position of the component.\n\n### Slots\n- _default_ - A slot for adding text.\n\n### CSS Properties\n- **--calcite-tooltip-background-color** - Specifies the component's background color. \n- **--calcite-tooltip-border-color** - Specifies the component's border color. \n- **--calcite-tooltip-corner-radius** - Specifies the component's corner radius. \n- **--calcite-tooltip-text-color** - Specifies the component's text color. \n- **--calcite-tooltip-z-index** - Specifies the z-index value for the component. ", "attributes": [ { "name": "close-on-click", "description": "Closes the component when the `referenceElement` is clicked.", "values": [] }, { "name": "label", "description": "**Deprecated**: No longer necessary. Overrides the context of the component's description, which could confuse assistive technology users.. Accessible name for the component.", "values": [] }, { "name": "offset-distance", "description": "Offset the position of the component away from the `referenceElement`.", "values": [] }, { "name": "offset-skidding", "description": "Offset the position of the component along the `referenceElement`.", "values": [] }, { "name": "open", "description": "When `true`, the component is open.", "values": [] }, { "name": "overlay-positioning", "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\nThe `\"fixed\"` value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.", "values": [ { "name": "absolute" }, { "name": "fixed" } ] }, { "name": "placement", "description": "Determines where the component will be positioned relative to the `referenceElement`.", "values": [ { "name": "auto" }, { "name": "auto-end" }, { "name": "auto-start" }, { "name": "bottom" }, { "name": "bottom-end" }, { "name": "bottom-start" }, { "name": "leading" }, { "name": "leading-end" }, { "name": "leading-start" }, { "name": "left" }, { "name": "left-end" }, { "name": "left-start" }, { "name": "right" }, { "name": "right-end" }, { "name": "right-start" }, { "name": "top" }, { "name": "top-end" }, { "name": "top-start" }, { "name": "trailing" }, { "name": "trailing-end" }, { "name": "trailing-start" } ] }, { "name": "reference-element", "description": "The `referenceElement` to position the component according to its `\"placement\"` value.\n\nSetting to the `HTMLElement` is preferred so the component does not need to query the DOM for the `referenceElement`.\n\nHowever, a string ID of the reference element can be used.\n\nThe component should not be placed within its own `referenceElement` to avoid unintended behavior.", "values": [] } ], "references": [] }, { "name": "calcite-tree", "description": "### Events\n- **calciteTreeSelect** - Fires when the user selects/deselects `calcite-tree-items`.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for `calcite-tree-item` elements.", "attributes": [ { "name": "lines", "description": "When `true`, displays indentation guide lines.", "values": [] }, { "name": "scale", "description": "Specifies the size of the component.", "values": [ { "name": "l" }, { "name": "m" }, { "name": "s" } ] }, { "name": "selection-mode", "description": "Specifies the selection mode of the component, where:\n\n`\"ancestors\"` displays with a checkbox and allows any number of selections from corresponding parent and child selections,\n\n`\"children\"` allows any number of selections from one parent from corresponding parent and child selections,\n\n`\"multichildren\"` allows any number of selections from corresponding parent and child selections,\n\n`\"multiple\"` allows any number of selections,\n\n`\"none\"` allows no selections,\n\n`\"single\"` allows one selection, and\n\n`\"single-persist\"` allows and requires one selection.", "values": [ { "name": "ancestors" }, { "name": "children" }, { "name": "multichildren" }, { "name": "multiple" }, { "name": "none" }, { "name": "single" }, { "name": "single-persist" } ] } ], "references": [] }, { "name": "calcite-tree-item", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding text.\n- **children** - A slot for adding nested `calcite-tree` elements.\n- **actions-end** - A slot for adding actions to the end of the component. It is recommended to use two or fewer actions.\n\n### CSS Properties\n- **--calcite-tree-text-color** - Specifies the component's text color. \n- **--calcite-tree-text-color-selected** - Specifies the component's text color when selected. \n- **--calcite-tree-selected-icon-color** - Specifies the component's selection icon color. ", "attributes": [ { "name": "disabled", "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "values": [] }, { "name": "expanded", "description": "When `true`, the component is expanded.", "values": [] }, { "name": "icon-flip-rtl", "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).", "values": [ { "name": "both" }, { "name": "end" }, { "name": "start" } ] }, { "name": "icon-start", "description": "Specifies an icon to display at the start of the component.", "values": [] }, { "name": "label", "description": "Accessible name for the component.", "values": [] }, { "name": "selected", "description": "When `true`, the component is selected.", "values": [] } ], "references": [] } ] }