@esri/calcite-components 5.0.0-next.82 → 5.0.0-next.84

package/dist/docs/web-types.json

@@ -1 +1 @@
-{"$schema":"https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json","name":"@esri/calcite-components","version":"5.0.0-next.82","description-markup":"markdown","contributions":{"html":{"elements":[{"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.","default":"\"solid\"","value":{"type":["\"solid\"","\"transparent\""]}},{"name":"icon-position","description":"Specifies the position of the expand and collapse icons within `calcite-accordion-item`s","default":"\"end\"","value":{"type":["\"start\"","\"end\""]}},{"name":"icon-type","description":"Specifies the type of the icon in the header.","default":"\"chevron\"","value":{"type":["\"chevron\"","\"caret\"","\"plus-minus\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"\"multiple\"","value":{"type":["\"single\"","\"single-persist\"","\"multiple\""]}}],"slots":[{"name":"","description":"A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however `calcite-accordion-item`s can."}],"events":[],"js":{"properties":[{"name":"appearance","description":"Specifies the appearance of the component.","type":"Extract<\"solid\" | \"transparent\", Appearance>"},{"name":"iconPosition","description":"Specifies the position of the expand and collapse icons within `calcite-accordion-item`s","type":"Extract<\"start\" | \"end\", Position>"},{"name":"iconType","description":"Specifies the type of the icon in the header.","type":"Extract<\"chevron\" | \"caret\" | \"plus-minus\", IconType>"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"selectionMode","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.","type":"Extract<\"single\" | \"single-persist\" | \"multiple\", SelectionMode>"}],"events":[]}},{"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.","value":{"type":"string"}},{"name":"expanded","description":"When `true`, expands the component and its contents.","default":"false","value":{"type":"boolean"}},{"name":"heading","description":"Specifies the component's heading text.","value":{"type":"string"}},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","value":{"type":["1","2","3","4","5","6"]}},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}}],"slots":[{"name":"","description":"A slot for adding custom content, including nested `calcite-accordion-item`s."},{"name":"actions-end","description":"A slot for adding `calcite-action`s or content to the end side of the component's header."},{"name":"actions-start","description":"A slot for adding `calcite-action`s or content to the start side of the component's header."},{"name":"content-end","description":"A slot for adding non-actionable elements after the component's header text."},{"name":"content-start","description":"A slot for adding non-actionable elements before the component's header text."}],"events":[{"name":"calciteAccordionItemCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteAccordionItemExpand","type":"void","description":"Fires when the component's content area is expanded."}],"js":{"properties":[{"name":"description","description":"Specifies a description for the component.","type":"string"},{"name":"expanded","description":"When `true`, expands the component and its contents.","type":"boolean"},{"name":"heading","description":"Specifies the component's heading text.","type":"string"},{"name":"headingLevel","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","type":"HeadingLevel"},{"name":"iconEnd","description":"Specifies an icon to display at the end of the component.","type":"IconName"},{"name":"iconFlipRtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"}],"events":[{"name":"calciteAccordionItemCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteAccordionItemExpand","type":"void","description":"Fires when the component's content area is expanded."}]}},{"name":"calcite-action","description":"### Events\n- **calciteInternalActionMouseDown** - Fires when the action's button is being pressed down.\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 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 or focused. \n- **--calcite-action-background-color-press** - Specifies the component's background color when active. \n- **--calcite-action-background-color-pressed** - [Deprecated] Use --calcite-action-background-color-press. Specifies the component's background color when active. \n- **--calcite-action-background-color** - Specifies the component's background color. \n- **--calcite-action-corner-radius-end-end** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end end. \n- **--calcite-action-corner-radius-end-start** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end start. \n- **--calcite-action-corner-radius-start-end** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start end. \n- **--calcite-action-corner-radius-start-start** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start start. \n- **--calcite-action-corner-radius** - Specifies the component's corner radius. \n- **--calcite-action-indicator-color** - Specifies the component's indicator color. \n- **--calcite-action-text-color-press** - Specifies the component's text color when pressed or hovered. \n- **--calcite-action-text-color-pressed** - [Deprecated] Use --calcite-action-text-color-press. Specifies the component's text color when hovered. \n- **--calcite-action-text-color** - Specifies the component's text color. ","attributes":[{"name":"active","description":"When `true`, the component is highlighted.","default":"false","value":{"type":"boolean"}},{"name":"alignment","description":"Specifies the horizontal alignment of button elements with text content.","value":{"type":["\"start\"","\"center\"","\"end\""]}},{"name":"appearance","description":"**Deprecated**: in v5.0.0, removal target v6.0.0 - No longer necessary.. Specifies the appearance of the component.","default":"\"transparent\"","value":{"type":["\"solid\"","\"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.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"icon","description":"Specifies an icon to display.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"indicator","description":"When `true`, displays a visual indicator.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"text","description":"Specifies text that accompanies the icon.","value":{"type":"string"}},{"name":"text-enabled","description":"When `true`, indicates whether the text is displayed.","default":"false","value":{"type":"boolean"}},{"name":"type","description":"Specifies the default behavior of the component.","default":"\"button\"","value":{"type":["\"button\"","\"reset\"","\"submit\""]}}],"slots":[{"name":"","description":"A slot for adding non-interactive content, such as a `calcite-icon`."}],"events":[{"name":"calciteInternalActionMouseDown","type":"void","description":"Fires when the action's button is being pressed down."}],"js":{"properties":[{"name":"active","description":"When `true`, the component is highlighted.","type":"boolean"},{"name":"alignment","description":"Specifies the horizontal alignment of button elements with text content.","type":"Alignment"},{"name":"appearance","description":"Specifies the appearance of the component.","type":"Extract<\"solid\" | \"transparent\", Appearance>"},{"name":"aria","description":"When specified, overrides or extends ARIA properties and attributes on the component's button. Refer to the component's accessibility section for configuration considerations.","type":"Partial<Pick<AriaAttributesCamelCased, \"controlsElements\" | \"describedByElements\" | \"expanded\" | \"hasPopup\" | \"labelledByElements\" | \"ownsElements\" | \"pressed\" | \"checked\"> & Pick<LuminaJsx.HTMLAttributes, \"role\">> | undefined"},{"name":"compact","description":"When `true`, the side padding of the component is reduced.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"name":"icon","description":"Specifies an icon to display.","type":"IconName"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"indicator","description":"When `true`, displays a visual indicator.","type":"boolean"},{"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.","type":"string"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"text","description":"Specifies text that accompanies the icon.","type":"string"},{"name":"textEnabled","description":"When `true`, indicates whether the text is displayed.","type":"boolean"},{"name":"type","description":"Specifies the default behavior of the component.","type":"HTMLButtonElement[\"type\"]"}],"events":[{"name":"calciteInternalActionMouseDown","type":"void","description":"Fires when the action's button is being pressed down."}]}},{"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`.","value":{"type":"string"}},{"name":"expand-disabled","description":"When `true`, the expand-toggling behavior is disabled.","default":"false","value":{"type":"boolean"}},{"name":"expanded","description":"When `true`, expands the component and its contents.","default":"false","value":{"type":"boolean"}},{"name":"floating","description":"When `true`, the component is in a floating state.","default":"false","value":{"type":"boolean"}},{"name":"layout","description":"Specifies the layout direction of the actions.","default":"\"vertical\"","value":{"type":["\"horizontal\"","\"vertical\"","\"grid\""]}},{"name":"overflow-actions-disabled","description":"When `true`, disables automatically overflowing `calcite-action`s that won't fit into menus.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"position","description":"Specifies the position of the component depending on the element's `dir` property.","value":{"type":["\"start\"","\"end\""]}},{"name":"scale","description":"Specifies the size of the expand `calcite-action`.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"selection-appearance","description":"Specifies the selection appearance of the component","default":"\"neutral\"","value":{"type":["\"neutral\"","\"highlight\""]}},{"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding `calcite-action`s that will appear at the top of the component."},{"name":"actions-end","description":"A slot for adding `calcite-action`s that will appear at the end of the component, prior to the collapse/expand button."},{"name":"expand-tooltip","description":"A slot to set the `calcite-tooltip` for the expand toggle."}],"events":[{"name":"calciteActionBarCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteActionBarExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteActionBarToggle","type":"void","description":"Fires when the `expanded` property is toggled."}],"js":{"properties":[{"name":"actionsEndGroupLabel","description":"Specifies an accessible name for the last `calcite-action-group`.","type":"string"},{"name":"expandDisabled","description":"When `true`, the expand-toggling behavior is disabled.","type":"boolean"},{"name":"expanded","description":"When `true`, expands the component and its contents.","type":"boolean"},{"name":"floating","description":"When `true`, the component is in a floating state.","type":"boolean"},{"name":"layout","description":"Specifies the layout direction of the actions.","type":"Extract<\"horizontal\" | \"vertical\" | \"grid\", Layout>"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"overflowActionsDisabled","description":"When `true`, disables automatically overflowing `calcite-action`s that won't fit into menus.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"position","description":"Specifies the position of the component depending on the element's `dir` property.","type":"Extract<\"start\" | \"end\", Position>"},{"name":"scale","description":"Specifies the size of the expand `calcite-action`.","type":"Scale"},{"name":"selectionAppearance","description":"Specifies the selection appearance of the component","type":"Extract<\"neutral\" | \"highlight\", SelectionAppearance>"},{"name":"topLayerDisabled","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.","type":"boolean"}],"events":[{"name":"calciteActionBarCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteActionBarExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteActionBarToggle","type":"void","description":"Fires when the `expanded` property is toggled."}]}},{"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.","value":{"type":["1","2","3","4","5","6"]}},{"name":"expanded","description":"When `true`, expands the component and its contents.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"layout","description":"Indicates the layout of the component.","default":"\"vertical\"","value":{"type":["\"horizontal\"","\"vertical\"","\"grid\""]}},{"name":"menu-open","description":"When `true`, the `calcite-action-menu` is open.","default":"false","value":{"type":"boolean"}},{"name":"menu-placement","description":"Specifies the position of the action menu.","value":{"type":["\"auto\"","\"top\"","\"bottom\"","\"left\"","\"right\"","\"auto-start\"","\"auto-end\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\"","\"right-start\"","\"right-end\"","\"left-start\"","\"left-end\"","\"leading-start\"","\"leading\"","\"leading-end\"","\"trailing-end\"","\"trailing\"","\"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"scale","description":"Specifies the size of the `calcite-action-menu`.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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).","default":"\"none\"","value":{"type":["\"none\"","\"single\"","\"single-persist\"","\"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding `calcite-action`s."},{"name":"menu-actions","description":"A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`."},{"name":"menu-tooltip","description":"A slot for adding a `calcite-tooltip` for the menu."}],"events":[{"name":"calciteActionGroupCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteActionGroupExpand","type":"void","description":"Fires when the component's content area is expanded."}],"js":{"properties":[{"name":"columns","description":"Specifies the number of columns.","type":"Columns"},{"name":"expanded","description":"When `true`, expands the component and its contents.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"layout","description":"Indicates the layout of the component.","type":"Extract<\"horizontal\" | \"vertical\" | \"grid\", Layout>"},{"name":"menuFlipPlacements","description":"Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available.","type":"FlipPlacement[]"},{"name":"menuOpen","description":"When `true`, the `calcite-action-menu` is open.","type":"boolean"},{"name":"menuPlacement","description":"Specifies the position of the action menu.","type":"LogicalPlacement"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"scale","description":"Specifies the size of the `calcite-action-menu`.","type":"Scale"},{"name":"selectionMode","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).","type":"Extract<\"single\" | \"single-persist\" | \"multiple\" | \"none\", SelectionMode>"},{"name":"topLayerDisabled","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.","type":"boolean"}],"events":[{"name":"calciteActionGroupCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteActionGroupExpand","type":"void","description":"Fires when the component's content area is expanded."}]}},{"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.","default":"\"solid\"","value":{"type":["\"solid\"","\"transparent\""]}},{"name":"expanded","description":"When `true`, expands the component and its contents.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"open","description":"When `true`, the component is open.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"placement","description":"Determines where the component will be positioned relative to the `referenceElement`.","default":"\"auto\"","value":{"type":["\"auto\"","\"top\"","\"bottom\"","\"left\"","\"right\"","\"auto-start\"","\"auto-end\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\"","\"right-start\"","\"right-end\"","\"left-start\"","\"left-end\"","\"leading-start\"","\"leading\"","\"leading-end\"","\"trailing-end\"","\"trailing\"","\"trailing-start\""]}},{"name":"scale","description":"Specifies the size of the component's trigger `calcite-action`.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding `calcite-action`s."},{"name":"trigger","description":"A slot for adding a `calcite-action` to trigger opening the menu."},{"name":"tooltip","description":"A slot for adding a tooltip for the menu."}],"events":[{"name":"calciteActionMenuCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteActionMenuExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteActionMenuOpen","type":"void","description":"Fires when the `open` property is toggled."}],"js":{"properties":[{"name":"appearance","description":"Specifies the appearance of the component.","type":"Extract<\"solid\" | \"transparent\", Appearance>"},{"name":"expanded","description":"When `true`, expands the component and its contents.","type":"boolean"},{"name":"flipPlacements","description":"Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available.","type":"FlipPlacement[]"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"open","description":"When `true`, the component is open.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"placement","description":"Determines where the component will be positioned relative to the `referenceElement`.","type":"LogicalPlacement"},{"name":"scale","description":"Specifies the size of the component's trigger `calcite-action`.","type":"Scale"},{"name":"topLayerDisabled","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.","type":"boolean"}],"events":[{"name":"calciteActionMenuCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteActionMenuExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteActionMenuOpen","type":"void","description":"Fires when the `open` property is toggled."}]}},{"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`.","value":{"type":"string"}},{"name":"expand-disabled","description":"When `true`, the expand-toggling behavior is disabled.","default":"false","value":{"type":"boolean"}},{"name":"expanded","description":"When `true`, expands the component and its contents.","default":"false","value":{"type":"boolean"}},{"name":"layout","description":"Specifies the layout of the component.","default":"\"vertical\"","value":{"type":["\"horizontal\"","\"vertical\"","\"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"position","description":"Specifies the position of the component depending on the element's `dir` property.","value":{"type":["\"start\"","\"end\""]}},{"name":"scale","description":"Specifies the size of the expand `calcite-action`.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"selection-appearance","description":"Specifies the selection appearance of the component","default":"\"neutral\"","value":{"type":["\"neutral\"","\"highlight\""]}},{"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding `calcite-action`s to the component."},{"name":"expand-tooltip","description":"A slot to set the `calcite-tooltip` for the expand toggle."}],"events":[{"name":"calciteActionPadCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteActionPadExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteActionPadToggle","type":"void","description":"Fires when the `expanded` property is toggled."}],"js":{"properties":[{"name":"actionsEndGroupLabel","description":"Specifies the accessible label for the last `calcite-action-group`.","type":"string"},{"name":"expandDisabled","description":"When `true`, the expand-toggling behavior is disabled.","type":"boolean"},{"name":"expanded","description":"When `true`, expands the component and its contents.","type":"boolean"},{"name":"layout","description":"Specifies the layout of the component.","type":"Extract<\"horizontal\" | \"vertical\" | \"grid\", Layout>"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"position","description":"Specifies the position of the component depending on the element's `dir` property.","type":"Extract<\"start\" | \"end\", Position>"},{"name":"scale","description":"Specifies the size of the expand `calcite-action`.","type":"Scale"},{"name":"selectionAppearance","description":"Specifies the selection appearance of the component","type":"Extract<\"neutral\" | \"highlight\", SelectionAppearance>"},{"name":"topLayerDisabled","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.","type":"boolean"}],"events":[{"name":"calciteActionPadCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteActionPadExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteActionPadToggle","type":"void","description":"Fires when the `expanded` property is toggled."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"auto-close-duration","description":"Specifies the duration before the component automatically closes - only use with `autoClose`.","default":"\"medium\"","value":{"type":["\"medium\"","\"fast\"","\"slow\""]}},{"name":"icon","description":"When `true`, shows a default recommended icon. Alternatively,\npass a Calcite UI Icon name to display a specific icon.","value":{"type":["string","boolean"]}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"kind","description":"Specifies the kind of the component, which will apply to top border and icon.","default":"\"brand\"","value":{"type":["\"brand\"","\"danger\"","\"info\"","\"warning\"","\"success\""]}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"open","description":"When `true`, displays and positions the component.","default":"false","value":{"type":"boolean"}},{"name":"placement","description":"Specifies the placement of the component.","default":"\"bottom\"","value":{"type":["\"top\"","\"bottom\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\""]}},{"name":"queue","description":"Specifies the ordering priority of the component when opened.","default":"\"last\"","value":{"type":["\"last\"","\"next\"","\"immediate\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"title","description":"A slot for adding a title to the component."},{"name":"message","description":"A slot for adding main text to the component."},{"name":"link","description":"A slot for adding a `calcite-action` to take from the component such as: \"undo\", \"try again\", \"link to page\", etc."},{"name":"actions-end","description":"A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or fewer actions."}],"events":[{"name":"calciteAlertBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteAlertBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteAlertClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteAlertOpen","type":"void","description":"Fires when the component is open and animation is complete."}],"js":{"properties":[{"name":"autoClose","description":"When `true`, the component closes automatically. Recommended for passive, non-blocking alerts.","type":"boolean"},{"name":"autoCloseDuration","description":"Specifies the duration before the component automatically closes - only use with `autoClose`.","type":"AlertDuration"},{"name":"icon","description":"When `true`, shows a default recommended icon. Alternatively,\npass a Calcite UI Icon name to display a specific icon.","type":"IconName | boolean"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"kind","description":"Specifies the kind of the component, which will apply to top border and icon.","type":"Extract<\"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\", Kind>"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem"},{"name":"open","description":"When `true`, displays and positions the component.","type":"boolean"},{"name":"placement","description":"Specifies the placement of the component.","type":"MenuPlacement"},{"name":"queue","description":"Specifies the ordering priority of the component when opened.","type":"AlertQueue"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"topLayerDisabled","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.","type":"boolean"}],"events":[{"name":"calciteAlertBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteAlertBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteAlertClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteAlertOpen","type":"void","description":"Fires when the component is open and animation is complete."}]}},{"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.","default":"\"start\"","value":{"type":["\"start\"","\"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.","value":{"type":"string"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"icon","description":"When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.","value":{"type":["string","boolean"]}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"input-value","description":"Specifies the component's input value.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"max-length","description":"When the component resides in a form,\nspecifies the maximum length of text for the component's value.","value":{"type":"number"}},{"name":"min-length","description":"When the component resides in a form,\nspecifies the minimum length of text for the component's value.","value":{"type":"number"}},{"name":"name","description":"Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.","value":{"type":"string"}},{"name":"open","description":"When `true`, displays and positions the component.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"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.","value":{"type":"string"}},{"name":"placeholder","description":"Specifies placeholder text for the component.","value":{"type":"string"}},{"name":"placement","description":"Determines where the component will be positioned relative to the container element.","default":"\"bottom-start\"","value":{"type":["\"top\"","\"bottom\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\""]}},{"name":"prefix-text","description":"Specifies the component's prefix text.","value":{"type":"string"}},{"name":"read-only","description":"When `true`, the component's value can be read, but cannot be modified.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"suffix-text","description":"Specifies the component's suffix text.","value":{"type":"string"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"Specifies the component's value.","default":"\"\"","value":{"type":"string"}}],"slots":[{"name":"","description":"A slot for adding `calcite-autocomplete-item` elements."},{"name":"content-bottom","description":"A slot for adding content below `calcite-autocomplete-item` elements."},{"name":"content-top","description":"A slot for adding content above `calcite-autocomplete-item` elements."},{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteAutocompleteBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteAutocompleteBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteAutocompleteChange","type":"void","description":"Fires each time a new `value` is typed and committed."},{"name":"calciteAutocompleteClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteAutocompleteOpen","type":"void","description":"Fires when the component is open and animation is complete."},{"name":"calciteAutocompleteTextChange","type":"void","description":"Fires each time a new `inputValue` is typed and committed."},{"name":"calciteAutocompleteTextInput","type":"void","description":"Fires each time a new `inputValue` is typed."}],"js":{"properties":[{"name":"alignment","description":"Specifies the text alignment of the component's value.","type":"Extract<\"start\" | \"end\", Alignment>"},{"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.","type":"AutoFill"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"flipPlacements","description":"Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available.","type":"FlipPlacement[]"},{"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.","type":"string"},{"name":"icon","description":"When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.","type":"IconName | boolean"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"inputValue","description":"Specifies the component's input value.","type":"string"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"maxLength","description":"When the component resides in a form,\nspecifies the maximum length of text for the component's value.","type":"number"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"minLength","description":"When the component resides in a form,\nspecifies the minimum length of text for the component's value.","type":"number"},{"name":"name","description":"Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.","type":"string"},{"name":"open","description":"When `true`, displays and positions the component.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"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.","type":"string"},{"name":"placeholder","description":"Specifies placeholder text for the component.","type":"string"},{"name":"placement","description":"Determines where the component will be positioned relative to the container element.","type":"MenuPlacement"},{"name":"prefixText","description":"Specifies the component's prefix text.","type":"string"},{"name":"readOnly","description":"When `true`, the component's value can be read, but cannot be modified.","type":"boolean"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"suffixText","description":"Specifies the component's suffix text.","type":"string"},{"name":"topLayerDisabled","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.","type":"boolean"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"Specifies the component's value.","type":"string"}],"events":[{"name":"calciteAutocompleteBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteAutocompleteBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteAutocompleteChange","type":"void","description":"Fires each time a new `value` is typed and committed."},{"name":"calciteAutocompleteClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteAutocompleteOpen","type":"void","description":"Fires when the component is open and animation is complete."},{"name":"calciteAutocompleteTextChange","type":"void","description":"Fires each time a new `inputValue` is typed and committed."},{"name":"calciteAutocompleteTextInput","type":"void","description":"Fires each time a new `inputValue` is typed."}]}},{"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.","value":{"type":"string"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"heading","description":"Specifies the component's heading text.","value":{"type":"string"}},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"value","description":"Specifies the component's value.","value":{"type":"string"}}],"slots":[{"name":"content-end","description":"A slot for adding non-actionable elements after content of the component."},{"name":"content-start","description":"A slot for adding non-actionable elements before content of the component."}],"events":[{"name":"calciteAutocompleteItemSelect","type":"void","description":"Fires when the item has been selected."}],"js":{"properties":[{"name":"description","description":"Specifies a description for the component. Displays below the label text.","type":"string"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"heading","description":"Specifies the component's heading text.","type":"string"},{"name":"iconEnd","description":"Specifies an icon to display at the end of the component.","type":"IconName"},{"name":"iconFlipRtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"value","description":"Specifies the component's value.","type":"string"}],"events":[{"name":"calciteAutocompleteItemSelect","type":"void","description":"Fires when the item has been selected."}]}},{"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.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"any"}},{"name":"position","description":"Specifies the position of the group in the autocomplete menu.","default":"0","value":{"type":"number"}}],"slots":[{"name":"","description":"A slot for adding `calcite-autocomplete-item`s."}],"events":[],"js":{"properties":[{"name":"heading","description":"Specifies the component's heading text.","type":"string"},{"name":"label","description":"Specifies an accessible label for the component.","type":"any"},{"name":"position","description":"Specifies the position of the group in the autocomplete menu.","type":"number"}],"events":[]}},{"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.","value":{"type":"string"}},{"name":"label","description":"Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label for the component.","value":{"type":"string"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"thumbnail","description":"Specifies the `src` to an image. If the image is private, include an access token in the URL.","value":{"type":"string"}},{"name":"user-id","description":"Specifies the unique id of the user.","value":{"type":"string"}},{"name":"username","description":"Specifies the username of the user.","value":{"type":"string"}}],"events":[],"js":{"properties":[{"name":"fullName","description":"Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component.","type":"string"},{"name":"label","description":"Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label for the component.","type":"string"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"thumbnail","description":"Specifies the `src` to an image. If the image is private, include an access token in the URL.","type":"string"},{"name":"userId","description":"Specifies the unique id of the user.","type":"string"},{"name":"username","description":"Specifies the username of the user.","type":"string"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"description","description":"Specifies a description for the component. Displays below the heading.","value":{"type":"string"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"drag-disabled","description":"When `true`, and a parent `calcite-block-group` is `dragEnabled`, the component is not draggable.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"expanded","description":"When `true`, expands the component and its contents.","default":"false","value":{"type":"boolean"}},{"name":"heading","description":"Specifies the component's heading text.","value":{"type":"string"}},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","value":{"type":["1","2","3","4","5","6"]}},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"menu-placement","description":"Determines where the action menu will be positioned.","default":"\"bottom-end\"","value":{"type":["\"auto\"","\"top\"","\"bottom\"","\"left\"","\"right\"","\"auto-start\"","\"auto-end\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\"","\"right-start\"","\"right-end\"","\"left-start\"","\"left-end\"","\"leading-start\"","\"leading\"","\"leading-end\"","\"trailing-end\"","\"trailing\"","\"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.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"sort-handle-open","description":"When `true`, displays and positions the sort handle.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":["\"invalid\"","\"valid\"","\"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding custom content."},{"name":"actions-end","description":"A slot for adding actionable `calcite-action` elements after the content of the component. It is recommended to use two or fewer actions."},{"name":"content-end","description":"A slot for adding non-actionable elements after content of the component."},{"name":"content-start","description":"A slot for adding non-actionable elements before content of the component."},{"name":"header-menu-actions","description":"A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu."}],"events":[{"name":"calciteBlockBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteBlockBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteBlockClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteBlockCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteBlockExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteBlockOpen","type":"void","description":"Fires when the component is open and animation is complete."},{"name":"calciteBlockSortHandleBeforeClose","type":"void","description":"Fires when the sort handle is requested to be closed and before the closing transition begins."},{"name":"calciteBlockSortHandleBeforeOpen","type":"void","description":"Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteBlockSortHandleClose","type":"void","description":"Fires when the sort handle is closed and animation is complete."},{"name":"calciteBlockSortHandleOpen","type":"void","description":"Fires when the sort handle is open and animation is complete."},{"name":"calciteBlockToggle","type":"void","description":"Fires when the component's header is clicked."}],"js":{"properties":[{"name":"collapsible","description":"When `true`, the component is collapsible.","type":"boolean"},{"name":"description","description":"Specifies a description for the component. Displays below the heading.","type":"string"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"dragDisabled","description":"When `true`, and a parent `calcite-block-group` is `dragEnabled`, the component is not draggable.","type":"boolean"},{"name":"dragHandle","description":"When `true`, the component displays a draggable button.","type":"boolean"},{"name":"expanded","description":"When `true`, expands the component and its contents.","type":"boolean"},{"name":"heading","description":"Specifies the component's heading text.","type":"string"},{"name":"headingLevel","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","type":"HeadingLevel"},{"name":"iconEnd","description":"Specifies an icon to display at the end of the component.","type":"IconName"},{"name":"iconFlipRtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"menuFlipPlacements","description":"Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available.","type":"FlipPlacement[]"},{"name":"menuPlacement","description":"Determines where the action menu will be positioned.","type":"LogicalPlacement"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"open","description":"When `true`, expands the component and its contents.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"sortHandleOpen","description":"When `true`, displays and positions the sort handle.","type":"boolean"},{"name":"status","description":"Displays a status-related indicator icon.","type":"Status"},{"name":"topLayerDisabled","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.","type":"boolean"}],"events":[{"name":"calciteBlockBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteBlockBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteBlockClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteBlockCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteBlockExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteBlockOpen","type":"void","description":"Fires when the component is open and animation is complete."},{"name":"calciteBlockSortHandleBeforeClose","type":"void","description":"Fires when the sort handle is requested to be closed and before the closing transition begins."},{"name":"calciteBlockSortHandleBeforeOpen","type":"void","description":"Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteBlockSortHandleClose","type":"void","description":"Fires when the sort handle is closed and animation is complete."},{"name":"calciteBlockSortHandleOpen","type":"void","description":"Fires when the sort handle is open and animation is complete."},{"name":"calciteBlockToggle","type":"void","description":"Fires when the component's header is clicked."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"drag-enabled","description":"When `true`, `calcite-block`s are sortable via a draggable button.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"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.","value":{"type":"string"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"sort-disabled","description":"When `true`, and a `group` is defined, `calcite-block`s are no longer sortable.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding `calcite-block` elements."}],"events":[{"name":"calciteBlockGroupDragEnd","type":"BlockDragDetail","description":"Fires when the component's dragging has ended."},{"name":"calciteBlockGroupDragStart","type":"BlockDragDetail","description":"Fires when the component's dragging has started."},{"name":"calciteBlockGroupMoveHalt","type":"BlockDragDetail","description":"Fires when a user attempts to move an element using the sort menu and 'canPut' or 'canPull' returns falsy."},{"name":"calciteBlockGroupOrderChange","type":"BlockDragDetail","description":"Fires when the component's item order changes."}],"js":{"properties":[{"name":"canPull","description":"When provided, the method will be called to determine whether the element can move from the component.","type":"(detail: BlockDragDetail) => boolean | \"clone\""},{"name":"canPut","description":"When provided, the method will be called to determine whether the element can be added from another component.","type":"(detail: BlockDragDetail) => boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"dragEnabled","description":"When `true`, `calcite-block`s are sortable via a draggable button.","type":"boolean"},{"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.","type":"string | undefined"},{"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.","type":"string"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"sortDisabled","description":"When `true`, and a `group` is defined, `calcite-block`s are no longer sortable.","type":"boolean"}],"events":[{"name":"calciteBlockGroupDragEnd","type":"BlockDragDetail","description":"Fires when the component's dragging has ended."},{"name":"calciteBlockGroupDragStart","type":"BlockDragDetail","description":"Fires when the component's dragging has started."},{"name":"calciteBlockGroupMoveHalt","type":"BlockDragDetail","description":"Fires when a user attempts to move an element using the sort menu and 'canPut' or 'canPull' returns falsy."},{"name":"calciteBlockGroupOrderChange","type":"BlockDragDetail","description":"Fires when the component's item order changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"**Deprecated**: in v2.8.1, removal target v6.0.0 - Use `icon-start` instead.. Displays a status-related indicator icon.","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"text","description":"The component header text.","value":{"type":"string"}},{"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.","default":"\"button\"","value":{"type":["\"button\"","\"switch\""]}}],"slots":[{"name":"","description":"A slot for adding custom content."}],"events":[{"name":"calciteBlockSectionCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteBlockSectionExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteBlockSectionToggle","type":"void","description":"Fires when the header has been clicked."}],"js":{"properties":[{"name":"expanded","description":"When `true`, expands the component and its contents.","type":"boolean"},{"name":"iconEnd","description":"Specifies an icon to display at the end of the component.","type":"IconName"},{"name":"iconFlipRtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"open","description":"When `true`, expands the component and its contents.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"status","description":"Displays a status-related indicator icon.","type":"Status"},{"name":"text","description":"The component header text.","type":"string"},{"name":"toggleDisplay","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.","type":"BlockSectionToggleDisplay"}],"events":[{"name":"calciteBlockSectionCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteBlockSectionExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteBlockSectionToggle","type":"void","description":"Fires when the header has been clicked."}]}},{"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.","default":"\"center\"","value":{"type":["\"start\"","\"center\"","\"end\"","\"space-between\"","\"icon-start-space-between\"","\"icon-end-space-between\""]}},{"name":"appearance","description":"Specifies the appearance style of the component.","default":"\"solid\"","value":{"type":["\"solid\"","\"outline\"","\"outline-fill\"","\"transparent\""]}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":["string","boolean"]}},{"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.","value":{"type":"string"}},{"name":"href","description":"Specifies the URL of the linked resource, which can be set as an absolute or relative path.","value":{"type":"string"}},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}},{"name":"kind","description":"Specifies the kind of the component, which will apply to the border and background if applicable.","default":"\"brand\"","value":{"type":["\"brand\"","\"danger\"","\"inverse\"","\"neutral\""]}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"name":"rel","description":"Defines the relationship between the `href` value and the current document.","value":{"type":"string"}},{"name":"round","description":"When `true`, adds a round style to the component.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"split-child","description":"Specifies if the component is a child of a `calcite-split-button`.","default":"false","value":{"type":["\"primary\"","\"secondary\"","boolean"]}},{"name":"target","description":"Specifies where to open the linked document defined in the `href` property.","value":{"type":"string"}},{"name":"type","description":"Specifies the default behavior of the component.","default":"\"button\"","value":{"type":["\"button\"","\"reset\"","\"submit\""]}},{"name":"width","description":"Specifies the width of the component.","default":"\"auto\"","value":{"type":["\"auto\"","\"half\"","\"full\""]}}],"slots":[{"name":"","description":"A slot for adding text."}],"events":[],"js":{"properties":[{"name":"alignment","description":"Specifies the alignment of the component's elements.","type":"ButtonAlignment"},{"name":"appearance","description":"Specifies the appearance style of the component.","type":"Extract<\"outline\" | \"outline-fill\" | \"solid\" | \"transparent\", Appearance>"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string | boolean"},{"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.","type":"string"},{"name":"href","description":"Specifies the URL of the linked resource, which can be set as an absolute or relative path.","type":"string"},{"name":"iconEnd","description":"Specifies an icon to display at the end of the component.","type":"IconName"},{"name":"iconFlipRtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName"},{"name":"kind","description":"Specifies the kind of the component, which will apply to the border and background if applicable.","type":"Extract<\"brand\" | \"danger\" | \"inverse\" | \"neutral\", Kind>"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string | undefined"},{"name":"rel","description":"Defines the relationship between the `href` value and the current document.","type":"string"},{"name":"round","description":"When `true`, adds a round style to the component.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"splitChild","description":"Specifies if the component is a child of a `calcite-split-button`.","type":"\"primary\" | \"secondary\" | false"},{"name":"target","description":"Specifies where to open the linked document defined in the `href` property.","type":"string"},{"name":"type","description":"Specifies the default behavior of the component.","type":"HTMLButtonElement[\"type\"]"},{"name":"width","description":"Specifies the width of the component.","type":"Extract<Width, \"auto\" | \"half\" | \"full\">"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}},{"name":"thumbnail-position","description":"Sets the placement of the thumbnail defined in the `thumbnail` slot.","default":"\"block-start\"","value":{"type":["\"inline-start\"","\"inline-end\"","\"block-start\"","\"block-end\""]}}],"slots":[{"name":"","description":"A slot for adding content."},{"name":"thumbnail","description":"A slot for adding a thumbnail."},{"name":"heading","description":"A slot for adding a heading."},{"name":"description","description":"A slot for adding a description."},{"name":"footer-start","description":"A slot for adding a leading footer."},{"name":"footer-end","description":"A slot for adding a trailing footer."}],"events":[{"name":"calciteCardSelect","type":"void","description":"Fires when the deprecated `selectable` is true, or `selectionMode` set on parent `calcite-card-group` is not `none` and the component is selected."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"selectable","description":"When `true`, the component is selectable.","type":"boolean"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"},{"name":"thumbnailPosition","description":"Sets the placement of the thumbnail defined in the `thumbnail` slot.","type":"LogicalFlowPosition"}],"events":[{"name":"calciteCardSelect","type":"void","description":"Fires when the deprecated `selectable` is true, or `selectionMode` set on parent `calcite-card-group` is not `none` and the component is selected."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"selection-mode","description":"Specifies the selection mode of the component.","default":"\"none\"","value":{"type":["\"none\"","\"single\"","\"single-persist\"","\"multiple\""]}}],"slots":[{"name":"","description":"A slot for adding one or more `calcite-card`s."}],"events":[{"name":"calciteCardGroupSelect","type":"void","description":"Fires when the component's selection changes and the `selectionMode` is not `none`."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"selectedItems","description":"Specifies the component's selected items.","type":"Card[]"},{"name":"selectionMode","description":"Specifies the selection mode of the component.","type":"Extract<\"multiple\" | \"single\" | \"single-persist\" | \"none\", SelectionMode>"}],"events":[{"name":"calciteCardGroupSelect","type":"void","description":"Fires when the component's selection changes and the `selectionMode` is not `none`."}]}},{"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.","default":"\"inline\"","value":{"type":["\"inline\"","\"none\"","\"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.","default":"false","value":{"type":["\"\"","\"paused\"","boolean"]}},{"name":"autoplay-duration","description":"When `autoplay` is `true`, specifies in milliseconds the length of time to display each Carousel Item.","default":"6000","value":{"type":"number"}},{"name":"control-overlay","description":"Specifies if the component's controls are positioned absolutely on top of slotted Carousel Items.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"pagination-disabled","description":"When `true`, the component's pagination controls are hidden.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding `calcite-carousel-item`s."}],"events":[{"name":"calciteCarouselChange","type":"void","description":"Fires when the selected `calcite-carousel-item` changes."},{"name":"calciteCarouselPause","type":"void","description":"Fires when the carousel autoplay state pauses due to a user hovering over the component or focusing on the component or slotted content"},{"name":"calciteCarouselPlay","type":"void","description":"Fires when the carousel autoplay is invoked by the user."},{"name":"calciteCarouselResume","type":"void","description":"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"},{"name":"calciteCarouselStop","type":"void","description":"Fires when the carousel autoplay state is stopped by a user."}],"js":{"properties":[{"name":"arrowType","description":"Specifies how and if the \"previous\" and \"next\" arrows are displayed.","type":"ArrowType"},{"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.","type":"AutoplayType"},{"name":"autoplayDuration","description":"When `autoplay` is `true`, specifies in milliseconds the length of time to display each Carousel Item.","type":"number"},{"name":"controlOverlay","description":"Specifies if the component's controls are positioned absolutely on top of slotted Carousel Items.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"paginationDisabled","description":"When `true`, the component's pagination controls are hidden.","type":"boolean"},{"name":"selectedItem","description":"The component's selected `calcite-carousel-item`.","type":"CarouselItem"}],"events":[{"name":"calciteCarouselChange","type":"void","description":"Fires when the selected `calcite-carousel-item` changes."},{"name":"calciteCarouselPause","type":"void","description":"Fires when the carousel autoplay state pauses due to a user hovering over the component or focusing on the component or slotted content"},{"name":"calciteCarouselPlay","type":"void","description":"Fires when the carousel autoplay is invoked by the user."},{"name":"calciteCarouselResume","type":"void","description":"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"},{"name":"calciteCarouselStop","type":"void","description":"Fires when the carousel autoplay state is stopped by a user."}]}},{"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.","value":{"type":"string"}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding content."}],"events":[],"js":{"properties":[{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"value","description":"The component's value.","value":{"type":"any"}}],"events":[{"name":"calciteCheckboxChange","type":"void","description":"Fires when the component's `checked` status changes."}],"js":{"properties":[{"name":"checked","description":"When `true`, the component is checked.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"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.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"The component's value.","type":"any"}],"events":[{"name":"calciteCheckboxChange","type":"void","description":"Fires when the component's `checked` status changes."}]}},{"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.","default":"\"solid\"","value":{"type":["\"solid\"","\"outline\"","\"outline-fill\""]}},{"name":"closable","description":"When `true`, displays a close button in the component.","default":"false","value":{"type":"boolean"}},{"name":"closed","description":"When `true`, hides the component.","default":"false","value":{"type":"boolean"}},{"name":"close-on-delete","description":"When `true`, the component closes when the Delete or Backspace key is pressed while focused.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"icon","description":"Specifies an icon to display.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"kind","description":"Specifies the kind of the component, which will apply to border and background if applicable.","default":"\"neutral\"","value":{"type":["\"brand\"","\"inverse\"","\"neutral\""]}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"scale","description":"Specifies the size of the component.\n\nWhen contained in a parent `calcite-chip-group`, inherits the parent's `scale` value.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}},{"name":"value","description":"The component's value.","value":{"type":"any"}}],"slots":[{"name":"","description":"A slot for adding text."},{"name":"image","description":"A slot for adding an image."}],"events":[{"name":"calciteChipClose","type":"void","description":"Fires when the component's close button is selected."},{"name":"calciteChipSelect","type":"void","description":"Fires when the selected state of the component changes."}],"js":{"properties":[{"name":"appearance","description":"Specifies the appearance style of the component.","type":"Extract<\"outline\" | \"outline-fill\" | \"solid\", Appearance>"},{"name":"closable","description":"When `true`, displays a close button in the component.","type":"boolean"},{"name":"closed","description":"When `true`, hides the component.","type":"boolean"},{"name":"closeOnDelete","description":"When `true`, the component closes when the Delete or Backspace key is pressed while focused.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"icon","description":"Specifies an icon to display.","type":"IconName"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"kind","description":"Specifies the kind of the component, which will apply to border and background if applicable.","type":"Extract<\"brand\" | \"inverse\" | \"neutral\", Kind>"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"scale","description":"Specifies the size of the component.\n\nWhen contained in a parent `calcite-chip-group`, inherits the parent's `scale` value.","type":"Scale"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"},{"name":"value","description":"The component's value.","type":"any"}],"events":[{"name":"calciteChipClose","type":"void","description":"Fires when the component's close button is selected."},{"name":"calciteChipSelect","type":"void","description":"Fires when the selected state of the component changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"scale","description":"Specifies the size of the component. Child `calcite-chip`s inherit the component's value.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"\"none\"","value":{"type":["\"none\"","\"single\"","\"single-persist\"","\"multiple\""]}}],"slots":[{"name":"","description":"A slot for adding one or more `calcite-chip`s."}],"events":[{"name":"calciteChipGroupSelect","type":"void","description":"Fires when the component's selection changes."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"scale","description":"Specifies the size of the component. Child `calcite-chip`s inherit the component's value.","type":"Scale"},{"name":"selectedItems","description":"Specifies the component's selected items.","type":"Chip[]"},{"name":"selectionMode","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.","type":"Extract<\"multiple\" | \"single\" | \"single-persist\" | \"none\", SelectionMode>"}],"events":[{"name":"calciteChipGroupSelect","type":"void","description":"Fires when the component's selection changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"channels-disabled","description":"When `true`, hides the RGB/HSV channel inputs.","default":"false","value":{"type":"boolean"}},{"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`.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"field-disabled","description":"When `true`, hides the color field.","default":"false","value":{"type":"boolean"}},{"name":"format","description":"The format of `value`.\n\nWhen `\"auto\"`, the format will be inferred from `value` when set.","default":"\"auto\"","value":{"type":["\"auto\"","\"hex\"","\"hexa\"","\"hsv\"","\"rgb\"","\"rgb-css\"","\"rgba-css\"","\"hsl-css\"","\"hsla-css\"","\"rgba\"","\"hsl\"","\"hsla\"","\"hsva\""]}},{"name":"hex-disabled","description":"When `true`, hides the hex input.","default":"false","value":{"type":"boolean"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"saved-disabled","description":"When `true`, hides the saved colors section.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"storage-id","description":"Specifies the storage ID for colors.","value":{"type":"string"}},{"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.","value":{"type":["string","object"]}}],"events":[{"name":"calciteColorPickerChange","type":"void","description":"Fires when the color value has changed."},{"name":"calciteColorPickerInput","type":"void","description":"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."}],"js":{"properties":[{"name":"alphaChannel","description":"When `true`, the component will allow updates to the color's alpha value.","type":"boolean"},{"name":"channelsDisabled","description":"When `true`, hides the RGB/HSV channel inputs.","type":"boolean"},{"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`.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"fieldDisabled","description":"When `true`, hides the color field.","type":"boolean"},{"name":"format","description":"The format of `value`.\n\nWhen `\"auto\"`, the format will be inferred from `value` when set.","type":"Format"},{"name":"hexDisabled","description":"When `true`, hides the hex input.","type":"boolean"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem"},{"name":"savedDisabled","description":"When `true`, hides the saved colors section.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"storageId","description":"Specifies the storage ID for colors.","type":"string"},{"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.","type":"ColorValue | null"}],"events":[{"name":"calciteColorPickerChange","type":"void","description":"Fires when the color value has changed."},{"name":"calciteColorPickerInput","type":"void","description":"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."}]}},{"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`.","default":"false","value":{"type":"boolean"}},{"name":"alpha-channel","description":"When `true`, the component will allow updates to the color's alpha value.","default":"false","value":{"type":"boolean"}},{"name":"hex-label","description":"**Deprecated**: use `messages` instead. Specifies accessible label for the input field.","default":"\"Hex\"","value":{"type":"string"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"value","description":"The hex value.","value":{"type":"string"}}],"events":[{"name":"calciteColorPickerHexInputChange","type":"void","description":"Emitted when the hex value changes."}],"js":{"properties":[{"name":"allowEmpty","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`.","type":"boolean"},{"name":"alphaChannel","description":"When `true`, the component will allow updates to the color's alpha value.","type":"boolean"},{"name":"hexLabel","description":"Specifies accessible label for the input field.","type":"string"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem | undefined"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"value","description":"The hex value.","type":"string"}],"events":[{"name":"calciteColorPickerHexInputChange","type":"void","description":"Emitted when the hex value changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"color","description":"The color value.","value":{"type":"string"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"events":[],"js":{"properties":[{"name":"active","description":"When `true`, the component is active.","type":"boolean"},{"name":"color","description":"The color value.","type":"string | null"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"}],"events":[]}},{"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 position of the component.\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.","default":"false","value":{"type":"boolean"}},{"name":"clear-disabled","description":"When `true`, the value-clearing will be disabled.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"filter-text","description":"Text for the component's filter input field.","value":{"type":"string"}},{"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.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"max-items","description":"Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar.","default":"0","value":{"type":"number"}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"name":"open","description":"When `true`, displays and positions the component.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"placeholder","description":"Specifies the placeholder text for the input.","value":{"type":"string"}},{"name":"placeholder-icon","description":"Specifies the placeholder icon for the input.","value":{"type":"string"}},{"name":"placeholder-icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"placement","description":"Determines where the component will be positioned relative to the `referenceElement`.","default":"\"bottom-start\"","value":{"type":["\"auto\"","\"top\"","\"bottom\"","\"left\"","\"right\"","\"auto-start\"","\"auto-end\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\"","\"right-start\"","\"right-end\"","\"left-start\"","\"left-end\"","\"leading-start\"","\"leading\"","\"leading-end\"","\"trailing-end\"","\"trailing\"","\"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.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"select-all-enabled","description":"When `true` and `selectionMode` is `\"multiple\"` or `\"ancestors\"`, provides a checkbox for selecting all `calcite-combobox-item`s.","default":"false","value":{"type":"boolean"}},{"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.","default":"\"all\"","value":{"type":["\"single\"","\"all\"","\"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.","default":"\"multiple\"","value":{"type":["\"single\"","\"single-persist\"","\"ancestors\"","\"multiple\""]}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"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.","default":"false","value":{"type":"boolean"}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"The component's value(s) from the selected `calcite-combobox-item`(s).","value":{"type":["string","object"]}}],"slots":[{"name":"","description":"A slot for adding `calcite-combobox-item`s."},{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteComboboxBeforeClose","type":"void","description":"Fires when the component is requested to be closed, and before the closing transition begins."},{"name":"calciteComboboxBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteComboboxChange","type":"void","description":"Fires when the selected item(s) changes."},{"name":"calciteComboboxChipClose","type":"void","description":"Fires when a selected item in the component is closed via its `calcite-chip`."},{"name":"calciteComboboxClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteComboboxFilterChange","type":"void","description":"Fires when text is added to filter the options list."},{"name":"calciteComboboxOpen","type":"void","description":"Fires when the component is open and animation is complete."}],"js":{"properties":[{"name":"allowCustomValues","description":"When `true`, allows entry of custom values, which are not in the original set of items.","type":"boolean"},{"name":"clearDisabled","description":"When `true`, the value-clearing will be disabled.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"filteredItems","description":"Specifies the component's filtered items.","type":"HTMLCalciteComboboxItemElement[]"},{"name":"filterProps","description":"Specifies the properties to match against when filtering. If not set, all properties will be matched (`description`, `label`, `metadata`, `shortHeading`).","type":"string[]"},{"name":"filterText","description":"Text for the component's filter input field.","type":"string"},{"name":"flipPlacements","description":"Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available.","type":"FlipPlacement[]"},{"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.","type":"string"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"maxItems","description":"Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar.","type":"number"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"name":"open","description":"When `true`, displays and positions the component.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"placeholder","description":"Specifies the placeholder text for the input.","type":"string"},{"name":"placeholderIcon","description":"Specifies the placeholder icon for the input.","type":"IconName"},{"name":"placeholderIconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"placement","description":"Determines where the component will be positioned relative to the `referenceElement`.","type":"LogicalPlacement"},{"name":"readOnly","description":"When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.","type":"boolean"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"selectAllEnabled","description":"When `true` and `selectionMode` is `\"multiple\"` or `\"ancestors\"`, provides a checkbox for selecting all `calcite-combobox-item`s.","type":"boolean"},{"name":"selectedItems","description":"Specifies the component's selected items.","type":"HTMLCalciteComboboxItemElement[]"},{"name":"selectionDisplay","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.","type":"SelectionDisplay"},{"name":"selectionMode","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.","type":"Extract<\"single\" | \"single-persist\" | \"ancestors\" | \"multiple\", SelectionMode>"},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"topLayerDisabled","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.","type":"boolean"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"The component's value(s) from the selected `calcite-combobox-item`(s).","type":"string | string[]"}],"events":[{"name":"calciteComboboxBeforeClose","type":"void","description":"Fires when the component is requested to be closed, and before the closing transition begins."},{"name":"calciteComboboxBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteComboboxChange","type":"void","description":"Fires when the selected item(s) changes."},{"name":"calciteComboboxChipClose","type":"void","description":"Fires when a selected item in the component is closed via its `calcite-chip`."},{"name":"calciteComboboxClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteComboboxFilterChange","type":"void","description":"Fires when text is added to filter the options list."},{"name":"calciteComboboxOpen","type":"void","description":"Fires when the component is open and animation is complete."}]}},{"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** - Specifies the component's background color when active. \n- **--calcite-combobox-item-background-color-hover** - Specifies the component's background color when hovered. \n- **--calcite-combobox-item-shadow** - Specifies the component's shadow. \n- **--calcite-combobox-selected-icon-color** - Specifies the component's selected indicator icon color. \n- **--calcite-combobox-description-text-color** - Specifies the component's `description` and `shortHeading` text color. \n- **--calcite-combobox-description-text-color-press** - Specifies the component's `description` and `shortHeading` text color when hovered. \n- **--calcite-combobox-heading-text-color** - Specifies the component's `heading` text color. ","attributes":[{"name":"active","description":"When `true`, the component is active.","default":"false","value":{"type":"boolean"}},{"name":"description","description":"Specifies a description for the component. Displays below the heading.","value":{"type":"string"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"filter-disabled","description":"When `true`, omits the component from the `calcite-combobox` filtered search results.","default":"false","value":{"type":"boolean"}},{"name":"guid","description":"The `id` attribute of the component. When omitted, a globally unique identifier is used.","value":{"type":"string"}},{"name":"heading","description":"Specifies the component's heading text.","value":{"type":"string"}},{"name":"icon","description":"Specifies an icon to display.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"any"}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}},{"name":"short-heading","description":"The component's short heading.\n\nWhen provided, the short heading will be displayed in the component's selection.\n\nIt is recommended to use 5 characters or fewer.","value":{"type":"string"}},{"name":"value","description":"The component's value. Falls back to `heading` if not provided.","value":{"type":"any"}}],"slots":[{"name":"","description":"A slot for adding nested `calcite-combobox-item`s."},{"name":"content-end","description":"A slot for adding non-actionable elements after the component's content."},{"name":"content-start","description":"A slot for adding non-actionable elements before the component's content."}],"events":[{"name":"calciteComboboxItemChange","type":"void","description":"Fires whenever the component is selected or unselected."}],"js":{"properties":[{"name":"active","description":"When `true`, the component is active.","type":"boolean"},{"name":"ancestors","description":"Specifies the parent and grandparent items, which are set on `calcite-combobox`.","type":"ComboboxChildElement[]"},{"name":"description","description":"Specifies a description for the component. Displays below the heading.","type":"string"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"filterDisabled","description":"When `true`, omits the component from the `calcite-combobox` filtered search results.","type":"boolean"},{"name":"guid","description":"The `id` attribute of the component. When omitted, a globally unique identifier is used.","type":"string"},{"name":"heading","description":"Specifies the component's heading text.","type":"string"},{"name":"icon","description":"Specifies an icon to display.","type":"IconName"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"any"},{"name":"metadata","description":"Provides additional metadata to the component used in filtering.","type":"Record<string, unknown>"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"},{"name":"shortHeading","description":"The component's short heading.\n\nWhen provided, the short heading will be displayed in the component's selection.\n\nIt is recommended to use 5 characters or fewer.","type":"string"},{"name":"value","description":"The component's value. Falls back to `heading` if not provided.","type":"any"}],"events":[{"name":"calciteComboboxItemChange","type":"void","description":"Fires whenever the component is selected or unselected."}]}},{"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 text color of the component. \n- **--calcite-combobox-item-group-border-color** - Specifies the border color of the component. ","attributes":[{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"position","description":"Specifies the position of the group in the combobox menu.","default":"0","value":{"type":"number"}}],"slots":[{"name":"","description":"A slot for adding `calcite-combobox-item`s."}],"events":[],"js":{"properties":[{"name":"ancestors","description":"Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`.","type":"ComboboxChildElement[]"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"position","description":"Specifies the position of the group in the combobox menu.","type":"number"}],"events":[]}},{"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.","value":{"type":["\"start\"","\"end\""]}},{"name":"calendars","description":"Specifies the number of calendars displayed when `range` is `true`.","default":"2","value":{"type":["1","2"]}},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","value":{"type":["1","2","3","4","5","6"]}},{"name":"layout","description":"Defines the layout of the component.","default":"\"horizontal\"","value":{"type":["\"horizontal\"","\"vertical\""]}},{"name":"max","description":"When the component resides in a form,\nspecifies the latest allowed date (`\"yyyy-mm-dd\"`).","value":{"type":"string"}},{"name":"min","description":"When the component resides in a form,\nspecifies the earliest allowed date (`\"yyyy-mm-dd\"`).","value":{"type":"string"}},{"name":"month-style","description":"Specifies the monthStyle used by the component.","default":"\"wide\"","value":{"type":["\"abbreviated\"","\"wide\""]}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed.","value":{"type":["\"arab\"","\"arabext\"","\"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.","default":"false","value":{"type":"boolean"}},{"name":"range","description":"When `true`, activates the component's range mode to allow a start and end date.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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\"]`).","value":{"type":["string","object"]}}],"events":[{"name":"calciteDatePickerChange","type":"void","description":"Fires when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`."},{"name":"calciteDatePickerRangeChange","type":"void","description":"Fires when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`."}],"js":{"properties":[{"name":"activeDate","description":"Specifies the component's active date.","type":"Date"},{"name":"activeRange","description":"When `range` is true, specifies the active `range`. Where `\"start\"` specifies the starting range date and `\"end\"` the ending range date.","type":"\"start\" | \"end\""},{"name":"calendars","description":"Specifies the number of calendars displayed when `range` is `true`.","type":"1 | 2"},{"name":"headingLevel","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","type":"HeadingLevel"},{"name":"layout","description":"Defines the layout of the component.","type":"\"horizontal\" | \"vertical\""},{"name":"max","description":"When the component resides in a form,\nspecifies the latest allowed date (`\"yyyy-mm-dd\"`).","type":"string"},{"name":"maxAsDate","description":"Specifies the latest allowed date as a full date object (`new Date(\"yyyy-mm-dd\")`).","type":"Date"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"min","description":"When the component resides in a form,\nspecifies the earliest allowed date (`\"yyyy-mm-dd\"`).","type":"string"},{"name":"minAsDate","description":"Specifies the earliest allowed date as a full date object (`new Date(\"yyyy-mm-dd\")`).","type":"Date"},{"name":"monthStyle","description":"Specifies the monthStyle used by the component.","type":"\"abbreviated\" | \"wide\""},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed.","type":"NumberingSystem"},{"name":"proximitySelectionDisabled","description":"When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range.","type":"boolean"},{"name":"range","description":"When `true`, activates the component's range mode to allow a start and end date.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"\"s\" | \"m\" | \"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\"]`).","type":"string | string[]"},{"name":"valueAsDate","description":"Specifies the selected date as a full date object (`new Date(\"yyyy-mm-dd\")`), or an array containing full date objects (`[new Date(\"yyyy-mm-dd\"), new Date(\"yyyy-mm-dd\")]`).","type":"Date | Date[]"}],"events":[{"name":"calciteDatePickerChange","type":"void","description":"Fires when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`."},{"name":"calciteDatePickerRangeChange","type":"void","description":"Fires when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"current-month","description":"Date is in the current month.","default":"false","value":{"type":"boolean"}},{"name":"day","description":"Day of the month to be shown.","value":{"type":"number"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"end-of-range","description":"Date is the end of date range.","default":"false","value":{"type":"boolean"}},{"name":"highlighted","description":"Date is currently highlighted as part of the range,","default":"false","value":{"type":"boolean"}},{"name":"range","description":"When `true`, activates the component's range mode to allow a start and end date.","default":"false","value":{"type":"boolean"}},{"name":"range-hover","description":"Date is being hovered and within the set range.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}},{"name":"start-of-range","description":"Date is the start of date range.","default":"false","value":{"type":"boolean"}}],"events":[],"js":{"properties":[{"name":"active","description":"When `true`, the component is active.","type":"boolean"},{"name":"currentMonth","description":"Date is in the current month.","type":"boolean"},{"name":"day","description":"Day of the month to be shown.","type":"number"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"endOfRange","description":"Date is the end of date range.","type":"boolean"},{"name":"highlighted","description":"Date is currently highlighted as part of the range,","type":"boolean"},{"name":"range","description":"When `true`, activates the component's range mode to allow a start and end date.","type":"boolean"},{"name":"rangeHover","description":"Date is being hovered and within the set range.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"},{"name":"startOfRange","description":"Date is the start of date range.","type":"boolean"},{"name":"value","description":"The component's value.","type":"Date"}],"events":[]}},{"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`.","default":"2","value":{"type":["1","2"]}},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","value":{"type":["1","2","3","4","5","6"]}},{"name":"month-style","description":"Specifies the monthStyle used by the component.","value":{"type":["\"abbreviated\"","\"wide\""]}},{"name":"range","description":"When `true`, activates the component's range mode which renders two calendars for selecting ranges of dates.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"events":[],"js":{"properties":[{"name":"activeDate","description":"The currently active Date.","type":"Date"},{"name":"calendars","description":"Specifies the number of calendars displayed when `range` is `true`.","type":"1 | 2"},{"name":"endDate","description":"End date currently active.","type":"Date | undefined"},{"name":"headingLevel","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","type":"HeadingLevel"},{"name":"hoverRange","description":"The range of dates currently being hovered.","type":"HoverRange"},{"name":"max","description":"Specifies the latest allowed date (`\"yyyy-mm-dd\"`).","type":"Date"},{"name":"min","description":"Specifies the earliest allowed date (`\"yyyy-mm-dd\"`).","type":"Date"},{"name":"monthStyle","description":"Specifies the monthStyle used by the component.","type":"\"abbreviated\" | \"wide\""},{"name":"range","description":"When `true`, activates the component's range mode which renders two calendars for selecting ranges of dates.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"selectedDate","description":"Already selected date.","type":"Date"},{"name":"startDate","description":"Start date currently active.","type":"Date | undefined"}],"events":[]}},{"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\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.","default":"false","value":{"type":"boolean"}},{"name":"description","description":"Specifies a description for the component.","value":{"type":"string"}},{"name":"drag-enabled","description":"When `true`, the component is draggable.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"focus-trap-disabled","description":"When `true` and `modal` is `false`, prevents focus trapping.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"heading","description":"Specifies the component's heading text.","value":{"type":"string"}},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","value":{"type":["1","2","3","4","5","6"]}},{"name":"icon","description":"Specifies an icon to display.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"kind","description":"Specifies the kind of the component, which will style the top border.","value":{"type":["\"brand\"","\"danger\"","\"info\"","\"warning\"","\"success\""]}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"menu-open","description":"When `true`, the action menu items in the `header-menu-actions` slot are open.","default":"false","value":{"type":"boolean"}},{"name":"modal","description":"When `true`, displays a scrim blocking interaction underneath the component.","default":"false","value":{"type":"boolean"}},{"name":"open","description":"When `true`, displays and positions the component.","default":"false","value":{"type":"boolean"}},{"name":"outside-close-disabled","description":"When `true`, disables the closing of the component when clicked outside.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"placement","description":"Specifies the placement of the dialog.","default":"\"center\"","value":{"type":["\"center\"","\"top\"","\"bottom\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\"","\"cover\""]}},{"name":"resizable","description":"When `true`, the component is resizable.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"false","value":{"type":"boolean"}},{"name":"width","description":"Specifies the width of the component.","value":{"type":["\"s\"","\"m\"","\"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.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"slots":[{"name":"","description":"A slot for adding content."},{"name":"custom-content","description":"A slot for displaying custom content. Will prevent the rendering of any default Dialog UI, except for `box-shadow` and `corner-radius`."},{"name":"action-bar","description":"A slot for adding a `calcite-action-bar` to the component."},{"name":"alerts","description":"A slot for adding `calcite-alert`s to the component."},{"name":"content-bottom","description":"A slot for adding content below the unnamed (default) slot and - if populated - the `footer` slot."},{"name":"content-top","description":"A slot for adding content above the unnamed (default) slot and - if populated - below the `action-bar` slot."},{"name":"header-actions-start","description":"A slot for adding actions or content to the starting side of the component's header."},{"name":"header-actions-end","description":"A slot for adding actions or content to the ending side of the component's header."},{"name":"header-content","description":"A slot for adding custom content to the component's header."},{"name":"header-menu-actions","description":"A slot for adding an overflow menu with actions inside a `calcite-dropdown`."},{"name":"fab","description":"A slot for adding a `calcite-fab` (floating action button) to perform an action."},{"name":"footer","description":"A slot for adding custom content to the component's footer. Should not be used with the `\"footer-start\"` or `\"footer-end\"` slots."},{"name":"footer-end","description":"A slot for adding a trailing footer custom content. Should not be used with the `\"footer\"` slot."},{"name":"footer-start","description":"A slot for adding a leading footer custom content. Should not be used with the `\"footer\"` slot."}],"events":[{"name":"calciteDialogBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteDialogBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteDialogClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteDialogOpen","type":"void","description":"Fires when the component is open and animation is complete."},{"name":"calciteDialogScroll","type":"void","description":"Fires when the content is scrolled."}],"js":{"properties":[{"name":"beforeClose","description":"Passes a function to run before the component closes.","type":"() => Promise<void>"},{"name":"closeDisabled","description":"When `true`, disables the component's close button.","type":"boolean"},{"name":"description","description":"Specifies a description for the component.","type":"string"},{"name":"dragEnabled","description":"When `true`, the component is draggable.","type":"boolean"},{"name":"escapeDisabled","description":"When `true`, disables the default close on escape behavior.\n\nBy default, an open dialog can be dismissed by pressing the Esc key.","type":"boolean"},{"name":"focusTrapDisabled","description":"When `true` and `modal` is `false`, prevents focus trapping.","type":"boolean"},{"name":"focusTrapOptions","description":"Specifies custom focus trap configuration on the component, where\n\n`\"allowOutsideClick`\" allows outside clicks,\n`\"initialFocus\"` enables initial focus,\n`\"returnFocusOnDeactivate\"` returns focus when not active, and\n`\"extraContainers\"` specifies additional focusable elements external to the trap, such as 3rd-party components appending elements to the document body.\n`\"setReturnFocus\"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).","type":"Partial<FocusTrapOptions>"},{"name":"fullscreenDisabled","description":"When `true`, the component will not display at fullscreen, which may be desired in limited display areas, such as mobile devices.","type":"boolean"},{"name":"heading","description":"Specifies the component's heading text.","type":"string"},{"name":"headingLevel","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","type":"HeadingLevel"},{"name":"icon","description":"Specifies an icon to display.","type":"IconName"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"kind","description":"Specifies the kind of the component, which will style the top border.","type":"Extract<\"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\", Kind>"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"menuOpen","description":"When `true`, the action menu items in the `header-menu-actions` slot are open.","type":"boolean"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"modal","description":"When `true`, displays a scrim blocking interaction underneath the component.","type":"boolean"},{"name":"open","description":"When `true`, displays and positions the component.","type":"boolean"},{"name":"outsideCloseDisabled","description":"When `true`, disables the closing of the component when clicked outside.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"placement","description":"Specifies the placement of the dialog.","type":"DialogPlacement"},{"name":"resizable","description":"When `true`, the component is resizable.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"topLayerDisabled","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.","type":"boolean"},{"name":"width","description":"Specifies the width of the component.","type":"Extract<Width, Scale>"},{"name":"widthScale","description":"Specifies the width of the component.","type":"Scale"}],"events":[{"name":"calciteDialogBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteDialogBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteDialogClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteDialogOpen","type":"void","description":"Fires when the component is open and animation is complete."},{"name":"calciteDialogScroll","type":"void","description":"Fires when the content is scrolled."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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`.","default":"0","value":{"type":"number"}},{"name":"offset-distance","description":"Offset the position of the component away from the `referenceElement`.","default":"0","value":{"type":"number"}},{"name":"offset-skidding","description":"Offset the position of the component along the `referenceElement`.","default":"0","value":{"type":"number"}},{"name":"open","description":"When `true`, displays and positions the component.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"placement","description":"Determines where the component will be positioned relative to the container element.","default":"\"bottom-start\"","value":{"type":["\"top\"","\"bottom\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"false","value":{"type":"boolean"}},{"name":"type","description":"Specifies the action to open the component from the container element.","default":"\"click\"","value":{"type":["\"hover\"","\"click\""]}},{"name":"width","description":"Specifies the width of the component.","value":{"type":["\"s\"","\"m\"","\"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.","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"slots":[{"name":"","description":"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."},{"name":"trigger","description":"A slot for the element that triggers the `calcite-dropdown`."}],"events":[{"name":"calciteDropdownBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteDropdownBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteDropdownClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteDropdownOpen","type":"void","description":"Fires when the component is open and animation is complete."},{"name":"calciteDropdownSelect","type":"void","description":"Fires when a `calcite-dropdown-item`'s selection changes."}],"js":{"properties":[{"name":"closeOnSelectDisabled","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.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"flipPlacements","description":"Specifies the component's fallback `placement` for slotted `calcite-dropdown-items` when their initial or specified `placement` has insufficient space available.","type":"FlipPlacement[]"},{"name":"maxItems","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`.","type":"number"},{"name":"offsetDistance","description":"Offset the position of the component away from the `referenceElement`.","type":"number"},{"name":"offsetSkidding","description":"Offset the position of the component along the `referenceElement`.","type":"number"},{"name":"open","description":"When `true`, displays and positions the component.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"placement","description":"Determines where the component will be positioned relative to the container element.","type":"MenuPlacement"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"selectedItems","description":"Specifies the component's selected items.","type":"DropdownItem[]"},{"name":"topLayerDisabled","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.","type":"boolean"},{"name":"type","description":"Specifies the action to open the component from the container element.","type":"\"hover\" | \"click\""},{"name":"width","description":"Specifies the width of the component.","type":"Extract<Width, Scale>"},{"name":"widthScale","description":"Specifies the width of the component.","type":"Scale"}],"events":[{"name":"calciteDropdownBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteDropdownBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteDropdownClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteDropdownOpen","type":"void","description":"Fires when the component is open and animation is complete."},{"name":"calciteDropdownSelect","type":"void","description":"Fires when a `calcite-dropdown-item`'s selection changes."}]}},{"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.","value":{"type":"string"}},{"name":"position","description":"The position of the group in the dropdown menu.","default":"-1","value":{"type":"number"}},{"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.","default":"\"single\"","value":{"type":["\"none\"","\"single\"","\"multiple\""]}}],"slots":[{"name":"","description":"A slot for adding `calcite-dropdown-item`s."}],"events":[],"js":{"properties":[{"name":"groupTitle","description":"Specifies and displays a group title.","type":"string"},{"name":"position","description":"The position of the group in the dropdown menu.","type":"number"},{"name":"selectionMode","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.","type":"Extract<\"none\" | \"single\" | \"multiple\", SelectionMode>"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"rel","description":"Specifies the relationship to the linked document defined in `href`.","value":{"type":"string"}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}},{"name":"target","description":"Specifies the frame or window to open the linked document.","value":{"type":"string"}}],"slots":[{"name":"","description":"A slot for adding text."}],"events":[{"name":"calciteDropdownItemSelect","type":"void","description":"Fires when the component is selected."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"name":"iconEnd","description":"Specifies an icon to display at the end of the component.","type":"IconName"},{"name":"iconFlipRtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"rel","description":"Specifies the relationship to the linked document defined in `href`.","type":"string"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"},{"name":"target","description":"Specifies the frame or window to open the linked document.","type":"string"}],"events":[{"name":"calciteDropdownItemSelect","type":"void","description":"Fires when the component is selected."}]}},{"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.","default":"\"solid\"","value":{"type":["\"solid\"","\"outline-fill\""]}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"icon","description":"Specifies an icon to display.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"kind","description":"Specifies the kind of the component, which will apply to border and background.","default":"\"brand\"","value":{"type":["\"brand\"","\"danger\"","\"inverse\"","\"neutral\""]}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"text","description":"Specifies text to accompany the component's icon.","value":{"type":"string"}},{"name":"text-enabled","description":"When `true`, displays the `text` value in the component.","default":"false","value":{"type":"boolean"}}],"events":[],"js":{"properties":[{"name":"appearance","description":"Specifies the appearance style of the component.","type":"Extract<\"solid\" | \"outline-fill\", Appearance>"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"icon","description":"Specifies an icon to display.","type":"IconName"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"kind","description":"Specifies the kind of the component, which will apply to border and background.","type":"Extract<\"brand\" | \"danger\" | \"inverse\" | \"neutral\", Kind>"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string | undefined"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"text","description":"Specifies text to accompany the component's icon.","type":"string | undefined"},{"name":"textEnabled","description":"When `true`, displays the `text` value in the component.","type":"boolean"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"placeholder","description":"Specifies placeholder text for the input element.","value":{"type":"string"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"value","description":"The component's value.","value":{"type":"string"}}],"events":[{"name":"calciteFilterChange","type":"void","description":"Fires when the filter text changes."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"filteredItems","description":"The component's resulting items after filtering.","type":"object[]"},{"name":"filterProps","description":"Specifies the properties to match against when filtering. This will only apply when `value` is an object. If not set, all properties will be matched.","type":"string[] | undefined"},{"name":"items","description":"Defines the items to filter. The component uses the values as the starting point, and returns items\n\nthat contain the string entered in the input, using a partial match and recursive search.\n\nThis property is needed to conduct filtering.","type":"object[]"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string | undefined"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"placeholder","description":"Specifies placeholder text for the input element.","type":"string | undefined"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"value","description":"The component's value.","type":"string"}],"events":[{"name":"calciteFilterChange","type":"void","description":"Fires when the filter text changes."}]}},{"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":[],"slots":[{"name":"","description":"A slot for adding `calcite-flow-item` elements to the component."}],"events":[],"js":{"properties":[],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"closed","description":"When `true`, hides the component.","default":"false","value":{"type":"boolean"}},{"name":"collapsed","description":"When `true`, hides the component's content area.","default":"false","value":{"type":"boolean"}},{"name":"collapsible","description":"When `true`, the component is collapsible.","default":"false","value":{"type":"boolean"}},{"name":"description","description":"Specifies a description for the component.","value":{"type":"string"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"heading","description":"Specifies the component's heading text.","value":{"type":"string"}},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","value":{"type":["1","2","3","4","5","6"]}},{"name":"icon","description":"Specifies an icon to display.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"menu-open","description":"When `true`, the action menu items in the `header-menu-actions` slot are open.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"selected","description":"When `true`, the component is displayed within a parent flow.","default":"false","value":{"type":"boolean"}},{"name":"show-back-button","description":"When `true`, displays a back button in the component's header.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding custom content."},{"name":"action-bar","description":"A slot for adding a `calcite-action-bar` to the component."},{"name":"alerts","description":"A slot for adding `calcite-alert`s to the component."},{"name":"content-top","description":"A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated)."},{"name":"content-bottom","description":"A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)"},{"name":"header-actions-start","description":"A slot for adding `calcite-action`s or content to the start side of the component's header."},{"name":"header-actions-end","description":"A slot for adding `calcite-action`s or content to the end side of the component's header."},{"name":"header-content","description":"A slot for adding custom content to the component's header."},{"name":"header-menu-actions","description":"A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`."},{"name":"fab","description":"A slot for adding a `calcite-fab` (floating action button) to perform an action."},{"name":"footer","description":"A slot for adding custom content to the component's footer. Should not be used with the `\"footer-start\"` or `\"footer-end\"` slots."},{"name":"footer-end","description":"A slot for adding a trailing footer custom content. Should not be used with the `\"footer\"` slot."},{"name":"footer-start","description":"A slot for adding a leading footer custom content. Should not be used with the `\"footer\"` slot."}],"events":[{"name":"calciteFlowItemBack","type":"void","description":"Fires when the back button is clicked."},{"name":"calciteFlowItemClose","type":"void","description":"Fires when the close button is clicked."},{"name":"calciteFlowItemCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteFlowItemExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteFlowItemScroll","type":"void","description":"Fires when the content is scrolled."},{"name":"calciteFlowItemToggle","type":"void","description":"Fires when the collapse button is clicked."}],"js":{"properties":[{"name":"beforeBack","description":"When provided, the method will be called before it is removed from its parent `calcite-flow`.","type":"(() => Promise<void>) | undefined"},{"name":"beforeClose","description":"Passes a function to run before the component closes.","type":"() => Promise<void>"},{"name":"closable","description":"When `true`, displays a close button in the trailing side of the component's header.","type":"boolean"},{"name":"closed","description":"When `true`, hides the component.","type":"boolean"},{"name":"collapsed","description":"When `true`, hides the component's content area.","type":"boolean"},{"name":"collapsible","description":"When `true`, the component is collapsible.","type":"boolean"},{"name":"description","description":"Specifies a description for the component.","type":"string"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"heading","description":"Specifies the component's heading text.","type":"string"},{"name":"headingLevel","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","type":"HeadingLevel"},{"name":"icon","description":"Specifies an icon to display.","type":"IconName"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"menuOpen","description":"When `true`, the action menu items in the `header-menu-actions` slot are open.","type":"boolean"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"selected","description":"When `true`, the component is displayed within a parent flow.","type":"boolean"},{"name":"showBackButton","description":"When `true`, displays a back button in the component's header.","type":"boolean"},{"name":"topLayerDisabled","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.","type":"boolean"}],"events":[{"name":"calciteFlowItemBack","type":"void","description":"Fires when the back button is clicked."},{"name":"calciteFlowItemClose","type":"void","description":"Fires when the close button is clicked."},{"name":"calciteFlowItemCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteFlowItemExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteFlowItemScroll","type":"void","description":"Fires when the content is scrolled."},{"name":"calciteFlowItemToggle","type":"void","description":"Fires when the collapse button is clicked."}]}},{"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.","value":{"type":"number"}},{"name":"highlight-min","description":"Start of highlight color if highlighting range.","value":{"type":"number"}},{"name":"max","description":"Highest point of the range.","value":{"type":"number"}},{"name":"min","description":"Lowest point of the range.","value":{"type":"number"}}],"events":[],"js":{"properties":[{"name":"colorStops","description":"Array of values describing a single color stop ([offset, color, opacity])\nThese color stops should be sorted by offset value.","type":"ColorStop[]"},{"name":"data","description":"Array of tuples describing a single data point ([x, y])\nThese data points should be sorted by x-axis value.","type":"DataSeries"},{"name":"highlightMax","description":"End of highlight color if highlighting range.","type":"number"},{"name":"highlightMin","description":"Start of highlight color if highlighting range.","type":"number"},{"name":"max","description":"Highest point of the range.","type":"number"},{"name":"min","description":"Lowest point of the range.","type":"number"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"drag-handle","description":"Value for the button title attribute.","value":{"type":"string"}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}}],"events":[{"name":"calciteHandleChange","type":"void","description":"Fires whenever the component is selected or unselected."},{"name":"calciteHandleNudge","type":"HandleNudge","description":"Fires when the handle is selected and the up or down arrow key is pressed."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"dragHandle","description":"Value for the button title attribute.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"}],"events":[{"name":"calciteHandleChange","type":"void","description":"Fires whenever the component is selected or unselected."},{"name":"calciteHandleNudge","type":"HandleNudge","description":"Fires when the handle is selected and the up or down arrow key is pressed."}]}},{"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`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"icon","description":"Displays a specific icon.","value":{"type":"string"}},{"name":"preload","description":"When `true`, it preloads the icon data.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"text-label","description":"Accessible name for the component.\n\nIt is recommended to set this value if your icon is semantic.","value":{"type":"string"}}],"events":[],"js":{"properties":[{"name":"flipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"icon","description":"Displays a specific icon.","type":"IconName"},{"name":"preload","description":"When `true`, it preloads the icon data.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"textLabel","description":"Accessible name for the component.\n\nIt is recommended to set this value if your icon is semantic.","type":"string"}],"events":[]}},{"name":"calcite-inline-editable","description":"### Events\n- **calciteInlineEditableEditCancel** - Emits when the component's \"cancel editing\" button is pressed.\n- **calciteInlineEditableEditConfirm** - Emits when the component's \"confirm edits\" button is pressed.\n\n### Methods\n- `componentOnReady(): Promise<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** - Specifies the button element's background color when appearance=\"solid\" or appearance=\"outline-fill\". \n- **--calcite-inline-editable-button-corner-radius** - Specifies the button element's corner radius. \n- **--calcite-inline-editable-button-loader-color** - Specifies the button element's loader color. \n- **--calcite-inline-editable-button-text-color** - Specifies the button element's text color. ","attributes":[{"name":"controls","description":"When `true` and `editingEnabled` is `true`, displays save and cancel controls on the component.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"editing-enabled","description":"When `true`, inline editing is enabled on the component.","default":"false","value":{"type":"boolean"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"slots":[{"name":"","description":"A slot for adding a `calcite-input`."}],"events":[{"name":"calciteInlineEditableEditCancel","type":"void","description":"Emits when the component's \"cancel editing\" button is pressed."},{"name":"calciteInlineEditableEditConfirm","type":"void","description":"Emits when the component's \"confirm edits\" button is pressed."}],"js":{"properties":[{"name":"afterConfirm","description":"Specifies a callback to be executed prior to disabling editing via the controls. When provided, the component's loading state will be handled automatically.","type":"() => Promise<void>"},{"name":"controls","description":"When `true` and `editingEnabled` is `true`, displays save and cancel controls on the component.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"editingEnabled","description":"When `true`, inline editing is enabled on the component.","type":"boolean"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"}],"events":[{"name":"calciteInlineEditableEditCancel","type":"void","description":"Emits when the component's \"cancel editing\" button is pressed."},{"name":"calciteInlineEditableEditConfirm","type":"void","description":"Emits when the component's \"confirm edits\" button is pressed."}]}},{"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-button` next 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** - Specifies the component's prefix width, when present. \n- **--calcite-input-suffix-size** - Specifies the component's suffix width, when present. \n- **--calcite-input-background-color** - Specifies the component's background color. \n- **--calcite-input-border-color** - Specifies the component's border color. \n- **--calcite-input-corner-radius** - Specifies the component's corner radius. \n- **--calcite-input-shadow** - Specifies the shadow around the component. \n- **--calcite-input-icon-color** - Specifies the component's icon color. \n- **--calcite-input-text-color** - Specifies the component's text color. \n- **--calcite-input-placeholder-text-color** - Specifies the component's placeholder text color. \n- **--calcite-input-actions-background-color** - Specifies the background color of the component's `clearable` and `number-button-type` elements. \n- **--calcite-input-actions-background-color-hover** - Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered. \n- **--calcite-input-actions-background-color-press** - Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed. \n- **--calcite-input-actions-icon-color** - Specifies the icon color of the component's `clearable` and `number-button-type` elements. \n- **--calcite-input-actions-icon-color-hover** - Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered. \n- **--calcite-input-actions-icon-color-press** - Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed. \n- **--calcite-input-loading-background-color** - Specifies the background color of the `loading` element, when present. \n- **--calcite-input-loading-fill-color** - Specifies the fill color of the `loading` element, when present. \n- **--calcite-input-prefix-text-color** - Specifies the component's prefix text color, when present. \n- **--calcite-input-suffix-text-color** - Specifies the component's suffix text color, when present. ","attributes":[{"name":"accept","description":"Specifies a comma separated list of unique file type specifiers for limiting accepted file types.\nThis property only has an effect when `type` is \"file\".\nRead the native attribute's documentation on MDN for more info.","value":{"type":"string"}},{"name":"alignment","description":"Specifies the text alignment of the component's value.","default":"\"start\"","value":{"type":["\"start\"","\"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.","value":{"type":"string"}},{"name":"clearable","description":"When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `\"search\"`, `\"time\"`, and `\"date\"` types.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"group-separator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","default":"false","value":{"type":"boolean"}},{"name":"icon","description":"When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.","value":{"type":["string","boolean"]}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"max","description":"When the component resides in a form,\nspecifies the maximum value for `type=\"number\"`.","value":{"type":"number"}},{"name":"max-length","description":"When the component resides in a form,\nspecifies the maximum length of text for the component's value.","value":{"type":"number"}},{"name":"min","description":"When the component resides in a form,\nspecifies the minimum value for `type=\"number\"`.","value":{"type":"number"}},{"name":"min-length","description":"When the component resides in a form,\nspecifies the minimum length of text for the component's value.","value":{"type":"number"}},{"name":"multiple","description":"When `true`, the component can accept more than one value.\nThis property only has an effect when `type` is \"email\" or \"file\".\nRead the native attribute's documentation on MDN for more info.","default":"false","value":{"type":"boolean"}},{"name":"name","description":"Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.","value":{"type":"string"}},{"name":"number-button-type","description":"Specifies the placement of the buttons for `type=\"number\"`.","default":"\"vertical\"","value":{"type":["\"horizontal\"","\"vertical\"","\"none\""]}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"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.","value":{"type":"string"}},{"name":"placeholder","description":"Specifies placeholder text for the component.","value":{"type":"string"}},{"name":"prefix-text","description":"Adds text to the start of the component.","value":{"type":"string"}},{"name":"read-only","description":"When `true`, the component's value can be read, but cannot be modified.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"step","description":"Specifies the granularity the component's `value` must adhere to.","value":{"type":["\"any\"","number"]}},{"name":"suffix-text","description":"Adds text to the end of the component.","value":{"type":"string"}},{"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\"`.","default":"\"text\"","value":{"type":["\"color\"","\"date\"","\"datetime-local\"","\"email\"","\"file\"","\"image\"","\"month\"","\"number\"","\"password\"","\"search\"","\"tel\"","\"text\"","\"time\"","\"url\"","\"week\""]}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"The component's value.","value":{"type":"string"}}],"slots":[{"name":"action","description":"A slot for positioning a `calcite-button` next to the component."},{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteInputChange","type":"void","description":"Fires each time a new `value` is typed and committed."},{"name":"calciteInputInput","type":"void","description":"Fires each time a new `value` is typed."}],"js":{"properties":[{"name":"accept","description":"Specifies a comma separated list of unique file type specifiers for limiting accepted file types.\nThis property only has an effect when `type` is \"file\".\nRead the native attribute's documentation on MDN for more info.","type":"string"},{"name":"alignment","description":"Specifies the text alignment of the component's value.","type":"Extract<\"start\" | \"end\", Alignment>"},{"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.","type":"AutoFill"},{"name":"clearable","description":"When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `\"search\"`, `\"time\"`, and `\"date\"` types.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"files","description":"When `type` is `\"file\"`, specifies the component's selected files.","type":"FileList | undefined"},{"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.","type":"string"},{"name":"groupSeparator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","type":"boolean"},{"name":"icon","description":"When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.","type":"IconName | boolean"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"max","description":"When the component resides in a form,\nspecifies the maximum value for `type=\"number\"`.","type":"number"},{"name":"maxLength","description":"When the component resides in a form,\nspecifies the maximum length of text for the component's value.","type":"number"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"min","description":"When the component resides in a form,\nspecifies the minimum value for `type=\"number\"`.","type":"number"},{"name":"minLength","description":"When the component resides in a form,\nspecifies the minimum length of text for the component's value.","type":"number"},{"name":"multiple","description":"When `true`, the component can accept more than one value.\nThis property only has an effect when `type` is \"email\" or \"file\".\nRead the native attribute's documentation on MDN for more info.","type":"boolean"},{"name":"name","description":"Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.","type":"string"},{"name":"numberButtonType","description":"Specifies the placement of the buttons for `type=\"number\"`.","type":"InputPlacement"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem"},{"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.","type":"string"},{"name":"placeholder","description":"Specifies placeholder text for the component.","type":"string"},{"name":"prefixText","description":"Adds text to the start of the component.","type":"string"},{"name":"readOnly","description":"When `true`, the component's value can be read, but cannot be modified.","type":"boolean"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"step","description":"Specifies the granularity the component's `value` must adhere to.","type":"number | \"any\""},{"name":"suffixText","description":"Adds text to the end of the component.","type":"string"},{"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\"`.","type":"\"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"image\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\""},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"The component's value.","type":"string"}],"events":[{"name":"calciteInputChange","type":"void","description":"Fires each time a new `value` is typed and committed."},{"name":"calciteInputInput","type":"void","description":"Fires each time a new `value` is typed."}]}},{"name":"calcite-input-date-picker","description":"### Events\n- **calciteInputDatePickerBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteInputDatePickerBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteInputDatePickerChange** - Fires when the component's `value` changes.\n- **calciteInputDatePickerClose** - Fires when the component is closed and animation is complete.\n- **calciteInputDatePickerOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<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.\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 actions of the calendar. \n- **--calcite-input-date-picker-calendar-actions-background-color-hover** - Specifies the background color of actions of the calendar when hovered. \n- **--calcite-input-date-picker-calendar-actions-background-color-press** - Specifies the background color of actions of the calendar 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 component's calendar border color. \n- **--calcite-input-date-picker-calendar-corner-radius** - Specifies the component's calendar corner radius. \n- **--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-background-color** - Specifies the background color of day of the calendar. \n- **--calcite-input-date-picker-calendar-day-background-color-hover** - Specifies the background color of day of the calendar 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 select day range of the component's date-picker. \n- **--calcite-input-date-picker-calendar-day-text-color-selected** - Specifies the text color of selected day of the component's date-picker. \n- **--calcite-input-date-picker-calendar-day-outside-range-background-color-hover** - Specifies the background color of day's outside current range of the component's date-picker when hovered. \n- **--calcite-input-date-picker-calendar-day-outside-range-text-color-hover** - Specifies the text color of day's outside current range of the component's date-picker when hovered. \n- **--calcite-input-date-picker-calendar-day-text-color** - Specifies the text color of day of the component's date-picker. \n- **--calcite-input-date-picker-calendar-day-text-color-hover** - Specifies the text color of day of the component's date-picker when hovered. \n- **--calcite-input-date-picker-calendar-selected-background-color** - Specifies the background color of selected day and day range of the calendar. \n- **--calcite-input-date-picker-calendar-shadow** - 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. \n- **--calcite-input-date-picker-calendar-month-select-text-color** - Specifies the text color of month select of the component's date-picker. \n- **--calcite-input-date-picker-calendar-range-divider-color** - Specifies the divider color between the component's date-picker. \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** - Specifies the component's divider color between two inputs when in range mode. \n- **--calcite-input-date-picker-icon-color** - Specifies the component's in-field 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":"Specifies the number of calendars displayed when `range` is `true`.","default":"2","value":{"type":["1","2"]}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"focus-trap-disabled","description":"When `true`, prevents focus trapping.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","value":{"type":["1","2","3","4","5","6"]}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"layout","description":"Defines the layout of the component.","default":"\"horizontal\"","value":{"type":["\"horizontal\"","\"vertical\""]}},{"name":"max","description":"When the component resides in a form,\nspecifies the latest allowed date (\"yyyy-mm-dd\").","value":{"type":"string"}},{"name":"min","description":"When the component resides in a form,\nspecifies the earliest allowed date (\"yyyy-mm-dd\").","value":{"type":"string"}},{"name":"month-style","description":"Specifies the monthStyle used by the component.","default":"\"wide\"","value":{"type":["\"abbreviated\"","\"wide\""]}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"open","description":"When `true`, displays the `calcite-date-picker` component.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"placement","description":"Specifies the placement of the `calcite-date-picker` relative to the component.","default":"\"bottom-start\"","value":{"type":["\"top\"","\"bottom\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"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.","default":"false","value":{"type":"boolean"}},{"name":"range","description":"When `true`, activates a range for the component.","default":"false","value":{"type":"boolean"}},{"name":"read-only","description":"When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"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.","default":"false","value":{"type":"boolean"}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"Selected date as a string in ISO format (`\"yyyy-mm-dd\"`).","value":{"type":["string","object"]}}],"slots":[{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteInputDatePickerBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteInputDatePickerBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteInputDatePickerChange","type":"void","description":"Fires when the component's `value` changes."},{"name":"calciteInputDatePickerClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteInputDatePickerOpen","type":"void","description":"Fires when the component is open and animation is complete."}],"js":{"properties":[{"name":"calendars","description":"Specifies the number of calendars displayed when `range` is `true`.","type":"1 | 2"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"flipPlacements","description":"Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available.","type":"FlipPlacement[]"},{"name":"focusTrapDisabled","description":"When `true`, prevents focus trapping.","type":"boolean"},{"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.","type":"string"},{"name":"headingLevel","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","type":"HeadingLevel"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"layout","description":"Defines the layout of the component.","type":"\"horizontal\" | \"vertical\""},{"name":"max","description":"When the component resides in a form,\nspecifies the latest allowed date (\"yyyy-mm-dd\").","type":"string"},{"name":"maxAsDate","description":"Specifies the latest allowed date as a full date object.","type":"Date"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"min","description":"When the component resides in a form,\nspecifies the earliest allowed date (\"yyyy-mm-dd\").","type":"string"},{"name":"minAsDate","description":"Specifies the earliest allowed date as a full date object.","type":"Date"},{"name":"monthStyle","description":"Specifies the monthStyle used by the component.","type":"\"abbreviated\" | \"wide\""},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed.","type":"NumberingSystem"},{"name":"open","description":"When `true`, displays the `calcite-date-picker` component.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"placement","description":"Specifies the placement of the `calcite-date-picker` relative to the component.","type":"MenuPlacement"},{"name":"proximitySelectionDisabled","description":"When `true`, disables the default behavior on the third click of narrowing or extending the range.\nInstead starts a new range.","type":"boolean"},{"name":"range","description":"When `true`, activates a range for the component.","type":"boolean"},{"name":"readOnly","description":"When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.","type":"boolean"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"\"s\" | \"m\" | \"l\""},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"topLayerDisabled","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.","type":"boolean"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"Selected date as a string in ISO format (`\"yyyy-mm-dd\"`).","type":"string | string[]"},{"name":"valueAsDate","description":"The component's value as a full date object.","type":"Date | Date[]"}],"events":[{"name":"calciteInputDatePickerBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteInputDatePickerBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteInputDatePickerChange","type":"void","description":"Fires when the component's `value` changes."},{"name":"calciteInputDatePickerClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteInputDatePickerOpen","type":"void","description":"Fires when the component is open and animation is complete."}]}},{"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 margin spacing at the top of the component. \n- **--calcite-input-message-icon-color** - Specifies the component's icon color. ","attributes":[{"name":"icon","description":"Specifies an icon to display.","value":{"type":["string","boolean"]}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}}],"slots":[{"name":"","description":"A slot for adding text."}],"events":[],"js":{"properties":[{"name":"icon","description":"Specifies an icon to display.","type":"IconName | boolean"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"}],"events":[]}},{"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.\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** - Specifies the background color of the `loading` element. \n- **--calcite-input-loading-fill-color** - Specifies the fill color of the `loading` element. \n- **--calcite-input-number-background-color** - Specifies the background color of the component. \n- **--calcite-input-number-border-color** - Specifies the border color of the component. \n- **--calcite-input-number-corner-radius** - Specifies the border radius of the component. \n- **--calcite-input-number-icon-color** - Specifies the component's icon color. \n- **--calcite-input-number-height** - Specifies the height of the component. \n- **--calcite-input-number-placeholder-text-color** - Specifies the text color of the placeholder in the component. \n- **--calcite-input-number-text-color** - Specifies the text color of the component. \n- **--calcite-input-number-text-color-focus** - Specifies the text color of the component when focused. \n- **--calcite-input-prefix-size** - Specifies the width of the prefix element. \n- **--calcite-input-prefix-text-color** - Specifies the text color of the prefix element. \n- **--calcite-input-suffix-size** - Specifies the width of the suffix element. \n- **--calcite-input-suffix-text-color** - Specifies the text color of the suffix element. ","attributes":[{"name":"alignment","description":"Specifies the text alignment of the component's value.","default":"\"start\"","value":{"type":["\"start\"","\"center\"","\"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.","value":{"type":"string"}},{"name":"clearable","description":"When `true`, a clear button is displayed when the component has a value.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"group-separator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","default":"false","value":{"type":"boolean"}},{"name":"icon","description":"Specifies an icon to display.","value":{"type":["string","boolean"]}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"integer","description":"When `true`, restricts the component to integer numbers only and disables exponential notation.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component's button or hyperlink.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"loading","description":"When `true`, the component is in the loading state and `calcite-progress` is displayed.","default":"false","value":{"type":"boolean"}},{"name":"max","description":"When the component resides in a form,\nspecifies the maximum value.","value":{"type":"number"}},{"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.","value":{"type":"number"}},{"name":"min","description":"When the component resides in a form,\nspecifies the minimum value.","value":{"type":"number"}},{"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.","value":{"type":"number"}},{"name":"name","description":"Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.","value":{"type":"string"}},{"name":"number-button-type","description":"Specifies the placement of the buttons.","default":"\"vertical\"","value":{"type":["\"horizontal\"","\"vertical\"","\"none\""]}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"placeholder","description":"Specifies placeholder text for the component.","value":{"type":"string"}},{"name":"prefix-text","description":"Adds text to the start of the component.","value":{"type":"string"}},{"name":"read-only","description":"When `true`, the component's value can be read, but cannot be modified.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"step","description":"Specifies the granularity that the component's value must adhere to.","value":{"type":["\"any\"","number"]}},{"name":"suffix-text","description":"Adds text to the end of the component.","value":{"type":"string"}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"The component's value.","value":{"type":"string"}}],"slots":[{"name":"action","description":"A slot for positioning a `calcite-action` or other interactive content."},{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteInputNumberChange","type":"void","description":"Fires each time a new value is typed and committed."},{"name":"calciteInputNumberInput","type":"void","description":"Fires each time a new value is typed."}],"js":{"properties":[{"name":"alignment","description":"Specifies the text alignment of the component's value.","type":"Alignment"},{"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.","type":"AutoFill"},{"name":"clearable","description":"When `true`, a clear button is displayed when the component has a value.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"name":"groupSeparator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","type":"boolean"},{"name":"icon","description":"Specifies an icon to display.","type":"IconName | boolean"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"integer","description":"When `true`, restricts the component to integer numbers only and disables exponential notation.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component's button or hyperlink.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"loading","description":"When `true`, the component is in the loading state and `calcite-progress` is displayed.","type":"boolean"},{"name":"max","description":"When the component resides in a form,\nspecifies the maximum value.","type":"number"},{"name":"maxLength","description":"When the component resides in a form,\nspecifies the maximum length of text for the component's value.","type":"number"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"min","description":"When the component resides in a form,\nspecifies the minimum value.","type":"number"},{"name":"minLength","description":"When the component resides in a form,\nspecifies the minimum length of text for the component's value.","type":"number"},{"name":"name","description":"Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.","type":"string"},{"name":"numberButtonType","description":"Specifies the placement of the buttons.","type":"InputPlacement"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem"},{"name":"placeholder","description":"Specifies placeholder text for the component.","type":"string"},{"name":"prefixText","description":"Adds text to the start of the component.","type":"string"},{"name":"readOnly","description":"When `true`, the component's value can be read, but cannot be modified.","type":"boolean"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"step","description":"Specifies the granularity that the component's value must adhere to.","type":"number | \"any\""},{"name":"suffixText","description":"Adds text to the end of the component.","type":"string"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"The component's value.","type":"string"}],"events":[{"name":"calciteInputNumberChange","type":"void","description":"Fires each time a new value is typed and committed."},{"name":"calciteInputNumberInput","type":"void","description":"Fires each time a new value is typed."}]}},{"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 button next 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` & icon elements. \n- **--calcite-input-action-icon-color-hover** - Specifies the icon color of the component's `clearable` & icon elements when hovered. \n- **--calcite-input-action-icon-color-press** - Specifies the icon color of the component's `clearable` & icon elements when pressed. \n- **--calcite-input-loading-background-color** - Specifies the background color of the `loading` element. \n- **--calcite-input-loading-fill-color** - Specifies the fill color of the `loading` element. \n- **--calcite-input-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.","default":"\"start\"","value":{"type":["\"start\"","\"center\"","\"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.","value":{"type":"string"}},{"name":"clearable","description":"When `true`, a clear button is displayed when the component has a value.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"icon","description":"Specifies an icon to display.","value":{"type":["string","boolean"]}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component's button or hyperlink.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"loading","description":"When `true`, the component is in the loading state and `calcite-progress` is displayed.","default":"false","value":{"type":"boolean"}},{"name":"max-length","description":"When the component resides in a form,\nspecifies the maximum length of text for the component's value.","value":{"type":"number"}},{"name":"min-length","description":"When the component resides in a form,\nspecifies the minimum length of text for the component's value.","value":{"type":"number"}},{"name":"name","description":"Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.","value":{"type":"string"}},{"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.","value":{"type":"string"}},{"name":"placeholder","description":"Specifies placeholder text for the component.","value":{"type":"string"}},{"name":"prefix-text","description":"Adds text to the start of the component.","value":{"type":"string"}},{"name":"read-only","description":"When `true`, the component's value can be read, but cannot be modified.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"suffix-text","description":"Adds text to the end of the component.","value":{"type":"string"}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"The component's value.","value":{"type":"string"}}],"slots":[{"name":"action","description":"A slot for positioning a button next to the component."},{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteInputTextChange","type":"void","description":"Fires each time a new value is typed and committed."},{"name":"calciteInputTextInput","type":"void","description":"Fires each time a new value is typed."}],"js":{"properties":[{"name":"alignment","description":"Specifies the text alignment of the component's value.","type":"Alignment"},{"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.","type":"AutoFill"},{"name":"clearable","description":"When `true`, a clear button is displayed when the component has a value.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"name":"icon","description":"Specifies an icon to display.","type":"IconName | boolean"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component's button or hyperlink.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"loading","description":"When `true`, the component is in the loading state and `calcite-progress` is displayed.","type":"boolean"},{"name":"maxLength","description":"When the component resides in a form,\nspecifies the maximum length of text for the component's value.","type":"number"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"minLength","description":"When the component resides in a form,\nspecifies the minimum length of text for the component's value.","type":"number"},{"name":"name","description":"Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.","type":"string"},{"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.","type":"string"},{"name":"placeholder","description":"Specifies placeholder text for the component.","type":"string"},{"name":"prefixText","description":"Adds text to the start of the component.","type":"string"},{"name":"readOnly","description":"When `true`, the component's value can be read, but cannot be modified.","type":"boolean"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"suffixText","description":"Adds text to the end of the component.","type":"string"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"The component's value.","type":"string"}],"events":[{"name":"calciteInputTextChange","type":"void","description":"Fires each time a new value is typed and committed."},{"name":"calciteInputTextInput","type":"void","description":"Fires each time a new value is typed."}]}},{"name":"calcite-input-time-picker","description":"### Events\n- **calciteInputTimePickerBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteInputTimePickerBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteInputTimePickerChange** - Fires when the component's `value` is modified by the user.\n- **calciteInputTimePickerClose** - Fires when the component is closed and animation is complete.\n- **calciteInputTimePickerOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<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.\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 or focused. \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`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"focus-trap-disabled","description":"When `true`, prevents focus trapping.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"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.","default":"\"user\"","value":{"type":["\"24\"","\"user\"","\"12\""]}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"max","description":"When the component resides in a form,\nspecifies the maximum value.","value":{"type":"string"}},{"name":"min","description":"When the component resides in a form,\nspecifies the minimum value.","value":{"type":"string"}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"open","description":"When `true`, displays the `calcite-time-picker` component.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"placement","description":"Determines where the popover will be positioned relative to the input.","default":"\"auto\"","value":{"type":["\"auto\"","\"top\"","\"bottom\"","\"left\"","\"right\"","\"auto-start\"","\"auto-end\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\"","\"right-start\"","\"right-end\"","\"left-start\"","\"left-end\"","\"leading-start\"","\"leading\"","\"leading-end\"","\"trailing-end\"","\"trailing\"","\"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.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"step","description":"Specifies the granularity the component's `value` must adhere to (in seconds).","default":"60","value":{"type":"number"}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"The time value in ISO (24-hour) format.","value":{"type":"string"}}],"slots":[{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteInputTimePickerBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteInputTimePickerBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteInputTimePickerChange","type":"void","description":"Fires when the component's `value` is modified by the user."},{"name":"calciteInputTimePickerClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteInputTimePickerOpen","type":"void","description":"Fires when the component is open and animation is complete."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"focusTrapDisabled","description":"When `true`, prevents focus trapping.","type":"boolean"},{"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.","type":"string"},{"name":"hourFormat","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.","type":"HourFormat"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"max","description":"When the component resides in a form,\nspecifies the maximum value.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"min","description":"When the component resides in a form,\nspecifies the minimum value.","type":"string"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem"},{"name":"open","description":"When `true`, displays the `calcite-time-picker` component.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"placement","description":"Determines where the popover will be positioned relative to the input.","type":"LogicalPlacement"},{"name":"readOnly","description":"When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.","type":"boolean"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"step","description":"Specifies the granularity the component's `value` must adhere to (in seconds).","type":"number"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"The time value in ISO (24-hour) format.","type":"string"}],"events":[{"name":"calciteInputTimePickerBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteInputTimePickerBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteInputTimePickerChange","type":"void","description":"Fires when the component's `value` is modified by the user."},{"name":"calciteInputTimePickerClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteInputTimePickerOpen","type":"void","description":"Fires when the component is open and animation is complete."}]}},{"name":"calcite-input-time-zone","description":"### Events\n- **calciteInputTimeZoneBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteInputTimeZoneBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteInputTimeZoneChange** - Fires when the component's `value` changes.\n- **calciteInputTimeZoneClose** - Fires after the component is closed and animation is complete.\n- **calciteInputTimeZoneOpen** - Fires after the component is opened and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<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`.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"max-items","description":"Specifies the component's maximum number of options to display before displaying a scrollbar.","default":"0","value":{"type":"number"}},{"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.","default":"\"offset\"","value":{"type":["\"name\"","\"offset\"","\"region\""]}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"name":"offset-style","description":"Specifies how the offset will be displayed, where\n\n`\"user\"` uses `UTC` or `GMT` depending on the user's locale,\n`\"gmt\"` always uses `GMT`, and\n`\"utc\"` always uses `UTC`.\n\nThis only applies to the `offset` mode.","default":"\"user\"","value":{"type":["\"user\"","\"utc\"","\"gmt\""]}},{"name":"open","description":"When `true`, displays and positions the component.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"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.","default":"false","value":{"type":"boolean"}},{"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\"`).","value":{"type":["string","object"]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"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.","default":"false","value":{"type":"boolean"}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"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.","value":{"type":"string"}}],"slots":[{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteInputTimeZoneBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteInputTimeZoneBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteInputTimeZoneChange","type":"void","description":"Fires when the component's `value` changes."},{"name":"calciteInputTimeZoneClose","type":"void","description":"Fires after the component is closed and animation is complete."},{"name":"calciteInputTimeZoneOpen","type":"void","description":"Fires after the component is opened and animation is complete."}],"js":{"properties":[{"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`.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"maxItems","description":"Specifies the component's maximum number of options to display before displaying a scrollbar.","type":"number"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"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.","type":"TimeZoneMode"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"name":"offsetStyle","description":"Specifies how the offset will be displayed, where\n\n`\"user\"` uses `UTC` or `GMT` depending on the user's locale,\n`\"gmt\"` always uses `GMT`, and\n`\"utc\"` always uses `UTC`.\n\nThis only applies to the `offset` mode.","type":"OffsetStyle"},{"name":"open","description":"When `true`, displays and positions the component.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"readOnly","description":"When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.","type":"boolean"},{"name":"referenceDate","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\"`).","type":"Date | string"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"topLayerDisabled","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.","type":"boolean"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"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.","type":"string"}],"events":[{"name":"calciteInputTimeZoneBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteInputTimeZoneBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteInputTimeZoneChange","type":"void","description":"Fires when the component's `value` changes."},{"name":"calciteInputTimeZoneClose","type":"void","description":"Fires after the component is closed and animation is complete."},{"name":"calciteInputTimeZoneOpen","type":"void","description":"Fires after the component is opened and animation is complete."}]}},{"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 text alignment of the component.","default":"\"start\"","value":{"type":["\"start\"","\"center\"","\"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.","value":{"type":"string"}},{"name":"layout","description":"Defines the layout of the label in relation to the component. Use `\"inline\"` positions to wrap the label and component on the same line.  [Deprecated] The `\"default\"` value is deprecated, use `\"block\"` instead.","default":"\"default\"","value":{"type":["\"block\"","\"inline\"","\"inline-space-between\"","\"default\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"slots":[{"name":"","description":"A slot for adding text and a component that can be labeled."}],"events":[],"js":{"properties":[{"name":"alignment","description":"Specifies the text alignment of the component.","type":"Alignment"},{"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.","type":"string | undefined"},{"name":"layout","description":"Defines the layout of the label in relation to the component. Use `\"inline\"` positions to wrap the label and component on the same line.  [Deprecated] The `\"default\"` value is deprecated, use `\"block\"` instead.","type":"\"block\" | \"inline\" | \"inline-space-between\" | \"default\""},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"}],"events":[]}},{"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`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":["string","boolean"]}},{"name":"href","description":"Specifies the URL of the linked resource, which can be set as an absolute or relative path.","value":{"type":"string"}},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}},{"name":"rel","description":"Specifies the relationship to the linked document defined in `href`.","value":{"type":"string"}},{"name":"target","description":"Specifies the frame or window to open the linked document.","value":{"type":"string"}}],"slots":[{"name":"","description":"A slot for adding text."}],"events":[],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string | boolean"},{"name":"href","description":"Specifies the URL of the linked resource, which can be set as an absolute or relative path.","type":"string"},{"name":"iconEnd","description":"Specifies an icon to display at the end of the component.","type":"IconName"},{"name":"iconFlipRtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName"},{"name":"rel","description":"Specifies the relationship to the linked document defined in `href`.","type":"string"},{"name":"target","description":"Specifies the frame or window to open the linked document.","type":"string"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"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.","default":"\"flat\"","value":{"type":["\"nested\"","\"flat\""]}},{"name":"drag-enabled","description":"When `true`, `calcite-list-item`s are sortable via a draggable button.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"filter-label","description":"Specifies an accessible name for the filter input field.","value":{"type":"string"}},{"name":"filter-placeholder","description":"Specifies placeholder text for the component's filter input field.","value":{"type":"string"}},{"name":"filter-text","description":"Text for the component's filter input field.","default":"\"\"","value":{"type":"string"}},{"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.","value":{"type":"string"}},{"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\"`.","default":"\"interactive\"","value":{"type":["\"interactive\"","\"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.","value":{"type":"string"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"\"icon\"","value":{"type":["\"icon\"","\"border\"","\"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.","default":"\"none\"","value":{"type":["\"none\"","\"single\"","\"single-persist\"","\"multiple\""]}},{"name":"sort-disabled","description":"When `true`, and a `group` is defined, `calcite-list-item`s are no longer sortable.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding `calcite-list-item` and `calcite-list-item-group` elements."},{"name":"filter-actions-start","description":"A slot for adding actionable `calcite-action` elements before the filter component."},{"name":"filter-actions-end","description":"A slot for adding actionable `calcite-action` elements after the filter component."},{"name":"filter-no-results","description":"When `filterEnabled` is `true`, a slot for adding content to display when no results are found."}],"events":[{"name":"calciteListChange","type":"void","description":"Fires when the component's selected items have changed."},{"name":"calciteListDragEnd","type":"ListDragDetail","description":"Fires when the component's dragging has ended."},{"name":"calciteListDragStart","type":"ListDragDetail","description":"Fires when the component's dragging has started."},{"name":"calciteListFilter","type":"void","description":"Fires when the component's filter has changed."},{"name":"calciteListMoveHalt","type":"ListDragDetail","description":"Fires when a user attempts to move an element using the sort menu and 'canPut' or 'canPull' returns falsy."},{"name":"calciteListOrderChange","type":"ListDragDetail","description":"Fires when the component's item order changes."}],"js":{"properties":[{"name":"canPull","description":"When provided, the method will be called to determine whether the element can move from the list.","type":"(detail: ListDragDetail) => boolean | \"clone\""},{"name":"canPut","description":"When provided, the method will be called to determine whether the element can be added from another list.","type":"(detail: ListDragDetail) => boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"displayMode","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.","type":"ListDisplayMode"},{"name":"dragEnabled","description":"When `true`, `calcite-list-item`s are sortable via a draggable button.","type":"boolean"},{"name":"filteredData","description":"The currently filtered `calcite-list-item` data.","type":"ItemData[]"},{"name":"filteredItems","description":"The currently filtered `calcite-list-item`s.","type":"ListItem[]"},{"name":"filterEnabled","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.","type":"boolean"},{"name":"filterLabel","description":"Specifies an accessible name for the filter input field.","type":"string"},{"name":"filterPlaceholder","description":"Specifies placeholder text for the component's filter input field.","type":"string"},{"name":"filterPredicate","description":"Specifies a function to handle filtering.","type":"((item: ListItem) => boolean) | undefined"},{"name":"filterProps","description":"Specifies the properties to match against when filtering. If not set, all properties will be matched (`description`, `label`, `metadata`, and the `calcite-list-item-group`'s `heading`).","type":"string[]"},{"name":"filterText","description":"Text for the component's filter input field.","type":"string"},{"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.","type":"string | undefined"},{"name":"interactionMode","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\"`.","type":"InteractionMode"},{"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.","type":"string"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"selectedItems","description":"The currently selected items.","type":"ListItem[]"},{"name":"selectionAppearance","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.","type":"Extract<\"icon\" | \"border\" | \"highlight\", SelectionAppearance>"},{"name":"selectionMode","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.","type":"Extract<\"none\" | \"multiple\" | \"single\" | \"single-persist\", SelectionMode>"},{"name":"sortDisabled","description":"When `true`, and a `group` is defined, `calcite-list-item`s are no longer sortable.","type":"boolean"}],"events":[{"name":"calciteListChange","type":"void","description":"Fires when the component's selected items have changed."},{"name":"calciteListDragEnd","type":"ListDragDetail","description":"Fires when the component's dragging has ended."},{"name":"calciteListDragStart","type":"ListDragDetail","description":"Fires when the component's dragging has started."},{"name":"calciteListFilter","type":"void","description":"Fires when the component's filter has changed."},{"name":"calciteListMoveHalt","type":"ListDragDetail","description":"Fires when a user attempts to move an element using the sort menu and 'canPut' or 'canPull' returns falsy."},{"name":"calciteListOrderChange","type":"ListDragDetail","description":"Fires when the component's item order changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"closed","description":"When `true`, hides the component.","default":"false","value":{"type":"boolean"}},{"name":"description","description":"Specifies a description for the component. Displays below the `label`.","value":{"type":"string"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"drag-disabled","description":"When `true`, the item is not draggable.","default":"false","value":{"type":"boolean"}},{"name":"expanded","description":"When `true`, expands the component and its contents.","default":"false","value":{"type":"boolean"}},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component, displays above the `description`.","value":{"type":"string"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"selected","description":"When `true` and the parent `calcite-list`'s `selectionMode` is `\"single\"`, `\"single-persist\"', or `\"multiple\"`, the component is selected.","default":"false","value":{"type":"boolean"}},{"name":"sort-handle-open","description":"When `true`, displays and positions the sort handle.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"unavailable","description":"When `true`, the component's content displays as inactive.","default":"false","value":{"type":"boolean"}},{"name":"value","description":"The component's value.","value":{"type":"any"}}],"slots":[{"name":"","description":"A slot for adding `calcite-list`, `calcite-list-item` and `calcite-list-item-group` elements."},{"name":"actions-start","description":"A slot for adding actionable `calcite-action` elements before the content of the component."},{"name":"content-start","description":"A slot for adding non-actionable elements before the component's `label` and `description`."},{"name":"content","description":"A slot for adding non-actionable, centered content in place of the component's `label` and `description`."},{"name":"content-end","description":"A slot for adding non-actionable elements after the component's `label` and `description`."},{"name":"actions-end","description":"A slot for adding actionable `calcite-action` elements after the component's content."},{"name":"content-bottom","description":"A slot for adding content below the component's `label` and `description`."}],"events":[{"name":"calciteListItemClose","type":"void","description":"Fires when the close button is clicked."},{"name":"calciteListItemCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteListItemExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteListItemSelect","type":"void","description":"Fires when the component is selected."},{"name":"calciteListItemSortHandleBeforeClose","type":"void","description":"Fires when the sort handle is requested to be closed and before the closing transition begins."},{"name":"calciteListItemSortHandleBeforeOpen","type":"void","description":"Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteListItemSortHandleClose","type":"void","description":"Fires when the sort handle is closed and animation is complete."},{"name":"calciteListItemSortHandleOpen","type":"void","description":"Fires when the sort handle is open and animation is complete."},{"name":"calciteListItemToggle","type":"void","description":"Fires when the open button is clicked."}],"js":{"properties":[{"name":"closable","description":"When `true`, displays a close button in the component.","type":"boolean"},{"name":"closed","description":"When `true`, hides the component.","type":"boolean"},{"name":"description","description":"Specifies a description for the component. Displays below the `label`.","type":"string"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"dragDisabled","description":"When `true`, the item is not draggable.","type":"boolean"},{"name":"expanded","description":"When `true`, expands the component and its contents.","type":"boolean"},{"name":"iconEnd","description":"Specifies an icon to display at the end of the component.","type":"IconName"},{"name":"iconFlipRtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName"},{"name":"label","description":"Specifies an accessible label for the component, displays above the `description`.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"metadata","description":"Provides additional metadata to the component. Primary use is for a filter on the parent `calcite-list`.","type":"Record<string, unknown>"},{"name":"open","description":"When `true`, the item is open to show child components.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"selected","description":"When `true` and the parent `calcite-list`'s `selectionMode` is `\"single\"`, `\"single-persist\"', or `\"multiple\"`, the component is selected.","type":"boolean"},{"name":"sortHandleOpen","description":"When `true`, displays and positions the sort handle.","type":"boolean"},{"name":"topLayerDisabled","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.","type":"boolean"},{"name":"unavailable","description":"When `true`, the component's content displays as inactive.","type":"boolean"},{"name":"value","description":"The component's value.","type":"any"}],"events":[{"name":"calciteListItemClose","type":"void","description":"Fires when the close button is clicked."},{"name":"calciteListItemCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteListItemExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteListItemSelect","type":"void","description":"Fires when the component is selected."},{"name":"calciteListItemSortHandleBeforeClose","type":"void","description":"Fires when the sort handle is requested to be closed and before the closing transition begins."},{"name":"calciteListItemSortHandleBeforeOpen","type":"void","description":"Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteListItemSortHandleClose","type":"void","description":"Fires when the sort handle is closed and animation is complete."},{"name":"calciteListItemSortHandleOpen","type":"void","description":"Fires when the sort handle is open and animation is complete."},{"name":"calciteListItemToggle","type":"void","description":"Fires when the open button is clicked."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"heading","description":"Specifies the heading text for the nested `calcite-list-item` rows.","value":{"type":"string"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"slots":[{"name":"","description":"A slot for adding `calcite-list-item` and `calcite-list-item-group` elements."}],"events":[],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"heading","description":"Specifies the heading text for the nested `calcite-list-item` rows.","type":"string"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"text","description":"When not `inline`, displays text under the component's indicator.","default":"\"\"","value":{"type":"string"}},{"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.","default":"\"indeterminate\"","value":{"type":["\"indeterminate\"","\"determinate\"","\"determinate-value\""]}},{"name":"value","description":"The component's value. Valid only for `\"determinate\"` indicators. Percent complete of 100.","default":"0","value":{"type":"number"}}],"events":[],"js":{"properties":[{"name":"inline","description":"When `true`, the component displays smaller.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"text","description":"When not `inline`, displays text under the component's indicator.","type":"string"},{"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.","type":"\"indeterminate\" | \"determinate\" | \"determinate-value\""},{"name":"value","description":"The component's value. Valid only for `\"determinate\"` indicators. Percent complete of 100.","type":"number"}],"events":[]}},{"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.","value":{"type":"string"}},{"name":"layout","description":"Specifies the layout of the component.","default":"\"horizontal\"","value":{"type":["\"horizontal\"","\"vertical\""]}}],"events":[],"js":{"properties":[{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"layout","description":"Specifies the layout of the component.","type":"Layout"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"breadcrumb","description":"When `true`, the component displays a breadcrumb trail for use as a navigational aid.","default":"false","value":{"type":"boolean"}},{"name":"href","description":"Specifies the URL destination of the component, which can be set as an absolute or relative path.","value":{"type":"string"}},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"open","description":"When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu.","default":"false","value":{"type":"boolean"}},{"name":"rel","description":"Defines the relationship between the `href` value and the current document.","value":{"type":"string"}},{"name":"target","description":"Specifies where to open the linked document defined in the `href` property.","value":{"type":"string"}},{"name":"text","description":"Specifies the text to display.","value":{"type":"string"}}],"slots":[{"name":"submenu-item","description":"A slot for adding `calcite-menu-item`s in a submenu."}],"events":[{"name":"calciteMenuItemSelect","type":"void","description":"Emits when the component is selected."}],"js":{"properties":[{"name":"active","description":"When `true`, the component is highlighted.","type":"boolean"},{"name":"breadcrumb","description":"When `true`, the component displays a breadcrumb trail for use as a navigational aid.","type":"boolean"},{"name":"href","description":"Specifies the URL destination of the component, which can be set as an absolute or relative path.","type":"string"},{"name":"iconEnd","description":"Specifies an icon to display at the end of the component.","type":"IconName"},{"name":"iconFlipRtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"open","description":"When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu.","type":"boolean"},{"name":"rel","description":"Defines the relationship between the `href` value and the current document.","type":"string"},{"name":"target","description":"Specifies where to open the linked document defined in the `href` property.","type":"string"},{"name":"text","description":"Specifies the text to display.","type":"string"}],"events":[{"name":"calciteMenuItemSelect","type":"void","description":"Emits when the component is selected."}]}},{"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.","default":"\"outline-fill\"","value":{"type":["\"solid\"","\"outline\"","\"outline-fill\""]}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","default":"\"range\"","value":{"type":["\"single\"","\"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.","value":{"type":"string"}},{"name":"group-separator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","default":"false","value":{"type":"boolean"}},{"name":"high","description":"Specifies a high value.  When `fillType` is `\"range\"`, displays a different color when above the specified threshold.","value":{"type":"number"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"low","description":"Specifies a low value.  When `fillType` is `\"range\"`, displays a different color when above the specified threshold.","value":{"type":"number"}},{"name":"max","description":"Specifies the component's highest allowed value.","default":"100","value":{"type":"number"}},{"name":"min","description":"Specifies the component's lowest allowed value.","default":"0","value":{"type":"number"}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"range-labels","description":"When `true`, displays the values of `high`, `low`, `min`, and `max`.","default":"false","value":{"type":"boolean"}},{"name":"range-label-type","description":"When `rangeLabels` is `true`, specifies the format of displayed labels.","default":"\"percent\"","value":{"type":["\"percent\"","\"units\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"unit-label","description":"When `rangeLabelType` is `\"units\"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or  `min` values.","default":"\"\"","value":{"type":"string"}},{"name":"value","description":"Specifies the component's value.","value":{"type":"number"}},{"name":"value-label","description":"When `true`, displays the `value`.","default":"false","value":{"type":"boolean"}},{"name":"value-label-type","description":"When `valueLabel` is `true`, specifies the format of displayed label.","default":"\"percent\"","value":{"type":["\"percent\"","\"units\""]}}],"events":[],"js":{"properties":[{"name":"appearance","description":"Specifies the appearance of the component.","type":"Extract<\"outline\" | \"outline-fill\" | \"solid\", Appearance>"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"fillType","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.","type":"MeterFillType"},{"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.","type":"string"},{"name":"groupSeparator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","type":"boolean"},{"name":"high","description":"Specifies a high value.  When `fillType` is `\"range\"`, displays a different color when above the specified threshold.","type":"number"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"low","description":"Specifies a low value.  When `fillType` is `\"range\"`, displays a different color when above the specified threshold.","type":"number"},{"name":"max","description":"Specifies the component's highest allowed value.","type":"number"},{"name":"min","description":"Specifies the component's lowest allowed value.","type":"number"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem"},{"name":"rangeLabels","description":"When `true`, displays the values of `high`, `low`, `min`, and `max`.","type":"boolean"},{"name":"rangeLabelType","description":"When `rangeLabels` is `true`, specifies the format of displayed labels.","type":"MeterLabelType"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"unitLabel","description":"When `rangeLabelType` is `\"units\"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or  `min` values.","type":"string"},{"name":"value","description":"Specifies the component's value.","type":"number"},{"name":"valueLabel","description":"When `true`, displays the `value`.","type":"boolean"},{"name":"valueLabelType","description":"When `valueLabel` is `true`, specifies the format of displayed label.","type":"MeterLabelType"}],"events":[]}},{"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`.","value":{"type":"string"}},{"name":"navigation-action","description":"When `true`, displays a `calcite-action` and emits a `calciteNavActionSelect` event on selection change.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"logo","description":"A slot for adding a `calcite-logo` component to the primary navigation level."},{"name":"user","description":"A slot for adding a `calcite-user` component to the primary navigation level."},{"name":"progress","description":"A slot for adding a `calcite-progress` component to the primary navigation level."},{"name":"navigation-action","description":"A slot for adding a `calcite-action` component to the primary navigation level."},{"name":"content-start","description":"A slot for adding a `calcite-menu`, `calcite-action`, or other interactive elements in the start position of any navigation level."},{"name":"content-center","description":"A slot for adding a `calcite-menu`, `calcite-action`, or other interactive elements in the center position of the primary navigation level."},{"name":"content-end","description":"A slot for adding a `calcite-menu`, `calcite-action`, or other interactive elements in the end position of any navigation level."},{"name":"navigation-secondary","description":"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."},{"name":"navigation-tertiary","description":"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."}],"events":[{"name":"calciteNavigationActionSelect","type":"void","description":"When `navigationAction` is `true`, emits when the displayed action selection changes."}],"js":{"properties":[{"name":"label","description":"When `navigationAction` is `true`, specifies an accessible label for the `calcite-action`.","type":"string"},{"name":"navigationAction","description":"When `true`, displays a `calcite-action` and emits a `calciteNavActionSelect` event on selection change.","type":"boolean"}],"events":[{"name":"calciteNavigationActionSelect","type":"void","description":"When `navigationAction` is `true`, emits when the displayed action selection changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"description","description":"Specifies a description for the component. Displays below the `heading`.","value":{"type":"string"}},{"name":"heading","description":"Specifies the component's heading text.","value":{"type":"string"}},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","value":{"type":["1","2","3","4","5","6"]}},{"name":"href","description":"Specifies the URL destination of the component, which can be set as an absolute or relative path.","value":{"type":"string"}},{"name":"icon","description":"Specifies an icon to display.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"rel","description":"Defines the relationship between the `href` value and the current document.","value":{"type":"string"}},{"name":"target","description":"Specifies where to open the linked document defined in the `href` property.","value":{"type":"string"}},{"name":"thumbnail","description":"Specifies the `src` to an image.","value":{"type":"string"}}],"events":[],"js":{"properties":[{"name":"active","description":"When `true`, the component is highlighted.","type":"boolean"},{"name":"description","description":"Specifies a description for the component. Displays below the `heading`.","type":"string"},{"name":"heading","description":"Specifies the component's heading text.","type":"string"},{"name":"headingLevel","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","type":"HeadingLevel"},{"name":"href","description":"Specifies the URL destination of the component, which can be set as an absolute or relative path.","type":"string"},{"name":"icon","description":"Specifies an icon to display.","type":"IconName"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"rel","description":"Defines the relationship between the `href` value and the current document.","type":"string"},{"name":"target","description":"Specifies where to open the linked document defined in the `href` property.","type":"string"},{"name":"thumbnail","description":"Specifies the `src` to an image.","type":"string"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"full-name","description":"Specifies the full name of the user.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"text-disabled","description":"When `true`, hides the `fullName` and `username` contents.","default":"false","value":{"type":"boolean"}},{"name":"thumbnail","description":"Specifies the `src` to an image (remember to add a token if the user is private).","value":{"type":"string"}},{"name":"user-id","description":"Specifies the unique id of the user.","value":{"type":"string"}},{"name":"username","description":"Specifies the username of the user.","value":{"type":"string"}}],"events":[],"js":{"properties":[{"name":"active","description":"When `true`, the component is highlighted.","type":"boolean"},{"name":"fullName","description":"Specifies the full name of the user.","type":"string"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"textDisabled","description":"When `true`, hides the `fullName` and `username` contents.","type":"boolean"},{"name":"thumbnail","description":"Specifies the `src` to an image (remember to add a token if the user is private).","type":"string"},{"name":"userId","description":"Specifies the unique id of the user.","type":"string"},{"name":"username","description":"Specifies the username of the user.","type":"string"}],"events":[]}},{"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.","default":"\"outline-fill\"","value":{"type":["\"outline-fill\"","\"transparent\""]}},{"name":"closable","description":"When `true`, displays a close button in the component.","default":"false","value":{"type":"boolean"}},{"name":"icon","description":"When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.","value":{"type":["string","boolean"]}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"kind","description":"Specifies the kind of the component, which will apply to the top border and icon.","default":"\"brand\"","value":{"type":["\"brand\"","\"danger\"","\"info\"","\"neutral\"","\"warning\"","\"success\""]}},{"name":"open","description":"When `true`, the component is visible.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"width","description":"Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.","default":"\"auto\"","value":{"type":["\"auto\"","\"half\"","\"full\""]}}],"slots":[{"name":"title","description":"A slot for adding a title."},{"name":"message","description":"A slot for adding a message."},{"name":"link","description":"A slot for adding a `calcite-action` to take, such as: \"undo\", \"try again\", \"link to page\", etc."},{"name":"actions-end","description":"A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or less `calcite-action`s."}],"events":[{"name":"calciteNoticeBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteNoticeBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteNoticeClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteNoticeOpen","type":"void","description":"Fires when the component is open and animation is complete."}],"js":{"properties":[{"name":"appearance","description":"Specifies the appearance of the component.","type":"Extract<\"transparent\" | \"outline-fill\", Appearance>"},{"name":"closable","description":"When `true`, displays a close button in the component.","type":"boolean"},{"name":"icon","description":"When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.","type":"IconName | boolean"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"kind","description":"Specifies the kind of the component, which will apply to the top border and icon.","type":"Extract<\"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\" | \"neutral\", Kind>"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"open","description":"When `true`, the component is visible.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"width","description":"Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.","type":"Extract<Width, \"auto\" | \"half\" | \"full\">"}],"events":[{"name":"calciteNoticeBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteNoticeBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteNoticeClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteNoticeOpen","type":"void","description":"Fires when the component is open and animation is complete."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}},{"name":"value","description":"The component's value.","value":{"type":"any"}}],"events":[],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"},{"name":"value","description":"The component's value.","type":"any"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}}],"slots":[{"name":"","description":"A slot for adding `calcite-option`s."}],"events":[],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"page-size","description":"Specifies the number of items per page.","default":"20","value":{"type":"number"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"start-item","description":"Specifies the starting item number.","default":"1","value":{"type":"number"}},{"name":"total-items","description":"Specifies the total number of items.","default":"0","value":{"type":"number"}}],"events":[{"name":"calcitePaginationChange","type":"void","description":"Emits when the selected page changes."}],"js":{"properties":[{"name":"groupSeparator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","type":"boolean"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem"},{"name":"pageSize","description":"Specifies the number of items per page.","type":"number"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"startItem","description":"Specifies the starting item number.","type":"number"},{"name":"totalItems","description":"Specifies the total number of items.","type":"number"}],"events":[{"name":"calcitePaginationChange","type":"void","description":"Emits when the selected page changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"closed","description":"When `true`, the component will be hidden.","default":"false","value":{"type":"boolean"}},{"name":"collapsed","description":"When `true`, hides the component's content area.","default":"false","value":{"type":"boolean"}},{"name":"collapse-direction","description":"When `collapsible` is `true`, specifies the direction of the collapse icon.","default":"\"down\"","value":{"type":["\"down\"","\"up\""]}},{"name":"collapsible","description":"When `true`, the component is collapsible.","default":"false","value":{"type":"boolean"}},{"name":"description","description":"Specifies a description for the component.","value":{"type":"string"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"heading","description":"Specifies the component's heading text.","value":{"type":"string"}},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","value":{"type":["1","2","3","4","5","6"]}},{"name":"icon","description":"Specifies an icon to display.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"menu-open","description":"When `true`, the action menu items in the `header-menu-actions` slot are open.","default":"false","value":{"type":"boolean"}},{"name":"menu-placement","description":"Determines where the action menu will be positioned.","default":"\"bottom-end\"","value":{"type":["\"auto\"","\"top\"","\"bottom\"","\"left\"","\"right\"","\"auto-start\"","\"auto-end\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\"","\"right-start\"","\"right-end\"","\"left-start\"","\"left-end\"","\"leading-start\"","\"leading\"","\"leading-end\"","\"trailing-end\"","\"trailing\"","\"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding custom content."},{"name":"action-bar","description":"A slot for adding a `calcite-action-bar` to the component."},{"name":"alerts","description":"A slot for adding `calcite-alert`s to the component."},{"name":"content-bottom","description":"A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)."},{"name":"content-top","description":"A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated)."},{"name":"header-actions-start","description":"A slot for adding actions or content to the start side of the header."},{"name":"header-actions-end","description":"A slot for adding actions or content to the end side of the header."},{"name":"header-content","description":"A slot for adding custom content to the header."},{"name":"header-menu-actions","description":"A slot for adding an overflow menu with actions inside a `calcite-dropdown`."},{"name":"fab","description":"A slot for adding a `calcite-fab` (floating action button) to perform an action."},{"name":"footer","description":"A slot for adding custom content to the component's footer. Should not be used with the `\"footer-start\"` or `\"footer-end\"` slots."},{"name":"footer-end","description":"A slot for adding custom content to a trailing footer. Should not be used with the `\"footer\"` slot."},{"name":"footer-start","description":"A slot for adding custom content to a leading footer. Should not be used with the `\"footer\"` slot."}],"events":[{"name":"calcitePanelClose","type":"void","description":"Fires when the close button is clicked."},{"name":"calcitePanelCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calcitePanelExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calcitePanelScroll","type":"void","description":"Fires when the content is scrolled."},{"name":"calcitePanelToggle","type":"void","description":"Fires when the collapse button is clicked."}],"js":{"properties":[{"name":"beforeClose","description":"Passes a function to run before the component closes.","type":"() => Promise<void>"},{"name":"closable","description":"When `true`, displays a close button in the component.","type":"boolean"},{"name":"closed","description":"When `true`, the component will be hidden.","type":"boolean"},{"name":"collapsed","description":"When `true`, hides the component's content area.","type":"boolean"},{"name":"collapseDirection","description":"When `collapsible` is `true`, specifies the direction of the collapse icon.","type":"CollapseDirection"},{"name":"collapsible","description":"When `true`, the component is collapsible.","type":"boolean"},{"name":"description","description":"Specifies a description for the component.","type":"string"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"heading","description":"Specifies the component's heading text.","type":"string"},{"name":"headingLevel","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","type":"HeadingLevel"},{"name":"icon","description":"Specifies an icon to display.","type":"IconName"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"menuFlipPlacements","description":"Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available.","type":"FlipPlacement[]"},{"name":"menuOpen","description":"When `true`, the action menu items in the `header-menu-actions` slot are open.","type":"boolean"},{"name":"menuPlacement","description":"Determines where the action menu will be positioned.","type":"LogicalPlacement"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"topLayerDisabled","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.","type":"boolean"}],"events":[{"name":"calcitePanelClose","type":"void","description":"Fires when the close button is clicked."},{"name":"calcitePanelCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calcitePanelExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calcitePanelScroll","type":"void","description":"Fires when the content is scrolled."},{"name":"calcitePanelToggle","type":"void","description":"Fires when the collapse button is clicked."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"closable","description":"When `true`, displays a close button in the component.","default":"false","value":{"type":"boolean"}},{"name":"flip-disabled","description":"When `true`, prevents flipping the component's placement when overlapping its `referenceElement`.","default":"false","value":{"type":"boolean"}},{"name":"focus-trap-disabled","description":"When `true`, prevents focus trapping.","default":"false","value":{"type":"boolean"}},{"name":"heading","description":"Specifies the component's heading text.","value":{"type":"string"}},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","value":{"type":["1","2","3","4","5","6"]}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"offset-distance","description":"Offsets the position of the popover away from the `referenceElement`.","value":{"type":"number"}},{"name":"offset-skidding","description":"Offsets the position of the component along the `referenceElement`.","default":"0","value":{"type":"number"}},{"name":"open","description":"When `true`, displays and positions the component.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"placement","description":"Determines where the component will be positioned relative to the `referenceElement`.","default":"\"auto\"","value":{"type":["\"auto\"","\"top\"","\"bottom\"","\"left\"","\"right\"","\"auto-start\"","\"auto-end\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\"","\"right-start\"","\"right-end\"","\"left-start\"","\"left-end\"","\"leading-start\"","\"leading\"","\"leading-end\"","\"trailing-end\"","\"trailing\"","\"trailing-start\""]}},{"name":"pointer-disabled","description":"When `true`, removes the caret pointer.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":["string","object"]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding custom content."}],"events":[{"name":"calcitePopoverBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calcitePopoverBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calcitePopoverClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calcitePopoverOpen","type":"void","description":"Fires when the component is open and animation is complete."}],"js":{"properties":[{"name":"autoClose","description":"When `true`, clicking outside of the component automatically closes open `calcite-popover`s.","type":"boolean"},{"name":"closable","description":"When `true`, displays a close button in the component.","type":"boolean"},{"name":"flipDisabled","description":"When `true`, prevents flipping the component's placement when overlapping its `referenceElement`.","type":"boolean"},{"name":"flipPlacements","description":"Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available.","type":"FlipPlacement[]"},{"name":"focusTrapDisabled","description":"When `true`, prevents focus trapping.","type":"boolean"},{"name":"focusTrapOptions","description":"Specifies custom focus trap configuration on the component, where\n\n`\"allowOutsideClick`\" allows outside clicks,\n`\"initialFocus\"` enables initial focus,\n`\"returnFocusOnDeactivate\"` returns focus when not active,\n`\"extraContainers\"` specifies additional focusable elements external to the trap, such as 3rd-party components appending elements to the document body, and\n`\"setReturnFocus\"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).","type":"Partial<FocusTrapOptions>"},{"name":"heading","description":"Specifies the component's heading text.","type":"string"},{"name":"headingLevel","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","type":"HeadingLevel"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"offsetDistance","description":"Offsets the position of the popover away from the `referenceElement`.","type":"number"},{"name":"offsetSkidding","description":"Offsets the position of the component along the `referenceElement`.","type":"number"},{"name":"open","description":"When `true`, displays and positions the component.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"placement","description":"Determines where the component will be positioned relative to the `referenceElement`.","type":"LogicalPlacement"},{"name":"pointerDisabled","description":"When `true`, removes the caret pointer.","type":"boolean"},{"name":"referenceElement","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.","type":"ReferenceElement | string"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"topLayerDisabled","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.","type":"boolean"},{"name":"triggerDisabled","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.","type":"boolean"}],"events":[{"name":"calcitePopoverBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calcitePopoverBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calcitePopoverClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calcitePopoverOpen","type":"void","description":"Fires when the component is open and animation is complete."}]}},{"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.","value":{"type":"string"}},{"name":"reversed","description":"When `true` and type is `\"indeterminate\"`, reverses the animation direction.","default":"false","value":{"type":"boolean"}},{"name":"text","description":"Text that displays under the component's indicator.","value":{"type":"string"}},{"name":"type","description":"Specifies the component type.\n\nUse `\"indeterminate\"` if finding actual progress value is impossible.","default":"\"determinate\"","value":{"type":["\"indeterminate\"","\"determinate\""]}},{"name":"value","description":"When `type` is `\"determinate\"`, specifies the component's value with a range of 0 to 100.","default":"0","value":{"type":"number"}}],"events":[],"js":{"properties":[{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"reversed","description":"When `true` and type is `\"indeterminate\"`, reverses the animation direction.","type":"boolean"},{"name":"text","description":"Text that displays under the component's indicator.","type":"string"},{"name":"type","description":"Specifies the component type.\n\nUse `\"indeterminate\"` if finding actual progress value is impossible.","type":"\"indeterminate\" | \"determinate\""},{"name":"value","description":"When `type` is `\"determinate\"`, specifies the component's value with a range of 0 to 100.","type":"number"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component inherited from the `calcite-radio-button-group`.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"value","description":"The component's value.","value":{"type":"any"}}],"events":[{"name":"calciteRadioButtonChange","type":"void","description":"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`."}],"js":{"properties":[{"name":"checked","description":"When `true`, the component is checked.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component inherited from the `calcite-radio-button-group`.","type":"Scale"},{"name":"value","description":"The component's value.","type":"any"}],"events":[{"name":"calciteRadioButtonChange","type":"void","description":"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`."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"layout","description":"Specifies the layout of the component.","default":"\"horizontal\"","value":{"type":["\"horizontal\"","\"vertical\""]}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the validation message.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}}],"slots":[{"name":"","description":"A slot for adding `calcite-radio-button`s."},{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteRadioButtonGroupChange","type":"void","description":"Fires when the component has changed."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"layout","description":"Specifies the layout of the component.","type":"Extract<\"horizontal\" | \"vertical\", Layout>"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"selectedItem","description":"Specifies the component's selected item.","type":"RadioButton"},{"name":"status","description":"Specifies the status of the validation message.","type":"Status"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"}],"events":[{"name":"calciteRadioButtonGroupChange","type":"void","description":"Fires when the component has changed."}]}},{"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.","value":{"type":"number"}},{"name":"count","description":"Specifies the number of previous ratings to display.","value":{"type":"number"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"name":"read-only","description":"When `true`, the component's value can be read, but cannot be modified.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"show-chip","description":"When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`.","default":"false","value":{"type":"boolean"}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"The component's value.","value":{"type":"number"}}],"slots":[{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteRatingChange","type":"void","description":"Fires when the component's value changes."}],"js":{"properties":[{"name":"average","description":"Specifies a cumulative average from previous ratings to display.","type":"number"},{"name":"count","description":"Specifies the number of previous ratings to display.","type":"number"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"name":"readOnly","description":"When `true`, the component's value can be read, but cannot be modified.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"showChip","description":"When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`.","type":"boolean"},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"The component's value.","type":"number"}],"events":[{"name":"calciteRatingChange","type":"void","description":"Fires when the component's value changes."}]}},{"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding custom content, primarily loading information."}],"events":[],"js":{"properties":[{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"}],"events":[]}},{"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.","default":"\"solid\"","value":{"type":["\"solid\"","\"outline\"","\"outline-fill\""]}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"layout","description":"Defines the layout of the component.","default":"\"horizontal\"","value":{"type":["\"horizontal\"","\"vertical\""]}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the validation message.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"The component's `selectedItem` value.","value":{"type":"string"}},{"name":"width","description":"Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.","default":"\"auto\"","value":{"type":["\"auto\"","\"full\""]}}],"slots":[{"name":"","description":"A slot for adding `calcite-segmented-control-item`s."},{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteSegmentedControlChange","type":"void","description":"Fires when the `calcite-segmented-control-item` selection changes."}],"js":{"properties":[{"name":"appearance","description":"Specifies the appearance style of the component.","type":"Extract<\"outline\" | \"outline-fill\" | \"solid\", Appearance>"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"layout","description":"Defines the layout of the component.","type":"Extract<\"horizontal\" | \"vertical\", Layout>"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"selectedItem","description":"The component's selected item `HTMLElement`.","type":"SegmentedControlItem"},{"name":"status","description":"Specifies the status of the validation message.","type":"Status"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"The component's `selectedItem` value.","type":"string"},{"name":"width","description":"Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.","type":"Extract<\"auto\" | \"full\", Width>"}],"events":[{"name":"calciteSegmentedControlChange","type":"void","description":"Fires when the `calcite-segmented-control-item` selection changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}},{"name":"value","description":"The component's value.","value":{"type":"any"}}],"events":[],"js":{"properties":[{"name":"checked","description":"When `true`, the component is checked.","type":"boolean"},{"name":"iconEnd","description":"Specifies an icon to display at the end of the component.","type":"IconName | undefined"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName | undefined"},{"name":"value","description":"The component's value.","type":"any | null"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the input field, which determines the message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"The component's `selectedOption` value.","value":{"type":"string"}},{"name":"width","description":"Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.","default":"\"auto\"","value":{"type":["\"auto\"","\"half\"","\"full\""]}}],"slots":[{"name":"","description":"A slot for adding `calcite-option`s."},{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteSelectChange","type":"void","description":"Fires when the `selectedOption` changes."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"selectedOption","description":"The component's selected option `HTMLElement`.","type":"Option"},{"name":"status","description":"Specifies the status of the input field, which determines the message and icons.","type":"Status"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"The component's `selectedOption` value.","type":"string"},{"name":"width","description":"Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.","type":"Extract<Width, \"auto\" | \"half\" | \"full\">"}],"events":[{"name":"calciteSelectChange","type":"void","description":"Fires when the `selectedOption` changes."}]}},{"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\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.","default":"\"overlay\"","value":{"type":["\"overlay\"","\"float\""]}},{"name":"escape-disabled","description":"When `true`, disables the default close on escape behavior.","default":"false","value":{"type":"boolean"}},{"name":"focus-trap-disabled","description":"When `true`, prevents focus trapping.","default":"false","value":{"type":"boolean"}},{"name":"height","description":"Specifies the component's height.","value":{"type":["\"s\"","\"m\"","\"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.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"open","description":"When `true`, displays and positions the component.","default":"false","value":{"type":"boolean"}},{"name":"outside-close-disabled","description":"When `true`, disables closing the component when the area outside of the component is clicked.","default":"false","value":{"type":"boolean"}},{"name":"position","description":"Determines where the component will be positioned.","default":"\"inline-start\"","value":{"type":["\"inline-start\"","\"inline-end\"","\"block-start\"","\"block-end\""]}},{"name":"resizable","description":"When `true`, the component is resizable.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"width","description":"Specifies the components width.","value":{"type":["\"s\"","\"m\"","\"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.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"slots":[{"name":"","description":"A slot for adding custom content."}],"events":[{"name":"calciteSheetBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteSheetBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteSheetClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteSheetOpen","type":"void","description":"Fires when the component is open and animation is complete."}],"js":{"properties":[{"name":"beforeClose","description":"Passes a function to run before the component closes.","type":"(el: Sheet) => Promise<void>"},{"name":"displayMode","description":"Specifies the display mode - `\"float\"` separates content from main layout,\nand `\"overlay\"` displays on top of center content.","type":"DisplayMode"},{"name":"escapeDisabled","description":"When `true`, disables the default close on escape behavior.","type":"boolean"},{"name":"focusTrapDisabled","description":"When `true`, prevents focus trapping.","type":"boolean"},{"name":"focusTrapOptions","description":"Specifies custom focus trap configuration on the component, where\n\n`\"allowOutsideClick\"` allows outside clicks,\n`\"initialFocus\"` enables initial focus,\n`\"returnFocusOnDeactivate\"` returns focus when not active, and\n`\"extraContainers\"` specifies additional focusable elements external to the trap, such as 3rd-party components appending elements to the document body.\n`\"setReturnFocus\"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).","type":"Partial<FocusTrapOptions>"},{"name":"height","description":"Specifies the component's height.","type":"Height"},{"name":"heightScale","description":"When `position` is `\"block-start\"` or `\"block-end\"`, specifies the component's height.","type":"Scale"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"open","description":"When `true`, displays and positions the component.","type":"boolean"},{"name":"outsideCloseDisabled","description":"When `true`, disables closing the component when the area outside of the component is clicked.","type":"boolean"},{"name":"position","description":"Determines where the component will be positioned.","type":"LogicalFlowPosition"},{"name":"resizable","description":"When `true`, the component is resizable.","type":"boolean"},{"name":"topLayerDisabled","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.","type":"boolean"},{"name":"width","description":"Specifies the components width.","type":"Extract<Width, Scale>"},{"name":"widthScale","description":"When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the component's width.","type":"Scale"}],"events":[{"name":"calciteSheetBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteSheetBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteSheetClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteSheetOpen","type":"void","description":"Fires when the component is open and animation is complete."}]}},{"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding custom content. This content will appear between any leading and trailing panels added to the component, such as a map."},{"name":"header","description":"A slot for adding header content. This content will be positioned at the top of the component."},{"name":"footer","description":"A slot for adding footer content. This content will be positioned at the bottom of the component."},{"name":"panel-start","description":"A slot for adding the starting `calcite-shell-panel`."},{"name":"panel-end","description":"A slot for adding the ending `calcite-shell-panel`."},{"name":"panel-top","description":"A slot for adding the top `calcite-shell-panel`."},{"name":"panel-bottom","description":"A slot for adding the bottom `calcite-shell-panel`."},{"name":"dialogs","description":"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`."},{"name":"alerts","description":"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`."},{"name":"sheets","description":"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`."}],"events":[],"js":{"properties":[{"name":"contentBehind","description":"When `true`, positions the center content behind any `calcite-shell-panel`s.","type":"boolean"}],"events":[]}},{"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>`\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.","default":"false","value":{"type":"boolean"}},{"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.","default":"\"dock\"","value":{"type":["\"dock\"","\"overlay\"","\"float\"","\"float-all\"","\"float-content\""]}},{"name":"height","description":"Specifies the component's height.","value":{"type":["\"s\"","\"m\"","\"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.","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"layout","description":"**Deprecated**: in v4.0.0, removal target v6.0.0 -  No longer necessary.. Specifies the component's direction.","default":"\"vertical\"","value":{"type":["\"horizontal\"","\"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\"`).","default":"\"start\"","value":{"type":["\"start\"","\"end\""]}},{"name":"resizable","description":"When `true` and `displayMode` is `\"dock\"` or `\"overlay\"`, the component's content area is resizable.","default":"false","value":{"type":"boolean"}},{"name":"width","description":"Specifies the component's width.","value":{"type":["\"s\"","\"m\"","\"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.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"slots":[{"name":"","description":"A slot for adding custom content."},{"name":"action-bar","description":"A slot for adding a `calcite-action-bar` to the component."}],"events":[{"name":"calciteShellPanelCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteShellPanelExpand","type":"void","description":"Fires when the component's content area is expanded."}],"js":{"properties":[{"name":"collapsed","description":"When `true`, hides the component's content area.","type":"boolean"},{"name":"displayMode","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.","type":"DisplayMode"},{"name":"height","description":"Specifies the component's height.","type":"Height"},{"name":"heightScale","description":"When `layout` is `horizontal`, specifies the component's maximum height.","type":"Scale"},{"name":"layout","description":"Specifies the component's direction.","type":"Extract<\"horizontal\" | \"vertical\", Layout>"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"position","description":"Specifies the component's position. Will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"Extract<\"start\" | \"end\", Position>"},{"name":"resizable","description":"When `true` and `displayMode` is `\"dock\"` or `\"overlay\"`, the component's content area is resizable.","type":"boolean"},{"name":"width","description":"Specifies the component's width.","type":"Extract<Width, Scale>"},{"name":"widthScale","description":"When `layout` is `vertical`, specifies the component's width.","type":"Scale"}],"events":[{"name":"calciteShellPanelCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteShellPanelExpand","type":"void","description":"Fires when the component's content area is expanded."}]}},{"name":"calcite-slider","description":"### Events\n- **calciteSliderChange** - Fires when the thumb is released on the component.\n\nNote: To constantly listen to the drag event,\nuse `calciteSliderInput` instead.\n- **calciteSliderInput** - Fires on all updates to the component.\n\nNote: Fires frequently during drag. To perform\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread.\n\n### Methods\n- `componentOnReady(): Promise<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.","default":"false","value":{"type":"boolean"}},{"name":"fill-placement","description":"Used to configure where the fill is placed along the slider track in relation to the value handle.\n\nRange mode will always display the fill between the min and max handles.","default":"\"start\"","value":{"type":["\"start\"","\"none\"","\"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.","value":{"type":"string"}},{"name":"group-separator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","default":"false","value":{"type":"boolean"}},{"name":"has-histogram","description":"When `true`, indicates a histogram is present.","default":"false","value":{"type":"boolean"}},{"name":"label-handles","description":"When `true`, displays label handles with their numeric value.","default":"false","value":{"type":"boolean"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"label-ticks","description":"When `true` and `ticks` is specified, displays label tick marks with their numeric value.","default":"false","value":{"type":"boolean"}},{"name":"max","description":"The component's maximum selectable value.","default":"100","value":{"type":"number"}},{"name":"max-label","description":"For multiple selections, the accessible name for the second handle, such as `\"Temperature, upper bound\"`.","value":{"type":"string"}},{"name":"max-value","description":"For multiple selections, the component's upper value.","value":{"type":"number"}},{"name":"min","description":"The component's minimum selectable value.","default":"0","value":{"type":"number"}},{"name":"min-label","description":"Accessible name for first (or only) handle, such as `\"Temperature, lower bound\"`.","value":{"type":"string"}},{"name":"min-value","description":"For multiple selections, the component's lower value.","value":{"type":"number"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"page-step","description":"Specifies the interval to move with the page up, or page down keys.","value":{"type":"number"}},{"name":"precise","description":"When `true`, sets a finer point for handles.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"snap","description":"When `true`, enables snap selection in coordination with `step` via a mouse.","default":"false","value":{"type":"boolean"}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"step","description":"Specifies the interval to move with the up, or down keys.","default":"1","value":{"type":"number"}},{"name":"ticks","description":"Displays tick marks on the number line at a specified interval.","value":{"type":"number"}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"The component's value.","value":{"type":["number","object"]}}],"slots":[{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteSliderChange","type":"void","description":"Fires when the thumb is released on the component.\n\nNote: To constantly listen to the drag event,\nuse `calciteSliderInput` instead."},{"name":"calciteSliderInput","type":"void","description":"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."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"fillPlacement","description":"Used to configure where the fill is placed along the slider track in relation to the value handle.\n\nRange mode will always display the fill between the min and max handles.","type":"\"start\" | \"none\" | \"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.","type":"string"},{"name":"groupSeparator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","type":"boolean"},{"name":"hasHistogram","description":"When `true`, indicates a histogram is present.","type":"boolean"},{"name":"histogram","description":"A list of the histogram's x,y coordinates within the component's `min` and `max`. Displays above the component's track.","type":"DataSeries"},{"name":"histogramStops","description":"A set of single color stops for a histogram, sorted by offset ascending.","type":"ColorStop[]"},{"name":"labelFormatter","description":"When specified, allows users to customize handle labels.","type":"(value: number, type: \"value\" | \"min\" | \"max\" | \"tick\", defaultFormatter: (value: number) => string) => string | undefined"},{"name":"labelHandles","description":"When `true`, displays label handles with their numeric value.","type":"boolean"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"labelTicks","description":"When `true` and `ticks` is specified, displays label tick marks with their numeric value.","type":"boolean"},{"name":"max","description":"The component's maximum selectable value.","type":"number"},{"name":"maxLabel","description":"For multiple selections, the accessible name for the second handle, such as `\"Temperature, upper bound\"`.","type":"string"},{"name":"maxValue","description":"For multiple selections, the component's upper value.","type":"number"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"min","description":"The component's minimum selectable value.","type":"number"},{"name":"minLabel","description":"Accessible name for first (or only) handle, such as `\"Temperature, lower bound\"`.","type":"string"},{"name":"minValue","description":"For multiple selections, the component's lower value.","type":"number"},{"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.","type":"boolean"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem"},{"name":"pageStep","description":"Specifies the interval to move with the page up, or page down keys.","type":"number"},{"name":"precise","description":"When `true`, sets a finer point for handles.","type":"boolean"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"snap","description":"When `true`, enables snap selection in coordination with `step` via a mouse.","type":"boolean"},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"step","description":"Specifies the interval to move with the up, or down keys.","type":"number"},{"name":"ticks","description":"Displays tick marks on the number line at a specified interval.","type":"number"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"The component's value.","type":"number | number[]"}],"events":[{"name":"calciteSliderChange","type":"void","description":"Fires when the thumb is released on the component.\n\nNote: To constantly listen to the drag event,\nuse `calciteSliderInput` instead."},{"name":"calciteSliderInput","type":"void","description":"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."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"open","description":"When `true`, displays and positions the component.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"placement","description":"Determines where the component will be positioned relative to the container element.","default":"\"bottom-start\"","value":{"type":["\"top\"","\"bottom\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"set-position","description":"The current position of the handle.","value":{"type":"number"}},{"name":"set-size","description":"The total number of sortable items.","value":{"type":"number"}},{"name":"sort-disabled","description":"When `true`, items are no longer sortable.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"width-scale","description":"Specifies the width of the component.","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"events":[{"name":"calciteSortHandleAdd","type":"AddEventDetail","description":"Fires when an add item has been selected."},{"name":"calciteSortHandleBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteSortHandleBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteSortHandleClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteSortHandleMove","type":"MoveEventDetail","description":"Fires when a move item has been selected."},{"name":"calciteSortHandleOpen","type":"void","description":"Fires when the component is open and animation is complete."},{"name":"calciteSortHandleReorder","type":"ReorderEventDetail","description":"Fires when a reorder has been selected."}],"js":{"properties":[{"name":"addToItems","description":"Defines the \"Add to\" items.","type":"SortMenuItem[]"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"flipPlacements","description":"Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available.","type":"FlipPlacement[]"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"moveToItems","description":"Defines the \"Move to\" items.","type":"SortMenuItem[]"},{"name":"open","description":"When `true`, displays and positions the component.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"placement","description":"Determines where the component will be positioned relative to the container element.","type":"MenuPlacement"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"setPosition","description":"The current position of the handle.","type":"number"},{"name":"setSize","description":"The total number of sortable items.","type":"number"},{"name":"sortDisabled","description":"When `true`, items are no longer sortable.","type":"boolean"},{"name":"topLayerDisabled","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.","type":"boolean"},{"name":"widthScale","description":"Specifies the width of the component.","type":"Scale"}],"events":[{"name":"calciteSortHandleAdd","type":"AddEventDetail","description":"Fires when an add item has been selected."},{"name":"calciteSortHandleBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteSortHandleBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteSortHandleClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteSortHandleMove","type":"MoveEventDetail","description":"Fires when a move item has been selected."},{"name":"calciteSortHandleOpen","type":"void","description":"Fires when the component is open and animation is complete."},{"name":"calciteSortHandleReorder","type":"ReorderEventDetail","description":"Fires when a reorder has been selected."}]}},{"name":"calcite-sortable-list","description":"**Deprecated**: Use the `calcite-block-group` component instead..\n--\n\n### Events\n- **calciteListOrderChange** - Emitted when the order of the list has changed.\n\n### Methods\n- `componentOnReady(): Promise<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.","default":"false","value":{"type":"boolean"}},{"name":"drag-selector","description":"Specifies which items inside the element should be draggable.","value":{"type":"string"}},{"name":"group","description":"The list's group identifier.\n\nTo drag elements from one list into another, both lists must have the same group value.","value":{"type":"string"}},{"name":"handle-selector","description":"The selector for the handle elements.","default":"\"calcite-handle\"","value":{"type":"string"}},{"name":"layout","description":"Indicates the horizontal or vertical orientation of the component.","default":"\"vertical\"","value":{"type":["\"horizontal\"","\"vertical\"","\"grid\""]}},{"name":"loading","description":"When `true`, content is waiting to be loaded. This state shows a busy indicator.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding sortable items."}],"events":[{"name":"calciteListOrderChange","type":"void","description":"Emitted when the order of the list has changed."}],"js":{"properties":[{"name":"canPull","description":"When provided, the method will be called to determine whether the element can move from the list.","type":"(detail: DragDetail) => boolean"},{"name":"canPut","description":"When provided, the method will be called to determine whether the element can be added from another list.","type":"(detail: DragDetail) => boolean"},{"name":"disabled","description":"When `true`, disabled prevents interaction. This state shows items with lower opacity/grayed.","type":"boolean"},{"name":"dragSelector","description":"Specifies which items inside the element should be draggable.","type":"string | undefined"},{"name":"group","description":"The list's group identifier.\n\nTo drag elements from one list into another, both lists must have the same group value.","type":"string | undefined"},{"name":"handleSelector","description":"The selector for the handle elements.","type":"string"},{"name":"layout","description":"Indicates the horizontal or vertical orientation of the component.","type":"Extract<\"horizontal\" | \"vertical\" | \"grid\", Layout>"},{"name":"loading","description":"When `true`, content is waiting to be loaded. This state shows a busy indicator.","type":"boolean"}],"events":[{"name":"calciteListOrderChange","type":"void","description":"Emitted when the order of the list has changed."}]}},{"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.","default":"\"solid\"","value":{"type":["\"solid\"","\"outline\"","\"outline-fill\"","\"transparent\""]}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":["string","boolean"]}},{"name":"dropdown-icon-type","description":"Specifies the icon used for the dropdown menu.","default":"\"chevron\"","value":{"type":["\"chevron\"","\"caret\"","\"ellipsis\"","\"overflow\""]}},{"name":"dropdown-label","description":"Accessible name for the dropdown menu.","value":{"type":"string"}},{"name":"href","description":"Specifies the URL of the linked resource, which can be set as an absolute or relative path.","value":{"type":"string"}},{"name":"kind","description":"Specifies the kind of the component, which will apply to border and background, if applicable.","default":"\"brand\"","value":{"type":["\"brand\"","\"danger\"","\"inverse\"","\"neutral\""]}},{"name":"loading","description":"When `true`, a busy indicator is displayed on the primary button.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"placement","description":"Determines where the component will be positioned relative to the container element.","default":"\"bottom-end\"","value":{"type":["\"top\"","\"bottom\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\""]}},{"name":"primary-icon-end","description":"Specifies an icon to display at the end of the primary button.","value":{"type":"string"}},{"name":"primary-icon-flip-rtl","description":"Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"primary-icon-start","description":"Specifies an icon to display at the start of the primary button.","value":{"type":"string"}},{"name":"primary-label","description":"Accessible name for the primary button.","value":{"type":"string"}},{"name":"primary-text","description":"Text displayed in the primary button.","value":{"type":"string"}},{"name":"rel","description":"Defines the relationship between the `href` value and the current document.","value":{"type":"string"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"target","description":"Specifies where to open the linked document defined in the `href` property.","value":{"type":"string"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"width","description":"Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.","default":"\"auto\"","value":{"type":["\"auto\"","\"half\"","\"full\""]}}],"slots":[{"name":"","description":"A slot for adding `calcite-dropdown` content."}],"events":[{"name":"calciteSplitButtonPrimaryClick","type":"void","description":"Fires when the primary button is clicked."},{"name":"calciteSplitButtonSecondaryClick","type":"void","description":"Fires when the dropdown menu is clicked."}],"js":{"properties":[{"name":"appearance","description":"Specifies the appearance style of the component.","type":"Extract<\"outline\" | \"outline-fill\" | \"solid\" | \"transparent\", Appearance>"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string | boolean"},{"name":"dropdownIconType","description":"Specifies the icon used for the dropdown menu.","type":"DropdownIconType"},{"name":"dropdownLabel","description":"Accessible name for the dropdown menu.","type":"string"},{"name":"flipPlacements","description":"Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available.","type":"FlipPlacement[]"},{"name":"href","description":"Specifies the URL of the linked resource, which can be set as an absolute or relative path.","type":"string"},{"name":"kind","description":"Specifies the kind of the component, which will apply to border and background, if applicable.","type":"Extract<\"brand\" | \"danger\" | \"inverse\" | \"neutral\", Kind>"},{"name":"loading","description":"When `true`, a busy indicator is displayed on the primary button.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"placement","description":"Determines where the component will be positioned relative to the container element.","type":"MenuPlacement"},{"name":"primaryIconEnd","description":"Specifies an icon to display at the end of the primary button.","type":"IconName"},{"name":"primaryIconFlipRtl","description":"Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"primaryIconStart","description":"Specifies an icon to display at the start of the primary button.","type":"IconName"},{"name":"primaryLabel","description":"Accessible name for the primary button.","type":"string"},{"name":"primaryText","description":"Text displayed in the primary button.","type":"string"},{"name":"rel","description":"Defines the relationship between the `href` value and the current document.","type":"string"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"target","description":"Specifies where to open the linked document defined in the `href` property.","type":"string"},{"name":"topLayerDisabled","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.","type":"boolean"},{"name":"width","description":"Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.","type":"Extract<Width, \"auto\" | \"half\" | \"full\">"}],"events":[{"name":"calciteSplitButtonPrimaryClick","type":"void","description":"Fires when the primary button is clicked."},{"name":"calciteSplitButtonSecondaryClick","type":"void","description":"Fires when the dropdown menu is clicked."}]}},{"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding content."},{"name":"actions-start","description":"A slot for adding actionable `calcite-action` elements before the content of the component."},{"name":"content-start","description":"A slot for adding non-actionable elements before content of the component."},{"name":"content-end","description":"A slot for adding non-actionable elements after content of the component."},{"name":"actions-end","description":"A slot for adding actionable `calcite-action` elements after the content of the component."}],"events":[],"js":{"properties":[{"name":"disabled","description":"When `true`, content interaction is prevented and displayed with lower opacity.","type":"boolean"}],"events":[]}},{"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` elements.\n\n### CSS Properties\n- **--calcite-stepper-bar-gap** - Specifies the space between items in the component. \n- **--calcite-stepper-bar-inactive-fill-color** - Specifies the fill color of items in the component. \n- **--calcite-stepper-bar-active-fill-color** - Specifies the fill color of active items in the component. \n- **--calcite-stepper-bar-complete-fill-color** - Specifies the fill color of complete items in the component. \n- **--calcite-stepper-bar-error-fill-color** - Specifies the fill color of error items in the component. ","attributes":[{"name":"icon","description":"When `true`, displays a status icon in the `calcite-stepper-item` heading.","default":"false","value":{"type":"boolean"}},{"name":"layout","description":"Defines the layout of the component.","default":"\"horizontal\"","value":{"type":["\"horizontal\"","\"vertical\"","\"horizontal-single\""]}},{"name":"numbered","description":"When `true`, displays the step number in the `calcite-stepper-item` heading.","default":"false","value":{"type":"boolean"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"slots":[{"name":"","description":"A slot for adding `calcite-stepper-item` elements."}],"events":[{"name":"calciteStepperChange","type":"void","description":"Fires when the active `calcite-stepper-item` changes."}],"js":{"properties":[{"name":"icon","description":"When `true`, displays a status icon in the `calcite-stepper-item` heading.","type":"boolean"},{"name":"layout","description":"Defines the layout of the component.","type":"StepperLayout"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"numbered","description":"When `true`, displays the step number in the `calcite-stepper-item` heading.","type":"boolean"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem | undefined"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"selectedItem","description":"Specifies the component's selected item.","type":"StepperItem"}],"events":[{"name":"calciteStepperChange","type":"void","description":"Fires when the active `calcite-stepper-item` changes."}]}},{"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** - Specifies the component's header text color when selected. \n- **--calcite-stepper-item-icon-color** - Specifies the component's icon color. \n- **--calcite-stepper-item-complete-icon-color** - Specifies the component's icon color when complete. \n- **--calcite-stepper-item-error-icon-color** - Specifies the component's icon and number color when in error. \n- **--calcite-stepper-item-selected-icon-color** - Specifies the component's icon and number color when selected. \n- **--calcite-stepper-item-description-text-color** - Specifies the component's description and number text color. \n- **--calcite-stepper-item-description-text-color-hover** - Specifies the component's description text color when hovered, focused or selected. \n- **--calcite-stepper-bar-gap** - Specifies the component's bottom spacing. \n- **--calcite-stepper-bar-fill-color** - Specifies the component's fill color. \n- **--calcite-stepper-bar-fill-color-hover** - Specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-complete-fill-color** - Specifies the component's fill color when complete. \n- **--calcite-stepper-bar-complete-fill-color-hover** - When the component is `complete`, specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-error-fill-color** - Specifies the component's fill color when in error. \n- **--calcite-stepper-bar-error-fill-color-hover** - When the component contains an `error`, specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-selected-fill-color** - Specifies the component's fill color when selected. ","attributes":[{"name":"complete","description":"When `true`, the step has been completed.","default":"false","value":{"type":"boolean"}},{"name":"description","description":"Specifies a description for the component. Displays below the header text.","value":{"type":"string"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"error","description":"When `true`, the component contains an error that requires resolution from the user.","default":"false","value":{"type":"boolean"}},{"name":"heading","description":"Specifies the component's heading text.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding custom content."}],"events":[{"name":"calciteStepperItemSelect","type":"void","description":"Fires when the active `calcite-stepper-item` changes."}],"js":{"properties":[{"name":"complete","description":"When `true`, the step has been completed.","type":"boolean"},{"name":"description","description":"Specifies a description for the component. Displays below the header text.","type":"string"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"error","description":"When `true`, the component contains an error that requires resolution from the user.","type":"boolean"},{"name":"heading","description":"Specifies the component's heading text.","type":"string"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"}],"events":[{"name":"calciteStepperItemSelect","type":"void","description":"Fires when the active `calcite-stepper-item` changes."}]}},{"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","value":{"type":"string"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"scale","description":"Specifies the size of the component. When contained in a parent `calcite-swatch-group` inherits the parent's `scale` value.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}},{"name":"value","description":"The component's value.","value":{"type":"any"}}],"slots":[{"name":"image","description":"A slot for adding an image or pattern."}],"events":[{"name":"calciteSwatchSelect","type":"void","description":"Fires when the selected state of the component changes."}],"js":{"properties":[{"name":"color","description":"Specifies the component's color","type":"string"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"scale","description":"Specifies the size of the component. When contained in a parent `calcite-swatch-group` inherits the parent's `scale` value.","type":"Scale"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"},{"name":"value","description":"The component's value.","type":"any"}],"events":[{"name":"calciteSwatchSelect","type":"void","description":"Fires when the selected state of the component changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"scale","description":"Specifies the size of the component. Child `calcite-swatch`s inherit the component's value.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"\"none\"","value":{"type":["\"none\"","\"single\"","\"single-persist\"","\"multiple\""]}}],"slots":[{"name":"","description":"A slot for adding one or more `calcite-swatch`s."}],"events":[{"name":"calciteSwatchGroupSelect","type":"void","description":"Fires when the component's selection changes."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"scale","description":"Specifies the size of the component. Child `calcite-swatch`s inherit the component's value.","type":"Scale"},{"name":"selectedItems","description":"Specifies the component's selected items.","type":"Swatch[]"},{"name":"selectionMode","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.","type":"Extract<\"multiple\" | \"single\" | \"single-persist\" | \"none\", SelectionMode>"}],"events":[{"name":"calciteSwatchGroupSelect","type":"void","description":"Fires when the component's selection changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"label-text-end","description":"Specifies the component's end label text.","value":{"type":"string"}},{"name":"label-text-start","description":"Specifies the component's start label text.","value":{"type":"string"}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"value","description":"The component's value.","value":{"type":"any"}}],"events":[{"name":"calciteSwitchChange","type":"void","description":"Fires when the `checked` value has changed."}],"js":{"properties":[{"name":"checked","description":"When `true`, the component is checked.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"labelTextEnd","description":"Specifies the component's end label text.","type":"string"},{"name":"labelTextStart","description":"Specifies the component's start label text.","type":"string"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"value","description":"The component's value.","type":"any"}],"events":[{"name":"calciteSwitchChange","type":"void","description":"Fires when the `checked` value has changed."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"tab","description":"Specifies a unique name for the component.\n\nWhen specified, use the same value on the `calcite-tab-title`.","value":{"type":"string"}}],"slots":[{"name":"","description":"A slot for adding custom content."}],"events":[],"js":{"properties":[{"name":"selected","description":"When `true`, the component is selected.\n\nOnly one tab can be selected within the `calcite-tabs` parent.","type":"boolean"},{"name":"tab","description":"Specifies a unique name for the component.\n\nWhen specified, use the same value on the `calcite-tab-title`.","type":"string"}],"events":[]}},{"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","default":"\"bottom\"","value":{"type":["\"top\"","\"bottom\""]}},{"name":"storage-id","description":"Specifies the name when saving selected `calcite-tab` data to `localStorage`.","value":{"type":"string"}},{"name":"sync-id","description":"Specifies text to update multiple components to keep in sync if one changes.","value":{"type":"string"}}],"slots":[{"name":"","description":"A slot for adding `calcite-tab-title`s."}],"events":[{"name":"calciteTabChange","type":"void","description":"Emits when the selected `calcite-tab` changes."}],"js":{"properties":[{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"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","type":"TabPosition"},{"name":"selectedTitle","description":"Specifies the component's selected `calcite-tab-title`.","type":"TabTitle"},{"name":"storageId","description":"Specifies the name when saving selected `calcite-tab` data to `localStorage`.","type":"string"},{"name":"syncId","description":"Specifies text to update multiple components to keep in sync if one changes.","type":"string"}],"events":[{"name":"calciteTabChange","type":"void","description":"Emits when the selected `calcite-tab` changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"closed","description":"When `true`, hides the component.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}},{"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","default":"\"top\"","value":{"type":["\"top\"","\"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.","default":"false","value":{"type":"boolean"}},{"name":"tab","description":"Specifies a unique name for the component.\n\nWhen specified, use the same value on the `calcite-tab`.","value":{"type":"string"}}],"slots":[{"name":"","description":"A slot for adding text."}],"events":[{"name":"calciteTabsActivate","type":"void","description":"Fires when a `calcite-tab` is selected."},{"name":"calciteTabsClose","type":"void","description":"Fires when a `calcite-tab` is closed."}],"js":{"properties":[{"name":"closable","description":"When `true`, displays a close button in the component.","type":"boolean"},{"name":"closed","description":"When `true`, hides the component.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"iconEnd","description":"Specifies an icon to display at the end of the component.","type":"IconName"},{"name":"iconFlipRtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"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","type":"TabPosition"},{"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.","type":"boolean"},{"name":"tab","description":"Specifies a unique name for the component.\n\nWhen specified, use the same value on the `calcite-tab`.","type":"string"}],"events":[{"name":"calciteTabsActivate","type":"void","description":"Fires when a `calcite-tab` is selected."},{"name":"calciteTabsClose","type":"void","description":"Fires when a `calcite-tab` is closed."}]}},{"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`.","default":"false","value":{"type":"boolean"}},{"name":"caption","description":"Specifies an accessible title for the component.","value":{"type":"string"}},{"name":"current-page","description":"Sets/gets the current page","default":"0","value":{"type":"number"}},{"name":"group-separator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","default":"false","value":{"type":"boolean"}},{"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.","default":"\"interactive\"","value":{"type":["\"interactive\"","\"static\""]}},{"name":"layout","description":"Specifies the layout of the component.","default":"\"auto\"","value":{"type":["\"auto\"","\"fixed\""]}},{"name":"numbered","description":"When `true`, displays the position of the row in numeric form.","default":"false","value":{"type":"boolean"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"page-size","description":"Specifies the page size of the component. When present, renders `calcite-pagination`.","default":"0","value":{"type":"number"}},{"name":"scale","description":"Specifies the component's size.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"\"top\"","value":{"type":["\"none\"","\"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.","default":"\"none\"","value":{"type":["\"none\"","\"single\"","\"multiple\""]}},{"name":"striped","description":"When `true`, displays striped styling on the component's `calcite-table-rows`.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding `calcite-table-row` elements containing `calcite-table-cell` and/or `calcite-table-header` elements."},{"name":"table-header","description":"A slot for adding `calcite-table-row` elements containing `calcite-table-header` elements."},{"name":"table-footer","description":"A slot for adding `calcite-table-row` elements containing `calcite-table-cell` and/or `calcite-table-header` elements."},{"name":"selection-actions","description":"A slot for adding `calcite-actions` or other elements to display when `selectionMode` is not `\"none\"` and `selectionDisplay` is not `\"none\"`."}],"events":[{"name":"calciteTablePageChange","type":"void","description":"Emits when the component's page selection changes."},{"name":"calciteTableSelect","type":"void","description":"Emits when the component's selected rows change."}],"js":{"properties":[{"name":"bordered","description":"When `true`, displays borders between `calcite-table-rows`.","type":"boolean"},{"name":"caption","description":"Specifies an accessible title for the component.","type":"string"},{"name":"currentPage","description":"Sets/gets the current page","type":"number"},{"name":"groupSeparator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","type":"boolean"},{"name":"interactionMode","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.","type":"TableInteractionMode"},{"name":"layout","description":"Specifies the layout of the component.","type":"TableLayout"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"numbered","description":"When `true`, displays the position of the row in numeric form.","type":"boolean"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem | undefined"},{"name":"pageSize","description":"Specifies the page size of the component. When present, renders `calcite-pagination`.","type":"number"},{"name":"scale","description":"Specifies the component's size.","type":"Scale"},{"name":"selectedItems","description":"Specifies the component's selected items.","type":"TableRow[]"},{"name":"selectionDisplay","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.","type":"TableSelectionDisplay"},{"name":"selectionMode","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.","type":"Extract<\"none\" | \"multiple\" | \"single\", SelectionMode>"},{"name":"striped","description":"When `true`, displays striped styling on the component's `calcite-table-rows`.","type":"boolean"}],"events":[{"name":"calciteTablePageChange","type":"void","description":"Emits when the component's page selection changes."},{"name":"calciteTableSelect","type":"void","description":"Emits when the component's selected rows change."}]}},{"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.","default":"\"start\"","value":{"type":["\"start\"","\"center\"","\"end\""]}},{"name":"col-span","description":"Specifies the number of columns the component should span.","value":{"type":"number"}},{"name":"row-span","description":"Specifies the number of rows the component should span.","value":{"type":"number"}}],"slots":[{"name":"","description":"A slot for adding content, usually text content."}],"events":[],"js":{"properties":[{"name":"alignment","description":"Specifies the alignment of the component.","type":"Alignment"},{"name":"colSpan","description":"Specifies the number of columns the component should span.","type":"number"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"rowSpan","description":"Specifies the number of rows the component should span.","type":"number"}],"events":[]}},{"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.","default":"\"start\"","value":{"type":["\"start\"","\"center\"","\"end\""]}},{"name":"col-span","description":"Specifies the number of columns the component should span.","value":{"type":"number"}},{"name":"description","description":"Specifies a description for the component. Displays below the `heading`.","value":{"type":"string"}},{"name":"heading","description":"Specifies the component's heading text. Displays above the `description`.","value":{"type":"string"}},{"name":"row-span","description":"Specifies the number of rows the component should span.","value":{"type":"number"}}],"events":[],"js":{"properties":[{"name":"alignment","description":"Specifies the alignment of the component.","type":"Alignment"},{"name":"colSpan","description":"Specifies the number of columns the component should span.","type":"number"},{"name":"description","description":"Specifies a description for the component. Displays below the `heading`.","type":"string"},{"name":"heading","description":"Specifies the component's heading text. Displays above the `description`.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"rowSpan","description":"Specifies the number of rows the component should span.","type":"number"}],"events":[]}},{"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.","value":{"type":["\"start\"","\"center\"","\"end\""]}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding `calcite-table-cell` or `calcite-table-header` elements."}],"events":[{"name":"calciteTableRowSelect","type":"void","description":"Fires when the selected state of the component changes."}],"js":{"properties":[{"name":"alignment","description":"Specifies the alignment of the component.","type":"Alignment"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"}],"events":[{"name":"calciteTableRowSelect","type":"void","description":"Fires when the selected state of the component changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"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\"`).","default":"\"inline\"","value":{"type":["\"center\"","\"inline\""]}},{"name":"position","description":"Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to the `calcite-tabs`.","default":"\"top\"","value":{"type":["\"top\"","\"bottom\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"slots":[{"name":"","description":"A slot for adding `calcite-tab`s."},{"name":"title-group","description":"A slot for adding a `calcite-tab-nav`."}],"events":[],"js":{"properties":[{"name":"bordered","description":"When `true`, displays the component with a folder style menu.","type":"boolean"},{"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\"`).","type":"TabLayout"},{"name":"position","description":"Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to the `calcite-tabs`.","type":"TabPosition"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"}],"events":[]}},{"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.","value":{"type":"number"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"group-separator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"limit-text","description":"When `true`, prevents input beyond the `maxLength` value, mimicking native text area behavior.","default":"false","value":{"type":"boolean"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"max-length","description":"When the component resides in a form,\nspecifies the maximum number of characters allowed.","value":{"type":"number"}},{"name":"min-length","description":"When the component resides in a form,\nspecifies the minimum number of characters allowed.","value":{"type":"number"}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's value on form submission.","value":{"type":"string"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"placeholder","description":"Specifies the placeholder text for the component.","value":{"type":"string"}},{"name":"read-only","description":"When `true`, the component's `value` can be read, but cannot be modified.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"resize","description":"Specifies if the component is resizable.","default":"\"both\"","value":{"type":["\"both\"","\"horizontal\"","\"vertical\"","\"none\""]}},{"name":"rows","description":"Specifies the component's number of rows.","value":{"type":"number"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"l\"","\"m\"","\"s\""]}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"The component's value.","default":"\"\"","value":{"type":"string"}},{"name":"wrap","description":"Specifies the wrapping mechanism for the text.","default":"\"soft\"","value":{"type":["\"soft\"","\"hard\""]}}],"slots":[{"name":"","description":"A slot for adding text."},{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."},{"name":"footer-start","description":"A slot for adding content to the start of the component's footer."},{"name":"footer-end","description":"A slot for adding content to the end of the component's footer."}],"events":[{"name":"calciteTextAreaChange","type":"void","description":"Fires each time a new `value` is typed and committed."},{"name":"calciteTextAreaInput","type":"void","description":"Fires each time a new `value` is typed."}],"js":{"properties":[{"name":"columns","description":"Specifies the component's number of columns.","type":"number"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"name":"groupSeparator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"limitText","description":"When `true`, prevents input beyond the `maxLength` value, mimicking native text area behavior.","type":"boolean"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"maxLength","description":"When the component resides in a form,\nspecifies the maximum number of characters allowed.","type":"number"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"minLength","description":"When the component resides in a form,\nspecifies the minimum number of characters allowed.","type":"number"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's value on form submission.","type":"string"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem"},{"name":"placeholder","description":"Specifies the placeholder text for the component.","type":"string"},{"name":"readOnly","description":"When `true`, the component's `value` can be read, but cannot be modified.","type":"boolean"},{"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.","type":"boolean"},{"name":"resize","description":"Specifies if the component is resizable.","type":"\"both\" | \"horizontal\" | \"vertical\" | \"none\""},{"name":"rows","description":"Specifies the component's number of rows.","type":"number"},{"name":"scale","description":"Specifies the size of the component.","type":"\"l\" | \"m\" | \"s\""},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"The component's value.","type":"string"},{"name":"wrap","description":"Specifies the wrapping mechanism for the text.","type":"\"soft\" | \"hard\""}],"events":[{"name":"calciteTextAreaChange","type":"void","description":"Fires each time a new `value` is typed and committed."},{"name":"calciteTextAreaInput","type":"void","description":"Fires each time a new `value` is typed."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"alignment","description":"Specifies alignment of the component's content.","default":"\"start\"","value":{"type":["\"start\"","\"center\""]}},{"name":"description","description":"Specifies a description for the component. Displays below the `heading`.","value":{"type":"string"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"heading","description":"Specifies the component's heading text. displays between the `icon` and `description`.","value":{"type":"string"}},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","value":{"type":["1","2","3","4","5","6"]}},{"name":"href","description":"When embed is `false`, specifies the URL for the component.","value":{"type":"string"}},{"name":"icon","description":"Specifies an icon to display.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"scale","description":"Specifies the component's size.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"selected","description":"When `true` and the parent's `selectionMode` is `\"single\"`, `\"single-persist\"', or `\"multiple\"`, the component is selected.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"content-top","description":"A slot for adding non-actionable elements above the component's content.  Content slotted here will render in place of the `icon` property."},{"name":"content-bottom","description":"A slot for adding non-actionable elements below the component's content."}],"events":[{"name":"calciteTileSelect","type":"void","description":"Fires when the selected state of the component changes."}],"js":{"properties":[{"name":"active","description":"When `true`, the component is active.","type":"boolean"},{"name":"alignment","description":"Specifies alignment of the component's content.","type":"Exclude<Alignment, \"end\">"},{"name":"description","description":"Specifies a description for the component. Displays below the `heading`.","type":"string"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"embed","description":"Specifies the component's embed mode.\n\nWhen `true`, renders without a border and padding for use by other components.","type":"boolean"},{"name":"heading","description":"Specifies the component's heading text. displays between the `icon` and `description`.","type":"string"},{"name":"headingLevel","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","type":"HeadingLevel"},{"name":"href","description":"When embed is `false`, specifies the URL for the component.","type":"string"},{"name":"icon","description":"Specifies an icon to display.","type":"IconName"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"scale","description":"Specifies the component's size.","type":"Scale"},{"name":"selected","description":"When `true` and the parent's `selectionMode` is `\"single\"`, `\"single-persist\"', or `\"multiple\"`, the component is selected.","type":"boolean"}],"events":[{"name":"calciteTileSelect","type":"void","description":"Fires when the selected state of the component changes."}]}},{"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.","default":"\"start\"","value":{"type":["\"start\"","\"center\""]}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"layout","description":"Defines the layout of the component.\n\nUse `\"horizontal\"` for rows, and `\"vertical\"` for a single column.","default":"\"horizontal\"","value":{"type":["\"horizontal\"","\"vertical\""]}},{"name":"scale","description":"Specifies the component's size.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"\"icon\"","value":{"type":["\"icon\"","\"border\"","\"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).","default":"\"none\"","value":{"type":["\"none\"","\"single\"","\"single-persist\"","\"multiple\""]}}],"slots":[{"name":"","description":"A slot for adding `calcite-tile` elements."}],"events":[{"name":"calciteTileGroupSelect","type":"void","description":"Fires when the component's selection changes."}],"js":{"properties":[{"name":"alignment","description":"Specifies the alignment of each `calcite-tile`'s content.","type":"Exclude<Alignment, \"end\">"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"layout","description":"Defines the layout of the component.\n\nUse `\"horizontal\"` for rows, and `\"vertical\"` for a single column.","type":"Extract<Layout, \"horizontal\" | \"vertical\">"},{"name":"scale","description":"Specifies the component's size.","type":"Scale"},{"name":"selectedItems","description":"Specifies the component's selected items.","type":"Tile[]"},{"name":"selectionAppearance","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.","type":"Extract<\"icon\" | \"highlight\" | \"border\", SelectionAppearance>"},{"name":"selectionMode","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).","type":"Extract<\"multiple\" | \"none\" | \"single\" | \"single-persist\", SelectionMode>"}],"events":[{"name":"calciteTileGroupSelect","type":"void","description":"Fires when the component's selection changes."}]}},{"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.","default":"\"user\"","value":{"type":["\"24\"","\"user\"","\"12\""]}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"scale","description":"Specifies the component's size.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"step","description":"Specifies the granularity the `value` must adhere to (in seconds).","default":"60","value":{"type":"number"}},{"name":"value","description":"The component's value in UTC (always 24-hour format).","value":{"type":"string"}}],"events":[{"name":"calciteTimePickerChange","type":"void","description":"Fires when a user changes the component's time"}],"js":{"properties":[{"name":"hourFormat","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.","type":"HourFormat"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem"},{"name":"scale","description":"Specifies the component's size.","type":"Scale"},{"name":"step","description":"Specifies the granularity the `value` must adhere to (in seconds).","type":"number"},{"name":"time","type":"ReturnType<typeof useTime>"},{"name":"value","description":"The component's value in UTC (always 24-hour format).","type":"string"}],"events":[{"name":"calciteTimePickerChange","type":"void","description":"Fires when a user changes the component's time"}]}},{"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.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"offset-distance","description":"Offset the position of the component away from the `referenceElement`.","value":{"type":"number"}},{"name":"offset-skidding","description":"Offset the position of the component along the `referenceElement`.","default":"0","value":{"type":"number"}},{"name":"open","description":"When `true`, the component is open.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"placement","description":"Determines where the component will be positioned relative to the `referenceElement`.","default":"\"auto\"","value":{"type":["\"auto\"","\"top\"","\"bottom\"","\"left\"","\"right\"","\"auto-start\"","\"auto-end\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\"","\"right-start\"","\"right-end\"","\"left-start\"","\"left-end\"","\"leading-start\"","\"leading\"","\"leading-end\"","\"trailing-end\"","\"trailing\"","\"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.","value":{"type":["string","object"]}},{"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding text."}],"events":[{"name":"calciteTooltipBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteTooltipBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteTooltipClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteTooltipOpen","type":"void","description":"Fires when the component is open and animation is complete."}],"js":{"properties":[{"name":"closeOnClick","description":"Closes the component when the `referenceElement` is clicked.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"offsetDistance","description":"Offset the position of the component away from the `referenceElement`.","type":"number"},{"name":"offsetSkidding","description":"Offset the position of the component along the `referenceElement`.","type":"number"},{"name":"open","description":"When `true`, the component is open.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"placement","description":"Determines where the component will be positioned relative to the `referenceElement`.","type":"LogicalPlacement"},{"name":"referenceElement","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.","type":"ReferenceElement | string"},{"name":"topLayerDisabled","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.","type":"boolean"}],"events":[{"name":"calciteTooltipBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteTooltipBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteTooltipClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteTooltipOpen","type":"void","description":"Fires when the component is open and animation is complete."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the component's size.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"\"single\"","value":{"type":["\"none\"","\"single\"","\"children\"","\"single-persist\"","\"multichildren\"","\"ancestors\"","\"multiple\""]}}],"slots":[{"name":"","description":"A slot for `calcite-tree-item` elements."}],"events":[{"name":"calciteTreeSelect","type":"void","description":"Fires when the user selects/deselects `calcite-tree-items`."}],"js":{"properties":[{"name":"lines","description":"When `true`, displays indentation guide lines.","type":"boolean"},{"name":"scale","description":"Specifies the component's size.","type":"Scale"},{"name":"selectedItems","description":"Specifies the component's selected items.","type":"TreeItem[]"},{"name":"selectionMode","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.","type":"SelectionMode"}],"events":[{"name":"calciteTreeSelect","type":"void","description":"Fires when the user selects/deselects `calcite-tree-items`."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"expanded","description":"When `true`, expands the component and its contents.","default":"false","value":{"type":"boolean"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding text."},{"name":"children","description":"A slot for adding nested `calcite-tree` elements."},{"name":"actions-end","description":"A slot for adding actions to the end of the component. It is recommended to use two or fewer actions."}],"events":[{"name":"calciteTreeItemCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteTreeItemExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteTreeItemSelect","type":"void","description":"Fires when the component is selected or deselected."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"expanded","description":"When `true`, expands the component and its contents.","type":"boolean"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"}],"events":[{"name":"calciteTreeItemCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteTreeItemExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteTreeItemSelect","type":"void","description":"Fires when the component is selected or deselected."}]}}]},"css":{"properties":[{"name":"--calcite-accordion-border-color","description":"Specifies the component's border color."},{"name":"--calcite-accordion-background-color","description":"Specifies the component's background color."},{"name":"--calcite-accordion-text-color","description":"Specifies the component's text color."},{"name":"--calcite-accordion-text-color-hover","description":"Specifies the component's main text color on hover."},{"name":"--calcite-accordion-text-color-press","description":"Specifies the component's main text color when pressed."},{"name":"--calcite-accordion-border-color","description":"Specifies the component's border color."},{"name":"--calcite-accordion-background-color","description":"Specifies the component's background color."},{"name":"--calcite-accordion-text-color","description":"Specifies the component's text color."},{"name":"--calcite-accordion-text-color-hover","description":"Specifies the component's main text color on hover."},{"name":"--calcite-accordion-text-color-press","description":"Specifies the component's main text color when pressed."},{"name":"--calcite-accordion-item-background-color","description":"[Deprecated] Use `--calcite-accordion-background-color`. Specifies the component's background color."},{"name":"--calcite-accordion-item-border-color","description":"[Deprecated] Use `--calcite-accordion-border-color`. Specifies the component's border color."},{"name":"--calcite-accordion-item-content-space","description":"Specifies the component's padding."},{"name":"--calcite-accordion-item-end-icon-color","description":"Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color."},{"name":"--calcite-accordion-item-expand-icon-color","description":"Specifies the component's expand icon color."},{"name":"--calcite-accordion-item-header-background-color","description":"Specifies the component's `heading` background color."},{"name":"--calcite-accordion-item-header-background-color-hover","description":"Specifies the component's `heading` background color when hovered."},{"name":"--calcite-accordion-item-header-background-color-press","description":"Specifies the component's `heading` background color when pressed."},{"name":"--calcite-accordion-item-heading-text-color","description":"Specifies the component's `heading` text color."},{"name":"--calcite-accordion-item-icon-color","description":"[Deprecated] Use `--calcite-icon-color`. Specifies the component's default icon color."},{"name":"--calcite-accordion-item-start-icon-color","description":"Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color."},{"name":"--calcite-accordion-item-text-color","description":"[Deprecated] Use `--calcite-accordion-text-color`. Specifies the component's text color."},{"name":"--calcite-accordion-item-text-color-hover","description":"[Deprecated] Use `--calcite-accordion-text-color-hover`. Specifies the component's text color on hover."},{"name":"--calcite-action-background-color-hover","description":"Specifies the component's background color when hovered or focused."},{"name":"--calcite-action-background-color-press","description":"Specifies the component's background color when active."},{"name":"--calcite-action-background-color-pressed","description":"[Deprecated] Use --calcite-action-background-color-press. Specifies the component's background color when active."},{"name":"--calcite-action-background-color","description":"Specifies the component's background color."},{"name":"--calcite-action-corner-radius-end-end","description":"[Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end end."},{"name":"--calcite-action-corner-radius-end-start","description":"[Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end start."},{"name":"--calcite-action-corner-radius-start-end","description":"[Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start end."},{"name":"--calcite-action-corner-radius-start-start","description":"[Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start start."},{"name":"--calcite-action-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-action-indicator-color","description":"Specifies the component's indicator color."},{"name":"--calcite-action-text-color-press","description":"Specifies the component's text color when pressed or hovered."},{"name":"--calcite-action-text-color-pressed","description":"[Deprecated] Use --calcite-action-text-color-press. Specifies the component's text color when hovered."},{"name":"--calcite-action-text-color","description":"Specifies the component's text color."},{"name":"--calcite-action-bar-background-color","description":"Specifies the component's background color."},{"name":"--calcite-action-bar-corner-radius","description":"Specifies the component's border radius when `floating` is `true`."},{"name":"--calcite-action-bar-expanded-max-width","description":"When `layout` is `\"vertical\"`, specifies the component's maximum width."},{"name":"--calcite-action-bar-items-space","description":"Specifies the space between slotted components in the component."},{"name":"--calcite-action-bar-shadow","description":"Specifies the component's shadow when `floating` is `true`."},{"name":"--calcite-action-background-color","description":"Specifies the component's background color."},{"name":"--calcite-action-group-border-color","description":"Specifies the component's border color when used in a `calcite-action-bar` or `calcite-action-menu`."},{"name":"--calcite-action-group-columns","description":"When `layout` is `\"grid\"`, specifies the component's `grid-template-columns`."},{"name":"--calcite-action-group-gap","description":"When `layout` is `\"grid\"`, specifies the component's gap."},{"name":"--calcite-action-menu-items-space","description":"Specifies the space between actions in the menu."},{"name":"--calcite-action-pad-corner-radius","description":"Specifies the component's border radius."},{"name":"--calcite-action-pad-expanded-max-width","description":"When `expanded` and `layout` is `\"vertical\"`, specifies the component's maximum width."},{"name":"--calcite-action-pad-items-space","description":"Specifies the component's space between slotted components."},{"name":"--calcite-alert-width","description":"Specifies the component's width."},{"name":"--calcite-alert-background-color","description":"Specifies the component's background color."},{"name":"--calcite-alert-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-alert-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-alert-offset-size","description":"Specifies the component's `placement` offset."},{"name":"--calcite-autocomplete-background-color","description":"Specifies the component's background color."},{"name":"--calcite-autocomplete-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-autocomplete-text-color","description":"Specifies the component's text color."},{"name":"--calcite-autocomplete-menu-max-size-y","description":"Specifies the maximum height of the component's menu."},{"name":"--calcite-autocomplete-input-prefix-size","description":"Specifies the input's prefix width, when present."},{"name":"--calcite-autocomplete-input-suffix-size","description":"Specifies the input's suffix width, when present."},{"name":"--calcite-autocomplete-input-background-color","description":"Specifies the background color of the component's input."},{"name":"--calcite-autocomplete-input-border-color","description":"Specifies the border color of the component's input."},{"name":"--calcite-autocomplete-input-corner-radius","description":"Specifies the corner radius of the component's input."},{"name":"--calcite-autocomplete-input-shadow","description":"Specifies the shadow of the component's input."},{"name":"--calcite-autocomplete-input-icon-color","description":"Specifies the icon color of the component's input."},{"name":"--calcite-autocomplete-input-text-color","description":"Specifies the text color of the component's input."},{"name":"--calcite-autocomplete-input-placeholder-text-color","description":"Specifies the placeholder text color of the component's input."},{"name":"--calcite-autocomplete-input-actions-background-color","description":"Specifies the background color of the input's `clearable` element."},{"name":"--calcite-autocomplete-input-actions-background-color-hover","description":"Specifies the background color of the input's `clearable` element when hovered."},{"name":"--calcite-autocomplete-input-actions-background-color-press","description":"Specifies the background color of the input's `clearable` element when pressed."},{"name":"--calcite-autocomplete-input-actions-icon-color","description":"Specifies the icon color of the input's `clearable` element."},{"name":"--calcite-autocomplete-input-actions-icon-color-hover","description":"Specifies the icon color of the input's `clearable` element when hovered."},{"name":"--calcite-autocomplete-input-actions-icon-color-press","description":"Specifies the icon color of the input's `clearable` element when pressed."},{"name":"--calcite-autocomplete-input-loading-background-color","description":"Specifies the background color of the Input's `loading` element, when present."},{"name":"--calcite-autocomplete-input-loading-fill-color","description":"Specifies the fill color of the Input's `loading` element, when present."},{"name":"--calcite-autocomplete-input-prefix-text-color","description":"Specifies the text color of the Input's prefix, when present."},{"name":"--calcite-autocomplete-input-suffix-text-color","description":"Specifies the text color of the Input's suffix, when present."},{"name":"--calcite-autocomplete-background-color","description":"Specifies the component's background color."},{"name":"--calcite-autocomplete-description-text-color","description":"Specifies the text color of the component's `description`."},{"name":"--calcite-autocomplete-heading-text-color","description":"Specifies the text color of the component's `heading`."},{"name":"--calcite-autocomplete-text-color","description":"Specifies the component's text color."},{"name":"--calcite-autocomplete-background-color","description":"Specifies the component's background color."},{"name":"--calcite-autocomplete-border-color","description":"Specifies the component's border color."},{"name":"--calcite-autocomplete-text-color","description":"Specifies the component's text color."},{"name":"--calcite-avatar-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-avatar-color","description":"Specifies the component's icon or initial color."},{"name":"--calcite-avatar-background-color","description":"Specifies the component's background color."},{"name":"--calcite-block-border-color","description":"Specifies the component's border color."},{"name":"--calcite-block-content-space","description":"Specifies the space of the component's `default` slot."},{"name":"--calcite-block-header-background-color","description":"Specifies the component's `heading` background color."},{"name":"--calcite-block-header-background-color-hover","description":"Specifies the component's `heading` background color when hovered."},{"name":"--calcite-block-header-background-color-press","description":"Specifies the component's `heading` background color when pressed."},{"name":"--calcite-block-heading-text-color","description":"Specifies the component's `heading` text color."},{"name":"--calcite-block-heading-text-color-press","description":"[Deprecated]  use `--calcite-block-heading-text-color` instead - When the component is `expanded`, specifies the `heading` text color."},{"name":"--calcite-block-padding","description":"[Deprecated] use `--calcite-block-content-space` instead - Specifies the padding of the component's `default` slot."},{"name":"--calcite-block-text-color","description":"[Deprecated] Specifies the component's text color."},{"name":"--calcite-block-description-text-color","description":"Specifies the component's `description` text color."},{"name":"--calcite-block-icon-color","description":"Specifies the component's `collapsible` icon, `iconStart` and `iconEnd` color."},{"name":"--calcite-block-icon-color-hover","description":"Specifies the component's `collapsible` icon color when hovered."},{"name":"--calcite-block-section-background-color","description":"Specifies the component's background color."},{"name":"--calcite-block-section-border-color","description":"Specifies the component's border color. When `expanded`, applies to the component's bottom border."},{"name":"--calcite-block-section-header-text-color","description":"Specifies the component's header text color."},{"name":"--calcite-block-section-text-color","description":"Specifies the component's text color."},{"name":"--calcite-block-section-text-color-hover","description":"Specifies the component's text color on hover."},{"name":"--calcite-block-section-content-space","description":"Specifies the padding of the component's content in `default` slot."},{"name":"--calcite-button-background-color","description":"Specifies the component's background color."},{"name":"--calcite-button-border-color","description":"Specifies the component's border color."},{"name":"--calcite-button-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-button-icon-color","description":"Specifies the component's `iconStart` and `iconEnd` color."},{"name":"--calcite-button-loader-color","description":"Specifies the component's loader color."},{"name":"--calcite-button-text-color","description":"Specifies the component's text color."},{"name":"--calcite-button-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-card-accent-color-selected","description":"Specifies the component's accent color when `selected`."},{"name":"--calcite-card-background-color","description":"Specifies the component's background color."},{"name":"--calcite-card-border-color","description":"Specifies the component's border color."},{"name":"--calcite-card-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-card-selection-background-color-hover","description":"Specifies the component's selection element background color when hovered."},{"name":"--calcite-card-selection-background-color-press","description":"Specifies the component's selection element background color when active."},{"name":"--calcite-card-selection-background-color","description":"[Deprecated] Use `--calcite-card-background-color`. Specifies the component's selection element background color."},{"name":"--calcite-card-selection-color-hover","description":"Specifies the component's selection element color when hovered or focused."},{"name":"--calcite-card-selection-color","description":"Specifies the component's selection element color."},{"name":"--calcite-card-selection-icon-color-hover","description":"[Deprecated] Use `--calcite-card-selection-color-hover`. Specifies the component's selection element icon color when hovered."},{"name":"--calcite-card-selection-icon-color-selected","description":"[Deprecated] Use `--calcite-card-accent-color-selected`. Specifies the component's selection element icon color when `selected`."},{"name":"--calcite-card-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-card-group-gap","description":"[Deprecated] Use `--calcite-card-group-space`. Specifies the gap between slotted elements."},{"name":"--calcite-card-group-space","description":"Specifies the space between slotted elements."},{"name":"--calcite-checkbox-size","description":"Specifies the component's height and width."},{"name":"--calcite-checkbox-border-color","description":"Specifies the component's color."},{"name":"--calcite-checkbox-border-color-hover","description":"Specifies the component's color when hovered."},{"name":"--calcite-checkbox-border-color-press","description":"Specifies the component's color when pressed."},{"name":"--calcite-checkbox-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-chip-background-color","description":"Specifies the component's background color."},{"name":"--calcite-chip-border-color","description":"Specifies the component's border color."},{"name":"--calcite-chip-close-icon-color","description":"Specifies the component's close element icon color."},{"name":"--calcite-chip-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-chip-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-chip-select-icon-color-press","description":"Specifies the component's selection element icon color when active."},{"name":"--calcite-chip-select-icon-color-pressed","description":"[Deprecated] Use `--calcite-chip-select-icon-color-press`. Specifies the component's selection element icon color when active."},{"name":"--calcite-chip-select-icon-color","description":"Specifies the component's selection element icon color."},{"name":"--calcite-chip-text-color","description":"Specifies the component's text color."},{"name":"--calcite-color-picker-background-color","description":"Specifies the component's background color."},{"name":"--calcite-color-picker-border-color","description":"Specifies the component's border color."},{"name":"--calcite-color-picker-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-color-picker-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-color-picker-text-color","description":"Specifies the component's text color."},{"name":"--calcite-color-picker-input-background-color","description":"Specifies the component's input background color."},{"name":"--calcite-color-picker-input-border-color","description":"Specifies the component's input border color."},{"name":"--calcite-color-picker-input-text-color","description":"Specifies the component's input text color."},{"name":"--calcite-color-picker-input-prefix-text-color","description":"When `hexDisabled` is not `true`, specifies the component's input prefix text color."},{"name":"--calcite-color-picker-input-suffix-text-color","description":"When `alphaChannel` is `true`, specifies the component's input suffix text color."},{"name":"--calcite-color-picker-tab-border-color","description":"Specifies the component's tab border color."},{"name":"--calcite-color-picker-tab-text-color","description":"Specifies the component's tab text color."},{"name":"--calcite-color-picker-tab-accent-color-press","description":"Specifies the component's tab accent color when selected or active."},{"name":"--calcite-color-picker-swatch-corner-radius","description":"Specifies the component's swatch corner radius."},{"name":"--calcite-color-picker-action-text-color-press","description":"Specifies the component's `savedColors` action text color when pressed."},{"name":"--calcite-color-picker-action-text-color-hover","description":"Specifies the component's `savedColors` action text color when hovered."},{"name":"--calcite-color-picker-action-text-color","description":"Specifies the component's `savedColors` action text color."},{"name":"--calcite-combobox-divider-color","description":"Specifies the component's divider color."},{"name":"--calcite-combobox-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-combobox-icon-color-hover","description":"Specifies the component's icon color when hovered."},{"name":"--calcite-combobox-background-color","description":"Specifies the background color of the component's listbox."},{"name":"--calcite-combobox-input-border-color","description":"Specifies the border color of the component's input."},{"name":"--calcite-combobox-input-background-color","description":"Specifies the background color of the component's input."},{"name":"--calcite-combobox-input-height","description":"Specifies the height of the component's input."},{"name":"--calcite-combobox-input-text-color","description":"When `selectionDisplay` is `\"single\"`, specifies the text color of the component's input."},{"name":"--calcite-combobox-item-border-color","description":"[Deprecated] Specifies the component's border color."},{"name":"--calcite-combobox-text-color","description":"Specifies the component's text and `icon` color."},{"name":"--calcite-combobox-text-color-hover","description":"Specifies the component's text and `icon` color when hovered."},{"name":"--calcite-combobox-item-background-color-active","description":"Specifies the component's background color when active."},{"name":"--calcite-combobox-item-background-color-hover","description":"Specifies the component's background color when hovered."},{"name":"--calcite-combobox-item-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-combobox-selected-icon-color","description":"Specifies the component's selected indicator icon color."},{"name":"--calcite-combobox-description-text-color","description":"Specifies the component's `description` and `shortHeading` text color."},{"name":"--calcite-combobox-description-text-color-press","description":"Specifies the component's `description` and `shortHeading` text color when hovered."},{"name":"--calcite-combobox-heading-text-color","description":"Specifies the component's `heading` text color."},{"name":"--calcite-combobox-item-group-text-color","description":"Specifies the text color of the component."},{"name":"--calcite-combobox-item-group-border-color","description":"Specifies the border color of the component."},{"name":"--calcite-date-picker-border-color","description":"Specifies the component's border color."},{"name":"--calcite-date-picker-corner-radius","description":"Specifies the component's border radius."},{"name":"--calcite-date-picker-range-calendar-divider-color","description":"Specifies the divider color between calendar's when `range=\"true\"`."},{"name":"--calcite-date-picker-week-header-text-color","description":"Specifies the week header text color."},{"name":"--calcite-date-picker-header-action-background-color","description":"Specifies the background color of header action's of the component."},{"name":"--calcite-date-picker-header-action-background-color-hover","description":"Specifies the background color of header action's of the component when hovered."},{"name":"--calcite-date-picker-header-action-background-color-press","description":"Specifies the background color of header action's of the component when pressed."},{"name":"--calcite-date-picker-header-action-text-color","description":"Specifies the text color of header action's of the component."},{"name":"--calcite-date-picker-header-action-text-color-press","description":"Specifies the text color of header action's of the component when pressed."},{"name":"--calcite-date-picker-year-text-color","description":"Specifies the text color of year & suffix of the component."},{"name":"--calcite-date-picker-month-select-font-size","description":"Specifies the font size of month select of the component."},{"name":"--calcite-date-picker-month-select-text-color","description":"Specifies the text color of month select of the component."},{"name":"--calcite-date-picker-month-select-icon-color","description":"Specifies the icon color of month select of the component."},{"name":"--calcite-date-picker-month-select-icon-color-hover","description":"Specifies the icon color of month select of the component when hovered."},{"name":"--calcite-date-picker-day-background-color","description":"Specifies the background color of day of the component."},{"name":"--calcite-date-picker-day-background-color-hover","description":"Specifies the background color of day of the component when hovered."},{"name":"--calcite-date-picker-day-text-color","description":"Specifies the text color of day of the component."},{"name":"--calcite-date-picker-day-text-color-hover","description":"Specifies the text color of day of the component when hovered."},{"name":"--calcite-date-picker-current-day-text-color","description":"Specifies the text color of current day of the component."},{"name":"--calcite-date-picker-day-background-color-selected","description":"Specifies the background color of selected day of the component."},{"name":"--calcite-date-picker-day-text-color-selected","description":"Specifies the text color of selected day of the component."},{"name":"--calcite-date-picker-day-range-text-color","description":"Specifies the text color of select day range of the component."},{"name":"--calcite-date-picker-day-range-background-color","description":"Specifies the background color of select day range of the component."},{"name":"--calcite-date-picker-day-outside-range-background-color-hover","description":"Specifies the background color of day's outside current range when hovered."},{"name":"--calcite-date-picker-day-outside-range-text-color-hover","description":"Specifies the text color of day's outside current range when hovered."},{"name":"--calcite-dialog-scrim-background-color","description":"Specifies the background color of the component's scrim."},{"name":"--calcite-dialog-size-x","description":"Specifies the width of the component, using `px`, `em`, `rem`, `vw`, or `%`. Does not exceed the viewport's width - applies when `placement=\"cover\"` is set."},{"name":"--calcite-dialog-min-size-x","description":"Specifies the minimum width of the component, using `px`, `em`, `rem`, `vw`, or `%`."},{"name":"--calcite-dialog-max-size-x","description":"Specifies the maximum width of the component, using `px`, `em`, `rem`, `vw`, or `%`."},{"name":"--calcite-dialog-size-y","description":"Specifies the height of the component, using `px`, `em`, `rem`, `vh`, or `%`. Does not exceed the viewport's height - applies when `placement=\"cover\"` is set."},{"name":"--calcite-dialog-min-size-y","description":"Specifies the minimum height of the component, using `px`, `em`, `rem`, `vh`, or `%`."},{"name":"--calcite-dialog-max-size-y","description":"Specifies the maximum height of the component, using `px`, `em`, `rem`, `vh`, or `%`."},{"name":"--calcite-dialog-content-space","description":"Specifies the padding of the component's content."},{"name":"--calcite-dialog-footer-space","description":"Specifies the padding of the component's footer."},{"name":"--calcite-dialog-border-color","description":"Specifies the component's border color."},{"name":"--calcite-dialog-offset-x","description":"Specifies the horizontal offset of the component."},{"name":"--calcite-dialog-offset-y","description":"Specifies the vertical offset of the component."},{"name":"--calcite-dialog-background-color","description":"Specifies the background color of the component."},{"name":"--calcite-dialog-icon-color","description":"Specifies the color of the component's icon."},{"name":"--calcite-dialog-accent-color","description":"Specifies the component's accent color when `kind` is specified."},{"name":"--calcite-dialog-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-dialog-heading-text-color","description":"Specifies the text color of the component's `heading`."},{"name":"--calcite-dialog-description-text-color","description":"Specifies the text color of the component's `description`."},{"name":"--calcite-dialog-header-background-color","description":"Specifies the background color of the component's header."},{"name":"--calcite-dialog-header-action-background-color","description":"Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions`."},{"name":"--calcite-dialog-header-action-background-color-hover","description":"Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when hovered."},{"name":"--calcite-dialog-header-action-background-color-press","description":"Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed."},{"name":"--calcite-dialog-header-action-text-color","description":"Specifies the text color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions`."},{"name":"--calcite-dialog-header-action-text-color-press","description":"Specifies the text color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed or hovered."},{"name":"--calcite-dialog-footer-background-color","description":"Specifies the background color of the component's footer."},{"name":"--calcite-dialog-space","description":"Specifies the padding of the component's `\"unnamed (default)\"` slot."},{"name":"--calcite-dialog-header-content-space","description":"Specifies the padding of the `\"header-content\"` slot."},{"name":"--calcite-dialog-action-menu-border-color","description":"Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s."},{"name":"--calcite-dropdown-width","description":"Specifies the width of the component's wrapper."},{"name":"--calcite-dropdown-background-color","description":"Specifies the component's background color."},{"name":"--calcite-dropdown-group-border-color","description":"Specifies the `calcite-dropdown`'s border color."},{"name":"--calcite-dropdown-group-title-text-color","description":"Specifies the component's `groupTitle` color."},{"name":"--calcite-dropdown-item-background-color-hover","description":"Specifies the item's background color when hovered."},{"name":"--calcite-dropdown-item-background-color-press","description":"Specifies the item's background color when selected or active."},{"name":"--calcite-dropdown-item-icon-color-hover","description":"[Deprecated] Specifies the item's icon selection color when hovered."},{"name":"--calcite-dropdown-item-icon-color-press","description":"Specifies the item's icon selection color when selected or active."},{"name":"--calcite-dropdown-item-text-color-press","description":"Specifies the item's text when selected or active."},{"name":"--calcite-dropdown-item-text-color","description":"Specifies the item's text color."},{"name":"--calcite-fab-background-color","description":"Specifies the component's background color."},{"name":"--calcite-fab-border-color","description":"Specifies the component's border color."},{"name":"--calcite-fab-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-fab-text-color","description":"Specifies the component's text color."},{"name":"--calcite-fab-loader-color","description":"Specifies the component's loader color."},{"name":"--calcite-fab-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-filter-content-space","description":"Specifies the padding of the component's content."},{"name":"--calcite-filter-input-background-color","description":"Specifies the input's background color."},{"name":"--calcite-filter-input-border-color","description":"Specifies the input's border color."},{"name":"--calcite-filter-input-corner-radius","description":"Specifies the input's corner radius."},{"name":"--calcite-filter-input-shadow","description":"Specifies the shadow around the input."},{"name":"--calcite-filter-input-icon-color","description":"Specifies the input's icon color."},{"name":"--calcite-filter-input-text-color","description":"Specifies the input's text color."},{"name":"--calcite-filter-input-placeholder-text-color","description":"Specifies the input's placeholder text color."},{"name":"--calcite-filter-input-actions-background-color","description":"Specifies the background color of the input's `clearable` element."},{"name":"--calcite-filter-input-actions-background-color-hover","description":"Specifies the background color of the input's `clearable` element when hovered."},{"name":"--calcite-filter-input-actions-background-color-press","description":"Specifies the background color of the input's `clearable` element when pressed."},{"name":"--calcite-filter-input-actions-icon-color","description":"Specifies the icon color of the input's `clearable` element."},{"name":"--calcite-filter-input-actions-icon-color-hover","description":"Specifies the icon color of the input's `clearable` element when hovered."},{"name":"--calcite-filter-input-actions-icon-color-press","description":"Specifies the icon color of the input's `clearable` element when pressed."},{"name":"--calcite-flow-background-color","description":"Specifies the component's background color."},{"name":"--calcite-flow-item-footer-padding","description":"[Deprecated] Use `--calcite-flow-footer-space` instead. Specifies the padding of the component's footer."},{"name":"--calcite-flow-item-header-border-block-end","description":"[Deprecated] Use `--calcite-flow-border-color` instead. Specifies the component header's block end border."},{"name":"--calcite-flow-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-flow-heading-text-color","description":"Specifies the text color of the component's `heading`."},{"name":"--calcite-flow-icon-color","description":"Specifies the color of the component's icon."},{"name":"--calcite-flow-description-text-color","description":"Specifies the text color of the component's `description`."},{"name":"--calcite-flow-border-color","description":"Specifies the component's border color."},{"name":"--calcite-flow-background-color","description":"Specifies the component's background color."},{"name":"--calcite-flow-header-background-color","description":"Specifies the background color of the component's header."},{"name":"--calcite-flow-footer-background-color","description":"Specifies the background color of the component's footer."},{"name":"--calcite-flow-space","description":"Specifies the padding of the component's `\"unnamed (default)\"` slot."},{"name":"--calcite-flow-header-content-space","description":"Specifies the padding of the `\"header-content\"` slot."},{"name":"--calcite-flow-footer-space","description":"Specifies the padding of the component's footer."},{"name":"--calcite-action-background-color","description":"Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s."},{"name":"--calcite-action-background-color-hover","description":"Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s."},{"name":"--calcite-action-background-color-pressed","description":"Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s."},{"name":"--calcite-action-text-color-hover","description":"Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s."},{"name":"--calcite-action-text-color-pressed","description":"Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s."},{"name":"--calcite-popover-border-color","description":"Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s."},{"name":"--calcite-flow-header-action-background-color-hover","description":"Specifies the background color of the component's `calcite-action` items  in the flow item header when hovered."},{"name":"--calcite-flow-header-action-background-color-press","description":"Specifies the background color of the component's `calcite-action` items  in the flow item header when pressed."},{"name":"--calcite-flow-header-action-background-color","description":"Specifies the background color of the component's `calcite-action` items  in the flow item header."},{"name":"--calcite-flow-header-action-indicator-color","description":"Specifies the color of the component's `calcite-action` items' indicator in the flow item header."},{"name":"--calcite-flow-header-action-text-color-press","description":"Specifies the text color of the component's `calcite-action` items in the flow item header when pressed."},{"name":"--calcite-flow-header-action-text-color","description":"Specifies the text color of the component's `calcite-action` items in the flow item header."},{"name":"--calcite-graph-highlight-fill-color","description":"Specifies the fill color of the `highlight` element, when present."},{"name":"--calcite-handle-background-color","description":"Specifies the component's background color."},{"name":"--calcite-handle-background-color-hover","description":"Specifies the component's background color on hover."},{"name":"--calcite-handle-background-color-selected","description":"Specifies the component's background color when selected."},{"name":"--calcite-handle-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-handle-icon-color-hover","description":"Specifies the component's icon color on hover."},{"name":"--calcite-handle-icon-color-selected","description":"Specifies the component's icon color when selected."},{"name":"--calcite-ui-icon-color","description":"[Deprecated] Use `--calcite-icon-color`. Specifies the component's color. Defaults to current color."},{"name":"--calcite-icon-color","description":"Specifies the component's color. Defaults to current color."},{"name":"--calcite-inline-editable-background-color-hover","description":"Specifies the component's background color when hovered."},{"name":"--calcite-inline-editable-background-color","description":"Specifies the component's background color."},{"name":"--calcite-inline-editable-button-background-color","description":"Specifies the button element's background color when appearance=\"solid\" or appearance=\"outline-fill\"."},{"name":"--calcite-inline-editable-button-corner-radius","description":"Specifies the button element's corner radius."},{"name":"--calcite-inline-editable-button-loader-color","description":"Specifies the button element's loader color."},{"name":"--calcite-inline-editable-button-text-color","description":"Specifies the button element's text color."},{"name":"--calcite-input-prefix-size","description":"Specifies the component's prefix width, when present."},{"name":"--calcite-input-suffix-size","description":"Specifies the component's suffix width, when present."},{"name":"--calcite-input-background-color","description":"Specifies the component's background color."},{"name":"--calcite-input-border-color","description":"Specifies the component's border color."},{"name":"--calcite-input-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-input-shadow","description":"Specifies the shadow around the component."},{"name":"--calcite-input-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-input-text-color","description":"Specifies the component's text color."},{"name":"--calcite-input-placeholder-text-color","description":"Specifies the component's placeholder text color."},{"name":"--calcite-input-actions-background-color","description":"Specifies the background color of the component's `clearable` and `number-button-type` elements."},{"name":"--calcite-input-actions-background-color-hover","description":"Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered."},{"name":"--calcite-input-actions-background-color-press","description":"Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed."},{"name":"--calcite-input-actions-icon-color","description":"Specifies the icon color of the component's `clearable` and `number-button-type` elements."},{"name":"--calcite-input-actions-icon-color-hover","description":"Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered."},{"name":"--calcite-input-actions-icon-color-press","description":"Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed."},{"name":"--calcite-input-loading-background-color","description":"Specifies the background color of the `loading` element, when present."},{"name":"--calcite-input-loading-fill-color","description":"Specifies the fill color of the `loading` element, when present."},{"name":"--calcite-input-prefix-text-color","description":"Specifies the component's prefix text color, when present."},{"name":"--calcite-input-suffix-text-color","description":"Specifies the component's suffix text color, when present."},{"name":"--calcite-input-date-picker-actions-icon-color","description":"Specifies the component's actions icon color."},{"name":"--calcite-input-date-picker-actions-icon-color-hover","description":"Specifies the component's actions icon color on hover."},{"name":"--calcite-input-date-picker-background-color","description":"Specifies the component's input background color."},{"name":"--calcite-input-date-picker-border-color","description":"Specifies the component's input border color."},{"name":"--calcite-input-date-picker-calendar-actions-background-color","description":"Specifies the background color of actions of the calendar."},{"name":"--calcite-input-date-picker-calendar-actions-background-color-hover","description":"Specifies the background color of actions of the calendar when hovered."},{"name":"--calcite-input-date-picker-calendar-actions-background-color-press","description":"Specifies the background color of actions of the calendar when pressed."},{"name":"--calcite-input-date-picker-calendar-actions-text-color","description":"Specifies the text color of the component's calendar actions."},{"name":"--calcite-input-date-picker-calendar-actions-text-color-press","description":"Specifies the text color of the component's calendar actions when pressed."},{"name":"--calcite-input-date-picker-calendar-border-color","description":"Specifies the component's calendar border color."},{"name":"--calcite-input-date-picker-calendar-corner-radius","description":"Specifies the component's calendar corner radius."},{"name":"--calcite-input-date-picker-calendar-current-day-text-color","description":"Specifies the text color of current day of the component's date-picker."},{"name":"--calcite-input-date-picker-calendar-day-background-color","description":"Specifies the background color of day of the calendar."},{"name":"--calcite-input-date-picker-calendar-day-background-color-hover","description":"Specifies the background color of day of the calendar when hovered."},{"name":"--calcite-input-date-picker-calendar-day-current-text-color","description":"[Deprecated] Use `--calcite-input-date-picker-calendar-current-day-text-color`. Specifies the text color of current day of the component's date-picker."},{"name":"--calcite-input-date-picker-calendar-day-range-text-color","description":"Specifies the text color of select day range of the component's date-picker."},{"name":"--calcite-input-date-picker-calendar-day-text-color-selected","description":"Specifies the text color of selected day of the component's date-picker."},{"name":"--calcite-input-date-picker-calendar-day-outside-range-background-color-hover","description":"Specifies the background color of day's outside current range of the component's date-picker when hovered."},{"name":"--calcite-input-date-picker-calendar-day-outside-range-text-color-hover","description":"Specifies the text color of day's outside current range of the component's date-picker when hovered."},{"name":"--calcite-input-date-picker-calendar-day-text-color","description":"Specifies the text color of day of the component's date-picker."},{"name":"--calcite-input-date-picker-calendar-day-text-color-hover","description":"Specifies the text color of day of the component's date-picker when hovered."},{"name":"--calcite-input-date-picker-calendar-selected-background-color","description":"Specifies the background color of selected day and day range of the calendar."},{"name":"--calcite-input-date-picker-calendar-shadow","description":"the component's calendar shadow."},{"name":"--calcite-input-date-picker-calendar-icon-color","description":"Specifies the component's calendar icon color."},{"name":"--calcite-input-date-picker-calendar-icon-color-hover","description":"Specifies the component's calendar icon color."},{"name":"--calcite-input-date-picker-calendar-month-select-text-color","description":"Specifies the text color of month select of the component's date-picker."},{"name":"--calcite-input-date-picker-calendar-range-divider-color","description":"Specifies the divider color between the component's date-picker."},{"name":"--calcite-input-date-picker-calendar-text-color","description":"Specifies the text color of the component's calendar week, year & suffix."},{"name":"--calcite-input-date-picker-corner-radius","description":"Specifies the component's input corner radius."},{"name":"--calcite-input-date-picker-divider-color","description":"Specifies the component's divider color between two inputs when in range mode."},{"name":"--calcite-input-date-picker-icon-color","description":"Specifies the component's in-field input icon color."},{"name":"--calcite-input-date-picker-placeholder-text-color","description":"Specifies the component's input placeholder text color."},{"name":"--calcite-input-date-picker-shadow","description":"Specifies the component's input shadow."},{"name":"--calcite-input-date-picker-text-color","description":"Specifies the component's input text color."},{"name":"--calcite-input-message-spacing-value","description":"[Deprecated] Use `--calcite-input-message-spacing`. Specifies the margin spacing at the top of the component."},{"name":"--calcite-input-message-spacing","description":"Specifies the margin spacing at the top of the component."},{"name":"--calcite-input-message-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-input-actions-background-color","description":"Specifies the background color of the component's `clearable` and `number-button-type` elements."},{"name":"--calcite-input-actions-background-color-hover","description":"Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered."},{"name":"--calcite-input-actions-background-color-press","description":"Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed."},{"name":"--calcite-input-actions-icon-color","description":"Specifies the icon color of the component's `clearable` and `number-button-type` elements."},{"name":"--calcite-input-actions-icon-color-hover","description":"Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered."},{"name":"--calcite-input-actions-icon-color-press","description":"Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed."},{"name":"--calcite-input-loading-background-color","description":"Specifies the background color of the `loading` element."},{"name":"--calcite-input-loading-fill-color","description":"Specifies the fill color of the `loading` element."},{"name":"--calcite-input-number-background-color","description":"Specifies the background color of the component."},{"name":"--calcite-input-number-border-color","description":"Specifies the border color of the component."},{"name":"--calcite-input-number-corner-radius","description":"Specifies the border radius of the component."},{"name":"--calcite-input-number-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-input-number-height","description":"Specifies the height of the component."},{"name":"--calcite-input-number-placeholder-text-color","description":"Specifies the text color of the placeholder in the component."},{"name":"--calcite-input-number-text-color","description":"Specifies the text color of the component."},{"name":"--calcite-input-number-text-color-focus","description":"Specifies the text color of the component when focused."},{"name":"--calcite-input-prefix-size","description":"Specifies the width of the prefix element."},{"name":"--calcite-input-prefix-text-color","description":"Specifies the text color of the prefix element."},{"name":"--calcite-input-suffix-size","description":"Specifies the width of the suffix element."},{"name":"--calcite-input-suffix-text-color","description":"Specifies the text color of the suffix element."},{"name":"--calcite-input-action-background-color","description":"Specifies the background color of the component's `clearable` element."},{"name":"--calcite-input-action-background-color-hover","description":"Specifies the background color of the component's `clearable` element when hovered."},{"name":"--calcite-input-action-background-color-press","description":"Specifies the background color of the component's `clearable` element when pressed."},{"name":"--calcite-input-action-icon-color","description":"Specifies the icon color of the component's `clearable` & icon elements."},{"name":"--calcite-input-action-icon-color-hover","description":"Specifies the icon color of the component's `clearable` & icon elements when hovered."},{"name":"--calcite-input-action-icon-color-press","description":"Specifies the icon color of the component's `clearable` & icon elements when pressed."},{"name":"--calcite-input-loading-background-color","description":"Specifies the background color of the `loading` element."},{"name":"--calcite-input-loading-fill-color","description":"Specifies the fill color of the `loading` element."},{"name":"--calcite-input-prefix-size-x","description":"When `prefixText` is provided, specifies the width of the component's prefix element."},{"name":"--calcite-input-prefix-text-color","description":"When `prefixText` is provided, specifies the text color of the component's prefix element."},{"name":"--calcite-input-suffix-size-x","description":"When `suffixText` is provided, specifies the width of the component's suffix element."},{"name":"--calcite-input-suffix-text-color","description":"When `suffixText` is provided, specifies the color of the component's suffix element."},{"name":"--calcite-input-text-background-color","description":"Specifies the component's background color."},{"name":"--calcite-input-text-border-color","description":"Specifies the component's border color."},{"name":"--calcite-input-text-corner-radius","description":"Specifies the component's border radius."},{"name":"--calcite-input-text-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-input-text-placeholder-text-color","description":"Specifies the component's `placeholder` text color."},{"name":"--calcite-input-text-text-color","description":"Specifies the component's text color."},{"name":"--calcite-input-text-text-color-focus","description":"Specifies the component's text color when focused."},{"name":"--calcite-input-time-picker-background-color","description":"Specifies the component's background color."},{"name":"--calcite-input-time-picker-border-color","description":"Specifies the component's border color."},{"name":"--calcite-input-time-picker-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-input-time-picker-icon-color-hover","description":"Specifies the component's icon color when hovered."},{"name":"--calcite-input-time-picker-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-input-time-picker-corner-radius","description":"Specifies the component's border radius."},{"name":"--calcite-input-time-picker-input-background-color","description":"Specifies the component's input background color."},{"name":"--calcite-input-time-picker-input-text-color","description":"Specifies the component's input text color."},{"name":"--calcite-input-time-picker-input-shadow","description":"Specifies the component's input shadow."},{"name":"--calcite-input-time-picker-input-corner-radius","description":"Specifies the component's input border radius."},{"name":"--calcite-input-time-picker-input-border-color","description":"Specifies the component's input border color."},{"name":"--calcite-input-time-picker-digit-text-color","description":"Specifies the component's digit text color."},{"name":"--calcite-input-time-picker-digit-icon-color","description":"Specifies the component's digit icon color."},{"name":"--calcite-input-time-picker-digit-border-color-press","description":"Specifies the component's digit border color when pressed."},{"name":"--calcite-input-time-picker-digit-border-color-hover","description":"Specifies the component's digit border color when hovered."},{"name":"--calcite-input-time-picker-action-background-color-hover","description":"Specifies the background color of the component's actions when hovered or focused."},{"name":"--calcite-input-time-picker-action-background-color-press","description":"Specifies the background color of the component's actions when active."},{"name":"--calcite-label-margin-bottom","description":"Specifies the component's bottom spacing."},{"name":"--calcite-label-text-color","description":"Specifies the component's text color."},{"name":"--calcite-link-text-color","description":"Specifies the component's text color."},{"name":"--calcite-list-background-color","description":"Specifies the component's background color."},{"name":"--calcite-list-background-color-hover","description":"Specifies the component's background color when hovered."},{"name":"--calcite-list-background-color-press","description":"Specifies the component's background color when pressed."},{"name":"--calcite-list-background-color","description":"Specifies the component's background color."},{"name":"--calcite-list-border-color","description":"Specifies the component's border color."},{"name":"--calcite-list-content-text-color","description":"Specifies the content color."},{"name":"--calcite-list-description-text-color","description":"Specifies the `description` color."},{"name":"--calcite-list-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-list-label-text-color","description":"Specifies the `label` color."},{"name":"--calcite-list-selection-border-color","description":"Specifies the component's selection border color."},{"name":"--calcite-list-background-color","description":"Specifies the component's background color."},{"name":"--calcite-list-color","description":"Specifies the component's color."},{"name":"--calcite-loader-font-size","description":"When `type` is not `\"indeterminate\"` or `inline`, specifies the font size of the loading percentage."},{"name":"--calcite-loader-size","description":"Specifies the component's width and height."},{"name":"--calcite-loader-size-inline","description":"[Deprecated] Use `--calcite-loader-size`. Specifies the width and height of the component when set to inline."},{"name":"--calcite-loader-spacing","description":"Specifies the the component's padding."},{"name":"--calcite-loader-progress-color-inline","description":"When `inline`, specifies the component's progress ring color."},{"name":"--calcite-loader-text-spacing","description":"When not `inline`, specifies the component's `text` margin."},{"name":"--calcite-loader-text-weight","description":"When not `inline` and `text` is provided, specifies the component's `text` font weight."},{"name":"--calcite-loader-text-color","description":"When not `inline` and `text` is provided, specifies the component's `text` color."},{"name":"--calcite-loader-progress-color","description":"When not `inline`, specifies the component's progress ring color."},{"name":"--calcite-loader-track-color","description":"Specifies the component's track color."},{"name":"--calcite-menu-item-accent-color","description":"When `active`, specifies the component's border color."},{"name":"--calcite-menu-background-color","description":"Specifies the component's background color."},{"name":"--calcite-menu-item-sub-menu-border-color","description":"Specifies the submenu's border color."},{"name":"--calcite-menu-item-sub-menu-corner-radius","description":"Specifies the submenu's border radius."},{"name":"--calcite-menu-text-color","description":"Specifies the component's text color."},{"name":"--calcite-meter-background-color","description":"Specifies the background color of the component."},{"name":"--calcite-meter-border-color","description":"Specifies the border color of the component and displayed step lines."},{"name":"--calcite-meter-shadow","description":"Specifies the box shadow of the component."},{"name":"--calcite-meter-corner-radius","description":"Specifies the corner radius of the component."},{"name":"--calcite-meter-fill-color","description":"Specifies the color of the component's fill."},{"name":"--calcite-meter-range-text-color","description":"Specifies the color of the component's range labels."},{"name":"--calcite-meter-value-text-color","description":"Specifies the color of the component's value label."},{"name":"--calcite-navigation-width","description":"Specifies the width of the component's content area."},{"name":"--calcite-navigation-background","description":"[Deprecated] Use `--calcite-navigation-background-color`. Specifies the background color of the component."},{"name":"--calcite-navigation-background-color","description":"Specifies the component's background color."},{"name":"--calcite-navigation-border-color","description":"Specifies the component's border color."},{"name":"--calcite-navigation-accent-color","description":"When `active`, specifies the component's border color."},{"name":"--calcite-navigation-background-color","description":"Specifies the component's background color."},{"name":"--calcite-navigation-logo-heading-text-color","description":"Specifies the component's `heading` text color."},{"name":"--calcite-navigation-logo-text-color","description":"Specifies the component's `description` text color."},{"name":"--calcite-navigation-accent-color","description":"When `active`, specifies the components's border color."},{"name":"--calcite-navigation-user-avatar-corner-radius","description":"Specifies the component's avatar corner radius."},{"name":"--calcite-navigation-user-avatar-color","description":"Specifies the component's avatar icon color."},{"name":"--calcite-navigation-background-color","description":"Specifies the component's background color."},{"name":"--calcite-navigation-user-full-name-text-color","description":"Specifies the component's `fullName` text color."},{"name":"--calcite-navigation-user-name-text-color","description":"Specifies the component's `username` text color."},{"name":"--calcite-notice-background-color","description":"When `appearance=\"outline-fill\"`, specifies the component's background color."},{"name":"--calcite-notice-border-color","description":"When `appearance=\"outline-fill\"`, specifies the component's border color."},{"name":"--calcite-notice-corner-radius","description":"Specifies the component's border radius."},{"name":"--calcite-notice-close-background-color","description":"Specifies the background color of the component's close element."},{"name":"--calcite-notice-close-background-color-hover","description":"Specifies the background color of the component's close element when hovered."},{"name":"--calcite-notice-close-background-color-focus","description":"[Deprecated] Specifies the background color of the component's close element when hovered. Use `--calcite-notice-close-background-color-hover` instead."},{"name":"--calcite-notice-close-background-color-press","description":"Specifies the background color of the component's close element when active."},{"name":"--calcite-notice-close-icon-color-hover","description":"Specifies the icon color of the component's close element when hovered or active."},{"name":"--calcite-notice-close-icon-color","description":"Specifies the icon color of the component's close element."},{"name":"--calcite-notice-title-text-color","description":"Specifies the component's slotted `\"title\"` content text color."},{"name":"--calcite-notice-content-text-color","description":"Specifies the component's slotted `\"message\"` content text color."},{"name":"--calcite-notice-width","description":"[Deprecated] Specifies the component's width."},{"name":"--calcite-notice-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-pagination-color","description":"Specifies the component's item color."},{"name":"--calcite-pagination-color-hover","description":"Specifies the component's item color when hovered or selected."},{"name":"--calcite-pagination-color-border-hover","description":"Specifies the component's item bottom border color when hovered."},{"name":"--calcite-pagination-color-border-active","description":"Specifies the component's item bottom border color when selected."},{"name":"--calcite-pagination-background-color","description":"Specifies the component's item background color when active."},{"name":"--calcite-pagination-icon-color-background-hover","description":"Specifies the component's chevron item background color when hovered."},{"name":"--calcite-panel-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-panel-heading-text-color","description":"Specifies the text color of the component's `heading`."},{"name":"--calcite-panel-icon-color","description":"Specifies the color of the component's icon."},{"name":"--calcite-panel-description-text-color","description":"Specifies the text color of the component's `description`."},{"name":"--calcite-panel-border-color","description":"Specifies the component's border color."},{"name":"--calcite-panel-background-color","description":"Specifies the component's background color."},{"name":"--calcite-panel-header-background-color","description":"Specifies the background color of the component's header."},{"name":"--calcite-panel-header-action-background-color","description":"Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions`."},{"name":"--calcite-panel-header-action-background-color-hover","description":"Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when hovered."},{"name":"--calcite-panel-header-action-background-color-press","description":"Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed."},{"name":"--calcite-panel-header-action-text-color","description":"Specifies the text color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions`."},{"name":"--calcite-panel-header-action-text-color-press","description":"Specifies the text color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed or hovered."},{"name":"--calcite-panel-footer-background-color","description":"Specifies the background color of the component's footer."},{"name":"--calcite-panel-space","description":"Specifies the padding of the component's `\"unnamed (default)\"` slot."},{"name":"--calcite-panel-header-content-space","description":"Specifies the padding of the `\"header-content\"` slot."},{"name":"--calcite-panel-footer-space","description":"Specifies the padding of the component's footer."},{"name":"--calcite-popover-border-color","description":"Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s."},{"name":"--calcite-panel-content-space","description":"[Deprecated] Use `--calcite-panel-space` instead. Specifies the padding of the component's content."},{"name":"--calcite-panel-footer-padding","description":"[Deprecated] Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer."},{"name":"--calcite-panel-header-border-block-end","description":"[Deprecated] Use `--calcite-panel-border-color` instead. Specifies the component header's block end border."},{"name":"--calcite-popover-background-color","description":"Specifies the component's background color."},{"name":"--calcite-popover-border-color","description":"Specifies the component's border color."},{"name":"--calcite-popover-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-popover-max-size-x","description":"Specifies the component's maximum width."},{"name":"--calcite-popover-text-color","description":"Specifies the component's text color."},{"name":"--calcite-progress-background-color","description":"Specifies the component's background color."},{"name":"--calcite-progress-fill-color","description":"Specifies the component's fill color."},{"name":"--calcite-progress-text-color","description":"Specifies the component's text color."},{"name":"--calcite-radio-button-background-color","description":"Specifies the component's background color."},{"name":"--calcite-radio-button-border-color","description":"Specifies the component's border color."},{"name":"--calcite-radio-button-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-radio-button-size","description":"Specifies the component's size."},{"name":"--calcite-radio-button-group-gap","description":"Specifies the space between slotted components in the component."},{"name":"--calcite-radio-button-input-message-spacing","description":"Specifies the margin spacing at the top of the `calcite-input-message`."},{"name":"--calcite-rating-spacing","description":"Specifies the amount of left and right margin spacing between each item."},{"name":"--calcite-rating-color-hover","description":"Specifies the component's item color when hovered."},{"name":"--calcite-rating-color-press","description":"Specifies the component's item color when active."},{"name":"--calcite-rating-color","description":"Specifies the component's item color."},{"name":"--calcite-rating-average-color","description":"When `average` is set, specifies the component's item color."},{"name":"--calcite-rating-average-text-color","description":"When `average` is set, specifies the component's `average` text color."},{"name":"--calcite-rating-count-text-color","description":"Specifies the component's text color for `count`."},{"name":"--calcite-scrim-background","description":"Specifies the component's background color."},{"name":"--calcite-segmented-control-border-color","description":"Specifies the component's border color."},{"name":"--calcite-segmented-control-color","description":"Specifies the component's color."},{"name":"--calcite-segmented-control-background-color","description":"Specifies the component's background color."},{"name":"--calcite-segmented-control-border-color","description":"Specifies the component's border color."},{"name":"--calcite-segmented-control-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-segmented-control-icon-color","description":"Specifies the icons's color."},{"name":"--calcite-select-font-size","description":"Specifies the font size of `calcite-option`s in the component."},{"name":"--calcite-select-text-color","description":"Specifies the text color of `calcite-option`s in the component."},{"name":"--calcite-select-border-color","description":"Specifies the component's border color."},{"name":"--calcite-select-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-select-icon-color-hover","description":"Specifies the component's icon color when hovered or active."},{"name":"--calcite-select-background-color","description":"Specifies the component's background color."},{"name":"--calcite-select-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-select-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-sheet-background-color","description":"Specifies the component's background color."},{"name":"--calcite-sheet-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-sheet-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-sheet-text-color","description":"Specifies the component's text color."},{"name":"--calcite-sheet-resize-background-color","description":"Specifies the resize handle's background color."},{"name":"--calcite-sheet-resize-icon-color","description":"Specifies the resize handle's text color."},{"name":"--calcite-sheet-scrim-background","description":"Specifies the background color of the component's scrim."},{"name":"--calcite-sheet-width","description":"When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the component's width."},{"name":"--calcite-sheet-max-width","description":"When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the component's maximum width."},{"name":"--calcite-sheet-min-width","description":"When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the component's minimum width."},{"name":"--calcite-sheet-height","description":"When `position` is `\"block-start\"` or `\"block-end\"`, specifies the component's height."},{"name":"--calcite-sheet-max-height","description":"When `position` is `\"block-start\"` or `\"block-end\"`, specifies the component's maximum height."},{"name":"--calcite-sheet-min-height","description":"When `position` is `\"block-start\"` or `\"block-end\"`, specifies the component's minimum height."},{"name":"--calcite-shell-border-color","description":"Specifies the component's border color."},{"name":"--calcite-shell-panel-background-color","description":"Specifies the component's background color."},{"name":"--calcite-shell-panel-border-color","description":"When `displayMode` is `\"float-all\"`, specifies the component's border color."},{"name":"--calcite-shell-panel-corner-radius","description":"When `displayMode` is `\"float-all\"`, specifies the component's corner radius."},{"name":"--calcite-shell-panel-height","description":"When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float` or `float-all`, specifies the component's height."},{"name":"--calcite-shell-panel-max-height","description":"When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the component's maximum height."},{"name":"--calcite-shell-panel-min-height","description":"When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the component's minimum height."},{"name":"--calcite-shell-panel-max-width","description":"Specifies the component's maximum width."},{"name":"--calcite-shell-panel-resize-icon-color","description":"Specifies the resize handle's text color."},{"name":"--calcite-shell-panel-shadow","description":"When `displayMode` is `\"float-all\"`, specifies the component's shadow."},{"name":"--calcite-shell-panel-text-color","description":"Specifies the component's text color."},{"name":"--calcite-shell-panel-width","description":"Specifies the component's width."},{"name":"--calcite-shell-panel-z-index","description":"Specifies the component's z-index value."},{"name":"--calcite-slider-text-color","description":"Specifies the component's text color."},{"name":"--calcite-slider-track-color","description":"Specifies the component's track color."},{"name":"--calcite-slider-track-fill-color","description":"Specifies the component's track fill color."},{"name":"--calcite-slider-handle-fill-color","description":"Specifies the component's handle fill color."},{"name":"--calcite-slider-handle-extension-color","description":"Specifies the component's handle extension color."},{"name":"--calcite-slider-accent-color","description":"Specifies the component's accent color."},{"name":"--calcite-slider-tick-color","description":"Specifies the component's tick color."},{"name":"--calcite-slider-tick-border-color","description":"Specifies the component's tick border color."},{"name":"--calcite-slider-tick-selected-color","description":"Specifies the component's tick color when in selected range."},{"name":"--calcite-slider-graph-color","description":"Specifies the component's graph color."},{"name":"--calcite-split-button-background-color","description":"Specifies the component's background color."},{"name":"--calcite-split-button-background-color-hover","description":"Specifies the component's background color when hovered."},{"name":"--calcite-split-button-background-color-focus","description":"Specifies the component's background color when focused."},{"name":"--calcite-split-button-background-color-press","description":"Specifies the component's background color when active."},{"name":"--calcite-split-button-border-color","description":"Specifies the component's border color."},{"name":"--calcite-split-button-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-split-button-icon-color","description":"Specifies the component's `iconStart` and `iconEnd` color."},{"name":"--calcite-split-button-loader-color","description":"Specifies the component's loader color."},{"name":"--calcite-split-button-text-color","description":"Specifies the component's text color."},{"name":"--calcite-split-button-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-split-button-divider-border-color","description":"Specifies the component's divider border color."},{"name":"--calcite-split-button-divider-color","description":"Specifies the component's divider color."},{"name":"--calcite-split-button-dropdown-width","description":"Specifies the width of the component's dropdown."},{"name":"--calcite-split-button-dropdown-background-color","description":"Specifies the component's dropdown background color.\n*"},{"name":"--calcite-stack-padding-inline","description":"Specifies the inline padding of the component's content."},{"name":"--calcite-stack-padding-block","description":"Specifies the block padding of the component's content."},{"name":"--calcite-stepper-bar-gap","description":"Specifies the space between items in the component."},{"name":"--calcite-stepper-bar-inactive-fill-color","description":"Specifies the fill color of items in the component."},{"name":"--calcite-stepper-bar-active-fill-color","description":"Specifies the fill color of active items in the component."},{"name":"--calcite-stepper-bar-complete-fill-color","description":"Specifies the fill color of complete items in the component."},{"name":"--calcite-stepper-bar-error-fill-color","description":"Specifies the fill color of error items in the component."},{"name":"--calcite-stepper-item-background-color-press","description":"Specifies the component's background-color when active."},{"name":"--calcite-stepper-item-header-text-color","description":"Specifies the component's header text color."},{"name":"--calcite-stepper-item-header-text-color-hover","description":"Specifies the component's header text color when hovered or focused."},{"name":"--calcite-stepper-item-selected-header-text-color","description":"Specifies the component's header text color when selected."},{"name":"--calcite-stepper-item-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-stepper-item-complete-icon-color","description":"Specifies the component's icon color when complete."},{"name":"--calcite-stepper-item-error-icon-color","description":"Specifies the component's icon and number color when in error."},{"name":"--calcite-stepper-item-selected-icon-color","description":"Specifies the component's icon and number color when selected."},{"name":"--calcite-stepper-item-description-text-color","description":"Specifies the component's description and number text color."},{"name":"--calcite-stepper-item-description-text-color-hover","description":"Specifies the component's description text color when hovered, focused or selected."},{"name":"--calcite-stepper-bar-gap","description":"Specifies the component's bottom spacing."},{"name":"--calcite-stepper-bar-fill-color","description":"Specifies the component's fill color."},{"name":"--calcite-stepper-bar-fill-color-hover","description":"Specifies the component's fill color when hovered or focused."},{"name":"--calcite-stepper-bar-complete-fill-color","description":"Specifies the component's fill color when complete."},{"name":"--calcite-stepper-bar-complete-fill-color-hover","description":"When the component is `complete`, specifies the component's fill color when hovered or focused."},{"name":"--calcite-stepper-bar-error-fill-color","description":"Specifies the component's fill color when in error."},{"name":"--calcite-stepper-bar-error-fill-color-hover","description":"When the component contains an `error`, specifies the component's fill color when hovered or focused."},{"name":"--calcite-stepper-bar-selected-fill-color","description":"Specifies the component's fill color when selected."},{"name":"--calcite-swatch-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-swatch-group-space","description":"Specifies the space between slotted elements."},{"name":"--calcite-switch-background-color","description":"Specifies the component's background color."},{"name":"--calcite-switch-background-color-hover","description":"Specifies the component's background color when hovered or pressed."},{"name":"--calcite-switch-border-color","description":"[Deprecated] No longer necessary. Specifies the component's border color."},{"name":"--calcite-switch-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-switch-handle-background-color","description":"Specifies the handle's background color."},{"name":"--calcite-switch-handle-border-color","description":"[Deprecated] No longer necessary. Specifies the handle's border color."},{"name":"--calcite-switch-handle-shadow","description":"[Deprecated] No longer necessary. Specifies the handle's shadow."},{"name":"--calcite-tab-content-space-y","description":"Specifies the vertical space between the component's content in the `default` slot."},{"name":"--calcite-tab-content-block-padding","description":"[Deprecated] Use `--calcite-tab-content-space-y` instead. Specifies the block padding of the component's content in the `default` slot."},{"name":"--calcite-tab-background-color","description":"Specifies the component's background color."},{"name":"--calcite-tab-border-color","description":"When `calcite-tabs` is `bordered`, specifies the component's border color."},{"name":"--calcite-tab-text-color","description":"Specifies the component's `iconStart`, `iconEnd`, and text color."},{"name":"--calcite-tab-text-color","description":"Specifies the component's text color."},{"name":"--calcite-tab-text-color-press","description":"Specifies the component's text color when hovered, pressed, or selected."},{"name":"--calcite-tab-border-color","description":"Specifies the component's border color."},{"name":"--calcite-tab-background-color","description":"Specifies the component's background color."},{"name":"--calcite-tab-background-color-hover","description":"When `calcite-tabs` is `bordered`, specifies the component's background color when hovered."},{"name":"--calcite-tab-accent-color-press","description":"When `selected` or active, specifies the component's accent color."},{"name":"--calcite-tab-icon-color-start","description":"Specifies the component's `iconStart` color."},{"name":"--calcite-tab-icon-color-start-press","description":"When `selected`, hovered, or pressed, specifies the component's `iconStart` color."},{"name":"--calcite-tab-icon-color-end","description":"Specifies the component's `iconEnd` color."},{"name":"--calcite-tab-icon-color-end-press","description":"When `selected`, hovered, or pressed, specifies the component's `iconEnd` color."},{"name":"--calcite-tab-close-icon-color","description":"Specifies the component's close element icon color."},{"name":"--calcite-tab-close-icon-color-press","description":"Specifies the component's close element icon color when hovered, focused, and active."},{"name":"--calcite-tab-close-icon-background-color","description":"Specifies the component's close element icon background color."},{"name":"--calcite-tab-close-icon-background-color-press","description":"Specifies the component's close element icon background color when pressed."},{"name":"--calcite-tab-close-icon-background-color-hover","description":"Specifies the component's close element icon background color when hovered."},{"name":"--calcite-table-border-color","description":"Specifies the component's border color."},{"name":"--calcite-table-corner-radius","description":"Specifies the component's border radius."},{"name":"--calcite-table-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-table-number-cell-background-color","description":"Specifies the background color of the component's `numbered` cell."},{"name":"--calcite-table-number-cell-text-color","description":"Specifies the text color of the component's `numbered` cell."},{"name":"--calcite-table-selection-cell-background-color","description":"When `selectionMode` is `\"multiple\"` or `\"single\"`, specifies the background color of cells containing selection icons."},{"name":"--calcite-table-selection-cell-background-color-selected","description":"When `selectionMode` is `\"multiple\"` or `\"single\"`, specifies the background color of cells containing selection icons on `selected` `calcite-table-row`s."},{"name":"--calcite-table-selection-cell-icon-color","description":"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`."},{"name":"--calcite-table-selection-cell-icon-color-selected","description":"When `selectionMode` is `\"multiple\"` or `\"single\"`, specifies the icon color of the component's selection icon on `selected` `calcite-table-row`s."},{"name":"--calcite-table-selection-chip-background-color","description":"When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are not `selected`, specifies the background color of the component's selection chip."},{"name":"--calcite-table-selection-chip-border-color","description":"When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are not `selected`, specifies the border color of the component's selection chip."},{"name":"--calcite-table-selection-chip-corner-radius","description":"When `selectionMode` is `\"multiple\"` or `\"single\"`, specifies the corner radius of the component's selection chip."},{"name":"--calcite-table-selection-chip-shadow","description":"When `selectionMode` is `\"multiple\"` or `\"single\"`, specifies the shadow of the component's selection chip."},{"name":"--calcite-table-selection-chip-text-color","description":"When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are not `selected`, specifies the text color of the component's selection chip."},{"name":"--calcite-table-selection-chip-background-color-selected","description":"When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection chip."},{"name":"--calcite-table-selection-chip-border-color-selected","description":"When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection chip."},{"name":"--calcite-table-selection-chip-text-color-selected","description":"When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection chip."},{"name":"--calcite-table-selection-out-of-view-chip-background-color","description":"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."},{"name":"--calcite-table-selection-out-of-view-chip-border-color","description":"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."},{"name":"--calcite-table-selection-out-of-view-chip-corner-radius","description":"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."},{"name":"--calcite-table-selection-out-of-view-chip-icon-color","description":"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."},{"name":"--calcite-table-selection-out-of-view-chip-shadow","description":"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."},{"name":"--calcite-table-selection-out-of-view-chip-text-color","description":"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."},{"name":"--calcite-table-selection-dismiss-button-background-color-active","description":"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."},{"name":"--calcite-table-selection-dismiss-button-background-color-hover","description":"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."},{"name":"--calcite-table-selection-dismiss-button-background-color","description":"When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection dismiss chip."},{"name":"--calcite-table-selection-dismiss-button-border-color-active","description":"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."},{"name":"--calcite-table-selection-dismiss-button-border-color-hover","description":"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."},{"name":"--calcite-table-selection-dismiss-button-border-color","description":"When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection dismiss chip."},{"name":"--calcite-table-selection-dismiss-button-corner-radius","description":"When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the corner radius of the component's selection dismiss chip."},{"name":"--calcite-table-selection-dismiss-button-shadow","description":"When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the shadow of the component's selection dismiss chip."},{"name":"--calcite-table-selection-dismiss-button-text-color-active","description":"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."},{"name":"--calcite-table-selection-dismiss-button-text-color-hover","description":"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."},{"name":"--calcite-table-selection-dismiss-button-text-color","description":"When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection dismiss chip."},{"name":"--calcite-table-pagination-color","description":"When `pageSize` is set, specifies the component's pagination item color."},{"name":"--calcite-table-pagination-color-hover","description":"When `pageSize` is set, specifies the component's pagination item color when hovered or selected."},{"name":"--calcite-table-pagination-color-border-hover","description":"When `pageSize` is set, specifies the component's pagination item bottom border color when hovered."},{"name":"--calcite-table-pagination-color-border-active","description":"When `pageSize` is set, specifies the component's pagination item bottom border color when selected."},{"name":"--calcite-table-pagination-background-color","description":"When `pageSize` is set, specifies the component's pagination item background color when active."},{"name":"--calcite-table-pagination-icon-color-background-hover","description":"When `pageSize` is set, specifies the component's pagination chevron item background color when hovered."},{"name":"--calcite-table-cell-background","description":"[Deprecated] Use `--calcite-table-cell-background-color` instead. Specifies the component's background color."},{"name":"--calcite-table-cell-background-color","description":"Specifies the component's background color."},{"name":"--calcite-table-cell-border-color","description":"Specifies the component's border color."},{"name":"--calcite-table-cell-text-color","description":"Specifies the component's text color."},{"name":"--calcite-table-header-background","description":"[Deprecated] Use the `--calcite-table-header-background-color` property instead. Specifies the component's background color."},{"name":"--calcite-table-header-background-color","description":"Specifies the component's background color."},{"name":"--calcite-table-header-border-color","description":"Specifies the component's border color."},{"name":"--calcite-table-header-heading-text-color","description":"Specifies the component's `heading` text color."},{"name":"--calcite-table-header-description-text-color","description":"Specifies the component's `description` text color."},{"name":"--calcite-table-row-background","description":"[Deprecated] Use `--calcite-table-row-background-color` instead. Specifies the background color of the component."},{"name":"--calcite-table-row-background-color","description":"Specifies the component's background color."},{"name":"--calcite-table-row-background-color-striped","description":"When `striped` is `true` on `calcite-table`, specifies the background color of the component's `striped` rows."},{"name":"--calcite-table-row-background-color-selected","description":"When `selected`, specifies the background color of the component's `selected` rows."},{"name":"--calcite-table-row-accent-color-selected","description":"Specifies the component's selected accent color."},{"name":"--calcite-table-row-border-color","description":"Specifies the component's border color."},{"name":"--calcite-tab-background-color","description":"Specifies the component's background color."},{"name":"--calcite-tab-border-color","description":"Specifies the component's border color."},{"name":"--calcite-text-area-background-color","description":"Specifies the component's background color."},{"name":"--calcite-text-area-border-color","description":"Specifies the component's text area border color."},{"name":"--calcite-text-area-character-limit-text-color","description":"Specifies the color of the character limit text displayed in the footer of the component."},{"name":"--calcite-text-area-divider-color","description":"Specifies the color of the divider between the text area and footer."},{"name":"--calcite-text-area-font-size","description":"Specifies the font size of the text area and footer."},{"name":"--calcite-text-area-max-height","description":"Specifies the component's text area maximum height."},{"name":"--calcite-text-area-min-height","description":"Specifies the component's text area minimum height."},{"name":"--calcite-text-area-max-width","description":"Specifies the component's text area maximum width."},{"name":"--calcite-text-area-min-width","description":"Specifies the component's text area minimum width."},{"name":"--calcite-text-area-text-color","description":"Specifies the component's text color."},{"name":"--calcite-text-area-footer-border-color","description":"Specifies the footer's border color."},{"name":"--calcite-text-area-corner-radius","description":"Specifies component's corner radius."},{"name":"--calcite-text-area-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-text-area-footer-background-color","description":"Specifies the footer's background color."},{"name":"--calcite-tile-accent-color-press","description":"When the parent `calcite-tile-group` has a `selectionMode` that is not `\"none\"`, specifies the color of the component's selection elements, such as the radio, checkbox, and border."},{"name":"--calcite-tile-background-color","description":"Specifies the component's background color."},{"name":"--calcite-tile-border-color","description":"Specifies the component's border color."},{"name":"--calcite-tile-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-tile-heading-text-color","description":"Specifies the component's `heading` text color."},{"name":"--calcite-tile-link-color","description":"When `href` is present, specifies the component's link color."},{"name":"--calcite-tile-shadow","description":"Specifies the shadow around the component."},{"name":"--calcite-tile-text-color","description":"Specifies the component's `description` and `icon` text color, but not the `heading` text color."},{"name":"--calcite-tile-link-text-color","description":"Specifies the component's link text color."},{"name":"--calcite-time-picker-background-color","description":"Specifies the component's background color."},{"name":"--calcite-time-picker-border-color","description":"Specifies the component's border color."},{"name":"--calcite-time-picker-corner-radius","description":"Specifies the component's border radius."},{"name":"--calcite-time-picker-button-background-color-hover","description":"Specifies the button's background color when hovered or focused."},{"name":"--calcite-time-picker-button-background-color-press","description":"Specifies the button's background color when active."},{"name":"--calcite-time-picker-color","description":"Specifies the component's text color."},{"name":"--calcite-time-picker-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-time-picker-input-border-color-press","description":"Specifies the input's border color when active."},{"name":"--calcite-time-picker-input-border-color-hover","description":"Specifies the input's border color when hovered."},{"name":"--calcite-tooltip-background-color","description":"Specifies the component's background color."},{"name":"--calcite-tooltip-border-color","description":"Specifies the component's border color."},{"name":"--calcite-tooltip-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-tooltip-max-size-x","description":"Specifies the component's maximum width."},{"name":"--calcite-tooltip-text-color","description":"Specifies the component's text color."},{"name":"--calcite-tree-text-color","description":"Specifies the component's text color."},{"name":"--calcite-tree-text-color-selected","description":"When 'selected', specifies the component's text color."},{"name":"--calcite-tree-selected-icon-color","description":"Specifies the component's selection icon color."}],"pseudo-elements":[]}}}
+{"$schema":"https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json","name":"@esri/calcite-components","version":"5.0.0-next.84","description-markup":"markdown","contributions":{"html":{"elements":[{"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.","default":"\"solid\"","value":{"type":["\"solid\"","\"transparent\""]}},{"name":"icon-position","description":"Specifies the position of the expand and collapse icons within `calcite-accordion-item`s","default":"\"end\"","value":{"type":["\"start\"","\"end\""]}},{"name":"icon-type","description":"Specifies the type of the icon in the header.","default":"\"chevron\"","value":{"type":["\"chevron\"","\"caret\"","\"plus-minus\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"\"multiple\"","value":{"type":["\"single\"","\"single-persist\"","\"multiple\""]}}],"slots":[{"name":"","description":"A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however `calcite-accordion-item`s can."}],"events":[],"js":{"properties":[{"name":"appearance","description":"Specifies the appearance of the component.","type":"Extract<\"solid\" | \"transparent\", Appearance>"},{"name":"iconPosition","description":"Specifies the position of the expand and collapse icons within `calcite-accordion-item`s","type":"Extract<\"start\" | \"end\", Position>"},{"name":"iconType","description":"Specifies the type of the icon in the header.","type":"Extract<\"chevron\" | \"caret\" | \"plus-minus\", IconType>"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"selectionMode","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.","type":"Extract<\"single\" | \"single-persist\" | \"multiple\", SelectionMode>"}],"events":[]}},{"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.","value":{"type":"string"}},{"name":"expanded","description":"When `true`, expands the component and its contents.","default":"false","value":{"type":"boolean"}},{"name":"heading","description":"Specifies the component's heading text.","value":{"type":"string"}},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","value":{"type":["1","2","3","4","5","6"]}},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}}],"slots":[{"name":"","description":"A slot for adding custom content, including nested `calcite-accordion-item`s."},{"name":"actions-end","description":"A slot for adding `calcite-action`s or content to the end side of the component's header."},{"name":"actions-start","description":"A slot for adding `calcite-action`s or content to the start side of the component's header."},{"name":"content-end","description":"A slot for adding non-actionable elements after the component's header text."},{"name":"content-start","description":"A slot for adding non-actionable elements before the component's header text."}],"events":[{"name":"calciteAccordionItemCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteAccordionItemExpand","type":"void","description":"Fires when the component's content area is expanded."}],"js":{"properties":[{"name":"description","description":"Specifies a description for the component.","type":"string"},{"name":"expanded","description":"When `true`, expands the component and its contents.","type":"boolean"},{"name":"heading","description":"Specifies the component's heading text.","type":"string"},{"name":"headingLevel","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","type":"HeadingLevel"},{"name":"iconEnd","description":"Specifies an icon to display at the end of the component.","type":"IconName"},{"name":"iconFlipRtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"}],"events":[{"name":"calciteAccordionItemCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteAccordionItemExpand","type":"void","description":"Fires when the component's content area is expanded."}]}},{"name":"calcite-action","description":"### Events\n- **calciteInternalActionMouseDown** - Fires when the action's button is being pressed down.\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 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 or focused. \n- **--calcite-action-background-color-press** - Specifies the component's background color when active. \n- **--calcite-action-background-color-pressed** - [Deprecated] Use --calcite-action-background-color-press. Specifies the component's background color when active. \n- **--calcite-action-background-color** - Specifies the component's background color. \n- **--calcite-action-corner-radius-end-end** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end end. \n- **--calcite-action-corner-radius-end-start** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end start. \n- **--calcite-action-corner-radius-start-end** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start end. \n- **--calcite-action-corner-radius-start-start** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start start. \n- **--calcite-action-corner-radius** - Specifies the component's corner radius. \n- **--calcite-action-indicator-color** - Specifies the component's indicator color. \n- **--calcite-action-text-color-press** - Specifies the component's text color when pressed or hovered. \n- **--calcite-action-text-color-pressed** - [Deprecated] Use --calcite-action-text-color-press. Specifies the component's text color when hovered. \n- **--calcite-action-text-color** - Specifies the component's text color. ","attributes":[{"name":"active","description":"When `true`, the component is highlighted.","default":"false","value":{"type":"boolean"}},{"name":"alignment","description":"Specifies the horizontal alignment of button elements with text content.","value":{"type":["\"start\"","\"center\"","\"end\""]}},{"name":"appearance","description":"**Deprecated**: in v5.0.0, removal target v6.0.0 - No longer necessary.. Specifies the appearance of the component.","default":"\"transparent\"","value":{"type":["\"solid\"","\"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.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"icon","description":"Specifies an icon to display.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"indicator","description":"When `true`, displays a visual indicator.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"text","description":"Specifies text that accompanies the icon.","value":{"type":"string"}},{"name":"text-enabled","description":"When `true`, indicates whether the text is displayed.","default":"false","value":{"type":"boolean"}},{"name":"type","description":"Specifies the default behavior of the component.","default":"\"button\"","value":{"type":["\"button\"","\"reset\"","\"submit\""]}}],"slots":[{"name":"","description":"A slot for adding non-interactive content, such as a `calcite-icon`."}],"events":[{"name":"calciteInternalActionMouseDown","type":"void","description":"Fires when the action's button is being pressed down."}],"js":{"properties":[{"name":"active","description":"When `true`, the component is highlighted.","type":"boolean"},{"name":"alignment","description":"Specifies the horizontal alignment of button elements with text content.","type":"Alignment"},{"name":"appearance","description":"Specifies the appearance of the component.","type":"Extract<\"solid\" | \"transparent\", Appearance>"},{"name":"aria","description":"When specified, overrides or extends ARIA properties and attributes on the component's button. Refer to the component's accessibility section for configuration considerations.","type":"Partial<Pick<AriaAttributesCamelCased, \"controlsElements\" | \"describedByElements\" | \"expanded\" | \"hasPopup\" | \"labelledByElements\" | \"ownsElements\" | \"pressed\" | \"checked\"> & Pick<LuminaJsx.HTMLAttributes, \"role\">> | undefined"},{"name":"compact","description":"When `true`, the side padding of the component is reduced.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"name":"icon","description":"Specifies an icon to display.","type":"IconName"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"indicator","description":"When `true`, displays a visual indicator.","type":"boolean"},{"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.","type":"string"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"text","description":"Specifies text that accompanies the icon.","type":"string"},{"name":"textEnabled","description":"When `true`, indicates whether the text is displayed.","type":"boolean"},{"name":"type","description":"Specifies the default behavior of the component.","type":"HTMLButtonElement[\"type\"]"}],"events":[{"name":"calciteInternalActionMouseDown","type":"void","description":"Fires when the action's button is being pressed down."}]}},{"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`.","value":{"type":"string"}},{"name":"expand-disabled","description":"When `true`, the expand-toggling behavior is disabled.","default":"false","value":{"type":"boolean"}},{"name":"expanded","description":"When `true`, expands the component and its contents.","default":"false","value":{"type":"boolean"}},{"name":"floating","description":"When `true`, the component is in a floating state.","default":"false","value":{"type":"boolean"}},{"name":"layout","description":"Specifies the layout direction of the actions.","default":"\"vertical\"","value":{"type":["\"horizontal\"","\"vertical\"","\"grid\""]}},{"name":"overflow-actions-disabled","description":"When `true`, disables automatically overflowing `calcite-action`s that won't fit into menus.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"position","description":"Specifies the position of the component depending on the element's `dir` property.","value":{"type":["\"start\"","\"end\""]}},{"name":"scale","description":"Specifies the size of the expand `calcite-action`.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"selection-appearance","description":"Specifies the selection appearance of the component","default":"\"neutral\"","value":{"type":["\"neutral\"","\"highlight\""]}},{"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding `calcite-action`s that will appear at the top of the component."},{"name":"actions-end","description":"A slot for adding `calcite-action`s that will appear at the end of the component, prior to the collapse/expand button."},{"name":"expand-tooltip","description":"A slot to set the `calcite-tooltip` for the expand toggle."}],"events":[{"name":"calciteActionBarCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteActionBarExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteActionBarToggle","type":"void","description":"Fires when the `expanded` property is toggled."}],"js":{"properties":[{"name":"actionsEndGroupLabel","description":"Specifies an accessible name for the last `calcite-action-group`.","type":"string"},{"name":"expandDisabled","description":"When `true`, the expand-toggling behavior is disabled.","type":"boolean"},{"name":"expanded","description":"When `true`, expands the component and its contents.","type":"boolean"},{"name":"floating","description":"When `true`, the component is in a floating state.","type":"boolean"},{"name":"layout","description":"Specifies the layout direction of the actions.","type":"Extract<\"horizontal\" | \"vertical\" | \"grid\", Layout>"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"overflowActionsDisabled","description":"When `true`, disables automatically overflowing `calcite-action`s that won't fit into menus.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"position","description":"Specifies the position of the component depending on the element's `dir` property.","type":"Extract<\"start\" | \"end\", Position>"},{"name":"scale","description":"Specifies the size of the expand `calcite-action`.","type":"Scale"},{"name":"selectionAppearance","description":"Specifies the selection appearance of the component","type":"Extract<\"neutral\" | \"highlight\", SelectionAppearance>"},{"name":"topLayerDisabled","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.","type":"boolean"}],"events":[{"name":"calciteActionBarCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteActionBarExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteActionBarToggle","type":"void","description":"Fires when the `expanded` property is toggled."}]}},{"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.","value":{"type":["1","2","3","4","5","6"]}},{"name":"expanded","description":"When `true`, expands the component and its contents.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"layout","description":"Indicates the layout of the component.","default":"\"vertical\"","value":{"type":["\"horizontal\"","\"vertical\"","\"grid\""]}},{"name":"menu-open","description":"When `true`, the `calcite-action-menu` is open.","default":"false","value":{"type":"boolean"}},{"name":"menu-placement","description":"Specifies the position of the action menu.","value":{"type":["\"auto\"","\"top\"","\"bottom\"","\"left\"","\"right\"","\"auto-start\"","\"auto-end\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\"","\"right-start\"","\"right-end\"","\"left-start\"","\"left-end\"","\"leading-start\"","\"leading\"","\"leading-end\"","\"trailing-end\"","\"trailing\"","\"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"scale","description":"Specifies the size of the `calcite-action-menu`.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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).","default":"\"none\"","value":{"type":["\"none\"","\"single\"","\"single-persist\"","\"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding `calcite-action`s."},{"name":"menu-actions","description":"A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`."},{"name":"menu-tooltip","description":"A slot for adding a `calcite-tooltip` for the menu."}],"events":[{"name":"calciteActionGroupCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteActionGroupExpand","type":"void","description":"Fires when the component's content area is expanded."}],"js":{"properties":[{"name":"columns","description":"Specifies the number of columns.","type":"Columns"},{"name":"expanded","description":"When `true`, expands the component and its contents.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"layout","description":"Indicates the layout of the component.","type":"Extract<\"horizontal\" | \"vertical\" | \"grid\", Layout>"},{"name":"menuFlipPlacements","description":"Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available.","type":"FlipPlacement[]"},{"name":"menuOpen","description":"When `true`, the `calcite-action-menu` is open.","type":"boolean"},{"name":"menuPlacement","description":"Specifies the position of the action menu.","type":"LogicalPlacement"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"scale","description":"Specifies the size of the `calcite-action-menu`.","type":"Scale"},{"name":"selectionMode","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).","type":"Extract<\"single\" | \"single-persist\" | \"multiple\" | \"none\", SelectionMode>"},{"name":"topLayerDisabled","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.","type":"boolean"}],"events":[{"name":"calciteActionGroupCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteActionGroupExpand","type":"void","description":"Fires when the component's content area is expanded."}]}},{"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.","default":"\"solid\"","value":{"type":["\"solid\"","\"transparent\""]}},{"name":"expanded","description":"When `true`, expands the component and its contents.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"open","description":"When `true`, the component is open.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"placement","description":"Determines where the component will be positioned relative to the `referenceElement`.","default":"\"auto\"","value":{"type":["\"auto\"","\"top\"","\"bottom\"","\"left\"","\"right\"","\"auto-start\"","\"auto-end\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\"","\"right-start\"","\"right-end\"","\"left-start\"","\"left-end\"","\"leading-start\"","\"leading\"","\"leading-end\"","\"trailing-end\"","\"trailing\"","\"trailing-start\""]}},{"name":"scale","description":"Specifies the size of the component's trigger `calcite-action`.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding `calcite-action`s."},{"name":"trigger","description":"A slot for adding a `calcite-action` to trigger opening the menu."},{"name":"tooltip","description":"A slot for adding a tooltip for the menu."}],"events":[{"name":"calciteActionMenuCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteActionMenuExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteActionMenuOpen","type":"void","description":"Fires when the `open` property is toggled."}],"js":{"properties":[{"name":"appearance","description":"Specifies the appearance of the component.","type":"Extract<\"solid\" | \"transparent\", Appearance>"},{"name":"expanded","description":"When `true`, expands the component and its contents.","type":"boolean"},{"name":"flipPlacements","description":"Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available.","type":"FlipPlacement[]"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"open","description":"When `true`, the component is open.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"placement","description":"Determines where the component will be positioned relative to the `referenceElement`.","type":"LogicalPlacement"},{"name":"scale","description":"Specifies the size of the component's trigger `calcite-action`.","type":"Scale"},{"name":"topLayerDisabled","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.","type":"boolean"}],"events":[{"name":"calciteActionMenuCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteActionMenuExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteActionMenuOpen","type":"void","description":"Fires when the `open` property is toggled."}]}},{"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`.","value":{"type":"string"}},{"name":"expand-disabled","description":"When `true`, the expand-toggling behavior is disabled.","default":"false","value":{"type":"boolean"}},{"name":"expanded","description":"When `true`, expands the component and its contents.","default":"false","value":{"type":"boolean"}},{"name":"layout","description":"Specifies the layout of the component.","default":"\"vertical\"","value":{"type":["\"horizontal\"","\"vertical\"","\"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"position","description":"Specifies the position of the component depending on the element's `dir` property.","value":{"type":["\"start\"","\"end\""]}},{"name":"scale","description":"Specifies the size of the expand `calcite-action`.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"selection-appearance","description":"Specifies the selection appearance of the component","default":"\"neutral\"","value":{"type":["\"neutral\"","\"highlight\""]}},{"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding `calcite-action`s to the component."},{"name":"expand-tooltip","description":"A slot to set the `calcite-tooltip` for the expand toggle."}],"events":[{"name":"calciteActionPadCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteActionPadExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteActionPadToggle","type":"void","description":"Fires when the `expanded` property is toggled."}],"js":{"properties":[{"name":"actionsEndGroupLabel","description":"Specifies the accessible label for the last `calcite-action-group`.","type":"string"},{"name":"expandDisabled","description":"When `true`, the expand-toggling behavior is disabled.","type":"boolean"},{"name":"expanded","description":"When `true`, expands the component and its contents.","type":"boolean"},{"name":"layout","description":"Specifies the layout of the component.","type":"Extract<\"horizontal\" | \"vertical\" | \"grid\", Layout>"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"position","description":"Specifies the position of the component depending on the element's `dir` property.","type":"Extract<\"start\" | \"end\", Position>"},{"name":"scale","description":"Specifies the size of the expand `calcite-action`.","type":"Scale"},{"name":"selectionAppearance","description":"Specifies the selection appearance of the component","type":"Extract<\"neutral\" | \"highlight\", SelectionAppearance>"},{"name":"topLayerDisabled","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.","type":"boolean"}],"events":[{"name":"calciteActionPadCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteActionPadExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteActionPadToggle","type":"void","description":"Fires when the `expanded` property is toggled."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"auto-close-duration","description":"Specifies the duration before the component automatically closes - only use with `autoClose`.","default":"\"medium\"","value":{"type":["\"medium\"","\"fast\"","\"slow\""]}},{"name":"icon","description":"When `true`, shows a default recommended icon. Alternatively,\npass a Calcite UI Icon name to display a specific icon.","value":{"type":["string","boolean"]}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"kind","description":"Specifies the kind of the component, which will apply to top border and icon.","default":"\"brand\"","value":{"type":["\"brand\"","\"danger\"","\"info\"","\"warning\"","\"success\""]}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"open","description":"When `true`, displays and positions the component.","default":"false","value":{"type":"boolean"}},{"name":"placement","description":"Specifies the placement of the component.","default":"\"bottom\"","value":{"type":["\"top\"","\"bottom\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\""]}},{"name":"queue","description":"Specifies the ordering priority of the component when opened.","default":"\"last\"","value":{"type":["\"last\"","\"next\"","\"immediate\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"title","description":"A slot for adding a title to the component."},{"name":"message","description":"A slot for adding main text to the component."},{"name":"link","description":"A slot for adding a `calcite-action` to take from the component such as: \"undo\", \"try again\", \"link to page\", etc."},{"name":"actions-end","description":"A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or fewer actions."}],"events":[{"name":"calciteAlertBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteAlertBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteAlertClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteAlertOpen","type":"void","description":"Fires when the component is open and animation is complete."}],"js":{"properties":[{"name":"autoClose","description":"When `true`, the component closes automatically. Recommended for passive, non-blocking alerts.","type":"boolean"},{"name":"autoCloseDuration","description":"Specifies the duration before the component automatically closes - only use with `autoClose`.","type":"AlertDuration"},{"name":"icon","description":"When `true`, shows a default recommended icon. Alternatively,\npass a Calcite UI Icon name to display a specific icon.","type":"IconName | boolean"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"kind","description":"Specifies the kind of the component, which will apply to top border and icon.","type":"Extract<\"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\", Kind>"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem"},{"name":"open","description":"When `true`, displays and positions the component.","type":"boolean"},{"name":"placement","description":"Specifies the placement of the component.","type":"MenuPlacement"},{"name":"queue","description":"Specifies the ordering priority of the component when opened.","type":"AlertQueue"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"topLayerDisabled","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.","type":"boolean"}],"events":[{"name":"calciteAlertBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteAlertBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteAlertClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteAlertOpen","type":"void","description":"Fires when the component is open and animation is complete."}]}},{"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.","default":"\"start\"","value":{"type":["\"start\"","\"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.","value":{"type":"string"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"icon","description":"When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.","value":{"type":["string","boolean"]}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"input-value","description":"Specifies the component's input value.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"max-length","description":"When the component resides in a form,\nspecifies the maximum length of text for the component's value.","value":{"type":"number"}},{"name":"min-length","description":"When the component resides in a form,\nspecifies the minimum length of text for the component's value.","value":{"type":"number"}},{"name":"name","description":"Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.","value":{"type":"string"}},{"name":"open","description":"When `true`, displays and positions the component.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"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.","value":{"type":"string"}},{"name":"placeholder","description":"Specifies placeholder text for the component.","value":{"type":"string"}},{"name":"placement","description":"Determines where the component will be positioned relative to the container element.","default":"\"bottom-start\"","value":{"type":["\"top\"","\"bottom\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\""]}},{"name":"prefix-text","description":"Specifies the component's prefix text.","value":{"type":"string"}},{"name":"read-only","description":"When `true`, the component's value can be read, but cannot be modified.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"suffix-text","description":"Specifies the component's suffix text.","value":{"type":"string"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"Specifies the component's value.","default":"\"\"","value":{"type":"string"}}],"slots":[{"name":"","description":"A slot for adding `calcite-autocomplete-item` elements."},{"name":"content-bottom","description":"A slot for adding content below `calcite-autocomplete-item` elements."},{"name":"content-top","description":"A slot for adding content above `calcite-autocomplete-item` elements."},{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteAutocompleteBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteAutocompleteBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteAutocompleteChange","type":"void","description":"Fires each time a new `value` is typed and committed."},{"name":"calciteAutocompleteClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteAutocompleteOpen","type":"void","description":"Fires when the component is open and animation is complete."},{"name":"calciteAutocompleteTextChange","type":"void","description":"Fires each time a new `inputValue` is typed and committed."},{"name":"calciteAutocompleteTextInput","type":"void","description":"Fires each time a new `inputValue` is typed."}],"js":{"properties":[{"name":"alignment","description":"Specifies the text alignment of the component's value.","type":"Extract<\"start\" | \"end\", Alignment>"},{"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.","type":"AutoFill"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"flipPlacements","description":"Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available.","type":"FlipPlacement[]"},{"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.","type":"string"},{"name":"icon","description":"When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.","type":"IconName | boolean"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"inputValue","description":"Specifies the component's input value.","type":"string"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"maxLength","description":"When the component resides in a form,\nspecifies the maximum length of text for the component's value.","type":"number"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"minLength","description":"When the component resides in a form,\nspecifies the minimum length of text for the component's value.","type":"number"},{"name":"name","description":"Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.","type":"string"},{"name":"open","description":"When `true`, displays and positions the component.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"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.","type":"string"},{"name":"placeholder","description":"Specifies placeholder text for the component.","type":"string"},{"name":"placement","description":"Determines where the component will be positioned relative to the container element.","type":"MenuPlacement"},{"name":"prefixText","description":"Specifies the component's prefix text.","type":"string"},{"name":"readOnly","description":"When `true`, the component's value can be read, but cannot be modified.","type":"boolean"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"suffixText","description":"Specifies the component's suffix text.","type":"string"},{"name":"topLayerDisabled","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.","type":"boolean"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"Specifies the component's value.","type":"string"}],"events":[{"name":"calciteAutocompleteBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteAutocompleteBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteAutocompleteChange","type":"void","description":"Fires each time a new `value` is typed and committed."},{"name":"calciteAutocompleteClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteAutocompleteOpen","type":"void","description":"Fires when the component is open and animation is complete."},{"name":"calciteAutocompleteTextChange","type":"void","description":"Fires each time a new `inputValue` is typed and committed."},{"name":"calciteAutocompleteTextInput","type":"void","description":"Fires each time a new `inputValue` is typed."}]}},{"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.","value":{"type":"string"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"heading","description":"Specifies the component's heading text.","value":{"type":"string"}},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"value","description":"Specifies the component's value.","value":{"type":"string"}}],"slots":[{"name":"content-end","description":"A slot for adding non-actionable elements after content of the component."},{"name":"content-start","description":"A slot for adding non-actionable elements before content of the component."}],"events":[{"name":"calciteAutocompleteItemSelect","type":"void","description":"Fires when the item has been selected."}],"js":{"properties":[{"name":"description","description":"Specifies a description for the component. Displays below the label text.","type":"string"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"heading","description":"Specifies the component's heading text.","type":"string"},{"name":"iconEnd","description":"Specifies an icon to display at the end of the component.","type":"IconName"},{"name":"iconFlipRtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"value","description":"Specifies the component's value.","type":"string"}],"events":[{"name":"calciteAutocompleteItemSelect","type":"void","description":"Fires when the item has been selected."}]}},{"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.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"any"}},{"name":"position","description":"Specifies the position of the group in the autocomplete menu.","default":"0","value":{"type":"number"}}],"slots":[{"name":"","description":"A slot for adding `calcite-autocomplete-item`s."}],"events":[],"js":{"properties":[{"name":"heading","description":"Specifies the component's heading text.","type":"string"},{"name":"label","description":"Specifies an accessible label for the component.","type":"any"},{"name":"position","description":"Specifies the position of the group in the autocomplete menu.","type":"number"}],"events":[]}},{"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.","value":{"type":"string"}},{"name":"label","description":"Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label for the component.","value":{"type":"string"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"thumbnail","description":"Specifies the `src` to an image. If the image is private, include an access token in the URL.","value":{"type":"string"}},{"name":"user-id","description":"Specifies the unique id of the user.","value":{"type":"string"}},{"name":"username","description":"Specifies the username of the user.","value":{"type":"string"}}],"events":[],"js":{"properties":[{"name":"fullName","description":"Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component.","type":"string"},{"name":"label","description":"Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label for the component.","type":"string"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"thumbnail","description":"Specifies the `src` to an image. If the image is private, include an access token in the URL.","type":"string"},{"name":"userId","description":"Specifies the unique id of the user.","type":"string"},{"name":"username","description":"Specifies the username of the user.","type":"string"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"description","description":"Specifies a description for the component. Displays below the heading.","value":{"type":"string"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"drag-disabled","description":"When `true`, and a parent `calcite-block-group` is `dragEnabled`, the component is not draggable.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"expanded","description":"When `true`, expands the component and its contents.","default":"false","value":{"type":"boolean"}},{"name":"heading","description":"Specifies the component's heading text.","value":{"type":"string"}},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","value":{"type":["1","2","3","4","5","6"]}},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"menu-placement","description":"Determines where the action menu will be positioned.","default":"\"bottom-end\"","value":{"type":["\"auto\"","\"top\"","\"bottom\"","\"left\"","\"right\"","\"auto-start\"","\"auto-end\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\"","\"right-start\"","\"right-end\"","\"left-start\"","\"left-end\"","\"leading-start\"","\"leading\"","\"leading-end\"","\"trailing-end\"","\"trailing\"","\"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.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"sort-handle-open","description":"When `true`, displays and positions the sort handle.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":["\"invalid\"","\"valid\"","\"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding custom content."},{"name":"actions-end","description":"A slot for adding actionable `calcite-action` elements after the content of the component. It is recommended to use two or fewer actions."},{"name":"content-end","description":"A slot for adding non-actionable elements after content of the component."},{"name":"content-start","description":"A slot for adding non-actionable elements before content of the component."},{"name":"header-menu-actions","description":"A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu."}],"events":[{"name":"calciteBlockBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteBlockBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteBlockClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteBlockCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteBlockExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteBlockOpen","type":"void","description":"Fires when the component is open and animation is complete."},{"name":"calciteBlockSortHandleBeforeClose","type":"void","description":"Fires when the sort handle is requested to be closed and before the closing transition begins."},{"name":"calciteBlockSortHandleBeforeOpen","type":"void","description":"Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteBlockSortHandleClose","type":"void","description":"Fires when the sort handle is closed and animation is complete."},{"name":"calciteBlockSortHandleOpen","type":"void","description":"Fires when the sort handle is open and animation is complete."},{"name":"calciteBlockToggle","type":"void","description":"Fires when the component's header is clicked."}],"js":{"properties":[{"name":"collapsible","description":"When `true`, the component is collapsible.","type":"boolean"},{"name":"description","description":"Specifies a description for the component. Displays below the heading.","type":"string"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"dragDisabled","description":"When `true`, and a parent `calcite-block-group` is `dragEnabled`, the component is not draggable.","type":"boolean"},{"name":"dragHandle","description":"When `true`, the component displays a draggable button.","type":"boolean"},{"name":"expanded","description":"When `true`, expands the component and its contents.","type":"boolean"},{"name":"heading","description":"Specifies the component's heading text.","type":"string"},{"name":"headingLevel","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","type":"HeadingLevel"},{"name":"iconEnd","description":"Specifies an icon to display at the end of the component.","type":"IconName"},{"name":"iconFlipRtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"menuFlipPlacements","description":"Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available.","type":"FlipPlacement[]"},{"name":"menuPlacement","description":"Determines where the action menu will be positioned.","type":"LogicalPlacement"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"open","description":"When `true`, expands the component and its contents.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"sortHandleOpen","description":"When `true`, displays and positions the sort handle.","type":"boolean"},{"name":"status","description":"Displays a status-related indicator icon.","type":"Status"},{"name":"topLayerDisabled","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.","type":"boolean"}],"events":[{"name":"calciteBlockBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteBlockBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteBlockClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteBlockCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteBlockExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteBlockOpen","type":"void","description":"Fires when the component is open and animation is complete."},{"name":"calciteBlockSortHandleBeforeClose","type":"void","description":"Fires when the sort handle is requested to be closed and before the closing transition begins."},{"name":"calciteBlockSortHandleBeforeOpen","type":"void","description":"Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteBlockSortHandleClose","type":"void","description":"Fires when the sort handle is closed and animation is complete."},{"name":"calciteBlockSortHandleOpen","type":"void","description":"Fires when the sort handle is open and animation is complete."},{"name":"calciteBlockToggle","type":"void","description":"Fires when the component's header is clicked."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"drag-enabled","description":"When `true`, `calcite-block`s are sortable via a draggable button.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"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.","value":{"type":"string"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"sort-disabled","description":"When `true`, and a `group` is defined, `calcite-block`s are no longer sortable.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding `calcite-block` elements."}],"events":[{"name":"calciteBlockGroupDragEnd","type":"BlockDragDetail","description":"Fires when the component's dragging has ended."},{"name":"calciteBlockGroupDragStart","type":"BlockDragDetail","description":"Fires when the component's dragging has started."},{"name":"calciteBlockGroupMoveHalt","type":"BlockDragDetail","description":"Fires when a user attempts to move an element using the sort menu and 'canPut' or 'canPull' returns falsy."},{"name":"calciteBlockGroupOrderChange","type":"BlockDragDetail","description":"Fires when the component's item order changes."}],"js":{"properties":[{"name":"canPull","description":"When provided, the method will be called to determine whether the element can move from the component.","type":"(detail: BlockDragDetail) => boolean | \"clone\""},{"name":"canPut","description":"When provided, the method will be called to determine whether the element can be added from another component.","type":"(detail: BlockDragDetail) => boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"dragEnabled","description":"When `true`, `calcite-block`s are sortable via a draggable button.","type":"boolean"},{"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.","type":"string | undefined"},{"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.","type":"string"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"sortDisabled","description":"When `true`, and a `group` is defined, `calcite-block`s are no longer sortable.","type":"boolean"}],"events":[{"name":"calciteBlockGroupDragEnd","type":"BlockDragDetail","description":"Fires when the component's dragging has ended."},{"name":"calciteBlockGroupDragStart","type":"BlockDragDetail","description":"Fires when the component's dragging has started."},{"name":"calciteBlockGroupMoveHalt","type":"BlockDragDetail","description":"Fires when a user attempts to move an element using the sort menu and 'canPut' or 'canPull' returns falsy."},{"name":"calciteBlockGroupOrderChange","type":"BlockDragDetail","description":"Fires when the component's item order changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"**Deprecated**: in v2.8.1, removal target v6.0.0 - Use `icon-start` instead.. Displays a status-related indicator icon.","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"text","description":"The component header text.","value":{"type":"string"}},{"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.","default":"\"button\"","value":{"type":["\"button\"","\"switch\""]}}],"slots":[{"name":"","description":"A slot for adding custom content."}],"events":[{"name":"calciteBlockSectionCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteBlockSectionExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteBlockSectionToggle","type":"void","description":"Fires when the header has been clicked."}],"js":{"properties":[{"name":"expanded","description":"When `true`, expands the component and its contents.","type":"boolean"},{"name":"iconEnd","description":"Specifies an icon to display at the end of the component.","type":"IconName"},{"name":"iconFlipRtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"open","description":"When `true`, expands the component and its contents.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"status","description":"Displays a status-related indicator icon.","type":"Status"},{"name":"text","description":"The component header text.","type":"string"},{"name":"toggleDisplay","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.","type":"BlockSectionToggleDisplay"}],"events":[{"name":"calciteBlockSectionCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteBlockSectionExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteBlockSectionToggle","type":"void","description":"Fires when the header has been clicked."}]}},{"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.","default":"\"center\"","value":{"type":["\"start\"","\"center\"","\"end\"","\"space-between\"","\"icon-start-space-between\"","\"icon-end-space-between\""]}},{"name":"appearance","description":"Specifies the appearance style of the component.","default":"\"solid\"","value":{"type":["\"solid\"","\"outline\"","\"outline-fill\"","\"transparent\""]}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":["string","boolean"]}},{"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.","value":{"type":"string"}},{"name":"href","description":"Specifies the URL of the linked resource, which can be set as an absolute or relative path.","value":{"type":"string"}},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}},{"name":"kind","description":"Specifies the kind of the component, which will apply to the border and background if applicable.","default":"\"brand\"","value":{"type":["\"brand\"","\"danger\"","\"inverse\"","\"neutral\""]}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"name":"rel","description":"Defines the relationship between the `href` value and the current document.","value":{"type":"string"}},{"name":"round","description":"When `true`, adds a round style to the component.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"split-child","description":"Specifies if the component is a child of a `calcite-split-button`.","default":"false","value":{"type":["\"primary\"","\"secondary\"","boolean"]}},{"name":"target","description":"Specifies where to open the linked document defined in the `href` property.","value":{"type":"string"}},{"name":"type","description":"Specifies the default behavior of the component.","default":"\"button\"","value":{"type":["\"button\"","\"reset\"","\"submit\""]}},{"name":"width","description":"Specifies the width of the component.","default":"\"auto\"","value":{"type":["\"auto\"","\"half\"","\"full\""]}}],"slots":[{"name":"","description":"A slot for adding text."}],"events":[],"js":{"properties":[{"name":"alignment","description":"Specifies the alignment of the component's elements.","type":"ButtonAlignment"},{"name":"appearance","description":"Specifies the appearance style of the component.","type":"Extract<\"outline\" | \"outline-fill\" | \"solid\" | \"transparent\", Appearance>"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string | boolean"},{"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.","type":"string"},{"name":"href","description":"Specifies the URL of the linked resource, which can be set as an absolute or relative path.","type":"string"},{"name":"iconEnd","description":"Specifies an icon to display at the end of the component.","type":"IconName"},{"name":"iconFlipRtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName"},{"name":"kind","description":"Specifies the kind of the component, which will apply to the border and background if applicable.","type":"Extract<\"brand\" | \"danger\" | \"inverse\" | \"neutral\", Kind>"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string | undefined"},{"name":"rel","description":"Defines the relationship between the `href` value and the current document.","type":"string"},{"name":"round","description":"When `true`, adds a round style to the component.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"splitChild","description":"Specifies if the component is a child of a `calcite-split-button`.","type":"\"primary\" | \"secondary\" | false"},{"name":"target","description":"Specifies where to open the linked document defined in the `href` property.","type":"string"},{"name":"type","description":"Specifies the default behavior of the component.","type":"HTMLButtonElement[\"type\"]"},{"name":"width","description":"Specifies the width of the component.","type":"Extract<Width, \"auto\" | \"half\" | \"full\">"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}},{"name":"thumbnail-position","description":"Sets the placement of the thumbnail defined in the `thumbnail` slot.","default":"\"block-start\"","value":{"type":["\"inline-start\"","\"inline-end\"","\"block-start\"","\"block-end\""]}}],"slots":[{"name":"","description":"A slot for adding content."},{"name":"thumbnail","description":"A slot for adding a thumbnail."},{"name":"heading","description":"A slot for adding a heading."},{"name":"description","description":"A slot for adding a description."},{"name":"footer-start","description":"A slot for adding a leading footer."},{"name":"footer-end","description":"A slot for adding a trailing footer."}],"events":[{"name":"calciteCardSelect","type":"void","description":"Fires when the deprecated `selectable` is true, or `selectionMode` set on parent `calcite-card-group` is not `none` and the component is selected."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"selectable","description":"When `true`, the component is selectable.","type":"boolean"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"},{"name":"thumbnailPosition","description":"Sets the placement of the thumbnail defined in the `thumbnail` slot.","type":"LogicalFlowPosition"}],"events":[{"name":"calciteCardSelect","type":"void","description":"Fires when the deprecated `selectable` is true, or `selectionMode` set on parent `calcite-card-group` is not `none` and the component is selected."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"selection-mode","description":"Specifies the selection mode of the component.","default":"\"none\"","value":{"type":["\"none\"","\"single\"","\"single-persist\"","\"multiple\""]}}],"slots":[{"name":"","description":"A slot for adding one or more `calcite-card`s."}],"events":[{"name":"calciteCardGroupSelect","type":"void","description":"Fires when the component's selection changes and the `selectionMode` is not `none`."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"selectedItems","description":"Specifies the component's selected items.","type":"Card[]"},{"name":"selectionMode","description":"Specifies the selection mode of the component.","type":"Extract<\"multiple\" | \"single\" | \"single-persist\" | \"none\", SelectionMode>"}],"events":[{"name":"calciteCardGroupSelect","type":"void","description":"Fires when the component's selection changes and the `selectionMode` is not `none`."}]}},{"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.","default":"\"inline\"","value":{"type":["\"inline\"","\"none\"","\"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.","default":"false","value":{"type":["\"\"","\"paused\"","boolean"]}},{"name":"autoplay-duration","description":"When `autoplay` is `true`, specifies in milliseconds the length of time to display each Carousel Item.","default":"6000","value":{"type":"number"}},{"name":"control-overlay","description":"Specifies if the component's controls are positioned absolutely on top of slotted Carousel Items.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"pagination-disabled","description":"When `true`, the component's pagination controls are hidden.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding `calcite-carousel-item`s."}],"events":[{"name":"calciteCarouselChange","type":"void","description":"Fires when the selected `calcite-carousel-item` changes."},{"name":"calciteCarouselPause","type":"void","description":"Fires when the carousel autoplay state pauses due to a user hovering over the component or focusing on the component or slotted content"},{"name":"calciteCarouselPlay","type":"void","description":"Fires when the carousel autoplay is invoked by the user."},{"name":"calciteCarouselResume","type":"void","description":"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"},{"name":"calciteCarouselStop","type":"void","description":"Fires when the carousel autoplay state is stopped by a user."}],"js":{"properties":[{"name":"arrowType","description":"Specifies how and if the \"previous\" and \"next\" arrows are displayed.","type":"ArrowType"},{"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.","type":"AutoplayType"},{"name":"autoplayDuration","description":"When `autoplay` is `true`, specifies in milliseconds the length of time to display each Carousel Item.","type":"number"},{"name":"controlOverlay","description":"Specifies if the component's controls are positioned absolutely on top of slotted Carousel Items.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"paginationDisabled","description":"When `true`, the component's pagination controls are hidden.","type":"boolean"},{"name":"selectedItem","description":"The component's selected `calcite-carousel-item`.","type":"CarouselItem"}],"events":[{"name":"calciteCarouselChange","type":"void","description":"Fires when the selected `calcite-carousel-item` changes."},{"name":"calciteCarouselPause","type":"void","description":"Fires when the carousel autoplay state pauses due to a user hovering over the component or focusing on the component or slotted content"},{"name":"calciteCarouselPlay","type":"void","description":"Fires when the carousel autoplay is invoked by the user."},{"name":"calciteCarouselResume","type":"void","description":"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"},{"name":"calciteCarouselStop","type":"void","description":"Fires when the carousel autoplay state is stopped by a user."}]}},{"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.","value":{"type":"string"}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding content."}],"events":[],"js":{"properties":[{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"value","description":"The component's value.","value":{"type":"any"}}],"events":[{"name":"calciteCheckboxChange","type":"void","description":"Fires when the component's `checked` status changes."}],"js":{"properties":[{"name":"checked","description":"When `true`, the component is checked.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"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.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"The component's value.","type":"any"}],"events":[{"name":"calciteCheckboxChange","type":"void","description":"Fires when the component's `checked` status changes."}]}},{"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.","default":"\"solid\"","value":{"type":["\"solid\"","\"outline\"","\"outline-fill\""]}},{"name":"closable","description":"When `true`, displays a close button in the component.","default":"false","value":{"type":"boolean"}},{"name":"closed","description":"When `true`, hides the component.","default":"false","value":{"type":"boolean"}},{"name":"close-on-delete","description":"When `true`, the component closes when the Delete or Backspace key is pressed while focused.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"icon","description":"Specifies an icon to display.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"kind","description":"Specifies the kind of the component, which will apply to border and background if applicable.","default":"\"neutral\"","value":{"type":["\"brand\"","\"inverse\"","\"neutral\""]}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"scale","description":"Specifies the size of the component.\n\nWhen contained in a parent `calcite-chip-group`, inherits the parent's `scale` value.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}},{"name":"value","description":"The component's value.","value":{"type":"any"}}],"slots":[{"name":"","description":"A slot for adding text."},{"name":"image","description":"A slot for adding an image."}],"events":[{"name":"calciteChipClose","type":"void","description":"Fires when the component's close button is selected."},{"name":"calciteChipSelect","type":"void","description":"Fires when the selected state of the component changes."}],"js":{"properties":[{"name":"appearance","description":"Specifies the appearance style of the component.","type":"Extract<\"outline\" | \"outline-fill\" | \"solid\", Appearance>"},{"name":"closable","description":"When `true`, displays a close button in the component.","type":"boolean"},{"name":"closed","description":"When `true`, hides the component.","type":"boolean"},{"name":"closeOnDelete","description":"When `true`, the component closes when the Delete or Backspace key is pressed while focused.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"icon","description":"Specifies an icon to display.","type":"IconName"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"kind","description":"Specifies the kind of the component, which will apply to border and background if applicable.","type":"Extract<\"brand\" | \"inverse\" | \"neutral\", Kind>"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"scale","description":"Specifies the size of the component.\n\nWhen contained in a parent `calcite-chip-group`, inherits the parent's `scale` value.","type":"Scale"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"},{"name":"value","description":"The component's value.","type":"any"}],"events":[{"name":"calciteChipClose","type":"void","description":"Fires when the component's close button is selected."},{"name":"calciteChipSelect","type":"void","description":"Fires when the selected state of the component changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"scale","description":"Specifies the size of the component. Child `calcite-chip`s inherit the component's value.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"\"none\"","value":{"type":["\"none\"","\"single\"","\"single-persist\"","\"multiple\""]}}],"slots":[{"name":"","description":"A slot for adding one or more `calcite-chip`s."}],"events":[{"name":"calciteChipGroupSelect","type":"void","description":"Fires when the component's selection changes."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"scale","description":"Specifies the size of the component. Child `calcite-chip`s inherit the component's value.","type":"Scale"},{"name":"selectedItems","description":"Specifies the component's selected items.","type":"Chip[]"},{"name":"selectionMode","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.","type":"Extract<\"multiple\" | \"single\" | \"single-persist\" | \"none\", SelectionMode>"}],"events":[{"name":"calciteChipGroupSelect","type":"void","description":"Fires when the component's selection changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"channels-disabled","description":"When `true`, hides the RGB/HSV channel inputs.","default":"false","value":{"type":"boolean"}},{"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`.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"field-disabled","description":"When `true`, hides the color field.","default":"false","value":{"type":"boolean"}},{"name":"format","description":"The format of `value`.\n\nWhen `\"auto\"`, the format will be inferred from `value` when set.","default":"\"auto\"","value":{"type":["\"auto\"","\"hex\"","\"hexa\"","\"hsv\"","\"rgb\"","\"rgb-css\"","\"rgba-css\"","\"hsl-css\"","\"hsla-css\"","\"rgba\"","\"hsl\"","\"hsla\"","\"hsva\""]}},{"name":"hex-disabled","description":"When `true`, hides the hex input.","default":"false","value":{"type":"boolean"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"saved-disabled","description":"When `true`, hides the saved colors section.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"storage-id","description":"Specifies the storage ID for colors.","value":{"type":"string"}},{"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.","value":{"type":["string","object"]}}],"events":[{"name":"calciteColorPickerChange","type":"void","description":"Fires when the color value has changed."},{"name":"calciteColorPickerInput","type":"void","description":"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."}],"js":{"properties":[{"name":"alphaChannel","description":"When `true`, the component will allow updates to the color's alpha value.","type":"boolean"},{"name":"channelsDisabled","description":"When `true`, hides the RGB/HSV channel inputs.","type":"boolean"},{"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`.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"fieldDisabled","description":"When `true`, hides the color field.","type":"boolean"},{"name":"format","description":"The format of `value`.\n\nWhen `\"auto\"`, the format will be inferred from `value` when set.","type":"Format"},{"name":"hexDisabled","description":"When `true`, hides the hex input.","type":"boolean"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem"},{"name":"savedDisabled","description":"When `true`, hides the saved colors section.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"storageId","description":"Specifies the storage ID for colors.","type":"string"},{"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.","type":"ColorValue | null"}],"events":[{"name":"calciteColorPickerChange","type":"void","description":"Fires when the color value has changed."},{"name":"calciteColorPickerInput","type":"void","description":"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."}]}},{"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`.","default":"false","value":{"type":"boolean"}},{"name":"alpha-channel","description":"When `true`, the component will allow updates to the color's alpha value.","default":"false","value":{"type":"boolean"}},{"name":"hex-label","description":"**Deprecated**: use `messages` instead. Specifies accessible label for the input field.","default":"\"Hex\"","value":{"type":"string"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"value","description":"The hex value.","value":{"type":"string"}}],"events":[{"name":"calciteColorPickerHexInputChange","type":"void","description":"Emitted when the hex value changes."}],"js":{"properties":[{"name":"allowEmpty","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`.","type":"boolean"},{"name":"alphaChannel","description":"When `true`, the component will allow updates to the color's alpha value.","type":"boolean"},{"name":"hexLabel","description":"Specifies accessible label for the input field.","type":"string"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem | undefined"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"value","description":"The hex value.","type":"string"}],"events":[{"name":"calciteColorPickerHexInputChange","type":"void","description":"Emitted when the hex value changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"color","description":"The color value.","value":{"type":"string"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"events":[],"js":{"properties":[{"name":"active","description":"When `true`, the component is active.","type":"boolean"},{"name":"color","description":"The color value.","type":"string | null"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"}],"events":[]}},{"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 position of the component.\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.","default":"false","value":{"type":"boolean"}},{"name":"clear-disabled","description":"When `true`, the value-clearing will be disabled.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"filter-text","description":"Text for the component's filter input field.","value":{"type":"string"}},{"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.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"max-items","description":"Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar.","default":"0","value":{"type":"number"}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"name":"open","description":"When `true`, displays and positions the component.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"placeholder","description":"Specifies the placeholder text for the input.","value":{"type":"string"}},{"name":"placeholder-icon","description":"Specifies the placeholder icon for the input.","value":{"type":"string"}},{"name":"placeholder-icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"placement","description":"Determines where the component will be positioned relative to the `referenceElement`.","default":"\"bottom-start\"","value":{"type":["\"auto\"","\"top\"","\"bottom\"","\"left\"","\"right\"","\"auto-start\"","\"auto-end\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\"","\"right-start\"","\"right-end\"","\"left-start\"","\"left-end\"","\"leading-start\"","\"leading\"","\"leading-end\"","\"trailing-end\"","\"trailing\"","\"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.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"select-all-enabled","description":"When `true` and `selectionMode` is `\"multiple\"` or `\"ancestors\"`, provides a checkbox for selecting all `calcite-combobox-item`s.","default":"false","value":{"type":"boolean"}},{"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.","default":"\"all\"","value":{"type":["\"single\"","\"all\"","\"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.","default":"\"multiple\"","value":{"type":["\"single\"","\"single-persist\"","\"ancestors\"","\"multiple\""]}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"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.","default":"false","value":{"type":"boolean"}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"The component's value(s) from the selected `calcite-combobox-item`(s).","value":{"type":["string","object"]}}],"slots":[{"name":"","description":"A slot for adding `calcite-combobox-item`s."},{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteComboboxBeforeClose","type":"void","description":"Fires when the component is requested to be closed, and before the closing transition begins."},{"name":"calciteComboboxBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteComboboxChange","type":"void","description":"Fires when the selected item(s) changes."},{"name":"calciteComboboxChipClose","type":"void","description":"Fires when a selected item in the component is closed via its `calcite-chip`."},{"name":"calciteComboboxClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteComboboxFilterChange","type":"void","description":"Fires when text is added to filter the options list."},{"name":"calciteComboboxOpen","type":"void","description":"Fires when the component is open and animation is complete."}],"js":{"properties":[{"name":"allowCustomValues","description":"When `true`, allows entry of custom values, which are not in the original set of items.","type":"boolean"},{"name":"clearDisabled","description":"When `true`, the value-clearing will be disabled.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"filteredItems","description":"Specifies the component's filtered items.","type":"HTMLCalciteComboboxItemElement[]"},{"name":"filterProps","description":"Specifies the properties to match against when filtering. If not set, all properties will be matched (`description`, `label`, `metadata`, `shortHeading`).","type":"string[]"},{"name":"filterText","description":"Text for the component's filter input field.","type":"string"},{"name":"flipPlacements","description":"Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available.","type":"FlipPlacement[]"},{"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.","type":"string"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"maxItems","description":"Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar.","type":"number"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"name":"open","description":"When `true`, displays and positions the component.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"placeholder","description":"Specifies the placeholder text for the input.","type":"string"},{"name":"placeholderIcon","description":"Specifies the placeholder icon for the input.","type":"IconName"},{"name":"placeholderIconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"placement","description":"Determines where the component will be positioned relative to the `referenceElement`.","type":"LogicalPlacement"},{"name":"readOnly","description":"When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.","type":"boolean"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"selectAllEnabled","description":"When `true` and `selectionMode` is `\"multiple\"` or `\"ancestors\"`, provides a checkbox for selecting all `calcite-combobox-item`s.","type":"boolean"},{"name":"selectedItems","description":"Specifies the component's selected items.","type":"HTMLCalciteComboboxItemElement[]"},{"name":"selectionDisplay","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.","type":"SelectionDisplay"},{"name":"selectionMode","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.","type":"Extract<\"single\" | \"single-persist\" | \"ancestors\" | \"multiple\", SelectionMode>"},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"topLayerDisabled","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.","type":"boolean"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"The component's value(s) from the selected `calcite-combobox-item`(s).","type":"string | string[]"}],"events":[{"name":"calciteComboboxBeforeClose","type":"void","description":"Fires when the component is requested to be closed, and before the closing transition begins."},{"name":"calciteComboboxBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteComboboxChange","type":"void","description":"Fires when the selected item(s) changes."},{"name":"calciteComboboxChipClose","type":"void","description":"Fires when a selected item in the component is closed via its `calcite-chip`."},{"name":"calciteComboboxClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteComboboxFilterChange","type":"void","description":"Fires when text is added to filter the options list."},{"name":"calciteComboboxOpen","type":"void","description":"Fires when the component is open and animation is complete."}]}},{"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** - Specifies the component's background color when active. \n- **--calcite-combobox-item-background-color-hover** - Specifies the component's background color when hovered. \n- **--calcite-combobox-item-shadow** - Specifies the component's shadow. \n- **--calcite-combobox-selected-icon-color** - Specifies the component's selected indicator icon color. \n- **--calcite-combobox-description-text-color** - Specifies the component's `description` and `shortHeading` text color. \n- **--calcite-combobox-description-text-color-press** - Specifies the component's `description` and `shortHeading` text color when hovered. \n- **--calcite-combobox-heading-text-color** - Specifies the component's `heading` text color. ","attributes":[{"name":"active","description":"When `true`, the component is active.","default":"false","value":{"type":"boolean"}},{"name":"description","description":"Specifies a description for the component. Displays below the heading.","value":{"type":"string"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"filter-disabled","description":"When `true`, omits the component from the `calcite-combobox` filtered search results.","default":"false","value":{"type":"boolean"}},{"name":"guid","description":"The `id` attribute of the component. When omitted, a globally unique identifier is used.","value":{"type":"string"}},{"name":"heading","description":"Specifies the component's heading text.","value":{"type":"string"}},{"name":"icon","description":"Specifies an icon to display.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"any"}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}},{"name":"short-heading","description":"The component's short heading.\n\nWhen provided, the short heading will be displayed in the component's selection.\n\nIt is recommended to use 5 characters or fewer.","value":{"type":"string"}},{"name":"value","description":"The component's value. Falls back to `heading` if not provided.","value":{"type":"any"}}],"slots":[{"name":"","description":"A slot for adding nested `calcite-combobox-item`s."},{"name":"content-end","description":"A slot for adding non-actionable elements after the component's content."},{"name":"content-start","description":"A slot for adding non-actionable elements before the component's content."}],"events":[{"name":"calciteComboboxItemChange","type":"void","description":"Fires whenever the component is selected or unselected."}],"js":{"properties":[{"name":"active","description":"When `true`, the component is active.","type":"boolean"},{"name":"ancestors","description":"Specifies the parent and grandparent items, which are set on `calcite-combobox`.","type":"ComboboxChildElement[]"},{"name":"description","description":"Specifies a description for the component. Displays below the heading.","type":"string"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"filterDisabled","description":"When `true`, omits the component from the `calcite-combobox` filtered search results.","type":"boolean"},{"name":"guid","description":"The `id` attribute of the component. When omitted, a globally unique identifier is used.","type":"string"},{"name":"heading","description":"Specifies the component's heading text.","type":"string"},{"name":"icon","description":"Specifies an icon to display.","type":"IconName"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"any"},{"name":"metadata","description":"Provides additional metadata to the component used in filtering.","type":"Record<string, unknown>"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"},{"name":"shortHeading","description":"The component's short heading.\n\nWhen provided, the short heading will be displayed in the component's selection.\n\nIt is recommended to use 5 characters or fewer.","type":"string"},{"name":"value","description":"The component's value. Falls back to `heading` if not provided.","type":"any"}],"events":[{"name":"calciteComboboxItemChange","type":"void","description":"Fires whenever the component is selected or unselected."}]}},{"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 text color of the component. \n- **--calcite-combobox-item-group-border-color** - Specifies the border color of the component. ","attributes":[{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"position","description":"Specifies the position of the group in the combobox menu.","default":"0","value":{"type":"number"}}],"slots":[{"name":"","description":"A slot for adding `calcite-combobox-item`s."}],"events":[],"js":{"properties":[{"name":"ancestors","description":"Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`.","type":"ComboboxChildElement[]"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"position","description":"Specifies the position of the group in the combobox menu.","type":"number"}],"events":[]}},{"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.","value":{"type":["\"start\"","\"end\""]}},{"name":"calendars","description":"Specifies the number of calendars displayed when `range` is `true`.","default":"2","value":{"type":["1","2"]}},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","value":{"type":["1","2","3","4","5","6"]}},{"name":"layout","description":"Defines the layout of the component.","default":"\"horizontal\"","value":{"type":["\"horizontal\"","\"vertical\""]}},{"name":"max","description":"When the component resides in a form,\nspecifies the latest allowed date (`\"yyyy-mm-dd\"`).","value":{"type":"string"}},{"name":"min","description":"When the component resides in a form,\nspecifies the earliest allowed date (`\"yyyy-mm-dd\"`).","value":{"type":"string"}},{"name":"month-style","description":"Specifies the monthStyle used by the component.","default":"\"wide\"","value":{"type":["\"abbreviated\"","\"wide\""]}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed.","value":{"type":["\"arab\"","\"arabext\"","\"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.","default":"false","value":{"type":"boolean"}},{"name":"range","description":"When `true`, activates the component's range mode to allow a start and end date.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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\"]`).","value":{"type":["string","object"]}}],"events":[{"name":"calciteDatePickerChange","type":"void","description":"Fires when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`."},{"name":"calciteDatePickerRangeChange","type":"void","description":"Fires when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`."}],"js":{"properties":[{"name":"activeDate","description":"Specifies the component's active date.","type":"Date"},{"name":"activeRange","description":"When `range` is true, specifies the active `range`. Where `\"start\"` specifies the starting range date and `\"end\"` the ending range date.","type":"\"start\" | \"end\""},{"name":"calendars","description":"Specifies the number of calendars displayed when `range` is `true`.","type":"1 | 2"},{"name":"headingLevel","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","type":"HeadingLevel"},{"name":"layout","description":"Defines the layout of the component.","type":"\"horizontal\" | \"vertical\""},{"name":"max","description":"When the component resides in a form,\nspecifies the latest allowed date (`\"yyyy-mm-dd\"`).","type":"string"},{"name":"maxAsDate","description":"Specifies the latest allowed date as a full date object (`new Date(\"yyyy-mm-dd\")`).","type":"Date"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"min","description":"When the component resides in a form,\nspecifies the earliest allowed date (`\"yyyy-mm-dd\"`).","type":"string"},{"name":"minAsDate","description":"Specifies the earliest allowed date as a full date object (`new Date(\"yyyy-mm-dd\")`).","type":"Date"},{"name":"monthStyle","description":"Specifies the monthStyle used by the component.","type":"\"abbreviated\" | \"wide\""},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed.","type":"NumberingSystem"},{"name":"proximitySelectionDisabled","description":"When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range.","type":"boolean"},{"name":"range","description":"When `true`, activates the component's range mode to allow a start and end date.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"\"s\" | \"m\" | \"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\"]`).","type":"string | string[]"},{"name":"valueAsDate","description":"Specifies the selected date as a full date object (`new Date(\"yyyy-mm-dd\")`), or an array containing full date objects (`[new Date(\"yyyy-mm-dd\"), new Date(\"yyyy-mm-dd\")]`).","type":"Date | Date[]"}],"events":[{"name":"calciteDatePickerChange","type":"void","description":"Fires when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`."},{"name":"calciteDatePickerRangeChange","type":"void","description":"Fires when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"current-month","description":"Date is in the current month.","default":"false","value":{"type":"boolean"}},{"name":"day","description":"Day of the month to be shown.","value":{"type":"number"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"end-of-range","description":"Date is the end of date range.","default":"false","value":{"type":"boolean"}},{"name":"highlighted","description":"Date is currently highlighted as part of the range,","default":"false","value":{"type":"boolean"}},{"name":"range","description":"When `true`, activates the component's range mode to allow a start and end date.","default":"false","value":{"type":"boolean"}},{"name":"range-hover","description":"Date is being hovered and within the set range.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}},{"name":"start-of-range","description":"Date is the start of date range.","default":"false","value":{"type":"boolean"}}],"events":[],"js":{"properties":[{"name":"active","description":"When `true`, the component is active.","type":"boolean"},{"name":"currentMonth","description":"Date is in the current month.","type":"boolean"},{"name":"day","description":"Day of the month to be shown.","type":"number"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"endOfRange","description":"Date is the end of date range.","type":"boolean"},{"name":"highlighted","description":"Date is currently highlighted as part of the range,","type":"boolean"},{"name":"range","description":"When `true`, activates the component's range mode to allow a start and end date.","type":"boolean"},{"name":"rangeHover","description":"Date is being hovered and within the set range.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"},{"name":"startOfRange","description":"Date is the start of date range.","type":"boolean"},{"name":"value","description":"The component's value.","type":"Date"}],"events":[]}},{"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`.","default":"2","value":{"type":["1","2"]}},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","value":{"type":["1","2","3","4","5","6"]}},{"name":"month-style","description":"Specifies the monthStyle used by the component.","value":{"type":["\"abbreviated\"","\"wide\""]}},{"name":"range","description":"When `true`, activates the component's range mode which renders two calendars for selecting ranges of dates.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"events":[],"js":{"properties":[{"name":"activeDate","description":"The currently active Date.","type":"Date"},{"name":"calendars","description":"Specifies the number of calendars displayed when `range` is `true`.","type":"1 | 2"},{"name":"endDate","description":"End date currently active.","type":"Date | undefined"},{"name":"headingLevel","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","type":"HeadingLevel"},{"name":"hoverRange","description":"The range of dates currently being hovered.","type":"HoverRange"},{"name":"max","description":"Specifies the latest allowed date (`\"yyyy-mm-dd\"`).","type":"Date"},{"name":"min","description":"Specifies the earliest allowed date (`\"yyyy-mm-dd\"`).","type":"Date"},{"name":"monthStyle","description":"Specifies the monthStyle used by the component.","type":"\"abbreviated\" | \"wide\""},{"name":"range","description":"When `true`, activates the component's range mode which renders two calendars for selecting ranges of dates.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"selectedDate","description":"Already selected date.","type":"Date"},{"name":"startDate","description":"Start date currently active.","type":"Date | undefined"}],"events":[]}},{"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\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.","default":"false","value":{"type":"boolean"}},{"name":"description","description":"Specifies a description for the component.","value":{"type":"string"}},{"name":"drag-enabled","description":"When `true`, the component is draggable.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"focus-trap-disabled","description":"When `true` and `modal` is `false`, prevents focus trapping.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"heading","description":"Specifies the component's heading text.","value":{"type":"string"}},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","value":{"type":["1","2","3","4","5","6"]}},{"name":"icon","description":"Specifies an icon to display.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"kind","description":"Specifies the kind of the component, which will style the top border.","value":{"type":["\"brand\"","\"danger\"","\"info\"","\"warning\"","\"success\""]}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"menu-open","description":"When `true`, the action menu items in the `header-menu-actions` slot are open.","default":"false","value":{"type":"boolean"}},{"name":"modal","description":"When `true`, displays a scrim blocking interaction underneath the component.","default":"false","value":{"type":"boolean"}},{"name":"open","description":"When `true`, displays and positions the component.","default":"false","value":{"type":"boolean"}},{"name":"outside-close-disabled","description":"When `true`, disables the closing of the component when clicked outside.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"placement","description":"Specifies the placement of the dialog.","default":"\"center\"","value":{"type":["\"center\"","\"top\"","\"bottom\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\"","\"cover\""]}},{"name":"resizable","description":"When `true`, the component is resizable.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"false","value":{"type":"boolean"}},{"name":"width","description":"Specifies the width of the component.","value":{"type":["\"s\"","\"m\"","\"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.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"slots":[{"name":"","description":"A slot for adding content."},{"name":"custom-content","description":"A slot for displaying custom content. Will prevent the rendering of any default Dialog UI, except for `box-shadow` and `corner-radius`."},{"name":"action-bar","description":"A slot for adding a `calcite-action-bar` to the component."},{"name":"alerts","description":"A slot for adding `calcite-alert`s to the component."},{"name":"content-bottom","description":"A slot for adding content below the unnamed (default) slot and - if populated - the `footer` slot."},{"name":"content-top","description":"A slot for adding content above the unnamed (default) slot and - if populated - below the `action-bar` slot."},{"name":"header-actions-start","description":"A slot for adding actions or content to the starting side of the component's header."},{"name":"header-actions-end","description":"A slot for adding actions or content to the ending side of the component's header."},{"name":"header-content","description":"A slot for adding custom content to the component's header."},{"name":"header-menu-actions","description":"A slot for adding an overflow menu with actions inside a `calcite-dropdown`."},{"name":"fab","description":"A slot for adding a `calcite-fab` (floating action button) to perform an action."},{"name":"footer","description":"A slot for adding custom content to the component's footer. Should not be used with the `\"footer-start\"` or `\"footer-end\"` slots."},{"name":"footer-end","description":"A slot for adding a trailing footer custom content. Should not be used with the `\"footer\"` slot."},{"name":"footer-start","description":"A slot for adding a leading footer custom content. Should not be used with the `\"footer\"` slot."}],"events":[{"name":"calciteDialogBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteDialogBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteDialogClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteDialogOpen","type":"void","description":"Fires when the component is open and animation is complete."},{"name":"calciteDialogScroll","type":"void","description":"Fires when the content is scrolled."}],"js":{"properties":[{"name":"beforeClose","description":"Passes a function to run before the component closes.","type":"() => Promise<void>"},{"name":"closeDisabled","description":"When `true`, disables the component's close button.","type":"boolean"},{"name":"description","description":"Specifies a description for the component.","type":"string"},{"name":"dragEnabled","description":"When `true`, the component is draggable.","type":"boolean"},{"name":"escapeDisabled","description":"When `true`, disables the default close on escape behavior.\n\nBy default, an open dialog can be dismissed by pressing the Esc key.","type":"boolean"},{"name":"focusTrapDisabled","description":"When `true` and `modal` is `false`, prevents focus trapping.","type":"boolean"},{"name":"focusTrapOptions","description":"Specifies custom focus trap configuration on the component, where\n\n`\"allowOutsideClick`\" allows outside clicks,\n`\"initialFocus\"` enables initial focus,\n`\"returnFocusOnDeactivate\"` returns focus when not active,\n`\"extraContainers\"` specifies additional focusable elements external to the trap, such as 3rd-party components appending elements to the document body, and\n`\"setReturnFocus\"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).","type":"Partial<FocusTrapOptions>"},{"name":"fullscreenDisabled","description":"When `true`, the component will not display at fullscreen, which may be desired in limited display areas, such as mobile devices.","type":"boolean"},{"name":"heading","description":"Specifies the component's heading text.","type":"string"},{"name":"headingLevel","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","type":"HeadingLevel"},{"name":"icon","description":"Specifies an icon to display.","type":"IconName"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"kind","description":"Specifies the kind of the component, which will style the top border.","type":"Extract<\"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\", Kind>"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"menuOpen","description":"When `true`, the action menu items in the `header-menu-actions` slot are open.","type":"boolean"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"modal","description":"When `true`, displays a scrim blocking interaction underneath the component.","type":"boolean"},{"name":"open","description":"When `true`, displays and positions the component.","type":"boolean"},{"name":"outsideCloseDisabled","description":"When `true`, disables the closing of the component when clicked outside.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"placement","description":"Specifies the placement of the dialog.","type":"DialogPlacement"},{"name":"resizable","description":"When `true`, the component is resizable.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"topLayerDisabled","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.","type":"boolean"},{"name":"width","description":"Specifies the width of the component.","type":"Extract<Width, Scale>"},{"name":"widthScale","description":"Specifies the width of the component.","type":"Scale"}],"events":[{"name":"calciteDialogBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteDialogBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteDialogClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteDialogOpen","type":"void","description":"Fires when the component is open and animation is complete."},{"name":"calciteDialogScroll","type":"void","description":"Fires when the content is scrolled."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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`.","default":"0","value":{"type":"number"}},{"name":"offset-distance","description":"Offset the position of the component away from the `referenceElement`.","default":"0","value":{"type":"number"}},{"name":"offset-skidding","description":"Offset the position of the component along the `referenceElement`.","default":"0","value":{"type":"number"}},{"name":"open","description":"When `true`, displays and positions the component.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"placement","description":"Determines where the component will be positioned relative to the container element.","default":"\"bottom-start\"","value":{"type":["\"top\"","\"bottom\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"false","value":{"type":"boolean"}},{"name":"type","description":"Specifies the action to open the component from the container element.","default":"\"click\"","value":{"type":["\"hover\"","\"click\""]}},{"name":"width","description":"Specifies the width of the component.","value":{"type":["\"s\"","\"m\"","\"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.","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"slots":[{"name":"","description":"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."},{"name":"trigger","description":"A slot for the element that triggers the `calcite-dropdown`."}],"events":[{"name":"calciteDropdownBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteDropdownBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteDropdownClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteDropdownOpen","type":"void","description":"Fires when the component is open and animation is complete."},{"name":"calciteDropdownSelect","type":"void","description":"Fires when a `calcite-dropdown-item`'s selection changes."}],"js":{"properties":[{"name":"closeOnSelectDisabled","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.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"flipPlacements","description":"Specifies the component's fallback `placement` for slotted `calcite-dropdown-items` when their initial or specified `placement` has insufficient space available.","type":"FlipPlacement[]"},{"name":"maxItems","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`.","type":"number"},{"name":"offsetDistance","description":"Offset the position of the component away from the `referenceElement`.","type":"number"},{"name":"offsetSkidding","description":"Offset the position of the component along the `referenceElement`.","type":"number"},{"name":"open","description":"When `true`, displays and positions the component.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"placement","description":"Determines where the component will be positioned relative to the container element.","type":"MenuPlacement"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"selectedItems","description":"Specifies the component's selected items.","type":"DropdownItem[]"},{"name":"topLayerDisabled","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.","type":"boolean"},{"name":"type","description":"Specifies the action to open the component from the container element.","type":"\"hover\" | \"click\""},{"name":"width","description":"Specifies the width of the component.","type":"Extract<Width, Scale>"},{"name":"widthScale","description":"Specifies the width of the component.","type":"Scale"}],"events":[{"name":"calciteDropdownBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteDropdownBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteDropdownClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteDropdownOpen","type":"void","description":"Fires when the component is open and animation is complete."},{"name":"calciteDropdownSelect","type":"void","description":"Fires when a `calcite-dropdown-item`'s selection changes."}]}},{"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.","value":{"type":"string"}},{"name":"position","description":"The position of the group in the dropdown menu.","default":"-1","value":{"type":"number"}},{"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.","default":"\"single\"","value":{"type":["\"none\"","\"single\"","\"multiple\""]}}],"slots":[{"name":"","description":"A slot for adding `calcite-dropdown-item`s."}],"events":[],"js":{"properties":[{"name":"groupTitle","description":"Specifies and displays a group title.","type":"string"},{"name":"position","description":"The position of the group in the dropdown menu.","type":"number"},{"name":"selectionMode","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.","type":"Extract<\"none\" | \"single\" | \"multiple\", SelectionMode>"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"rel","description":"Specifies the relationship to the linked document defined in `href`.","value":{"type":"string"}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}},{"name":"target","description":"Specifies the frame or window to open the linked document.","value":{"type":"string"}}],"slots":[{"name":"","description":"A slot for adding text."}],"events":[{"name":"calciteDropdownItemSelect","type":"void","description":"Fires when the component is selected."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"name":"iconEnd","description":"Specifies an icon to display at the end of the component.","type":"IconName"},{"name":"iconFlipRtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"rel","description":"Specifies the relationship to the linked document defined in `href`.","type":"string"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"},{"name":"target","description":"Specifies the frame or window to open the linked document.","type":"string"}],"events":[{"name":"calciteDropdownItemSelect","type":"void","description":"Fires when the component is selected."}]}},{"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.","default":"\"solid\"","value":{"type":["\"solid\"","\"outline-fill\""]}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"icon","description":"Specifies an icon to display.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"kind","description":"Specifies the kind of the component, which will apply to border and background.","default":"\"brand\"","value":{"type":["\"brand\"","\"danger\"","\"inverse\"","\"neutral\""]}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"text","description":"Specifies text to accompany the component's icon.","value":{"type":"string"}},{"name":"text-enabled","description":"When `true`, displays the `text` value in the component.","default":"false","value":{"type":"boolean"}}],"events":[],"js":{"properties":[{"name":"appearance","description":"Specifies the appearance style of the component.","type":"Extract<\"solid\" | \"outline-fill\", Appearance>"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"icon","description":"Specifies an icon to display.","type":"IconName"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"kind","description":"Specifies the kind of the component, which will apply to border and background.","type":"Extract<\"brand\" | \"danger\" | \"inverse\" | \"neutral\", Kind>"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string | undefined"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"text","description":"Specifies text to accompany the component's icon.","type":"string | undefined"},{"name":"textEnabled","description":"When `true`, displays the `text` value in the component.","type":"boolean"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"placeholder","description":"Specifies placeholder text for the input element.","value":{"type":"string"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"value","description":"The component's value.","value":{"type":"string"}}],"events":[{"name":"calciteFilterChange","type":"void","description":"Fires when the filter text changes."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"filteredItems","description":"The component's resulting items after filtering.","type":"object[]"},{"name":"filterProps","description":"Specifies the properties to match against when filtering. This will only apply when `value` is an object. If not set, all properties will be matched.","type":"string[] | undefined"},{"name":"items","description":"Defines the items to filter. The component uses the values as the starting point, and returns items\n\nthat contain the string entered in the input, using a partial match and recursive search.\n\nThis property is needed to conduct filtering.","type":"object[]"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string | undefined"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"placeholder","description":"Specifies placeholder text for the input element.","type":"string | undefined"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"value","description":"The component's value.","type":"string"}],"events":[{"name":"calciteFilterChange","type":"void","description":"Fires when the filter text changes."}]}},{"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":[],"slots":[{"name":"","description":"A slot for adding `calcite-flow-item` elements to the component."}],"events":[],"js":{"properties":[],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"closed","description":"When `true`, hides the component.","default":"false","value":{"type":"boolean"}},{"name":"collapsed","description":"When `true`, hides the component's content area.","default":"false","value":{"type":"boolean"}},{"name":"collapsible","description":"When `true`, the component is collapsible.","default":"false","value":{"type":"boolean"}},{"name":"description","description":"Specifies a description for the component.","value":{"type":"string"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"heading","description":"Specifies the component's heading text.","value":{"type":"string"}},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","value":{"type":["1","2","3","4","5","6"]}},{"name":"icon","description":"Specifies an icon to display.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"menu-open","description":"When `true`, the action menu items in the `header-menu-actions` slot are open.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"selected","description":"When `true`, the component is displayed within a parent flow.","default":"false","value":{"type":"boolean"}},{"name":"show-back-button","description":"When `true`, displays a back button in the component's header.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding custom content."},{"name":"action-bar","description":"A slot for adding a `calcite-action-bar` to the component."},{"name":"alerts","description":"A slot for adding `calcite-alert`s to the component."},{"name":"content-top","description":"A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated)."},{"name":"content-bottom","description":"A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)"},{"name":"header-actions-start","description":"A slot for adding `calcite-action`s or content to the start side of the component's header."},{"name":"header-actions-end","description":"A slot for adding `calcite-action`s or content to the end side of the component's header."},{"name":"header-content","description":"A slot for adding custom content to the component's header."},{"name":"header-menu-actions","description":"A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`."},{"name":"fab","description":"A slot for adding a `calcite-fab` (floating action button) to perform an action."},{"name":"footer","description":"A slot for adding custom content to the component's footer. Should not be used with the `\"footer-start\"` or `\"footer-end\"` slots."},{"name":"footer-end","description":"A slot for adding a trailing footer custom content. Should not be used with the `\"footer\"` slot."},{"name":"footer-start","description":"A slot for adding a leading footer custom content. Should not be used with the `\"footer\"` slot."}],"events":[{"name":"calciteFlowItemBack","type":"void","description":"Fires when the back button is clicked."},{"name":"calciteFlowItemClose","type":"void","description":"Fires when the close button is clicked."},{"name":"calciteFlowItemCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteFlowItemExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteFlowItemScroll","type":"void","description":"Fires when the content is scrolled."},{"name":"calciteFlowItemToggle","type":"void","description":"Fires when the collapse button is clicked."}],"js":{"properties":[{"name":"beforeBack","description":"When provided, the method will be called before it is removed from its parent `calcite-flow`.","type":"(() => Promise<void>) | undefined"},{"name":"beforeClose","description":"Passes a function to run before the component closes.","type":"() => Promise<void>"},{"name":"closable","description":"When `true`, displays a close button in the trailing side of the component's header.","type":"boolean"},{"name":"closed","description":"When `true`, hides the component.","type":"boolean"},{"name":"collapsed","description":"When `true`, hides the component's content area.","type":"boolean"},{"name":"collapsible","description":"When `true`, the component is collapsible.","type":"boolean"},{"name":"description","description":"Specifies a description for the component.","type":"string"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"heading","description":"Specifies the component's heading text.","type":"string"},{"name":"headingLevel","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","type":"HeadingLevel"},{"name":"icon","description":"Specifies an icon to display.","type":"IconName"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"menuOpen","description":"When `true`, the action menu items in the `header-menu-actions` slot are open.","type":"boolean"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"selected","description":"When `true`, the component is displayed within a parent flow.","type":"boolean"},{"name":"showBackButton","description":"When `true`, displays a back button in the component's header.","type":"boolean"},{"name":"topLayerDisabled","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.","type":"boolean"}],"events":[{"name":"calciteFlowItemBack","type":"void","description":"Fires when the back button is clicked."},{"name":"calciteFlowItemClose","type":"void","description":"Fires when the close button is clicked."},{"name":"calciteFlowItemCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteFlowItemExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteFlowItemScroll","type":"void","description":"Fires when the content is scrolled."},{"name":"calciteFlowItemToggle","type":"void","description":"Fires when the collapse button is clicked."}]}},{"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.","value":{"type":"number"}},{"name":"highlight-min","description":"Start of highlight color if highlighting range.","value":{"type":"number"}},{"name":"max","description":"Highest point of the range.","value":{"type":"number"}},{"name":"min","description":"Lowest point of the range.","value":{"type":"number"}}],"events":[],"js":{"properties":[{"name":"colorStops","description":"Array of values describing a single color stop ([offset, color, opacity])\nThese color stops should be sorted by offset value.","type":"ColorStop[]"},{"name":"data","description":"Array of tuples describing a single data point ([x, y])\nThese data points should be sorted by x-axis value.","type":"DataSeries"},{"name":"highlightMax","description":"End of highlight color if highlighting range.","type":"number"},{"name":"highlightMin","description":"Start of highlight color if highlighting range.","type":"number"},{"name":"max","description":"Highest point of the range.","type":"number"},{"name":"min","description":"Lowest point of the range.","type":"number"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"drag-handle","description":"Value for the button title attribute.","value":{"type":"string"}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}}],"events":[{"name":"calciteHandleChange","type":"void","description":"Fires whenever the component is selected or unselected."},{"name":"calciteHandleNudge","type":"HandleNudge","description":"Fires when the handle is selected and the up or down arrow key is pressed."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"dragHandle","description":"Value for the button title attribute.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"}],"events":[{"name":"calciteHandleChange","type":"void","description":"Fires whenever the component is selected or unselected."},{"name":"calciteHandleNudge","type":"HandleNudge","description":"Fires when the handle is selected and the up or down arrow key is pressed."}]}},{"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`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"icon","description":"Displays a specific icon.","value":{"type":"string"}},{"name":"preload","description":"When `true`, it preloads the icon data.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"text-label","description":"Accessible name for the component.\n\nIt is recommended to set this value if your icon is semantic.","value":{"type":"string"}}],"events":[],"js":{"properties":[{"name":"flipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"icon","description":"Displays a specific icon.","type":"IconName"},{"name":"preload","description":"When `true`, it preloads the icon data.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"textLabel","description":"Accessible name for the component.\n\nIt is recommended to set this value if your icon is semantic.","type":"string"}],"events":[]}},{"name":"calcite-inline-editable","description":"### Events\n- **calciteInlineEditableEditCancel** - Emits when the component's \"cancel editing\" button is pressed.\n- **calciteInlineEditableEditConfirm** - Emits when the component's \"confirm edits\" button is pressed.\n\n### Methods\n- `componentOnReady(): Promise<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** - Specifies the button element's background color when appearance=\"solid\" or appearance=\"outline-fill\". \n- **--calcite-inline-editable-button-corner-radius** - Specifies the button element's corner radius. \n- **--calcite-inline-editable-button-loader-color** - Specifies the button element's loader color. \n- **--calcite-inline-editable-button-text-color** - Specifies the button element's text color. ","attributes":[{"name":"controls","description":"When `true` and `editingEnabled` is `true`, displays save and cancel controls on the component.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"editing-enabled","description":"When `true`, inline editing is enabled on the component.","default":"false","value":{"type":"boolean"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"slots":[{"name":"","description":"A slot for adding a `calcite-input`."}],"events":[{"name":"calciteInlineEditableEditCancel","type":"void","description":"Emits when the component's \"cancel editing\" button is pressed."},{"name":"calciteInlineEditableEditConfirm","type":"void","description":"Emits when the component's \"confirm edits\" button is pressed."}],"js":{"properties":[{"name":"afterConfirm","description":"Specifies a callback to be executed prior to disabling editing via the controls. When provided, the component's loading state will be handled automatically.","type":"() => Promise<void>"},{"name":"controls","description":"When `true` and `editingEnabled` is `true`, displays save and cancel controls on the component.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"editingEnabled","description":"When `true`, inline editing is enabled on the component.","type":"boolean"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"}],"events":[{"name":"calciteInlineEditableEditCancel","type":"void","description":"Emits when the component's \"cancel editing\" button is pressed."},{"name":"calciteInlineEditableEditConfirm","type":"void","description":"Emits when the component's \"confirm edits\" button is pressed."}]}},{"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-button` next 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** - Specifies the component's prefix width, when present. \n- **--calcite-input-suffix-size** - Specifies the component's suffix width, when present. \n- **--calcite-input-background-color** - Specifies the component's background color. \n- **--calcite-input-border-color** - Specifies the component's border color. \n- **--calcite-input-corner-radius** - Specifies the component's corner radius. \n- **--calcite-input-shadow** - Specifies the shadow around the component. \n- **--calcite-input-icon-color** - Specifies the component's icon color. \n- **--calcite-input-text-color** - Specifies the component's text color. \n- **--calcite-input-placeholder-text-color** - Specifies the component's placeholder text color. \n- **--calcite-input-actions-background-color** - Specifies the background color of the component's `clearable` and `number-button-type` elements. \n- **--calcite-input-actions-background-color-hover** - Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered. \n- **--calcite-input-actions-background-color-press** - Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed. \n- **--calcite-input-actions-icon-color** - Specifies the icon color of the component's `clearable` and `number-button-type` elements. \n- **--calcite-input-actions-icon-color-hover** - Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered. \n- **--calcite-input-actions-icon-color-press** - Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed. \n- **--calcite-input-loading-background-color** - Specifies the background color of the `loading` element, when present. \n- **--calcite-input-loading-fill-color** - Specifies the fill color of the `loading` element, when present. \n- **--calcite-input-prefix-text-color** - Specifies the component's prefix text color, when present. \n- **--calcite-input-suffix-text-color** - Specifies the component's suffix text color, when present. ","attributes":[{"name":"accept","description":"Specifies a comma separated list of unique file type specifiers for limiting accepted file types.\nThis property only has an effect when `type` is \"file\".\nRead the native attribute's documentation on MDN for more info.","value":{"type":"string"}},{"name":"alignment","description":"Specifies the text alignment of the component's value.","default":"\"start\"","value":{"type":["\"start\"","\"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.","value":{"type":"string"}},{"name":"clearable","description":"When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `\"search\"`, `\"time\"`, and `\"date\"` types.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"group-separator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","default":"false","value":{"type":"boolean"}},{"name":"icon","description":"When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.","value":{"type":["string","boolean"]}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"max","description":"When the component resides in a form,\nspecifies the maximum value for `type=\"number\"`.","value":{"type":"number"}},{"name":"max-length","description":"When the component resides in a form,\nspecifies the maximum length of text for the component's value.","value":{"type":"number"}},{"name":"min","description":"When the component resides in a form,\nspecifies the minimum value for `type=\"number\"`.","value":{"type":"number"}},{"name":"min-length","description":"When the component resides in a form,\nspecifies the minimum length of text for the component's value.","value":{"type":"number"}},{"name":"multiple","description":"When `true`, the component can accept more than one value.\nThis property only has an effect when `type` is \"email\" or \"file\".\nRead the native attribute's documentation on MDN for more info.","default":"false","value":{"type":"boolean"}},{"name":"name","description":"Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.","value":{"type":"string"}},{"name":"number-button-type","description":"Specifies the placement of the buttons for `type=\"number\"`.","default":"\"vertical\"","value":{"type":["\"horizontal\"","\"vertical\"","\"none\""]}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"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.","value":{"type":"string"}},{"name":"placeholder","description":"Specifies placeholder text for the component.","value":{"type":"string"}},{"name":"prefix-text","description":"Adds text to the start of the component.","value":{"type":"string"}},{"name":"read-only","description":"When `true`, the component's value can be read, but cannot be modified.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"step","description":"Specifies the granularity the component's `value` must adhere to.","value":{"type":["\"any\"","number"]}},{"name":"suffix-text","description":"Adds text to the end of the component.","value":{"type":"string"}},{"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\"`.","default":"\"text\"","value":{"type":["\"color\"","\"date\"","\"datetime-local\"","\"email\"","\"file\"","\"image\"","\"month\"","\"number\"","\"password\"","\"search\"","\"tel\"","\"text\"","\"time\"","\"url\"","\"week\""]}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"The component's value.","value":{"type":"string"}}],"slots":[{"name":"action","description":"A slot for positioning a `calcite-button` next to the component."},{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteInputChange","type":"void","description":"Fires each time a new `value` is typed and committed."},{"name":"calciteInputInput","type":"void","description":"Fires each time a new `value` is typed."}],"js":{"properties":[{"name":"accept","description":"Specifies a comma separated list of unique file type specifiers for limiting accepted file types.\nThis property only has an effect when `type` is \"file\".\nRead the native attribute's documentation on MDN for more info.","type":"string"},{"name":"alignment","description":"Specifies the text alignment of the component's value.","type":"Extract<\"start\" | \"end\", Alignment>"},{"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.","type":"AutoFill"},{"name":"clearable","description":"When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `\"search\"`, `\"time\"`, and `\"date\"` types.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"files","description":"When `type` is `\"file\"`, specifies the component's selected files.","type":"FileList | undefined"},{"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.","type":"string"},{"name":"groupSeparator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","type":"boolean"},{"name":"icon","description":"When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.","type":"IconName | boolean"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"max","description":"When the component resides in a form,\nspecifies the maximum value for `type=\"number\"`.","type":"number"},{"name":"maxLength","description":"When the component resides in a form,\nspecifies the maximum length of text for the component's value.","type":"number"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"min","description":"When the component resides in a form,\nspecifies the minimum value for `type=\"number\"`.","type":"number"},{"name":"minLength","description":"When the component resides in a form,\nspecifies the minimum length of text for the component's value.","type":"number"},{"name":"multiple","description":"When `true`, the component can accept more than one value.\nThis property only has an effect when `type` is \"email\" or \"file\".\nRead the native attribute's documentation on MDN for more info.","type":"boolean"},{"name":"name","description":"Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.","type":"string"},{"name":"numberButtonType","description":"Specifies the placement of the buttons for `type=\"number\"`.","type":"InputPlacement"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem"},{"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.","type":"string"},{"name":"placeholder","description":"Specifies placeholder text for the component.","type":"string"},{"name":"prefixText","description":"Adds text to the start of the component.","type":"string"},{"name":"readOnly","description":"When `true`, the component's value can be read, but cannot be modified.","type":"boolean"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"step","description":"Specifies the granularity the component's `value` must adhere to.","type":"number | \"any\""},{"name":"suffixText","description":"Adds text to the end of the component.","type":"string"},{"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\"`.","type":"\"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"image\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\""},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"The component's value.","type":"string"}],"events":[{"name":"calciteInputChange","type":"void","description":"Fires each time a new `value` is typed and committed."},{"name":"calciteInputInput","type":"void","description":"Fires each time a new `value` is typed."}]}},{"name":"calcite-input-date-picker","description":"### Events\n- **calciteInputDatePickerBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteInputDatePickerBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteInputDatePickerChange** - Fires when the component's `value` changes.\n- **calciteInputDatePickerClose** - Fires when the component is closed and animation is complete.\n- **calciteInputDatePickerOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<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.\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 actions of the calendar. \n- **--calcite-input-date-picker-calendar-actions-background-color-hover** - Specifies the background color of actions of the calendar when hovered. \n- **--calcite-input-date-picker-calendar-actions-background-color-press** - Specifies the background color of actions of the calendar 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 component's calendar border color. \n- **--calcite-input-date-picker-calendar-corner-radius** - Specifies the component's calendar corner radius. \n- **--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-background-color** - Specifies the background color of day of the calendar. \n- **--calcite-input-date-picker-calendar-day-background-color-hover** - Specifies the background color of day of the calendar 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 select day range of the component's date-picker. \n- **--calcite-input-date-picker-calendar-day-text-color-selected** - Specifies the text color of selected day of the component's date-picker. \n- **--calcite-input-date-picker-calendar-day-outside-range-background-color-hover** - Specifies the background color of day's outside current range of the component's date-picker when hovered. \n- **--calcite-input-date-picker-calendar-day-outside-range-text-color-hover** - Specifies the text color of day's outside current range of the component's date-picker when hovered. \n- **--calcite-input-date-picker-calendar-day-text-color** - Specifies the text color of day of the component's date-picker. \n- **--calcite-input-date-picker-calendar-day-text-color-hover** - Specifies the text color of day of the component's date-picker when hovered. \n- **--calcite-input-date-picker-calendar-selected-background-color** - Specifies the background color of selected day and day range of the calendar. \n- **--calcite-input-date-picker-calendar-shadow** - 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. \n- **--calcite-input-date-picker-calendar-month-select-text-color** - Specifies the text color of month select of the component's date-picker. \n- **--calcite-input-date-picker-calendar-range-divider-color** - Specifies the divider color between the component's date-picker. \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** - Specifies the component's divider color between two inputs when in range mode. \n- **--calcite-input-date-picker-icon-color** - Specifies the component's in-field 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":"Specifies the number of calendars displayed when `range` is `true`.","default":"2","value":{"type":["1","2"]}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"focus-trap-disabled","description":"When `true`, prevents focus trapping.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","value":{"type":["1","2","3","4","5","6"]}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"layout","description":"Defines the layout of the component.","default":"\"horizontal\"","value":{"type":["\"horizontal\"","\"vertical\""]}},{"name":"max","description":"When the component resides in a form,\nspecifies the latest allowed date (\"yyyy-mm-dd\").","value":{"type":"string"}},{"name":"min","description":"When the component resides in a form,\nspecifies the earliest allowed date (\"yyyy-mm-dd\").","value":{"type":"string"}},{"name":"month-style","description":"Specifies the monthStyle used by the component.","default":"\"wide\"","value":{"type":["\"abbreviated\"","\"wide\""]}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"open","description":"When `true`, displays the `calcite-date-picker` component.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"placement","description":"Specifies the placement of the `calcite-date-picker` relative to the component.","default":"\"bottom-start\"","value":{"type":["\"top\"","\"bottom\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"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.","default":"false","value":{"type":"boolean"}},{"name":"range","description":"When `true`, activates a range for the component.","default":"false","value":{"type":"boolean"}},{"name":"read-only","description":"When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"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.","default":"false","value":{"type":"boolean"}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"Selected date as a string in ISO format (`\"yyyy-mm-dd\"`).","value":{"type":["string","object"]}}],"slots":[{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteInputDatePickerBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteInputDatePickerBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteInputDatePickerChange","type":"void","description":"Fires when the component's `value` changes."},{"name":"calciteInputDatePickerClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteInputDatePickerOpen","type":"void","description":"Fires when the component is open and animation is complete."}],"js":{"properties":[{"name":"calendars","description":"Specifies the number of calendars displayed when `range` is `true`.","type":"1 | 2"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"flipPlacements","description":"Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available.","type":"FlipPlacement[]"},{"name":"focusTrapDisabled","description":"When `true`, prevents focus trapping.","type":"boolean"},{"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.","type":"string"},{"name":"headingLevel","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","type":"HeadingLevel"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"layout","description":"Defines the layout of the component.","type":"\"horizontal\" | \"vertical\""},{"name":"max","description":"When the component resides in a form,\nspecifies the latest allowed date (\"yyyy-mm-dd\").","type":"string"},{"name":"maxAsDate","description":"Specifies the latest allowed date as a full date object.","type":"Date"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"min","description":"When the component resides in a form,\nspecifies the earliest allowed date (\"yyyy-mm-dd\").","type":"string"},{"name":"minAsDate","description":"Specifies the earliest allowed date as a full date object.","type":"Date"},{"name":"monthStyle","description":"Specifies the monthStyle used by the component.","type":"\"abbreviated\" | \"wide\""},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed.","type":"NumberingSystem"},{"name":"open","description":"When `true`, displays the `calcite-date-picker` component.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"placement","description":"Specifies the placement of the `calcite-date-picker` relative to the component.","type":"MenuPlacement"},{"name":"proximitySelectionDisabled","description":"When `true`, disables the default behavior on the third click of narrowing or extending the range.\nInstead starts a new range.","type":"boolean"},{"name":"range","description":"When `true`, activates a range for the component.","type":"boolean"},{"name":"readOnly","description":"When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.","type":"boolean"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"\"s\" | \"m\" | \"l\""},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"topLayerDisabled","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.","type":"boolean"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"Selected date as a string in ISO format (`\"yyyy-mm-dd\"`).","type":"string | string[]"},{"name":"valueAsDate","description":"The component's value as a full date object.","type":"Date | Date[]"}],"events":[{"name":"calciteInputDatePickerBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteInputDatePickerBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteInputDatePickerChange","type":"void","description":"Fires when the component's `value` changes."},{"name":"calciteInputDatePickerClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteInputDatePickerOpen","type":"void","description":"Fires when the component is open and animation is complete."}]}},{"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 margin spacing at the top of the component. \n- **--calcite-input-message-icon-color** - Specifies the component's icon color. ","attributes":[{"name":"icon","description":"Specifies an icon to display.","value":{"type":["string","boolean"]}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}}],"slots":[{"name":"","description":"A slot for adding text."}],"events":[],"js":{"properties":[{"name":"icon","description":"Specifies an icon to display.","type":"IconName | boolean"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"}],"events":[]}},{"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.\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** - Specifies the background color of the `loading` element. \n- **--calcite-input-loading-fill-color** - Specifies the fill color of the `loading` element. \n- **--calcite-input-number-background-color** - Specifies the background color of the component. \n- **--calcite-input-number-border-color** - Specifies the border color of the component. \n- **--calcite-input-number-corner-radius** - Specifies the border radius of the component. \n- **--calcite-input-number-icon-color** - Specifies the component's icon color. \n- **--calcite-input-number-height** - Specifies the height of the component. \n- **--calcite-input-number-placeholder-text-color** - Specifies the text color of the placeholder in the component. \n- **--calcite-input-number-text-color** - Specifies the text color of the component. \n- **--calcite-input-number-text-color-focus** - Specifies the text color of the component when focused. \n- **--calcite-input-prefix-size** - Specifies the width of the prefix element. \n- **--calcite-input-prefix-text-color** - Specifies the text color of the prefix element. \n- **--calcite-input-suffix-size** - Specifies the width of the suffix element. \n- **--calcite-input-suffix-text-color** - Specifies the text color of the suffix element. ","attributes":[{"name":"alignment","description":"Specifies the text alignment of the component's value.","default":"\"start\"","value":{"type":["\"start\"","\"center\"","\"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.","value":{"type":"string"}},{"name":"clearable","description":"When `true`, a clear button is displayed when the component has a value.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"group-separator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","default":"false","value":{"type":"boolean"}},{"name":"icon","description":"Specifies an icon to display.","value":{"type":["string","boolean"]}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"integer","description":"When `true`, restricts the component to integer numbers only and disables exponential notation.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component's button or hyperlink.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"loading","description":"When `true`, the component is in the loading state and `calcite-progress` is displayed.","default":"false","value":{"type":"boolean"}},{"name":"max","description":"When the component resides in a form,\nspecifies the maximum value.","value":{"type":"number"}},{"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.","value":{"type":"number"}},{"name":"min","description":"When the component resides in a form,\nspecifies the minimum value.","value":{"type":"number"}},{"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.","value":{"type":"number"}},{"name":"name","description":"Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.","value":{"type":"string"}},{"name":"number-button-type","description":"Specifies the placement of the buttons.","default":"\"vertical\"","value":{"type":["\"horizontal\"","\"vertical\"","\"none\""]}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"placeholder","description":"Specifies placeholder text for the component.","value":{"type":"string"}},{"name":"prefix-text","description":"Adds text to the start of the component.","value":{"type":"string"}},{"name":"read-only","description":"When `true`, the component's value can be read, but cannot be modified.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"step","description":"Specifies the granularity that the component's value must adhere to.","value":{"type":["\"any\"","number"]}},{"name":"suffix-text","description":"Adds text to the end of the component.","value":{"type":"string"}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"The component's value.","value":{"type":"string"}}],"slots":[{"name":"action","description":"A slot for positioning a `calcite-action` or other interactive content."},{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteInputNumberChange","type":"void","description":"Fires each time a new value is typed and committed."},{"name":"calciteInputNumberInput","type":"void","description":"Fires each time a new value is typed."}],"js":{"properties":[{"name":"alignment","description":"Specifies the text alignment of the component's value.","type":"Alignment"},{"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.","type":"AutoFill"},{"name":"clearable","description":"When `true`, a clear button is displayed when the component has a value.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"name":"groupSeparator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","type":"boolean"},{"name":"icon","description":"Specifies an icon to display.","type":"IconName | boolean"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"integer","description":"When `true`, restricts the component to integer numbers only and disables exponential notation.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component's button or hyperlink.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"loading","description":"When `true`, the component is in the loading state and `calcite-progress` is displayed.","type":"boolean"},{"name":"max","description":"When the component resides in a form,\nspecifies the maximum value.","type":"number"},{"name":"maxLength","description":"When the component resides in a form,\nspecifies the maximum length of text for the component's value.","type":"number"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"min","description":"When the component resides in a form,\nspecifies the minimum value.","type":"number"},{"name":"minLength","description":"When the component resides in a form,\nspecifies the minimum length of text for the component's value.","type":"number"},{"name":"name","description":"Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.","type":"string"},{"name":"numberButtonType","description":"Specifies the placement of the buttons.","type":"InputPlacement"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem"},{"name":"placeholder","description":"Specifies placeholder text for the component.","type":"string"},{"name":"prefixText","description":"Adds text to the start of the component.","type":"string"},{"name":"readOnly","description":"When `true`, the component's value can be read, but cannot be modified.","type":"boolean"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"step","description":"Specifies the granularity that the component's value must adhere to.","type":"number | \"any\""},{"name":"suffixText","description":"Adds text to the end of the component.","type":"string"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"The component's value.","type":"string"}],"events":[{"name":"calciteInputNumberChange","type":"void","description":"Fires each time a new value is typed and committed."},{"name":"calciteInputNumberInput","type":"void","description":"Fires each time a new value is typed."}]}},{"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 button next 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` & icon elements. \n- **--calcite-input-action-icon-color-hover** - Specifies the icon color of the component's `clearable` & icon elements when hovered. \n- **--calcite-input-action-icon-color-press** - Specifies the icon color of the component's `clearable` & icon elements when pressed. \n- **--calcite-input-loading-background-color** - Specifies the background color of the `loading` element. \n- **--calcite-input-loading-fill-color** - Specifies the fill color of the `loading` element. \n- **--calcite-input-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.","default":"\"start\"","value":{"type":["\"start\"","\"center\"","\"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.","value":{"type":"string"}},{"name":"clearable","description":"When `true`, a clear button is displayed when the component has a value.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"icon","description":"Specifies an icon to display.","value":{"type":["string","boolean"]}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component's button or hyperlink.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"loading","description":"When `true`, the component is in the loading state and `calcite-progress` is displayed.","default":"false","value":{"type":"boolean"}},{"name":"max-length","description":"When the component resides in a form,\nspecifies the maximum length of text for the component's value.","value":{"type":"number"}},{"name":"min-length","description":"When the component resides in a form,\nspecifies the minimum length of text for the component's value.","value":{"type":"number"}},{"name":"name","description":"Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.","value":{"type":"string"}},{"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.","value":{"type":"string"}},{"name":"placeholder","description":"Specifies placeholder text for the component.","value":{"type":"string"}},{"name":"prefix-text","description":"Adds text to the start of the component.","value":{"type":"string"}},{"name":"read-only","description":"When `true`, the component's value can be read, but cannot be modified.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"suffix-text","description":"Adds text to the end of the component.","value":{"type":"string"}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"The component's value.","value":{"type":"string"}}],"slots":[{"name":"action","description":"A slot for positioning a button next to the component."},{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteInputTextChange","type":"void","description":"Fires each time a new value is typed and committed."},{"name":"calciteInputTextInput","type":"void","description":"Fires each time a new value is typed."}],"js":{"properties":[{"name":"alignment","description":"Specifies the text alignment of the component's value.","type":"Alignment"},{"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.","type":"AutoFill"},{"name":"clearable","description":"When `true`, a clear button is displayed when the component has a value.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"name":"icon","description":"Specifies an icon to display.","type":"IconName | boolean"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component's button or hyperlink.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"loading","description":"When `true`, the component is in the loading state and `calcite-progress` is displayed.","type":"boolean"},{"name":"maxLength","description":"When the component resides in a form,\nspecifies the maximum length of text for the component's value.","type":"number"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"minLength","description":"When the component resides in a form,\nspecifies the minimum length of text for the component's value.","type":"number"},{"name":"name","description":"Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.","type":"string"},{"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.","type":"string"},{"name":"placeholder","description":"Specifies placeholder text for the component.","type":"string"},{"name":"prefixText","description":"Adds text to the start of the component.","type":"string"},{"name":"readOnly","description":"When `true`, the component's value can be read, but cannot be modified.","type":"boolean"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"suffixText","description":"Adds text to the end of the component.","type":"string"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"The component's value.","type":"string"}],"events":[{"name":"calciteInputTextChange","type":"void","description":"Fires each time a new value is typed and committed."},{"name":"calciteInputTextInput","type":"void","description":"Fires each time a new value is typed."}]}},{"name":"calcite-input-time-picker","description":"### Events\n- **calciteInputTimePickerBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteInputTimePickerBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteInputTimePickerChange** - Fires when the component's `value` is modified by the user.\n- **calciteInputTimePickerClose** - Fires when the component is closed and animation is complete.\n- **calciteInputTimePickerOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<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.\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 or focused. \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`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"focus-trap-disabled","description":"When `true`, prevents focus trapping.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"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.","default":"\"user\"","value":{"type":["\"24\"","\"user\"","\"12\""]}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"max","description":"When the component resides in a form,\nspecifies the maximum value.","value":{"type":"string"}},{"name":"min","description":"When the component resides in a form,\nspecifies the minimum value.","value":{"type":"string"}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"open","description":"When `true`, displays the `calcite-time-picker` component.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"placement","description":"Determines where the popover will be positioned relative to the input.","default":"\"auto\"","value":{"type":["\"auto\"","\"top\"","\"bottom\"","\"left\"","\"right\"","\"auto-start\"","\"auto-end\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\"","\"right-start\"","\"right-end\"","\"left-start\"","\"left-end\"","\"leading-start\"","\"leading\"","\"leading-end\"","\"trailing-end\"","\"trailing\"","\"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.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"step","description":"Specifies the granularity the component's `value` must adhere to (in seconds).","default":"60","value":{"type":"number"}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"The time value in ISO (24-hour) format.","value":{"type":"string"}}],"slots":[{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteInputTimePickerBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteInputTimePickerBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteInputTimePickerChange","type":"void","description":"Fires when the component's `value` is modified by the user."},{"name":"calciteInputTimePickerClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteInputTimePickerOpen","type":"void","description":"Fires when the component is open and animation is complete."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"focusTrapDisabled","description":"When `true`, prevents focus trapping.","type":"boolean"},{"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.","type":"string"},{"name":"hourFormat","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.","type":"HourFormat"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"max","description":"When the component resides in a form,\nspecifies the maximum value.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"min","description":"When the component resides in a form,\nspecifies the minimum value.","type":"string"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem"},{"name":"open","description":"When `true`, displays the `calcite-time-picker` component.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"placement","description":"Determines where the popover will be positioned relative to the input.","type":"LogicalPlacement"},{"name":"readOnly","description":"When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.","type":"boolean"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"step","description":"Specifies the granularity the component's `value` must adhere to (in seconds).","type":"number"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"The time value in ISO (24-hour) format.","type":"string"}],"events":[{"name":"calciteInputTimePickerBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteInputTimePickerBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteInputTimePickerChange","type":"void","description":"Fires when the component's `value` is modified by the user."},{"name":"calciteInputTimePickerClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteInputTimePickerOpen","type":"void","description":"Fires when the component is open and animation is complete."}]}},{"name":"calcite-input-time-zone","description":"### Events\n- **calciteInputTimeZoneBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteInputTimeZoneBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteInputTimeZoneChange** - Fires when the component's `value` changes.\n- **calciteInputTimeZoneClose** - Fires after the component is closed and animation is complete.\n- **calciteInputTimeZoneOpen** - Fires after the component is opened and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<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`.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"max-items","description":"Specifies the component's maximum number of options to display before displaying a scrollbar.","default":"0","value":{"type":"number"}},{"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.","default":"\"offset\"","value":{"type":["\"name\"","\"offset\"","\"region\""]}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"name":"offset-style","description":"Specifies how the offset will be displayed, where\n\n`\"user\"` uses `UTC` or `GMT` depending on the user's locale,\n`\"gmt\"` always uses `GMT`, and\n`\"utc\"` always uses `UTC`.\n\nThis only applies to the `offset` mode.","default":"\"user\"","value":{"type":["\"user\"","\"utc\"","\"gmt\""]}},{"name":"open","description":"When `true`, displays and positions the component.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"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.","default":"false","value":{"type":"boolean"}},{"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\"`).","value":{"type":["string","object"]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"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.","default":"false","value":{"type":"boolean"}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"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.","value":{"type":"string"}}],"slots":[{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteInputTimeZoneBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteInputTimeZoneBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteInputTimeZoneChange","type":"void","description":"Fires when the component's `value` changes."},{"name":"calciteInputTimeZoneClose","type":"void","description":"Fires after the component is closed and animation is complete."},{"name":"calciteInputTimeZoneOpen","type":"void","description":"Fires after the component is opened and animation is complete."}],"js":{"properties":[{"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`.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"maxItems","description":"Specifies the component's maximum number of options to display before displaying a scrollbar.","type":"number"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"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.","type":"TimeZoneMode"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"name":"offsetStyle","description":"Specifies how the offset will be displayed, where\n\n`\"user\"` uses `UTC` or `GMT` depending on the user's locale,\n`\"gmt\"` always uses `GMT`, and\n`\"utc\"` always uses `UTC`.\n\nThis only applies to the `offset` mode.","type":"OffsetStyle"},{"name":"open","description":"When `true`, displays and positions the component.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"readOnly","description":"When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.","type":"boolean"},{"name":"referenceDate","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\"`).","type":"Date | string"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"topLayerDisabled","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.","type":"boolean"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"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.","type":"string"}],"events":[{"name":"calciteInputTimeZoneBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteInputTimeZoneBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteInputTimeZoneChange","type":"void","description":"Fires when the component's `value` changes."},{"name":"calciteInputTimeZoneClose","type":"void","description":"Fires after the component is closed and animation is complete."},{"name":"calciteInputTimeZoneOpen","type":"void","description":"Fires after the component is opened and animation is complete."}]}},{"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 text alignment of the component.","default":"\"start\"","value":{"type":["\"start\"","\"center\"","\"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.","value":{"type":"string"}},{"name":"layout","description":"Defines the layout of the label in relation to the component. Use `\"inline\"` positions to wrap the label and component on the same line.  [Deprecated] The `\"default\"` value is deprecated, use `\"block\"` instead.","default":"\"default\"","value":{"type":["\"block\"","\"inline\"","\"inline-space-between\"","\"default\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"slots":[{"name":"","description":"A slot for adding text and a component that can be labeled."}],"events":[],"js":{"properties":[{"name":"alignment","description":"Specifies the text alignment of the component.","type":"Alignment"},{"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.","type":"string | undefined"},{"name":"layout","description":"Defines the layout of the label in relation to the component. Use `\"inline\"` positions to wrap the label and component on the same line.  [Deprecated] The `\"default\"` value is deprecated, use `\"block\"` instead.","type":"\"block\" | \"inline\" | \"inline-space-between\" | \"default\""},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"}],"events":[]}},{"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`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":["string","boolean"]}},{"name":"href","description":"Specifies the URL of the linked resource, which can be set as an absolute or relative path.","value":{"type":"string"}},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}},{"name":"rel","description":"Specifies the relationship to the linked document defined in `href`.","value":{"type":"string"}},{"name":"target","description":"Specifies the frame or window to open the linked document.","value":{"type":"string"}}],"slots":[{"name":"","description":"A slot for adding text."}],"events":[],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string | boolean"},{"name":"href","description":"Specifies the URL of the linked resource, which can be set as an absolute or relative path.","type":"string"},{"name":"iconEnd","description":"Specifies an icon to display at the end of the component.","type":"IconName"},{"name":"iconFlipRtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName"},{"name":"rel","description":"Specifies the relationship to the linked document defined in `href`.","type":"string"},{"name":"target","description":"Specifies the frame or window to open the linked document.","type":"string"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"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.","default":"\"flat\"","value":{"type":["\"nested\"","\"flat\""]}},{"name":"drag-enabled","description":"When `true`, `calcite-list-item`s are sortable via a draggable button.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"filter-label","description":"Specifies an accessible name for the filter input field.","value":{"type":"string"}},{"name":"filter-placeholder","description":"Specifies placeholder text for the component's filter input field.","value":{"type":"string"}},{"name":"filter-text","description":"Text for the component's filter input field.","default":"\"\"","value":{"type":"string"}},{"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.","value":{"type":"string"}},{"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\"`.","default":"\"interactive\"","value":{"type":["\"interactive\"","\"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.","value":{"type":"string"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"\"icon\"","value":{"type":["\"icon\"","\"border\"","\"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.","default":"\"none\"","value":{"type":["\"none\"","\"single\"","\"single-persist\"","\"multiple\""]}},{"name":"sort-disabled","description":"When `true`, and a `group` is defined, `calcite-list-item`s are no longer sortable.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding `calcite-list-item` and `calcite-list-item-group` elements."},{"name":"filter-actions-start","description":"A slot for adding actionable `calcite-action` elements before the filter component."},{"name":"filter-actions-end","description":"A slot for adding actionable `calcite-action` elements after the filter component."},{"name":"filter-no-results","description":"When `filterEnabled` is `true`, a slot for adding content to display when no results are found."}],"events":[{"name":"calciteListChange","type":"void","description":"Fires when the component's selected items have changed."},{"name":"calciteListDragEnd","type":"ListDragDetail","description":"Fires when the component's dragging has ended."},{"name":"calciteListDragStart","type":"ListDragDetail","description":"Fires when the component's dragging has started."},{"name":"calciteListFilter","type":"void","description":"Fires when the component's filter has changed."},{"name":"calciteListMoveHalt","type":"ListDragDetail","description":"Fires when a user attempts to move an element using the sort menu and 'canPut' or 'canPull' returns falsy."},{"name":"calciteListOrderChange","type":"ListDragDetail","description":"Fires when the component's item order changes."}],"js":{"properties":[{"name":"canPull","description":"When provided, the method will be called to determine whether the element can move from the list.","type":"(detail: ListDragDetail) => boolean | \"clone\""},{"name":"canPut","description":"When provided, the method will be called to determine whether the element can be added from another list.","type":"(detail: ListDragDetail) => boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"displayMode","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.","type":"ListDisplayMode"},{"name":"dragEnabled","description":"When `true`, `calcite-list-item`s are sortable via a draggable button.","type":"boolean"},{"name":"filteredData","description":"The currently filtered `calcite-list-item` data.","type":"ItemData[]"},{"name":"filteredItems","description":"The currently filtered `calcite-list-item`s.","type":"ListItem[]"},{"name":"filterEnabled","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.","type":"boolean"},{"name":"filterLabel","description":"Specifies an accessible name for the filter input field.","type":"string"},{"name":"filterPlaceholder","description":"Specifies placeholder text for the component's filter input field.","type":"string"},{"name":"filterPredicate","description":"Specifies a function to handle filtering.","type":"((item: ListItem) => boolean) | undefined"},{"name":"filterProps","description":"Specifies the properties to match against when filtering. If not set, all properties will be matched (`description`, `label`, `metadata`, and the `calcite-list-item-group`'s `heading`).","type":"string[]"},{"name":"filterText","description":"Text for the component's filter input field.","type":"string"},{"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.","type":"string | undefined"},{"name":"interactionMode","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\"`.","type":"InteractionMode"},{"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.","type":"string"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"selectedItems","description":"The currently selected items.","type":"ListItem[]"},{"name":"selectionAppearance","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.","type":"Extract<\"icon\" | \"border\" | \"highlight\", SelectionAppearance>"},{"name":"selectionMode","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.","type":"Extract<\"none\" | \"multiple\" | \"single\" | \"single-persist\", SelectionMode>"},{"name":"sortDisabled","description":"When `true`, and a `group` is defined, `calcite-list-item`s are no longer sortable.","type":"boolean"}],"events":[{"name":"calciteListChange","type":"void","description":"Fires when the component's selected items have changed."},{"name":"calciteListDragEnd","type":"ListDragDetail","description":"Fires when the component's dragging has ended."},{"name":"calciteListDragStart","type":"ListDragDetail","description":"Fires when the component's dragging has started."},{"name":"calciteListFilter","type":"void","description":"Fires when the component's filter has changed."},{"name":"calciteListMoveHalt","type":"ListDragDetail","description":"Fires when a user attempts to move an element using the sort menu and 'canPut' or 'canPull' returns falsy."},{"name":"calciteListOrderChange","type":"ListDragDetail","description":"Fires when the component's item order changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"closed","description":"When `true`, hides the component.","default":"false","value":{"type":"boolean"}},{"name":"description","description":"Specifies a description for the component. Displays below the `label`.","value":{"type":"string"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"drag-disabled","description":"When `true`, the item is not draggable.","default":"false","value":{"type":"boolean"}},{"name":"expanded","description":"When `true`, expands the component and its contents.","default":"false","value":{"type":"boolean"}},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component, displays above the `description`.","value":{"type":"string"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"selected","description":"When `true` and the parent `calcite-list`'s `selectionMode` is `\"single\"`, `\"single-persist\"', or `\"multiple\"`, the component is selected.","default":"false","value":{"type":"boolean"}},{"name":"sort-handle-open","description":"When `true`, displays and positions the sort handle.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"unavailable","description":"When `true`, the component's content displays as inactive.","default":"false","value":{"type":"boolean"}},{"name":"value","description":"The component's value.","value":{"type":"any"}}],"slots":[{"name":"","description":"A slot for adding `calcite-list`, `calcite-list-item` and `calcite-list-item-group` elements."},{"name":"actions-start","description":"A slot for adding actionable `calcite-action` elements before the content of the component."},{"name":"content-start","description":"A slot for adding non-actionable elements before the component's `label` and `description`."},{"name":"content","description":"A slot for adding non-actionable, centered content in place of the component's `label` and `description`."},{"name":"content-end","description":"A slot for adding non-actionable elements after the component's `label` and `description`."},{"name":"actions-end","description":"A slot for adding actionable `calcite-action` elements after the component's content."},{"name":"content-bottom","description":"A slot for adding content below the component's `label` and `description`."}],"events":[{"name":"calciteListItemClose","type":"void","description":"Fires when the close button is clicked."},{"name":"calciteListItemCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteListItemExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteListItemSelect","type":"void","description":"Fires when the component is selected."},{"name":"calciteListItemSortHandleBeforeClose","type":"void","description":"Fires when the sort handle is requested to be closed and before the closing transition begins."},{"name":"calciteListItemSortHandleBeforeOpen","type":"void","description":"Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteListItemSortHandleClose","type":"void","description":"Fires when the sort handle is closed and animation is complete."},{"name":"calciteListItemSortHandleOpen","type":"void","description":"Fires when the sort handle is open and animation is complete."},{"name":"calciteListItemToggle","type":"void","description":"Fires when the open button is clicked."}],"js":{"properties":[{"name":"closable","description":"When `true`, displays a close button in the component.","type":"boolean"},{"name":"closed","description":"When `true`, hides the component.","type":"boolean"},{"name":"description","description":"Specifies a description for the component. Displays below the `label`.","type":"string"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"dragDisabled","description":"When `true`, the item is not draggable.","type":"boolean"},{"name":"expanded","description":"When `true`, expands the component and its contents.","type":"boolean"},{"name":"iconEnd","description":"Specifies an icon to display at the end of the component.","type":"IconName"},{"name":"iconFlipRtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName"},{"name":"label","description":"Specifies an accessible label for the component, displays above the `description`.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"metadata","description":"Provides additional metadata to the component. Primary use is for a filter on the parent `calcite-list`.","type":"Record<string, unknown>"},{"name":"open","description":"When `true`, the item is open to show child components.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"selected","description":"When `true` and the parent `calcite-list`'s `selectionMode` is `\"single\"`, `\"single-persist\"', or `\"multiple\"`, the component is selected.","type":"boolean"},{"name":"sortHandleOpen","description":"When `true`, displays and positions the sort handle.","type":"boolean"},{"name":"topLayerDisabled","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.","type":"boolean"},{"name":"unavailable","description":"When `true`, the component's content displays as inactive.","type":"boolean"},{"name":"value","description":"The component's value.","type":"any"}],"events":[{"name":"calciteListItemClose","type":"void","description":"Fires when the close button is clicked."},{"name":"calciteListItemCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteListItemExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteListItemSelect","type":"void","description":"Fires when the component is selected."},{"name":"calciteListItemSortHandleBeforeClose","type":"void","description":"Fires when the sort handle is requested to be closed and before the closing transition begins."},{"name":"calciteListItemSortHandleBeforeOpen","type":"void","description":"Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteListItemSortHandleClose","type":"void","description":"Fires when the sort handle is closed and animation is complete."},{"name":"calciteListItemSortHandleOpen","type":"void","description":"Fires when the sort handle is open and animation is complete."},{"name":"calciteListItemToggle","type":"void","description":"Fires when the open button is clicked."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"heading","description":"Specifies the heading text for the nested `calcite-list-item` rows.","value":{"type":"string"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"slots":[{"name":"","description":"A slot for adding `calcite-list-item` and `calcite-list-item-group` elements."}],"events":[],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"heading","description":"Specifies the heading text for the nested `calcite-list-item` rows.","type":"string"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"text","description":"When not `inline`, displays text under the component's indicator.","default":"\"\"","value":{"type":"string"}},{"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.","default":"\"indeterminate\"","value":{"type":["\"indeterminate\"","\"determinate\"","\"determinate-value\""]}},{"name":"value","description":"The component's value. Valid only for `\"determinate\"` indicators. Percent complete of 100.","default":"0","value":{"type":"number"}}],"events":[],"js":{"properties":[{"name":"inline","description":"When `true`, the component displays smaller.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"text","description":"When not `inline`, displays text under the component's indicator.","type":"string"},{"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.","type":"\"indeterminate\" | \"determinate\" | \"determinate-value\""},{"name":"value","description":"The component's value. Valid only for `\"determinate\"` indicators. Percent complete of 100.","type":"number"}],"events":[]}},{"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.","value":{"type":"string"}},{"name":"layout","description":"Specifies the layout of the component.","default":"\"horizontal\"","value":{"type":["\"horizontal\"","\"vertical\""]}}],"events":[],"js":{"properties":[{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"layout","description":"Specifies the layout of the component.","type":"Layout"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"breadcrumb","description":"When `true`, the component displays a breadcrumb trail for use as a navigational aid.","default":"false","value":{"type":"boolean"}},{"name":"href","description":"Specifies the URL destination of the component, which can be set as an absolute or relative path.","value":{"type":"string"}},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"open","description":"When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu.","default":"false","value":{"type":"boolean"}},{"name":"rel","description":"Defines the relationship between the `href` value and the current document.","value":{"type":"string"}},{"name":"target","description":"Specifies where to open the linked document defined in the `href` property.","value":{"type":"string"}},{"name":"text","description":"Specifies the text to display.","value":{"type":"string"}}],"slots":[{"name":"submenu-item","description":"A slot for adding `calcite-menu-item`s in a submenu."}],"events":[{"name":"calciteMenuItemSelect","type":"void","description":"Emits when the component is selected."}],"js":{"properties":[{"name":"active","description":"When `true`, the component is highlighted.","type":"boolean"},{"name":"breadcrumb","description":"When `true`, the component displays a breadcrumb trail for use as a navigational aid.","type":"boolean"},{"name":"href","description":"Specifies the URL destination of the component, which can be set as an absolute or relative path.","type":"string"},{"name":"iconEnd","description":"Specifies an icon to display at the end of the component.","type":"IconName"},{"name":"iconFlipRtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"open","description":"When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu.","type":"boolean"},{"name":"rel","description":"Defines the relationship between the `href` value and the current document.","type":"string"},{"name":"target","description":"Specifies where to open the linked document defined in the `href` property.","type":"string"},{"name":"text","description":"Specifies the text to display.","type":"string"}],"events":[{"name":"calciteMenuItemSelect","type":"void","description":"Emits when the component is selected."}]}},{"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.","default":"\"outline-fill\"","value":{"type":["\"solid\"","\"outline\"","\"outline-fill\""]}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","default":"\"range\"","value":{"type":["\"single\"","\"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.","value":{"type":"string"}},{"name":"group-separator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","default":"false","value":{"type":"boolean"}},{"name":"high","description":"Specifies a high value.  When `fillType` is `\"range\"`, displays a different color when above the specified threshold.","value":{"type":"number"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"low","description":"Specifies a low value.  When `fillType` is `\"range\"`, displays a different color when above the specified threshold.","value":{"type":"number"}},{"name":"max","description":"Specifies the component's highest allowed value.","default":"100","value":{"type":"number"}},{"name":"min","description":"Specifies the component's lowest allowed value.","default":"0","value":{"type":"number"}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"range-labels","description":"When `true`, displays the values of `high`, `low`, `min`, and `max`.","default":"false","value":{"type":"boolean"}},{"name":"range-label-type","description":"When `rangeLabels` is `true`, specifies the format of displayed labels.","default":"\"percent\"","value":{"type":["\"percent\"","\"units\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"unit-label","description":"When `rangeLabelType` is `\"units\"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or  `min` values.","default":"\"\"","value":{"type":"string"}},{"name":"value","description":"Specifies the component's value.","value":{"type":"number"}},{"name":"value-label","description":"When `true`, displays the `value`.","default":"false","value":{"type":"boolean"}},{"name":"value-label-type","description":"When `valueLabel` is `true`, specifies the format of displayed label.","default":"\"percent\"","value":{"type":["\"percent\"","\"units\""]}}],"events":[],"js":{"properties":[{"name":"appearance","description":"Specifies the appearance of the component.","type":"Extract<\"outline\" | \"outline-fill\" | \"solid\", Appearance>"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"fillType","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.","type":"MeterFillType"},{"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.","type":"string"},{"name":"groupSeparator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","type":"boolean"},{"name":"high","description":"Specifies a high value.  When `fillType` is `\"range\"`, displays a different color when above the specified threshold.","type":"number"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"low","description":"Specifies a low value.  When `fillType` is `\"range\"`, displays a different color when above the specified threshold.","type":"number"},{"name":"max","description":"Specifies the component's highest allowed value.","type":"number"},{"name":"min","description":"Specifies the component's lowest allowed value.","type":"number"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem"},{"name":"rangeLabels","description":"When `true`, displays the values of `high`, `low`, `min`, and `max`.","type":"boolean"},{"name":"rangeLabelType","description":"When `rangeLabels` is `true`, specifies the format of displayed labels.","type":"MeterLabelType"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"unitLabel","description":"When `rangeLabelType` is `\"units\"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or  `min` values.","type":"string"},{"name":"value","description":"Specifies the component's value.","type":"number"},{"name":"valueLabel","description":"When `true`, displays the `value`.","type":"boolean"},{"name":"valueLabelType","description":"When `valueLabel` is `true`, specifies the format of displayed label.","type":"MeterLabelType"}],"events":[]}},{"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`.","value":{"type":"string"}},{"name":"navigation-action","description":"When `true`, displays a `calcite-action` and emits a `calciteNavActionSelect` event on selection change.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"logo","description":"A slot for adding a `calcite-logo` component to the primary navigation level."},{"name":"user","description":"A slot for adding a `calcite-user` component to the primary navigation level."},{"name":"progress","description":"A slot for adding a `calcite-progress` component to the primary navigation level."},{"name":"navigation-action","description":"A slot for adding a `calcite-action` component to the primary navigation level."},{"name":"content-start","description":"A slot for adding a `calcite-menu`, `calcite-action`, or other interactive elements in the start position of any navigation level."},{"name":"content-center","description":"A slot for adding a `calcite-menu`, `calcite-action`, or other interactive elements in the center position of the primary navigation level."},{"name":"content-end","description":"A slot for adding a `calcite-menu`, `calcite-action`, or other interactive elements in the end position of any navigation level."},{"name":"navigation-secondary","description":"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."},{"name":"navigation-tertiary","description":"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."}],"events":[{"name":"calciteNavigationActionSelect","type":"void","description":"When `navigationAction` is `true`, emits when the displayed action selection changes."}],"js":{"properties":[{"name":"label","description":"When `navigationAction` is `true`, specifies an accessible label for the `calcite-action`.","type":"string"},{"name":"navigationAction","description":"When `true`, displays a `calcite-action` and emits a `calciteNavActionSelect` event on selection change.","type":"boolean"}],"events":[{"name":"calciteNavigationActionSelect","type":"void","description":"When `navigationAction` is `true`, emits when the displayed action selection changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"description","description":"Specifies a description for the component. Displays below the `heading`.","value":{"type":"string"}},{"name":"heading","description":"Specifies the component's heading text.","value":{"type":"string"}},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","value":{"type":["1","2","3","4","5","6"]}},{"name":"href","description":"Specifies the URL destination of the component, which can be set as an absolute or relative path.","value":{"type":"string"}},{"name":"icon","description":"Specifies an icon to display.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"rel","description":"Defines the relationship between the `href` value and the current document.","value":{"type":"string"}},{"name":"target","description":"Specifies where to open the linked document defined in the `href` property.","value":{"type":"string"}},{"name":"thumbnail","description":"Specifies the `src` to an image.","value":{"type":"string"}}],"events":[],"js":{"properties":[{"name":"active","description":"When `true`, the component is highlighted.","type":"boolean"},{"name":"description","description":"Specifies a description for the component. Displays below the `heading`.","type":"string"},{"name":"heading","description":"Specifies the component's heading text.","type":"string"},{"name":"headingLevel","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","type":"HeadingLevel"},{"name":"href","description":"Specifies the URL destination of the component, which can be set as an absolute or relative path.","type":"string"},{"name":"icon","description":"Specifies an icon to display.","type":"IconName"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"rel","description":"Defines the relationship between the `href` value and the current document.","type":"string"},{"name":"target","description":"Specifies where to open the linked document defined in the `href` property.","type":"string"},{"name":"thumbnail","description":"Specifies the `src` to an image.","type":"string"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"full-name","description":"Specifies the full name of the user.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"text-disabled","description":"When `true`, hides the `fullName` and `username` contents.","default":"false","value":{"type":"boolean"}},{"name":"thumbnail","description":"Specifies the `src` to an image (remember to add a token if the user is private).","value":{"type":"string"}},{"name":"user-id","description":"Specifies the unique id of the user.","value":{"type":"string"}},{"name":"username","description":"Specifies the username of the user.","value":{"type":"string"}}],"events":[],"js":{"properties":[{"name":"active","description":"When `true`, the component is highlighted.","type":"boolean"},{"name":"fullName","description":"Specifies the full name of the user.","type":"string"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"textDisabled","description":"When `true`, hides the `fullName` and `username` contents.","type":"boolean"},{"name":"thumbnail","description":"Specifies the `src` to an image (remember to add a token if the user is private).","type":"string"},{"name":"userId","description":"Specifies the unique id of the user.","type":"string"},{"name":"username","description":"Specifies the username of the user.","type":"string"}],"events":[]}},{"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.","default":"\"outline-fill\"","value":{"type":["\"outline-fill\"","\"transparent\""]}},{"name":"closable","description":"When `true`, displays a close button in the component.","default":"false","value":{"type":"boolean"}},{"name":"icon","description":"When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.","value":{"type":["string","boolean"]}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"kind","description":"Specifies the kind of the component, which will apply to the top border and icon.","default":"\"brand\"","value":{"type":["\"brand\"","\"danger\"","\"info\"","\"neutral\"","\"warning\"","\"success\""]}},{"name":"open","description":"When `true`, the component is visible.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"width","description":"Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.","default":"\"auto\"","value":{"type":["\"auto\"","\"half\"","\"full\""]}}],"slots":[{"name":"title","description":"A slot for adding a title."},{"name":"message","description":"A slot for adding a message."},{"name":"link","description":"A slot for adding a `calcite-action` to take, such as: \"undo\", \"try again\", \"link to page\", etc."},{"name":"actions-end","description":"A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or less `calcite-action`s."}],"events":[{"name":"calciteNoticeBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteNoticeBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteNoticeClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteNoticeOpen","type":"void","description":"Fires when the component is open and animation is complete."}],"js":{"properties":[{"name":"appearance","description":"Specifies the appearance of the component.","type":"Extract<\"transparent\" | \"outline-fill\", Appearance>"},{"name":"closable","description":"When `true`, displays a close button in the component.","type":"boolean"},{"name":"icon","description":"When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.","type":"IconName | boolean"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"kind","description":"Specifies the kind of the component, which will apply to the top border and icon.","type":"Extract<\"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\" | \"neutral\", Kind>"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"open","description":"When `true`, the component is visible.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"width","description":"Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.","type":"Extract<Width, \"auto\" | \"half\" | \"full\">"}],"events":[{"name":"calciteNoticeBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteNoticeBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteNoticeClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteNoticeOpen","type":"void","description":"Fires when the component is open and animation is complete."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}},{"name":"value","description":"The component's value.","value":{"type":"any"}}],"events":[],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"},{"name":"value","description":"The component's value.","type":"any"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}}],"slots":[{"name":"","description":"A slot for adding `calcite-option`s."}],"events":[],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"page-size","description":"Specifies the number of items per page.","default":"20","value":{"type":"number"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"start-item","description":"Specifies the starting item number.","default":"1","value":{"type":"number"}},{"name":"total-items","description":"Specifies the total number of items.","default":"0","value":{"type":"number"}}],"events":[{"name":"calcitePaginationChange","type":"void","description":"Emits when the selected page changes."}],"js":{"properties":[{"name":"groupSeparator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","type":"boolean"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem"},{"name":"pageSize","description":"Specifies the number of items per page.","type":"number"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"startItem","description":"Specifies the starting item number.","type":"number"},{"name":"totalItems","description":"Specifies the total number of items.","type":"number"}],"events":[{"name":"calcitePaginationChange","type":"void","description":"Emits when the selected page changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"closed","description":"When `true`, the component will be hidden.","default":"false","value":{"type":"boolean"}},{"name":"collapsed","description":"When `true`, hides the component's content area.","default":"false","value":{"type":"boolean"}},{"name":"collapse-direction","description":"When `collapsible` is `true`, specifies the direction of the collapse icon.","default":"\"down\"","value":{"type":["\"down\"","\"up\""]}},{"name":"collapsible","description":"When `true`, the component is collapsible.","default":"false","value":{"type":"boolean"}},{"name":"description","description":"Specifies a description for the component.","value":{"type":"string"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"heading","description":"Specifies the component's heading text.","value":{"type":"string"}},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","value":{"type":["1","2","3","4","5","6"]}},{"name":"icon","description":"Specifies an icon to display.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"menu-open","description":"When `true`, the action menu items in the `header-menu-actions` slot are open.","default":"false","value":{"type":"boolean"}},{"name":"menu-placement","description":"Determines where the action menu will be positioned.","default":"\"bottom-end\"","value":{"type":["\"auto\"","\"top\"","\"bottom\"","\"left\"","\"right\"","\"auto-start\"","\"auto-end\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\"","\"right-start\"","\"right-end\"","\"left-start\"","\"left-end\"","\"leading-start\"","\"leading\"","\"leading-end\"","\"trailing-end\"","\"trailing\"","\"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding custom content."},{"name":"action-bar","description":"A slot for adding a `calcite-action-bar` to the component."},{"name":"alerts","description":"A slot for adding `calcite-alert`s to the component."},{"name":"content-bottom","description":"A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)."},{"name":"content-top","description":"A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated)."},{"name":"header-actions-start","description":"A slot for adding actions or content to the start side of the header."},{"name":"header-actions-end","description":"A slot for adding actions or content to the end side of the header."},{"name":"header-content","description":"A slot for adding custom content to the header."},{"name":"header-menu-actions","description":"A slot for adding an overflow menu with actions inside a `calcite-dropdown`."},{"name":"fab","description":"A slot for adding a `calcite-fab` (floating action button) to perform an action."},{"name":"footer","description":"A slot for adding custom content to the component's footer. Should not be used with the `\"footer-start\"` or `\"footer-end\"` slots."},{"name":"footer-end","description":"A slot for adding custom content to a trailing footer. Should not be used with the `\"footer\"` slot."},{"name":"footer-start","description":"A slot for adding custom content to a leading footer. Should not be used with the `\"footer\"` slot."}],"events":[{"name":"calcitePanelClose","type":"void","description":"Fires when the close button is clicked."},{"name":"calcitePanelCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calcitePanelExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calcitePanelScroll","type":"void","description":"Fires when the content is scrolled."},{"name":"calcitePanelToggle","type":"void","description":"Fires when the collapse button is clicked."}],"js":{"properties":[{"name":"beforeClose","description":"Passes a function to run before the component closes.","type":"() => Promise<void>"},{"name":"closable","description":"When `true`, displays a close button in the component.","type":"boolean"},{"name":"closed","description":"When `true`, the component will be hidden.","type":"boolean"},{"name":"collapsed","description":"When `true`, hides the component's content area.","type":"boolean"},{"name":"collapseDirection","description":"When `collapsible` is `true`, specifies the direction of the collapse icon.","type":"CollapseDirection"},{"name":"collapsible","description":"When `true`, the component is collapsible.","type":"boolean"},{"name":"description","description":"Specifies a description for the component.","type":"string"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"heading","description":"Specifies the component's heading text.","type":"string"},{"name":"headingLevel","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","type":"HeadingLevel"},{"name":"icon","description":"Specifies an icon to display.","type":"IconName"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"menuFlipPlacements","description":"Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available.","type":"FlipPlacement[]"},{"name":"menuOpen","description":"When `true`, the action menu items in the `header-menu-actions` slot are open.","type":"boolean"},{"name":"menuPlacement","description":"Determines where the action menu will be positioned.","type":"LogicalPlacement"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"topLayerDisabled","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.","type":"boolean"}],"events":[{"name":"calcitePanelClose","type":"void","description":"Fires when the close button is clicked."},{"name":"calcitePanelCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calcitePanelExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calcitePanelScroll","type":"void","description":"Fires when the content is scrolled."},{"name":"calcitePanelToggle","type":"void","description":"Fires when the collapse button is clicked."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"closable","description":"When `true`, displays a close button in the component.","default":"false","value":{"type":"boolean"}},{"name":"flip-disabled","description":"When `true`, prevents flipping the component's placement when overlapping its `referenceElement`.","default":"false","value":{"type":"boolean"}},{"name":"focus-trap-disabled","description":"When `true`, prevents focus trapping.","default":"false","value":{"type":"boolean"}},{"name":"heading","description":"Specifies the component's heading text.","value":{"type":"string"}},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","value":{"type":["1","2","3","4","5","6"]}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"offset-distance","description":"Offsets the position of the popover away from the `referenceElement`.","value":{"type":"number"}},{"name":"offset-skidding","description":"Offsets the position of the component along the `referenceElement`.","default":"0","value":{"type":"number"}},{"name":"open","description":"When `true`, displays and positions the component.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"placement","description":"Determines where the component will be positioned relative to the `referenceElement`.","default":"\"auto\"","value":{"type":["\"auto\"","\"top\"","\"bottom\"","\"left\"","\"right\"","\"auto-start\"","\"auto-end\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\"","\"right-start\"","\"right-end\"","\"left-start\"","\"left-end\"","\"leading-start\"","\"leading\"","\"leading-end\"","\"trailing-end\"","\"trailing\"","\"trailing-start\""]}},{"name":"pointer-disabled","description":"When `true`, removes the caret pointer.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":["string","object"]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding custom content."}],"events":[{"name":"calcitePopoverBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calcitePopoverBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calcitePopoverClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calcitePopoverOpen","type":"void","description":"Fires when the component is open and animation is complete."}],"js":{"properties":[{"name":"autoClose","description":"When `true`, clicking outside of the component automatically closes open `calcite-popover`s.","type":"boolean"},{"name":"closable","description":"When `true`, displays a close button in the component.","type":"boolean"},{"name":"flipDisabled","description":"When `true`, prevents flipping the component's placement when overlapping its `referenceElement`.","type":"boolean"},{"name":"flipPlacements","description":"Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available.","type":"FlipPlacement[]"},{"name":"focusTrapDisabled","description":"When `true`, prevents focus trapping.","type":"boolean"},{"name":"focusTrapOptions","description":"Specifies custom focus trap configuration on the component, where\n\n`\"allowOutsideClick`\" allows outside clicks,\n`\"initialFocus\"` enables initial focus,\n`\"returnFocusOnDeactivate\"` returns focus when not active,\n`\"extraContainers\"` specifies additional focusable elements external to the trap, such as 3rd-party components appending elements to the document body, and\n`\"setReturnFocus\"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).","type":"Partial<FocusTrapOptions>"},{"name":"heading","description":"Specifies the component's heading text.","type":"string"},{"name":"headingLevel","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","type":"HeadingLevel"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"offsetDistance","description":"Offsets the position of the popover away from the `referenceElement`.","type":"number"},{"name":"offsetSkidding","description":"Offsets the position of the component along the `referenceElement`.","type":"number"},{"name":"open","description":"When `true`, displays and positions the component.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"placement","description":"Determines where the component will be positioned relative to the `referenceElement`.","type":"LogicalPlacement"},{"name":"pointerDisabled","description":"When `true`, removes the caret pointer.","type":"boolean"},{"name":"referenceElement","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.","type":"ReferenceElement | string"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"topLayerDisabled","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.","type":"boolean"},{"name":"triggerDisabled","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.","type":"boolean"}],"events":[{"name":"calcitePopoverBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calcitePopoverBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calcitePopoverClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calcitePopoverOpen","type":"void","description":"Fires when the component is open and animation is complete."}]}},{"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.","value":{"type":"string"}},{"name":"reversed","description":"When `true` and type is `\"indeterminate\"`, reverses the animation direction.","default":"false","value":{"type":"boolean"}},{"name":"text","description":"Text that displays under the component's indicator.","value":{"type":"string"}},{"name":"type","description":"Specifies the component type.\n\nUse `\"indeterminate\"` if finding actual progress value is impossible.","default":"\"determinate\"","value":{"type":["\"indeterminate\"","\"determinate\""]}},{"name":"value","description":"When `type` is `\"determinate\"`, specifies the component's value with a range of 0 to 100.","default":"0","value":{"type":"number"}}],"events":[],"js":{"properties":[{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"reversed","description":"When `true` and type is `\"indeterminate\"`, reverses the animation direction.","type":"boolean"},{"name":"text","description":"Text that displays under the component's indicator.","type":"string"},{"name":"type","description":"Specifies the component type.\n\nUse `\"indeterminate\"` if finding actual progress value is impossible.","type":"\"indeterminate\" | \"determinate\""},{"name":"value","description":"When `type` is `\"determinate\"`, specifies the component's value with a range of 0 to 100.","type":"number"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component inherited from the `calcite-radio-button-group`.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"value","description":"The component's value.","value":{"type":"any"}}],"events":[{"name":"calciteRadioButtonChange","type":"void","description":"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`."}],"js":{"properties":[{"name":"checked","description":"When `true`, the component is checked.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component inherited from the `calcite-radio-button-group`.","type":"Scale"},{"name":"value","description":"The component's value.","type":"any"}],"events":[{"name":"calciteRadioButtonChange","type":"void","description":"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`."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"layout","description":"Specifies the layout of the component.","default":"\"horizontal\"","value":{"type":["\"horizontal\"","\"vertical\""]}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the validation message.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}}],"slots":[{"name":"","description":"A slot for adding `calcite-radio-button`s."},{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteRadioButtonGroupChange","type":"void","description":"Fires when the component has changed."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"layout","description":"Specifies the layout of the component.","type":"Extract<\"horizontal\" | \"vertical\", Layout>"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"selectedItem","description":"Specifies the component's selected item.","type":"RadioButton"},{"name":"status","description":"Specifies the status of the validation message.","type":"Status"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"}],"events":[{"name":"calciteRadioButtonGroupChange","type":"void","description":"Fires when the component has changed."}]}},{"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.","value":{"type":"number"}},{"name":"count","description":"Specifies the number of previous ratings to display.","value":{"type":"number"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"name":"read-only","description":"When `true`, the component's value can be read, but cannot be modified.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"show-chip","description":"When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`.","default":"false","value":{"type":"boolean"}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"The component's value.","value":{"type":"number"}}],"slots":[{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteRatingChange","type":"void","description":"Fires when the component's value changes."}],"js":{"properties":[{"name":"average","description":"Specifies a cumulative average from previous ratings to display.","type":"number"},{"name":"count","description":"Specifies the number of previous ratings to display.","type":"number"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"name":"readOnly","description":"When `true`, the component's value can be read, but cannot be modified.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"showChip","description":"When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`.","type":"boolean"},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"The component's value.","type":"number"}],"events":[{"name":"calciteRatingChange","type":"void","description":"Fires when the component's value changes."}]}},{"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding custom content, primarily loading information."}],"events":[],"js":{"properties":[{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"}],"events":[]}},{"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.","default":"\"solid\"","value":{"type":["\"solid\"","\"outline\"","\"outline-fill\""]}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"layout","description":"Defines the layout of the component.","default":"\"horizontal\"","value":{"type":["\"horizontal\"","\"vertical\""]}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the validation message.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"The component's `selectedItem` value.","value":{"type":"string"}},{"name":"width","description":"Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.","default":"\"auto\"","value":{"type":["\"auto\"","\"full\""]}}],"slots":[{"name":"","description":"A slot for adding `calcite-segmented-control-item`s."},{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteSegmentedControlChange","type":"void","description":"Fires when the `calcite-segmented-control-item` selection changes."}],"js":{"properties":[{"name":"appearance","description":"Specifies the appearance style of the component.","type":"Extract<\"outline\" | \"outline-fill\" | \"solid\", Appearance>"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"layout","description":"Defines the layout of the component.","type":"Extract<\"horizontal\" | \"vertical\", Layout>"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"selectedItem","description":"The component's selected item `HTMLElement`.","type":"SegmentedControlItem"},{"name":"status","description":"Specifies the status of the validation message.","type":"Status"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"The component's `selectedItem` value.","type":"string"},{"name":"width","description":"Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.","type":"Extract<\"auto\" | \"full\", Width>"}],"events":[{"name":"calciteSegmentedControlChange","type":"void","description":"Fires when the `calcite-segmented-control-item` selection changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}},{"name":"value","description":"The component's value.","value":{"type":"any"}}],"events":[],"js":{"properties":[{"name":"checked","description":"When `true`, the component is checked.","type":"boolean"},{"name":"iconEnd","description":"Specifies an icon to display at the end of the component.","type":"IconName | undefined"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName | undefined"},{"name":"value","description":"The component's value.","type":"any | null"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"status","description":"Specifies the status of the input field, which determines the message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"The component's `selectedOption` value.","value":{"type":"string"}},{"name":"width","description":"Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.","default":"\"auto\"","value":{"type":["\"auto\"","\"half\"","\"full\""]}}],"slots":[{"name":"","description":"A slot for adding `calcite-option`s."},{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteSelectChange","type":"void","description":"Fires when the `selectedOption` changes."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"selectedOption","description":"The component's selected option `HTMLElement`.","type":"Option"},{"name":"status","description":"Specifies the status of the input field, which determines the message and icons.","type":"Status"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"The component's `selectedOption` value.","type":"string"},{"name":"width","description":"Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.","type":"Extract<Width, \"auto\" | \"half\" | \"full\">"}],"events":[{"name":"calciteSelectChange","type":"void","description":"Fires when the `selectedOption` changes."}]}},{"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\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.","default":"\"overlay\"","value":{"type":["\"overlay\"","\"float\""]}},{"name":"escape-disabled","description":"When `true`, disables the default close on escape behavior.","default":"false","value":{"type":"boolean"}},{"name":"focus-trap-disabled","description":"When `true`, prevents focus trapping.","default":"false","value":{"type":"boolean"}},{"name":"height","description":"Specifies the component's height.","value":{"type":["\"s\"","\"m\"","\"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.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"open","description":"When `true`, displays and positions the component.","default":"false","value":{"type":"boolean"}},{"name":"outside-close-disabled","description":"When `true`, disables closing the component when the area outside of the component is clicked.","default":"false","value":{"type":"boolean"}},{"name":"position","description":"Determines where the component will be positioned.","default":"\"inline-start\"","value":{"type":["\"inline-start\"","\"inline-end\"","\"block-start\"","\"block-end\""]}},{"name":"resizable","description":"When `true`, the component is resizable.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"width","description":"Specifies the components width.","value":{"type":["\"s\"","\"m\"","\"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.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"slots":[{"name":"","description":"A slot for adding custom content."}],"events":[{"name":"calciteSheetBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteSheetBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteSheetClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteSheetOpen","type":"void","description":"Fires when the component is open and animation is complete."}],"js":{"properties":[{"name":"beforeClose","description":"Passes a function to run before the component closes.","type":"(el: Sheet) => Promise<void>"},{"name":"displayMode","description":"Specifies the display mode - `\"float\"` separates content from main layout,\nand `\"overlay\"` displays on top of center content.","type":"DisplayMode"},{"name":"escapeDisabled","description":"When `true`, disables the default close on escape behavior.","type":"boolean"},{"name":"focusTrapDisabled","description":"When `true`, prevents focus trapping.","type":"boolean"},{"name":"focusTrapOptions","description":"Specifies custom focus trap configuration on the component, where\n\n`\"allowOutsideClick\"` allows outside clicks,\n`\"initialFocus\"` enables initial focus,\n`\"returnFocusOnDeactivate\"` returns focus when not active,\n`\"extraContainers\"` specifies additional focusable elements external to the trap, such as 3rd-party components appending elements to the document body, and\n`\"setReturnFocus\"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).","type":"Partial<FocusTrapOptions>"},{"name":"height","description":"Specifies the component's height.","type":"Height"},{"name":"heightScale","description":"When `position` is `\"block-start\"` or `\"block-end\"`, specifies the component's height.","type":"Scale"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"open","description":"When `true`, displays and positions the component.","type":"boolean"},{"name":"outsideCloseDisabled","description":"When `true`, disables closing the component when the area outside of the component is clicked.","type":"boolean"},{"name":"position","description":"Determines where the component will be positioned.","type":"LogicalFlowPosition"},{"name":"resizable","description":"When `true`, the component is resizable.","type":"boolean"},{"name":"topLayerDisabled","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.","type":"boolean"},{"name":"width","description":"Specifies the components width.","type":"Extract<Width, Scale>"},{"name":"widthScale","description":"When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the component's width.","type":"Scale"}],"events":[{"name":"calciteSheetBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteSheetBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteSheetClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteSheetOpen","type":"void","description":"Fires when the component is open and animation is complete."}]}},{"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding custom content. This content will appear between any leading and trailing panels added to the component, such as a map."},{"name":"header","description":"A slot for adding header content. This content will be positioned at the top of the component."},{"name":"footer","description":"A slot for adding footer content. This content will be positioned at the bottom of the component."},{"name":"panel-start","description":"A slot for adding the starting `calcite-shell-panel`."},{"name":"panel-end","description":"A slot for adding the ending `calcite-shell-panel`."},{"name":"panel-top","description":"A slot for adding the top `calcite-shell-panel`."},{"name":"panel-bottom","description":"A slot for adding the bottom `calcite-shell-panel`."},{"name":"dialogs","description":"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`."},{"name":"alerts","description":"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`."},{"name":"sheets","description":"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`."}],"events":[],"js":{"properties":[{"name":"contentBehind","description":"When `true`, positions the center content behind any `calcite-shell-panel`s.","type":"boolean"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"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.","default":"\"dock\"","value":{"type":["\"dock\"","\"overlay\"","\"float\"","\"float-all\"","\"float-content\""]}},{"name":"height","description":"Specifies the component's height.","value":{"type":["\"s\"","\"m\"","\"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.","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"layout","description":"**Deprecated**: in v4.0.0, removal target v6.0.0 -  No longer necessary.. Specifies the component's direction.","default":"\"vertical\"","value":{"type":["\"horizontal\"","\"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\"`).","default":"\"start\"","value":{"type":["\"start\"","\"end\""]}},{"name":"resizable","description":"When `true` and `displayMode` is `\"dock\"` or `\"overlay\"`, the component's content area is resizable.","default":"false","value":{"type":"boolean"}},{"name":"width","description":"Specifies the component's width.","value":{"type":["\"s\"","\"m\"","\"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.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"slots":[{"name":"","description":"A slot for adding custom content."},{"name":"action-bar","description":"A slot for adding a `calcite-action-bar` to the component."}],"events":[{"name":"calciteShellPanelCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteShellPanelExpand","type":"void","description":"Fires when the component's content area is expanded."}],"js":{"properties":[{"name":"collapsed","description":"When `true`, hides the component's content area.","type":"boolean"},{"name":"displayMode","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.","type":"DisplayMode"},{"name":"height","description":"Specifies the component's height.","type":"Height"},{"name":"heightScale","description":"When `layout` is `horizontal`, specifies the component's maximum height.","type":"Scale"},{"name":"layout","description":"Specifies the component's direction.","type":"Extract<\"horizontal\" | \"vertical\", Layout>"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"position","description":"Specifies the component's position. Will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"Extract<\"start\" | \"end\", Position>"},{"name":"resizable","description":"When `true` and `displayMode` is `\"dock\"` or `\"overlay\"`, the component's content area is resizable.","type":"boolean"},{"name":"width","description":"Specifies the component's width.","type":"Extract<Width, Scale>"},{"name":"widthScale","description":"When `layout` is `vertical`, specifies the component's width.","type":"Scale"}],"events":[{"name":"calciteShellPanelCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteShellPanelExpand","type":"void","description":"Fires when the component's content area is expanded."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"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.","default":"\"start\"","value":{"type":["\"start\"","\"none\"","\"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.","value":{"type":"string"}},{"name":"group-separator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","default":"false","value":{"type":"boolean"}},{"name":"has-histogram","description":"When `true`, indicates a histogram is present.","default":"false","value":{"type":"boolean"}},{"name":"label-handles","description":"When `true`, displays numeric value labels on handles.","default":"false","value":{"type":"boolean"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"label-ticks","description":"When `true` and `ticks` is specified, displays label tick marks with their numeric value.","default":"false","value":{"type":"boolean"}},{"name":"max","description":"The component's maximum selectable value.","default":"100","value":{"type":"number"}},{"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\"`.","value":{"type":"string"}},{"name":"max-value","description":"For multiple values, specifies the component's upper value.","value":{"type":"number"}},{"name":"min","description":"Specifies the component's minimum selectable value.","default":"0","value":{"type":"number"}},{"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\"`.","value":{"type":"string"}},{"name":"min-value","description":"For multiple values, the component's lower value.","value":{"type":"number"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"name","description":"Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission","value":{"type":"string"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"page-step","description":"Specifies the interval to move with the `Page up` or `Page down` keys.","value":{"type":"number"}},{"name":"precise","description":"When `true`, sets a finer point for handles.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the component's size.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"snap","description":"When `true` and `step` is specified, enables snap selection via a mouse.","default":"false","value":{"type":"boolean"}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"step","description":"Specifies the interval to move with the `Arrow up` or `Arrow down` keys.","default":"1","value":{"type":"number"}},{"name":"ticks","description":"Specifies the interval between tick marks on the number line.","value":{"type":"number"}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"The component's value.","value":{"type":["number","object"]}}],"slots":[{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."}],"events":[{"name":"calciteSliderChange","type":"void","description":"Fires when the component's handle is released.\n\nNote: To constantly listen to the drag event,\nuse `calciteSliderInput` instead."},{"name":"calciteSliderInput","type":"void","description":"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."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"fillPlacement","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.","type":"\"start\" | \"none\" | \"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.","type":"string"},{"name":"groupSeparator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","type":"boolean"},{"name":"hasHistogram","description":"When `true`, indicates a histogram is present.","type":"boolean"},{"name":"histogram","description":"Specifies a list of the histogram's x,y coordinates within the component's `min` and `max`. Displays above the component's track.","type":"DataSeries"},{"name":"histogramStops","description":"Specifies a list of single color stops for a histogram, sorted by offset in ascending order.","type":"ColorStop[]"},{"name":"labelFormatter","description":"When specified, allows users to customize handle labels.","type":"(value: number, type: \"value\" | \"min\" | \"max\" | \"tick\", defaultFormatter: (value: number) => string) => string | undefined"},{"name":"labelHandles","description":"When `true`, displays numeric value labels on handles.","type":"boolean"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"labelTicks","description":"When `true` and `ticks` is specified, displays label tick marks with their numeric value.","type":"boolean"},{"name":"max","description":"The component's maximum selectable value.","type":"number"},{"name":"maxLabel","description":"When `minValue` and `maxValue` are specified for multiple values, specifies the accessible name for the `maxValue` handle, such as `\"Temperature, upper bound\"`.","type":"string"},{"name":"maxValue","description":"For multiple values, specifies the component's upper value.","type":"number"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"min","description":"Specifies the component's minimum selectable value.","type":"number"},{"name":"minLabel","description":"Specifies the accessible name associated with the `value` handle (for single values) or `minValue` handle (for multiple values). For instance, `\"Temperature, lower bound\"`.","type":"string"},{"name":"minValue","description":"For multiple values, the component's lower value.","type":"number"},{"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.","type":"boolean"},{"name":"name","description":"Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission","type":"string"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem"},{"name":"pageStep","description":"Specifies the interval to move with the `Page up` or `Page down` keys.","type":"number"},{"name":"precise","description":"When `true`, sets a finer point for handles.","type":"boolean"},{"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.","type":"boolean"},{"name":"scale","description":"Specifies the component's size.","type":"Scale"},{"name":"snap","description":"When `true` and `step` is specified, enables snap selection via a mouse.","type":"boolean"},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"step","description":"Specifies the interval to move with the `Arrow up` or `Arrow down` keys.","type":"number"},{"name":"ticks","description":"Specifies the interval between tick marks on the number line.","type":"number"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"The component's value.","type":"number | number[]"}],"events":[{"name":"calciteSliderChange","type":"void","description":"Fires when the component's handle is released.\n\nNote: To constantly listen to the drag event,\nuse `calciteSliderInput` instead."},{"name":"calciteSliderInput","type":"void","description":"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."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"open","description":"When `true`, displays and positions the component.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"placement","description":"Determines where the component will be positioned relative to the container element.","default":"\"bottom-start\"","value":{"type":["\"top\"","\"bottom\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"set-position","description":"Specifies the handle's current position.","value":{"type":"number"}},{"name":"set-size","description":"Specifies the total number of sortable items.","value":{"type":"number"}},{"name":"sort-disabled","description":"When `true`, prevents sorting of items.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"width-scale","description":"Specifies the width of the component.","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"events":[{"name":"calciteSortHandleAdd","type":"AddEventDetail","description":"Fires when an add item has been selected."},{"name":"calciteSortHandleBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteSortHandleBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteSortHandleClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteSortHandleMove","type":"MoveEventDetail","description":"Fires when a move item has been selected."},{"name":"calciteSortHandleOpen","type":"void","description":"Fires when the component is open and animation is complete."},{"name":"calciteSortHandleReorder","type":"ReorderEventDetail","description":"Fires when a reorder has been selected."}],"js":{"properties":[{"name":"addToItems","description":"Defines the \"Add to\" items.","type":"SortMenuItem[]"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"flipPlacements","description":"Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available.","type":"FlipPlacement[]"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"moveToItems","description":"Defines the \"Move to\" items.","type":"SortMenuItem[]"},{"name":"open","description":"When `true`, displays and positions the component.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"placement","description":"Determines where the component will be positioned relative to the container element.","type":"MenuPlacement"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"},{"name":"setPosition","description":"Specifies the handle's current position.","type":"number"},{"name":"setSize","description":"Specifies the total number of sortable items.","type":"number"},{"name":"sortDisabled","description":"When `true`, prevents sorting of items.","type":"boolean"},{"name":"topLayerDisabled","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.","type":"boolean"},{"name":"widthScale","description":"Specifies the width of the component.","type":"Scale"}],"events":[{"name":"calciteSortHandleAdd","type":"AddEventDetail","description":"Fires when an add item has been selected."},{"name":"calciteSortHandleBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteSortHandleBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteSortHandleClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteSortHandleMove","type":"MoveEventDetail","description":"Fires when a move item has been selected."},{"name":"calciteSortHandleOpen","type":"void","description":"Fires when the component is open and animation is complete."},{"name":"calciteSortHandleReorder","type":"ReorderEventDetail","description":"Fires when a reorder has been selected."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"drag-selector","description":"Specifies which items inside the element should be draggable.","value":{"type":"string"}},{"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.","value":{"type":"string"}},{"name":"handle-selector","description":"Specifies the selector for the handle elements.","default":"\"calcite-handle\"","value":{"type":"string"}},{"name":"layout","description":"Indicates the horizontal or vertical orientation of the component.","default":"\"vertical\"","value":{"type":["\"horizontal\"","\"vertical\"","\"grid\""]}},{"name":"loading","description":"When `true`, content is waiting to be loaded. This state shows a busy indicator.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding sortable items."}],"events":[{"name":"calciteListOrderChange","type":"void","description":"Fires when the order of the list changes."}],"js":{"properties":[{"name":"canPull","description":"When provided, the method will be called to determine whether the element can move from the list.","type":"(detail: DragDetail) => boolean"},{"name":"canPut","description":"When provided, the method will be called to determine whether the element can be added from another list.","type":"(detail: DragDetail) => boolean"},{"name":"disabled","description":"When `true`, disabled prevents interaction. This state shows items with lower opacity/grayed.","type":"boolean"},{"name":"dragSelector","description":"Specifies which items inside the element should be draggable.","type":"string | undefined"},{"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.","type":"string | undefined"},{"name":"handleSelector","description":"Specifies the selector for the handle elements.","type":"string"},{"name":"layout","description":"Indicates the horizontal or vertical orientation of the component.","type":"Extract<\"horizontal\" | \"vertical\" | \"grid\", Layout>"},{"name":"loading","description":"When `true`, content is waiting to be loaded. This state shows a busy indicator.","type":"boolean"}],"events":[{"name":"calciteListOrderChange","type":"void","description":"Fires when the order of the list changes."}]}},{"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.","default":"\"solid\"","value":{"type":["\"solid\"","\"outline\"","\"outline-fill\"","\"transparent\""]}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":["string","boolean"]}},{"name":"dropdown-icon-type","description":"Specifies the icon used for the dropdown menu.","default":"\"chevron\"","value":{"type":["\"chevron\"","\"caret\"","\"ellipsis\"","\"overflow\""]}},{"name":"dropdown-label","description":"Accessible name for the dropdown menu.","value":{"type":"string"}},{"name":"href","description":"Specifies the URL of the linked resource, which can be set as an absolute or relative path.","value":{"type":"string"}},{"name":"kind","description":"Specifies the kind of the component, which will apply to border and background, if applicable.","default":"\"brand\"","value":{"type":["\"brand\"","\"danger\"","\"inverse\"","\"neutral\""]}},{"name":"loading","description":"When `true`, a busy indicator is displayed on the primary button.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"placement","description":"Determines where the component will be positioned relative to the container element.","default":"\"bottom-end\"","value":{"type":["\"top\"","\"bottom\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\""]}},{"name":"primary-icon-end","description":"Specifies an icon to display at the end of the primary button.","value":{"type":"string"}},{"name":"primary-icon-flip-rtl","description":"Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"primary-icon-start","description":"Specifies an icon to display at the start of the primary button.","value":{"type":"string"}},{"name":"primary-label","description":"Speficies an accessible name for the primary button.","value":{"type":"string"}},{"name":"primary-text","description":"Specifies the text displayed in the primary button.","value":{"type":"string"}},{"name":"rel","description":"Defines the relationship between the `href` value and the current document.","value":{"type":"string"}},{"name":"scale","description":"Specifies the component's size.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"target","description":"Specifies where to open the linked document defined in the `href` property.","value":{"type":"string"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"width","description":"Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.","default":"\"auto\"","value":{"type":["\"auto\"","\"half\"","\"full\""]}}],"slots":[{"name":"","description":"A slot for adding `calcite-dropdown` content."}],"events":[{"name":"calciteSplitButtonPrimaryClick","type":"void","description":"Fires when the primary button is clicked."},{"name":"calciteSplitButtonSecondaryClick","type":"void","description":"Fires when the dropdown menu is clicked."}],"js":{"properties":[{"name":"appearance","description":"Specifies the appearance style of the component.","type":"Extract<\"outline\" | \"outline-fill\" | \"solid\" | \"transparent\", Appearance>"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string | boolean"},{"name":"dropdownIconType","description":"Specifies the icon used for the dropdown menu.","type":"DropdownIconType"},{"name":"dropdownLabel","description":"Accessible name for the dropdown menu.","type":"string"},{"name":"flipPlacements","description":"Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available.","type":"FlipPlacement[]"},{"name":"href","description":"Specifies the URL of the linked resource, which can be set as an absolute or relative path.","type":"string"},{"name":"kind","description":"Specifies the kind of the component, which will apply to border and background, if applicable.","type":"Extract<\"brand\" | \"danger\" | \"inverse\" | \"neutral\", Kind>"},{"name":"loading","description":"When `true`, a busy indicator is displayed on the primary button.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"placement","description":"Determines where the component will be positioned relative to the container element.","type":"MenuPlacement"},{"name":"primaryIconEnd","description":"Specifies an icon to display at the end of the primary button.","type":"IconName"},{"name":"primaryIconFlipRtl","description":"Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"primaryIconStart","description":"Specifies an icon to display at the start of the primary button.","type":"IconName"},{"name":"primaryLabel","description":"Speficies an accessible name for the primary button.","type":"string"},{"name":"primaryText","description":"Specifies the text displayed in the primary button.","type":"string"},{"name":"rel","description":"Defines the relationship between the `href` value and the current document.","type":"string"},{"name":"scale","description":"Specifies the component's size.","type":"Scale"},{"name":"target","description":"Specifies where to open the linked document defined in the `href` property.","type":"string"},{"name":"topLayerDisabled","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.","type":"boolean"},{"name":"width","description":"Specifies the width of the component. [Deprecated] The `\"half\"` value is deprecated, use `\"full\"` instead.","type":"Extract<Width, \"auto\" | \"half\" | \"full\">"}],"events":[{"name":"calciteSplitButtonPrimaryClick","type":"void","description":"Fires when the primary button is clicked."},{"name":"calciteSplitButtonSecondaryClick","type":"void","description":"Fires when the dropdown menu is clicked."}]}},{"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding content."},{"name":"actions-start","description":"A slot for adding actionable `calcite-action` elements before the content of the component."},{"name":"content-start","description":"A slot for adding non-actionable elements before content of the component."},{"name":"content-end","description":"A slot for adding non-actionable elements after content of the component."},{"name":"actions-end","description":"A slot for adding actionable `calcite-action` elements after the content of the component."}],"events":[],"js":{"properties":[{"name":"disabled","description":"When `true`, content interaction is prevented and displayed with lower opacity.","type":"boolean"}],"events":[]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"layout","description":"Defines the component's layout.","default":"\"horizontal\"","value":{"type":["\"horizontal\"","\"vertical\"","\"horizontal-single\""]}},{"name":"numbered","description":"When `true`, displays the step number in the `calcite-stepper-item` heading.","default":"false","value":{"type":"boolean"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"scale","description":"Specifies the component's size.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"slots":[{"name":"","description":"A slot for adding `calcite-stepper-item`s."}],"events":[{"name":"calciteStepperChange","type":"void","description":"Fires when the active `calcite-stepper-item` changes."}],"js":{"properties":[{"name":"icon","description":"When `true`, displays a status icon in the `calcite-stepper-item` heading.","type":"boolean"},{"name":"layout","description":"Defines the component's layout.","type":"StepperLayout"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"numbered","description":"When `true`, displays the step number in the `calcite-stepper-item` heading.","type":"boolean"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem | undefined"},{"name":"scale","description":"Specifies the component's size.","type":"Scale"},{"name":"selectedItem","description":"Specifies the component's selected item.","type":"StepperItem"}],"events":[{"name":"calciteStepperChange","type":"void","description":"Fires when the active `calcite-stepper-item` changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"description","description":"Specifies a description for the component. Displays below the header text.","value":{"type":"string"}},{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's opacity.","default":"false","value":{"type":"boolean"}},{"name":"error","description":"When `true`, the component contains an error that requires resolution from the user.","default":"false","value":{"type":"boolean"}},{"name":"heading","description":"Specifies the component's heading text.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding custom content."}],"events":[{"name":"calciteStepperItemSelect","type":"void","description":"Fires when the active `calcite-stepper-item` changes."}],"js":{"properties":[{"name":"complete","description":"When `true`, completes the step.","type":"boolean"},{"name":"description","description":"Specifies a description for the component. Displays below the header text.","type":"string"},{"name":"disabled","description":"When `true`, prevents interaction and decreases the component's opacity.","type":"boolean"},{"name":"error","description":"When `true`, the component contains an error that requires resolution from the user.","type":"boolean"},{"name":"heading","description":"Specifies the component's heading text.","type":"string"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"}],"events":[{"name":"calciteStepperItemSelect","type":"void","description":"Fires when the active `calcite-stepper-item` changes."}]}},{"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","value":{"type":"string"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"scale","description":"Specifies the component's size. When contained in a parent `calcite-swatch-group`, the component inherits the parent's `scale` value.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}},{"name":"value","description":"The component's value.","value":{"type":"any"}}],"slots":[{"name":"image","description":"A slot for adding an image or pattern."}],"events":[{"name":"calciteSwatchSelect","type":"void","description":"Fires when the selected state of the component changes."}],"js":{"properties":[{"name":"color","description":"Specifies the component's color","type":"string"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"scale","description":"Specifies the component's size. When contained in a parent `calcite-swatch-group`, the component inherits the parent's `scale` value.","type":"Scale"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"},{"name":"value","description":"The component's value.","type":"any"}],"events":[{"name":"calciteSwatchSelect","type":"void","description":"Fires when the selected state of the component changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"scale","description":"Specifies the component's size. Child `calcite-swatch`s inherit the component's value.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"\"none\"","value":{"type":["\"none\"","\"single\"","\"single-persist\"","\"multiple\""]}}],"slots":[{"name":"","description":"A slot for adding one or more `calcite-swatch`s."}],"events":[{"name":"calciteSwatchGroupSelect","type":"void","description":"Fires when the component's selection changes."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"scale","description":"Specifies the component's size. Child `calcite-swatch`s inherit the component's value.","type":"Scale"},{"name":"selectedItems","description":"Specifies the component's selected items.","type":"Swatch[]"},{"name":"selectionMode","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.","type":"Extract<\"multiple\" | \"single\" | \"single-persist\" | \"none\", SelectionMode>"}],"events":[{"name":"calciteSwatchGroupSelect","type":"void","description":"Fires when the component's selection changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"label-text-end","description":"Specifies the component's end label text.","value":{"type":"string"}},{"name":"label-text-start","description":"Specifies the component's start label text.","value":{"type":"string"}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","value":{"type":"string"}},{"name":"scale","description":"Specifies the component's size.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"value","description":"The component's value.","value":{"type":"any"}}],"events":[{"name":"calciteSwitchChange","type":"void","description":"Fires when the `checked` value has changed."}],"js":{"properties":[{"name":"checked","description":"When `true`, the component is checked.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"labelTextEnd","description":"Specifies the component's end label text.","type":"string"},{"name":"labelTextStart","description":"Specifies the component's start label text.","type":"string"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's `value` on form submission.","type":"string"},{"name":"scale","description":"Specifies the component's size.","type":"Scale"},{"name":"value","description":"The component's value.","type":"any"}],"events":[{"name":"calciteSwitchChange","type":"void","description":"Fires when the `checked` value has changed."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"tab","description":"Specifies a unique name for the component.\n\nWhen specified, use the same value on the `calcite-tab-title`.","value":{"type":"string"}}],"slots":[{"name":"","description":"A slot for adding custom content."}],"events":[],"js":{"properties":[{"name":"selected","description":"When `true`, the component is selected.\n\nOnly one tab can be selected within the `calcite-tabs` parent.","type":"boolean"},{"name":"tab","description":"Specifies a unique name for the component.\n\nWhen specified, use the same value on the `calcite-tab-title`.","type":"string"}],"events":[]}},{"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","default":"\"bottom\"","value":{"type":["\"top\"","\"bottom\""]}},{"name":"storage-id","description":"Specifies the name when saving selected `calcite-tab` data to `localStorage`.","value":{"type":"string"}},{"name":"sync-id","description":"Specifies text to update multiple components to keep in sync if one changes.","value":{"type":"string"}}],"slots":[{"name":"","description":"A slot for adding `calcite-tab-title`s."}],"events":[{"name":"calciteTabChange","type":"void","description":"Emits when the selected `calcite-tab` changes."}],"js":{"properties":[{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"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","type":"TabPosition"},{"name":"selectedTitle","description":"Specifies the component's selected `calcite-tab-title`.","type":"TabTitle"},{"name":"storageId","description":"Specifies the name when saving selected `calcite-tab` data to `localStorage`.","type":"string"},{"name":"syncId","description":"Specifies text to update multiple components to keep in sync if one changes.","type":"string"}],"events":[{"name":"calciteTabChange","type":"void","description":"Emits when the selected `calcite-tab` changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"closed","description":"When `true`, hides the component.","default":"false","value":{"type":"boolean"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}},{"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","default":"\"top\"","value":{"type":["\"top\"","\"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.","default":"false","value":{"type":"boolean"}},{"name":"tab","description":"Specifies a unique name for the component.\n\nWhen specified, use the same value on the `calcite-tab`.","value":{"type":"string"}}],"slots":[{"name":"","description":"A slot for adding text."}],"events":[{"name":"calciteTabsActivate","type":"void","description":"Fires when a `calcite-tab` is selected."},{"name":"calciteTabsClose","type":"void","description":"Fires when a `calcite-tab` is closed."}],"js":{"properties":[{"name":"closable","description":"When `true`, displays a close button in the component.","type":"boolean"},{"name":"closed","description":"When `true`, hides the component.","type":"boolean"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"iconEnd","description":"Specifies an icon to display at the end of the component.","type":"IconName"},{"name":"iconFlipRtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"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","type":"TabPosition"},{"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.","type":"boolean"},{"name":"tab","description":"Specifies a unique name for the component.\n\nWhen specified, use the same value on the `calcite-tab`.","type":"string"}],"events":[{"name":"calciteTabsActivate","type":"void","description":"Fires when a `calcite-tab` is selected."},{"name":"calciteTabsClose","type":"void","description":"Fires when a `calcite-tab` is closed."}]}},{"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`.","default":"false","value":{"type":"boolean"}},{"name":"caption","description":"Specifies an accessible title for the component.","value":{"type":"string"}},{"name":"current-page","description":"Sets/gets the current page","default":"0","value":{"type":"number"}},{"name":"group-separator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","default":"false","value":{"type":"boolean"}},{"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.","default":"\"interactive\"","value":{"type":["\"interactive\"","\"static\""]}},{"name":"layout","description":"Specifies the layout of the component.","default":"\"auto\"","value":{"type":["\"auto\"","\"fixed\""]}},{"name":"numbered","description":"When `true`, displays the position of the row in numeric form.","default":"false","value":{"type":"boolean"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"page-size","description":"Specifies the page size of the component. When present, renders `calcite-pagination`.","default":"0","value":{"type":"number"}},{"name":"scale","description":"Specifies the component's size.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"\"top\"","value":{"type":["\"none\"","\"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.","default":"\"none\"","value":{"type":["\"none\"","\"single\"","\"multiple\""]}},{"name":"striped","description":"When `true`, displays striped styling on the component's `calcite-table-rows`.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding `calcite-table-row` elements containing `calcite-table-cell` and/or `calcite-table-header` elements."},{"name":"table-header","description":"A slot for adding `calcite-table-row` elements containing `calcite-table-header` elements."},{"name":"table-footer","description":"A slot for adding `calcite-table-row` elements containing `calcite-table-cell` and/or `calcite-table-header` elements."},{"name":"selection-actions","description":"A slot for adding `calcite-actions` or other elements to display when `selectionMode` is not `\"none\"` and `selectionDisplay` is not `\"none\"`."}],"events":[{"name":"calciteTablePageChange","type":"void","description":"Emits when the component's page selection changes."},{"name":"calciteTableSelect","type":"void","description":"Emits when the component's selected rows change."}],"js":{"properties":[{"name":"bordered","description":"When `true`, displays borders between `calcite-table-rows`.","type":"boolean"},{"name":"caption","description":"Specifies an accessible title for the component.","type":"string"},{"name":"currentPage","description":"Sets/gets the current page","type":"number"},{"name":"groupSeparator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","type":"boolean"},{"name":"interactionMode","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.","type":"TableInteractionMode"},{"name":"layout","description":"Specifies the layout of the component.","type":"TableLayout"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"numbered","description":"When `true`, displays the position of the row in numeric form.","type":"boolean"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem | undefined"},{"name":"pageSize","description":"Specifies the page size of the component. When present, renders `calcite-pagination`.","type":"number"},{"name":"scale","description":"Specifies the component's size.","type":"Scale"},{"name":"selectedItems","description":"Specifies the component's selected items.","type":"TableRow[]"},{"name":"selectionDisplay","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.","type":"TableSelectionDisplay"},{"name":"selectionMode","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.","type":"Extract<\"none\" | \"multiple\" | \"single\", SelectionMode>"},{"name":"striped","description":"When `true`, displays striped styling on the component's `calcite-table-rows`.","type":"boolean"}],"events":[{"name":"calciteTablePageChange","type":"void","description":"Emits when the component's page selection changes."},{"name":"calciteTableSelect","type":"void","description":"Emits when the component's selected rows change."}]}},{"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.","default":"\"start\"","value":{"type":["\"start\"","\"center\"","\"end\""]}},{"name":"col-span","description":"Specifies the number of columns the component should span.","value":{"type":"number"}},{"name":"row-span","description":"Specifies the number of rows the component should span.","value":{"type":"number"}}],"slots":[{"name":"","description":"A slot for adding content, usually text content."}],"events":[],"js":{"properties":[{"name":"alignment","description":"Specifies the alignment of the component.","type":"Alignment"},{"name":"colSpan","description":"Specifies the number of columns the component should span.","type":"number"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"rowSpan","description":"Specifies the number of rows the component should span.","type":"number"}],"events":[]}},{"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.","default":"\"start\"","value":{"type":["\"start\"","\"center\"","\"end\""]}},{"name":"col-span","description":"Specifies the number of columns the component should span.","value":{"type":"number"}},{"name":"description","description":"Specifies a description for the component. Displays below the `heading`.","value":{"type":"string"}},{"name":"heading","description":"Specifies the component's heading text. Displays above the `description`.","value":{"type":"string"}},{"name":"row-span","description":"Specifies the number of rows the component should span.","value":{"type":"number"}}],"events":[],"js":{"properties":[{"name":"alignment","description":"Specifies the alignment of the component.","type":"Alignment"},{"name":"colSpan","description":"Specifies the number of columns the component should span.","type":"number"},{"name":"description","description":"Specifies a description for the component. Displays below the `heading`.","type":"string"},{"name":"heading","description":"Specifies the component's heading text. Displays above the `description`.","type":"string"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"rowSpan","description":"Specifies the number of rows the component should span.","type":"number"}],"events":[]}},{"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.","value":{"type":["\"start\"","\"center\"","\"end\""]}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding `calcite-table-cell` or `calcite-table-header` elements."}],"events":[{"name":"calciteTableRowSelect","type":"void","description":"Fires when the selected state of the component changes."}],"js":{"properties":[{"name":"alignment","description":"Specifies the alignment of the component.","type":"Alignment"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"}],"events":[{"name":"calciteTableRowSelect","type":"void","description":"Fires when the selected state of the component changes."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"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\"`).","default":"\"inline\"","value":{"type":["\"center\"","\"inline\""]}},{"name":"position","description":"Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to the `calcite-tabs`.","default":"\"top\"","value":{"type":["\"top\"","\"bottom\""]}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}}],"slots":[{"name":"","description":"A slot for adding `calcite-tab`s."},{"name":"title-group","description":"A slot for adding a `calcite-tab-nav`."}],"events":[],"js":{"properties":[{"name":"bordered","description":"When `true`, displays the component with a folder style menu.","type":"boolean"},{"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\"`).","type":"TabLayout"},{"name":"position","description":"Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to the `calcite-tabs`.","type":"TabPosition"},{"name":"scale","description":"Specifies the size of the component.","type":"Scale"}],"events":[]}},{"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.","value":{"type":"number"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"group-separator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"label-text","description":"Specifies the component's label text.","value":{"type":"string"}},{"name":"limit-text","description":"When `true`, prevents input beyond the `maxLength` value, mimicking native text area behavior.","default":"false","value":{"type":"boolean"}},{"name":"loading","description":"When `true`, a busy indicator is displayed.","default":"false","value":{"type":"boolean"}},{"name":"max-length","description":"When the component resides in a form,\nspecifies the maximum number of characters allowed.","value":{"type":"number"}},{"name":"min-length","description":"When the component resides in a form,\nspecifies the minimum number of characters allowed.","value":{"type":"number"}},{"name":"name","description":"Specifies the name of the component. Required to pass the component's value on form submission.","value":{"type":"string"}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"placeholder","description":"Specifies the placeholder text for the component.","value":{"type":"string"}},{"name":"read-only","description":"When `true`, the component's `value` can be read, but cannot be modified.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"resize","description":"Specifies if the component is resizable.","default":"\"both\"","value":{"type":["\"both\"","\"horizontal\"","\"vertical\"","\"none\""]}},{"name":"rows","description":"Specifies the component's number of rows.","value":{"type":"number"}},{"name":"scale","description":"Specifies the size of the component.","default":"\"m\"","value":{"type":["\"l\"","\"m\"","\"s\""]}},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","default":"\"idle\"","value":{"type":["\"invalid\"","\"valid\"","\"idle\""]}},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","value":{"type":["string","boolean"]}},{"name":"validation-message","description":"Specifies the validation message to display under the component.","value":{"type":"string"}},{"name":"value","description":"The component's value.","default":"\"\"","value":{"type":"string"}},{"name":"wrap","description":"Specifies the wrapping mechanism for the text.","default":"\"soft\"","value":{"type":["\"soft\"","\"hard\""]}}],"slots":[{"name":"","description":"A slot for adding text."},{"name":"label-content","description":"A slot for rendering content next to the component's `labelText`."},{"name":"footer-start","description":"A slot for adding content to the start of the component's footer."},{"name":"footer-end","description":"A slot for adding content to the end of the component's footer."}],"events":[{"name":"calciteTextAreaChange","type":"void","description":"Fires each time a new `value` is typed and committed."},{"name":"calciteTextAreaInput","type":"void","description":"Fires each time a new `value` is typed."}],"js":{"properties":[{"name":"columns","description":"Specifies the component's number of columns.","type":"number"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"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.","type":"string"},{"name":"groupSeparator","description":"When `true`, number values are displayed with a group separator corresponding to the language and country format.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"labelText","description":"Specifies the component's label text.","type":"string"},{"name":"limitText","description":"When `true`, prevents input beyond the `maxLength` value, mimicking native text area behavior.","type":"boolean"},{"name":"loading","description":"When `true`, a busy indicator is displayed.","type":"boolean"},{"name":"maxLength","description":"When the component resides in a form,\nspecifies the maximum number of characters allowed.","type":"number"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"minLength","description":"When the component resides in a form,\nspecifies the minimum number of characters allowed.","type":"number"},{"name":"name","description":"Specifies the name of the component. Required to pass the component's value on form submission.","type":"string"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem"},{"name":"placeholder","description":"Specifies the placeholder text for the component.","type":"string"},{"name":"readOnly","description":"When `true`, the component's `value` can be read, but cannot be modified.","type":"boolean"},{"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.","type":"boolean"},{"name":"resize","description":"Specifies if the component is resizable.","type":"\"both\" | \"horizontal\" | \"vertical\" | \"none\""},{"name":"rows","description":"Specifies the component's number of rows.","type":"number"},{"name":"scale","description":"Specifies the size of the component.","type":"\"l\" | \"m\" | \"s\""},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","type":"Status"},{"name":"validationIcon","description":"Specifies the validation icon to display under the component.","type":"IconName | boolean"},{"name":"validationMessage","description":"Specifies the validation message to display under the component.","type":"string"},{"name":"validity","description":"The component's current validation state.","type":"MutableValidityState"},{"name":"value","description":"The component's value.","type":"string"},{"name":"wrap","description":"Specifies the wrapping mechanism for the text.","type":"\"soft\" | \"hard\""}],"events":[{"name":"calciteTextAreaChange","type":"void","description":"Fires each time a new `value` is typed and committed."},{"name":"calciteTextAreaInput","type":"void","description":"Fires each time a new `value` is typed."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"alignment","description":"Specifies alignment of the component's content.","default":"\"start\"","value":{"type":["\"start\"","\"center\""]}},{"name":"description","description":"Specifies a description for the component. Displays below the `heading`.","value":{"type":"string"}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"heading","description":"Specifies the component's heading text. displays between the `icon` and `description`.","value":{"type":"string"}},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","value":{"type":["1","2","3","4","5","6"]}},{"name":"href","description":"When embed is `false`, specifies the URL for the component.","value":{"type":"string"}},{"name":"icon","description":"Specifies an icon to display.","value":{"type":"string"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"scale","description":"Specifies the component's size.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"selected","description":"When `true` and the parent's `selectionMode` is `\"single\"`, `\"single-persist\"', or `\"multiple\"`, the component is selected.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"content-top","description":"A slot for adding non-actionable elements above the component's content.  Content slotted here will render in place of the `icon` property."},{"name":"content-bottom","description":"A slot for adding non-actionable elements below the component's content."}],"events":[{"name":"calciteTileSelect","type":"void","description":"Fires when the selected state of the component changes."}],"js":{"properties":[{"name":"active","description":"When `true`, the component is active.","type":"boolean"},{"name":"alignment","description":"Specifies alignment of the component's content.","type":"Exclude<Alignment, \"end\">"},{"name":"description","description":"Specifies a description for the component. Displays below the `heading`.","type":"string"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"embed","description":"Specifies the component's embed mode.\n\nWhen `true`, renders without a border and padding for use by other components.","type":"boolean"},{"name":"heading","description":"Specifies the component's heading text. displays between the `icon` and `description`.","type":"string"},{"name":"headingLevel","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","type":"HeadingLevel"},{"name":"href","description":"When embed is `false`, specifies the URL for the component.","type":"string"},{"name":"icon","description":"Specifies an icon to display.","type":"IconName"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"scale","description":"Specifies the component's size.","type":"Scale"},{"name":"selected","description":"When `true` and the parent's `selectionMode` is `\"single\"`, `\"single-persist\"', or `\"multiple\"`, the component is selected.","type":"boolean"}],"events":[{"name":"calciteTileSelect","type":"void","description":"Fires when the selected state of the component changes."}]}},{"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.","default":"\"start\"","value":{"type":["\"start\"","\"center\""]}},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","default":"false","value":{"type":"boolean"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"layout","description":"Defines the layout of the component.\n\nUse `\"horizontal\"` for rows, and `\"vertical\"` for a single column.","default":"\"horizontal\"","value":{"type":["\"horizontal\"","\"vertical\""]}},{"name":"scale","description":"Specifies the component's size.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"\"icon\"","value":{"type":["\"icon\"","\"border\"","\"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).","default":"\"none\"","value":{"type":["\"none\"","\"single\"","\"single-persist\"","\"multiple\""]}}],"slots":[{"name":"","description":"A slot for adding `calcite-tile` elements."}],"events":[{"name":"calciteTileGroupSelect","type":"void","description":"Fires when the component's selection changes."}],"js":{"properties":[{"name":"alignment","description":"Specifies the alignment of each `calcite-tile`'s content.","type":"Exclude<Alignment, \"end\">"},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"layout","description":"Defines the layout of the component.\n\nUse `\"horizontal\"` for rows, and `\"vertical\"` for a single column.","type":"Extract<Layout, \"horizontal\" | \"vertical\">"},{"name":"scale","description":"Specifies the component's size.","type":"Scale"},{"name":"selectedItems","description":"Specifies the component's selected items.","type":"Tile[]"},{"name":"selectionAppearance","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.","type":"Extract<\"icon\" | \"highlight\" | \"border\", SelectionAppearance>"},{"name":"selectionMode","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).","type":"Extract<\"multiple\" | \"none\" | \"single\" | \"single-persist\", SelectionMode>"}],"events":[{"name":"calciteTileGroupSelect","type":"void","description":"Fires when the component's selection changes."}]}},{"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.","default":"\"user\"","value":{"type":["\"24\"","\"user\"","\"12\""]}},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","value":{"type":["\"arab\"","\"arabext\"","\"latn\""]}},{"name":"scale","description":"Specifies the component's size.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"l\""]}},{"name":"step","description":"Specifies the granularity the `value` must adhere to (in seconds).","default":"60","value":{"type":"number"}},{"name":"value","description":"The component's value in UTC (always 24-hour format).","value":{"type":"string"}}],"events":[{"name":"calciteTimePickerChange","type":"void","description":"Fires when a user changes the component's time"}],"js":{"properties":[{"name":"hourFormat","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.","type":"HourFormat"},{"name":"messageOverrides","description":"Overrides individual strings used by the component.","type":"Record<string, unknown> | undefined"},{"name":"numberingSystem","description":"Specifies the Unicode numeral system used by the component for localization.","type":"NumberingSystem"},{"name":"scale","description":"Specifies the component's size.","type":"Scale"},{"name":"step","description":"Specifies the granularity the `value` must adhere to (in seconds).","type":"number"},{"name":"time","type":"ReturnType<typeof useTime>"},{"name":"value","description":"The component's value in UTC (always 24-hour format).","type":"string"}],"events":[{"name":"calciteTimePickerChange","type":"void","description":"Fires when a user changes the component's time"}]}},{"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.","default":"false","value":{"type":"boolean"}},{"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.","value":{"type":"string"}},{"name":"offset-distance","description":"Offset the position of the component away from the `referenceElement`.","value":{"type":"number"}},{"name":"offset-skidding","description":"Offset the position of the component along the `referenceElement`.","default":"0","value":{"type":"number"}},{"name":"open","description":"When `true`, the component is open.","default":"false","value":{"type":"boolean"}},{"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\"`.","default":"\"absolute\"","value":{"type":["\"fixed\"","\"absolute\""]}},{"name":"placement","description":"Determines where the component will be positioned relative to the `referenceElement`.","default":"\"auto\"","value":{"type":["\"auto\"","\"top\"","\"bottom\"","\"left\"","\"right\"","\"auto-start\"","\"auto-end\"","\"top-start\"","\"top-end\"","\"bottom-start\"","\"bottom-end\"","\"right-start\"","\"right-end\"","\"left-start\"","\"left-end\"","\"leading-start\"","\"leading\"","\"leading-end\"","\"trailing-end\"","\"trailing\"","\"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.","value":{"type":["string","object"]}},{"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.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding text."}],"events":[{"name":"calciteTooltipBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteTooltipBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteTooltipClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteTooltipOpen","type":"void","description":"Fires when the component is open and animation is complete."}],"js":{"properties":[{"name":"closeOnClick","description":"Closes the component when the `referenceElement` is clicked.","type":"boolean"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"offsetDistance","description":"Offset the position of the component away from the `referenceElement`.","type":"number"},{"name":"offsetSkidding","description":"Offset the position of the component along the `referenceElement`.","type":"number"},{"name":"open","description":"When `true`, the component is open.","type":"boolean"},{"name":"overlayPositioning","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\"`.","type":"OverlayPositioning"},{"name":"placement","description":"Determines where the component will be positioned relative to the `referenceElement`.","type":"LogicalPlacement"},{"name":"referenceElement","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.","type":"ReferenceElement | string"},{"name":"topLayerDisabled","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.","type":"boolean"}],"events":[{"name":"calciteTooltipBeforeClose","type":"void","description":"Fires when the component is requested to be closed and before the closing transition begins."},{"name":"calciteTooltipBeforeOpen","type":"void","description":"Fires when the component is added to the DOM but not rendered, and before the opening transition begins."},{"name":"calciteTooltipClose","type":"void","description":"Fires when the component is closed and animation is complete."},{"name":"calciteTooltipOpen","type":"void","description":"Fires when the component is open and animation is complete."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"scale","description":"Specifies the component's size.","default":"\"m\"","value":{"type":["\"s\"","\"m\"","\"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.","default":"\"single\"","value":{"type":["\"none\"","\"single\"","\"children\"","\"single-persist\"","\"multichildren\"","\"ancestors\"","\"multiple\""]}}],"slots":[{"name":"","description":"A slot for `calcite-tree-item` elements."}],"events":[{"name":"calciteTreeSelect","type":"void","description":"Fires when the user selects/deselects `calcite-tree-items`."}],"js":{"properties":[{"name":"lines","description":"When `true`, displays indentation guide lines.","type":"boolean"},{"name":"scale","description":"Specifies the component's size.","type":"Scale"},{"name":"selectedItems","description":"Specifies the component's selected items.","type":"TreeItem[]"},{"name":"selectionMode","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.","type":"SelectionMode"}],"events":[{"name":"calciteTreeSelect","type":"void","description":"Fires when the user selects/deselects `calcite-tree-items`."}]}},{"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.","default":"false","value":{"type":"boolean"}},{"name":"expanded","description":"When `true`, expands the component and its contents.","default":"false","value":{"type":"boolean"}},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","value":{"type":["\"start\"","\"end\"","\"both\""]}},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","value":{"type":"string"}},{"name":"label","description":"Specifies an accessible label for the component.","value":{"type":"string"}},{"name":"selected","description":"When `true`, the component is selected.","default":"false","value":{"type":"boolean"}}],"slots":[{"name":"","description":"A slot for adding text."},{"name":"children","description":"A slot for adding nested `calcite-tree` elements."},{"name":"actions-end","description":"A slot for adding actions to the end of the component. It is recommended to use two or fewer actions."}],"events":[{"name":"calciteTreeItemCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteTreeItemExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteTreeItemSelect","type":"void","description":"Fires when the component is selected or deselected."}],"js":{"properties":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","type":"boolean"},{"name":"expanded","description":"When `true`, expands the component and its contents.","type":"boolean"},{"name":"iconFlipRtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","type":"FlipContext"},{"name":"iconStart","description":"Specifies an icon to display at the start of the component.","type":"IconName"},{"name":"label","description":"Specifies an accessible label for the component.","type":"string"},{"name":"selected","description":"When `true`, the component is selected.","type":"boolean"}],"events":[{"name":"calciteTreeItemCollapse","type":"void","description":"Fires when the component's content area is collapsed."},{"name":"calciteTreeItemExpand","type":"void","description":"Fires when the component's content area is expanded."},{"name":"calciteTreeItemSelect","type":"void","description":"Fires when the component is selected or deselected."}]}}]},"css":{"properties":[{"name":"--calcite-accordion-border-color","description":"Specifies the component's border color."},{"name":"--calcite-accordion-background-color","description":"Specifies the component's background color."},{"name":"--calcite-accordion-text-color","description":"Specifies the component's text color."},{"name":"--calcite-accordion-text-color-hover","description":"Specifies the component's main text color on hover."},{"name":"--calcite-accordion-text-color-press","description":"Specifies the component's main text color when pressed."},{"name":"--calcite-accordion-border-color","description":"Specifies the component's border color."},{"name":"--calcite-accordion-background-color","description":"Specifies the component's background color."},{"name":"--calcite-accordion-text-color","description":"Specifies the component's text color."},{"name":"--calcite-accordion-text-color-hover","description":"Specifies the component's main text color on hover."},{"name":"--calcite-accordion-text-color-press","description":"Specifies the component's main text color when pressed."},{"name":"--calcite-accordion-item-background-color","description":"[Deprecated] Use `--calcite-accordion-background-color`. Specifies the component's background color."},{"name":"--calcite-accordion-item-border-color","description":"[Deprecated] Use `--calcite-accordion-border-color`. Specifies the component's border color."},{"name":"--calcite-accordion-item-content-space","description":"Specifies the component's padding."},{"name":"--calcite-accordion-item-end-icon-color","description":"Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color."},{"name":"--calcite-accordion-item-expand-icon-color","description":"Specifies the component's expand icon color."},{"name":"--calcite-accordion-item-header-background-color","description":"Specifies the component's `heading` background color."},{"name":"--calcite-accordion-item-header-background-color-hover","description":"Specifies the component's `heading` background color when hovered."},{"name":"--calcite-accordion-item-header-background-color-press","description":"Specifies the component's `heading` background color when pressed."},{"name":"--calcite-accordion-item-heading-text-color","description":"Specifies the component's `heading` text color."},{"name":"--calcite-accordion-item-icon-color","description":"[Deprecated] Use `--calcite-icon-color`. Specifies the component's default icon color."},{"name":"--calcite-accordion-item-start-icon-color","description":"Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color."},{"name":"--calcite-accordion-item-text-color","description":"[Deprecated] Use `--calcite-accordion-text-color`. Specifies the component's text color."},{"name":"--calcite-accordion-item-text-color-hover","description":"[Deprecated] Use `--calcite-accordion-text-color-hover`. Specifies the component's text color on hover."},{"name":"--calcite-action-background-color-hover","description":"Specifies the component's background color when hovered or focused."},{"name":"--calcite-action-background-color-press","description":"Specifies the component's background color when active."},{"name":"--calcite-action-background-color-pressed","description":"[Deprecated] Use --calcite-action-background-color-press. Specifies the component's background color when active."},{"name":"--calcite-action-background-color","description":"Specifies the component's background color."},{"name":"--calcite-action-corner-radius-end-end","description":"[Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end end."},{"name":"--calcite-action-corner-radius-end-start","description":"[Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end start."},{"name":"--calcite-action-corner-radius-start-end","description":"[Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start end."},{"name":"--calcite-action-corner-radius-start-start","description":"[Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start start."},{"name":"--calcite-action-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-action-indicator-color","description":"Specifies the component's indicator color."},{"name":"--calcite-action-text-color-press","description":"Specifies the component's text color when pressed or hovered."},{"name":"--calcite-action-text-color-pressed","description":"[Deprecated] Use --calcite-action-text-color-press. Specifies the component's text color when hovered."},{"name":"--calcite-action-text-color","description":"Specifies the component's text color."},{"name":"--calcite-action-bar-background-color","description":"Specifies the component's background color."},{"name":"--calcite-action-bar-corner-radius","description":"Specifies the component's border radius when `floating` is `true`."},{"name":"--calcite-action-bar-expanded-max-width","description":"When `layout` is `\"vertical\"`, specifies the component's maximum width."},{"name":"--calcite-action-bar-items-space","description":"Specifies the space between slotted components in the component."},{"name":"--calcite-action-bar-shadow","description":"Specifies the component's shadow when `floating` is `true`."},{"name":"--calcite-action-background-color","description":"Specifies the component's background color."},{"name":"--calcite-action-group-border-color","description":"Specifies the component's border color when used in a `calcite-action-bar` or `calcite-action-menu`."},{"name":"--calcite-action-group-columns","description":"When `layout` is `\"grid\"`, specifies the component's `grid-template-columns`."},{"name":"--calcite-action-group-gap","description":"When `layout` is `\"grid\"`, specifies the component's gap."},{"name":"--calcite-action-menu-items-space","description":"Specifies the space between actions in the menu."},{"name":"--calcite-action-pad-corner-radius","description":"Specifies the component's border radius."},{"name":"--calcite-action-pad-expanded-max-width","description":"When `expanded` and `layout` is `\"vertical\"`, specifies the component's maximum width."},{"name":"--calcite-action-pad-items-space","description":"Specifies the component's space between slotted components."},{"name":"--calcite-alert-width","description":"Specifies the component's width."},{"name":"--calcite-alert-background-color","description":"Specifies the component's background color."},{"name":"--calcite-alert-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-alert-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-alert-offset-size","description":"Specifies the component's `placement` offset."},{"name":"--calcite-autocomplete-background-color","description":"Specifies the component's background color."},{"name":"--calcite-autocomplete-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-autocomplete-text-color","description":"Specifies the component's text color."},{"name":"--calcite-autocomplete-menu-max-size-y","description":"Specifies the maximum height of the component's menu."},{"name":"--calcite-autocomplete-input-prefix-size","description":"Specifies the input's prefix width, when present."},{"name":"--calcite-autocomplete-input-suffix-size","description":"Specifies the input's suffix width, when present."},{"name":"--calcite-autocomplete-input-background-color","description":"Specifies the background color of the component's input."},{"name":"--calcite-autocomplete-input-border-color","description":"Specifies the border color of the component's input."},{"name":"--calcite-autocomplete-input-corner-radius","description":"Specifies the corner radius of the component's input."},{"name":"--calcite-autocomplete-input-shadow","description":"Specifies the shadow of the component's input."},{"name":"--calcite-autocomplete-input-icon-color","description":"Specifies the icon color of the component's input."},{"name":"--calcite-autocomplete-input-text-color","description":"Specifies the text color of the component's input."},{"name":"--calcite-autocomplete-input-placeholder-text-color","description":"Specifies the placeholder text color of the component's input."},{"name":"--calcite-autocomplete-input-actions-background-color","description":"Specifies the background color of the input's `clearable` element."},{"name":"--calcite-autocomplete-input-actions-background-color-hover","description":"Specifies the background color of the input's `clearable` element when hovered."},{"name":"--calcite-autocomplete-input-actions-background-color-press","description":"Specifies the background color of the input's `clearable` element when pressed."},{"name":"--calcite-autocomplete-input-actions-icon-color","description":"Specifies the icon color of the input's `clearable` element."},{"name":"--calcite-autocomplete-input-actions-icon-color-hover","description":"Specifies the icon color of the input's `clearable` element when hovered."},{"name":"--calcite-autocomplete-input-actions-icon-color-press","description":"Specifies the icon color of the input's `clearable` element when pressed."},{"name":"--calcite-autocomplete-input-loading-background-color","description":"Specifies the background color of the Input's `loading` element, when present."},{"name":"--calcite-autocomplete-input-loading-fill-color","description":"Specifies the fill color of the Input's `loading` element, when present."},{"name":"--calcite-autocomplete-input-prefix-text-color","description":"Specifies the text color of the Input's prefix, when present."},{"name":"--calcite-autocomplete-input-suffix-text-color","description":"Specifies the text color of the Input's suffix, when present."},{"name":"--calcite-autocomplete-background-color","description":"Specifies the component's background color."},{"name":"--calcite-autocomplete-description-text-color","description":"Specifies the text color of the component's `description`."},{"name":"--calcite-autocomplete-heading-text-color","description":"Specifies the text color of the component's `heading`."},{"name":"--calcite-autocomplete-text-color","description":"Specifies the component's text color."},{"name":"--calcite-autocomplete-background-color","description":"Specifies the component's background color."},{"name":"--calcite-autocomplete-border-color","description":"Specifies the component's border color."},{"name":"--calcite-autocomplete-text-color","description":"Specifies the component's text color."},{"name":"--calcite-avatar-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-avatar-color","description":"Specifies the component's icon or initial color."},{"name":"--calcite-avatar-background-color","description":"Specifies the component's background color."},{"name":"--calcite-block-border-color","description":"Specifies the component's border color."},{"name":"--calcite-block-content-space","description":"Specifies the space of the component's `default` slot."},{"name":"--calcite-block-header-background-color","description":"Specifies the component's `heading` background color."},{"name":"--calcite-block-header-background-color-hover","description":"Specifies the component's `heading` background color when hovered."},{"name":"--calcite-block-header-background-color-press","description":"Specifies the component's `heading` background color when pressed."},{"name":"--calcite-block-heading-text-color","description":"Specifies the component's `heading` text color."},{"name":"--calcite-block-heading-text-color-press","description":"[Deprecated]  use `--calcite-block-heading-text-color` instead - When the component is `expanded`, specifies the `heading` text color."},{"name":"--calcite-block-padding","description":"[Deprecated] use `--calcite-block-content-space` instead - Specifies the padding of the component's `default` slot."},{"name":"--calcite-block-text-color","description":"[Deprecated] Specifies the component's text color."},{"name":"--calcite-block-description-text-color","description":"Specifies the component's `description` text color."},{"name":"--calcite-block-icon-color","description":"Specifies the component's `collapsible` icon, `iconStart` and `iconEnd` color."},{"name":"--calcite-block-icon-color-hover","description":"Specifies the component's `collapsible` icon color when hovered."},{"name":"--calcite-block-section-background-color","description":"Specifies the component's background color."},{"name":"--calcite-block-section-border-color","description":"Specifies the component's border color. When `expanded`, applies to the component's bottom border."},{"name":"--calcite-block-section-header-text-color","description":"Specifies the component's header text color."},{"name":"--calcite-block-section-text-color","description":"Specifies the component's text color."},{"name":"--calcite-block-section-text-color-hover","description":"Specifies the component's text color on hover."},{"name":"--calcite-block-section-content-space","description":"Specifies the padding of the component's content in `default` slot."},{"name":"--calcite-button-background-color","description":"Specifies the component's background color."},{"name":"--calcite-button-border-color","description":"Specifies the component's border color."},{"name":"--calcite-button-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-button-icon-color","description":"Specifies the component's `iconStart` and `iconEnd` color."},{"name":"--calcite-button-loader-color","description":"Specifies the component's loader color."},{"name":"--calcite-button-text-color","description":"Specifies the component's text color."},{"name":"--calcite-button-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-card-accent-color-selected","description":"Specifies the component's accent color when `selected`."},{"name":"--calcite-card-background-color","description":"Specifies the component's background color."},{"name":"--calcite-card-border-color","description":"Specifies the component's border color."},{"name":"--calcite-card-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-card-selection-background-color-hover","description":"Specifies the component's selection element background color when hovered."},{"name":"--calcite-card-selection-background-color-press","description":"Specifies the component's selection element background color when active."},{"name":"--calcite-card-selection-background-color","description":"[Deprecated] Use `--calcite-card-background-color`. Specifies the component's selection element background color."},{"name":"--calcite-card-selection-color-hover","description":"Specifies the component's selection element color when hovered or focused."},{"name":"--calcite-card-selection-color","description":"Specifies the component's selection element color."},{"name":"--calcite-card-selection-icon-color-hover","description":"[Deprecated] Use `--calcite-card-selection-color-hover`. Specifies the component's selection element icon color when hovered."},{"name":"--calcite-card-selection-icon-color-selected","description":"[Deprecated] Use `--calcite-card-accent-color-selected`. Specifies the component's selection element icon color when `selected`."},{"name":"--calcite-card-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-card-group-gap","description":"[Deprecated] Use `--calcite-card-group-space`. Specifies the gap between slotted elements."},{"name":"--calcite-card-group-space","description":"Specifies the space between slotted elements."},{"name":"--calcite-checkbox-size","description":"Specifies the component's height and width."},{"name":"--calcite-checkbox-border-color","description":"Specifies the component's color."},{"name":"--calcite-checkbox-border-color-hover","description":"Specifies the component's color when hovered."},{"name":"--calcite-checkbox-border-color-press","description":"Specifies the component's color when pressed."},{"name":"--calcite-checkbox-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-chip-background-color","description":"Specifies the component's background color."},{"name":"--calcite-chip-border-color","description":"Specifies the component's border color."},{"name":"--calcite-chip-close-icon-color","description":"Specifies the component's close element icon color."},{"name":"--calcite-chip-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-chip-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-chip-select-icon-color-press","description":"Specifies the component's selection element icon color when active."},{"name":"--calcite-chip-select-icon-color-pressed","description":"[Deprecated] Use `--calcite-chip-select-icon-color-press`. Specifies the component's selection element icon color when active."},{"name":"--calcite-chip-select-icon-color","description":"Specifies the component's selection element icon color."},{"name":"--calcite-chip-text-color","description":"Specifies the component's text color."},{"name":"--calcite-color-picker-background-color","description":"Specifies the component's background color."},{"name":"--calcite-color-picker-border-color","description":"Specifies the component's border color."},{"name":"--calcite-color-picker-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-color-picker-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-color-picker-text-color","description":"Specifies the component's text color."},{"name":"--calcite-color-picker-input-background-color","description":"Specifies the component's input background color."},{"name":"--calcite-color-picker-input-border-color","description":"Specifies the component's input border color."},{"name":"--calcite-color-picker-input-text-color","description":"Specifies the component's input text color."},{"name":"--calcite-color-picker-input-prefix-text-color","description":"When `hexDisabled` is not `true`, specifies the component's input prefix text color."},{"name":"--calcite-color-picker-input-suffix-text-color","description":"When `alphaChannel` is `true`, specifies the component's input suffix text color."},{"name":"--calcite-color-picker-tab-border-color","description":"Specifies the component's tab border color."},{"name":"--calcite-color-picker-tab-text-color","description":"Specifies the component's tab text color."},{"name":"--calcite-color-picker-tab-accent-color-press","description":"Specifies the component's tab accent color when selected or active."},{"name":"--calcite-color-picker-swatch-corner-radius","description":"Specifies the component's swatch corner radius."},{"name":"--calcite-color-picker-action-text-color-press","description":"Specifies the component's `savedColors` action text color when pressed."},{"name":"--calcite-color-picker-action-text-color-hover","description":"Specifies the component's `savedColors` action text color when hovered."},{"name":"--calcite-color-picker-action-text-color","description":"Specifies the component's `savedColors` action text color."},{"name":"--calcite-combobox-divider-color","description":"Specifies the component's divider color."},{"name":"--calcite-combobox-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-combobox-icon-color-hover","description":"Specifies the component's icon color when hovered."},{"name":"--calcite-combobox-background-color","description":"Specifies the background color of the component's listbox."},{"name":"--calcite-combobox-input-border-color","description":"Specifies the border color of the component's input."},{"name":"--calcite-combobox-input-background-color","description":"Specifies the background color of the component's input."},{"name":"--calcite-combobox-input-height","description":"Specifies the height of the component's input."},{"name":"--calcite-combobox-input-text-color","description":"When `selectionDisplay` is `\"single\"`, specifies the text color of the component's input."},{"name":"--calcite-combobox-item-border-color","description":"[Deprecated] Specifies the component's border color."},{"name":"--calcite-combobox-text-color","description":"Specifies the component's text and `icon` color."},{"name":"--calcite-combobox-text-color-hover","description":"Specifies the component's text and `icon` color when hovered."},{"name":"--calcite-combobox-item-background-color-active","description":"Specifies the component's background color when active."},{"name":"--calcite-combobox-item-background-color-hover","description":"Specifies the component's background color when hovered."},{"name":"--calcite-combobox-item-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-combobox-selected-icon-color","description":"Specifies the component's selected indicator icon color."},{"name":"--calcite-combobox-description-text-color","description":"Specifies the component's `description` and `shortHeading` text color."},{"name":"--calcite-combobox-description-text-color-press","description":"Specifies the component's `description` and `shortHeading` text color when hovered."},{"name":"--calcite-combobox-heading-text-color","description":"Specifies the component's `heading` text color."},{"name":"--calcite-combobox-item-group-text-color","description":"Specifies the text color of the component."},{"name":"--calcite-combobox-item-group-border-color","description":"Specifies the border color of the component."},{"name":"--calcite-date-picker-border-color","description":"Specifies the component's border color."},{"name":"--calcite-date-picker-corner-radius","description":"Specifies the component's border radius."},{"name":"--calcite-date-picker-range-calendar-divider-color","description":"Specifies the divider color between calendar's when `range=\"true\"`."},{"name":"--calcite-date-picker-week-header-text-color","description":"Specifies the week header text color."},{"name":"--calcite-date-picker-header-action-background-color","description":"Specifies the background color of header action's of the component."},{"name":"--calcite-date-picker-header-action-background-color-hover","description":"Specifies the background color of header action's of the component when hovered."},{"name":"--calcite-date-picker-header-action-background-color-press","description":"Specifies the background color of header action's of the component when pressed."},{"name":"--calcite-date-picker-header-action-text-color","description":"Specifies the text color of header action's of the component."},{"name":"--calcite-date-picker-header-action-text-color-press","description":"Specifies the text color of header action's of the component when pressed."},{"name":"--calcite-date-picker-year-text-color","description":"Specifies the text color of year & suffix of the component."},{"name":"--calcite-date-picker-month-select-font-size","description":"Specifies the font size of month select of the component."},{"name":"--calcite-date-picker-month-select-text-color","description":"Specifies the text color of month select of the component."},{"name":"--calcite-date-picker-month-select-icon-color","description":"Specifies the icon color of month select of the component."},{"name":"--calcite-date-picker-month-select-icon-color-hover","description":"Specifies the icon color of month select of the component when hovered."},{"name":"--calcite-date-picker-day-background-color","description":"Specifies the background color of day of the component."},{"name":"--calcite-date-picker-day-background-color-hover","description":"Specifies the background color of day of the component when hovered."},{"name":"--calcite-date-picker-day-text-color","description":"Specifies the text color of day of the component."},{"name":"--calcite-date-picker-day-text-color-hover","description":"Specifies the text color of day of the component when hovered."},{"name":"--calcite-date-picker-current-day-text-color","description":"Specifies the text color of current day of the component."},{"name":"--calcite-date-picker-day-background-color-selected","description":"Specifies the background color of selected day of the component."},{"name":"--calcite-date-picker-day-text-color-selected","description":"Specifies the text color of selected day of the component."},{"name":"--calcite-date-picker-day-range-text-color","description":"Specifies the text color of select day range of the component."},{"name":"--calcite-date-picker-day-range-background-color","description":"Specifies the background color of select day range of the component."},{"name":"--calcite-date-picker-day-outside-range-background-color-hover","description":"Specifies the background color of day's outside current range when hovered."},{"name":"--calcite-date-picker-day-outside-range-text-color-hover","description":"Specifies the text color of day's outside current range when hovered."},{"name":"--calcite-dialog-scrim-background-color","description":"Specifies the background color of the component's scrim."},{"name":"--calcite-dialog-size-x","description":"Specifies the width of the component, using `px`, `em`, `rem`, `vw`, or `%`. Does not exceed the viewport's width - applies when `placement=\"cover\"` is set."},{"name":"--calcite-dialog-min-size-x","description":"Specifies the minimum width of the component, using `px`, `em`, `rem`, `vw`, or `%`."},{"name":"--calcite-dialog-max-size-x","description":"Specifies the maximum width of the component, using `px`, `em`, `rem`, `vw`, or `%`."},{"name":"--calcite-dialog-size-y","description":"Specifies the height of the component, using `px`, `em`, `rem`, `vh`, or `%`. Does not exceed the viewport's height - applies when `placement=\"cover\"` is set."},{"name":"--calcite-dialog-min-size-y","description":"Specifies the minimum height of the component, using `px`, `em`, `rem`, `vh`, or `%`."},{"name":"--calcite-dialog-max-size-y","description":"Specifies the maximum height of the component, using `px`, `em`, `rem`, `vh`, or `%`."},{"name":"--calcite-dialog-content-space","description":"Specifies the padding of the component's content."},{"name":"--calcite-dialog-footer-space","description":"Specifies the padding of the component's footer."},{"name":"--calcite-dialog-border-color","description":"Specifies the component's border color."},{"name":"--calcite-dialog-offset-x","description":"Specifies the horizontal offset of the component."},{"name":"--calcite-dialog-offset-y","description":"Specifies the vertical offset of the component."},{"name":"--calcite-dialog-background-color","description":"Specifies the background color of the component."},{"name":"--calcite-dialog-icon-color","description":"Specifies the color of the component's icon."},{"name":"--calcite-dialog-accent-color","description":"Specifies the component's accent color when `kind` is specified."},{"name":"--calcite-dialog-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-dialog-heading-text-color","description":"Specifies the text color of the component's `heading`."},{"name":"--calcite-dialog-description-text-color","description":"Specifies the text color of the component's `description`."},{"name":"--calcite-dialog-header-background-color","description":"Specifies the background color of the component's header."},{"name":"--calcite-dialog-header-action-background-color","description":"Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions`."},{"name":"--calcite-dialog-header-action-background-color-hover","description":"Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when hovered."},{"name":"--calcite-dialog-header-action-background-color-press","description":"Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed."},{"name":"--calcite-dialog-header-action-text-color","description":"Specifies the text color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions`."},{"name":"--calcite-dialog-header-action-text-color-press","description":"Specifies the text color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed or hovered."},{"name":"--calcite-dialog-footer-background-color","description":"Specifies the background color of the component's footer."},{"name":"--calcite-dialog-space","description":"Specifies the padding of the component's `\"unnamed (default)\"` slot."},{"name":"--calcite-dialog-header-content-space","description":"Specifies the padding of the `\"header-content\"` slot."},{"name":"--calcite-dialog-action-menu-border-color","description":"Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s."},{"name":"--calcite-dropdown-width","description":"Specifies the width of the component's wrapper."},{"name":"--calcite-dropdown-background-color","description":"Specifies the component's background color."},{"name":"--calcite-dropdown-group-border-color","description":"Specifies the `calcite-dropdown`'s border color."},{"name":"--calcite-dropdown-group-title-text-color","description":"Specifies the component's `groupTitle` color."},{"name":"--calcite-dropdown-item-background-color-hover","description":"Specifies the item's background color when hovered."},{"name":"--calcite-dropdown-item-background-color-press","description":"Specifies the item's background color when selected or active."},{"name":"--calcite-dropdown-item-icon-color-hover","description":"[Deprecated] Specifies the item's icon selection color when hovered."},{"name":"--calcite-dropdown-item-icon-color-press","description":"Specifies the item's icon selection color when selected or active."},{"name":"--calcite-dropdown-item-text-color-press","description":"Specifies the item's text when selected or active."},{"name":"--calcite-dropdown-item-text-color","description":"Specifies the item's text color."},{"name":"--calcite-fab-background-color","description":"Specifies the component's background color."},{"name":"--calcite-fab-border-color","description":"Specifies the component's border color."},{"name":"--calcite-fab-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-fab-text-color","description":"Specifies the component's text color."},{"name":"--calcite-fab-loader-color","description":"Specifies the component's loader color."},{"name":"--calcite-fab-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-filter-content-space","description":"Specifies the padding of the component's content."},{"name":"--calcite-filter-input-background-color","description":"Specifies the input's background color."},{"name":"--calcite-filter-input-border-color","description":"Specifies the input's border color."},{"name":"--calcite-filter-input-corner-radius","description":"Specifies the input's corner radius."},{"name":"--calcite-filter-input-shadow","description":"Specifies the shadow around the input."},{"name":"--calcite-filter-input-icon-color","description":"Specifies the input's icon color."},{"name":"--calcite-filter-input-text-color","description":"Specifies the input's text color."},{"name":"--calcite-filter-input-placeholder-text-color","description":"Specifies the input's placeholder text color."},{"name":"--calcite-filter-input-actions-background-color","description":"Specifies the background color of the input's `clearable` element."},{"name":"--calcite-filter-input-actions-background-color-hover","description":"Specifies the background color of the input's `clearable` element when hovered."},{"name":"--calcite-filter-input-actions-background-color-press","description":"Specifies the background color of the input's `clearable` element when pressed."},{"name":"--calcite-filter-input-actions-icon-color","description":"Specifies the icon color of the input's `clearable` element."},{"name":"--calcite-filter-input-actions-icon-color-hover","description":"Specifies the icon color of the input's `clearable` element when hovered."},{"name":"--calcite-filter-input-actions-icon-color-press","description":"Specifies the icon color of the input's `clearable` element when pressed."},{"name":"--calcite-flow-background-color","description":"Specifies the component's background color."},{"name":"--calcite-flow-item-footer-padding","description":"[Deprecated] Use `--calcite-flow-footer-space` instead. Specifies the padding of the component's footer."},{"name":"--calcite-flow-item-header-border-block-end","description":"[Deprecated] Use `--calcite-flow-border-color` instead. Specifies the component header's block end border."},{"name":"--calcite-flow-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-flow-heading-text-color","description":"Specifies the text color of the component's `heading`."},{"name":"--calcite-flow-icon-color","description":"Specifies the color of the component's icon."},{"name":"--calcite-flow-description-text-color","description":"Specifies the text color of the component's `description`."},{"name":"--calcite-flow-border-color","description":"Specifies the component's border color."},{"name":"--calcite-flow-background-color","description":"Specifies the component's background color."},{"name":"--calcite-flow-header-background-color","description":"Specifies the background color of the component's header."},{"name":"--calcite-flow-footer-background-color","description":"Specifies the background color of the component's footer."},{"name":"--calcite-flow-space","description":"Specifies the padding of the component's `\"unnamed (default)\"` slot."},{"name":"--calcite-flow-header-content-space","description":"Specifies the padding of the `\"header-content\"` slot."},{"name":"--calcite-flow-footer-space","description":"Specifies the padding of the component's footer."},{"name":"--calcite-action-background-color","description":"Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s."},{"name":"--calcite-action-background-color-hover","description":"Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s."},{"name":"--calcite-action-background-color-pressed","description":"Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s."},{"name":"--calcite-action-text-color-hover","description":"Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s."},{"name":"--calcite-action-text-color-pressed","description":"Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s."},{"name":"--calcite-popover-border-color","description":"Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s."},{"name":"--calcite-flow-header-action-background-color-hover","description":"Specifies the background color of the component's `calcite-action` items  in the flow item header when hovered."},{"name":"--calcite-flow-header-action-background-color-press","description":"Specifies the background color of the component's `calcite-action` items  in the flow item header when pressed."},{"name":"--calcite-flow-header-action-background-color","description":"Specifies the background color of the component's `calcite-action` items  in the flow item header."},{"name":"--calcite-flow-header-action-indicator-color","description":"Specifies the color of the component's `calcite-action` items' indicator in the flow item header."},{"name":"--calcite-flow-header-action-text-color-press","description":"Specifies the text color of the component's `calcite-action` items in the flow item header when pressed."},{"name":"--calcite-flow-header-action-text-color","description":"Specifies the text color of the component's `calcite-action` items in the flow item header."},{"name":"--calcite-graph-highlight-fill-color","description":"Specifies the fill color of the `highlight` element, when present."},{"name":"--calcite-handle-background-color","description":"Specifies the component's background color."},{"name":"--calcite-handle-background-color-hover","description":"Specifies the component's background color on hover."},{"name":"--calcite-handle-background-color-selected","description":"Specifies the component's background color when selected."},{"name":"--calcite-handle-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-handle-icon-color-hover","description":"Specifies the component's icon color on hover."},{"name":"--calcite-handle-icon-color-selected","description":"Specifies the component's icon color when selected."},{"name":"--calcite-ui-icon-color","description":"[Deprecated] Use `--calcite-icon-color`. Specifies the component's color. Defaults to current color."},{"name":"--calcite-icon-color","description":"Specifies the component's color. Defaults to current color."},{"name":"--calcite-inline-editable-background-color-hover","description":"Specifies the component's background color when hovered."},{"name":"--calcite-inline-editable-background-color","description":"Specifies the component's background color."},{"name":"--calcite-inline-editable-button-background-color","description":"Specifies the button element's background color when appearance=\"solid\" or appearance=\"outline-fill\"."},{"name":"--calcite-inline-editable-button-corner-radius","description":"Specifies the button element's corner radius."},{"name":"--calcite-inline-editable-button-loader-color","description":"Specifies the button element's loader color."},{"name":"--calcite-inline-editable-button-text-color","description":"Specifies the button element's text color."},{"name":"--calcite-input-prefix-size","description":"Specifies the component's prefix width, when present."},{"name":"--calcite-input-suffix-size","description":"Specifies the component's suffix width, when present."},{"name":"--calcite-input-background-color","description":"Specifies the component's background color."},{"name":"--calcite-input-border-color","description":"Specifies the component's border color."},{"name":"--calcite-input-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-input-shadow","description":"Specifies the shadow around the component."},{"name":"--calcite-input-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-input-text-color","description":"Specifies the component's text color."},{"name":"--calcite-input-placeholder-text-color","description":"Specifies the component's placeholder text color."},{"name":"--calcite-input-actions-background-color","description":"Specifies the background color of the component's `clearable` and `number-button-type` elements."},{"name":"--calcite-input-actions-background-color-hover","description":"Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered."},{"name":"--calcite-input-actions-background-color-press","description":"Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed."},{"name":"--calcite-input-actions-icon-color","description":"Specifies the icon color of the component's `clearable` and `number-button-type` elements."},{"name":"--calcite-input-actions-icon-color-hover","description":"Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered."},{"name":"--calcite-input-actions-icon-color-press","description":"Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed."},{"name":"--calcite-input-loading-background-color","description":"Specifies the background color of the `loading` element, when present."},{"name":"--calcite-input-loading-fill-color","description":"Specifies the fill color of the `loading` element, when present."},{"name":"--calcite-input-prefix-text-color","description":"Specifies the component's prefix text color, when present."},{"name":"--calcite-input-suffix-text-color","description":"Specifies the component's suffix text color, when present."},{"name":"--calcite-input-date-picker-actions-icon-color","description":"Specifies the component's actions icon color."},{"name":"--calcite-input-date-picker-actions-icon-color-hover","description":"Specifies the component's actions icon color on hover."},{"name":"--calcite-input-date-picker-background-color","description":"Specifies the component's input background color."},{"name":"--calcite-input-date-picker-border-color","description":"Specifies the component's input border color."},{"name":"--calcite-input-date-picker-calendar-actions-background-color","description":"Specifies the background color of actions of the calendar."},{"name":"--calcite-input-date-picker-calendar-actions-background-color-hover","description":"Specifies the background color of actions of the calendar when hovered."},{"name":"--calcite-input-date-picker-calendar-actions-background-color-press","description":"Specifies the background color of actions of the calendar when pressed."},{"name":"--calcite-input-date-picker-calendar-actions-text-color","description":"Specifies the text color of the component's calendar actions."},{"name":"--calcite-input-date-picker-calendar-actions-text-color-press","description":"Specifies the text color of the component's calendar actions when pressed."},{"name":"--calcite-input-date-picker-calendar-border-color","description":"Specifies the component's calendar border color."},{"name":"--calcite-input-date-picker-calendar-corner-radius","description":"Specifies the component's calendar corner radius."},{"name":"--calcite-input-date-picker-calendar-current-day-text-color","description":"Specifies the text color of current day of the component's date-picker."},{"name":"--calcite-input-date-picker-calendar-day-background-color","description":"Specifies the background color of day of the calendar."},{"name":"--calcite-input-date-picker-calendar-day-background-color-hover","description":"Specifies the background color of day of the calendar when hovered."},{"name":"--calcite-input-date-picker-calendar-day-current-text-color","description":"[Deprecated] Use `--calcite-input-date-picker-calendar-current-day-text-color`. Specifies the text color of current day of the component's date-picker."},{"name":"--calcite-input-date-picker-calendar-day-range-text-color","description":"Specifies the text color of select day range of the component's date-picker."},{"name":"--calcite-input-date-picker-calendar-day-text-color-selected","description":"Specifies the text color of selected day of the component's date-picker."},{"name":"--calcite-input-date-picker-calendar-day-outside-range-background-color-hover","description":"Specifies the background color of day's outside current range of the component's date-picker when hovered."},{"name":"--calcite-input-date-picker-calendar-day-outside-range-text-color-hover","description":"Specifies the text color of day's outside current range of the component's date-picker when hovered."},{"name":"--calcite-input-date-picker-calendar-day-text-color","description":"Specifies the text color of day of the component's date-picker."},{"name":"--calcite-input-date-picker-calendar-day-text-color-hover","description":"Specifies the text color of day of the component's date-picker when hovered."},{"name":"--calcite-input-date-picker-calendar-selected-background-color","description":"Specifies the background color of selected day and day range of the calendar."},{"name":"--calcite-input-date-picker-calendar-shadow","description":"the component's calendar shadow."},{"name":"--calcite-input-date-picker-calendar-icon-color","description":"Specifies the component's calendar icon color."},{"name":"--calcite-input-date-picker-calendar-icon-color-hover","description":"Specifies the component's calendar icon color."},{"name":"--calcite-input-date-picker-calendar-month-select-text-color","description":"Specifies the text color of month select of the component's date-picker."},{"name":"--calcite-input-date-picker-calendar-range-divider-color","description":"Specifies the divider color between the component's date-picker."},{"name":"--calcite-input-date-picker-calendar-text-color","description":"Specifies the text color of the component's calendar week, year & suffix."},{"name":"--calcite-input-date-picker-corner-radius","description":"Specifies the component's input corner radius."},{"name":"--calcite-input-date-picker-divider-color","description":"Specifies the component's divider color between two inputs when in range mode."},{"name":"--calcite-input-date-picker-icon-color","description":"Specifies the component's in-field input icon color."},{"name":"--calcite-input-date-picker-placeholder-text-color","description":"Specifies the component's input placeholder text color."},{"name":"--calcite-input-date-picker-shadow","description":"Specifies the component's input shadow."},{"name":"--calcite-input-date-picker-text-color","description":"Specifies the component's input text color."},{"name":"--calcite-input-message-spacing-value","description":"[Deprecated] Use `--calcite-input-message-spacing`. Specifies the margin spacing at the top of the component."},{"name":"--calcite-input-message-spacing","description":"Specifies the margin spacing at the top of the component."},{"name":"--calcite-input-message-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-input-actions-background-color","description":"Specifies the background color of the component's `clearable` and `number-button-type` elements."},{"name":"--calcite-input-actions-background-color-hover","description":"Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered."},{"name":"--calcite-input-actions-background-color-press","description":"Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed."},{"name":"--calcite-input-actions-icon-color","description":"Specifies the icon color of the component's `clearable` and `number-button-type` elements."},{"name":"--calcite-input-actions-icon-color-hover","description":"Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered."},{"name":"--calcite-input-actions-icon-color-press","description":"Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed."},{"name":"--calcite-input-loading-background-color","description":"Specifies the background color of the `loading` element."},{"name":"--calcite-input-loading-fill-color","description":"Specifies the fill color of the `loading` element."},{"name":"--calcite-input-number-background-color","description":"Specifies the background color of the component."},{"name":"--calcite-input-number-border-color","description":"Specifies the border color of the component."},{"name":"--calcite-input-number-corner-radius","description":"Specifies the border radius of the component."},{"name":"--calcite-input-number-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-input-number-height","description":"Specifies the height of the component."},{"name":"--calcite-input-number-placeholder-text-color","description":"Specifies the text color of the placeholder in the component."},{"name":"--calcite-input-number-text-color","description":"Specifies the text color of the component."},{"name":"--calcite-input-number-text-color-focus","description":"Specifies the text color of the component when focused."},{"name":"--calcite-input-prefix-size","description":"Specifies the width of the prefix element."},{"name":"--calcite-input-prefix-text-color","description":"Specifies the text color of the prefix element."},{"name":"--calcite-input-suffix-size","description":"Specifies the width of the suffix element."},{"name":"--calcite-input-suffix-text-color","description":"Specifies the text color of the suffix element."},{"name":"--calcite-input-action-background-color","description":"Specifies the background color of the component's `clearable` element."},{"name":"--calcite-input-action-background-color-hover","description":"Specifies the background color of the component's `clearable` element when hovered."},{"name":"--calcite-input-action-background-color-press","description":"Specifies the background color of the component's `clearable` element when pressed."},{"name":"--calcite-input-action-icon-color","description":"Specifies the icon color of the component's `clearable` & icon elements."},{"name":"--calcite-input-action-icon-color-hover","description":"Specifies the icon color of the component's `clearable` & icon elements when hovered."},{"name":"--calcite-input-action-icon-color-press","description":"Specifies the icon color of the component's `clearable` & icon elements when pressed."},{"name":"--calcite-input-loading-background-color","description":"Specifies the background color of the `loading` element."},{"name":"--calcite-input-loading-fill-color","description":"Specifies the fill color of the `loading` element."},{"name":"--calcite-input-prefix-size-x","description":"When `prefixText` is provided, specifies the width of the component's prefix element."},{"name":"--calcite-input-prefix-text-color","description":"When `prefixText` is provided, specifies the text color of the component's prefix element."},{"name":"--calcite-input-suffix-size-x","description":"When `suffixText` is provided, specifies the width of the component's suffix element."},{"name":"--calcite-input-suffix-text-color","description":"When `suffixText` is provided, specifies the color of the component's suffix element."},{"name":"--calcite-input-text-background-color","description":"Specifies the component's background color."},{"name":"--calcite-input-text-border-color","description":"Specifies the component's border color."},{"name":"--calcite-input-text-corner-radius","description":"Specifies the component's border radius."},{"name":"--calcite-input-text-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-input-text-placeholder-text-color","description":"Specifies the component's `placeholder` text color."},{"name":"--calcite-input-text-text-color","description":"Specifies the component's text color."},{"name":"--calcite-input-text-text-color-focus","description":"Specifies the component's text color when focused."},{"name":"--calcite-input-time-picker-background-color","description":"Specifies the component's background color."},{"name":"--calcite-input-time-picker-border-color","description":"Specifies the component's border color."},{"name":"--calcite-input-time-picker-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-input-time-picker-icon-color-hover","description":"Specifies the component's icon color when hovered."},{"name":"--calcite-input-time-picker-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-input-time-picker-corner-radius","description":"Specifies the component's border radius."},{"name":"--calcite-input-time-picker-input-background-color","description":"Specifies the component's input background color."},{"name":"--calcite-input-time-picker-input-text-color","description":"Specifies the component's input text color."},{"name":"--calcite-input-time-picker-input-shadow","description":"Specifies the component's input shadow."},{"name":"--calcite-input-time-picker-input-corner-radius","description":"Specifies the component's input border radius."},{"name":"--calcite-input-time-picker-input-border-color","description":"Specifies the component's input border color."},{"name":"--calcite-input-time-picker-digit-text-color","description":"Specifies the component's digit text color."},{"name":"--calcite-input-time-picker-digit-icon-color","description":"Specifies the component's digit icon color."},{"name":"--calcite-input-time-picker-digit-border-color-press","description":"Specifies the component's digit border color when pressed."},{"name":"--calcite-input-time-picker-digit-border-color-hover","description":"Specifies the component's digit border color when hovered."},{"name":"--calcite-input-time-picker-action-background-color-hover","description":"Specifies the background color of the component's actions when hovered or focused."},{"name":"--calcite-input-time-picker-action-background-color-press","description":"Specifies the background color of the component's actions when active."},{"name":"--calcite-label-margin-bottom","description":"Specifies the component's bottom spacing."},{"name":"--calcite-label-text-color","description":"Specifies the component's text color."},{"name":"--calcite-link-text-color","description":"Specifies the component's text color."},{"name":"--calcite-list-background-color","description":"Specifies the component's background color."},{"name":"--calcite-list-background-color-hover","description":"Specifies the component's background color when hovered."},{"name":"--calcite-list-background-color-press","description":"Specifies the component's background color when pressed."},{"name":"--calcite-list-background-color","description":"Specifies the component's background color."},{"name":"--calcite-list-border-color","description":"Specifies the component's border color."},{"name":"--calcite-list-content-text-color","description":"Specifies the content color."},{"name":"--calcite-list-description-text-color","description":"Specifies the `description` color."},{"name":"--calcite-list-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-list-label-text-color","description":"Specifies the `label` color."},{"name":"--calcite-list-selection-border-color","description":"Specifies the component's selection border color."},{"name":"--calcite-list-background-color","description":"Specifies the component's background color."},{"name":"--calcite-list-color","description":"Specifies the component's color."},{"name":"--calcite-loader-font-size","description":"When `type` is not `\"indeterminate\"` or `inline`, specifies the font size of the loading percentage."},{"name":"--calcite-loader-size","description":"Specifies the component's width and height."},{"name":"--calcite-loader-size-inline","description":"[Deprecated] Use `--calcite-loader-size`. Specifies the width and height of the component when set to inline."},{"name":"--calcite-loader-spacing","description":"Specifies the the component's padding."},{"name":"--calcite-loader-progress-color-inline","description":"When `inline`, specifies the component's progress ring color."},{"name":"--calcite-loader-text-spacing","description":"When not `inline`, specifies the component's `text` margin."},{"name":"--calcite-loader-text-weight","description":"When not `inline` and `text` is provided, specifies the component's `text` font weight."},{"name":"--calcite-loader-text-color","description":"When not `inline` and `text` is provided, specifies the component's `text` color."},{"name":"--calcite-loader-progress-color","description":"When not `inline`, specifies the component's progress ring color."},{"name":"--calcite-loader-track-color","description":"Specifies the component's track color."},{"name":"--calcite-menu-item-accent-color","description":"When `active`, specifies the component's border color."},{"name":"--calcite-menu-background-color","description":"Specifies the component's background color."},{"name":"--calcite-menu-item-sub-menu-border-color","description":"Specifies the submenu's border color."},{"name":"--calcite-menu-item-sub-menu-corner-radius","description":"Specifies the submenu's border radius."},{"name":"--calcite-menu-text-color","description":"Specifies the component's text color."},{"name":"--calcite-meter-background-color","description":"Specifies the background color of the component."},{"name":"--calcite-meter-border-color","description":"Specifies the border color of the component and displayed step lines."},{"name":"--calcite-meter-shadow","description":"Specifies the box shadow of the component."},{"name":"--calcite-meter-corner-radius","description":"Specifies the corner radius of the component."},{"name":"--calcite-meter-fill-color","description":"Specifies the color of the component's fill."},{"name":"--calcite-meter-range-text-color","description":"Specifies the color of the component's range labels."},{"name":"--calcite-meter-value-text-color","description":"Specifies the color of the component's value label."},{"name":"--calcite-navigation-width","description":"Specifies the width of the component's content area."},{"name":"--calcite-navigation-background","description":"[Deprecated] Use `--calcite-navigation-background-color`. Specifies the background color of the component."},{"name":"--calcite-navigation-background-color","description":"Specifies the component's background color."},{"name":"--calcite-navigation-border-color","description":"Specifies the component's border color."},{"name":"--calcite-navigation-accent-color","description":"When `active`, specifies the component's border color."},{"name":"--calcite-navigation-background-color","description":"Specifies the component's background color."},{"name":"--calcite-navigation-logo-heading-text-color","description":"Specifies the component's `heading` text color."},{"name":"--calcite-navigation-logo-text-color","description":"Specifies the component's `description` text color."},{"name":"--calcite-navigation-accent-color","description":"When `active`, specifies the components's border color."},{"name":"--calcite-navigation-user-avatar-corner-radius","description":"Specifies the component's avatar corner radius."},{"name":"--calcite-navigation-user-avatar-color","description":"Specifies the component's avatar icon color."},{"name":"--calcite-navigation-background-color","description":"Specifies the component's background color."},{"name":"--calcite-navigation-user-full-name-text-color","description":"Specifies the component's `fullName` text color."},{"name":"--calcite-navigation-user-name-text-color","description":"Specifies the component's `username` text color."},{"name":"--calcite-notice-background-color","description":"When `appearance=\"outline-fill\"`, specifies the component's background color."},{"name":"--calcite-notice-border-color","description":"When `appearance=\"outline-fill\"`, specifies the component's border color."},{"name":"--calcite-notice-corner-radius","description":"Specifies the component's border radius."},{"name":"--calcite-notice-close-background-color","description":"Specifies the background color of the component's close element."},{"name":"--calcite-notice-close-background-color-hover","description":"Specifies the background color of the component's close element when hovered."},{"name":"--calcite-notice-close-background-color-focus","description":"[Deprecated] Specifies the background color of the component's close element when hovered. Use `--calcite-notice-close-background-color-hover` instead."},{"name":"--calcite-notice-close-background-color-press","description":"Specifies the background color of the component's close element when active."},{"name":"--calcite-notice-close-icon-color-hover","description":"Specifies the icon color of the component's close element when hovered or active."},{"name":"--calcite-notice-close-icon-color","description":"Specifies the icon color of the component's close element."},{"name":"--calcite-notice-title-text-color","description":"Specifies the component's slotted `\"title\"` content text color."},{"name":"--calcite-notice-content-text-color","description":"Specifies the component's slotted `\"message\"` content text color."},{"name":"--calcite-notice-width","description":"[Deprecated] Specifies the component's width."},{"name":"--calcite-notice-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-pagination-color","description":"Specifies the component's item color."},{"name":"--calcite-pagination-color-hover","description":"Specifies the component's item color when hovered or selected."},{"name":"--calcite-pagination-color-border-hover","description":"Specifies the component's item bottom border color when hovered."},{"name":"--calcite-pagination-color-border-active","description":"Specifies the component's item bottom border color when selected."},{"name":"--calcite-pagination-background-color","description":"Specifies the component's item background color when active."},{"name":"--calcite-pagination-icon-color-background-hover","description":"Specifies the component's chevron item background color when hovered."},{"name":"--calcite-panel-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-panel-heading-text-color","description":"Specifies the text color of the component's `heading`."},{"name":"--calcite-panel-icon-color","description":"Specifies the color of the component's icon."},{"name":"--calcite-panel-description-text-color","description":"Specifies the text color of the component's `description`."},{"name":"--calcite-panel-border-color","description":"Specifies the component's border color."},{"name":"--calcite-panel-background-color","description":"Specifies the component's background color."},{"name":"--calcite-panel-header-background-color","description":"Specifies the background color of the component's header."},{"name":"--calcite-panel-header-action-background-color","description":"Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions`."},{"name":"--calcite-panel-header-action-background-color-hover","description":"Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when hovered."},{"name":"--calcite-panel-header-action-background-color-press","description":"Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed."},{"name":"--calcite-panel-header-action-text-color","description":"Specifies the text color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions`."},{"name":"--calcite-panel-header-action-text-color-press","description":"Specifies the text color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed or hovered."},{"name":"--calcite-panel-footer-background-color","description":"Specifies the background color of the component's footer."},{"name":"--calcite-panel-space","description":"Specifies the padding of the component's `\"unnamed (default)\"` slot."},{"name":"--calcite-panel-header-content-space","description":"Specifies the padding of the `\"header-content\"` slot."},{"name":"--calcite-panel-footer-space","description":"Specifies the padding of the component's footer."},{"name":"--calcite-popover-border-color","description":"Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s."},{"name":"--calcite-panel-content-space","description":"[Deprecated] Use `--calcite-panel-space` instead. Specifies the padding of the component's content."},{"name":"--calcite-panel-footer-padding","description":"[Deprecated] Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer."},{"name":"--calcite-panel-header-border-block-end","description":"[Deprecated] Use `--calcite-panel-border-color` instead. Specifies the component header's block end border."},{"name":"--calcite-popover-background-color","description":"Specifies the component's background color."},{"name":"--calcite-popover-border-color","description":"Specifies the component's border color."},{"name":"--calcite-popover-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-popover-max-size-x","description":"Specifies the component's maximum width."},{"name":"--calcite-popover-text-color","description":"Specifies the component's text color."},{"name":"--calcite-progress-background-color","description":"Specifies the component's background color."},{"name":"--calcite-progress-fill-color","description":"Specifies the component's fill color."},{"name":"--calcite-progress-text-color","description":"Specifies the component's text color."},{"name":"--calcite-radio-button-background-color","description":"Specifies the component's background color."},{"name":"--calcite-radio-button-border-color","description":"Specifies the component's border color."},{"name":"--calcite-radio-button-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-radio-button-size","description":"Specifies the component's size."},{"name":"--calcite-radio-button-group-gap","description":"Specifies the space between slotted components in the component."},{"name":"--calcite-radio-button-input-message-spacing","description":"Specifies the margin spacing at the top of the `calcite-input-message`."},{"name":"--calcite-rating-spacing","description":"Specifies the amount of left and right margin spacing between each item."},{"name":"--calcite-rating-color-hover","description":"Specifies the component's item color when hovered."},{"name":"--calcite-rating-color-press","description":"Specifies the component's item color when active."},{"name":"--calcite-rating-color","description":"Specifies the component's item color."},{"name":"--calcite-rating-average-color","description":"When `average` is set, specifies the component's item color."},{"name":"--calcite-rating-average-text-color","description":"When `average` is set, specifies the component's `average` text color."},{"name":"--calcite-rating-count-text-color","description":"Specifies the component's text color for `count`."},{"name":"--calcite-scrim-background","description":"Specifies the component's background color."},{"name":"--calcite-segmented-control-border-color","description":"Specifies the component's border color."},{"name":"--calcite-segmented-control-color","description":"Specifies the component's color."},{"name":"--calcite-segmented-control-background-color","description":"Specifies the component's background color."},{"name":"--calcite-segmented-control-border-color","description":"Specifies the component's border color."},{"name":"--calcite-segmented-control-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-segmented-control-icon-color","description":"Specifies the icons's color."},{"name":"--calcite-select-font-size","description":"Specifies the font size of `calcite-option`s in the component."},{"name":"--calcite-select-text-color","description":"Specifies the text color of `calcite-option`s in the component."},{"name":"--calcite-select-border-color","description":"Specifies the component's border color."},{"name":"--calcite-select-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-select-icon-color-hover","description":"Specifies the component's icon color when hovered or active."},{"name":"--calcite-select-background-color","description":"Specifies the component's background color."},{"name":"--calcite-select-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-select-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-sheet-background-color","description":"Specifies the component's background color."},{"name":"--calcite-sheet-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-sheet-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-sheet-text-color","description":"Specifies the component's text color."},{"name":"--calcite-sheet-resize-background-color","description":"Specifies the resize handle's background color."},{"name":"--calcite-sheet-resize-icon-color","description":"Specifies the resize handle's text color."},{"name":"--calcite-sheet-scrim-background","description":"Specifies the background color of the component's scrim."},{"name":"--calcite-sheet-width","description":"When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the component's width."},{"name":"--calcite-sheet-max-width","description":"When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the component's maximum width."},{"name":"--calcite-sheet-min-width","description":"When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the component's minimum width."},{"name":"--calcite-sheet-height","description":"When `position` is `\"block-start\"` or `\"block-end\"`, specifies the component's height."},{"name":"--calcite-sheet-max-height","description":"When `position` is `\"block-start\"` or `\"block-end\"`, specifies the component's maximum height."},{"name":"--calcite-sheet-min-height","description":"When `position` is `\"block-start\"` or `\"block-end\"`, specifies the component's minimum height."},{"name":"--calcite-shell-border-color","description":"Specifies the component's border color."},{"name":"--calcite-shell-panel-background-color","description":"Specifies the component's background color."},{"name":"--calcite-shell-panel-border-color","description":"When `displayMode` is `\"float-all\"`, specifies the component's border color."},{"name":"--calcite-shell-panel-corner-radius","description":"When `displayMode` is `\"float-all\"`, specifies the component's corner radius."},{"name":"--calcite-shell-panel-height","description":"When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float` or `float-all`, specifies the component's height."},{"name":"--calcite-shell-panel-max-height","description":"When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the component's maximum height."},{"name":"--calcite-shell-panel-min-height","description":"When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the component's minimum height."},{"name":"--calcite-shell-panel-max-width","description":"Specifies the component's maximum width."},{"name":"--calcite-shell-panel-resize-icon-color","description":"Specifies the resize handle's text color."},{"name":"--calcite-shell-panel-shadow","description":"When `displayMode` is `\"float-all\"`, specifies the component's shadow."},{"name":"--calcite-shell-panel-text-color","description":"Specifies the component's text color."},{"name":"--calcite-shell-panel-width","description":"Specifies the component's width."},{"name":"--calcite-shell-panel-z-index","description":"Specifies the component's z-index value."},{"name":"--calcite-slider-text-color","description":"Specifies the component's text color."},{"name":"--calcite-slider-track-color","description":"Specifies the component's track color."},{"name":"--calcite-slider-track-fill-color","description":"Specifies the component's track fill color."},{"name":"--calcite-slider-handle-fill-color","description":"Specifies the component's handle fill color."},{"name":"--calcite-slider-handle-extension-color","description":"Specifies the component's handle extension color."},{"name":"--calcite-slider-accent-color","description":"Specifies the component's accent color."},{"name":"--calcite-slider-tick-color","description":"Specifies the component's tick color."},{"name":"--calcite-slider-tick-border-color","description":"Specifies the component's tick border color."},{"name":"--calcite-slider-tick-selected-color","description":"Specifies the component's tick color when in selected range."},{"name":"--calcite-slider-graph-color","description":"Specifies the component's graph color."},{"name":"--calcite-split-button-background-color","description":"Specifies the component's background color."},{"name":"--calcite-split-button-background-color-hover","description":"Specifies the component's background color when hovered."},{"name":"--calcite-split-button-background-color-focus","description":"Specifies the component's background color when focused."},{"name":"--calcite-split-button-background-color-press","description":"Specifies the component's background color when active."},{"name":"--calcite-split-button-border-color","description":"Specifies the component's border color."},{"name":"--calcite-split-button-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-split-button-icon-color","description":"Specifies the component's `iconStart` and `iconEnd` color."},{"name":"--calcite-split-button-loader-color","description":"Specifies the component's loader color."},{"name":"--calcite-split-button-text-color","description":"Specifies the component's text color."},{"name":"--calcite-split-button-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-split-button-divider-border-color","description":"Specifies the component's divider border color."},{"name":"--calcite-split-button-divider-color","description":"Specifies the component's divider color."},{"name":"--calcite-split-button-dropdown-width","description":"Specifies the width of the component's dropdown."},{"name":"--calcite-split-button-dropdown-background-color","description":"Specifies the component's dropdown background color.\n*"},{"name":"--calcite-stack-padding-inline","description":"Specifies the inline padding of the component's content."},{"name":"--calcite-stack-padding-block","description":"Specifies the block padding of the component's content."},{"name":"--calcite-stepper-bar-gap","description":"Specifies the space between the component's `calcite-stepper-item`s."},{"name":"--calcite-stepper-bar-inactive-fill-color","description":"Specifies the `calcite-stepper-item`s' bar fill color of the component's `calcite-stepper-item`s."},{"name":"--calcite-stepper-bar-active-fill-color","description":"Specifies the `calcite-stepper-item`s' bar fill color of the component's active `calcite-stepper-item`s."},{"name":"--calcite-stepper-bar-complete-fill-color","description":"When `calcite-stepper-item`s are `complete`, specifies the component's `calcite-stepper-item`s' bar fill color."},{"name":"--calcite-stepper-bar-error-fill-color","description":"When `calcite-stepper-item`s contain an `error`, specifies the component's `calcite-stepper-item`s' bar fill color."},{"name":"--calcite-stepper-item-background-color-press","description":"Specifies the component's background-color when active."},{"name":"--calcite-stepper-item-header-text-color","description":"Specifies the component's header text color."},{"name":"--calcite-stepper-item-header-text-color-hover","description":"Specifies the component's header text color when hovered or focused."},{"name":"--calcite-stepper-item-selected-header-text-color","description":"When `selected`, specifies the component's header text color."},{"name":"--calcite-stepper-item-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-stepper-item-complete-icon-color","description":"When `complete`, specifies the component's icon color."},{"name":"--calcite-stepper-item-error-icon-color","description":"When `error`, specifies the component's icon and number color."},{"name":"--calcite-stepper-item-selected-icon-color","description":"When `selected`, specifies the component's icon and number color."},{"name":"--calcite-stepper-item-description-text-color","description":"Specifies the component's description and number text color."},{"name":"--calcite-stepper-item-description-text-color-hover","description":"When `selected`, hovered, or focused, specifies the component's description text color."},{"name":"--calcite-stepper-bar-gap","description":"Specifies the component's bottom spacing."},{"name":"--calcite-stepper-bar-fill-color","description":"Specifies the component's fill color."},{"name":"--calcite-stepper-bar-fill-color-hover","description":"Specifies the component's fill color when hovered or focused."},{"name":"--calcite-stepper-bar-complete-fill-color","description":"When `complete`, specifies the component's fill color."},{"name":"--calcite-stepper-bar-complete-fill-color-hover","description":"When `complete`, specifies the component's fill color when hovered or focused."},{"name":"--calcite-stepper-bar-error-fill-color","description":"When `error`, specifies the component's fill color."},{"name":"--calcite-stepper-bar-error-fill-color-hover","description":"When `error`, specifies the component's fill color when hovered or focused."},{"name":"--calcite-stepper-bar-selected-fill-color","description":"When `selected`, specifies the component's fill color."},{"name":"--calcite-swatch-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-swatch-group-space","description":"Specifies the space between slotted elements."},{"name":"--calcite-switch-background-color","description":"Specifies the component's background color."},{"name":"--calcite-switch-background-color-hover","description":"Specifies the component's background color when hovered or pressed."},{"name":"--calcite-switch-border-color","description":"[Deprecated] No longer necessary. Specifies the component's border color."},{"name":"--calcite-switch-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-switch-handle-background-color","description":"Specifies the handle's background color."},{"name":"--calcite-switch-handle-border-color","description":"[Deprecated] No longer necessary. Specifies the handle's border color."},{"name":"--calcite-switch-handle-shadow","description":"[Deprecated] No longer necessary. Specifies the handle's shadow."},{"name":"--calcite-tab-content-space-y","description":"Specifies the vertical space between the component's content in the `default` slot."},{"name":"--calcite-tab-content-block-padding","description":"[Deprecated] Use `--calcite-tab-content-space-y` instead. Specifies the block padding of the component's content in the `default` slot."},{"name":"--calcite-tab-background-color","description":"Specifies the component's background color."},{"name":"--calcite-tab-border-color","description":"When `calcite-tabs` is `bordered`, specifies the component's border color."},{"name":"--calcite-tab-text-color","description":"Specifies the component's `iconStart`, `iconEnd`, and text color."},{"name":"--calcite-tab-text-color","description":"Specifies the component's text color."},{"name":"--calcite-tab-text-color-press","description":"Specifies the component's text color when hovered, pressed, or selected."},{"name":"--calcite-tab-border-color","description":"Specifies the component's border color."},{"name":"--calcite-tab-background-color","description":"Specifies the component's background color."},{"name":"--calcite-tab-background-color-hover","description":"When `calcite-tabs` is `bordered`, specifies the component's background color when hovered."},{"name":"--calcite-tab-accent-color-press","description":"When `selected` or active, specifies the component's accent color."},{"name":"--calcite-tab-icon-color-start","description":"Specifies the component's `iconStart` color."},{"name":"--calcite-tab-icon-color-start-press","description":"When `selected`, hovered, or pressed, specifies the component's `iconStart` color."},{"name":"--calcite-tab-icon-color-end","description":"Specifies the component's `iconEnd` color."},{"name":"--calcite-tab-icon-color-end-press","description":"When `selected`, hovered, or pressed, specifies the component's `iconEnd` color."},{"name":"--calcite-tab-close-icon-color","description":"Specifies the component's close element icon color."},{"name":"--calcite-tab-close-icon-color-press","description":"Specifies the component's close element icon color when hovered, focused, and active."},{"name":"--calcite-tab-close-icon-background-color","description":"Specifies the component's close element icon background color."},{"name":"--calcite-tab-close-icon-background-color-press","description":"Specifies the component's close element icon background color when pressed."},{"name":"--calcite-tab-close-icon-background-color-hover","description":"Specifies the component's close element icon background color when hovered."},{"name":"--calcite-table-border-color","description":"Specifies the component's border color."},{"name":"--calcite-table-corner-radius","description":"Specifies the component's border radius."},{"name":"--calcite-table-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-table-number-cell-background-color","description":"Specifies the background color of the component's `numbered` cell."},{"name":"--calcite-table-number-cell-text-color","description":"Specifies the text color of the component's `numbered` cell."},{"name":"--calcite-table-selection-cell-background-color","description":"When `selectionMode` is `\"multiple\"` or `\"single\"`, specifies the background color of cells containing selection icons."},{"name":"--calcite-table-selection-cell-background-color-selected","description":"When `selectionMode` is `\"multiple\"` or `\"single\"`, specifies the background color of cells containing selection icons on `selected` `calcite-table-row`s."},{"name":"--calcite-table-selection-cell-icon-color","description":"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`."},{"name":"--calcite-table-selection-cell-icon-color-selected","description":"When `selectionMode` is `\"multiple\"` or `\"single\"`, specifies the icon color of the component's selection icon on `selected` `calcite-table-row`s."},{"name":"--calcite-table-selection-chip-background-color","description":"When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are not `selected`, specifies the background color of the component's selection chip."},{"name":"--calcite-table-selection-chip-border-color","description":"When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are not `selected`, specifies the border color of the component's selection chip."},{"name":"--calcite-table-selection-chip-corner-radius","description":"When `selectionMode` is `\"multiple\"` or `\"single\"`, specifies the corner radius of the component's selection chip."},{"name":"--calcite-table-selection-chip-shadow","description":"When `selectionMode` is `\"multiple\"` or `\"single\"`, specifies the shadow of the component's selection chip."},{"name":"--calcite-table-selection-chip-text-color","description":"When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are not `selected`, specifies the text color of the component's selection chip."},{"name":"--calcite-table-selection-chip-background-color-selected","description":"When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection chip."},{"name":"--calcite-table-selection-chip-border-color-selected","description":"When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection chip."},{"name":"--calcite-table-selection-chip-text-color-selected","description":"When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection chip."},{"name":"--calcite-table-selection-out-of-view-chip-background-color","description":"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."},{"name":"--calcite-table-selection-out-of-view-chip-border-color","description":"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."},{"name":"--calcite-table-selection-out-of-view-chip-corner-radius","description":"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."},{"name":"--calcite-table-selection-out-of-view-chip-icon-color","description":"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."},{"name":"--calcite-table-selection-out-of-view-chip-shadow","description":"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."},{"name":"--calcite-table-selection-out-of-view-chip-text-color","description":"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."},{"name":"--calcite-table-selection-dismiss-button-background-color-active","description":"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."},{"name":"--calcite-table-selection-dismiss-button-background-color-hover","description":"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."},{"name":"--calcite-table-selection-dismiss-button-background-color","description":"When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection dismiss chip."},{"name":"--calcite-table-selection-dismiss-button-border-color-active","description":"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."},{"name":"--calcite-table-selection-dismiss-button-border-color-hover","description":"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."},{"name":"--calcite-table-selection-dismiss-button-border-color","description":"When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection dismiss chip."},{"name":"--calcite-table-selection-dismiss-button-corner-radius","description":"When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the corner radius of the component's selection dismiss chip."},{"name":"--calcite-table-selection-dismiss-button-shadow","description":"When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the shadow of the component's selection dismiss chip."},{"name":"--calcite-table-selection-dismiss-button-text-color-active","description":"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."},{"name":"--calcite-table-selection-dismiss-button-text-color-hover","description":"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."},{"name":"--calcite-table-selection-dismiss-button-text-color","description":"When `selectionMode` is `\"multiple\"` or `\"single\"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection dismiss chip."},{"name":"--calcite-table-pagination-color","description":"When `pageSize` is set, specifies the component's pagination item color."},{"name":"--calcite-table-pagination-color-hover","description":"When `pageSize` is set, specifies the component's pagination item color when hovered or selected."},{"name":"--calcite-table-pagination-color-border-hover","description":"When `pageSize` is set, specifies the component's pagination item bottom border color when hovered."},{"name":"--calcite-table-pagination-color-border-active","description":"When `pageSize` is set, specifies the component's pagination item bottom border color when selected."},{"name":"--calcite-table-pagination-background-color","description":"When `pageSize` is set, specifies the component's pagination item background color when active."},{"name":"--calcite-table-pagination-icon-color-background-hover","description":"When `pageSize` is set, specifies the component's pagination chevron item background color when hovered."},{"name":"--calcite-table-cell-background","description":"[Deprecated] Use `--calcite-table-cell-background-color` instead. Specifies the component's background color."},{"name":"--calcite-table-cell-background-color","description":"Specifies the component's background color."},{"name":"--calcite-table-cell-border-color","description":"Specifies the component's border color."},{"name":"--calcite-table-cell-text-color","description":"Specifies the component's text color."},{"name":"--calcite-table-header-background","description":"[Deprecated] Use the `--calcite-table-header-background-color` property instead. Specifies the component's background color."},{"name":"--calcite-table-header-background-color","description":"Specifies the component's background color."},{"name":"--calcite-table-header-border-color","description":"Specifies the component's border color."},{"name":"--calcite-table-header-heading-text-color","description":"Specifies the component's `heading` text color."},{"name":"--calcite-table-header-description-text-color","description":"Specifies the component's `description` text color."},{"name":"--calcite-table-row-background","description":"[Deprecated] Use `--calcite-table-row-background-color` instead. Specifies the background color of the component."},{"name":"--calcite-table-row-background-color","description":"Specifies the component's background color."},{"name":"--calcite-table-row-background-color-striped","description":"When `striped` is `true` on `calcite-table`, specifies the background color of the component's `striped` rows."},{"name":"--calcite-table-row-background-color-selected","description":"When `selected`, specifies the background color of the component's `selected` rows."},{"name":"--calcite-table-row-accent-color-selected","description":"Specifies the component's selected accent color."},{"name":"--calcite-table-row-border-color","description":"Specifies the component's border color."},{"name":"--calcite-tab-background-color","description":"Specifies the component's background color."},{"name":"--calcite-tab-border-color","description":"Specifies the component's border color."},{"name":"--calcite-text-area-background-color","description":"Specifies the component's background color."},{"name":"--calcite-text-area-border-color","description":"Specifies the component's text area border color."},{"name":"--calcite-text-area-character-limit-text-color","description":"Specifies the color of the character limit text displayed in the footer of the component."},{"name":"--calcite-text-area-divider-color","description":"Specifies the color of the divider between the text area and footer."},{"name":"--calcite-text-area-font-size","description":"Specifies the font size of the text area and footer."},{"name":"--calcite-text-area-max-height","description":"Specifies the component's text area maximum height."},{"name":"--calcite-text-area-min-height","description":"Specifies the component's text area minimum height."},{"name":"--calcite-text-area-max-width","description":"Specifies the component's text area maximum width."},{"name":"--calcite-text-area-min-width","description":"Specifies the component's text area minimum width."},{"name":"--calcite-text-area-text-color","description":"Specifies the component's text color."},{"name":"--calcite-text-area-footer-border-color","description":"Specifies the footer's border color."},{"name":"--calcite-text-area-corner-radius","description":"Specifies component's corner radius."},{"name":"--calcite-text-area-shadow","description":"Specifies the component's shadow."},{"name":"--calcite-text-area-footer-background-color","description":"Specifies the footer's background color."},{"name":"--calcite-tile-accent-color-press","description":"When the parent `calcite-tile-group` has a `selectionMode` that is not `\"none\"`, specifies the color of the component's selection elements, such as the radio, checkbox, and border."},{"name":"--calcite-tile-background-color","description":"Specifies the component's background color."},{"name":"--calcite-tile-border-color","description":"Specifies the component's border color."},{"name":"--calcite-tile-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-tile-heading-text-color","description":"Specifies the component's `heading` text color."},{"name":"--calcite-tile-link-color","description":"When `href` is present, specifies the component's link color."},{"name":"--calcite-tile-shadow","description":"Specifies the shadow around the component."},{"name":"--calcite-tile-text-color","description":"Specifies the component's `description` and `icon` text color, but not the `heading` text color."},{"name":"--calcite-tile-link-text-color","description":"Specifies the component's link text color."},{"name":"--calcite-time-picker-background-color","description":"Specifies the component's background color."},{"name":"--calcite-time-picker-border-color","description":"Specifies the component's border color."},{"name":"--calcite-time-picker-corner-radius","description":"Specifies the component's border radius."},{"name":"--calcite-time-picker-button-background-color-hover","description":"Specifies the button's background color when hovered or focused."},{"name":"--calcite-time-picker-button-background-color-press","description":"Specifies the button's background color when active."},{"name":"--calcite-time-picker-color","description":"Specifies the component's text color."},{"name":"--calcite-time-picker-icon-color","description":"Specifies the component's icon color."},{"name":"--calcite-time-picker-input-border-color-press","description":"Specifies the input's border color when active."},{"name":"--calcite-time-picker-input-border-color-hover","description":"Specifies the input's border color when hovered."},{"name":"--calcite-tooltip-background-color","description":"Specifies the component's background color."},{"name":"--calcite-tooltip-border-color","description":"Specifies the component's border color."},{"name":"--calcite-tooltip-corner-radius","description":"Specifies the component's corner radius."},{"name":"--calcite-tooltip-max-size-x","description":"Specifies the component's maximum width."},{"name":"--calcite-tooltip-text-color","description":"Specifies the component's text color."},{"name":"--calcite-tree-text-color","description":"Specifies the component's text color."},{"name":"--calcite-tree-text-color-selected","description":"When 'selected', specifies the component's text color."},{"name":"--calcite-tree-selected-icon-color","description":"Specifies the component's selection icon color."}],"pseudo-elements":[]}}}