@esri/calcite-components 5.0.0-next.87 → 5.0.0-next.89

package/dist/docs/vscode.html-custom-data.json

@@ -1 +1 @@
-{"$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<this>` - 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 position of the expand and collapse icons within `calcite-accordion-item`s","values":[{"name":"start"},{"name":"end"}]},{"name":"icon-type","description":"Specifies the type of the icon in the header.","values":[{"name":"chevron"},{"name":"caret"},{"name":"plus-minus"}]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"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":"single"},{"name":"single-persist"},{"name":"multiple"}]}],"references":[]},{"name":"calcite-accordion-item","description":"### Events\n- **calciteAccordionItemCollapse** - Fires when the component's content area is collapsed.\n- **calciteAccordionItemExpand** - Fires when the component's content area is expanded.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding custom content, including nested `calcite-accordion-item`s.\n- **actions-end** - A slot for adding `calcite-action`s or content to the end side of the component's header.\n- **actions-start** - A slot for adding `calcite-action`s or content to the start side of the component's header.\n- **content-end** - A slot for adding non-actionable elements after the component's header text.\n- **content-start** - A slot for adding non-actionable elements before the component's header text.\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. ","attributes":[{"name":"description","description":"Specifies a description for the component.","values":[]},{"name":"expanded","description":"When `true`, expands the component and its contents.","values":[]},{"name":"heading","description":"Specifies the component's heading text.","values":[]},{"name":"heading-level","description":"Specifies the heading level number 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":"start"},{"name":"end"},{"name":"both"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding non-interactive content, such as a `calcite-icon`.\n\n### CSS Properties\n- **--calcite-action-background-color-hover** - Specifies the component's background color when hovered. \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":"start"},{"name":"center"},{"name":"end"}]},{"name":"appearance","description":"**Deprecated**: in v5.0.0, removal target v6.0.0 - No longer necessary.. Specifies the appearance of the component.","values":[{"name":"solid"},{"name":"transparent"}]},{"name":"compact","description":"**Deprecated**: in v2.11.0, removal target v5.0.0 - 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":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","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 an accessible label for 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":"s"},{"name":"m"},{"name":"l"}]},{"name":"text","description":"Specifies text that accompanies the icon.","values":[]},{"name":"text-enabled","description":"When `true`, indicates whether the text is displayed.","values":[]},{"name":"type","description":"Specifies the default behavior of the component.","values":[{"name":"button"},{"name":"reset"},{"name":"submit"}]}],"references":[]},{"name":"calcite-action-bar","description":"### Events\n- **calciteActionBarCollapse** - Fires when the component's content area is collapsed.\n- **calciteActionBarExpand** - Fires when the component's content area is expanded.\n- **calciteActionBarToggle** - Fires when the `expanded` property is toggled.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `calcite-action`s that will appear at the top of the component.\n- **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 an accessible name 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`, expands the component and its contents.","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":"horizontal"},{"name":"vertical"},{"name":"grid"}]},{"name":"overflow-actions-disabled","description":"When `true`, disables automatically overflowing `calcite-action`s that won't fit into menus.","values":[]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"position","description":"Specifies the position of the component depending on the element's `dir` property.","values":[{"name":"start"},{"name":"end"}]},{"name":"scale","description":"Specifies the size of the expand `calcite-action`.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"selection-appearance","description":"Specifies the selection appearance of the component","values":[{"name":"neutral"},{"name":"highlight"}]}],"references":[]},{"name":"calcite-action-group","description":"### Events\n- **calciteActionGroupCollapse** - Fires when the component's content area is collapsed.\n- **calciteActionGroupExpand** - Fires when the component's content area is expanded.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `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. ","attributes":[{"name":"columns","description":"Specifies the number of columns.","values":[{"name":"1"},{"name":"2"},{"name":"3"},{"name":"4"},{"name":"5"},{"name":"6"}]},{"name":"expanded","description":"When `true`, expands the component and its contents.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"layout","description":"Indicates the layout of the component.","values":[{"name":"horizontal"},{"name":"vertical"},{"name":"grid"}]},{"name":"menu-open","description":"When `true`, the `calcite-action-menu` is open.","values":[]},{"name":"menu-placement","description":"Specifies the position of the action menu.","values":[{"name":"auto"},{"name":"top"},{"name":"bottom"},{"name":"left"},{"name":"right"},{"name":"auto-start"},{"name":"auto-end"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"},{"name":"right-start"},{"name":"right-end"},{"name":"left-start"},{"name":"left-end"},{"name":"leading-start"},{"name":"leading"},{"name":"leading-end"},{"name":"trailing-end"},{"name":"trailing"},{"name":"trailing-start"}]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"scale","description":"Specifies the size of the `calcite-action-menu`.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"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\"` disables selection (default).","values":[{"name":"none"},{"name":"single"},{"name":"single-persist"},{"name":"multiple"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]}],"references":[]},{"name":"calcite-action-menu","description":"### Events\n- **calciteActionMenuCollapse** - Fires when the component's content area is collapsed.\n- **calciteActionMenuExpand** - Fires when the component's content area is expanded.\n- **calciteActionMenuOpen** - Fires when the `open` property is toggled.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-action`s.\n- **trigger** - A slot for adding a `calcite-action` to trigger opening the menu.\n- **tooltip** - A slot for adding a tooltip for the menu.\n\n### CSS Properties\n- **--calcite-action-menu-items-space** - Specifies the space between actions in the menu. ","attributes":[{"name":"appearance","description":"Specifies the appearance of the component.","values":[{"name":"solid"},{"name":"transparent"}]},{"name":"expanded","description":"When `true`, expands the component and its contents.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"open","description":"When `true`, the component is open.","values":[]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"placement","description":"Determines where the component will be positioned relative to the `referenceElement`.","values":[{"name":"auto"},{"name":"top"},{"name":"bottom"},{"name":"left"},{"name":"right"},{"name":"auto-start"},{"name":"auto-end"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"},{"name":"right-start"},{"name":"right-end"},{"name":"left-start"},{"name":"left-end"},{"name":"leading-start"},{"name":"leading"},{"name":"leading-end"},{"name":"trailing-end"},{"name":"trailing"},{"name":"trailing-start"}]},{"name":"scale","description":"Specifies the size of the component's trigger `calcite-action`.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]}],"references":[]},{"name":"calcite-action-pad","description":"**Deprecated**: in v5.0.0, removal target v6.0.0 - Use the `calcite-action-bar` component instead..\n--\n\n### Events\n- **calciteActionPadCollapse** - Fires when the component's content area is collapsed.\n- **calciteActionPadExpand** - Fires when the component's content area is expanded.\n- **calciteActionPadToggle** - Fires when the `expanded` property is toggled.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `calcite-action`s to the component.\n- **expand-tooltip** - A slot to set the `calcite-tooltip` for the expand toggle.\n\n### CSS Properties\n- **--calcite-action-pad-corner-radius** - Specifies the component's border radius. \n- **--calcite-action-pad-expanded-max-width** - When `expanded` and `layout` is `\"vertical\"`, specifies the component's maximum width. \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`, expands the component and its contents.","values":[]},{"name":"layout","description":"Specifies the layout of the component.","values":[{"name":"horizontal"},{"name":"vertical"},{"name":"grid"}]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"position","description":"Specifies the position of the component depending on the element's `dir` property.","values":[{"name":"start"},{"name":"end"}]},{"name":"scale","description":"Specifies the size of the expand `calcite-action`.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"selection-appearance","description":"Specifies the selection appearance of the component","values":[{"name":"neutral"},{"name":"highlight"}]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's \"close\" button, the first focusable item.\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 component's width. \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":"medium"},{"name":"fast"},{"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":"warning"},{"name":"success"}]},{"name":"label","description":"Specifies an accessible label 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":"top"},{"name":"bottom"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"}]},{"name":"queue","description":"Specifies the ordering priority of the component when opened.","values":[{"name":"last"},{"name":"next"},{"name":"immediate"}]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise<void>` - Updates the position of the component.\n- `scrollContentTo(options?: ScrollToOptions): Promise<void>` - Scrolls the component's content to a specified set of coordinates.\n- `selectText(): Promise<void>` - Selects the text of the component's `value`.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `calcite-autocomplete-item` elements.\n- **content-bottom** - A slot for adding content below `calcite-autocomplete-item` elements.\n- **content-top** - A slot for adding content above `calcite-autocomplete-item` elements.\n- **label-content** - A slot for rendering content next to the component's `labelText`.\n\n### CSS Properties\n- **--calcite-autocomplete-background-color** - Specifies the component's background color. \n- **--calcite-autocomplete-corner-radius** - Specifies the component's corner radius. \n- **--calcite-autocomplete-text-color** - Specifies the component's text color. \n- **--calcite-autocomplete-menu-max-size-y** - Specifies the maximum height of the component's menu. \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 component's input. \n- **--calcite-autocomplete-input-border-color** - Specifies the border color of the component's input. \n- **--calcite-autocomplete-input-corner-radius** - Specifies the corner radius of the component's input. \n- **--calcite-autocomplete-input-shadow** - Specifies the shadow of the component's input. \n- **--calcite-autocomplete-input-icon-color** - Specifies the icon color of the component's input. \n- **--calcite-autocomplete-input-text-color** - Specifies the text color of the component's input. \n- **--calcite-autocomplete-input-placeholder-text-color** - Specifies the placeholder text color of the component's input. \n- **--calcite-autocomplete-input-actions-background-color** - Specifies the background color of the input's `clearable` element. \n- **--calcite-autocomplete-input-actions-background-color-hover** - Specifies the background color of the input's `clearable` element when hovered. \n- **--calcite-autocomplete-input-actions-background-color-press** - Specifies the background color of the input's `clearable` element when pressed. \n- **--calcite-autocomplete-input-actions-icon-color** - Specifies the icon color of the input's `clearable` element. \n- **--calcite-autocomplete-input-actions-icon-color-hover** - Specifies the icon color of the input's `clearable` element when hovered. \n- **--calcite-autocomplete-input-actions-icon-color-press** - Specifies the icon color of the 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-text-color** - Specifies the text color of the Input's prefix, 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":"start"},{"name":"end"}]},{"name":"autocomplete","description":"Specifies the type of content to autocomplete, for use in forms.\nRead the native attribute's documentation on MDN for more info.","values":[]},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","values":[]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","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":"Specifies the component's input value.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","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":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"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":"top"},{"name":"bottom"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"}]},{"name":"prefix-text","description":"Specifies the component's prefix text.","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":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"name":"suffix-text","description":"Specifies the component's suffix text.","values":[]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","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":"Specifies the component's value.","values":[]}],"references":[]},{"name":"calcite-autocomplete-item","description":"### Events\n- **calciteAutocompleteItemSelect** - Fires when the item has been selected.\n\n### Methods\n- `componentOnReady(): Promise<this>` - 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 component's background color. \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 component's text color. ","attributes":[{"name":"description","description":"Specifies 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 the component's heading text.","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":"start"},{"name":"end"},{"name":"both"}]},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"value","description":"Specifies the component's value.","values":[]}],"references":[]},{"name":"calcite-autocomplete-item-group","description":"### Methods\n- `componentOnReady(): Promise<this>` - 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 component's background color. \n- **--calcite-autocomplete-border-color** - Specifies the component's border color. \n- **--calcite-autocomplete-text-color** - Specifies the component's text color. ","attributes":[{"name":"heading","description":"Specifies the component's heading text.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"position","description":"Specifies the position of the group in the autocomplete menu.","values":[]}],"references":[]},{"name":"calcite-avatar","description":"### Methods\n- `componentOnReady(): Promise<this>` - 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 for the component.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"thumbnail","description":"Specifies the `src` to an image. If the image is private, include an access token in the URL.","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- **calciteBlockCollapse** - Fires when the component's content area is collapsed.\n- **calciteBlockExpand** - Fires when the component's content area is expanded.\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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first tabbable element.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **actions-end** - A slot for adding actionable `calcite-action` elements after the content of the component. It is recommended to use two or fewer actions.\n- **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- **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-content-space** - Specifies the space of the component's `default` slot. \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** - [Deprecated]  use `--calcite-block-heading-text-color` instead - When the component is `expanded`, specifies the `heading` text color. \n- **--calcite-block-padding** - [Deprecated] use `--calcite-block-content-space` instead - Specifies the padding of the component's `default` slot. \n- **--calcite-block-text-color** - [Deprecated] 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":"Specifies a description for the component. 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 `calcite-block-group` is `dragEnabled`, the component is not draggable.","values":[]},{"name":"drag-handle","description":"**Deprecated**: in v3.0.0, removal target v6.0.0 - No longer necessary. Use Block Group for draggable functionality.. When `true`, the component displays a draggable button.","values":[]},{"name":"expanded","description":"When `true`, expands the component and its contents.","values":[]},{"name":"heading","description":"Specifies the component's heading text.","values":[]},{"name":"heading-level","description":"Specifies the heading level number 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":"start"},{"name":"end"},{"name":"both"}]},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","values":[]},{"name":"label","description":"Specifies an accessible label 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":"top"},{"name":"bottom"},{"name":"left"},{"name":"right"},{"name":"auto-start"},{"name":"auto-end"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"},{"name":"right-start"},{"name":"right-end"},{"name":"left-start"},{"name":"left-end"},{"name":"leading-start"},{"name":"leading"},{"name":"leading-end"},{"name":"trailing-end"},{"name":"trailing"},{"name":"trailing-start"}]},{"name":"open","description":"**Deprecated**: in v3.1.0, removal target v6.0.0 - Use the `expanded` property instead.. When `true`, expands the component and its contents.","values":[]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"sort-handle-open","description":"When `true`, displays and positions the sort handle.","values":[]},{"name":"status","description":"**Deprecated**: in v3.0.0, removal target v6.0.0 - Use the `icon-start` property instead.. Displays a status-related indicator icon.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"Specifies the component'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 label 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":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"sort-disabled","description":"When `true`, and a `group` is defined, `calcite-block`s are no longer sortable.","values":[]}],"references":[]},{"name":"calcite-block-section","description":"### Events\n- **calciteBlockSectionCollapse** - Fires when the component's content area is collapsed.\n- **calciteBlockSectionExpand** - Fires when the component's content area is expanded.\n- **calciteBlockSectionToggle** - Fires when the header has been clicked.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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. \n- **--calcite-block-section-content-space** - Specifies the padding of the component's content in `default` slot. ","attributes":[{"name":"expanded","description":"When `true`, expands the component and its contents.","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":"start"},{"name":"end"},{"name":"both"}]},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","values":[]},{"name":"open","description":"**Deprecated**: in v3.1.0, removal target v6.0.0 - Use `expanded` prop instead.. When `true`, expands the component and its contents.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"**Deprecated**: in v2.8.1, removal target v6.0.0 - Use `icon-start` instead.. Displays a status-related indicator icon.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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 `iconEnd` color. \n- **--calcite-button-loader-color** - Specifies the component's loader color. \n- **--calcite-button-text-color** - Specifies the component's text color. \n- **--calcite-button-shadow** - Specifies the component's shadow. ","attributes":[{"name":"alignment","description":"Specifies the alignment of the component's elements.","values":[{"name":"start"},{"name":"center"},{"name":"end"},{"name":"space-between"},{"name":"icon-start-space-between"},{"name":"icon-end-space-between"}]},{"name":"appearance","description":"Specifies the appearance style of the component.","values":[{"name":"solid"},{"name":"outline"},{"name":"outline-fill"},{"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":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","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":"start"},{"name":"end"},{"name":"both"}]},{"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":"Specifies an accessible label for the component.","values":[]},{"name":"loading","description":"When `true`, a busy indicator is displayed.","values":[]},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` 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":"s"},{"name":"m"},{"name":"l"}]},{"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":"button"},{"name":"reset"},{"name":"submit"}]},{"name":"width","description":"Specifies the width of the component.","values":[{"name":"auto"},{"name":"half"},{"name":"full"}]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding content.\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-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** - [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-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":"Specifies an accessible label for the component.","values":[]},{"name":"loading","description":"When `true`, a busy indicator is displayed.","values":[]},{"name":"selectable","description":"**Deprecated**: in v3.0.0, removal target v6.0.0 - Use the `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":"inline-start"},{"name":"inline-end"},{"name":"block-start"},{"name":"block-end"}]}],"references":[]},{"name":"calcite-card-group","description":"### Events\n- **calciteCardGroupSelect** - Fires when the component's selection changes and the `selectionMode` is not `none`.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"Specifies an accessible label for the component.","values":[]},{"name":"selection-mode","description":"Specifies the selection mode of the component.","values":[{"name":"none"},{"name":"single"},{"name":"single-persist"},{"name":"multiple"}]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `play(): Promise<void>` - Plays the carousel. If `autoplay` is not enabled (initialized either to `true` or `\"paused\"`), these methods will have no effect.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n- `stop(): Promise<void>` - Stops 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":"inline"},{"name":"none"},{"name":"edge"}]},{"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":"Specifies an accessible label for the component.","values":[]},{"name":"pagination-disabled","description":"When `true`, the component's pagination controls are hidden.","values":[]}],"references":[]},{"name":"calcite-carousel-item","description":"### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding content.","attributes":[{"name":"label","description":"Specifies an accessible label 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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","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":"Specifies an accessible label for the component.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","values":[]},{"name":"name","description":"Specifies the name of the component. Required 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":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"solid"},{"name":"outline"},{"name":"outline-fill"}]},{"name":"closable","description":"When `true`, displays a close button in the component.","values":[]},{"name":"closed","description":"When `true`, hides 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":"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":"Specifies an accessible label for the component.","values":[]},{"name":"scale","description":"Specifies the size of the component.\n\nWhen contained in a parent `calcite-chip-group`, inherits the parent's `scale` value.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"Specifies an accessible label for the component.","values":[]},{"name":"scale","description":"Specifies the size of the component. Child `calcite-chip`s inherit the component's value.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"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":"none"},{"name":"single"},{"name":"single-persist"},{"name":"multiple"}]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### CSS Properties\n- **--calcite-color-picker-background-color** - Specifies the component's background color. \n- **--calcite-color-picker-border-color** - Specifies the component's border color. \n- **--calcite-color-picker-corner-radius** - Specifies the component's corner radius. \n- **--calcite-color-picker-shadow** - Specifies the component's shadow. \n- **--calcite-color-picker-text-color** - Specifies the component's text color. \n- **--calcite-color-picker-input-background-color** - Specifies the component's input background color. \n- **--calcite-color-picker-input-border-color** - Specifies the component's input border color. \n- **--calcite-color-picker-input-text-color** - Specifies the component's input text color. \n- **--calcite-color-picker-input-prefix-text-color** - When `hexDisabled` is not `true`, specifies the component's input prefix text color. \n- **--calcite-color-picker-input-suffix-text-color** - When `alphaChannel` is `true`, specifies the component's input suffix text color. \n- **--calcite-color-picker-tab-border-color** - Specifies the component's tab border color. \n- **--calcite-color-picker-tab-text-color** - Specifies the component's tab text color. \n- **--calcite-color-picker-tab-accent-color-press** - Specifies the component's tab accent color when selected or active. \n- **--calcite-color-picker-swatch-corner-radius** - Specifies the component's swatch corner radius. \n- **--calcite-color-picker-action-text-color-press** - Specifies the component's `savedColors` action text color when pressed. \n- **--calcite-color-picker-action-text-color-hover** - Specifies the component's `savedColors` action text color when hovered. \n- **--calcite-color-picker-action-text-color** - Specifies the component's `savedColors` action text color. ","attributes":[{"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":"field-disabled","description":"When `true`, hides the color field.","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":"hsv"},{"name":"rgb"},{"name":"rgb-css"},{"name":"rgba-css"},{"name":"hsl-css"},{"name":"hsla-css"},{"name":"rgba"},{"name":"hsl"},{"name":"hsla"},{"name":"hsva"}]},{"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":"s"},{"name":"m"},{"name":"l"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"s"},{"name":"m"},{"name":"l"}]},{"name":"value","description":"The hex value.","values":[]}],"references":[]},{"name":"calcite-color-picker-swatch","description":"**Deprecated**: Use the `calcite-swatch-group` and `calcite-swatch` components instead..\n--\n\n### Methods\n- `componentOnReady(): Promise<this>` - 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":"s"},{"name":"m"},{"name":"l"}]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise<void>` - Updates the component's position.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-combobox-item`s.\n- **label-content** - A slot for rendering content next to the component's `labelText`.\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`, disables value-clearing.","values":[]},{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"filter-text","description":"The component's filter input field text.","values":[]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","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. Required 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":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"placeholder","description":"Specifies the input's placeholder text.","values":[]},{"name":"placeholder-icon","description":"Specifies the input's placeholder icon.","values":[]},{"name":"placeholder-icon-flip-rtl","description":"When `true` and the element direction is right-to-left (`\"rtl\"`), flips the input's `placeholderIcon`.","values":[]},{"name":"placement","description":"Specifies the component's position relative to the `referenceElement`.","values":[{"name":"auto"},{"name":"top"},{"name":"bottom"},{"name":"left"},{"name":"right"},{"name":"auto-start"},{"name":"auto-end"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"},{"name":"right-start"},{"name":"right-end"},{"name":"left-start"},{"name":"left-end"},{"name":"leading-start"},{"name":"leading"},{"name":"leading-end"},{"name":"trailing-end"},{"name":"trailing"},{"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":"s"},{"name":"m"},{"name":"l"}]},{"name":"select-all-enabled","description":"When `true` and `selectionMode` is `\"multiple\"` or `\"ancestors\"`, displays 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":"single"},{"name":"all"},{"name":"fit"}]},{"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":"single"},{"name":"single-persist"},{"name":"ancestors"},{"name":"multiple"}]},{"name":"status","description":"Specifies the input field's status, which determines message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","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(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<this>` - 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** - When `active`, specifies the component's background color. \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":"Specifies a description for the component. Displays below the heading.","values":[]},{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's 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":"Specifies the component's heading text.","values":[]},{"name":"icon","description":"Specifies an icon to display.","values":[]},{"name":"icon-flip-rtl","description":"When `true` and the element direction is right-to-left (`\"rtl\"`), flips the component`s `icon`.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"selected","description":"When `true`, the component is selected.","values":[]},{"name":"short-heading","description":"Specifies 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":"value","description":"The component's value. Falls back to `heading` if not provided.","values":[]}],"references":[]},{"name":"calcite-combobox-item-group","description":"### Methods\n- `componentOnReady(): Promise<this>` - 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 component's text color. \n- **--calcite-combobox-item-group-border-color** - Specifies the component's border color. ","attributes":[{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"position","description":"Specifies the group's position in the `calcite-combobox` menu.","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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"start"},{"name":"end"}]},{"name":"calendars","description":"Specifies the number of calendars displayed when `range` is `true`.","values":[{"name":"1"},{"name":"2"}]},{"name":"heading-level","description":"Specifies the heading level number 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":"s"},{"name":"m"},{"name":"l"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"s"},{"name":"m"},{"name":"l"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.","attributes":[{"name":"calendars","description":"Specifies the number of calendars displayed when `range` is `true`.","values":[{"name":"1"},{"name":"2"}]},{"name":"heading-level","description":"Specifies the heading level number 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":"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":"s"},{"name":"m"},{"name":"l"}]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `scrollContentTo(options?: ScrollToOptions): Promise<void>` - Scrolls the component's content to a specified set of coordinates.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's \"close\" button (the first focusable item).\n- `updateFocusTrapElements(extraContainers?: FocusTrapOptions[\"extraContainers\"]): Promise<void>` - Updates the element(s) that are included in the focus-trap of the component.\n- `updateSize(size: {\n    inline?: number | null;\n    block?: number | null;\n}): Promise<void>` - Updates the dialog's inline and/or block size via method call.\n\nUse this method to programmatically override the dialog's width (inline) and/or height (block).\nPass `null` to clear the override and revert to the default or CSS variable size.\n\n### Slots\n- _default_ - A slot for adding content.\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. \n- **--calcite-dialog-accent-color** - Specifies the component's accent color when `kind` is specified. \n- **--calcite-dialog-corner-radius** - Specifies the component's corner radius. \n- **--calcite-dialog-heading-text-color** - Specifies the text color of the component's `heading`. \n- **--calcite-dialog-description-text-color** - Specifies the text color of the component's `description`. \n- **--calcite-dialog-header-background-color** - Specifies the background color of the component's header. \n- **--calcite-dialog-header-action-background-color** - Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions`. \n- **--calcite-dialog-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-dialog-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-dialog-header-action-text-color** - Specifies the text color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions`. \n- **--calcite-dialog-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-dialog-footer-background-color** - Specifies the background color of the component's footer. \n- **--calcite-dialog-space** - Specifies the padding of the component's `\"unnamed (default)\"` slot. \n- **--calcite-dialog-header-content-space** - Specifies the padding of the `\"header-content\"` slot. \n- **--calcite-dialog-action-menu-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. ","attributes":[{"name":"close-disabled","description":"When `true`, disables the component's close button.","values":[]},{"name":"description","description":"Specifies 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":"fullscreen-disabled","description":"When `true`, the component will not display at fullscreen, which may be desired in limited display areas, such as mobile devices.","values":[]},{"name":"heading","description":"Specifies the component's heading text.","values":[]},{"name":"heading-level","description":"Specifies the heading level number 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":"warning"},{"name":"success"}]},{"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":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"placement","description":"Specifies the placement of the dialog.","values":[{"name":"center"},{"name":"top"},{"name":"bottom"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"},{"name":"cover"}]},{"name":"resizable","description":"When `true`, the component is resizable.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]},{"name":"width","description":"Specifies the width of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"width-scale","description":"**Deprecated**: in v3.0.0, removal target v6.0.0 - Use the `width` property instead.. Specifies the width of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise<void>` - Updates the position of the component.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"placement","description":"Determines where the component will be positioned relative to the container element.","values":[{"name":"top"},{"name":"bottom"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"}]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]},{"name":"type","description":"Specifies the action to open the component from the container element.","values":[{"name":"hover"},{"name":"click"}]},{"name":"width","description":"Specifies the width of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"width-scale","description":"**Deprecated**: in v3.0.0, removal target v6.0.0 - Use the `width` property instead.. Specifies the width of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]}],"references":[]},{"name":"calcite-dropdown-group","description":"### Methods\n- `componentOnReady(): Promise<this>` - 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":"none"},{"name":"single"},{"name":"multiple"}]}],"references":[]},{"name":"calcite-dropdown-item","description":"### Events\n- **calciteDropdownItemSelect** - Fires when the component is selected.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"start"},{"name":"end"},{"name":"both"}]},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","values":[]},{"name":"label","description":"Specifies an accessible label 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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"solid"},{"name":"outline-fill"}]},{"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":"Specifies an accessible label 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":"s"},{"name":"m"},{"name":"l"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `filter(value?: string): Promise<void>` - Performs a filter on the component.\n\nThis method can be useful because filtering is delayed and asynchronous.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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 label 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":"s"},{"name":"m"},{"name":"l"}]},{"name":"value","description":"The component's value.","values":[]}],"references":[]},{"name":"calcite-flow","description":"### Methods\n- `back(): Promise<FlowItem | FlowItemLikeElement>` - Removes the currently active `calcite-flow-item`.\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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- **calciteFlowItemCollapse** - Fires when the component's content area is collapsed.\n- **calciteFlowItemExpand** - Fires when the component's content area is expanded.\n- **calciteFlowItemScroll** - Fires when the content is scrolled.\n- **calciteFlowItemToggle** - Fires when the collapse button is clicked.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `scrollContentTo(options?: ScrollToOptions): Promise<void>` - Scrolls the component's content to a specified set of coordinates.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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-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`, hides the component.","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":"Specifies 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":"Specifies the component's heading text.","values":[]},{"name":"heading-level","description":"Specifies the heading level number 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":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"selected","description":"When `true`, the component is displayed within a parent flow.","values":[]},{"name":"show-back-button","description":"When `true`, displays a back button in the component's header.","values":[]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]}],"references":[]},{"name":"calcite-graph","description":"### Methods\n- `componentOnReady(): Promise<this>` - 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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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<this>` - 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` and the element direction is right-to-left (`\"rtl\"`), flips the component's `icon`.","values":[]},{"name":"icon","description":"Specifies an icon to display.","values":[]},{"name":"preload","description":"When `true`, preloads the `icon` data.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"text-label","description":"Specifies the component's accessible name.\n\nIt is recommended to set this value if your icon is semantic.","values":[]}],"references":[]},{"name":"calcite-inline-editable","description":"### Events\n- **calciteInlineEditableEditCancel** - Fires when the component's \"cancel editing\" button is pressed.\n- **calciteInlineEditableEditConfirm** - Fires when the component's \"confirm edits\" button is pressed.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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** - When `appearance=\"solid\"` or `appearance=\"outline-fill\"`, specifies the background color of the component's button element. \n- **--calcite-inline-editable-button-corner-radius** - Specifies the corner radius of the component's button element. \n- **--calcite-inline-editable-button-loader-color** - Specifies the loader color of the components's button element. \n- **--calcite-inline-editable-button-text-color** - Specifies the text color of the component's button element. ","attributes":[{"name":"controls","description":"When `true` and `editingEnabled` is `true`, displays save and cancel controls.","values":[]},{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"editing-enabled","description":"When `true`, inline editing is enabled.","values":[]},{"name":"loading","description":"When `true`, a busy indicator is displayed.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `selectText(): Promise<void>` - Selects the text of the component's `value`.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **action** - A slot for positioning a `calcite-action` or other interactive content adjacent to the component.\n- **label-content** - A slot for rendering content next to the component's `labelText`.\n\n### CSS Properties\n- **--calcite-input-prefix-size** - When `prefixText` is provided, specifies the width of the component's prefix element. \n- **--calcite-input-suffix-size** - When `suffixText` is provided, specifies the width of the component's suffix element. \n- **--calcite-input-prefix-text-color** - When `prefixText` is provided, specifies the text color of the component's prefix element. \n- **--calcite-input-suffix-text-color** - When `suffixText` is provided, specifies the text color of the component's suffix element. \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 component's shadow. \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** - When `loading`, specifies the background color of the component's `loading` element. \n- **--calcite-input-loading-fill-color** - When `loading`, specifies the fill color of the component's `loading` element. ","attributes":[{"name":"accept","description":"When `type` is `\"file\"`, specifies a comma separated list of unique file type specifiers for limiting accepted file types.\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":"start"},{"name":"end"}]},{"name":"autocomplete","description":"Specifies the type of content to autocomplete, for use in forms.\nRead the native attribute's documentation on MDN for more info.","values":[]},{"name":"clearable","description":"When `true` and the component has a `value`, a clear button is displayed. The clear button shows by default for `\"search\"`, `\"time\"`, and `\"date\"` types.","values":[]},{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","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`, displays a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.","values":[]},{"name":"icon-flip-rtl","description":"When `true` and the element direction is right-to-left (`\"rtl\"`), flips the component`s `icon`.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","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` and `type` is `\"email\"` or `\"file\"`, the component can accept more than one value.\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":"When `type=\"number\"`, specifies the placement of the buttons.","values":[{"name":"horizontal"},{"name":"vertical"},{"name":"none"}]},{"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 the component's placeholder text.","values":[]},{"name":"prefix-text","description":"Specifies text to display at 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":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the input field's status, which determines message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"name":"step","description":"Specifies the granularity the component's `value` must adhere to.","values":[{"name":"any"}]},{"name":"suffix-text","description":"Specifies text to display at 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\"`.","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":"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 opened and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise<void>` - Updates the component's position.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **label-content** - A slot for rendering content next to the component's `labelText`.\n\n### CSS Properties\n- **--calcite-input-date-picker-actions-icon-color** - Specifies the component's actions icon color. \n- **--calcite-input-date-picker-actions-icon-color-hover** - Specifies the component's actions icon color on hover. \n- **--calcite-input-date-picker-background-color** - Specifies the component's input background color. \n- **--calcite-input-date-picker-border-color** - Specifies the component's input border color. \n- **--calcite-input-date-picker-calendar-actions-background-color** - Specifies the background color of the component's calendar actions. \n- **--calcite-input-date-picker-calendar-actions-background-color-hover** - Specifies the background color of the component's calendar actions when hovered. \n- **--calcite-input-date-picker-calendar-actions-background-color-press** - Specifies the background color of the component's calendar actions when pressed. \n- **--calcite-input-date-picker-calendar-actions-text-color** - Specifies the text color of the component's calendar actions. \n- **--calcite-input-date-picker-calendar-actions-text-color-press** - Specifies the text color of the component's calendar actions when pressed. \n- **--calcite-input-date-picker-calendar-border-color** - Specifies the border color of the component's calendar. \n- **--calcite-input-date-picker-calendar-corner-radius** - Specifies the corner radius of the component's calendar. \n- **--calcite-input-date-picker-calendar-current-day-text-color** - Specifies the text color of the component's calendar current day element. \n- **--calcite-input-date-picker-calendar-day-background-color** - Specifies the background color of the component's calendar day elements. \n- **--calcite-input-date-picker-calendar-day-background-color-hover** - Specifies the background color of the component's calendar day elements when hovered. \n- **--calcite-input-date-picker-calendar-day-current-text-color** - [Deprecated] Use `--calcite-input-date-picker-calendar-current-day-text-color`. Specifies the text color of current day of the component's date-picker. \n- **--calcite-input-date-picker-calendar-day-range-text-color** - Specifies the text color of the component's calendar selected day range. \n- **--calcite-input-date-picker-calendar-day-text-color-selected** - Specifies the text color of component's calendar selected day. \n- **--calcite-input-date-picker-calendar-day-outside-range-background-color-hover** - Specifies the background color of the component's calendar day elements outside the current range when hovered. \n- **--calcite-input-date-picker-calendar-day-outside-range-text-color-hover** - Specifies the text color of the component's calendar day elements outside the current range when hovered. \n- **--calcite-input-date-picker-calendar-day-text-color** - Specifies the text color of the component's calendar day elements. \n- **--calcite-input-date-picker-calendar-day-text-color-hover** - Specifies the text color of the component's calendar day elements when hovered. \n- **--calcite-input-date-picker-calendar-selected-background-color** - Specifies the background color of the component's calendar selected day and day range. \n- **--calcite-input-date-picker-calendar-shadow** - Specifies the component's calendar shadow. \n- **--calcite-input-date-picker-calendar-icon-color** - Specifies the component's calendar icon color. \n- **--calcite-input-date-picker-calendar-icon-color-hover** - Specifies the component's calendar icon color when hovered. \n- **--calcite-input-date-picker-calendar-month-select-text-color** - Specifies the text color of the component's calendar selected month. \n- **--calcite-input-date-picker-calendar-range-divider-color** - When `range` is `true`, specifies the divider color between the component's calendars. \n- **--calcite-input-date-picker-calendar-text-color** - Specifies the text color of the component's calendar week, year & suffix. \n- **--calcite-input-date-picker-corner-radius** - Specifies the component's input corner radius. \n- **--calcite-input-date-picker-divider-color** - When `range` is `true`, specifies the component's divider color between two inputs. \n- **--calcite-input-date-picker-icon-color** - Specifies the component's input icon color. \n- **--calcite-input-date-picker-placeholder-text-color** - Specifies the component's input placeholder text color. \n- **--calcite-input-date-picker-shadow** - Specifies the component's input shadow. \n- **--calcite-input-date-picker-text-color** - Specifies the component's input text color. ","attributes":[{"name":"calendars","description":"When `range` is `true`, specifies the number of calendars displayed.","values":[{"name":"1"},{"name":"2"}]},{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"focus-trap-disabled","description":"When `true`, prevents focus trapping.","values":[]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","values":[]},{"name":"heading-level","description":"Specifies the heading level number 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":"Specifies an accessible label for the component.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","values":[]},{"name":"layout","description":"Defines the component's layout.","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 component's month style.","values":[{"name":"abbreviated"},{"name":"wide"}]},{"name":"name","description":"Specifies the name of the component. Required 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":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"placement","description":"Determines the `calcite-date-picker`'s placement relative to the input.","values":[{"name":"top"},{"name":"bottom"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"}]},{"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":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the input field's status, which determines message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","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":"Selected date as a string in ISO format (`\"yyyy-mm-dd\"`).","values":[]}],"references":[]},{"name":"calcite-input-message","description":"**Deprecated**: in v5.0.0, removal target v6.0.0 - Use the `calcite-notice` component with `appearance=\"transparent\"` instead..\n--\n\n### Methods\n- `componentOnReady(): Promise<this>` - 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 component's top margin spacing. \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` and the element direction is right-to-left (`\"rtl\"`), flips the component`s `icon`.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the input field's status, which determines message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `selectText(): Promise<void>` - Selects the text of the component's `value`.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **action** - A slot for positioning a `calcite-action` or other interactive content adjacent to the component.\n- **label-content** - A slot for rendering content next to the component's `labelText`.\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** - When `loading`, specifies the background color of the component's `loading` element. \n- **--calcite-input-loading-fill-color** - When `loading`, specifies the fill color of the component's `loading` element. \n- **--calcite-input-number-background-color** - Specifies the component's background color. \n- **--calcite-input-number-border-color** - Specifies the component's border color. \n- **--calcite-input-number-corner-radius** - Specifies the component's border radius. \n- **--calcite-input-number-icon-color** - Specifies the component's icon color. \n- **--calcite-input-number-height** - Specifies the component's height. \n- **--calcite-input-number-placeholder-text-color** - Specifies the text color of the component's placeholder. \n- **--calcite-input-number-text-color** - Specifies the component's text color. \n- **--calcite-input-number-text-color-focus** - Specifies the component's text color when focused. \n- **--calcite-input-prefix-size** - When `prefixText` is provided, specifies the width of the component's prefix element. \n- **--calcite-input-prefix-text-color** - When `prefixText` is provided, specifies the text color of the component's prefix element. \n- **--calcite-input-suffix-size** - When `suffixText` is provided, specifies the width of the component's suffix element. \n- **--calcite-input-suffix-text-color** - When `suffixText` is provided, specifies the text color of the component's suffix element. ","attributes":[{"name":"alignment","description":"Specifies the text alignment of the component's `value`.","values":[{"name":"start"},{"name":"center"},{"name":"end"}]},{"name":"autocomplete","description":"Specifies the type of content to autocomplete, for use in forms.\nRead the native attribute's documentation on MDN for more info.","values":[]},{"name":"clearable","description":"When `true` and the component has a `value`, a clear button is displayed.","values":[]},{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","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` and the element direction is right-to-left (`\"rtl\"`), flips the component`s `icon`.","values":[]},{"name":"integer","description":"When `true`, restricts the component to integer numbers only and disables exponential notation.","values":[]},{"name":"label","description":"Specifies an accessible label for the component's button or hyperlink.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","values":[]},{"name":"loading","description":"When `true`, displays a busy indicator.","values":[]},{"name":"max","description":"When the component resides in a form,\nspecifies the maximum `value`.","values":[]},{"name":"max-length","description":"**Deprecated**: in v3.0.0, removal target v6.0.0 - 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**: in v3.0.0, removal target v6.0.0 - 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":"vertical"},{"name":"none"}]},{"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 component's placeholder text.","values":[]},{"name":"prefix-text","description":"Specifies text to display at 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":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the input field's status, which determines message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"name":"step","description":"Specifies the granularity that the component's `value` must adhere to.","values":[{"name":"any"}]},{"name":"suffix-text","description":"Specifies text to display at 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<this>` - Create a promise that resolves once component is fully loaded.\n- `selectText(): Promise<void>` - Selects the text of the component's `value`.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **action** - A slot for positioning a `calcite-action` or other interactive content adjacent to the component.\n- **label-content** - A slot for rendering content next to the component's `labelText`.\n\n### CSS Properties\n- **--calcite-input-action-background-color** - Specifies the background color of the component's `clearable` element. \n- **--calcite-input-action-background-color-hover** - Specifies the background color of the component's `clearable` element when hovered. \n- **--calcite-input-action-background-color-press** - Specifies the background color of the component's `clearable` element when pressed. \n- **--calcite-input-action-icon-color** - Specifies the icon color of the component's `clearable` element. \n- **--calcite-input-action-icon-color-hover** - Specifies the icon color of the component's `clearable` element when hovered. \n- **--calcite-input-action-icon-color-press** - Specifies the icon color of the component's `clearable` element when pressed. \n- **--calcite-input-loading-background-color** - When `loading`, specifies the background color of the component`s `loading` element. \n- **--calcite-input-loading-fill-color** - When `loading`, specifies the fill color of the component`s `loading` element. \n- **--calcite-input-prefix-size-x** - When `prefixText` is provided, specifies the width of the component's prefix element. \n- **--calcite-input-prefix-text-color** - When `prefixText` is provided, specifies the text color of the component's prefix element. \n- **--calcite-input-suffix-size-x** - When `suffixText` is provided, specifies the width of the component's suffix element. \n- **--calcite-input-suffix-text-color** - When `suffixText` is provided, specifies the color of the component's suffix element. \n- **--calcite-input-text-background-color** - Specifies the component's background color. \n- **--calcite-input-text-border-color** - Specifies the component's border color. \n- **--calcite-input-text-corner-radius** - Specifies the component's border radius. \n- **--calcite-input-text-icon-color** - Specifies the component's `icon` color. \n- **--calcite-input-text-placeholder-text-color** - Specifies the component's `placeholder` text color. \n- **--calcite-input-text-text-color** - Specifies the component's text color. \n- **--calcite-input-text-text-color-focus** - Specifies the component's text color when focused. ","attributes":[{"name":"alignment","description":"Specifies the text alignment of the component's `value`.","values":[{"name":"start"},{"name":"center"},{"name":"end"}]},{"name":"autocomplete","description":"Specifies the type of content to autocomplete, for use in forms.\nRead the native attribute's documentation on MDN for more info.","values":[]},{"name":"clearable","description":"When `true` and the component has a `value`, a clear button is displayed.","values":[]},{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","values":[]},{"name":"icon","description":"Specifies an icon to display.","values":[]},{"name":"icon-flip-rtl","description":"When `true` and the element direction is right-to-left (`\"rtl\"`), flips the component`s `icon`.","values":[]},{"name":"label","description":"Specifies an accessible label for the component's button or hyperlink.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","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":"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 the component's placeholder text.","values":[]},{"name":"prefix-text","description":"Specifies text to display at 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":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the input field's status, which determines message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"name":"suffix-text","description":"Specifies text to display at 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 opened and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise<void>` - Updates the component's position.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **label-content** - A slot for rendering content next to the component's `labelText`.\n\n### CSS Properties\n- **--calcite-input-time-picker-background-color** - Specifies the component's background color. \n- **--calcite-input-time-picker-border-color** - Specifies the component's border color. \n- **--calcite-input-time-picker-icon-color** - Specifies the component's icon color. \n- **--calcite-input-time-picker-icon-color-hover** - Specifies the component's icon color when hovered. \n- **--calcite-input-time-picker-shadow** - Specifies the component's shadow. \n- **--calcite-input-time-picker-corner-radius** - Specifies the component's border radius. \n- **--calcite-input-time-picker-input-background-color** - Specifies the component's input background color. \n- **--calcite-input-time-picker-input-text-color** - Specifies the component's input text color. \n- **--calcite-input-time-picker-input-shadow** - Specifies the component's input shadow. \n- **--calcite-input-time-picker-input-corner-radius** - Specifies the component's input border radius. \n- **--calcite-input-time-picker-input-border-color** - Specifies the component's input border color. \n- **--calcite-input-time-picker-digit-text-color** - Specifies the component's digit text color. \n- **--calcite-input-time-picker-digit-icon-color** - Specifies the component's digit icon color. \n- **--calcite-input-time-picker-digit-border-color-press** - Specifies the component's digit border color when pressed. \n- **--calcite-input-time-picker-digit-border-color-hover** - Specifies the component's digit border color when hovered. \n- **--calcite-input-time-picker-action-background-color-hover** - Specifies the background color of the component's actions when hovered. \n- **--calcite-input-time-picker-action-background-color-press** - Specifies the background color of the component's actions when active. ","attributes":[{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"focus-trap-disabled","description":"When `true`, prevents focus trapping.","values":[]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","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":"24"},{"name":"user"},{"name":"12"}]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","values":[]},{"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. Required 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":"open","description":"When `true`, displays the `calcite-time-picker` component.","values":[]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"placement","description":"Determines the `calcite-time-picker`'s position relative to the input.","values":[{"name":"auto"},{"name":"top"},{"name":"bottom"},{"name":"left"},{"name":"right"},{"name":"auto-start"},{"name":"auto-end"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"},{"name":"right-start"},{"name":"right-end"},{"name":"left-start"},{"name":"left-end"},{"name":"leading-start"},{"name":"leading"},{"name":"leading-end"},{"name":"trailing-end"},{"name":"trailing"},{"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":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the input field's status, which determines message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"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 when the component is closed and animation is complete.\n- **calciteInputTimeZoneOpen** - Fires when the component is opened and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **label-content** - A slot for rendering content next to the component's `labelText`.","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`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","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. Required to pass the component's `value` on form submission.","values":[]},{"name":"offset-style","description":"When `mode` is `\"offset\"`, 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`.","values":[{"name":"user"},{"name":"utc"},{"name":"gmt"}]},{"name":"open","description":"When `true`, displays and positions the component.","values":[]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"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":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the input field's status, which determines message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","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, 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<this>` - 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 component's text alignment.","values":[{"name":"start"},{"name":"center"},{"name":"end"}]},{"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 component's layout in relation to the slotted component. Use `\"inline\"` positions to wrap the label and slotted component on the same line.  [Deprecated] The `\"default\"` value is deprecated, use `\"block\"` instead.","values":[{"name":"block"},{"name":"inline"},{"name":"inline-space-between"},{"name":"default"}]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]}],"references":[]},{"name":"calcite-link","description":"Any attributes placed on <calcite-link> 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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"download","description":"When specified, 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":"When `true` and the element direction is right-to-left (`\"rtl\"`), flips the component's `iconStart` and/or `iconEnd`.","values":[{"name":"start"},{"name":"end"},{"name":"both"}]},{"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 resource defined in `href`.","values":[]},{"name":"target","description":"Specifies the frame or window to open the linked resource.","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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"nested"},{"name":"flat"}]},{"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":"Specifies 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 component'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, where\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 label 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":"s"},{"name":"m"},{"name":"l"}]},{"name":"selection-appearance","description":"Specifies the selection appearance, where\n\n`\"icon\"` displays a checkmark or dot,\n\n`\"border\"` [Deprecated] - Use `\"highlight\"` instead - displays a border, or\n\n`\"highlight\"` displays background highlight.","values":[{"name":"icon"},{"name":"border"},{"name":"highlight"}]},{"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":"none"},{"name":"single"},{"name":"single-persist"},{"name":"multiple"}]},{"name":"sort-disabled","description":"When `true`, and a `group` is defined, `calcite-list-item`s are no longer sortable.","values":[]}],"references":[]},{"name":"calcite-list-item","description":"### Events\n- **calciteListItemClose** - Fires when the close button is clicked.\n- **calciteListItemCollapse** - Fires when the component's content area is collapsed.\n- **calciteListItemExpand** - Fires when the component's content area is expanded.\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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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 component's `label` and `description`.\n- **content** - A slot for adding non-actionable, centered content in place of the component's `label` and `description`.\n- **content-end** - A slot for adding non-actionable elements after the component's `label` and `description`.\n- **actions-end** - A slot for adding actionable `calcite-action` elements after the component's content.\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`, displays a close button in the component.","values":[]},{"name":"closed","description":"When `true`, hides the component.","values":[]},{"name":"description","description":"Specifies a description for the component. Displays below the `label`.","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`, expands the component and its contents.","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":"start"},{"name":"end"},{"name":"both"}]},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","values":[]},{"name":"label","description":"Specifies an accessible label for the component, displays above the `description`.","values":[]},{"name":"open","description":"**Deprecated**: in v3.1.0, removal target v6.0.0 - Use the `expanded` property instead.. When `true`, the item is open to show child components.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"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":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]},{"name":"unavailable","description":"When `true`, the component's content displays as inactive.","values":[]},{"name":"value","description":"The component's value.","values":[]}],"references":[]},{"name":"calcite-list-item-group","description":"### Methods\n- `componentOnReady(): Promise<this>` - 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":"Specifies the heading text for the nested `calcite-list-item` rows.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]}],"references":[]},{"name":"calcite-loader","description":"### Methods\n- `componentOnReady(): Promise<this>` - 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** - 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":"Specifies an accessible label for the component.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"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":"indeterminate"},{"name":"determinate"},{"name":"determinate-value"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.","attributes":[{"name":"label","description":"Specifies an accessible label 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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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** - When `active`, specifies the component's border color. \n- **--calcite-menu-background-color** - Specifies the component's background color. \n- **--calcite-menu-item-sub-menu-border-color** - Specifies the submenu's border color. \n- **--calcite-menu-item-sub-menu-corner-radius** - Specifies the submenu's border radius. \n- **--calcite-menu-text-color** - Specifies the component's text color. ","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":"start"},{"name":"end"},{"name":"both"}]},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","values":[]},{"name":"label","description":"Specifies an accessible label 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<this>` - 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 of the component.","values":[{"name":"solid"},{"name":"outline"},{"name":"outline-fill"}]},{"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\n`\"single\"` displays a single color, and\n`\"range\"` displays a range of colors based on provided `low`, `high`, `min` or `max` values.","values":[{"name":"single"},{"name":"range"}]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","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":"Specifies an accessible label 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 component's highest allowed value.","values":[]},{"name":"min","description":"Specifies the component's lowest allowed value.","values":[]},{"name":"name","description":"Specifies the name of the component. Required 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-labels","description":"When `true`, displays the values of `high`, `low`, `min`, and `max`.","values":[]},{"name":"range-label-type","description":"When `rangeLabels` is `true`, specifies the format of displayed labels.","values":[{"name":"percent"},{"name":"units"}]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"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 component's value.","values":[]},{"name":"value-label","description":"When `true`, displays the `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-navigation","description":"### Events\n- **calciteNavigationActionSelect** - When `navigationAction` is `true`, emits when the displayed action selection changes.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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 an accessible label for 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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### CSS Properties\n- **--calcite-navigation-accent-color** - When `active`, specifies the component's border color. \n- **--calcite-navigation-background-color** - Specifies the component's background color. \n- **--calcite-navigation-logo-heading-text-color** - Specifies the component's `heading` text color. \n- **--calcite-navigation-logo-text-color** - Specifies the component's `description` text color. ","attributes":[{"name":"active","description":"When `true`, the component is highlighted.","values":[]},{"name":"description","description":"Specifies a description for the component. Displays below the `heading`.","values":[]},{"name":"heading","description":"Specifies the component's heading text.","values":[]},{"name":"heading-level","description":"Specifies the heading level number 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":"Specifies an accessible label for the component.","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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### CSS Properties\n- **--calcite-navigation-accent-color** - When `active`, specifies the components's border color. \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":"Specifies an accessible label for the component.","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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- **title** - A slot for adding a title.\n- **message** - A slot for adding a 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 `calcite-action`s.\n\n### CSS Properties\n- **--calcite-notice-background-color** - When `appearance=\"outline-fill\"`, specifies the component's background color. \n- **--calcite-notice-border-color** - When `appearance=\"outline-fill\"`, specifies the component's border color. \n- **--calcite-notice-corner-radius** - Specifies the component's border radius. \n- **--calcite-notice-close-background-color** - Specifies the background color of the component's close element. \n- **--calcite-notice-close-background-color-hover** - Specifies the background color of the component's close element when hovered. \n- **--calcite-notice-close-background-color-focus** - [Deprecated] Specifies the background color of the component's close element when hovered. Use `--calcite-notice-close-background-color-hover` instead. \n- **--calcite-notice-close-background-color-press** - Specifies the background color of the component's close element when active. \n- **--calcite-notice-close-icon-color-hover** - Specifies the icon color of the component's close element when hovered or active. \n- **--calcite-notice-close-icon-color** - Specifies the icon color of the component's close element. \n- **--calcite-notice-title-text-color** - Specifies the component's slotted `\"title\"` content text color. \n- **--calcite-notice-content-text-color** - Specifies the component's slotted `\"message\"` content text color. \n- **--calcite-notice-width** - [Deprecated] Specifies the component's width. \n- **--calcite-notice-shadow** - Specifies the component's shadow. ","attributes":[{"name":"appearance","description":"Specifies the appearance of the component.","values":[{"name":"outline-fill"},{"name":"transparent"}]},{"name":"closable","description":"When `true`, displays a close button in 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 the top border and icon.","values":[{"name":"brand"},{"name":"danger"},{"name":"info"},{"name":"neutral"},{"name":"warning"},{"name":"success"}]},{"name":"open","description":"When `true`, the component is visible.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"width","description":"Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.","values":[{"name":"auto"},{"name":"half"},{"name":"full"}]}],"references":[]},{"name":"calcite-option","description":"### Methods\n- `componentOnReady(): Promise<this>` - 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":"Specifies an accessible label 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<this>` - 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":"Specifies an accessible label for the component.","values":[]}],"references":[]},{"name":"calcite-pagination","description":"### Events\n- **calcitePaginationChange** - Emits when the selected page changes.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `goTo(page: number | \"start\" | \"end\"): Promise<void>` - Set a specified page as active.\n- `nextPage(): Promise<void>` - Go to the next page of results.\n- `previousPage(): Promise<void>` - Go to the previous page of results.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"s"},{"name":"m"},{"name":"l"}]},{"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- **calcitePanelCollapse** - Fires when the component's content area is collapsed.\n- **calcitePanelExpand** - Fires when the component's content area is expanded.\n- **calcitePanelScroll** - Fires when the content is scrolled.\n- **calcitePanelToggle** - Fires when the collapse button is clicked.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `scrollContentTo(options?: ScrollToOptions): Promise<void>` - Scrolls the component's content to a specified set of coordinates.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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-end** - A slot for adding custom content to a trailing footer. Should not be used with the `\"footer\"` slot.\n- **footer-start** - A slot for adding custom content to a leading footer. 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 the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions`. \n- **--calcite-panel-header-action-background-color-hover** - Specifies the background color of the component'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 the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed. \n- **--calcite-panel-header-action-text-color** - Specifies the text color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions`. \n- **--calcite-panel-header-action-text-color-press** - Specifies the text color of the component'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 component.","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":"collapse-direction","description":"When `collapsible` is `true`, specifies the direction of the collapse icon.","values":[{"name":"down"},{"name":"up"}]},{"name":"collapsible","description":"When `true`, the component is collapsible.","values":[]},{"name":"description","description":"Specifies 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":"Specifies the component's heading text.","values":[]},{"name":"heading-level","description":"Specifies the heading level number 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":"top"},{"name":"bottom"},{"name":"left"},{"name":"right"},{"name":"auto-start"},{"name":"auto-end"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"},{"name":"right-start"},{"name":"right-end"},{"name":"left-start"},{"name":"left-end"},{"name":"leading-start"},{"name":"leading"},{"name":"leading-end"},{"name":"trailing-end"},{"name":"trailing"},{"name":"trailing-start"}]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise<void>` - Updates the position of the component.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n- `updateFocusTrapElements(): Promise<void>` - 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-max-size-x** - Specifies the component's maximum width. \n- **--calcite-popover-text-color** - Specifies the component's text color. ","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 in 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":"Specifies the component's heading text.","values":[]},{"name":"heading-level","description":"Specifies the heading level number 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":"Specifies an accessible label 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":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"placement","description":"Determines where the component will be positioned relative to the `referenceElement`.","values":[{"name":"auto"},{"name":"top"},{"name":"bottom"},{"name":"left"},{"name":"right"},{"name":"auto-start"},{"name":"auto-end"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"},{"name":"right-start"},{"name":"right-end"},{"name":"left-start"},{"name":"left-end"},{"name":"leading-start"},{"name":"leading"},{"name":"leading-end"},{"name":"trailing-end"},{"name":"trailing"},{"name":"trailing-start"}]},{"name":"pointer-disabled","description":"When `true`, removes the caret pointer.","values":[]},{"name":"reference-element","description":"The `referenceElement` is used to position the component according to its `placement` value.\n\nSetting the value 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":"s"},{"name":"m"},{"name":"l"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]},{"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<this>` - 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":"Specifies an accessible label for the component.","values":[]},{"name":"reversed","description":"When `true` and type is `\"indeterminate\"`, 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":"indeterminate"},{"name":"determinate"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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. ","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":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","values":[]},{"name":"name","description":"Specifies the name of the component. Required 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":"s"},{"name":"m"},{"name":"l"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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- **label-content** - A slot for rendering content next to the component's `labelText`.\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 `calcite-input-message`. ","attributes":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","values":[]},{"name":"layout","description":"Specifies the layout of the component.","values":[{"name":"horizontal"},{"name":"vertical"}]},{"name":"name","description":"Specifies the name of the component. Required 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":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the status of the validation message.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **label-content** - A slot for rendering content next to the component's `labelText`.\n\n### CSS Properties\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** - When `average` is set, specifies the component's item color. \n- **--calcite-rating-average-text-color** - When `average` is set, specifies the component's `average` text color. \n- **--calcite-rating-count-text-color** - Specifies the component's text color for `count`. ","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":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","values":[]},{"name":"name","description":"Specifies the name of the component. Required 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":"s"},{"name":"m"},{"name":"l"}]},{"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":"invalid"},{"name":"valid"},{"name":"idle"}]},{"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<this>` - 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 component's background color. ","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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-segmented-control-item`s.\n- **label-content** - A slot for rendering content next to the component's `labelText`.\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":"solid"},{"name":"outline"},{"name":"outline-fill"}]},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","values":[]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","values":[]},{"name":"layout","description":"Defines the layout of the component.","values":[{"name":"horizontal"},{"name":"vertical"}]},{"name":"name","description":"Specifies the name of the component. Required 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":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the status of the validation message.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"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<this>` - 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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-option`s.\n- **label-content** - A slot for rendering content next to the component's `labelText`.\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. \n- **--calcite-select-background-color** - Specifies the component's background color. \n- **--calcite-select-corner-radius** - Specifies the component's corner radius. \n- **--calcite-select-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":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","values":[]},{"name":"name","description":"Specifies the name of the component. Required 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":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the status of the input field, which determines the message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"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":"half"},{"name":"full"}]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's \"close\" button - the first focusable item.\n- `updateFocusTrapElements(extraContainers?: FocusTrapOptions[\"extraContainers\"]): Promise<void>` - Updates the element(s) that are included in the component's focus-trap.\n- `updateSize(size: {\n    inline?: number | null;\n    block?: number | null;\n}): Promise<void>` - Updates the sheet's inline and/or block size via method call.\n\nUse this method to programmatically override the sheet's width (inline) and/or height (block).\nPass `null` to clear the override and revert to the default or CSS variable size.\n\n### Slots\n- _default_ - A slot for adding custom content.\n\n### CSS Properties\n- **--calcite-sheet-background-color** - Specifies the component's background color. \n- **--calcite-sheet-corner-radius** - Specifies the component's corner radius. \n- **--calcite-sheet-shadow** - Specifies the component's shadow. \n- **--calcite-sheet-text-color** - Specifies the component's text color. \n- **--calcite-sheet-resize-background-color** - Specifies the resize handle's background color. \n- **--calcite-sheet-resize-icon-color** - Specifies the resize handle's text color. \n- **--calcite-sheet-scrim-background** - Specifies the background color of the component's scrim. \n- **--calcite-sheet-width** - When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the component's width. \n- **--calcite-sheet-max-width** - When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the component's maximum width. \n- **--calcite-sheet-min-width** - When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the component's minimum width. \n- **--calcite-sheet-height** - When `position` is `\"block-start\"` or `\"block-end\"`, specifies the component's height. \n- **--calcite-sheet-max-height** - When `position` is `\"block-start\"` or `\"block-end\"`, specifies the component's maximum height. \n- **--calcite-sheet-min-height** - When `position` is `\"block-start\"` or `\"block-end\"`, specifies the component's minimum height. ","attributes":[{"name":"display-mode","description":"Specifies the display mode - `\"float\"` separates content from main layout,\nand `\"overlay\"` displays on top of center content.","values":[{"name":"overlay"},{"name":"float"}]},{"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 component's height.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"height-scale","description":"**Deprecated**: in v3.0.0, removal target v6.0.0 - Use the `height` property instead.. When `position` is `\"block-start\"` or `\"block-end\"`, specifies the component's height.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"open","description":"When `true`, displays and positions the component.","values":[]},{"name":"outside-close-disabled","description":"When `true`, disables closing the component when the area outside of the component is clicked.","values":[]},{"name":"position","description":"Determines where the component will be positioned.","values":[{"name":"inline-start"},{"name":"inline-end"},{"name":"block-start"},{"name":"block-end"}]},{"name":"resizable","description":"When `true`, the component is resizable.","values":[]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]},{"name":"width","description":"Specifies the components width.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"width-scale","description":"**Deprecated**: in v3.0.0, removal target v6.0.0 - Use the `width` property instead.. When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the component's width.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]}],"references":[]},{"name":"calcite-shell","description":"### Methods\n- `componentOnReady(): Promise<this>` - 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- **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. ","attributes":[{"name":"content-behind","description":"When `true`, positions the center content behind any `calcite-shell-panel`s.","values":[]}],"references":[]},{"name":"calcite-shell-panel","description":"### Events\n- **calciteShellPanelCollapse** - Fires when the component's content area is collapsed.\n- **calciteShellPanelExpand** - Fires when the component's content area is expanded.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `updateSize(size: {\n    inline?: number | null;\n    block?: number | null;\n}): Promise<void>` - Updates the component's size by setting its inline and/or block dimensions.\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 component's background color. \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` or `float-all`, specifies the component's height. \n- **--calcite-shell-panel-max-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the component's maximum height. \n- **--calcite-shell-panel-min-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the component's minimum height. \n- **--calcite-shell-panel-max-width** - Specifies the component's maximum width. \n- **--calcite-shell-panel-resize-icon-color** - Specifies the resize handle's text color. \n- **--calcite-shell-panel-shadow** - When `displayMode` is `\"float-all\"`, specifies the component's shadow. \n- **--calcite-shell-panel-text-color** - Specifies the component's text color. \n- **--calcite-shell-panel-width** - Specifies the component's width. \n- **--calcite-shell-panel-z-index** - Specifies the component's z-index value. ","attributes":[{"name":"collapsed","description":"When `true`, hides the component's content area.","values":[]},{"name":"display-mode","description":"Specifies the component's display mode, 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":"overlay"},{"name":"float"},{"name":"float-all"},{"name":"float-content"}]},{"name":"height","description":"Specifies the component's height.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"height-scale","description":"**Deprecated**: in v3.0.0, removal target v6.0.0 - Use the `height` property instead.. When `layout` is `horizontal`, specifies the component's maximum height.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"layout","description":"**Deprecated**: in v4.0.0, removal target v6.0.0 -  No longer necessary.. Specifies the component's direction.","values":[{"name":"horizontal"},{"name":"vertical"}]},{"name":"position","description":"**Deprecated**: in v4.0.0, removal target v6.0.0 -  No longer necessary.. Specifies the component's position. Will be flipped when the element direction is right-to-left (`\"rtl\"`).","values":[{"name":"start"},{"name":"end"}]},{"name":"resizable","description":"When `true` and `displayMode` is `\"dock\"` or `\"overlay\"`, the component's content area is resizable.","values":[]},{"name":"width","description":"Specifies the component's width.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"width-scale","description":"**Deprecated**: in v3.0.0, removal target v6.0.0 -  Use the `width` property instead.. When `layout` is `vertical`, specifies the component's width.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]}],"references":[]},{"name":"calcite-slider","description":"### Events\n- **calciteSliderChange** - Fires when the component's handle is released.\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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **label-content** - A slot for rendering content next to the component's `labelText`.\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":"When `value` is specified for single values, determines the track's fill relative to the component's handle.\n\nWhen `minValue` and `maxValue` are specified for multiple values, displays the fill between the `minValue` and `maxValue` handles.","values":[{"name":"start"},{"name":"none"},{"name":"end"}]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","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 numeric value labels on handles.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","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":"When `minValue` and `maxValue` are specified for multiple values, specifies the accessible name for the `maxValue` handle, such as `\"Temperature, upper bound\"`.","values":[]},{"name":"max-value","description":"For multiple values, specifies the component's upper value.","values":[]},{"name":"min","description":"Specifies the component's minimum selectable value.","values":[]},{"name":"min-label","description":"Specifies the accessible name associated with the `value` handle (for single values) or `minValue` handle (for multiple values). For instance, `\"Temperature, lower bound\"`.","values":[]},{"name":"min-value","description":"For multiple values, the component's lower value.","values":[]},{"name":"mirrored","description":"When `true`, the component 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 component's size.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"snap","description":"When `true` and `step` is specified, enables snap selection via a mouse.","values":[]},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"name":"step","description":"Specifies the interval to move with the `Arrow up` or `Arrow down` keys.","values":[]},{"name":"ticks","description":"Specifies the interval between tick marks on the number line.","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- **calciteSortHandleAdd** - Fires when an add item has been selected.\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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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 an accessible label for the component.","values":[]},{"name":"open","description":"When `true`, displays and positions the component.","values":[]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"placement","description":"Determines where the component will be positioned relative to the container element.","values":[{"name":"top"},{"name":"bottom"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"}]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"set-position","description":"Specifies the handle's current position.","values":[]},{"name":"set-size","description":"Specifies the total number of sortable items.","values":[]},{"name":"sort-disabled","description":"When `true`, prevents sorting of items.","values":[]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]},{"name":"width-scale","description":"Specifies the width of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]}],"references":[]},{"name":"calcite-sortable-list","description":"**Deprecated**: Use the `calcite-block-group` component instead..\n--\n\n### Events\n- **calciteListOrderChange** - Fires when the order of the list changes.\n\n### Methods\n- `componentOnReady(): Promise<this>` - 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":"Specifies the list's group.\n\nTo drag elements from one list into another, both lists must have the same group value.","values":[]},{"name":"handle-selector","description":"Specifies the selector for the handle elements.","values":[]},{"name":"layout","description":"Indicates the horizontal or vertical orientation of the component.","values":[{"name":"horizontal"},{"name":"vertical"},{"name":"grid"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `calcite-dropdown` content.\n\n### CSS Properties\n- **--calcite-split-button-background-color** - Specifies the component's background color. \n- **--calcite-split-button-background-color-hover** - Specifies the component's background color when hovered. \n- **--calcite-split-button-background-color-focus** - Specifies the component's background color when focused. \n- **--calcite-split-button-background-color-press** - Specifies the component's background color when active. \n- **--calcite-split-button-border-color** - Specifies the component's border color. \n- **--calcite-split-button-corner-radius** - Specifies the component's corner radius. \n- **--calcite-split-button-icon-color** - Specifies the component's `iconStart` and `iconEnd` color. \n- **--calcite-split-button-loader-color** - Specifies the component's loader color. \n- **--calcite-split-button-text-color** - Specifies the component's text color. \n- **--calcite-split-button-shadow** - Specifies the component's shadow. \n- **--calcite-split-button-divider-border-color** - Specifies the component's divider border color. \n- **--calcite-split-button-divider-color** - Specifies the component's divider color. \n- **--calcite-split-button-dropdown-width** - Specifies the width of the component's dropdown. \n- **--calcite-split-button-dropdown-background-color** - Specifies the component's dropdown background color.\n* ","attributes":[{"name":"appearance","description":"Specifies the appearance style of the component.","values":[{"name":"solid"},{"name":"outline"},{"name":"outline-fill"},{"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":"chevron"},{"name":"caret"},{"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":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"placement","description":"Determines where the component will be positioned relative to the container element.","values":[{"name":"top"},{"name":"bottom"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"}]},{"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":"start"},{"name":"end"},{"name":"both"}]},{"name":"primary-icon-start","description":"Specifies an icon to display at the start of the primary button.","values":[]},{"name":"primary-label","description":"Speficies an accessible name for the primary button.","values":[]},{"name":"primary-text","description":"Specifies the 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 component's size.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"target","description":"Specifies where to open the linked document defined in the `href` property.","values":[]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]},{"name":"width","description":"Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.","values":[{"name":"auto"},{"name":"half"},{"name":"full"}]}],"references":[]},{"name":"calcite-stack","description":"### Methods\n- `componentOnReady(): Promise<this>` - 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\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `endStep(): Promise<void>` - Set the last `calcite-stepper-item` as active.\n- `goToStep(step: number): Promise<void>` - Set a specified `calcite-stepper-item` as active.\n- `nextStep(): Promise<void>` - Set the next `calcite-stepper-item` as active.\n- `prevStep(): Promise<void>` - Set the previous `calcite-stepper-item` as active.\n- `startStep(): Promise<void>` - Set the first `calcite-stepper-item` as active.\n\n### Slots\n- _default_ - A slot for adding `calcite-stepper-item`s.\n\n### CSS Properties\n- **--calcite-stepper-bar-gap** - Specifies the space between the component's `calcite-stepper-item`s. \n- **--calcite-stepper-bar-inactive-fill-color** - Specifies the `calcite-stepper-item`s' bar fill color of the component's `calcite-stepper-item`s. \n- **--calcite-stepper-bar-active-fill-color** - Specifies the `calcite-stepper-item`s' bar fill color of the component's active `calcite-stepper-item`s. \n- **--calcite-stepper-bar-complete-fill-color** - When `calcite-stepper-item`s are `complete`, specifies the component's `calcite-stepper-item`s' bar fill color. \n- **--calcite-stepper-bar-error-fill-color** - When `calcite-stepper-item`s contain an `error`, specifies the component's `calcite-stepper-item`s' bar fill color. ","attributes":[{"name":"icon","description":"When `true`, displays a status icon in the `calcite-stepper-item` heading.","values":[]},{"name":"layout","description":"Defines the component's layout.","values":[{"name":"horizontal"},{"name":"vertical"},{"name":"horizontal-single"}]},{"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 component's size.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]}],"references":[]},{"name":"calcite-stepper-item","description":"### Events\n- **calciteStepperItemSelect** - Fires when the active `calcite-stepper-item` changes.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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** - When `selected`, specifies the component's header text color. \n- **--calcite-stepper-item-icon-color** - Specifies the component's icon color. \n- **--calcite-stepper-item-complete-icon-color** - When `complete`, specifies the component's icon color. \n- **--calcite-stepper-item-error-icon-color** - When `error`, specifies the component's icon and number color. \n- **--calcite-stepper-item-selected-icon-color** - When `selected`, specifies the component's icon and number color. \n- **--calcite-stepper-item-description-text-color** - Specifies the component's description and number text color. \n- **--calcite-stepper-item-description-text-color-hover** - When `selected`, hovered, or focused, specifies the component's description text color. \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** - When `complete`, specifies the component's fill color. \n- **--calcite-stepper-bar-complete-fill-color-hover** - When `complete`, specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-error-fill-color** - When `error`, specifies the component's fill color. \n- **--calcite-stepper-bar-error-fill-color-hover** - When `error`, specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-selected-fill-color** - When `selected`, specifies the component's fill color. ","attributes":[{"name":"complete","description":"When `true`, completes the step.","values":[]},{"name":"description","description":"Specifies a description for the component. Displays below the header text.","values":[]},{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"error","description":"When `true`, the component contains an error that requires resolution from the user.","values":[]},{"name":"heading","description":"Specifies the component's heading 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-swatch","description":"### Events\n- **calciteSwatchSelect** - Fires when the selected state of the component changes.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **image** - A slot for adding an image or pattern.\n\n### CSS Properties\n- **--calcite-swatch-corner-radius** - Specifies the component's corner radius. ","attributes":[{"name":"color","description":"Specifies the component's color","values":[]},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"scale","description":"Specifies the component's size. When contained in a parent `calcite-swatch-group`, the component inherits the parent's `scale` value.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"selected","description":"When `true`, the component is selected.","values":[]},{"name":"value","description":"The component's value.","values":[]}],"references":[]},{"name":"calcite-swatch-group","description":"### Events\n- **calciteSwatchGroupSelect** - Fires when the component's selection changes.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding one or more `calcite-swatch`s.\n\n### CSS Properties\n- **--calcite-swatch-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":"Specifies an accessible label for the component.","values":[]},{"name":"scale","description":"Specifies the component's size. Child `calcite-swatch`s inherit the component's value.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"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":"none"},{"name":"single"},{"name":"single-persist"},{"name":"multiple"}]}],"references":[]},{"name":"calcite-switch","description":"### Events\n- **calciteSwitchChange** - Fires when the `checked` value has changed.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"label-text-end","description":"Specifies the component's end label text.","values":[]},{"name":"label-text-start","description":"Specifies the component's start label text.","values":[]},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","values":[]},{"name":"scale","description":"Specifies the component's size.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"value","description":"The component's value.","values":[]}],"references":[]},{"name":"calcite-tab","description":"### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `getTabIndex(): Promise<number>` - 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 is 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<this>` - 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** - 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":"top"},{"name":"bottom"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `getTabIndex(): Promise<number>` - 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-text-color-press** - Specifies the component's text color when hovered, pressed, or selected. \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** - When `selected` or active, specifies the component's accent color. \n- **--calcite-tab-icon-color-start** - Specifies the component's `iconStart` color. \n- **--calcite-tab-icon-color-start-press** - When `selected`, hovered, or pressed, specifies the component's `iconStart` color. \n- **--calcite-tab-icon-color-end** - Specifies the component's `iconEnd` color. \n- **--calcite-tab-icon-color-end-press** - When `selected`, hovered, or pressed, specifies the component's `iconEnd` 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 pressed. \n- **--calcite-tab-close-icon-background-color-hover** - Specifies the component's close element icon background color when hovered. ","attributes":[{"name":"closable","description":"When `true`, displays a close button in the component.","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-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":"start"},{"name":"end"},{"name":"both"}]},{"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":"top"},{"name":"bottom"}]},{"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<this>` - 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\"`.\n\n### CSS Properties\n- **--calcite-table-border-color** - Specifies the component's border color. \n- **--calcite-table-corner-radius** - Specifies the component's border radius. \n- **--calcite-table-shadow** - Specifies the component's shadow. \n- **--calcite-table-number-cell-background-color** - Specifies the background color of the component's `numbered` cell. \n- **--calcite-table-number-cell-text-color** - Specifies the text color of the component's `numbered` cell. \n- **--calcite-table-selection-cell-background-color** - When `selectionMode` is `\"multiple\"` or `\"single\"`, specifies the background color of cells containing selection icons. \n- **--calcite-table-selection-cell-background-color-selected** - When `selectionMode` is `\"multiple\"` or `\"single\"`, specifies the background color of cells containing selection icons on `selected` `calcite-table-row`s. \n- **--calcite-table-selection-cell-icon-color** - When `selectionMode` is `\"multiple\"` or `\"single\"`, specifies the icon color of the component's selection icon on `calcite-table-row`s where `selected` is `false`. \n- **--calcite-table-selection-cell-icon-color-selected** - When `selectionMode` is `\"multiple\"` or `\"single\"`, specifies the icon color of the component's selection icon on `selected` `calcite-table-row`s. \n- **--calcite-table-selection-chip-background-color** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are not `selected`, specifies the background color of the component's selection chip. \n- **--calcite-table-selection-chip-border-color** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are not `selected`, specifies the border color of the component's selection chip. \n- **--calcite-table-selection-chip-corner-radius** - When `selectionMode` is `\"multiple\"` or `\"single\"`, specifies the corner radius of the component's selection chip. \n- **--calcite-table-selection-chip-shadow** - When `selectionMode` is `\"multiple\"` or `\"single\"`, specifies the shadow of the component's selection chip. \n- **--calcite-table-selection-chip-text-color** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are not `selected`, specifies the text color of the component's selection chip. \n- **--calcite-table-selection-chip-background-color-selected** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection chip. \n- **--calcite-table-selection-chip-border-color-selected** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection chip. \n- **--calcite-table-selection-chip-text-color-selected** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection chip. \n- **--calcite-table-selection-out-of-view-chip-background-color** - When `selectionMode` is `\"multiple\"` or `\"single\"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the background color of the component's selection out of view chip. \n- **--calcite-table-selection-out-of-view-chip-border-color** - When `selectionMode` is `\"multiple\"` or `\"single\"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the border color of the component's selection out of view chip. \n- **--calcite-table-selection-out-of-view-chip-corner-radius** - When `selectionMode` is `\"multiple\"` or `\"single\"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the corner radius of the component's selection out of view chip. \n- **--calcite-table-selection-out-of-view-chip-icon-color** - When `selectionMode` is `\"multiple\"` or `\"single\"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the icon color of the component's selection out of view chip. \n- **--calcite-table-selection-out-of-view-chip-shadow** - When `selectionMode` is `\"multiple\"` or `\"single\"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the shadow of the component's selection out of view chip. \n- **--calcite-table-selection-out-of-view-chip-text-color** - When `selectionMode` is `\"multiple\"` or `\"single\"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the text color of the component's selection out of view chip. \n- **--calcite-table-selection-dismiss-button-background-color-active** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection dismiss chip when active. \n- **--calcite-table-selection-dismiss-button-background-color-hover** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection dismiss chip when hovered. \n- **--calcite-table-selection-dismiss-button-background-color** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection dismiss chip. \n- **--calcite-table-selection-dismiss-button-border-color-active** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection dismiss chip when active. \n- **--calcite-table-selection-dismiss-button-border-color-hover** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection dismiss chip when hovered. \n- **--calcite-table-selection-dismiss-button-border-color** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection dismiss chip. \n- **--calcite-table-selection-dismiss-button-corner-radius** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the corner radius of the component's selection dismiss chip. \n- **--calcite-table-selection-dismiss-button-shadow** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the shadow of the component's selection dismiss chip. \n- **--calcite-table-selection-dismiss-button-text-color-active** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection dismiss chip when active. \n- **--calcite-table-selection-dismiss-button-text-color-hover** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection dismiss chip when hovered. \n- **--calcite-table-selection-dismiss-button-text-color** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection dismiss chip. \n- **--calcite-table-pagination-color** - When `pageSize` is set, specifies the component's pagination item color. \n- **--calcite-table-pagination-color-hover** - When `pageSize` is set, specifies the component's pagination item color when hovered or selected. \n- **--calcite-table-pagination-color-border-hover** - When `pageSize` is set, specifies the component's pagination item bottom border color when hovered. \n- **--calcite-table-pagination-color-border-active** - When `pageSize` is set, specifies the component's pagination item bottom border color when selected. \n- **--calcite-table-pagination-background-color** - When `pageSize` is set, specifies the component's pagination item background color when active. \n- **--calcite-table-pagination-icon-color-background-hover** - When `pageSize` is set, specifies the component's pagination chevron item background color when hovered. ","attributes":[{"name":"bordered","description":"When `true`, displays borders between `calcite-table-rows`.","values":[]},{"name":"caption","description":"Specifies an accessible title for the component.","values":[]},{"name":"current-page","description":"Sets/gets the current page","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 present, renders `calcite-pagination`.","values":[]},{"name":"scale","description":"Specifies the component's size.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"selection-display","description":"When `selectionMode` is `\"single\"` or `\"multiple\"`, specifies the display of the selection interface. When  `selectionMode` is `\"none\"`, content slotted in 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":"none"},{"name":"single"},{"name":"multiple"}]},{"name":"striped","description":"When `true`, displays striped styling on the component's `calcite-table-rows`.","values":[]}],"references":[]},{"name":"calcite-table-cell","description":"### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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** - [Deprecated] Use `--calcite-table-cell-background-color` instead. Specifies the component's background color. \n- **--calcite-table-cell-background-color** - Specifies the component's background color. \n- **--calcite-table-cell-border-color** - Specifies the component's border color. \n- **--calcite-table-cell-text-color** - Specifies the component's text color. ","attributes":[{"name":"alignment","description":"Specifies the alignment of the component.","values":[{"name":"start"},{"name":"center"},{"name":"end"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### CSS Properties\n- **--calcite-table-header-background** - [Deprecated] Use the `--calcite-table-header-background-color` property instead. Specifies the component's background color. \n- **--calcite-table-header-background-color** - Specifies the component's background color. \n- **--calcite-table-header-border-color** - Specifies the component's border color. \n- **--calcite-table-header-heading-text-color** - Specifies the component's `heading` text color. \n- **--calcite-table-header-description-text-color** - Specifies the component's `description` text color. ","attributes":[{"name":"alignment","description":"Specifies the alignment of the component.","values":[{"name":"start"},{"name":"center"},{"name":"end"}]},{"name":"col-span","description":"Specifies the number of columns the component should span.","values":[]},{"name":"description","description":"Specifies a description for the component. Displays below the `heading`.","values":[]},{"name":"heading","description":"Specifies the component's heading text. Displays above the `description`.","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<this>` - 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** - [Deprecated] Use `--calcite-table-row-background-color` instead. Specifies the background color of the component. \n- **--calcite-table-row-background-color** - Specifies the component's background color. \n- **--calcite-table-row-background-color-striped** - When `striped` is `true` on `calcite-table`, specifies the background color of the component's `striped` rows. \n- **--calcite-table-row-background-color-selected** - When `selected`, specifies the background color of the component's `selected` rows. \n- **--calcite-table-row-accent-color-selected** - Specifies the component's selected accent color. \n- **--calcite-table-row-border-color** - Specifies the component's border color. ","attributes":[{"name":"alignment","description":"Specifies the alignment of the component.","values":[{"name":"start"},{"name":"center"},{"name":"end"}]},{"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<this>` - 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** - Specifies the component's background color. \n- **--calcite-tab-border-color** - Specifies the component's border color. ","attributes":[{"name":"bordered","description":"When `true`, displays the component 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":"top"},{"name":"bottom"}]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `selectText(): Promise<void>` - Selects the text of the component's `value`.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding text.\n- **label-content** - A slot for rendering content next to the component's `labelText`.\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":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","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":"Specifies an accessible label for the component.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","values":[]},{"name":"limit-text","description":"When `true`, prevents input beyond the `maxLength` value, mimicking native text area behavior.","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 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. Required 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":"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":"vertical"},{"name":"none"}]},{"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":"invalid"},{"name":"valid"},{"name":"idle"}]},{"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":"soft"},{"name":"hard"}]}],"references":[]},{"name":"calcite-tile","description":"### Events\n- **calciteTileSelect** - Fires when the selected state of the component changes.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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\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**: in v2.8.0, removal target v6.0.0 - No longer necessary.. When `true`, the component is active.","values":[]},{"name":"alignment","description":"Specifies alignment of the component's content.","values":[{"name":"start"},{"name":"center"}]},{"name":"description","description":"Specifies a description for the component. 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**: in v2.6.0, removal target v6.0.0 - No longer necessary.. Specifies the component's embed mode.\n\nWhen `true`, renders without a border and padding for use by other components.","values":[]},{"name":"heading","description":"Specifies the component's heading text. displays between the `icon` and `description`.","values":[]},{"name":"heading-level","description":"Specifies the heading level number 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":"When embed is `false`, specifies 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":"Specifies an accessible label for the component.","values":[]},{"name":"scale","description":"Specifies the component's size.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"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<this>` - 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":"start"},{"name":"center"}]},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","values":[]},{"name":"label","description":"Specifies an accessible label 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 component's size.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"selection-appearance","description":"Specifies the selection appearance, where:\n\n- `\"icon\"` (displays a checkmark or dot),\n- `\"highlight\"` (changes the background color), and\n- `\"border\"` (displays a border). [Deprecated] The `\"border\"` value is deprecated in v5.0.0, removal target v6.0.0 - Use `\"highlight\"` instead.","values":[{"name":"icon"},{"name":"border"},{"name":"highlight"}]},{"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), and\n- `\"none\"` (allows no selected items).","values":[{"name":"none"},{"name":"single"},{"name":"single-persist"},{"name":"multiple"}]}],"references":[]},{"name":"calcite-time-picker","description":"### Events\n- **calciteTimePickerChange** - Fires when a user changes the component's time\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### CSS Properties\n- **--calcite-time-picker-background-color** - Specifies the component's background color. \n- **--calcite-time-picker-border-color** - Specifies the component's border color. \n- **--calcite-time-picker-corner-radius** - Specifies the component's border radius. \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":"24"},{"name":"user"},{"name":"12"}]},{"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 component's size.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"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-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<this>` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise<void>` - 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-max-size-x** - Specifies the component's maximum width. \n- **--calcite-tooltip-text-color** - Specifies the component's text color. ","attributes":[{"name":"close-on-click","description":"Closes the component when the `referenceElement` is clicked.","values":[]},{"name":"label","description":"**Deprecated**: in v1.5.0, removal target v6.0.0 - No longer necessary. Overrides the context of the component's text description, which could confuse assistive technology users.. Specifies an accessible label 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":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"placement","description":"Determines where the component will be positioned relative to the `referenceElement`.","values":[{"name":"auto"},{"name":"top"},{"name":"bottom"},{"name":"left"},{"name":"right"},{"name":"auto-start"},{"name":"auto-end"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"},{"name":"right-start"},{"name":"right-end"},{"name":"left-start"},{"name":"left-end"},{"name":"leading-start"},{"name":"leading"},{"name":"leading-end"},{"name":"trailing-end"},{"name":"trailing"},{"name":"trailing-start"}]},{"name":"reference-element","description":"The `referenceElement` is used to position the component according to its `placement` value.\n\nSetting the value 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":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]}],"references":[]},{"name":"calcite-tree","description":"### Events\n- **calciteTreeSelect** - Fires when the user selects/deselects `calcite-tree-items`.\n\n### Methods\n- `componentOnReady(): Promise<this>` - 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 component's size.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"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":"none"},{"name":"single"},{"name":"children"},{"name":"single-persist"},{"name":"multichildren"},{"name":"ancestors"},{"name":"multiple"}]}],"references":[]},{"name":"calcite-tree-item","description":"### Events\n- **calciteTreeItemCollapse** - Fires when the component's content area is collapsed.\n- **calciteTreeItemExpand** - Fires when the component's content area is expanded.\n- **calciteTreeItemSelect** - Fires when the component is selected or deselected.\n\n### Methods\n- `componentOnReady(): Promise<this>` - 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** - When 'selected', specifies the component's text color. \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`, expands the component and its contents.","values":[]},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","values":[{"name":"start"},{"name":"end"},{"name":"both"}]},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"selected","description":"When `true`, the component is selected.","values":[]}],"references":[]}]}
+{"$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<this>` - 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 position of the expand and collapse icons within `calcite-accordion-item`s","values":[{"name":"start"},{"name":"end"}]},{"name":"icon-type","description":"Specifies the type of the icon in the header.","values":[{"name":"chevron"},{"name":"caret"},{"name":"plus-minus"}]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"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":"single"},{"name":"single-persist"},{"name":"multiple"}]}],"references":[]},{"name":"calcite-accordion-item","description":"### Events\n- **calciteAccordionItemCollapse** - Fires when the component's content area is collapsed.\n- **calciteAccordionItemExpand** - Fires when the component's content area is expanded.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding custom content, including nested `calcite-accordion-item`s.\n- **actions-end** - A slot for adding `calcite-action`s or content to the end side of the component's header.\n- **actions-start** - A slot for adding `calcite-action`s or content to the start side of the component's header.\n- **content-end** - A slot for adding non-actionable elements after the component's header text.\n- **content-start** - A slot for adding non-actionable elements before the component's header text.\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. ","attributes":[{"name":"description","description":"Specifies a description for the component.","values":[]},{"name":"expanded","description":"When `true`, expands the component and its contents.","values":[]},{"name":"heading","description":"Specifies the component's heading text.","values":[]},{"name":"heading-level","description":"Specifies the heading level number 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":"start"},{"name":"end"},{"name":"both"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding non-interactive content, such as a `calcite-icon`.\n\n### CSS Properties\n- **--calcite-action-background-color-hover** - Specifies the component's background color when hovered. \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":"start"},{"name":"center"},{"name":"end"}]},{"name":"appearance","description":"**Deprecated**: in v5.0.0, removal target v6.0.0 - No longer necessary.. Specifies the appearance of the component.","values":[{"name":"solid"},{"name":"transparent"}]},{"name":"compact","description":"**Deprecated**: in v2.11.0, removal target v5.0.0 - 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":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","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 an accessible label for 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":"s"},{"name":"m"},{"name":"l"}]},{"name":"text","description":"Specifies text that accompanies the icon.","values":[]},{"name":"text-enabled","description":"When `true`, indicates whether the text is displayed.","values":[]},{"name":"type","description":"Specifies the default behavior of the component.","values":[{"name":"button"},{"name":"reset"},{"name":"submit"}]}],"references":[]},{"name":"calcite-action-bar","description":"### Events\n- **calciteActionBarCollapse** - Fires when the component's content area is collapsed.\n- **calciteActionBarExpand** - Fires when the component's content area is expanded.\n- **calciteActionBarToggle** - Fires when the `expanded` property is toggled.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `calcite-action`s that will appear at the top of the component.\n- **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 an accessible name 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`, expands the component and its contents.","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":"horizontal"},{"name":"vertical"},{"name":"grid"}]},{"name":"overflow-actions-disabled","description":"When `true`, disables automatically overflowing `calcite-action`s that won't fit into menus.","values":[]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"position","description":"Specifies the position of the component depending on the element's `dir` property.","values":[{"name":"start"},{"name":"end"}]},{"name":"scale","description":"Specifies the size of the expand `calcite-action`.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"selection-appearance","description":"Specifies the selection appearance of the component","values":[{"name":"neutral"},{"name":"highlight"}]}],"references":[]},{"name":"calcite-action-group","description":"### Events\n- **calciteActionGroupCollapse** - Fires when the component's content area is collapsed.\n- **calciteActionGroupExpand** - Fires when the component's content area is expanded.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `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. ","attributes":[{"name":"columns","description":"Specifies the number of columns.","values":[{"name":"1"},{"name":"2"},{"name":"3"},{"name":"4"},{"name":"5"},{"name":"6"}]},{"name":"expanded","description":"When `true`, expands the component and its contents.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"layout","description":"Indicates the layout of the component.","values":[{"name":"horizontal"},{"name":"vertical"},{"name":"grid"}]},{"name":"menu-open","description":"When `true`, the `calcite-action-menu` is open.","values":[]},{"name":"menu-placement","description":"Specifies the position of the action menu.","values":[{"name":"auto"},{"name":"top"},{"name":"bottom"},{"name":"left"},{"name":"right"},{"name":"auto-start"},{"name":"auto-end"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"},{"name":"right-start"},{"name":"right-end"},{"name":"left-start"},{"name":"left-end"},{"name":"leading-start"},{"name":"leading"},{"name":"leading-end"},{"name":"trailing-end"},{"name":"trailing"},{"name":"trailing-start"}]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"scale","description":"Specifies the size of the `calcite-action-menu`.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"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\"` disables selection (default).","values":[{"name":"none"},{"name":"single"},{"name":"single-persist"},{"name":"multiple"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]}],"references":[]},{"name":"calcite-action-menu","description":"### Events\n- **calciteActionMenuCollapse** - Fires when the component's content area is collapsed.\n- **calciteActionMenuExpand** - Fires when the component's content area is expanded.\n- **calciteActionMenuOpen** - Fires when the `open` property is toggled.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-action`s.\n- **trigger** - A slot for adding a `calcite-action` to trigger opening the menu.\n- **tooltip** - A slot for adding a tooltip for the menu.\n\n### CSS Properties\n- **--calcite-action-menu-items-space** - Specifies the space between actions in the menu. ","attributes":[{"name":"appearance","description":"Specifies the appearance of the component.","values":[{"name":"solid"},{"name":"transparent"}]},{"name":"expanded","description":"When `true`, expands the component and its contents.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"open","description":"When `true`, the component is open.","values":[]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"placement","description":"Determines where the component will be positioned relative to the `referenceElement`.","values":[{"name":"auto"},{"name":"top"},{"name":"bottom"},{"name":"left"},{"name":"right"},{"name":"auto-start"},{"name":"auto-end"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"},{"name":"right-start"},{"name":"right-end"},{"name":"left-start"},{"name":"left-end"},{"name":"leading-start"},{"name":"leading"},{"name":"leading-end"},{"name":"trailing-end"},{"name":"trailing"},{"name":"trailing-start"}]},{"name":"scale","description":"Specifies the size of the component's trigger `calcite-action`.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]}],"references":[]},{"name":"calcite-action-pad","description":"**Deprecated**: in v5.0.0, removal target v6.0.0 - Use the `calcite-action-bar` component instead..\n--\n\n### Events\n- **calciteActionPadCollapse** - Fires when the component's content area is collapsed.\n- **calciteActionPadExpand** - Fires when the component's content area is expanded.\n- **calciteActionPadToggle** - Fires when the `expanded` property is toggled.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `calcite-action`s to the component.\n- **expand-tooltip** - A slot to set the `calcite-tooltip` for the expand toggle.\n\n### CSS Properties\n- **--calcite-action-pad-corner-radius** - Specifies the component's border radius. \n- **--calcite-action-pad-expanded-max-width** - When `expanded` and `layout` is `\"vertical\"`, specifies the component's maximum width. \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`, expands the component and its contents.","values":[]},{"name":"layout","description":"Specifies the layout of the component.","values":[{"name":"horizontal"},{"name":"vertical"},{"name":"grid"}]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"position","description":"Specifies the position of the component depending on the element's `dir` property.","values":[{"name":"start"},{"name":"end"}]},{"name":"scale","description":"Specifies the size of the expand `calcite-action`.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"selection-appearance","description":"Specifies the selection appearance of the component","values":[{"name":"neutral"},{"name":"highlight"}]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's \"close\" button, the first focusable item.\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 component's width. \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":"medium"},{"name":"fast"},{"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":"warning"},{"name":"success"}]},{"name":"label","description":"Specifies an accessible label 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":"top"},{"name":"bottom"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"}]},{"name":"queue","description":"Specifies the ordering priority of the component when opened.","values":[{"name":"last"},{"name":"next"},{"name":"immediate"}]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise<void>` - Updates the position of the component.\n- `scrollContentTo(options?: ScrollToOptions): Promise<void>` - Scrolls the component's content to a specified set of coordinates.\n- `selectText(): Promise<void>` - Selects the text of the component's `value`.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `calcite-autocomplete-item` elements.\n- **content-bottom** - A slot for adding content below `calcite-autocomplete-item` elements.\n- **content-top** - A slot for adding content above `calcite-autocomplete-item` elements.\n- **label-content** - A slot for rendering content next to the component's `labelText`.\n\n### CSS Properties\n- **--calcite-autocomplete-background-color** - Specifies the component's background color. \n- **--calcite-autocomplete-corner-radius** - Specifies the component's corner radius. \n- **--calcite-autocomplete-text-color** - Specifies the component's text color. \n- **--calcite-autocomplete-menu-max-size-y** - Specifies the maximum height of the component's menu. \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 component's input. \n- **--calcite-autocomplete-input-border-color** - Specifies the border color of the component's input. \n- **--calcite-autocomplete-input-corner-radius** - Specifies the corner radius of the component's input. \n- **--calcite-autocomplete-input-shadow** - Specifies the shadow of the component's input. \n- **--calcite-autocomplete-input-icon-color** - Specifies the icon color of the component's input. \n- **--calcite-autocomplete-input-text-color** - Specifies the text color of the component's input. \n- **--calcite-autocomplete-input-placeholder-text-color** - Specifies the placeholder text color of the component's input. \n- **--calcite-autocomplete-input-actions-background-color** - Specifies the background color of the input's `clearable` element. \n- **--calcite-autocomplete-input-actions-background-color-hover** - Specifies the background color of the input's `clearable` element when hovered. \n- **--calcite-autocomplete-input-actions-background-color-press** - Specifies the background color of the input's `clearable` element when pressed. \n- **--calcite-autocomplete-input-actions-icon-color** - Specifies the icon color of the input's `clearable` element. \n- **--calcite-autocomplete-input-actions-icon-color-hover** - Specifies the icon color of the input's `clearable` element when hovered. \n- **--calcite-autocomplete-input-actions-icon-color-press** - Specifies the icon color of the 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-text-color** - Specifies the text color of the Input's prefix, 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":"start"},{"name":"end"}]},{"name":"autocomplete","description":"Specifies the type of content to autocomplete, for use in forms.\nRead the native attribute's documentation on MDN for more info.","values":[]},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","values":[]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","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":"Specifies the component's input value.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","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":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"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":"top"},{"name":"bottom"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"}]},{"name":"prefix-text","description":"Specifies the component's prefix text.","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":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"name":"suffix-text","description":"Specifies the component's suffix text.","values":[]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","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":"Specifies the component's value.","values":[]}],"references":[]},{"name":"calcite-autocomplete-item","description":"### Events\n- **calciteAutocompleteItemSelect** - Fires when the item has been selected.\n\n### Methods\n- `componentOnReady(): Promise<this>` - 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 component's background color. \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 component's text color. ","attributes":[{"name":"description","description":"Specifies 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 the component's heading text.","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":"start"},{"name":"end"},{"name":"both"}]},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"value","description":"Specifies the component's value.","values":[]}],"references":[]},{"name":"calcite-autocomplete-item-group","description":"### Methods\n- `componentOnReady(): Promise<this>` - 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 component's background color. \n- **--calcite-autocomplete-border-color** - Specifies the component's border color. \n- **--calcite-autocomplete-text-color** - Specifies the component's text color. ","attributes":[{"name":"heading","description":"Specifies the component's heading text.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"position","description":"Specifies the position of the group in the autocomplete menu.","values":[]}],"references":[]},{"name":"calcite-avatar","description":"### Methods\n- `componentOnReady(): Promise<this>` - 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 for the component.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"thumbnail","description":"Specifies the `src` to an image. If the image is private, include an access token in the URL.","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- **calciteBlockCollapse** - Fires when the component's content area is collapsed.\n- **calciteBlockExpand** - Fires when the component's content area is expanded.\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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first tabbable element.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **actions-end** - A slot for adding actionable `calcite-action` elements after the content of the component. It is recommended to use two or fewer actions.\n- **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- **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-content-space** - Specifies the space of the component's `default` slot. \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** - [Deprecated]  use `--calcite-block-heading-text-color` instead - When the component is `expanded`, specifies the `heading` text color. \n- **--calcite-block-padding** - [Deprecated] use `--calcite-block-content-space` instead - Specifies the padding of the component's `default` slot. \n- **--calcite-block-text-color** - [Deprecated] 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":"Specifies a description for the component. 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 `calcite-block-group` is `dragEnabled`, the component is not draggable.","values":[]},{"name":"drag-handle","description":"**Deprecated**: in v3.0.0, removal target v6.0.0 - No longer necessary. Use Block Group for draggable functionality.. When `true`, the component displays a draggable button.","values":[]},{"name":"expanded","description":"When `true`, expands the component and its contents.","values":[]},{"name":"heading","description":"Specifies the component's heading text.","values":[]},{"name":"heading-level","description":"Specifies the heading level number 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":"start"},{"name":"end"},{"name":"both"}]},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","values":[]},{"name":"label","description":"Specifies an accessible label 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":"top"},{"name":"bottom"},{"name":"left"},{"name":"right"},{"name":"auto-start"},{"name":"auto-end"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"},{"name":"right-start"},{"name":"right-end"},{"name":"left-start"},{"name":"left-end"},{"name":"leading-start"},{"name":"leading"},{"name":"leading-end"},{"name":"trailing-end"},{"name":"trailing"},{"name":"trailing-start"}]},{"name":"open","description":"**Deprecated**: in v3.1.0, removal target v6.0.0 - Use the `expanded` property instead.. When `true`, expands the component and its contents.","values":[]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"sort-handle-open","description":"When `true`, displays and positions the sort handle.","values":[]},{"name":"status","description":"**Deprecated**: in v3.0.0, removal target v6.0.0 - Use the `icon-start` property instead.. Displays a status-related indicator icon.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"Specifies the component'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 label 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":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"sort-disabled","description":"When `true`, and a `group` is defined, `calcite-block`s are no longer sortable.","values":[]}],"references":[]},{"name":"calcite-block-section","description":"### Events\n- **calciteBlockSectionCollapse** - Fires when the component's content area is collapsed.\n- **calciteBlockSectionExpand** - Fires when the component's content area is expanded.\n- **calciteBlockSectionToggle** - Fires when the header has been clicked.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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. \n- **--calcite-block-section-content-space** - Specifies the padding of the component's content in `default` slot. ","attributes":[{"name":"expanded","description":"When `true`, expands the component and its contents.","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":"start"},{"name":"end"},{"name":"both"}]},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","values":[]},{"name":"open","description":"**Deprecated**: in v3.1.0, removal target v6.0.0 - Use `expanded` prop instead.. When `true`, expands the component and its contents.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"**Deprecated**: in v2.8.1, removal target v6.0.0 - Use `icon-start` instead.. Displays a status-related indicator icon.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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 `iconEnd` color. \n- **--calcite-button-loader-color** - Specifies the component's loader color. \n- **--calcite-button-text-color** - Specifies the component's text color. \n- **--calcite-button-shadow** - Specifies the component's shadow. ","attributes":[{"name":"alignment","description":"Specifies the alignment of the component's elements.","values":[{"name":"start"},{"name":"center"},{"name":"end"},{"name":"space-between"},{"name":"icon-start-space-between"},{"name":"icon-end-space-between"}]},{"name":"appearance","description":"Specifies the appearance style of the component.","values":[{"name":"solid"},{"name":"outline"},{"name":"outline-fill"},{"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":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","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":"start"},{"name":"end"},{"name":"both"}]},{"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":"Specifies an accessible label for the component.","values":[]},{"name":"loading","description":"When `true`, a busy indicator is displayed.","values":[]},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` 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":"s"},{"name":"m"},{"name":"l"}]},{"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":"button"},{"name":"reset"},{"name":"submit"}]},{"name":"width","description":"Specifies the width of the component.","values":[{"name":"auto"},{"name":"half"},{"name":"full"}]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding content.\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-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** - [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-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":"Specifies an accessible label for the component.","values":[]},{"name":"loading","description":"When `true`, a busy indicator is displayed.","values":[]},{"name":"selectable","description":"**Deprecated**: in v3.0.0, removal target v6.0.0 - Use the `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":"inline-start"},{"name":"inline-end"},{"name":"block-start"},{"name":"block-end"}]}],"references":[]},{"name":"calcite-card-group","description":"### Events\n- **calciteCardGroupSelect** - Fires when the component's selection changes and the `selectionMode` is not `none`.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"Specifies an accessible label for the component.","values":[]},{"name":"selection-mode","description":"Specifies the selection mode of the component.","values":[{"name":"none"},{"name":"single"},{"name":"single-persist"},{"name":"multiple"}]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `play(): Promise<void>` - Plays the carousel. If `autoplay` is not enabled (initialized either to `true` or `\"paused\"`), these methods will have no effect.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n- `stop(): Promise<void>` - Stops 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":"inline"},{"name":"none"},{"name":"edge"}]},{"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":"Specifies an accessible label for the component.","values":[]},{"name":"pagination-disabled","description":"When `true`, the component's pagination controls are hidden.","values":[]}],"references":[]},{"name":"calcite-carousel-item","description":"### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding content.","attributes":[{"name":"label","description":"Specifies an accessible label 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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","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":"Specifies an accessible label for the component.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","values":[]},{"name":"name","description":"Specifies the name of the component. Required 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":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"solid"},{"name":"outline"},{"name":"outline-fill"}]},{"name":"closable","description":"When `true`, displays a close button in the component.","values":[]},{"name":"closed","description":"When `true`, hides 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":"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":"Specifies an accessible label for the component.","values":[]},{"name":"scale","description":"Specifies the size of the component.\n\nWhen contained in a parent `calcite-chip-group`, inherits the parent's `scale` value.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"Specifies an accessible label for the component.","values":[]},{"name":"scale","description":"Specifies the size of the component. Child `calcite-chip`s inherit the component's value.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"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":"none"},{"name":"single"},{"name":"single-persist"},{"name":"multiple"}]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### CSS Properties\n- **--calcite-color-picker-background-color** - Specifies the component's background color. \n- **--calcite-color-picker-border-color** - Specifies the component's border color. \n- **--calcite-color-picker-corner-radius** - Specifies the component's corner radius. \n- **--calcite-color-picker-shadow** - Specifies the component's shadow. \n- **--calcite-color-picker-text-color** - Specifies the component's text color. \n- **--calcite-color-picker-input-background-color** - Specifies the component's input background color. \n- **--calcite-color-picker-input-border-color** - Specifies the component's input border color. \n- **--calcite-color-picker-input-text-color** - Specifies the component's input text color. \n- **--calcite-color-picker-input-prefix-text-color** - When `hexDisabled` is not `true`, specifies the component's input prefix text color. \n- **--calcite-color-picker-input-suffix-text-color** - When `alphaChannel` is `true`, specifies the component's input suffix text color. \n- **--calcite-color-picker-tab-border-color** - Specifies the component's tab border color. \n- **--calcite-color-picker-tab-text-color** - Specifies the component's tab text color. \n- **--calcite-color-picker-tab-accent-color-press** - Specifies the component's tab accent color when selected or active. \n- **--calcite-color-picker-swatch-corner-radius** - Specifies the component's swatch corner radius. \n- **--calcite-color-picker-action-text-color-press** - Specifies the component's `savedColors` action text color when pressed. \n- **--calcite-color-picker-action-text-color-hover** - Specifies the component's `savedColors` action text color when hovered. \n- **--calcite-color-picker-action-text-color** - Specifies the component's `savedColors` action text color. ","attributes":[{"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":"field-disabled","description":"When `true`, hides the color field.","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":"hsv"},{"name":"rgb"},{"name":"rgb-css"},{"name":"rgba-css"},{"name":"hsl-css"},{"name":"hsla-css"},{"name":"rgba"},{"name":"hsl"},{"name":"hsla"},{"name":"hsva"}]},{"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":"s"},{"name":"m"},{"name":"l"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"s"},{"name":"m"},{"name":"l"}]},{"name":"value","description":"The hex value.","values":[]}],"references":[]},{"name":"calcite-color-picker-swatch","description":"**Deprecated**: Use the `calcite-swatch-group` and `calcite-swatch` components instead..\n--\n\n### Methods\n- `componentOnReady(): Promise<this>` - 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":"s"},{"name":"m"},{"name":"l"}]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise<void>` - Updates the component's position.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-combobox-item`s.\n- **label-content** - A slot for rendering content next to the component's `labelText`.\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`, disables value-clearing.","values":[]},{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"filter-text","description":"The component's filter input field text.","values":[]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","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. Required 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":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"placeholder","description":"Specifies the input's placeholder text.","values":[]},{"name":"placeholder-icon","description":"Specifies the input's placeholder icon.","values":[]},{"name":"placeholder-icon-flip-rtl","description":"When `true` and the element direction is right-to-left (`\"rtl\"`), flips the input's `placeholderIcon`.","values":[]},{"name":"placement","description":"Specifies the component's position relative to the `referenceElement`.","values":[{"name":"auto"},{"name":"top"},{"name":"bottom"},{"name":"left"},{"name":"right"},{"name":"auto-start"},{"name":"auto-end"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"},{"name":"right-start"},{"name":"right-end"},{"name":"left-start"},{"name":"left-end"},{"name":"leading-start"},{"name":"leading"},{"name":"leading-end"},{"name":"trailing-end"},{"name":"trailing"},{"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":"s"},{"name":"m"},{"name":"l"}]},{"name":"select-all-enabled","description":"When `true` and `selectionMode` is `\"multiple\"` or `\"ancestors\"`, displays 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":"single"},{"name":"all"},{"name":"fit"}]},{"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":"single"},{"name":"single-persist"},{"name":"ancestors"},{"name":"multiple"}]},{"name":"status","description":"Specifies the input field's status, which determines message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","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(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<this>` - 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** - When `active`, specifies the component's background color. \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":"Specifies a description for the component. Displays below the heading.","values":[]},{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's 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":"Specifies the component's heading text.","values":[]},{"name":"icon","description":"Specifies an icon to display.","values":[]},{"name":"icon-flip-rtl","description":"When `true` and the element direction is right-to-left (`\"rtl\"`), flips the component`s `icon`.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"selected","description":"When `true`, the component is selected.","values":[]},{"name":"short-heading","description":"Specifies 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":"value","description":"The component's value. Falls back to `heading` if not provided.","values":[]}],"references":[]},{"name":"calcite-combobox-item-group","description":"### Methods\n- `componentOnReady(): Promise<this>` - 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 component's text color. \n- **--calcite-combobox-item-group-border-color** - Specifies the component's border color. ","attributes":[{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"position","description":"Specifies the group's position in the `calcite-combobox` menu.","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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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** - When `range` is `true`, specifies the divider color between the component's calendars. \n- **--calcite-date-picker-week-header-text-color** - Specifies the text color of the component's week header. \n- **--calcite-date-picker-header-action-background-color** - Specifies the background color of component`s header actions. \n- **--calcite-date-picker-header-action-background-color-hover** - Specifies the background color of component`s header actions when hovered. \n- **--calcite-date-picker-header-action-background-color-press** - Specifies the background color of component`s header actions when pressed. \n- **--calcite-date-picker-header-action-text-color** - Specifies the text color of the component's header actions. \n- **--calcite-date-picker-header-action-text-color-press** - Specifies the text color of the component's header actions when pressed. \n- **--calcite-date-picker-year-text-color** - Specifies the text color of the component's year and suffix. \n- **--calcite-date-picker-month-select-font-size** - Specifies the font size of the component's month selector. \n- **--calcite-date-picker-month-select-text-color** - Specifies the text color of the component's month selector. \n- **--calcite-date-picker-month-select-icon-color** - Specifies the icon color of the component's month selector. \n- **--calcite-date-picker-month-select-icon-color-hover** - Specifies the icon color of the component's month selector when hovered. \n- **--calcite-date-picker-day-background-color** - Specifies the background color of the component's day elements. \n- **--calcite-date-picker-day-background-color-hover** - Specifies the background color of the component's day elements when hovered. \n- **--calcite-date-picker-day-text-color** - Specifies the text color of the component's day elements. \n- **--calcite-date-picker-day-text-color-hover** - Specifies the text color of the component's day elements when hovered. \n- **--calcite-date-picker-current-day-text-color** - Specifies the text color of the component's current day. \n- **--calcite-date-picker-day-background-color-selected** - Specifies the background color of the component's selected day. \n- **--calcite-date-picker-day-text-color-selected** - Specifies the text color of the component's selected day elements. \n- **--calcite-date-picker-day-range-text-color** - Specifies the text color of component's selected day range. \n- **--calcite-date-picker-day-range-background-color** - Specifies the background color the component's selected day range. \n- **--calcite-date-picker-day-outside-range-background-color-hover** - Specifies the background color of the component's day elements outside the current range when hovered. \n- **--calcite-date-picker-day-outside-range-text-color-hover** - Specifies the text color of the component's day elements outside the 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":"start"},{"name":"end"}]},{"name":"calendars","description":"When `range` is `true`, specifies the number of calendars displayed.","values":[{"name":"1"},{"name":"2"}]},{"name":"heading-level","description":"Specifies the heading level number 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 component's layout.","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 component's month style.","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":"s"},{"name":"m"},{"name":"l"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"s"},{"name":"m"},{"name":"l"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.","attributes":[{"name":"calendars","description":"Specifies the number of calendars displayed when `range` is `true`.","values":[{"name":"1"},{"name":"2"}]},{"name":"heading-level","description":"Specifies the heading level number 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":"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":"s"},{"name":"m"},{"name":"l"}]}],"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 opened and animation is complete.\n- **calciteDialogScroll** - Fires when the component's content is scrolled.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `scrollContentTo(options?: ScrollToOptions): Promise<void>` - Scrolls the component's content to a specified set of coordinates.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's \"close\" button (the first focusable item).\n- `updateFocusTrapElements(extraContainers?: FocusTrapOptions[\"extraContainers\"]): Promise<void>` - Updates the element(s) that are included in the focus-trap of the component.\n- `updateSize(size: {\n    inline?: number | null;\n    block?: number | null;\n}): Promise<void>` - Updates the dialog's inline and/or block size via method call.\n\nUse this method to programmatically override the dialog's width (inline) and/or height (block).\nPass `null` to clear the override and revert to the default or CSS variable size.\n\n### Slots\n- _default_ - A slot for adding content.\n- **custom-content** - A slot for displaying custom content. Will prevent the rendering of any default component 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** - When `placement` is `\"cover\"`, specifies the component's width, using `px`, `em`, `rem`, `vw`, or `%`. Does not exceed the viewport's width. \n- **--calcite-dialog-min-size-x** - Specifies the component's minimum width, using `px`, `em`, `rem`, `vw`, or `%`. \n- **--calcite-dialog-max-size-x** - Specifies the component's maximum width, using `px`, `em`, `rem`, `vw`, or `%`. \n- **--calcite-dialog-size-y** - When `placement` is `\"cover\"`, specifies the component's height, using `px`, `em`, `rem`, `vh`, or `%`. Does not exceed the viewport's height. \n- **--calcite-dialog-min-size-y** - Specifies the component's minimum height, using `px`, `em`, `rem`, `vh`, or `%`. \n- **--calcite-dialog-max-size-y** - Specifies the component's maximum height, 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 component's horizontal offset. \n- **--calcite-dialog-offset-y** - Specifies the component's vertical offset. \n- **--calcite-dialog-background-color** - Specifies the component's background color. \n- **--calcite-dialog-icon-color** - Specifies the color of the component's icon. \n- **--calcite-dialog-accent-color** - When `kind` is specified, specifies the component's accent color. \n- **--calcite-dialog-corner-radius** - Specifies the component's corner radius. \n- **--calcite-dialog-heading-text-color** - Specifies the text color of the component's `heading`. \n- **--calcite-dialog-description-text-color** - Specifies the text color of the component's `description`. \n- **--calcite-dialog-header-background-color** - Specifies the background color of the component's header. \n- **--calcite-dialog-header-action-background-color** - Specifies the background color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s. \n- **--calcite-dialog-header-action-background-color-hover** - Specifies the background color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s when hovered. \n- **--calcite-dialog-header-action-background-color-press** - Specifies the background color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s when pressed. \n- **--calcite-dialog-header-action-text-color** - Specifies the text color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s. \n- **--calcite-dialog-header-action-text-color-press** - Specifies the text color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s when pressed or hovered. \n- **--calcite-dialog-footer-background-color** - Specifies the background color of the component's footer. \n- **--calcite-dialog-space** - Specifies the padding of the component's `unnamed (default)` slot. \n- **--calcite-dialog-header-content-space** - Specifies the padding of the component's `header-content` slot. \n- **--calcite-dialog-action-menu-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. ","attributes":[{"name":"close-disabled","description":"When `true`, disables the component's close button.","values":[]},{"name":"description","description":"Specifies the component's description.","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":"fullscreen-disabled","description":"When `true`, the component will not display at fullscreen, which may be desired in limited display areas, such as mobile devices.","values":[]},{"name":"heading","description":"Specifies the component's heading text.","values":[]},{"name":"heading-level","description":"Specifies the heading level number 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` and the element direction is right-to-left (`\"rtl\"`), flips the component`s `icon`.","values":[]},{"name":"kind","description":"Specifies the component's kind, which determines the top border styling.","values":[{"name":"brand"},{"name":"danger"},{"name":"info"},{"name":"warning"},{"name":"success"}]},{"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":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"placement","description":"Specifies the component's placement.","values":[{"name":"center"},{"name":"top"},{"name":"bottom"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"},{"name":"cover"}]},{"name":"resizable","description":"When `true`, the component is resizable.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]},{"name":"width","description":"Specifies the component's width.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"width-scale","description":"**Deprecated**: in v3.0.0, removal target v6.0.0 - Use the `width` property instead.. Specifies the component's width.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]}],"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 opened and animation is complete.\n- **calciteDropdownSelect** - Fires when a `calcite-dropdown-item`'s selection changes.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise<void>` - Updates the component's position.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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 component.\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`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"max-items","description":"Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scrollbar.\nValue must be greater than `0`, and does not include `groupTitle`s from `calcite-dropdown-group`.","values":[]},{"name":"offset-distance","description":"Specifies the distance to position the component away from the `referenceElement`.","values":[]},{"name":"offset-skidding","description":"Specifies the distance to position the component along the `referenceElement`.","values":[]},{"name":"open","description":"When `true`, displays and positions the component.","values":[]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"placement","description":"Determines the component's placement relative to the container element.","values":[{"name":"top"},{"name":"bottom"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"}]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]},{"name":"type","description":"Specifies the type of action on the container element to open the component.","values":[{"name":"hover"},{"name":"click"}]},{"name":"width","description":"Specifies the component's width.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"width-scale","description":"**Deprecated**: in v3.0.0, removal target v6.0.0 - Use the `width` property instead.. Specifies the component's width.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]}],"references":[]},{"name":"calcite-dropdown-group","description":"### Methods\n- `componentOnReady(): Promise<this>` - 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 components's border color. \n- **--calcite-dropdown-group-title-text-color** - Specifies the component's `groupTitle` color. ","attributes":[{"name":"group-title","description":"When specified, 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":"none"},{"name":"single"},{"name":"multiple"}]}],"references":[]},{"name":"calcite-dropdown-item","description":"### Events\n- **calciteDropdownItemSelect** - Fires when the component is selected.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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 component's background color when hovered. \n- **--calcite-dropdown-item-background-color-press** - Specifies the components's background color when `selected` or active. \n- **--calcite-dropdown-item-icon-color-hover** - [Deprecated] Specifies the color of the component's selection icon when hovered. \n- **--calcite-dropdown-item-icon-color-press** - Specifies the color of the component's selection icon when `selected` or active. \n- **--calcite-dropdown-item-text-color-press** - Specifies the component's text color when `selected` or active. \n- **--calcite-dropdown-item-text-color** - Specifies the component's text color. ","attributes":[{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's 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":"When the element direction is right-to-left (`\"rtl\"`), flips the component's `iconStart` and/or `iconEnd`.","values":[{"name":"start"},{"name":"end"},{"name":"both"}]},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"rel","description":"Specifies the relationship to the linked resource 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 resource.","values":[]}],"references":[]},{"name":"calcite-fab","description":"### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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 component's appearance style.","values":[{"name":"solid"},{"name":"outline-fill"}]},{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"icon","description":"Specifies an icon to display.","values":[]},{"name":"icon-flip-rtl","description":"When `true` and the element direction is right-to-left (`\"rtl\"`), flips the component`s `icon`.","values":[]},{"name":"kind","description":"Specifies the component's kind, which determines border and background styling.","values":[{"name":"brand"},{"name":"danger"},{"name":"inverse"},{"name":"neutral"}]},{"name":"label","description":"Specifies an accessible label 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":"s"},{"name":"m"},{"name":"l"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `filter(value?: string): Promise<void>` - Performs a filter on the component.\n\nThis method can be useful because filtering is delayed and asynchronous.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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 component's input background color. \n- **--calcite-filter-input-border-color** - Specifies the component's input border color. \n- **--calcite-filter-input-corner-radius** - Specifies the component's input corner radius. \n- **--calcite-filter-input-shadow** - Specifies the component's input shadow. \n- **--calcite-filter-input-icon-color** - Specifies the component's input icon color. \n- **--calcite-filter-input-text-color** - Specifies the component's input text color. \n- **--calcite-filter-input-placeholder-text-color** - Specifies the component's input placeholder text color. \n- **--calcite-filter-input-actions-background-color** - Specifies the background color of the component's input `clearable` element. \n- **--calcite-filter-input-actions-background-color-hover** - Specifies the background color of the component's input `clearable` element when hovered. \n- **--calcite-filter-input-actions-background-color-press** - Specifies the background color of the component's input `clearable` element when pressed. \n- **--calcite-filter-input-actions-icon-color** - Specifies the icon color of the component's input `clearable` element. \n- **--calcite-filter-input-actions-icon-color-hover** - Specifies the icon color of the component's input `clearable` element when hovered. \n- **--calcite-filter-input-actions-icon-color-press** - Specifies the icon color of the component's input `clearable` element when pressed. ","attributes":[{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"placeholder","description":"Specifies the component's input placeholder text.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"value","description":"The component's value.","values":[]}],"references":[]},{"name":"calcite-flow","description":"### Methods\n- `back(): Promise<FlowItem | FlowItemLikeElement>` - Removes selection of the currently active `calcite-flow-item`.\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-flow-item`s 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 component's back button is clicked.\n- **calciteFlowItemClose** - Fires when the component's close button is clicked.\n- **calciteFlowItemCollapse** - Fires when the component's content area is collapsed.\n- **calciteFlowItemExpand** - Fires when the component's content area is expanded.\n- **calciteFlowItemScroll** - Fires when the component's content is scrolled.\n- **calciteFlowItemToggle** - Fires when the component's collapse button is clicked.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `scrollContentTo(options?: ScrollToOptions): Promise<void>` - Scrolls the component's content to a specified set of coordinates.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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-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 any `calcite-action`s in the component's header when hovered. \n- **--calcite-flow-header-action-background-color-press** - Specifies the background color of any `calcite-action`s in the component's header when pressed. \n- **--calcite-flow-header-action-background-color** - Specifies the background color of any `calcite-action`s in the component's header. \n- **--calcite-flow-header-action-indicator-color** - Specifies the color of any `calcite-action`s indicator in the component's header. \n- **--calcite-flow-header-action-text-color-press** - Specifies the text color of any `calcite-action`s in the component's header when pressed. \n- **--calcite-flow-header-action-text-color** - Specifies the text color of any `calcite-action`s in the component's 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`, hides the component.","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":"Specifies a the component's description.","values":[]},{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"heading","description":"Specifies the component's heading text.","values":[]},{"name":"heading-level","description":"Specifies the heading level number 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` and the element direction is right-to-left (`\"rtl\"`), flips the component`s `icon`.","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":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"selected","description":"When `true`, the component is displayed within a parent `calcite-flow`.","values":[]},{"name":"show-back-button","description":"When `true`, displays a back button in the component's header.","values":[]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]}],"references":[]},{"name":"calcite-graph","description":"### Methods\n- `componentOnReady(): Promise<this>` - 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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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<this>` - 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` and the element direction is right-to-left (`\"rtl\"`), flips the component's `icon`.","values":[]},{"name":"icon","description":"Specifies an icon to display.","values":[]},{"name":"preload","description":"When `true`, preloads the `icon` data.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"text-label","description":"Specifies the component's accessible name.\n\nIt is recommended to set this value if your icon is semantic.","values":[]}],"references":[]},{"name":"calcite-inline-editable","description":"### Events\n- **calciteInlineEditableEditCancel** - Fires when the component's \"cancel editing\" button is pressed.\n- **calciteInlineEditableEditConfirm** - Fires when the component's \"confirm edits\" button is pressed.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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** - When `appearance=\"solid\"` or `appearance=\"outline-fill\"`, specifies the background color of the component's button element. \n- **--calcite-inline-editable-button-corner-radius** - Specifies the corner radius of the component's button element. \n- **--calcite-inline-editable-button-loader-color** - Specifies the loader color of the components's button element. \n- **--calcite-inline-editable-button-text-color** - Specifies the text color of the component's button element. ","attributes":[{"name":"controls","description":"When `true` and `editingEnabled` is `true`, displays save and cancel controls.","values":[]},{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"editing-enabled","description":"When `true`, inline editing is enabled.","values":[]},{"name":"loading","description":"When `true`, a busy indicator is displayed.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `selectText(): Promise<void>` - Selects the text of the component's `value`.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **action** - A slot for positioning a `calcite-action` or other interactive content adjacent to the component.\n- **label-content** - A slot for rendering content next to the component's `labelText`.\n\n### CSS Properties\n- **--calcite-input-prefix-size** - When `prefixText` is provided, specifies the width of the component's prefix element. \n- **--calcite-input-suffix-size** - When `suffixText` is provided, specifies the width of the component's suffix element. \n- **--calcite-input-prefix-text-color** - When `prefixText` is provided, specifies the text color of the component's prefix element. \n- **--calcite-input-suffix-text-color** - When `suffixText` is provided, specifies the text color of the component's suffix element. \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 component's shadow. \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** - When `loading`, specifies the background color of the component's `loading` element. \n- **--calcite-input-loading-fill-color** - When `loading`, specifies the fill color of the component's `loading` element. ","attributes":[{"name":"accept","description":"When `type` is `\"file\"`, specifies a comma separated list of unique file type specifiers for limiting accepted file types.\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":"start"},{"name":"end"}]},{"name":"autocomplete","description":"Specifies the type of content to autocomplete, for use in forms.\nRead the native attribute's documentation on MDN for more info.","values":[]},{"name":"clearable","description":"When `true` and the component has a `value`, a clear button is displayed. The clear button shows by default for `\"search\"`, `\"time\"`, and `\"date\"` types.","values":[]},{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","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`, displays a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.","values":[]},{"name":"icon-flip-rtl","description":"When `true` and the element direction is right-to-left (`\"rtl\"`), flips the component`s `icon`.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","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` and `type` is `\"email\"` or `\"file\"`, the component can accept more than one value.\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":"When `type=\"number\"`, specifies the placement of the buttons.","values":[{"name":"horizontal"},{"name":"vertical"},{"name":"none"}]},{"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 the component's placeholder text.","values":[]},{"name":"prefix-text","description":"Specifies text to display at 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":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the input field's status, which determines message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"name":"step","description":"Specifies the granularity the component's `value` must adhere to.","values":[{"name":"any"}]},{"name":"suffix-text","description":"Specifies text to display at 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\"`.","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":"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 opened and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise<void>` - Updates the component's position.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **label-content** - A slot for rendering content next to the component's `labelText`.\n\n### CSS Properties\n- **--calcite-input-date-picker-actions-icon-color** - Specifies the component's actions icon color. \n- **--calcite-input-date-picker-actions-icon-color-hover** - Specifies the component's actions icon color on hover. \n- **--calcite-input-date-picker-background-color** - Specifies the component's input background color. \n- **--calcite-input-date-picker-border-color** - Specifies the component's input border color. \n- **--calcite-input-date-picker-calendar-actions-background-color** - Specifies the background color of the component's calendar actions. \n- **--calcite-input-date-picker-calendar-actions-background-color-hover** - Specifies the background color of the component's calendar actions when hovered. \n- **--calcite-input-date-picker-calendar-actions-background-color-press** - Specifies the background color of the component's calendar actions when pressed. \n- **--calcite-input-date-picker-calendar-actions-text-color** - Specifies the text color of the component's calendar actions. \n- **--calcite-input-date-picker-calendar-actions-text-color-press** - Specifies the text color of the component's calendar actions when pressed. \n- **--calcite-input-date-picker-calendar-border-color** - Specifies the border color of the component's calendar. \n- **--calcite-input-date-picker-calendar-corner-radius** - Specifies the corner radius of the component's calendar. \n- **--calcite-input-date-picker-calendar-current-day-text-color** - Specifies the text color of the component's calendar current day element. \n- **--calcite-input-date-picker-calendar-day-background-color** - Specifies the background color of the component's calendar day elements. \n- **--calcite-input-date-picker-calendar-day-background-color-hover** - Specifies the background color of the component's calendar day elements when hovered. \n- **--calcite-input-date-picker-calendar-day-current-text-color** - [Deprecated] Use `--calcite-input-date-picker-calendar-current-day-text-color`. Specifies the text color of current day of the component's date-picker. \n- **--calcite-input-date-picker-calendar-day-range-text-color** - Specifies the text color of the component's calendar selected day range. \n- **--calcite-input-date-picker-calendar-day-text-color-selected** - Specifies the text color of component's calendar selected day. \n- **--calcite-input-date-picker-calendar-day-outside-range-background-color-hover** - Specifies the background color of the component's calendar day elements outside the current range when hovered. \n- **--calcite-input-date-picker-calendar-day-outside-range-text-color-hover** - Specifies the text color of the component's calendar day elements outside the current range when hovered. \n- **--calcite-input-date-picker-calendar-day-text-color** - Specifies the text color of the component's calendar day elements. \n- **--calcite-input-date-picker-calendar-day-text-color-hover** - Specifies the text color of the component's calendar day elements when hovered. \n- **--calcite-input-date-picker-calendar-selected-background-color** - Specifies the background color of the component's calendar selected day and day range. \n- **--calcite-input-date-picker-calendar-shadow** - Specifies the component's calendar shadow. \n- **--calcite-input-date-picker-calendar-icon-color** - Specifies the component's calendar icon color. \n- **--calcite-input-date-picker-calendar-icon-color-hover** - Specifies the component's calendar icon color when hovered. \n- **--calcite-input-date-picker-calendar-month-select-text-color** - Specifies the text color of the component's calendar selected month. \n- **--calcite-input-date-picker-calendar-range-divider-color** - When `range` is `true`, specifies the divider color between the component's calendars. \n- **--calcite-input-date-picker-calendar-text-color** - Specifies the text color of the component's calendar week, year & suffix. \n- **--calcite-input-date-picker-corner-radius** - Specifies the component's input corner radius. \n- **--calcite-input-date-picker-divider-color** - When `range` is `true`, specifies the component's divider color between two inputs. \n- **--calcite-input-date-picker-icon-color** - Specifies the component's input icon color. \n- **--calcite-input-date-picker-placeholder-text-color** - Specifies the component's input placeholder text color. \n- **--calcite-input-date-picker-shadow** - Specifies the component's input shadow. \n- **--calcite-input-date-picker-text-color** - Specifies the component's input text color. ","attributes":[{"name":"calendars","description":"When `range` is `true`, specifies the number of calendars displayed.","values":[{"name":"1"},{"name":"2"}]},{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"focus-trap-disabled","description":"When `true`, prevents focus trapping.","values":[]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","values":[]},{"name":"heading-level","description":"Specifies the heading level number 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":"Specifies an accessible label for the component.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","values":[]},{"name":"layout","description":"Defines the component's layout.","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 component's month style.","values":[{"name":"abbreviated"},{"name":"wide"}]},{"name":"name","description":"Specifies the name of the component. Required 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":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"placement","description":"Determines the `calcite-date-picker`'s placement relative to the input.","values":[{"name":"top"},{"name":"bottom"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"}]},{"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":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the input field's status, which determines message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","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":"Selected date as a string in ISO format (`\"yyyy-mm-dd\"`).","values":[]}],"references":[]},{"name":"calcite-input-message","description":"**Deprecated**: in v5.0.0, removal target v6.0.0 - Use the `calcite-notice` component with `appearance=\"transparent\"` instead..\n--\n\n### Methods\n- `componentOnReady(): Promise<this>` - 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 component's top margin spacing. \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` and the element direction is right-to-left (`\"rtl\"`), flips the component`s `icon`.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the input field's status, which determines message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `selectText(): Promise<void>` - Selects the text of the component's `value`.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **action** - A slot for positioning a `calcite-action` or other interactive content adjacent to the component.\n- **label-content** - A slot for rendering content next to the component's `labelText`.\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** - When `loading`, specifies the background color of the component's `loading` element. \n- **--calcite-input-loading-fill-color** - When `loading`, specifies the fill color of the component's `loading` element. \n- **--calcite-input-number-background-color** - Specifies the component's background color. \n- **--calcite-input-number-border-color** - Specifies the component's border color. \n- **--calcite-input-number-corner-radius** - Specifies the component's border radius. \n- **--calcite-input-number-icon-color** - Specifies the component's icon color. \n- **--calcite-input-number-height** - Specifies the component's height. \n- **--calcite-input-number-placeholder-text-color** - Specifies the text color of the component's placeholder. \n- **--calcite-input-number-text-color** - Specifies the component's text color. \n- **--calcite-input-number-text-color-focus** - Specifies the component's text color when focused. \n- **--calcite-input-prefix-size** - When `prefixText` is provided, specifies the width of the component's prefix element. \n- **--calcite-input-prefix-text-color** - When `prefixText` is provided, specifies the text color of the component's prefix element. \n- **--calcite-input-suffix-size** - When `suffixText` is provided, specifies the width of the component's suffix element. \n- **--calcite-input-suffix-text-color** - When `suffixText` is provided, specifies the text color of the component's suffix element. ","attributes":[{"name":"alignment","description":"Specifies the text alignment of the component's `value`.","values":[{"name":"start"},{"name":"center"},{"name":"end"}]},{"name":"autocomplete","description":"Specifies the type of content to autocomplete, for use in forms.\nRead the native attribute's documentation on MDN for more info.","values":[]},{"name":"clearable","description":"When `true` and the component has a `value`, a clear button is displayed.","values":[]},{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","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` and the element direction is right-to-left (`\"rtl\"`), flips the component`s `icon`.","values":[]},{"name":"integer","description":"When `true`, restricts the component to integer numbers only and disables exponential notation.","values":[]},{"name":"label","description":"Specifies an accessible label for the component's button or hyperlink.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","values":[]},{"name":"loading","description":"When `true`, displays a busy indicator.","values":[]},{"name":"max","description":"When the component resides in a form,\nspecifies the maximum `value`.","values":[]},{"name":"max-length","description":"**Deprecated**: in v3.0.0, removal target v6.0.0 - 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**: in v3.0.0, removal target v6.0.0 - 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":"vertical"},{"name":"none"}]},{"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 component's placeholder text.","values":[]},{"name":"prefix-text","description":"Specifies text to display at 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":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the input field's status, which determines message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"name":"step","description":"Specifies the granularity that the component's `value` must adhere to.","values":[{"name":"any"}]},{"name":"suffix-text","description":"Specifies text to display at 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<this>` - Create a promise that resolves once component is fully loaded.\n- `selectText(): Promise<void>` - Selects the text of the component's `value`.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **action** - A slot for positioning a `calcite-action` or other interactive content adjacent to the component.\n- **label-content** - A slot for rendering content next to the component's `labelText`.\n\n### CSS Properties\n- **--calcite-input-action-background-color** - Specifies the background color of the component's `clearable` element. \n- **--calcite-input-action-background-color-hover** - Specifies the background color of the component's `clearable` element when hovered. \n- **--calcite-input-action-background-color-press** - Specifies the background color of the component's `clearable` element when pressed. \n- **--calcite-input-action-icon-color** - Specifies the icon color of the component's `clearable` element. \n- **--calcite-input-action-icon-color-hover** - Specifies the icon color of the component's `clearable` element when hovered. \n- **--calcite-input-action-icon-color-press** - Specifies the icon color of the component's `clearable` element when pressed. \n- **--calcite-input-loading-background-color** - When `loading`, specifies the background color of the component`s `loading` element. \n- **--calcite-input-loading-fill-color** - When `loading`, specifies the fill color of the component`s `loading` element. \n- **--calcite-input-prefix-size-x** - When `prefixText` is provided, specifies the width of the component's prefix element. \n- **--calcite-input-prefix-text-color** - When `prefixText` is provided, specifies the text color of the component's prefix element. \n- **--calcite-input-suffix-size-x** - When `suffixText` is provided, specifies the width of the component's suffix element. \n- **--calcite-input-suffix-text-color** - When `suffixText` is provided, specifies the color of the component's suffix element. \n- **--calcite-input-text-background-color** - Specifies the component's background color. \n- **--calcite-input-text-border-color** - Specifies the component's border color. \n- **--calcite-input-text-corner-radius** - Specifies the component's border radius. \n- **--calcite-input-text-icon-color** - Specifies the component's `icon` color. \n- **--calcite-input-text-placeholder-text-color** - Specifies the component's `placeholder` text color. \n- **--calcite-input-text-text-color** - Specifies the component's text color. \n- **--calcite-input-text-text-color-focus** - Specifies the component's text color when focused. ","attributes":[{"name":"alignment","description":"Specifies the text alignment of the component's `value`.","values":[{"name":"start"},{"name":"center"},{"name":"end"}]},{"name":"autocomplete","description":"Specifies the type of content to autocomplete, for use in forms.\nRead the native attribute's documentation on MDN for more info.","values":[]},{"name":"clearable","description":"When `true` and the component has a `value`, a clear button is displayed.","values":[]},{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","values":[]},{"name":"icon","description":"Specifies an icon to display.","values":[]},{"name":"icon-flip-rtl","description":"When `true` and the element direction is right-to-left (`\"rtl\"`), flips the component`s `icon`.","values":[]},{"name":"label","description":"Specifies an accessible label for the component's button or hyperlink.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","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":"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 the component's placeholder text.","values":[]},{"name":"prefix-text","description":"Specifies text to display at 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":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the input field's status, which determines message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"name":"suffix-text","description":"Specifies text to display at 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 opened and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise<void>` - Updates the component's position.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **label-content** - A slot for rendering content next to the component's `labelText`.\n\n### CSS Properties\n- **--calcite-input-time-picker-background-color** - Specifies the component's background color. \n- **--calcite-input-time-picker-border-color** - Specifies the component's border color. \n- **--calcite-input-time-picker-icon-color** - Specifies the component's icon color. \n- **--calcite-input-time-picker-icon-color-hover** - Specifies the component's icon color when hovered. \n- **--calcite-input-time-picker-shadow** - Specifies the component's shadow. \n- **--calcite-input-time-picker-corner-radius** - Specifies the component's border radius. \n- **--calcite-input-time-picker-input-background-color** - Specifies the component's input background color. \n- **--calcite-input-time-picker-input-text-color** - Specifies the component's input text color. \n- **--calcite-input-time-picker-input-shadow** - Specifies the component's input shadow. \n- **--calcite-input-time-picker-input-corner-radius** - Specifies the component's input border radius. \n- **--calcite-input-time-picker-input-border-color** - Specifies the component's input border color. \n- **--calcite-input-time-picker-digit-text-color** - Specifies the component's digit text color. \n- **--calcite-input-time-picker-digit-icon-color** - Specifies the component's digit icon color. \n- **--calcite-input-time-picker-digit-border-color-press** - Specifies the component's digit border color when pressed. \n- **--calcite-input-time-picker-digit-border-color-hover** - Specifies the component's digit border color when hovered. \n- **--calcite-input-time-picker-action-background-color-hover** - Specifies the background color of the component's actions when hovered. \n- **--calcite-input-time-picker-action-background-color-press** - Specifies the background color of the component's actions when active. ","attributes":[{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"focus-trap-disabled","description":"When `true`, prevents focus trapping.","values":[]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","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":"24"},{"name":"user"},{"name":"12"}]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","values":[]},{"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. Required 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":"open","description":"When `true`, displays the `calcite-time-picker` component.","values":[]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"placement","description":"Determines the `calcite-time-picker`'s position relative to the input.","values":[{"name":"auto"},{"name":"top"},{"name":"bottom"},{"name":"left"},{"name":"right"},{"name":"auto-start"},{"name":"auto-end"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"},{"name":"right-start"},{"name":"right-end"},{"name":"left-start"},{"name":"left-end"},{"name":"leading-start"},{"name":"leading"},{"name":"leading-end"},{"name":"trailing-end"},{"name":"trailing"},{"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":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the input field's status, which determines message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"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 when the component is closed and animation is complete.\n- **calciteInputTimeZoneOpen** - Fires when the component is opened and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **label-content** - A slot for rendering content next to the component's `labelText`.","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`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","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. Required to pass the component's `value` on form submission.","values":[]},{"name":"offset-style","description":"When `mode` is `\"offset\"`, 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`.","values":[{"name":"user"},{"name":"utc"},{"name":"gmt"}]},{"name":"open","description":"When `true`, displays and positions the component.","values":[]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"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":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the input field's status, which determines message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","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, 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<this>` - 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 component's text alignment.","values":[{"name":"start"},{"name":"center"},{"name":"end"}]},{"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 component's layout in relation to the slotted component. Use `\"inline\"` positions to wrap the label and slotted component on the same line.  [Deprecated] The `\"default\"` value is deprecated, use `\"block\"` instead.","values":[{"name":"block"},{"name":"inline"},{"name":"inline-space-between"},{"name":"default"}]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]}],"references":[]},{"name":"calcite-link","description":"Any attributes placed on <calcite-link> 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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"download","description":"When specified, 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":"When `true` and the element direction is right-to-left (`\"rtl\"`), flips the component's `iconStart` and/or `iconEnd`.","values":[{"name":"start"},{"name":"end"},{"name":"both"}]},{"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 resource defined in `href`.","values":[]},{"name":"target","description":"Specifies the frame or window to open the linked resource.","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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"nested"},{"name":"flat"}]},{"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":"Specifies 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 component'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, where\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 label 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":"s"},{"name":"m"},{"name":"l"}]},{"name":"selection-appearance","description":"Specifies the selection appearance, where\n\n`\"icon\"` displays a checkmark or dot,\n\n`\"border\"` [Deprecated] - Use `\"highlight\"` instead - displays a border, or\n\n`\"highlight\"` displays background highlight.","values":[{"name":"icon"},{"name":"border"},{"name":"highlight"}]},{"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":"none"},{"name":"single"},{"name":"single-persist"},{"name":"multiple"}]},{"name":"sort-disabled","description":"When `true`, and a `group` is defined, `calcite-list-item`s are no longer sortable.","values":[]}],"references":[]},{"name":"calcite-list-item","description":"### Events\n- **calciteListItemClose** - Fires when the close button is clicked.\n- **calciteListItemCollapse** - Fires when the component's content area is collapsed.\n- **calciteListItemExpand** - Fires when the component's content area is expanded.\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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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 component's `label` and `description`.\n- **content** - A slot for adding non-actionable, centered content in place of the component's `label` and `description`.\n- **content-end** - A slot for adding non-actionable elements after the component's `label` and `description`.\n- **actions-end** - A slot for adding actionable `calcite-action` elements after the component's content.\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`, displays a close button in the component.","values":[]},{"name":"closed","description":"When `true`, hides the component.","values":[]},{"name":"description","description":"Specifies a description for the component. Displays below the `label`.","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`, expands the component and its contents.","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":"start"},{"name":"end"},{"name":"both"}]},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","values":[]},{"name":"label","description":"Specifies an accessible label for the component, displays above the `description`.","values":[]},{"name":"open","description":"**Deprecated**: in v3.1.0, removal target v6.0.0 - Use the `expanded` property instead.. When `true`, the item is open to show child components.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"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":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]},{"name":"unavailable","description":"When `true`, the component's content displays as inactive.","values":[]},{"name":"value","description":"The component's value.","values":[]}],"references":[]},{"name":"calcite-list-item-group","description":"### Methods\n- `componentOnReady(): Promise<this>` - 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":"Specifies the heading text for the nested `calcite-list-item` rows.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]}],"references":[]},{"name":"calcite-loader","description":"### Methods\n- `componentOnReady(): Promise<this>` - 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** - 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":"Specifies an accessible label for the component.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"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":"indeterminate"},{"name":"determinate"},{"name":"determinate-value"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.","attributes":[{"name":"label","description":"Specifies an accessible label 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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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** - When `active`, specifies the component's border color. \n- **--calcite-menu-background-color** - Specifies the component's background color. \n- **--calcite-menu-item-sub-menu-border-color** - Specifies the submenu's border color. \n- **--calcite-menu-item-sub-menu-corner-radius** - Specifies the submenu's border radius. \n- **--calcite-menu-text-color** - Specifies the component's text color. ","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":"start"},{"name":"end"},{"name":"both"}]},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","values":[]},{"name":"label","description":"Specifies an accessible label 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<this>` - 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 of the component.","values":[{"name":"solid"},{"name":"outline"},{"name":"outline-fill"}]},{"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\n`\"single\"` displays a single color, and\n`\"range\"` displays a range of colors based on provided `low`, `high`, `min` or `max` values.","values":[{"name":"single"},{"name":"range"}]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","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":"Specifies an accessible label 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 component's highest allowed value.","values":[]},{"name":"min","description":"Specifies the component's lowest allowed value.","values":[]},{"name":"name","description":"Specifies the name of the component. Required 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-labels","description":"When `true`, displays the values of `high`, `low`, `min`, and `max`.","values":[]},{"name":"range-label-type","description":"When `rangeLabels` is `true`, specifies the format of displayed labels.","values":[{"name":"percent"},{"name":"units"}]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"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 component's value.","values":[]},{"name":"value-label","description":"When `true`, displays the `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-navigation","description":"### Events\n- **calciteNavigationActionSelect** - When `navigationAction` is `true`, emits when the displayed action selection changes.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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 an accessible label for 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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### CSS Properties\n- **--calcite-navigation-accent-color** - When `active`, specifies the component's border color. \n- **--calcite-navigation-background-color** - Specifies the component's background color. \n- **--calcite-navigation-logo-heading-text-color** - Specifies the component's `heading` text color. \n- **--calcite-navigation-logo-text-color** - Specifies the component's `description` text color. ","attributes":[{"name":"active","description":"When `true`, the component is highlighted.","values":[]},{"name":"description","description":"Specifies a description for the component. Displays below the `heading`.","values":[]},{"name":"heading","description":"Specifies the component's heading text.","values":[]},{"name":"heading-level","description":"Specifies the heading level number 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":"Specifies an accessible label for the component.","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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### CSS Properties\n- **--calcite-navigation-accent-color** - When `active`, specifies the components's border color. \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":"Specifies an accessible label for the component.","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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- **title** - A slot for adding a title.\n- **message** - A slot for adding a 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 `calcite-action`s.\n\n### CSS Properties\n- **--calcite-notice-background-color** - When `appearance=\"outline-fill\"`, specifies the component's background color. \n- **--calcite-notice-border-color** - When `appearance=\"outline-fill\"`, specifies the component's border color. \n- **--calcite-notice-corner-radius** - Specifies the component's border radius. \n- **--calcite-notice-close-background-color** - Specifies the background color of the component's close element. \n- **--calcite-notice-close-background-color-hover** - Specifies the background color of the component's close element when hovered. \n- **--calcite-notice-close-background-color-focus** - [Deprecated] Specifies the background color of the component's close element when hovered. Use `--calcite-notice-close-background-color-hover` instead. \n- **--calcite-notice-close-background-color-press** - Specifies the background color of the component's close element when active. \n- **--calcite-notice-close-icon-color-hover** - Specifies the icon color of the component's close element when hovered or active. \n- **--calcite-notice-close-icon-color** - Specifies the icon color of the component's close element. \n- **--calcite-notice-title-text-color** - Specifies the component's slotted `\"title\"` content text color. \n- **--calcite-notice-content-text-color** - Specifies the component's slotted `\"message\"` content text color. \n- **--calcite-notice-width** - [Deprecated] Specifies the component's width. \n- **--calcite-notice-shadow** - Specifies the component's shadow. ","attributes":[{"name":"appearance","description":"Specifies the appearance of the component.","values":[{"name":"outline-fill"},{"name":"transparent"}]},{"name":"closable","description":"When `true`, displays a close button in 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 the top border and icon.","values":[{"name":"brand"},{"name":"danger"},{"name":"info"},{"name":"neutral"},{"name":"warning"},{"name":"success"}]},{"name":"open","description":"When `true`, the component is visible.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"width","description":"Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.","values":[{"name":"auto"},{"name":"half"},{"name":"full"}]}],"references":[]},{"name":"calcite-option","description":"### Methods\n- `componentOnReady(): Promise<this>` - 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":"Specifies an accessible label 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<this>` - 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":"Specifies an accessible label for the component.","values":[]}],"references":[]},{"name":"calcite-pagination","description":"### Events\n- **calcitePaginationChange** - Emits when the selected page changes.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `goTo(page: number | \"start\" | \"end\"): Promise<void>` - Set a specified page as active.\n- `nextPage(): Promise<void>` - Go to the next page of results.\n- `previousPage(): Promise<void>` - Go to the previous page of results.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"s"},{"name":"m"},{"name":"l"}]},{"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- **calcitePanelCollapse** - Fires when the component's content area is collapsed.\n- **calcitePanelExpand** - Fires when the component's content area is expanded.\n- **calcitePanelScroll** - Fires when the content is scrolled.\n- **calcitePanelToggle** - Fires when the collapse button is clicked.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `scrollContentTo(options?: ScrollToOptions): Promise<void>` - Scrolls the component's content to a specified set of coordinates.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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-end** - A slot for adding custom content to a trailing footer. Should not be used with the `\"footer\"` slot.\n- **footer-start** - A slot for adding custom content to a leading footer. 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 the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions`. \n- **--calcite-panel-header-action-background-color-hover** - Specifies the background color of the component'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 the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed. \n- **--calcite-panel-header-action-text-color** - Specifies the text color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions`. \n- **--calcite-panel-header-action-text-color-press** - Specifies the text color of the component'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 component.","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":"collapse-direction","description":"When `collapsible` is `true`, specifies the direction of the collapse icon.","values":[{"name":"down"},{"name":"up"}]},{"name":"collapsible","description":"When `true`, the component is collapsible.","values":[]},{"name":"description","description":"Specifies 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":"Specifies the component's heading text.","values":[]},{"name":"heading-level","description":"Specifies the heading level number 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":"top"},{"name":"bottom"},{"name":"left"},{"name":"right"},{"name":"auto-start"},{"name":"auto-end"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"},{"name":"right-start"},{"name":"right-end"},{"name":"left-start"},{"name":"left-end"},{"name":"leading-start"},{"name":"leading"},{"name":"leading-end"},{"name":"trailing-end"},{"name":"trailing"},{"name":"trailing-start"}]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise<void>` - Updates the position of the component.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n- `updateFocusTrapElements(): Promise<void>` - 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-max-size-x** - Specifies the component's maximum width. \n- **--calcite-popover-text-color** - Specifies the component's text color. ","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 in 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":"Specifies the component's heading text.","values":[]},{"name":"heading-level","description":"Specifies the heading level number 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":"Specifies an accessible label for the component.","values":[]},{"name":"offset-distance","description":"Specifies the distance to position the component away from the `referenceElement`.","values":[]},{"name":"offset-skidding","description":"Specifies the distance to position the component along the `referenceElement`.","values":[]},{"name":"open","description":"When `true`, displays and positions the component.","values":[]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"placement","description":"Determines where the component will be positioned relative to the `referenceElement`.","values":[{"name":"auto"},{"name":"top"},{"name":"bottom"},{"name":"left"},{"name":"right"},{"name":"auto-start"},{"name":"auto-end"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"},{"name":"right-start"},{"name":"right-end"},{"name":"left-start"},{"name":"left-end"},{"name":"leading-start"},{"name":"leading"},{"name":"leading-end"},{"name":"trailing-end"},{"name":"trailing"},{"name":"trailing-start"}]},{"name":"pointer-disabled","description":"When `true`, removes the caret pointer.","values":[]},{"name":"reference-element","description":"The `referenceElement` is used to position the component according to its `placement` value.\n\nSetting the value 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":"s"},{"name":"m"},{"name":"l"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]},{"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<this>` - 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":"Specifies an accessible label for the component.","values":[]},{"name":"reversed","description":"When `true` and type is `\"indeterminate\"`, 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":"indeterminate"},{"name":"determinate"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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. ","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":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","values":[]},{"name":"name","description":"Specifies the name of the component. Required 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":"s"},{"name":"m"},{"name":"l"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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- **label-content** - A slot for rendering content next to the component's `labelText`.\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 `calcite-input-message`. ","attributes":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","values":[]},{"name":"layout","description":"Specifies the layout of the component.","values":[{"name":"horizontal"},{"name":"vertical"}]},{"name":"name","description":"Specifies the name of the component. Required 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":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the status of the validation message.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **label-content** - A slot for rendering content next to the component's `labelText`.\n\n### CSS Properties\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** - When `average` is set, specifies the component's item color. \n- **--calcite-rating-average-text-color** - When `average` is set, specifies the component's `average` text color. \n- **--calcite-rating-count-text-color** - Specifies the component's text color for `count`. ","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":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","values":[]},{"name":"name","description":"Specifies the name of the component. Required 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":"s"},{"name":"m"},{"name":"l"}]},{"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":"invalid"},{"name":"valid"},{"name":"idle"}]},{"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<this>` - 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 component's background color. ","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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-segmented-control-item`s.\n- **label-content** - A slot for rendering content next to the component's `labelText`.\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":"solid"},{"name":"outline"},{"name":"outline-fill"}]},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","values":[]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","values":[]},{"name":"layout","description":"Defines the layout of the component.","values":[{"name":"horizontal"},{"name":"vertical"}]},{"name":"name","description":"Specifies the name of the component. Required 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":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the status of the validation message.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"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<this>` - 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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-option`s.\n- **label-content** - A slot for rendering content next to the component's `labelText`.\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. \n- **--calcite-select-background-color** - Specifies the component's background color. \n- **--calcite-select-corner-radius** - Specifies the component's corner radius. \n- **--calcite-select-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":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","values":[]},{"name":"name","description":"Specifies the name of the component. Required 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":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the status of the input field, which determines the message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"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":"half"},{"name":"full"}]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's \"close\" button - the first focusable item.\n- `updateFocusTrapElements(extraContainers?: FocusTrapOptions[\"extraContainers\"]): Promise<void>` - Updates the element(s) that are included in the component's focus-trap.\n- `updateSize(size: {\n    inline?: number | null;\n    block?: number | null;\n}): Promise<void>` - Updates the sheet's inline and/or block size via method call.\n\nUse this method to programmatically override the sheet's width (inline) and/or height (block).\nPass `null` to clear the override and revert to the default or CSS variable size.\n\n### Slots\n- _default_ - A slot for adding custom content.\n\n### CSS Properties\n- **--calcite-sheet-background-color** - Specifies the component's background color. \n- **--calcite-sheet-corner-radius** - Specifies the component's corner radius. \n- **--calcite-sheet-shadow** - Specifies the component's shadow. \n- **--calcite-sheet-text-color** - Specifies the component's text color. \n- **--calcite-sheet-resize-background-color** - Specifies the resize handle's background color. \n- **--calcite-sheet-resize-icon-color** - Specifies the resize handle's text color. \n- **--calcite-sheet-scrim-background** - Specifies the background color of the component's scrim. \n- **--calcite-sheet-width** - When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the component's width. \n- **--calcite-sheet-max-width** - When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the component's maximum width. \n- **--calcite-sheet-min-width** - When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the component's minimum width. \n- **--calcite-sheet-height** - When `position` is `\"block-start\"` or `\"block-end\"`, specifies the component's height. \n- **--calcite-sheet-max-height** - When `position` is `\"block-start\"` or `\"block-end\"`, specifies the component's maximum height. \n- **--calcite-sheet-min-height** - When `position` is `\"block-start\"` or `\"block-end\"`, specifies the component's minimum height. ","attributes":[{"name":"display-mode","description":"Specifies the display mode - `\"float\"` separates content from main layout,\nand `\"overlay\"` displays on top of center content.","values":[{"name":"overlay"},{"name":"float"}]},{"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 component's height.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"height-scale","description":"**Deprecated**: in v3.0.0, removal target v6.0.0 - Use the `height` property instead.. When `position` is `\"block-start\"` or `\"block-end\"`, specifies the component's height.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"open","description":"When `true`, displays and positions the component.","values":[]},{"name":"outside-close-disabled","description":"When `true`, disables closing the component when the area outside of the component is clicked.","values":[]},{"name":"position","description":"Determines where the component will be positioned.","values":[{"name":"inline-start"},{"name":"inline-end"},{"name":"block-start"},{"name":"block-end"}]},{"name":"resizable","description":"When `true`, the component is resizable.","values":[]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]},{"name":"width","description":"Specifies the components width.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"width-scale","description":"**Deprecated**: in v3.0.0, removal target v6.0.0 - Use the `width` property instead.. When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the component's width.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]}],"references":[]},{"name":"calcite-shell","description":"### Methods\n- `componentOnReady(): Promise<this>` - 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- **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. ","attributes":[{"name":"content-behind","description":"When `true`, positions the center content behind any `calcite-shell-panel`s.","values":[]}],"references":[]},{"name":"calcite-shell-panel","description":"### Events\n- **calciteShellPanelCollapse** - Fires when the component's content area is collapsed.\n- **calciteShellPanelExpand** - Fires when the component's content area is expanded.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `updateSize(size: {\n    inline?: number | null;\n    block?: number | null;\n}): Promise<void>` - Updates the component's size by setting its inline and/or block dimensions.\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 component's background color. \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` or `float-all`, specifies the component's height. \n- **--calcite-shell-panel-max-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the component's maximum height. \n- **--calcite-shell-panel-min-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the component's minimum height. \n- **--calcite-shell-panel-max-width** - Specifies the component's maximum width. \n- **--calcite-shell-panel-resize-icon-color** - Specifies the resize handle's text color. \n- **--calcite-shell-panel-shadow** - When `displayMode` is `\"float-all\"`, specifies the component's shadow. \n- **--calcite-shell-panel-text-color** - Specifies the component's text color. \n- **--calcite-shell-panel-width** - Specifies the component's width. \n- **--calcite-shell-panel-z-index** - Specifies the component's z-index value. ","attributes":[{"name":"collapsed","description":"When `true`, hides the component's content area.","values":[]},{"name":"display-mode","description":"Specifies the component's display mode, 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":"overlay"},{"name":"float"},{"name":"float-all"},{"name":"float-content"}]},{"name":"height","description":"Specifies the component's height.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"height-scale","description":"**Deprecated**: in v3.0.0, removal target v6.0.0 - Use the `height` property instead.. When `layout` is `horizontal`, specifies the component's maximum height.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"layout","description":"**Deprecated**: in v4.0.0, removal target v6.0.0 -  No longer necessary.. Specifies the component's direction.","values":[{"name":"horizontal"},{"name":"vertical"}]},{"name":"position","description":"**Deprecated**: in v4.0.0, removal target v6.0.0 -  No longer necessary.. Specifies the component's position. Will be flipped when the element direction is right-to-left (`\"rtl\"`).","values":[{"name":"start"},{"name":"end"}]},{"name":"resizable","description":"When `true` and `displayMode` is `\"dock\"` or `\"overlay\"`, the component's content area is resizable.","values":[]},{"name":"width","description":"Specifies the component's width.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"width-scale","description":"**Deprecated**: in v3.0.0, removal target v6.0.0 -  Use the `width` property instead.. When `layout` is `vertical`, specifies the component's width.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]}],"references":[]},{"name":"calcite-slider","description":"### Events\n- **calciteSliderChange** - Fires when the component's handle is released.\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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **label-content** - A slot for rendering content next to the component's `labelText`.\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":"When `value` is specified for single values, determines the track's fill relative to the component's handle.\n\nWhen `minValue` and `maxValue` are specified for multiple values, displays the fill between the `minValue` and `maxValue` handles.","values":[{"name":"start"},{"name":"none"},{"name":"end"}]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","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 numeric value labels on handles.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","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":"When `minValue` and `maxValue` are specified for multiple values, specifies the accessible name for the `maxValue` handle, such as `\"Temperature, upper bound\"`.","values":[]},{"name":"max-value","description":"For multiple values, specifies the component's upper value.","values":[]},{"name":"min","description":"Specifies the component's minimum selectable value.","values":[]},{"name":"min-label","description":"Specifies the accessible name associated with the `value` handle (for single values) or `minValue` handle (for multiple values). For instance, `\"Temperature, lower bound\"`.","values":[]},{"name":"min-value","description":"For multiple values, the component's lower value.","values":[]},{"name":"mirrored","description":"When `true`, the component 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 component's size.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"snap","description":"When `true` and `step` is specified, enables snap selection via a mouse.","values":[]},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"name":"step","description":"Specifies the interval to move with the `Arrow up` or `Arrow down` keys.","values":[]},{"name":"ticks","description":"Specifies the interval between tick marks on the number line.","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- **calciteSortHandleAdd** - Fires when an add item has been selected.\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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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 an accessible label for the component.","values":[]},{"name":"open","description":"When `true`, displays and positions the component.","values":[]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"placement","description":"Determines where the component will be positioned relative to the container element.","values":[{"name":"top"},{"name":"bottom"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"}]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"set-position","description":"Specifies the handle's current position.","values":[]},{"name":"set-size","description":"Specifies the total number of sortable items.","values":[]},{"name":"sort-disabled","description":"When `true`, prevents sorting of items.","values":[]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]},{"name":"width-scale","description":"Specifies the width of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]}],"references":[]},{"name":"calcite-sortable-list","description":"**Deprecated**: Use the `calcite-block-group` component instead..\n--\n\n### Events\n- **calciteListOrderChange** - Fires when the order of the list changes.\n\n### Methods\n- `componentOnReady(): Promise<this>` - 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":"Specifies the list's group.\n\nTo drag elements from one list into another, both lists must have the same group value.","values":[]},{"name":"handle-selector","description":"Specifies the selector for the handle elements.","values":[]},{"name":"layout","description":"Indicates the horizontal or vertical orientation of the component.","values":[{"name":"horizontal"},{"name":"vertical"},{"name":"grid"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `calcite-dropdown` content.\n\n### CSS Properties\n- **--calcite-split-button-background-color** - Specifies the component's background color. \n- **--calcite-split-button-background-color-hover** - Specifies the component's background color when hovered. \n- **--calcite-split-button-background-color-focus** - Specifies the component's background color when focused. \n- **--calcite-split-button-background-color-press** - Specifies the component's background color when active. \n- **--calcite-split-button-border-color** - Specifies the component's border color. \n- **--calcite-split-button-corner-radius** - Specifies the component's corner radius. \n- **--calcite-split-button-icon-color** - Specifies the component's `iconStart` and `iconEnd` color. \n- **--calcite-split-button-loader-color** - Specifies the component's loader color. \n- **--calcite-split-button-text-color** - Specifies the component's text color. \n- **--calcite-split-button-shadow** - Specifies the component's shadow. \n- **--calcite-split-button-divider-border-color** - Specifies the component's divider border color. \n- **--calcite-split-button-divider-color** - Specifies the component's divider color. \n- **--calcite-split-button-dropdown-width** - Specifies the width of the component's dropdown. \n- **--calcite-split-button-dropdown-background-color** - Specifies the component's dropdown background color.\n* ","attributes":[{"name":"appearance","description":"Specifies the appearance style of the component.","values":[{"name":"solid"},{"name":"outline"},{"name":"outline-fill"},{"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":"chevron"},{"name":"caret"},{"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":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"placement","description":"Determines where the component will be positioned relative to the container element.","values":[{"name":"top"},{"name":"bottom"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"}]},{"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":"start"},{"name":"end"},{"name":"both"}]},{"name":"primary-icon-start","description":"Specifies an icon to display at the start of the primary button.","values":[]},{"name":"primary-label","description":"Speficies an accessible name for the primary button.","values":[]},{"name":"primary-text","description":"Specifies the 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 component's size.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"target","description":"Specifies where to open the linked document defined in the `href` property.","values":[]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]},{"name":"width","description":"Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.","values":[{"name":"auto"},{"name":"half"},{"name":"full"}]}],"references":[]},{"name":"calcite-stack","description":"### Methods\n- `componentOnReady(): Promise<this>` - 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\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `endStep(): Promise<void>` - Set the last `calcite-stepper-item` as active.\n- `goToStep(step: number): Promise<void>` - Set a specified `calcite-stepper-item` as active.\n- `nextStep(): Promise<void>` - Set the next `calcite-stepper-item` as active.\n- `prevStep(): Promise<void>` - Set the previous `calcite-stepper-item` as active.\n- `startStep(): Promise<void>` - Set the first `calcite-stepper-item` as active.\n\n### Slots\n- _default_ - A slot for adding `calcite-stepper-item`s.\n\n### CSS Properties\n- **--calcite-stepper-bar-gap** - Specifies the space between the component's `calcite-stepper-item`s. \n- **--calcite-stepper-bar-inactive-fill-color** - Specifies the `calcite-stepper-item`s' bar fill color of the component's `calcite-stepper-item`s. \n- **--calcite-stepper-bar-active-fill-color** - Specifies the `calcite-stepper-item`s' bar fill color of the component's active `calcite-stepper-item`s. \n- **--calcite-stepper-bar-complete-fill-color** - When `calcite-stepper-item`s are `complete`, specifies the component's `calcite-stepper-item`s' bar fill color. \n- **--calcite-stepper-bar-error-fill-color** - When `calcite-stepper-item`s contain an `error`, specifies the component's `calcite-stepper-item`s' bar fill color. ","attributes":[{"name":"icon","description":"When `true`, displays a status icon in the `calcite-stepper-item` heading.","values":[]},{"name":"layout","description":"Defines the component's layout.","values":[{"name":"horizontal"},{"name":"vertical"},{"name":"horizontal-single"}]},{"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 component's size.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]}],"references":[]},{"name":"calcite-stepper-item","description":"### Events\n- **calciteStepperItemSelect** - Fires when the active `calcite-stepper-item` changes.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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** - When `selected`, specifies the component's header text color. \n- **--calcite-stepper-item-icon-color** - Specifies the component's icon color. \n- **--calcite-stepper-item-complete-icon-color** - When `complete`, specifies the component's icon color. \n- **--calcite-stepper-item-error-icon-color** - When `error`, specifies the component's icon and number color. \n- **--calcite-stepper-item-selected-icon-color** - When `selected`, specifies the component's icon and number color. \n- **--calcite-stepper-item-description-text-color** - Specifies the component's description and number text color. \n- **--calcite-stepper-item-description-text-color-hover** - When `selected`, hovered, or focused, specifies the component's description text color. \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** - When `complete`, specifies the component's fill color. \n- **--calcite-stepper-bar-complete-fill-color-hover** - When `complete`, specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-error-fill-color** - When `error`, specifies the component's fill color. \n- **--calcite-stepper-bar-error-fill-color-hover** - When `error`, specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-selected-fill-color** - When `selected`, specifies the component's fill color. ","attributes":[{"name":"complete","description":"When `true`, completes the step.","values":[]},{"name":"description","description":"Specifies a description for the component. Displays below the header text.","values":[]},{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's opacity.","values":[]},{"name":"error","description":"When `true`, the component contains an error that requires resolution from the user.","values":[]},{"name":"heading","description":"Specifies the component's heading 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-swatch","description":"### Events\n- **calciteSwatchSelect** - Fires when the selected state of the component changes.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **image** - A slot for adding an image or pattern.\n\n### CSS Properties\n- **--calcite-swatch-corner-radius** - Specifies the component's corner radius. ","attributes":[{"name":"color","description":"Specifies the component's color","values":[]},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"scale","description":"Specifies the component's size. When contained in a parent `calcite-swatch-group`, the component inherits the parent's `scale` value.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"selected","description":"When `true`, the component is selected.","values":[]},{"name":"value","description":"The component's value.","values":[]}],"references":[]},{"name":"calcite-swatch-group","description":"### Events\n- **calciteSwatchGroupSelect** - Fires when the component's selection changes.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding one or more `calcite-swatch`s.\n\n### CSS Properties\n- **--calcite-swatch-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":"Specifies an accessible label for the component.","values":[]},{"name":"scale","description":"Specifies the component's size. Child `calcite-swatch`s inherit the component's value.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"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":"none"},{"name":"single"},{"name":"single-persist"},{"name":"multiple"}]}],"references":[]},{"name":"calcite-switch","description":"### Events\n- **calciteSwitchChange** - Fires when the `checked` value has changed.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"label-text-end","description":"Specifies the component's end label text.","values":[]},{"name":"label-text-start","description":"Specifies the component's start label text.","values":[]},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","values":[]},{"name":"scale","description":"Specifies the component's size.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"value","description":"The component's value.","values":[]}],"references":[]},{"name":"calcite-tab","description":"### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `getTabIndex(): Promise<number>` - 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 is 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<this>` - 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** - 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":"top"},{"name":"bottom"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `getTabIndex(): Promise<number>` - 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-text-color-press** - Specifies the component's text color when hovered, pressed, or selected. \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** - When `selected` or active, specifies the component's accent color. \n- **--calcite-tab-icon-color-start** - Specifies the component's `iconStart` color. \n- **--calcite-tab-icon-color-start-press** - When `selected`, hovered, or pressed, specifies the component's `iconStart` color. \n- **--calcite-tab-icon-color-end** - Specifies the component's `iconEnd` color. \n- **--calcite-tab-icon-color-end-press** - When `selected`, hovered, or pressed, specifies the component's `iconEnd` 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 pressed. \n- **--calcite-tab-close-icon-background-color-hover** - Specifies the component's close element icon background color when hovered. ","attributes":[{"name":"closable","description":"When `true`, displays a close button in the component.","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-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":"start"},{"name":"end"},{"name":"both"}]},{"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":"top"},{"name":"bottom"}]},{"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<this>` - 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\"`.\n\n### CSS Properties\n- **--calcite-table-border-color** - Specifies the component's border color. \n- **--calcite-table-corner-radius** - Specifies the component's border radius. \n- **--calcite-table-shadow** - Specifies the component's shadow. \n- **--calcite-table-number-cell-background-color** - Specifies the background color of the component's `numbered` cell. \n- **--calcite-table-number-cell-text-color** - Specifies the text color of the component's `numbered` cell. \n- **--calcite-table-selection-cell-background-color** - When `selectionMode` is `\"multiple\"` or `\"single\"`, specifies the background color of cells containing selection icons. \n- **--calcite-table-selection-cell-background-color-selected** - When `selectionMode` is `\"multiple\"` or `\"single\"`, specifies the background color of cells containing selection icons on `selected` `calcite-table-row`s. \n- **--calcite-table-selection-cell-icon-color** - When `selectionMode` is `\"multiple\"` or `\"single\"`, specifies the icon color of the component's selection icon on `calcite-table-row`s where `selected` is `false`. \n- **--calcite-table-selection-cell-icon-color-selected** - When `selectionMode` is `\"multiple\"` or `\"single\"`, specifies the icon color of the component's selection icon on `selected` `calcite-table-row`s. \n- **--calcite-table-selection-chip-background-color** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are not `selected`, specifies the background color of the component's selection chip. \n- **--calcite-table-selection-chip-border-color** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are not `selected`, specifies the border color of the component's selection chip. \n- **--calcite-table-selection-chip-corner-radius** - When `selectionMode` is `\"multiple\"` or `\"single\"`, specifies the corner radius of the component's selection chip. \n- **--calcite-table-selection-chip-shadow** - When `selectionMode` is `\"multiple\"` or `\"single\"`, specifies the shadow of the component's selection chip. \n- **--calcite-table-selection-chip-text-color** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are not `selected`, specifies the text color of the component's selection chip. \n- **--calcite-table-selection-chip-background-color-selected** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection chip. \n- **--calcite-table-selection-chip-border-color-selected** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection chip. \n- **--calcite-table-selection-chip-text-color-selected** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection chip. \n- **--calcite-table-selection-out-of-view-chip-background-color** - When `selectionMode` is `\"multiple\"` or `\"single\"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the background color of the component's selection out of view chip. \n- **--calcite-table-selection-out-of-view-chip-border-color** - When `selectionMode` is `\"multiple\"` or `\"single\"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the border color of the component's selection out of view chip. \n- **--calcite-table-selection-out-of-view-chip-corner-radius** - When `selectionMode` is `\"multiple\"` or `\"single\"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the corner radius of the component's selection out of view chip. \n- **--calcite-table-selection-out-of-view-chip-icon-color** - When `selectionMode` is `\"multiple\"` or `\"single\"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the icon color of the component's selection out of view chip. \n- **--calcite-table-selection-out-of-view-chip-shadow** - When `selectionMode` is `\"multiple\"` or `\"single\"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the shadow of the component's selection out of view chip. \n- **--calcite-table-selection-out-of-view-chip-text-color** - When `selectionMode` is `\"multiple\"` or `\"single\"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the text color of the component's selection out of view chip. \n- **--calcite-table-selection-dismiss-button-background-color-active** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection dismiss chip when active. \n- **--calcite-table-selection-dismiss-button-background-color-hover** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection dismiss chip when hovered. \n- **--calcite-table-selection-dismiss-button-background-color** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection dismiss chip. \n- **--calcite-table-selection-dismiss-button-border-color-active** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection dismiss chip when active. \n- **--calcite-table-selection-dismiss-button-border-color-hover** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection dismiss chip when hovered. \n- **--calcite-table-selection-dismiss-button-border-color** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection dismiss chip. \n- **--calcite-table-selection-dismiss-button-corner-radius** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the corner radius of the component's selection dismiss chip. \n- **--calcite-table-selection-dismiss-button-shadow** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the shadow of the component's selection dismiss chip. \n- **--calcite-table-selection-dismiss-button-text-color-active** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection dismiss chip when active. \n- **--calcite-table-selection-dismiss-button-text-color-hover** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection dismiss chip when hovered. \n- **--calcite-table-selection-dismiss-button-text-color** - When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection dismiss chip. \n- **--calcite-table-pagination-color** - When `pageSize` is set, specifies the component's pagination item color. \n- **--calcite-table-pagination-color-hover** - When `pageSize` is set, specifies the component's pagination item color when hovered or selected. \n- **--calcite-table-pagination-color-border-hover** - When `pageSize` is set, specifies the component's pagination item bottom border color when hovered. \n- **--calcite-table-pagination-color-border-active** - When `pageSize` is set, specifies the component's pagination item bottom border color when selected. \n- **--calcite-table-pagination-background-color** - When `pageSize` is set, specifies the component's pagination item background color when active. \n- **--calcite-table-pagination-icon-color-background-hover** - When `pageSize` is set, specifies the component's pagination chevron item background color when hovered. ","attributes":[{"name":"bordered","description":"When `true`, displays borders between `calcite-table-rows`.","values":[]},{"name":"caption","description":"Specifies an accessible title for the component.","values":[]},{"name":"current-page","description":"Sets/gets the current page","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 present, renders `calcite-pagination`.","values":[]},{"name":"scale","description":"Specifies the component's size.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"selection-display","description":"When `selectionMode` is `\"single\"` or `\"multiple\"`, specifies the display of the selection interface. When  `selectionMode` is `\"none\"`, content slotted in 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":"none"},{"name":"single"},{"name":"multiple"}]},{"name":"striped","description":"When `true`, displays striped styling on the component's `calcite-table-rows`.","values":[]}],"references":[]},{"name":"calcite-table-cell","description":"### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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** - [Deprecated] Use `--calcite-table-cell-background-color` instead. Specifies the component's background color. \n- **--calcite-table-cell-background-color** - Specifies the component's background color. \n- **--calcite-table-cell-border-color** - Specifies the component's border color. \n- **--calcite-table-cell-text-color** - Specifies the component's text color. ","attributes":[{"name":"alignment","description":"Specifies the alignment of the component.","values":[{"name":"start"},{"name":"center"},{"name":"end"}]},{"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<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### CSS Properties\n- **--calcite-table-header-background** - [Deprecated] Use the `--calcite-table-header-background-color` property instead. Specifies the component's background color. \n- **--calcite-table-header-background-color** - Specifies the component's background color. \n- **--calcite-table-header-border-color** - Specifies the component's border color. \n- **--calcite-table-header-heading-text-color** - Specifies the component's `heading` text color. \n- **--calcite-table-header-description-text-color** - Specifies the component's `description` text color. ","attributes":[{"name":"alignment","description":"Specifies the alignment of the component.","values":[{"name":"start"},{"name":"center"},{"name":"end"}]},{"name":"col-span","description":"Specifies the number of columns the component should span.","values":[]},{"name":"description","description":"Specifies a description for the component. Displays below the `heading`.","values":[]},{"name":"heading","description":"Specifies the component's heading text. Displays above the `description`.","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<this>` - 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** - [Deprecated] Use `--calcite-table-row-background-color` instead. Specifies the background color of the component. \n- **--calcite-table-row-background-color** - Specifies the component's background color. \n- **--calcite-table-row-background-color-striped** - When `striped` is `true` on `calcite-table`, specifies the background color of the component's `striped` rows. \n- **--calcite-table-row-background-color-selected** - When `selected`, specifies the background color of the component's `selected` rows. \n- **--calcite-table-row-accent-color-selected** - Specifies the component's selected accent color. \n- **--calcite-table-row-border-color** - Specifies the component's border color. ","attributes":[{"name":"alignment","description":"Specifies the alignment of the component.","values":[{"name":"start"},{"name":"center"},{"name":"end"}]},{"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<this>` - 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** - Specifies the component's background color. \n- **--calcite-tab-border-color** - Specifies the component's border color. ","attributes":[{"name":"bordered","description":"When `true`, displays the component 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":"top"},{"name":"bottom"}]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]}],"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<this>` - Create a promise that resolves once component is fully loaded.\n- `selectText(): Promise<void>` - Selects the text of the component's `value`.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding text.\n- **label-content** - A slot for rendering content next to the component's `labelText`.\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":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","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":"Specifies an accessible label for the component.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","values":[]},{"name":"limit-text","description":"When `true`, prevents input beyond the `maxLength` value, mimicking native text area behavior.","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 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. Required 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":"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":"vertical"},{"name":"none"}]},{"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":"invalid"},{"name":"valid"},{"name":"idle"}]},{"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":"soft"},{"name":"hard"}]}],"references":[]},{"name":"calcite-tile","description":"### Events\n- **calciteTileSelect** - Fires when the selected state of the component changes.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - 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\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**: in v2.8.0, removal target v6.0.0 - No longer necessary.. When `true`, the component is active.","values":[]},{"name":"alignment","description":"Specifies alignment of the component's content.","values":[{"name":"start"},{"name":"center"}]},{"name":"description","description":"Specifies a description for the component. 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**: in v2.6.0, removal target v6.0.0 - No longer necessary.. Specifies the component's embed mode.\n\nWhen `true`, renders without a border and padding for use by other components.","values":[]},{"name":"heading","description":"Specifies the component's heading text. displays between the `icon` and `description`.","values":[]},{"name":"heading-level","description":"Specifies the heading level number 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":"When embed is `false`, specifies 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":"Specifies an accessible label for the component.","values":[]},{"name":"scale","description":"Specifies the component's size.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"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<this>` - 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":"start"},{"name":"center"}]},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","values":[]},{"name":"label","description":"Specifies an accessible label 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 component's size.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"selection-appearance","description":"Specifies the selection appearance, where:\n\n- `\"icon\"` (displays a checkmark or dot),\n- `\"highlight\"` (changes the background color), and\n- `\"border\"` (displays a border). [Deprecated] The `\"border\"` value is deprecated in v5.0.0, removal target v6.0.0 - Use `\"highlight\"` instead.","values":[{"name":"icon"},{"name":"border"},{"name":"highlight"}]},{"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), and\n- `\"none\"` (allows no selected items).","values":[{"name":"none"},{"name":"single"},{"name":"single-persist"},{"name":"multiple"}]}],"references":[]},{"name":"calcite-time-picker","description":"### Events\n- **calciteTimePickerChange** - Fires when a user changes the component's time\n\n### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### CSS Properties\n- **--calcite-time-picker-background-color** - Specifies the component's background color. \n- **--calcite-time-picker-border-color** - Specifies the component's border color. \n- **--calcite-time-picker-corner-radius** - Specifies the component's border radius. \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":"24"},{"name":"user"},{"name":"12"}]},{"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 component's size.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"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-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<this>` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise<void>` - 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-max-size-x** - Specifies the component's maximum width. \n- **--calcite-tooltip-text-color** - Specifies the component's text color. ","attributes":[{"name":"close-on-click","description":"Closes the component when the `referenceElement` is clicked.","values":[]},{"name":"label","description":"**Deprecated**: in v1.5.0, removal target v6.0.0 - No longer necessary. Overrides the context of the component's text description, which could confuse assistive technology users.. Specifies an accessible label for the component.","values":[]},{"name":"offset-distance","description":"Specifies the distance to position the component away from the `referenceElement`.","values":[]},{"name":"offset-skidding","description":"Specifies the distance to position the component along the `referenceElement`.","values":[]},{"name":"open","description":"When `true`, the component is open.","values":[]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"placement","description":"Determines where the component will be positioned relative to the `referenceElement`.","values":[{"name":"auto"},{"name":"top"},{"name":"bottom"},{"name":"left"},{"name":"right"},{"name":"auto-start"},{"name":"auto-end"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"},{"name":"right-start"},{"name":"right-end"},{"name":"left-start"},{"name":"left-end"},{"name":"leading-start"},{"name":"leading"},{"name":"leading-end"},{"name":"trailing-end"},{"name":"trailing"},{"name":"trailing-start"}]},{"name":"reference-element","description":"The `referenceElement` is used to position the component according to its `placement` value.\n\nSetting the value 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":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]}],"references":[]},{"name":"calcite-tree","description":"### Events\n- **calciteTreeSelect** - Fires when the user selects/deselects `calcite-tree-items`.\n\n### Methods\n- `componentOnReady(): Promise<this>` - 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 component's size.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"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":"none"},{"name":"single"},{"name":"children"},{"name":"single-persist"},{"name":"multichildren"},{"name":"ancestors"},{"name":"multiple"}]}],"references":[]},{"name":"calcite-tree-item","description":"### Events\n- **calciteTreeItemCollapse** - Fires when the component's content area is collapsed.\n- **calciteTreeItemExpand** - Fires when the component's content area is expanded.\n- **calciteTreeItemSelect** - Fires when the component is selected or deselected.\n\n### Methods\n- `componentOnReady(): Promise<this>` - 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** - When 'selected', specifies the component's text color. \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`, expands the component and its contents.","values":[]},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","values":[{"name":"start"},{"name":"end"},{"name":"both"}]},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"selected","description":"When `true`, the component is selected.","values":[]}],"references":[]}]}