@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
1,070 lines • 952 kB
JSON
{
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
"name": "@esri/calcite-components",
"version": "3.2.1",
"description-markup": "markdown",
"contributions": {
"html": {
"elements": [
{
"name": "calcite-accordion",
"description": "### Methods\n- `componentOnReady(): Promise<void>` - 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 placement of the icon in the header.",
"default": "\"end\"",
"value": {
"type": [
"\"end\"",
"\"start\""
]
}
},
{
"name": "icon-type",
"description": "Specifies the type of the icon in the header.",
"default": "\"chevron\"",
"value": {
"type": [
"\"caret\"",
"\"chevron\"",
"\"plus-minus\""
]
}
},
{
"name": "scale",
"description": "Specifies the size of the component.",
"default": "\"m\"",
"value": {
"type": [
"\"l\"",
"\"m\"",
"\"s\""
]
}
},
{
"name": "selection-mode",
"description": "Specifies the selection mode of the component, where:\n\n`\"multiple\"` allows any number of selections,\n\n`\"single\"` allows only one selection, and\n\n`\"single-persist\"` allows one selection and prevents de-selection.",
"default": "\"multiple\"",
"value": {
"type": [
"\"multiple\"",
"\"single\"",
"\"single-persist\""
]
}
}
],
"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": "\"solid\" | \"transparent\""
},
{
"name": "iconPosition",
"description": "Specifies the placement of the icon in the header.",
"type": "\"end\" | \"start\""
},
{
"name": "iconType",
"description": "Specifies the type of the icon in the header.",
"type": "\"caret\" | \"chevron\" | \"plus-minus\""
},
{
"name": "scale",
"description": "Specifies the size of the component.",
"type": "\"l\" | \"m\" | \"s\""
},
{
"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": "\"multiple\" | \"single\" | \"single-persist\""
}
],
"events": []
}
},
{
"name": "calcite-accordion-item",
"description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): 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\n### CSS Properties\n- **--calcite-accordion-border-color** - Specifies the component's border color. \n- **--calcite-accordion-background-color** - Specifies the component's background color. \n- **--calcite-accordion-text-color** - Specifies the component's text color. \n- **--calcite-accordion-text-color-hover** - Specifies the component's main text color on hover. \n- **--calcite-accordion-text-color-press** - Specifies the component's main text color when pressed. \n- **--calcite-accordion-item-background-color** - [Deprecated] Use `--calcite-accordion-background-color`. Specifies the component's background color. \n- **--calcite-accordion-item-border-color** - [Deprecated] Use `--calcite-accordion-border-color`. Specifies the component's border color. \n- **--calcite-accordion-item-content-space** - Specifies the component's padding. \n- **--calcite-accordion-item-end-icon-color** - Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color. \n- **--calcite-accordion-item-expand-icon-color** - Specifies the component's expand icon color. \n- **--calcite-accordion-item-header-background-color** - Specifies the component's `heading` background color. \n- **--calcite-accordion-item-header-background-color-hover** - Specifies the component's `heading` background color when hovered. \n- **--calcite-accordion-item-header-background-color-press** - Specifies the component's `heading` background color when pressed. \n- **--calcite-accordion-item-heading-text-color** - Specifies the component's `heading` text color. \n- **--calcite-accordion-item-icon-color** - [Deprecated] Use `--calcite-icon-color`. Specifies the component's default icon color. \n- **--calcite-accordion-item-start-icon-color** - Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color. \n- **--calcite-accordion-item-text-color** - [Deprecated] Use `--calcite-accordion-text-color`. Specifies the component's text color. \n- **--calcite-accordion-item-text-color-hover** - [Deprecated] Use `--calcite-accordion-text-color-hover`. Specifies the component's text color on hover. \n- **--calcite-accordion-item-text-color-press** - [Deprecated] Use `--calcite-accordion-text-color-press`. Specifies the component's text color on press. ",
"attributes": [
{
"name": "description",
"description": "Specifies a description for the component.",
"value": {
"type": "string"
}
},
{
"name": "expanded",
"description": "When `true`, the component is expanded.",
"default": "false",
"value": {
"type": "boolean"
}
},
{
"name": "heading",
"description": "Specifies heading text for the component.",
"value": {
"type": "string"
}
},
{
"name": "icon-end",
"description": "Specifies an icon to display at the end of the component.",
"value": {
"type": "string"
}
},
{
"name": "icon-flip-rtl",
"description": "Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).",
"value": {
"type": [
"\"both\"",
"\"end\"",
"\"start\""
]
}
},
{
"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."
}
],
"events": [],
"js": {
"properties": [
{
"name": "description",
"description": "Specifies a description for the component.",
"type": "string"
},
{
"name": "expanded",
"description": "When `true`, the component is expanded.",
"type": "boolean"
},
{
"name": "heading",
"description": "Specifies heading text for the component.",
"type": "string"
},
{
"name": "iconEnd",
"description": "Specifies an icon to display at the end of the component.",
"type": "string"
},
{
"name": "iconFlipRtl",
"description": "Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).",
"type": "\"both\" | \"end\" | \"start\""
},
{
"name": "iconStart",
"description": "Specifies an icon to display at the start of the component.",
"type": "string"
}
],
"events": []
}
},
{
"name": "calcite-action",
"description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding a `calcite-icon`.\n- **tooltip** - [Deprecated] Use the `calcite-tooltip` component instead.\n\n### CSS Properties\n- **--calcite-action-background-color-hover** - Specifies the component's background color when hovered or focused. \n- **--calcite-action-background-color-press** - Specifies the component's background color when active. \n- **--calcite-action-background-color-pressed** - [Deprecated] Use --calcite-action-background-color-press. Specifies the component's background color when active. \n- **--calcite-action-background-color** - Specifies the component's background color. \n- **--calcite-action-corner-radius-end-end** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end end. \n- **--calcite-action-corner-radius-end-start** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end start. \n- **--calcite-action-corner-radius-start-end** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start end. \n- **--calcite-action-corner-radius-start-start** - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start start. \n- **--calcite-action-corner-radius** - Specifies the component's corner radius. \n- **--calcite-action-indicator-color** - Specifies the component's indicator color. \n- **--calcite-action-text-color-press** - Specifies the component's text color when pressed or hovered. \n- **--calcite-action-text-color-pressed** - [Deprecated] Use --calcite-action-text-color-press. Specifies the component's text color when hovered. \n- **--calcite-action-text-color** - Specifies the component's text color. ",
"attributes": [
{
"name": "active",
"description": "When `true`, the component is highlighted.",
"default": "false",
"value": {
"type": "boolean"
}
},
{
"name": "alignment",
"description": "Specifies the horizontal alignment of button elements with text content.",
"value": {
"type": [
"\"center\"",
"\"end\"",
"\"start\""
]
}
},
{
"name": "appearance",
"description": "Specifies the appearance of the component.",
"default": "\"solid\"",
"value": {
"type": [
"\"solid\"",
"\"transparent\""
]
}
},
{
"name": "compact",
"description": "**Deprecated**: 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": "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 the label of 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": [
"\"l\"",
"\"m\"",
"\"s\""
]
}
},
{
"name": "text",
"description": "Specifies text that accompanies the icon.",
"value": {
"type": "string"
}
},
{
"name": "text-enabled",
"description": "Indicates whether the text is displayed.",
"default": "false",
"value": {
"type": "boolean"
}
}
],
"slots": [
{
"name": "",
"description": "A slot for adding a `calcite-icon`."
},
{
"name": "tooltip",
"description": "[Deprecated] Use the `calcite-tooltip` component instead."
}
],
"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": "\"center\" | \"end\" | \"start\""
},
{
"name": "appearance",
"description": "Specifies the appearance of the component.",
"type": "\"solid\" | \"transparent\""
},
{
"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": "icon",
"description": "Specifies an icon to display.",
"type": "string"
},
{
"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 the label of 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": "Use this property to override individual strings used by the component.",
"type": "{\n loading?: string;\n indicator?: string;\n indicatorLabel?: string;\n}"
},
{
"name": "scale",
"description": "Specifies the size of the component.",
"type": "\"l\" | \"m\" | \"s\""
},
{
"name": "text",
"description": "Specifies text that accompanies the icon.",
"type": "string"
},
{
"name": "textEnabled",
"description": "Indicates whether the text is displayed.",
"type": "boolean"
}
],
"events": []
}
},
{
"name": "calcite-action-bar",
"description": "### Events\n- **calciteActionBarToggle** - Fires when the `expanded` property is toggled.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): 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- **bottom-actions** - [Deprecated] Use the `\"actions-end\"` slot instead. A slot for adding `calcite-action`s that will appear at the bottom of the component, above the collapse/expand button.\n- **actions-end** - A slot for adding `calcite-action`s that will appear at the end of the component, prior to the collapse/expand button.\n- **expand-tooltip** - A slot to set the `calcite-tooltip` for the expand toggle.\n\n### CSS Properties\n- **--calcite-action-bar-background-color** - Specifies the component's background color. \n- **--calcite-action-bar-corner-radius** - Specifies the component's border radius when `floating` is `true`. \n- **--calcite-action-bar-expanded-max-width** - When `layout` is `\"vertical\"`, specifies the component's maximum width. \n- **--calcite-action-bar-items-space** - Specifies the space between slotted components in the component. \n- **--calcite-action-bar-shadow** - Specifies the component's shadow when `floating` is `true`. ",
"attributes": [
{
"name": "actions-end-group-label",
"description": "Specifies the accessible label for the last `calcite-action-group`.",
"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`, the component is expanded.",
"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": [
"\"grid\"",
"\"horizontal\"",
"\"vertical\""
]
}
},
{
"name": "overflow-actions-disabled",
"description": "Disables automatically overflowing `calcite-action`s that won't fit into menus.",
"default": "false",
"value": {
"type": "boolean"
}
},
{
"name": "overlay-positioning",
"description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.",
"default": "\"absolute\"",
"value": {
"type": [
"\"absolute\"",
"\"fixed\""
]
}
},
{
"name": "position",
"description": "Arranges the component depending on the element's `dir` property.",
"value": {
"type": [
"\"end\"",
"\"start\""
]
}
},
{
"name": "scale",
"description": "Specifies the size of the expand `calcite-action`.",
"default": "\"m\"",
"value": {
"type": [
"\"l\"",
"\"m\"",
"\"s\""
]
}
}
],
"slots": [
{
"name": "",
"description": "A slot for adding `calcite-action`s that will appear at the top of the component."
},
{
"name": "bottom-actions",
"description": "[Deprecated] Use the `\"actions-end\"` slot instead. A slot for adding `calcite-action`s that will appear at the bottom of the component, above the collapse/expand button."
},
{
"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": "calciteActionBarToggle",
"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`, the component is expanded.",
"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": "\"grid\" | \"horizontal\" | \"vertical\""
},
{
"name": "messageOverrides",
"description": "Use this property to override individual strings used by the component.",
"type": "{\n expand?: string;\n collapse?: string;\n expandLabel?: string;\n collapseLabel?: string;\n}"
},
{
"name": "overflowActionsDisabled",
"description": "Disables automatically overflowing `calcite-action`s that won't fit into menus.",
"type": "boolean"
},
{
"name": "overlayPositioning",
"description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.",
"type": "\"absolute\" | \"fixed\""
},
{
"name": "position",
"description": "Arranges the component depending on the element's `dir` property.",
"type": "\"end\" | \"start\""
},
{
"name": "scale",
"description": "Specifies the size of the expand `calcite-action`.",
"type": "\"l\" | \"m\" | \"s\""
}
],
"events": [
{
"name": "calciteActionBarToggle",
"type": "void",
"description": "Fires when the `expanded` property is toggled."
}
]
}
},
{
"name": "calcite-action-group",
"description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding a group of `calcite-action`s.\n- **menu-actions** - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.\n- **menu-tooltip** - A slot for adding a `calcite-tooltip` for the menu.\n\n### CSS Properties\n- **--calcite-action-background-color** - Specifies the component's background color. \n- **--calcite-action-group-border-color** - Specifies the component's border color when used in a `calcite-action-bar` or `calcite-action-menu`. \n- **--calcite-action-group-columns** - When `layout` is `\"grid\"`, specifies the component's grid-template-columns. \n- **--calcite-action-group-gap** - When `layout` is `\"grid\"`, specifies the component's gap. \n- **--calcite-action-group-padding** - [Deprecated] Use `--calcite-action-group-gap`. Specifies the component's padding. ",
"attributes": [
{
"name": "columns",
"description": "Indicates number of columns.",
"value": {
"type": [
"1",
"2",
"3",
"4",
"5",
"6"
]
}
},
{
"name": "expanded",
"description": "When `true`, the component is expanded.",
"default": "false",
"value": {
"type": "boolean"
}
},
{
"name": "label",
"description": "Accessible name for the component.",
"value": {
"type": "string"
}
},
{
"name": "layout",
"description": "Indicates the layout of the component.",
"default": "\"vertical\"",
"value": {
"type": [
"\"grid\"",
"\"horizontal\"",
"\"vertical\""
]
}
},
{
"name": "menu-open",
"description": "When `true`, the `calcite-action-menu` is open.",
"default": "false",
"value": {
"type": "boolean"
}
},
{
"name": "menu-placement",
"description": "Determines where the action menu will be positioned.",
"value": {
"type": [
"\"auto\"",
"\"auto-end\"",
"\"auto-start\"",
"\"bottom\"",
"\"bottom-end\"",
"\"bottom-start\"",
"\"leading\"",
"\"leading-end\"",
"\"leading-start\"",
"\"left\"",
"\"left-end\"",
"\"left-start\"",
"\"right\"",
"\"right-end\"",
"\"right-start\"",
"\"top\"",
"\"top-end\"",
"\"top-start\"",
"\"trailing\"",
"\"trailing-end\"",
"\"trailing-start\""
]
}
},
{
"name": "overlay-positioning",
"description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.",
"default": "\"absolute\"",
"value": {
"type": [
"\"absolute\"",
"\"fixed\""
]
}
},
{
"name": "scale",
"description": "Specifies the size of the `calcite-action-menu`.",
"default": "\"m\"",
"value": {
"type": [
"\"l\"",
"\"m\"",
"\"s\""
]
}
}
],
"slots": [
{
"name": "",
"description": "A slot for adding a group of `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": [],
"js": {
"properties": [
{
"name": "columns",
"description": "Indicates number of columns.",
"type": "1 | 2 | 3 | 4 | 5 | 6"
},
{
"name": "expanded",
"description": "When `true`, the component is expanded.",
"type": "boolean"
},
{
"name": "label",
"description": "Accessible name for the component.",
"type": "string"
},
{
"name": "layout",
"description": "Indicates the layout of the component.",
"type": "\"grid\" | \"horizontal\" | \"vertical\""
},
{
"name": "menuFlipPlacements",
"description": "Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.",
"type": "Array<\"top\" | \"bottom\" | \"right\" | \"left\" | \"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": "menuOpen",
"description": "When `true`, the `calcite-action-menu` is open.",
"type": "boolean"
},
{
"name": "menuPlacement",
"description": "Determines where the action menu will be positioned.",
"type": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"leading\" | \"leading-end\" | \"leading-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\" | \"trailing\" | \"trailing-end\" | \"trailing-start\""
},
{
"name": "messageOverrides",
"description": "Use this property to override individual strings used by the component.",
"type": "{ more?: string; }"
},
{
"name": "overlayPositioning",
"description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.",
"type": "\"absolute\" | \"fixed\""
},
{
"name": "scale",
"description": "Specifies the size of the `calcite-action-menu`.",
"type": "\"l\" | \"m\" | \"s\""
}
],
"events": []
}
},
{
"name": "calcite-action-menu",
"description": "### Events\n- **calciteActionMenuOpen** - Fires when the `open` property is toggled.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): 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`, the component is expanded.",
"default": "false",
"value": {
"type": "boolean"
}
},
{
"name": "label",
"description": "Specifies the text string for the component.",
"value": {
"type": "string"
}
},
{
"name": "open",
"description": "When `true`, the component is open.",
"default": "false",
"value": {
"type": "boolean"
}
},
{
"name": "overlay-positioning",
"description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.",
"default": "\"absolute\"",
"value": {
"type": [
"\"absolute\"",
"\"fixed\""
]
}
},
{
"name": "placement",
"description": "Determines where the component will be positioned relative to the `referenceElement`.",
"default": "\"auto\"",
"value": {
"type": [
"\"auto\"",
"\"auto-end\"",
"\"auto-start\"",
"\"bottom\"",
"\"bottom-end\"",
"\"bottom-start\"",
"\"leading\"",
"\"leading-end\"",
"\"leading-start\"",
"\"left\"",
"\"left-end\"",
"\"left-start\"",
"\"right\"",
"\"right-end\"",
"\"right-start\"",
"\"top\"",
"\"top-end\"",
"\"top-start\"",
"\"trailing\"",
"\"trailing-end\"",
"\"trailing-start\""
]
}
},
{
"name": "scale",
"description": "Specifies the size of the component's trigger `calcite-action`.",
"default": "\"m\"",
"value": {
"type": [
"\"l\"",
"\"m\"",
"\"s\""
]
}
}
],
"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": "calciteActionMenuOpen",
"type": "void",
"description": "Fires when the `open` property is toggled."
}
],
"js": {
"properties": [
{
"name": "appearance",
"description": "Specifies the appearance of the component.",
"type": "\"solid\" | \"transparent\""
},
{
"name": "expanded",
"description": "When `true`, the component is expanded.",
"type": "boolean"
},
{
"name": "flipPlacements",
"description": "Specifies the component's fallback slotted content `placement` when it's initial or specified `placement` has insufficient space available.",
"type": "Array<\"top\" | \"bottom\" | \"right\" | \"left\" | \"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": "label",
"description": "Specifies the text string for the component.",
"type": "string"
},
{
"name": "open",
"description": "When `true`, the component is open.",
"type": "boolean"
},
{
"name": "overlayPositioning",
"description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.",
"type": "\"absolute\" | \"fixed\""
},
{
"name": "placement",
"description": "Determines where the component will be positioned relative to the `referenceElement`.",
"type": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"leading\" | \"leading-end\" | \"leading-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\" | \"trailing\" | \"trailing-end\" | \"trailing-start\""
},
{
"name": "scale",
"description": "Specifies the size of the component's trigger `calcite-action`.",
"type": "\"l\" | \"m\" | \"s\""
}
],
"events": [
{
"name": "calciteActionMenuOpen",
"type": "void",
"description": "Fires when the `open` property is toggled."
}
]
}
},
{
"name": "calcite-action-pad",
"description": "**Deprecated**: Use the `calcite-action-pad` component instead..\n--\n\n### Events\n- **calciteActionPadToggle** - Fires when the `expanded` property is toggled.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): 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 `layout` is `\"vertical\"`, specifies the component's maximum width when `expanded`. \n- **--calcite-action-pad-items-space** - Specifies the component's space between slotted components. ",
"attributes": [
{
"name": "actions-end-group-label",
"description": "Specifies the accessible label for the last `calcite-action-group`.",
"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`, the component is expanded.",
"default": "false",
"value": {
"type": "boolean"
}
},
{
"name": "layout",
"description": "Indicates the layout of the component.",
"default": "\"vertical\"",
"value": {
"type": [
"\"grid\"",
"\"horizontal\"",
"\"vertical\""
]
}
},
{
"name": "overlay-positioning",
"description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.",
"default": "\"absolute\"",
"value": {
"type": [
"\"absolute\"",
"\"fixed\""
]
}
},
{
"name": "position",
"description": "Arranges the component depending on the element's `dir` property.",
"value": {
"type": [
"\"end\"",
"\"start\""
]
}
},
{
"name": "scale",
"description": "Specifies the size of the expand `calcite-action`.",
"default": "\"m\"",
"value": {
"type": [
"\"l\"",
"\"m\"",
"\"s\""
]
}
}
],
"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": "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`, the component is expanded.",
"type": "boolean"
},
{
"name": "layout",
"description": "Indicates the layout of the component.",
"type": "\"grid\" | \"horizontal\" | \"vertical\""
},
{
"name": "messageOverrides",
"description": "Use this property to override individual strings used by the component.",
"type": "{\n expand?: string;\n collapse?: string;\n expandLabel?: string;\n collapseLabel?: string;\n}"
},
{
"name": "overlayPositioning",
"description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.",
"type": "\"absolute\" | \"fixed\""
},
{
"name": "position",
"description": "Arranges the component depending on the element's `dir` property.",
"type": "\"end\" | \"start\""
},
{
"name": "scale",
"description": "Specifies the size of the expand `calcite-action`.",
"type": "\"l\" | \"m\" | \"s\""
}
],
"events": [
{
"name": "calciteActionPadToggle",
"type"