@esri/calcite-components/dist/docs/web-types.json

Web Components for Esri's Calcite Design System.

{"$schema":"https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json","name":"@esri/calcite-components","version":"5.0.2","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":"### Methods\n- `componentOnReady(): Promise<this>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding non-interactive content, such as a `calcite-icon`.\n\n### CSS Properties\n- **--calcite-action-background-color-hover** - Specifies the component's background color when hovered. \n- **--calcite-action-background-color-press** - Specifies the component's background color when active. \n- **--calcite-action-background-color-pressed** - [Deprecated] Use --calcite-action-background-color-press. Specifies the component's background color when active. \n- **--calcite-action-background-color** - Specifies the component's background color. \n- **--calcite-action-corner-radius-end-end** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end end. \n- **--calcite-action-corner-radius-end-start** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end start. \n- **--calcite-action-corner-radius-start-end** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start end. \n- **--calcite-action-corner-radius-start-start** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start start. \n- **--calcite-action-corner-radius** - Specifies the component's corner radius. \n- **--calcite-action-indicator-color** - Specifies the component's indicator color. \n- **--calcite-action-text-color-press** - Specifies the component's text color when pressed or hovered. \n- **--calcite-action-text-color-pressed** - [Deprecated] Use --calcite-action-text-color-press. Specifies the component's text color when hovered. \n- **--calcite-action-text-color** - Specifies the component's text color. ","attributes":[{"name":"active","description":"When `true`, the component is highlighted.","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":[],"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":"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\""]}}],"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>"}],"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\""]}}],"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>"}],"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- **--ca