@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
1 lines • 325 kB
JSON
{"$schema":"https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json","version":1.1,"tags":[{"name":"calcite-accordion","description":"### Methods\n- `componentOnReady(): Promise<this>` - Creates a promise that resolves once the component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however `calcite-accordion-item`s can.\n\n### CSS Properties\n- **--calcite-accordion-border-color** - Specifies the component's border color. \n- **--calcite-accordion-background-color** - Specifies the component's background color. \n- **--calcite-accordion-text-color** - Specifies the component's text color. \n- **--calcite-accordion-text-color-hover** - Specifies the component's main text color on hover. \n- **--calcite-accordion-text-color-press** - Specifies the component's main text color when pressed. ","attributes":[{"name":"appearance","description":"Specifies the appearance of the component.","values":[{"name":"solid"},{"name":"transparent"}]},{"name":"icon-position","description":"Specifies the position of the expand and collapse icons within `calcite-accordion-item`s","values":[{"name":"start"},{"name":"end"}]},{"name":"icon-type","description":"Specifies the type of the icon in the header.","values":[{"name":"chevron"},{"name":"caret"},{"name":"plus-minus"}]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"selection-mode","description":"Specifies the selection mode of the component, where:\n\n`\"multiple\"` allows any number of selections,\n\n`\"single\"` allows only one selection, and\n\n`\"single-persist\"` allows one selection and prevents de-selection.","values":[{"name":"single"},{"name":"single-persist"},{"name":"multiple"}]}],"references":[]},{"name":"calcite-accordion-item","description":"### Events\n- **calciteAccordionItemCollapse** - Fires when the component's content area is collapsed.\n- **calciteAccordionItemExpand** - Fires when the component's content area is expanded.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Creates a promise that resolves once the 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] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-background-color` instead. Specifies the component's background color. \n- **--calcite-accordion-item-border-color** - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-border-color` instead. 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] in v3.1.0, removal target v6.0.0 - Use `--calcite-icon-color` instead. 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] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-text-color` instead. Specifies the component's text color. \n- **--calcite-accordion-item-text-color-hover** - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-text-color-hover` instead. Specifies the component's text color on hover. ","attributes":[{"name":"description","description":"Specifies a description for the component.","values":[]},{"name":"expanded","description":"When `true`, expands the component and its contents.","values":[]},{"name":"heading","description":"Specifies the component's heading text.","values":[]},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","values":[{"name":"1"},{"name":"2"},{"name":"3"},{"name":"4"},{"name":"5"},{"name":"6"}]},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","values":[]},{"name":"icon-flip-rtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","values":[{"name":"start"},{"name":"end"},{"name":"both"}]},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","values":[]}],"references":[]},{"name":"calcite-action","description":"### Methods\n- `componentOnReady(): Promise<this>` - Creates a promise that resolves once the 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] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-background-color-press` instead. 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] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead. Specifies the component's corner radius end end. \n- **--calcite-action-corner-radius-end-start** - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead. Specifies the component's corner radius end start. \n- **--calcite-action-corner-radius-start-end** - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead. Specifies the component's corner radius start end. \n- **--calcite-action-corner-radius-start-start** - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead. 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] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-text-color-press` instead. Specifies the component's text color when hovered. \n- **--calcite-action-text-color** - Specifies the component's text color. ","attributes":[{"name":"active","description":"When `true`, the component is highlighted.","values":[]},{"name":"alignment","description":"Specifies the horizontal alignment of button elements with text content.","values":[{"name":"start"},{"name":"center"},{"name":"end"}]},{"name":"appearance","description":"**Deprecated**: in v5.0.0, removal target v6.0.0 - No longer necessary.. Specifies the appearance of the component.","values":[{"name":"solid"},{"name":"transparent"}]},{"name":"compact","description":"**Deprecated**: in v2.11.0, removal target v5.0.0 - No longer necessary.. When `true`, the side padding of the component is reduced.","values":[]},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","values":[]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","values":[]},{"name":"icon","description":"Specifies an icon to display.","values":[]},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","values":[]},{"name":"indicator","description":"When `true`, displays a visual indicator.","values":[]},{"name":"label","description":"Specifies an accessible label for the component. If no label is provided, the label inherits what's provided for the `text` prop.","values":[]},{"name":"loading","description":"When `true`, a busy indicator is displayed.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"text","description":"Specifies text that accompanies the icon.","values":[]},{"name":"text-enabled","description":"When `true`, displays `text` adjacent to the `icon`.","values":[]},{"name":"type","description":"Specifies the default behavior of the component.","values":[{"name":"button"},{"name":"reset"},{"name":"submit"}]}],"references":[]},{"name":"calcite-action-bar","description":"### Events\n- **calciteActionBarCollapse** - Fires when the component's content area is collapsed.\n- **calciteActionBarExpand** - Fires when the component's content area is expanded.\n- **calciteActionBarToggle** - Fires when the `expanded` property is toggled.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Creates a promise that resolves once the 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- **actions-start** - A slot for adding `calcite-action`s that will appear at the start of the component. When `expandPosition` is `\"start\"`, actions in this slot will render after the collapse/expand button.\n- **expand-tooltip** - A slot to set the `calcite-tooltip` for the expand toggle.\n\n### CSS Properties\n- **--calcite-action-bar-background-color** - Specifies the component's background color. \n- **--calcite-action-bar-corner-radius** - Specifies the component's border radius when `floating` is `true`. \n- **--calcite-action-bar-expanded-max-width** - When `layout` is `\"vertical\"`, specifies the component's maximum width. \n- **--calcite-action-bar-items-space** - Specifies the space between slotted components in the component. \n- **--calcite-action-bar-shadow** - Specifies the component's shadow when `floating` is `true`. ","attributes":[{"name":"actions-end-group-label","description":"Specifies an accessible name for the last `calcite-action-group`.","values":[]},{"name":"actions-start-group-label","description":"Specifies an accessible name for the first `calcite-action-group`.","values":[]},{"name":"expand-disabled","description":"When `true`, the expand-toggling behavior is disabled.","values":[]},{"name":"expanded","description":"When `true`, expands the component and its contents.\nWhen a child `calcite-action` specifies `textEnabled` as `true`, its `text` initially displays adjacent to its `icon` regardless of expansion.","values":[]},{"name":"expand-position","description":"Specifies the position of the expand `calcite-action`.","values":[{"name":"start"},{"name":"end"}]},{"name":"floating","description":"When `true`, the component is in a floating state.","values":[]},{"name":"layout","description":"Specifies the layout direction of the actions.","values":[{"name":"horizontal"},{"name":"vertical"},{"name":"grid"}]},{"name":"overflow-actions-disabled","description":"When `true`, disables automatically overflowing `calcite-action`s that won't fit into menus.","values":[]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"position","description":"When `expandDisabled` is `false`, specifies the expand toggle's chevron direction, where:\n\n`\"start\"` positions the expand toggle's chevron away from the start of the component when `expanded` is `false`, and\n`\"end\"` positions the expand toggle's chevron away from the end of the component when `expanded` is `false`.\n\nWhen `expanded` is `true`, the chevron direction is reversed.","values":[{"name":"start"},{"name":"end"}]},{"name":"scale","description":"Specifies the size of the expand `calcite-action`.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"selection-appearance","description":"Specifies the selection appearance of the component","values":[{"name":"neutral"},{"name":"highlight"}]}],"references":[]},{"name":"calcite-action-group","description":"### Events\n- **calciteActionGroupChange** - Fires after an action's active state changes.\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>` - Creates a promise that resolves once the component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `calcite-action`s.\n- **menu-actions** - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.\n- **menu-tooltip** - A slot for adding a `calcite-tooltip` for the menu.\n\n### CSS Properties\n- **--calcite-action-background-color** - Specifies the component's background color. \n- **--calcite-action-group-border-color** - Specifies the component's border color when used in a `calcite-action-bar` or `calcite-action-menu`. \n- **--calcite-action-group-columns** - When `layout` is `\"grid\"`, specifies the component's `grid-template-columns`. \n- **--calcite-action-group-gap** - When `layout` is `\"grid\"`, specifies the component's gap. ","attributes":[{"name":"columns","description":"Specifies the number of columns.","values":[{"name":"1"},{"name":"2"},{"name":"3"},{"name":"4"},{"name":"5"},{"name":"6"}]},{"name":"expanded","description":"When `true`, expands the component and its contents.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"layout","description":"Indicates the layout of the component.","values":[{"name":"horizontal"},{"name":"vertical"},{"name":"grid"}]},{"name":"menu-open","description":"When `true`, the `calcite-action-menu` is open.","values":[]},{"name":"menu-placement","description":"Specifies the position of the action menu.","values":[{"name":"auto"},{"name":"top"},{"name":"bottom"},{"name":"left"},{"name":"right"},{"name":"auto-start"},{"name":"auto-end"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"},{"name":"right-start"},{"name":"right-end"},{"name":"left-start"},{"name":"left-end"},{"name":"leading-start"},{"name":"leading"},{"name":"leading-end"},{"name":"trailing-end"},{"name":"trailing"},{"name":"trailing-start"}]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"scale","description":"Specifies the size of the `calcite-action-menu`.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"selection-mode","description":"Specifies the selection mode of the component, where:\n\n`\"multiple\"` allows any number of selections,\n\n`\"single\"` allows only one selection,\n\n`\"single-persist\"` allows one selection and prevents de-selection, and\n\n`\"none\"` disables selection (default).","values":[{"name":"none"},{"name":"single"},{"name":"single-persist"},{"name":"multiple"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]}],"references":[]},{"name":"calcite-action-menu","description":"### Events\n- **calciteActionMenuCollapse** - Fires when the component's content area is collapsed.\n- **calciteActionMenuExpand** - Fires when the component's content area is expanded.\n- **calciteActionMenuOpen** - Fires when the `open` property is toggled.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Creates a promise that resolves once the component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-action`s.\n- **trigger** - A slot for adding a `calcite-action` to trigger opening the menu.\n- **tooltip** - A slot for adding a tooltip for the menu.\n\n### CSS Properties\n- **--calcite-action-menu-items-space** - Specifies the space between actions in the menu. ","attributes":[{"name":"appearance","description":"Specifies the appearance of the component.","values":[{"name":"solid"},{"name":"transparent"}]},{"name":"expanded","description":"When `true`, expands the component and its contents.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"open","description":"When `true`, the component is open.","values":[]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"placement","description":"Determines where the component will be positioned relative to the `referenceElement`.","values":[{"name":"auto"},{"name":"top"},{"name":"bottom"},{"name":"left"},{"name":"right"},{"name":"auto-start"},{"name":"auto-end"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"},{"name":"right-start"},{"name":"right-end"},{"name":"left-start"},{"name":"left-end"},{"name":"leading-start"},{"name":"leading"},{"name":"leading-end"},{"name":"trailing-end"},{"name":"trailing"},{"name":"trailing-start"}]},{"name":"scale","description":"Specifies the size of the component's trigger `calcite-action`.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]}],"references":[]},{"name":"calcite-action-pad","description":"**Deprecated**: in v5.0.0, removal target v6.0.0 - Use the `calcite-action-bar` component instead..\n--\n\n### Events\n- **calciteActionPadCollapse** - Fires when the component's content area is collapsed.\n- **calciteActionPadExpand** - Fires when the component's content area is expanded.\n- **calciteActionPadToggle** - Fires when the `expanded` property is toggled.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Creates a promise that resolves once the component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `calcite-action`s to the component.\n- **expand-tooltip** - A slot to set the `calcite-tooltip` for the expand toggle.\n\n### CSS Properties\n- **--calcite-action-pad-corner-radius** - Specifies the component's border radius. \n- **--calcite-action-pad-expanded-max-width** - When `expanded` and `layout` is `\"vertical\"`, specifies the component's maximum width. \n- **--calcite-action-pad-items-space** - Specifies the component's space between slotted components. ","attributes":[{"name":"actions-end-group-label","description":"Specifies the accessible label for the last `calcite-action-group`.","values":[]},{"name":"expand-disabled","description":"When `true`, the expand-toggling behavior is disabled.","values":[]},{"name":"expanded","description":"When `true`, expands the component and its contents.","values":[]},{"name":"layout","description":"Specifies the layout of the component.","values":[{"name":"horizontal"},{"name":"vertical"},{"name":"grid"}]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"position","description":"Specifies the position of the component depending on the element's `dir` property.","values":[{"name":"start"},{"name":"end"}]},{"name":"scale","description":"Specifies the size of the expand `calcite-action`.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"selection-appearance","description":"Specifies the selection appearance of the component","values":[{"name":"neutral"},{"name":"highlight"}]}],"references":[]},{"name":"calcite-alert","description":"Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned\nat the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided.\n--\n\n### Events\n- **calciteAlertBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteAlertBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteAlertClose** - Fires when the component is closed and animation is complete.\n- **calciteAlertOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Creates a promise that resolves once the component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's \"close\" button, the first focusable item.\n\n### Slots\n- **title** - A slot for adding a title to the component.\n- **message** - A slot for adding main text to the component.\n- **link** - A slot for adding a `calcite-action` to take from the component such as: \"undo\", \"try again\", \"link to page\", etc.\n- **actions-end** - A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or fewer actions.\n\n### CSS Properties\n- **--calcite-alert-width** - Specifies the component's width. \n- **--calcite-alert-background-color** - Specifies the component's background color. \n- **--calcite-alert-corner-radius** - Specifies the component's corner radius. \n- **--calcite-alert-shadow** - Specifies the component's shadow. \n- **--calcite-alert-offset-size** - Specifies the component's `placement` offset. ","attributes":[{"name":"auto-close","description":"When `true`, the component closes automatically. Recommended for passive, non-blocking alerts.","values":[]},{"name":"auto-close-duration","description":"Specifies the duration before the component automatically closes - only use with `autoClose`.","values":[{"name":"medium"},{"name":"fast"},{"name":"slow"}]},{"name":"icon","description":"When `true`, shows a default recommended icon. Alternatively,\npass a Calcite UI Icon name to display a specific icon.","values":[]},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","values":[]},{"name":"kind","description":"Specifies the kind of the component, which will apply to top border and icon.","values":[{"name":"brand"},{"name":"danger"},{"name":"info"},{"name":"warning"},{"name":"success"}]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"numbering-system","description":"Specifies the Unicode numeral system used by the component for localization.","values":[{"name":"arab"},{"name":"arabext"},{"name":"latn"}]},{"name":"open","description":"When `true`, displays and positions the component.","values":[]},{"name":"placement","description":"Specifies the placement of the component.","values":[{"name":"top"},{"name":"bottom"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"}]},{"name":"queue","description":"Specifies the ordering priority of the component when opened.","values":[{"name":"last"},{"name":"next"},{"name":"immediate"}]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]}],"references":[]},{"name":"calcite-autocomplete","description":"### Events\n- **calciteAutocompleteBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteAutocompleteBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteAutocompleteChange** - Fires each time a new `value` is typed and committed.\n- **calciteAutocompleteClose** - Fires when the component is closed and animation is complete.\n- **calciteAutocompleteOpen** - Fires when the component is open and animation is complete.\n- **calciteAutocompleteTextChange** - Fires each time a new `inputValue` is typed and committed.\n- **calciteAutocompleteTextInput** - Fires each time a new `inputValue` is typed.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Creates a promise that resolves once the component is fully loaded.\n- `reposition(delayed?: boolean): Promise<void>` - Updates the position of the component.\n- `scrollContentTo(options?: ScrollToOptions): Promise<void>` - Scrolls the component's content to a specified set of coordinates.\n- `selectText(): Promise<void>` - Selects the text of the component's `value`.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `calcite-autocomplete-item` elements.\n- **content-bottom** - A slot for adding content below `calcite-autocomplete-item` elements.\n- **content-top** - A slot for adding content above `calcite-autocomplete-item` elements.\n- **label-content** - A slot for rendering content next to the component's `labelText`.\n\n### CSS Properties\n- **--calcite-autocomplete-background-color** - Specifies the component's background color. \n- **--calcite-autocomplete-corner-radius** - Specifies the component's corner radius. \n- **--calcite-autocomplete-text-color** - Specifies the component's text color. \n- **--calcite-autocomplete-menu-max-size-y** - Specifies the maximum height of the component's menu. \n- **--calcite-autocomplete-input-prefix-size** - Specifies the input's prefix width, when present. \n- **--calcite-autocomplete-input-suffix-size** - Specifies the input's suffix width, when present. \n- **--calcite-autocomplete-input-background-color** - Specifies the background color of the component's input. \n- **--calcite-autocomplete-input-border-color** - Specifies the border color of the component's input. \n- **--calcite-autocomplete-input-corner-radius** - Specifies the corner radius of the component's input. \n- **--calcite-autocomplete-input-shadow** - Specifies the shadow of the component's input. \n- **--calcite-autocomplete-input-icon-color** - Specifies the icon color of the component's input. \n- **--calcite-autocomplete-input-text-color** - Specifies the text color of the component's input. \n- **--calcite-autocomplete-input-placeholder-text-color** - Specifies the placeholder text color of the component's input. \n- **--calcite-autocomplete-input-actions-background-color** - Specifies the background color of the input's `clearable` element. \n- **--calcite-autocomplete-input-actions-background-color-hover** - Specifies the background color of the input's `clearable` element when hovered. \n- **--calcite-autocomplete-input-actions-background-color-press** - Specifies the background color of the input's `clearable` element when pressed. \n- **--calcite-autocomplete-input-actions-icon-color** - Specifies the icon color of the input's `clearable` element. \n- **--calcite-autocomplete-input-actions-icon-color-hover** - Specifies the icon color of the input's `clearable` element when hovered. \n- **--calcite-autocomplete-input-actions-icon-color-press** - Specifies the icon color of the input's `clearable` element when pressed. \n- **--calcite-autocomplete-input-loading-background-color** - Specifies the background color of the Input's `loading` element, when present. \n- **--calcite-autocomplete-input-loading-fill-color** - Specifies the fill color of the Input's `loading` element, when present. \n- **--calcite-autocomplete-input-prefix-text-color** - Specifies the text color of the Input's prefix, when present. \n- **--calcite-autocomplete-input-suffix-text-color** - Specifies the text color of the Input's suffix, when present. ","attributes":[{"name":"alignment","description":"Specifies the text alignment of the component's value.","values":[{"name":"start"},{"name":"end"}]},{"name":"autocomplete","description":"Specifies the type of content to autocomplete, for use in forms.\nRead the native attribute's documentation on MDN for more info.","values":[]},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","values":[]},{"name":"form","description":"Specifies the `id` of the component's associated form.\n\nWhen not set, the component is associated with its ancestor form element, if one exists.","values":[]},{"name":"icon","description":"When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.","values":[]},{"name":"icon-flip-rtl","description":"When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).","values":[]},{"name":"input-value","description":"Specifies the text typed into the component and is used to filter slotted `autocomplete-item`s.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"label-text","description":"Specifies the component's label text.","values":[]},{"name":"loading","description":"When `true`, a busy indicator is displayed.","values":[]},{"name":"max-length","description":"When the component resides in a form,\nspecifies the maximum length of text for the component's value.","values":[]},{"name":"min-length","description":"When the component resides in a form,\nspecifies the minimum length of text for the component's value.","values":[]},{"name":"name","description":"Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission.","values":[]},{"name":"open","description":"When `true`, displays and positions the component.","values":[]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"pattern","description":"When the component resides in a form,\nspecifies a regular expression (regex) pattern the component's `value` must match for validation.\nRead the native attribute's documentation on MDN for more info.","values":[]},{"name":"placeholder","description":"Specifies placeholder text for the component.","values":[]},{"name":"placement","description":"Determines where the component will be positioned relative to the container element.","values":[{"name":"top"},{"name":"bottom"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"}]},{"name":"prefix-text","description":"Specifies the component's prefix text.","values":[]},{"name":"read-only","description":"When `true`, the component's value can be read, but cannot be modified.","values":[]},{"name":"required","description":"When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"status","description":"Specifies the status of the input field, which determines message and icons.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"name":"suffix-text","description":"Specifies the component's suffix text.","values":[]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]},{"name":"validation-icon","description":"Specifies the validation icon to display under the component.","values":[]},{"name":"validation-message","description":"Specifies the validation message to display under the component.","values":[]},{"name":"value","description":"Specifies the selected `autocomplete-item`. When the component resides in a form, the `value` is submitted with the form.","values":[]}],"references":[]},{"name":"calcite-autocomplete-item","description":"### Events\n- **calciteAutocompleteItemSelect** - Fires when the item has been selected.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Creates a promise that resolves once the component is fully loaded.\n\n### Slots\n- **content-end** - A slot for adding non-actionable elements after content of the component.\n- **content-start** - A slot for adding non-actionable elements before content of the component.\n\n### CSS Properties\n- **--calcite-autocomplete-background-color** - Specifies the component's background color. \n- **--calcite-autocomplete-description-text-color** - Specifies the text color of the component's `description`. \n- **--calcite-autocomplete-heading-text-color** - Specifies the text color of the component's `heading`. \n- **--calcite-autocomplete-text-color** - Specifies the component's text color. ","attributes":[{"name":"description","description":"Specifies a description for the component. Displays below the label text.","values":[]},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","values":[]},{"name":"heading","description":"Specifies the component's heading text.","values":[]},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","values":[]},{"name":"icon-flip-rtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","values":[{"name":"start"},{"name":"end"},{"name":"both"}]},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"selected","description":"When `true`, the component is selected.","values":[]},{"name":"value","description":"Specifies the component's value.","values":[]}],"references":[]},{"name":"calcite-autocomplete-item-group","description":"### Methods\n- `componentOnReady(): Promise<this>` - Creates a promise that resolves once the component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding `calcite-autocomplete-item`s.\n\n### CSS Properties\n- **--calcite-autocomplete-background-color** - Specifies the component's background color. \n- **--calcite-autocomplete-border-color** - Specifies the component's border color. \n- **--calcite-autocomplete-text-color** - Specifies the component's text color. ","attributes":[{"name":"heading","description":"Specifies the component's heading text.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"position","description":"Specifies the position of the group in the autocomplete menu.","values":[]}],"references":[]},{"name":"calcite-avatar","description":"### Methods\n- `componentOnReady(): Promise<this>` - Creates a promise that resolves once the component is fully loaded.\n\n### CSS Properties\n- **--calcite-avatar-corner-radius** - Specifies the component's corner radius. \n- **--calcite-avatar-color** - Specifies the component's icon or initial color. \n- **--calcite-avatar-background-color** - Specifies the component's background color. ","attributes":[{"name":"full-name","description":"Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component.","values":[]},{"name":"label","description":"Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label for the component.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"thumbnail","description":"Specifies the `src` to an image. If the image is private, include an access token in the URL.","values":[]},{"name":"user-id","description":"Specifies the unique id of the user.","values":[]},{"name":"username","description":"Specifies the username of the user.","values":[]}],"references":[]},{"name":"calcite-block","description":"### Events\n- **calciteBlockBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteBlockBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteBlockClose** - Fires when the component is closed and animation is complete.\n- **calciteBlockCollapse** - Fires when the component's content area is collapsed.\n- **calciteBlockExpand** - Fires when the component's content area is expanded.\n- **calciteBlockOpen** - Fires when the component is open and animation is complete.\n- **calciteBlockSortHandleBeforeClose** - Fires when the sort handle is requested to be closed and before the closing transition begins.\n- **calciteBlockSortHandleBeforeOpen** - Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteBlockSortHandleClose** - Fires when the sort handle is closed and animation is complete.\n- **calciteBlockSortHandleOpen** - Fires when the sort handle is open and animation is complete.\n- **calciteBlockToggle** - Fires when the component's header is clicked.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Creates a promise that resolves once the 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 the component's header text.\n- **content-start** - A slot for adding non-actionable elements before the component's header text.\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] in v3.3.0, removal target v6.0.0 - Use `--calcite-block-heading-text-color` instead. When the component is `expanded`, specifies the `heading` text color. \n- **--calcite-block-padding** - [Deprecated] in v3.3.0, removal target v6.0.0 - Use `--calcite-block-content-space` instead. Specifies the padding of the component's `default` slot. \n- **--calcite-block-text-color** - [Deprecated] in v3.3.0, removal target v6.0.0 - Specifies the component's text color. \n- **--calcite-block-description-text-color** - Specifies the component's `description` text color. \n- **--calcite-block-icon-color** - Specifies the component's `collapsible` icon, `iconStart` and `iconEnd` color. \n- **--calcite-block-icon-color-hover** - Specifies the component's `collapsible` icon color when hovered. ","attributes":[{"name":"collapsible","description":"When `true`, the component is collapsible.","values":[]},{"name":"description","description":"Specifies a description for the component. Displays below the heading.","values":[]},{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","values":[]},{"name":"drag-disabled","description":"When `true`, and a parent `calcite-block-group` is `dragEnabled`, the component is not draggable.","values":[]},{"name":"drag-handle","description":"**Deprecated**: in v3.0.0, removal target v6.0.0 - No longer necessary. Use Block Group for draggable functionality.. When `true`, the component displays a draggable button.","values":[]},{"name":"expanded","description":"When `true`, expands the component and its contents.","values":[]},{"name":"heading","description":"Specifies the component's heading text.","values":[]},{"name":"heading-level","description":"Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.","values":[{"name":"1"},{"name":"2"},{"name":"3"},{"name":"4"},{"name":"5"},{"name":"6"}]},{"name":"icon-end","description":"Specifies an icon to display at the end of the component.","values":[]},{"name":"icon-flip-rtl","description":"Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).","values":[{"name":"start"},{"name":"end"},{"name":"both"}]},{"name":"icon-start","description":"Specifies an icon to display at the start of the component.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.","values":[]},{"name":"loading","description":"When `true`, a busy indicator is displayed.","values":[]},{"name":"menu-placement","description":"Determines where the action menu will be positioned.","values":[{"name":"auto"},{"name":"top"},{"name":"bottom"},{"name":"left"},{"name":"right"},{"name":"auto-start"},{"name":"auto-end"},{"name":"top-start"},{"name":"top-end"},{"name":"bottom-start"},{"name":"bottom-end"},{"name":"right-start"},{"name":"right-end"},{"name":"left-start"},{"name":"left-end"},{"name":"leading-start"},{"name":"leading"},{"name":"leading-end"},{"name":"trailing-end"},{"name":"trailing"},{"name":"trailing-start"}]},{"name":"open","description":"**Deprecated**: in v3.1.0, removal target v6.0.0 - Use the `expanded` property instead.. When `true`, expands the component and its contents.","values":[]},{"name":"overlay-positioning","description":"Specifies the type of positioning to use for overlaid content, where:\n\n`\"absolute\"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and\n\n`\"fixed\"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.","values":[{"name":"fixed"},{"name":"absolute"}]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"sort-handle-open","description":"When `true`, displays and positions the sort handle.","values":[]},{"name":"status","description":"**Deprecated**: in v3.0.0, removal target v6.0.0 - Use the `icon-start` property instead.. Displays a status-related indicator icon.","values":[{"name":"invalid"},{"name":"valid"},{"name":"idle"}]},{"name":"top-layer-disabled","description":"When `true` and the component is `open`, disables top layer placement.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.","values":[]}],"references":[]},{"name":"calcite-block-group","description":"### Events\n- **calciteBlockGroupDragEnd** - Fires when the component's dragging has ended.\n- **calciteBlockGroupDragStart** - Fires when the component's dragging has started.\n- **calciteBlockGroupMoveHalt** - Fires when a user attempts to move an element using the sort menu and 'canPut' or 'canPull' returns falsy.\n- **calciteBlockGroupOrderChange** - Fires when the component's item order changes.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Creates a promise that resolves once the component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `calcite-block` elements.","attributes":[{"name":"disabled","description":"When `true`, interaction is prevented and the component is displayed with lower opacity.","values":[]},{"name":"drag-enabled","description":"When `true`, `calcite-block`s are sortable via a draggable button.","values":[]},{"name":"group","description":"Specifies the component's group identifier.\n\nTo drag elements from one group into another, both groups must have the same group value.","values":[]},{"name":"label","description":"Specifies an accessible label for the component.\n\nWhen `dragEnabled` is `true` and multiple group sorting is enabled with `group`, specifies the component's name for dragging between groups.","values":[]},{"name":"loading","description":"When `true`, a busy indicator is displayed.","values":[]},{"name":"scale","description":"Specifies the size of the component.","values":[{"name":"s"},{"name":"m"},{"name":"l"}]},{"name":"sort-disabled","description":"When `true`, and a `group` is defined, `calcite-block`s are no longer sortable.","values":[]}],"references":[]},{"name":"calcite-block-section","description":"### Events\n- **calciteBlockSectionCollapse** - Fires when the component's content area is collapsed.\n- **calciteBlockSectionExpand** - Fires when the component's content area is expanded.\n- **calciteBlockSectionToggle** - Fires when the header has been clicked.\n\n### Methods\n- `componentOnReady(): Promise<this>` - Creates a promise that resolves once the 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 componen