@esri/calcite-components 3.2.0-next.8 → 3.2.0

package/dist/extras/vscode-data.json

@@ -80,7 +80,7 @@
     },
     {
       "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-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. ",
+      "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",
@@ -127,7 +127,7 @@
     },
     {
       "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 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. ",
+      "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",
@@ -226,7 +226,7 @@
     },
     {
       "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-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. ",
+      "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",
@@ -243,10 +243,18 @@
           "description": "When `true`, the component is expanded.",
           "values": []
         },
+        {
+          "name": "floating",
+          "description": "When `true`, the component is in a floating state.",
+          "values": []
+        },
         {
           "name": "layout",
           "description": "Specifies the layout direction of the actions.",
           "values": [
+            {
+              "name": "grid"
+            },
             {
               "name": "horizontal"
             },
@@ -591,7 +599,7 @@
     },
     {
       "name": "calcite-action-pad",
-      "description": "### 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. ",
+      "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",
@@ -1110,7 +1118,7 @@
     },
     {
       "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- **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<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): 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- **icon** - [Deprecated] A slot for adding a leading header icon with `calcite-icon`. Use `icon-start` instead.\n- **content-start** - A slot for adding non-actionable elements before content of the component.\n- **control** - [Deprecated] A slot for adding a single HTML input element in a header. Use `actions-end` instead.\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-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** - When the component is `expanded`, specifies the `heading` text color. \n- **--calcite-block-padding** - [Deprecated] Specifies the padding of the component's `default` slot. \n- **--calcite-block-text-color** - Specifies the component's text color. ",
+      "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- **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<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): 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- **icon** - [Deprecated] A slot for adding a leading header icon with `calcite-icon`. Use `icon-start` instead.\n- **content-start** - A slot for adding non-actionable elements before content of the component.\n- **control** - [Deprecated] A slot for adding a single HTML input element in a header. Use `actions-end` instead.\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-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** - When the component is `expanded`, specifies the `heading` text color. \n- **--calcite-block-padding** - [Deprecated] Specifies the padding of the component's `default` slot. \n- **--calcite-block-text-color** - 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",
@@ -1765,7 +1773,7 @@
     },
     {
       "name": "calcite-checkbox",
-      "description": "### Events\n- **calciteCheckboxChange** - Fires when the component's `checked` status changes.\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### CSS Properties\n- **--calcite-checkbox-size** - Specifies the component's height and width. \n- **--calcite-checkbox-border-color** - Specifies the component's color. \n- **--calcite-checkbox-border-color-hover** - Specifies the component's color when hovered. \n- **--calcite-checkbox-icon-color** - Specifies the component's font color. ",
+      "description": "### Events\n- **calciteCheckboxChange** - Fires when the component's `checked` status changes.\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### CSS Properties\n- **--calcite-checkbox-size** - Specifies the component's height and width. \n- **--calcite-checkbox-border-color** - Specifies the component's color. \n- **--calcite-checkbox-border-color-hover** - Specifies the component's color when hovered. \n- **--calcite-checkbox-icon-color** - Specifies the component's icon color. ",
       "attributes": [
         {
           "name": "checked",
@@ -2304,6 +2312,11 @@
             }
           ]
         },
+        {
+          "name": "select-all-enabled",
+          "description": "When `true` and `selectionMode` is `\"multiple\"` or `\"ancestors\"`, provides a checkbox for selecting all `calcite-combobox-item`s.",
+          "values": []
+        },
         {
           "name": "selection-display",
           "description": "When `selectionMode` is `\"ancestors\"` or `\"multiple\"`, specifies the display of multiple `calcite-combobox-item` selections, where:\n\n`\"all\"` displays all selections with individual `calcite-chip`s,\n\n`\"fit\"` displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed, and\n\n`\"single\"` displays one `calcite-chip` with the total number of selections.",
@@ -2372,7 +2385,7 @@
     },
     {
       "name": "calcite-combobox-item",
-      "description": "### Events\n- **calciteComboboxItemChange** - Fires whenever the component is selected or unselected.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding nested `calcite-combobox-item`s.\n- **content-end** - A slot for adding non-actionable elements after the component's content.\n- **content-start** - A slot for adding non-actionable elements before the component's content.\n\n### CSS Properties\n- **--calcite-combobox-text-color** - Specifies the component's text and `icon` color. \n- **--calcite-combobox-text-color-hover** - Specifies the component's text and `icon` color when hovered. \n- **--calcite-combobox-item-background-color-active** - Specifies the component's background color when active. \n- **--calcite-combobox-item-background-color-hover** - Specifies the component's background color when hovered. \n- **--calcite-combobox-selected-icon-color** - Specifies the component's selected indicator icon color. \n- **--calcite-combobox-description-text-color** - Specifies the component's `description` and `shortHeading` text color. \n- **--calcite-combobox-description-text-color-press** - Specifies the component's `description` and `shortHeading` text color when hovered. \n- **--calcite-combobox-heading-text-color** - Specifies the component's `heading` text color. ",
+      "description": "### Events\n- **calciteComboboxItemChange** - Fires whenever the component is selected or unselected.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding nested `calcite-combobox-item`s.\n- **content-end** - A slot for adding non-actionable elements after the component's content.\n- **content-start** - A slot for adding non-actionable elements before the component's content.\n\n### CSS Properties\n- **--calcite-combobox-item-border-color** - Specifies the component's border color. \n- **--calcite-combobox-text-color** - Specifies the component's text and `icon` color. \n- **--calcite-combobox-text-color-hover** - Specifies the component's text and `icon` color when hovered. \n- **--calcite-combobox-item-background-color-active** - Specifies the component's background color when active. \n- **--calcite-combobox-item-background-color-hover** - Specifies the component's background color when hovered. \n- **--calcite-combobox-item-shadow** - Specifies the component's shadow. \n- **--calcite-combobox-selected-icon-color** - Specifies the component's selected indicator icon color. \n- **--calcite-combobox-description-text-color** - Specifies the component's `description` and `shortHeading` text color. \n- **--calcite-combobox-description-text-color-press** - Specifies the component's `description` and `shortHeading` text color when hovered. \n- **--calcite-combobox-heading-text-color** - Specifies the component's `heading` text color. ",
       "attributes": [
         {
           "name": "active",
@@ -3281,7 +3294,7 @@
     },
     {
       "name": "calcite-filter",
-      "description": "### Events\n- **calciteFilterChange** - Fires when the filter text changes.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `filter(value?: string): Promise<void>` - Performs a filter on the component.\n\nThis method can be useful because filtering is delayed and asynchronous.\n- `setFocus(): Promise<void>` - Sets focus on the component.",
+      "description": "### Events\n- **calciteFilterChange** - Fires when the filter text changes.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `filter(value?: string): Promise<void>` - Performs a filter on the component.\n\nThis method can be useful because filtering is delayed and asynchronous.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### CSS Properties\n- **--calcite-filter-content-space** - Specifies the padding of the component's content. \n- **--calcite-filter-input-background-color** - Specifies the input's background color. \n- **--calcite-filter-input-border-color** - Specifies the input's border color. \n- **--calcite-filter-input-corner-radius** - Specifies the input's corner radius. \n- **--calcite-filter-input-shadow** - Specifies the shadow around the input. \n- **--calcite-filter-input-icon-color** - Specifies the input's icon color. \n- **--calcite-filter-input-text-color** - Specifies the input's text color. \n- **--calcite-filter-input-placeholder-text-color** - Specifies the input's placeholder text color. \n- **--calcite-filter-input-actions-background-color** - Specifies the background color of the input's `clearable` element. \n- **--calcite-filter-input-actions-background-color-hover** - Specifies the background color of the input's `clearable` element when hovered. \n- **--calcite-filter-input-actions-background-color-press** - Specifies the background color of the input's `clearable` element when pressed. \n- **--calcite-filter-input-actions-icon-color** - Specifies the icon color of the input's `clearable` element. \n- **--calcite-filter-input-actions-icon-color-hover** - Specifies the icon color of the input's `clearable` element when hovered. \n- **--calcite-filter-input-actions-icon-color-press** - Specifies the icon color of the input's `clearable` element when pressed. ",
       "attributes": [
         {
           "name": "disabled",
@@ -3878,6 +3891,11 @@
             }
           ]
         },
+        {
+          "name": "label",
+          "description": "Accessible name for the component.",
+          "values": []
+        },
         {
           "name": "layout",
           "description": "Defines the layout of the component.",
@@ -4090,7 +4108,7 @@
     },
     {
       "name": "calcite-input-number",
-      "description": "### Events\n- **calciteInputNumberChange** - Fires each time a new value is typed and committed.\n- **calciteInputNumberInput** - Fires each time a new value is typed.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `selectText(): Promise<void>` - Selects the text of the component's `value`.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **action** - A slot for positioning a button next to the component.\n\n### CSS Properties\n- **--calcite-input-prefix-size** - Specifies the component's prefix width. \n- **--calcite-input-suffix-size** - Specifies the component's suffix width. ",
+      "description": "### Events\n- **calciteInputNumberChange** - Fires each time a new value is typed and committed.\n- **calciteInputNumberInput** - Fires each time a new value is typed.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `selectText(): Promise<void>` - Selects the text of the component's `value`.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **action** - A slot for positioning a button next to the component.\n\n### CSS Properties\n- **--calcite-input-actions-background-color** - Specifies the background color of the component's `clearable` and `number-button-type` elements. \n- **--calcite-input-actions-background-color-hover** - Specifies the background color of the component's `clearable` and `number-button-type` elements. when hovered. \n- **--calcite-input-actions-background-color-press** - Specifies the background color of the component's `clearable` and `number-button-type` elements. when pressed. \n- **--calcite-input-actions-icon-color** - Specifies the icon color of the component's `clearable` and `number-button-type` elements. \n- **--calcite-input-actions-icon-color-hover** - Specifies the icon color of the component's `clearable` and `number-button-type` elements. when hovered. \n- **--calcite-input-actions-icon-color-press** - Specifies the icon color of the component's `clearable` and `number-button-type` elements. when pressed. \n- **--calcite-input-loading-background-color** - Specifies the background color of the `loading` element. \n- **--calcite-input-loading-fill-color** - Specifies the fill color of the `loading` element. \n- **--calcite-input-number-background-color** - Specifies the background color of the component. \n- **--calcite-input-number-border-color** - Specifies the border color of the component. \n- **--calcite-input-number-corner-radius** - Specifies the border radius of the component. \n- **--calcite-input-number-height** - Specifies the height of the component. \n- **--calcite-input-number-placeholder-text-color** - Specifies the text color of the placeholder in the component. \n- **--calcite-input-number-text-color** - Specifies the text color of the component. \n- **--calcite-input-number-text-color-focus** - Specifies the text color of the component when focused. \n- **--calcite-input-prefix-background-color** - Specifies the background color of the prefix element. \n- **--calcite-input-prefix-size** - Specifies the width of the prefix element. \n- **--calcite-input-prefix-text-color** - Specifies the text color of the prefix element. \n- **--calcite-input-suffix-background-color** - Specifies the background color of the suffix element. \n- **--calcite-input-suffix-size** - Specifies the width of the suffix element. \n- **--calcite-input-suffix-text-color** - Specifies the text color of the suffix element. ",
       "attributes": [
         {
           "name": "alignment",
@@ -4432,7 +4450,7 @@
     },
     {
       "name": "calcite-input-time-picker",
-      "description": "### Events\n- **calciteInputTimePickerBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteInputTimePickerBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteInputTimePickerChange** - Fires when the component's `value` is changes.\n- **calciteInputTimePickerClose** - Fires when the component is closed and animation is complete.\n- **calciteInputTimePickerOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise<void>` - Updates the position of the component.\n- `setFocus(): Promise<void>` - Sets focus on the component.",
+      "description": "### Events\n- **calciteInputTimePickerBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteInputTimePickerBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteInputTimePickerChange** - Fires when the component's `value` is modified by the user.\n- **calciteInputTimePickerClose** - Fires when the component is closed and animation is complete.\n- **calciteInputTimePickerOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise<void>` - Updates the position of the component.\n- `setFocus(): Promise<void>` - Sets focus on the component.",
       "attributes": [
         {
           "name": "disabled",
@@ -5707,7 +5725,7 @@
     },
     {
       "name": "calcite-notice",
-      "description": "Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because\nnotices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy.\nThey are optionally closable - useful for keeping track of whether or not a user has closed the notice. You can also choose not\nto display a notice on page load and set the \"active\" attribute as needed to contextually provide inline messaging to users.\n--\n\n### Events\n- **calciteNoticeBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteNoticeBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteNoticeClose** - Fires when the component is closed and animation is complete.\n- **calciteNoticeOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<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- **title** - A slot for adding the title.\n- **message** - A slot for adding the message.\n- **link** - A slot for adding a `calcite-action` to take, such as: \"undo\", \"try again\", \"link to page\", etc.\n- **actions-end** - A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or less actions.\n\n### CSS Properties\n- **--calcite-notice-background-color** - Specifies the component's background color. \n- **--calcite-notice-close-background-color-focus** - Specifies the component's background color when focused. \n- **--calcite-notice-close-background-color-press** - Specifies the component's background color when active. \n- **--calcite-notice-close-text-color-hover** - Specifies the background color of the component's close button when hovered. \n- **--calcite-notice-close-text-color** - Specifies the text color of the component's close button. \n- **--calcite-notice-content-text-color** - Specifies the component's content text color. \n- **--calcite-notice-width** - [Deprecated] Specifies the component's width. ",
+      "description": "Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because\nnotices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy.\nThey are optionally closable - useful for keeping track of whether or not a user has closed the notice. You can also choose not\nto display a notice on page load and set the \"active\" attribute as needed to contextually provide inline messaging to users.\n--\n\n### Events\n- **calciteNoticeBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteNoticeBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteNoticeClose** - Fires when the component is closed and animation is complete.\n- **calciteNoticeOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<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- **title** - A slot for adding the title.\n- **message** - A slot for adding the message.\n- **link** - A slot for adding a `calcite-action` to take, such as: \"undo\", \"try again\", \"link to page\", etc.\n- **actions-end** - A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or less actions.\n\n### CSS Properties\n- **--calcite-notice-background-color** - Specifies the component's background color. \n- **--calcite-notice-close-background-color-focus** - Specifies the component's background color when focused. \n- **--calcite-notice-close-background-color-press** - Specifies the component's background color when active. \n- **--calcite-notice-close-icon-color-hover** - Specifies the background color of the component's close button when hovered. \n- **--calcite-notice-close-icon-color** - Specifies the text color of the component's close button. \n- **--calcite-notice-title-text-color** - Specifies the component's title text color. \n- **--calcite-notice-content-text-color** - Specifies the component's content text color. \n- **--calcite-notice-width** - [Deprecated] Specifies the component's width. \n- **--calcite-notice-close-text-color-hover** - [Deprecated] Use `--calcite-notice-close-icon-color-hover`. Specifies the background color of the component's close button when hovered. \n- **--calcite-notice-close-text-color** - [Deprecated] Use `--calcite-notice-close-icon-color`. Specifies the text color of the component's close button. ",
       "attributes": [
         {
           "name": "closable",
@@ -5886,7 +5904,7 @@
     },
     {
       "name": "calcite-panel",
-      "description": "### Events\n- **calcitePanelClose** - Fires when the close button is clicked.\n- **calcitePanelScroll** - Fires when the content is scrolled.\n- **calcitePanelToggle** - Fires when the collapse button is clicked.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `scrollContentTo(options?: ScrollToOptions): Promise<void>` - Scrolls the component's content to a specified set of coordinates.\n- `setFocus(): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the component.\n- **alerts** - A slot for adding `calcite-alert`s to the component.\n- **content-bottom** - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)\n- **content-top** - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).\n- **header-actions-start** - A slot for adding actions or content to the start side of the header.\n- **header-actions-end** - A slot for adding actions or content to the end side of the header.\n- **header-content** - A slot for adding custom content to the header.\n- **header-menu-actions** - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.\n- **fab** - A slot for adding a `calcite-fab` (floating action button) to perform an action.\n- **footer** - A slot for adding custom content to the component's footer. Should not be used with the `\"footer-start\"` or `\"footer-end\"` slots.\n- **footer-actions** - [Deprecated] Use the `footer-start` and `footer-end` slots instead. A slot for adding `calcite-button`s to the component's footer.\n- **footer-end** - A slot for adding a trailing footer custom content. Should not be used with the `\"footer\"` slot.\n- **footer-start** - A slot for adding a leading footer custom content. Should not be used with the `\"footer\"` slot.\n\n### CSS Properties\n- **--calcite-panel-corner-radius** - Specifies the component's corner radius. \n- **--calcite-panel-heading-text-color** - Specifies the text color of the component's `heading`. \n- **--calcite-panel-description-text-color** - Specifies the text color of the component's `description`. \n- **--calcite-panel-border-color** - Specifies the component's border color. \n- **--calcite-panel-background-color** - Specifies the component's background color. \n- **--calcite-panel-header-background-color** - Specifies the background color of the component's header. \n- **--calcite-panel-header-action-background-color** - Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions`. \n- **--calcite-panel-header-action-background-color-hover** - Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when hovered. \n- **--calcite-panel-header-action-background-color-press** - Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed. \n- **--calcite-panel-header-action-text-color** - Specifies the text color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions`. \n- **--calcite-panel-header-action-text-color-press** - Specifies the text color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed. \n- **--calcite-panel-footer-background-color** - Specifies the background color of the component's footer. \n- **--calcite-panel-space** - Specifies the padding of the component's `\"unnamed (default)\"` slot. \n- **--calcite-panel-header-content-space** - Specifies the padding of the `\"header-content\"` slot. \n- **--calcite-panel-footer-space** - Specifies the padding of the component's footer. \n- **--calcite-popover-border-color** - Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s. \n- **--calcite-panel-content-space** - [Deprecated] Use `--calcite-panel-space` instead. Specifies the padding of the component's content. \n- **--calcite-panel-footer-padding** - [Deprecated] Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer. \n- **--calcite-panel-header-border-block-end** - [Deprecated] Use `--calcite-panel-border-color` instead. Specifies the component header's block end border. ",
+      "description": "### Events\n- **calcitePanelClose** - Fires when the close button is clicked.\n- **calcitePanelScroll** - Fires when the content is scrolled.\n- **calcitePanelToggle** - Fires when the collapse button is clicked.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `scrollContentTo(options?: ScrollToOptions): Promise<void>` - Scrolls the component's content to a specified set of coordinates.\n- `setFocus(): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the component.\n- **alerts** - A slot for adding `calcite-alert`s to the component.\n- **content-bottom** - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)\n- **content-top** - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).\n- **header-actions-start** - A slot for adding actions or content to the start side of the header.\n- **header-actions-end** - A slot for adding actions or content to the end side of the header.\n- **header-content** - A slot for adding custom content to the header.\n- **header-menu-actions** - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.\n- **fab** - A slot for adding a `calcite-fab` (floating action button) to perform an action.\n- **footer** - A slot for adding custom content to the component's footer. Should not be used with the `\"footer-start\"` or `\"footer-end\"` slots.\n- **footer-actions** - [Deprecated] Use the `footer-start` and `footer-end` slots instead. A slot for adding `calcite-button`s to the component's footer.\n- **footer-end** - A slot for adding a trailing footer custom content. Should not be used with the `\"footer\"` slot.\n- **footer-start** - A slot for adding a leading footer custom content. Should not be used with the `\"footer\"` slot.\n\n### CSS Properties\n- **--calcite-panel-corner-radius** - Specifies the component's corner radius. \n- **--calcite-panel-heading-text-color** - Specifies the text color of the component's `heading`. \n- **--calcite-panel-description-text-color** - Specifies the text color of the component's `description`. \n- **--calcite-panel-border-color** - Specifies the component's border color. \n- **--calcite-panel-background-color** - Specifies the component's background color. \n- **--calcite-panel-header-background-color** - Specifies the background color of the component's header. \n- **--calcite-panel-header-action-background-color** - Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions`. \n- **--calcite-panel-header-action-background-color-hover** - Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when hovered. \n- **--calcite-panel-header-action-background-color-press** - Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed. \n- **--calcite-panel-header-action-text-color** - Specifies the text color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions`. \n- **--calcite-panel-header-action-text-color-press** - Specifies the text color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed or hovered. \n- **--calcite-panel-footer-background-color** - Specifies the background color of the component's footer. \n- **--calcite-panel-space** - Specifies the padding of the component's `\"unnamed (default)\"` slot. \n- **--calcite-panel-header-content-space** - Specifies the padding of the `\"header-content\"` slot. \n- **--calcite-panel-footer-space** - Specifies the padding of the component's footer. \n- **--calcite-popover-border-color** - Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s. \n- **--calcite-panel-content-space** - [Deprecated] Use `--calcite-panel-space` instead. Specifies the padding of the component's content. \n- **--calcite-panel-footer-padding** - [Deprecated] Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer. \n- **--calcite-panel-header-border-block-end** - [Deprecated] Use `--calcite-panel-border-color` instead. Specifies the component header's block end border. ",
       "attributes": [
         {
           "name": "closable",
@@ -6284,7 +6302,7 @@
     },
     {
       "name": "calcite-radio-button",
-      "description": "### Events\n- **calciteRadioButtonChange** - Fires only when the radio button is checked.  This behavior is identical to the native HTML input element.\nSince this event does not fire when the radio button is unchecked, it's not recommended to attach a listener for this event\ndirectly on the element, but instead either attach it to a node that contains all of the radio buttons in the group\nor use the `calciteRadioButtonGroupChange` event if using this with `calcite-radio-button-group`.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component.",
+      "description": "### Events\n- **calciteRadioButtonChange** - Fires only when the radio button is checked.  This behavior is identical to the native HTML input element.\nSince this event does not fire when the radio button is unchecked, it's not recommended to attach a listener for this event\ndirectly on the element, but instead either attach it to a node that contains all of the radio buttons in the group\nor use the `calciteRadioButtonGroupChange` event if using this with `calcite-radio-button-group`.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### CSS Properties\n- **--calcite-radio-button-background-color** - Specifies the component's background color. \n- **--calcite-radio-button-border-color** - Specifies the component's border color. \n- **--calcite-radio-button-corner-radius** - Specifies the component's corner radius. \n- **--calcite-radio-button-size** - Specifies the component's size. \n- **--calcite-radio-size** - [Deprecated] Use `--calcite-radio-button-size`. Specifies the component's size. ",
       "attributes": [
         {
           "name": "checked",
@@ -6336,7 +6354,7 @@
     },
     {
       "name": "calcite-radio-button-group",
-      "description": "### Events\n- **calciteRadioButtonGroupChange** - Fires when the component has changed.\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 fist focusable `calcite-radio-button` element in the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-radio-button`s.",
+      "description": "### Events\n- **calciteRadioButtonGroupChange** - Fires when the component has changed.\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 fist focusable `calcite-radio-button` element in the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-radio-button`s.\n\n### CSS Properties\n- **--calcite-radio-button-group-gap** - Specifies the space between slotted components in the component. \n- **--calcite-radio-button-input-message-spacing** - Specifies the margin spacing at the top of the input-message component. ",
       "attributes": [
         {
           "name": "disabled",
@@ -6747,7 +6765,7 @@
     },
     {
       "name": "calcite-sheet",
-      "description": "### Events\n- **calciteSheetBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteSheetBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteSheetClose** - Fires when the component is closed and animation is complete.\n- **calciteSheetOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's \"close\" button - the first focusable item.\n- `updateFocusTrapElements(extraContainers?: FocusTrapOptions[\"extraContainers\"]): Promise<void>` - Updates the element(s) that are included in the focus-trap of the component.\n\n### Slots\n- _default_ - A slot for adding custom content.\n\n### CSS Properties\n- **--calcite-sheet-scrim-background** - Specifies the background color of the sheet scrim. \n- **--calcite-sheet-width** - When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the width of the component. \n- **--calcite-sheet-max-width** - When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the maximum width of the component. \n- **--calcite-sheet-min-width** - When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the minimum width of the component. \n- **--calcite-sheet-height** - When `position` is `\"block-start\"` or `\"block-end\"`, specifies the height of the component. \n- **--calcite-sheet-max-height** - When `position` is `\"block-start\"` or `\"block-end\"`, specifies the maximum height of the component. \n- **--calcite-sheet-min-height** - When `position` is `\"block-start\"` or `\"block-end\"`, specifies the minimum height of the component. ",
+      "description": "### Events\n- **calciteSheetBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteSheetBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteSheetClose** - Fires when the component is closed and animation is complete.\n- **calciteSheetOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's \"close\" button - the first focusable item.\n- `updateFocusTrapElements(extraContainers?: FocusTrapOptions[\"extraContainers\"]): Promise<void>` - Updates the element(s) that are included in the focus-trap of the component.\n\n### Slots\n- _default_ - A slot for adding custom content.\n\n### CSS Properties\n- **--calcite-sheet-background-color** - Specifies the background color of the sheet. \n- **--calcite-sheet-corner-radius** - Specifies the corner radius of the component. \n- **--calcite-sheet-shadow** - Specifies the shadow of the component. \n- **--calcite-sheet-text-color** - Specifies the text color of the component. \n- **--calcite-sheet-resize-background-color** - Specifies the background color of the resize handle. \n- **--calcite-sheet-resize-icon-color** - Specifies the text color of the resize handle. \n- **--calcite-sheet-scrim-background** - Specifies the background color of the sheet scrim. \n- **--calcite-sheet-width** - When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the width of the component. \n- **--calcite-sheet-max-width** - When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the maximum width of the component. \n- **--calcite-sheet-min-width** - When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the minimum width of the component. \n- **--calcite-sheet-height** - When `position` is `\"block-start\"` or `\"block-end\"`, specifies the height of the component. \n- **--calcite-sheet-max-height** - When `position` is `\"block-start\"` or `\"block-end\"`, specifies the maximum height of the component. \n- **--calcite-sheet-min-height** - When `position` is `\"block-start\"` or `\"block-end\"`, specifies the minimum height of the component. ",
       "attributes": [
         {
           "name": "display-mode",
@@ -6925,7 +6943,7 @@
     },
     {
       "name": "calcite-shell-panel",
-      "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 custom content.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the component.\n\n### CSS Properties\n- **--calcite-shell-panel-width** - Specifies the width of the component. \n- **--calcite-shell-panel-max-width** - Specifies the maximum width of the component. \n- **--calcite-shell-panel-min-width** - Specifies the minimum width of the component. \n- **--calcite-shell-panel-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the height of the component. \n- **--calcite-shell-panel-max-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the maximum height of the component. \n- **--calcite-shell-panel-min-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the minimum height of the component. \n- **--calcite-shell-panel-z-index** - Specifies the z-index value for the component. \n- **--calcite-shell-panel-border-color** - When `displayMode` is `\"float-all\"`, specifies the component's border color. \n- **--calcite-shell-panel-corner-radius** - When `displayMode` is `\"float-all\"`, specifies the component's corner radius \n- **--calcite-shell-panel-shadow** - When `displayMode` is `\"float-all\"`, specifies the component's shadow. ",
+      "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 custom content.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the component.\n\n### CSS Properties\n- **--calcite-shell-panel-background-color** - Specifies the background color of the component. \n- **--calcite-shell-panel-border-color** - When `displayMode` is `\"float-all\"`, specifies the component's border color. \n- **--calcite-shell-panel-corner-radius** - When `displayMode` is `\"float-all\"`, specifies the component's corner radius \n- **--calcite-shell-panel-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the height of the component. \n- **--calcite-shell-panel-max-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the maximum height of the component. \n- **--calcite-shell-panel-max-width** - Specifies the maximum width of the component. \n- **--calcite-shell-panel-min-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the minimum height of the component. \n- **--calcite-shell-panel-min-width** - Specifies the minimum width of the component. \n- **--calcite-shell-panel-resize-background-color** - Specifies the background color of the resize handle. \n- **--calcite-shell-panel-resize-icon-color** - Specifies the text color of the resize handle. \n- **--calcite-shell-panel-shadow** - When `displayMode` is `\"float-all\"`, specifies the component's shadow. \n- **--calcite-shell-panel-text-color** - Specifies the text color of the component. \n- **--calcite-shell-panel-width** - Specifies the width of the component. \n- **--calcite-shell-panel-z-index** - Specifies the z-index value for the component. ",
       "attributes": [
         {
           "name": "collapsed",
@@ -7583,7 +7601,7 @@
     },
     {
       "name": "calcite-stepper",
-      "description": "### Events\n- **calciteStepperChange** - Fires when the active `calcite-stepper-item` changes.\n- **calciteStepperItemChange** - Fires when the active `calcite-stepper-item` changes.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `endStep(): Promise<void>` - Set the last `calcite-stepper-item` as active.\n- `goToStep(step: number): Promise<void>` - Set a specified `calcite-stepper-item` as active.\n- `nextStep(): Promise<void>` - Set the next `calcite-stepper-item` as active.\n- `prevStep(): Promise<void>` - Set the previous `calcite-stepper-item` as active.\n- `startStep(): Promise<void>` - Set the first `calcite-stepper-item` as active.\n\n### Slots\n- _default_ - A slot for adding `calcite-stepper-item` elements.",
+      "description": "### Events\n- **calciteStepperChange** - Fires when the active `calcite-stepper-item` changes.\n- **calciteStepperItemChange** - Fires when the active `calcite-stepper-item` changes.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `endStep(): Promise<void>` - Set the last `calcite-stepper-item` as active.\n- `goToStep(step: number): Promise<void>` - Set a specified `calcite-stepper-item` as active.\n- `nextStep(): Promise<void>` - Set the next `calcite-stepper-item` as active.\n- `prevStep(): Promise<void>` - Set the previous `calcite-stepper-item` as active.\n- `startStep(): Promise<void>` - Set the first `calcite-stepper-item` as active.\n\n### Slots\n- _default_ - A slot for adding `calcite-stepper-item` elements.\n\n### CSS Properties\n- **--calcite-stepper-bar-gap** - Specifies the space between items in the step bar. \n- **--calcite-stepper-bar-inactive-fill-color** - Specifies the fill color of items in the step bar. \n- **--calcite-stepper-bar-active-fill-color** - Specifies the fill color of active items in the step bar. \n- **--calcite-stepper-bar-complete-fill-color** - Specifies the fill color of complete items in the step bar. \n- **--calcite-stepper-bar-error-fill-color** - Specifies the fill color of error items in the step bar. ",
       "attributes": [
         {
           "name": "icon",
@@ -7645,7 +7663,7 @@
     },
     {
       "name": "calcite-stepper-item",
-      "description": "### Events\n- **calciteStepperItemSelect** - Fires when the active `calcite-stepper-item` changes.\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 custom content.",
+      "description": "### Events\n- **calciteStepperItemSelect** - Fires when the active `calcite-stepper-item` changes.\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 custom content.\n\n### CSS Properties\n- **--calcite-stepper-item-background-color-press** - Specifies the component's background-color when active. \n- **--calcite-stepper-item-header-text-color** - Specifies the component's header text color. \n- **--calcite-stepper-item-header-text-color-hover** - Specifies the component's header text color when hovered or focused. \n- **--calcite-stepper-item-selected-header-text-color** - Specifies the component's header text color when selected. \n- **--calcite-stepper-item-icon-color** - Specifies the component's icon color. \n- **--calcite-stepper-item-complete-icon-color** - Specifies the component's icon color when complete. \n- **--calcite-stepper-item-error-icon-color** - Specifies the component's icon and number color when in error. \n- **--calcite-stepper-item-selected-icon-color** - Specifies the component's icon and number color when selected. \n- **--calcite-stepper-item-description-text-color** - Specifies the component's description and number text color. \n- **--calcite-stepper-item-description-text-color-hover** - Specifies the component's description text color when hovered, focused or selected. \n- **--calcite-stepper-bar-gap** - Specifies the component's bottom spacing. \n- **--calcite-stepper-bar-fill-color** - Specifies the component's fill color. \n- **--calcite-stepper-bar-fill-color-hover** - Specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-complete-fill-color** - Specifies the component's fill color when complete. \n- **--calcite-stepper-bar-complete-fill-color-hover** - When item is complete, specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-error-fill-color** - Specifies the component's fill color when in error. \n- **--calcite-stepper-bar-error-fill-color-hover** - When item is error, specifies the component's fill color when hovered or focused. \n- **--calcite-stepper-bar-selected-fill-color** - Specifies the component's fill color when selected. ",
       "attributes": [
         {
           "name": "complete",
@@ -7687,7 +7705,7 @@
     },
     {
       "name": "calcite-switch",
-      "description": "### Events\n- **calciteSwitchChange** - Fires when the `checked` value has changed.\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### CSS Properties\n- **--calcite-switch-background-color** - Specifies the component's background color. \n- **--calcite-switch-border-color** - Specifies the component's border color. \n- **--calcite-switch-corner-radius** - Specifies the component's corner radius. \n- **--calcite-switch-handle-background-color** - Specifies the handle's background color. \n- **--calcite-switch-handle-border-color** - Specifies the handle's border color. \n- **--calcite-switch-handle-shadow** - Specifies the handle's shadow. ",
+      "description": "### Events\n- **calciteSwitchChange** - Fires when the `checked` value has changed.\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### CSS Properties\n- **--calcite-switch-background-color** - Specifies the component's background color. \n- **--calcite-switch-background-color-hover** - Specifies the component's background color when hovered or pressed. \n- **--calcite-switch-border-color** - [Deprecated] No longer necessary. Specifies the component's border color. \n- **--calcite-switch-corner-radius** - Specifies the component's corner radius. \n- **--calcite-switch-handle-background-color** - Specifies the handle's background color. \n- **--calcite-switch-handle-border-color** - [Deprecated] No longer necessary. Specifies the handle's border color. \n- **--calcite-switch-handle-shadow** - [Deprecated] No longer necessary. Specifies the handle's shadow. ",
       "attributes": [
         {
           "name": "checked",
@@ -8129,7 +8147,7 @@
     },
     {
       "name": "calcite-text-area",
-      "description": "### Events\n- **calciteTextAreaChange** - Fires each time a new `value` is typed and committed.\n- **calciteTextAreaInput** - Fires each time a new `value` is typed.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `selectText(): Promise<void>` - Selects the text of the component's `value`.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding text.\n- **footer-start** - A slot for adding content to the start of the component's footer.\n- **footer-end** - A slot for adding content to the end of the component's footer.\n\n### CSS Properties\n- **--calcite-text-area-background-color** - Specifies the component's background color. \n- **--calcite-text-area-border-color** - Specifies the component's text area border color. \n- **--calcite-text-area-character-limit-text-color** - Specifies the color of the character limit text displayed in the footer of the component. \n- **--calcite-text-area-divider-color** - Specifies the color of the divider between the text area and footer. \n- **--calcite-text-area-font-size** - Specifies the font size of the text area and footer. \n- **--calcite-text-area-max-height** - Specifies the component's text area maximum height. \n- **--calcite-text-area-min-height** - Specifies the component's text area minimum height. \n- **--calcite-text-area-max-width** - Specifies the component's text area maximum width. \n- **--calcite-text-area-min-width** - Specifies the component's text area minimum width. \n- **--calcite-text-area-text-color** - Specifies the component's text color. \n- **--calcite-text-area-footer-border-color** - Specifies the footer's border color. ",
+      "description": "### Events\n- **calciteTextAreaChange** - Fires each time a new `value` is typed and committed.\n- **calciteTextAreaInput** - Fires each time a new `value` is typed.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `selectText(): Promise<void>` - Selects the text of the component's `value`.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding text.\n- **footer-start** - A slot for adding content to the start of the component's footer.\n- **footer-end** - A slot for adding content to the end of the component's footer.\n\n### CSS Properties\n- **--calcite-text-area-background-color** - Specifies the component's background color. \n- **--calcite-text-area-border-color** - Specifies the component's text area border color. \n- **--calcite-text-area-character-limit-text-color** - Specifies the color of the character limit text displayed in the footer of the component. \n- **--calcite-text-area-divider-color** - Specifies the color of the divider between the text area and footer. \n- **--calcite-text-area-font-size** - Specifies the font size of the text area and footer. \n- **--calcite-text-area-max-height** - Specifies the component's text area maximum height. \n- **--calcite-text-area-min-height** - Specifies the component's text area minimum height. \n- **--calcite-text-area-max-width** - Specifies the component's text area maximum width. \n- **--calcite-text-area-min-width** - Specifies the component's text area minimum width. \n- **--calcite-text-area-text-color** - Specifies the component's text color. \n- **--calcite-text-area-footer-border-color** - Specifies the footer's border color. \n- **--calcite-text-area-corner-radius** - Specifies component's corner radius. \n- **--calcite-text-area-shadow** - Specifies the component's shadow. \n- **--calcite-text-area-footer-background-color** - Specifies the footer's background color. ",
       "attributes": [
         {
           "name": "columns",
@@ -8573,7 +8591,7 @@
     },
     {
       "name": "calcite-time-picker",
-      "description": "### Events\n- **calciteTimePickerChange** - Fires when a user changes the component's time\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.",
+      "description": "### Events\n- **calciteTimePickerChange** - Fires when a user changes the component's time\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### CSS Properties\n- **--calcite-time-picker-background-color** - The background color of the time picker. \n- **--calcite-time-picker-corner-radius** - The border radius of the time picker. \n- **--calcite-time-picker-button-background-color-hover** - Specifies the button's background color when hovered or focused. \n- **--calcite-time-picker-button-background-color-press** - Specifies the button's background color when active. \n- **--calcite-time-picker-color** - Specifies the component's text color. \n- **--calcite-time-picker-icon-color** - Specifies the component's icon color. \n- **--calcite-time-picker-input-border-color-press** - Specifies the input's border color when active. \n- **--calcite-time-picker-input-border-color-hover** - Specifies the input's border color when hovered. ",
       "attributes": [
         {
           "name": "hour-format",

package/dist/index.js

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.8 */
+v3.2.0 */
 import { s as setAssetPath$1 } from "./chunks/runtime.js";
 import { g } from "./chunks/runtime.js";
 let assetPathChanged = false;

package/dist/loader.js

@@ -1,14 +1,14 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.8 */
+v3.2.0 */
 import "@lit-labs/ssr-client/lit-element-hydrate-support.js";
 import { r as runtime } from "./chunks/runtime.js";
 import { makeDefineCustomElements } from "@arcgis/lumina";
 const defineCustomElements = makeDefineCustomElements(runtime, {
   "calcite-accordion": [() => import("./components/calcite-accordion/customElement.js"), "appearance,iconPosition,iconType,scale,selectionMode"],
-  "calcite-accordion-item": [() => import("./components/calcite-accordion-item/customElement.js"), "accordionParent:,description,expanded,heading,iconEnd,iconFlipRtl,iconPosition,iconStart,iconType,scale;setFocus"],
+  "calcite-accordion-item": [() => import("./components/calcite-accordion-item/customElement.js"), "accordionParent:,appearance,description,expanded,heading,iconEnd,iconFlipRtl,iconPosition,iconStart,iconType,scale;setFocus"],
   "calcite-action": [() => import("./components/calcite-action/customElement.js"), "active,alignment,appearance,compact,disabled,dragHandle,icon,iconFlipRtl,indicator,label,loading,messageOverrides:,scale,text,textEnabled;setFocus"],
-  "calcite-action-bar": [() => import("./components/calcite-action-bar/customElement.js"), "actionsEndGroupLabel,expandDisabled,expanded,layout,messageOverrides:,overflowActionsDisabled,overlayPositioning,position,scale;overflowActions,setFocus"],
+  "calcite-action-bar": [() => import("./components/calcite-action-bar/customElement.js"), "actionsEndGroupLabel,expandDisabled,expanded,floating,layout,messageOverrides:,overflowActionsDisabled,overlayPositioning,position,scale;overflowActions,setFocus"],
   "calcite-action-group": [() => import("./components/calcite-action-group/customElement.js"), "columns,expanded,label,layout,menuFlipPlacements:,menuOpen,menuPlacement,messageOverrides:,overlayPositioning,scale;setFocus"],
   "calcite-action-menu": [() => import("./components/calcite-action-menu/customElement.js"), "appearance,expanded,flipPlacements:,label,open,overlayPositioning,placement,scale;setFocus"],
   "calcite-action-pad": [() => import("./components/calcite-action-pad/customElement.js"), "actionsEndGroupLabel,expandDisabled,expanded,layout,messageOverrides:,overlayPositioning,position,scale;setFocus"],
@@ -31,8 +31,8 @@ const defineCustomElements = makeDefineCustomElements(runtime, {
   "calcite-color-picker": [() => import("./components/calcite-color-picker/customElement.js"), "allowEmpty,alphaChannel,channelsDisabled,clearable,color:,disabled,format,hexDisabled,messageOverrides:,numberingSystem,savedDisabled,scale,storageId,value;setFocus"],
   "calcite-color-picker-hex-input": [() => import("./components/calcite-color-picker-hex-input/customElement.js"), "allowEmpty,alphaChannel,hexLabel,messages:,numberingSystem,scale,value;setFocus"],
   "calcite-color-picker-swatch": [() => import("./components/calcite-color-picker-swatch/customElement.js"), "active,color,scale"],
-  "calcite-combobox": [() => import("./components/calcite-combobox/customElement.js"), "allowCustomValues,clearDisabled,disabled,filteredItems:,filterProps:,filterText,flipPlacements:,form,label,maxItems,messageOverrides:,name,open,overlayPositioning,placeholder,placeholderIcon,placeholderIconFlipRtl,readOnly,required,scale,selectedItems:,selectionDisplay,selectionMode,status,validationIcon,validationMessage,validity:,value;reposition,setFocus"],
-  "calcite-combobox-item": [() => import("./components/calcite-combobox-item/customElement.js"), "active,ancestors:,description,disabled,filterDisabled,filterTextMatchPattern:,guid,heading,icon,iconFlipRtl,itemHidden,label,metadata:,scale,selected,selectionMode,shortHeading,textLabel,value"],
+  "calcite-combobox": [() => import("./components/calcite-combobox/customElement.js"), "allowCustomValues,clearDisabled,disabled,filteredItems:,filterProps:,filterText,flipPlacements:,form,label,maxItems,messageOverrides:,name,open,overlayPositioning,placeholder,placeholderIcon,placeholderIconFlipRtl,readOnly,required,scale,selectAllEnabled,selectedItems:,selectionDisplay,selectionMode,status,validationIcon,validationMessage,validity:,value;reposition,setFocus"],
+  "calcite-combobox-item": [() => import("./components/calcite-combobox-item/customElement.js"), "active,ancestors:,description,disabled,filterDisabled,filterTextMatchPattern:,guid,heading,icon,iconFlipRtl,indeterminate,itemHidden,label,metadata:,scale,selected,selectionMode,shortHeading,textLabel,value"],
   "calcite-combobox-item-group": [() => import("./components/calcite-combobox-item-group/customElement.js"), "afterEmptyGroup,ancestors:,itemHidden,label,scale"],
   "calcite-date-picker": [() => import("./components/calcite-date-picker/customElement.js"), "activeDate:,activeRange,headingLevel,layout,max,maxAsDate:,messageOverrides:,min,minAsDate:,monthStyle,numberingSystem,proximitySelectionDisabled,range,scale,value,valueAsDate:;reset,setFocus"],
   "calcite-date-picker-day": [() => import("./components/calcite-date-picker-day/customElement.js"), "active,currentMonth,dateTimeFormat:,day,disabled,endOfRange,highlighted,range,rangeEdge,rangeHover,scale,selected,startOfRange,value:;setFocus"],
@@ -51,7 +51,7 @@ const defineCustomElements = makeDefineCustomElements(runtime, {
   "calcite-icon": [() => import("./components/calcite-icon/customElement.js"), "flipRtl,icon,preload,scale,textLabel"],
   "calcite-inline-editable": [() => import("./components/calcite-inline-editable/customElement.js"), "afterConfirm:,controls,disabled,editingEnabled,loading,messageOverrides:,scale;setFocus"],
   "calcite-input": [() => import("./components/calcite-input/customElement.js"), "accept,alignment,autocomplete:,clearable,disabled,editingEnabled,files:,form,groupSeparator,icon,iconFlipRtl,label,loading,localeFormat,max,maxLength,messageOverrides:,min,minLength,multiple,name,numberButtonType,numberingSystem,pattern,placeholder,prefixText,readOnly,required,scale,status,step,suffixText,type,validationIcon,validationMessage,validity:,value;selectText,setFocus"],
-  "calcite-input-date-picker": [() => import("./components/calcite-input-date-picker/customElement.js"), "disabled,flipPlacements:,focusTrapDisabled,form,headingLevel,layout,max,maxAsDate:,messageOverrides:,min,minAsDate:,monthStyle,name,numberingSystem,open,overlayPositioning,placement,proximitySelectionDisabled,range,readOnly,required,scale,status,validationIcon,validationMessage,validity:,value,valueAsDate:;reposition,setFocus"],
+  "calcite-input-date-picker": [() => import("./components/calcite-input-date-picker/customElement.js"), "disabled,flipPlacements:,focusTrapDisabled,form,headingLevel,label,layout,max,maxAsDate:,messageOverrides:,min,minAsDate:,monthStyle,name,numberingSystem,open,overlayPositioning,placement,proximitySelectionDisabled,range,readOnly,required,scale,status,validationIcon,validationMessage,validity:,value,valueAsDate:;reposition,setFocus"],
   "calcite-input-message": [() => import("./components/calcite-input-message/customElement.js"), "icon,iconFlipRtl,scale,status"],
   "calcite-input-number": [() => import("./components/calcite-input-number/customElement.js"), "alignment,autocomplete:,clearable,disabled,editingEnabled,form,groupSeparator,icon,iconFlipRtl,integer,label,loading,localeFormat,max,maxLength,messageOverrides:,min,minLength,name,numberButtonType,numberingSystem,placeholder,prefixText,readOnly,required,scale,status,step,suffixText,validationIcon,validationMessage,validity:,value;selectText,setFocus"],
   "calcite-input-text": [() => import("./components/calcite-input-text/customElement.js"), "alignment,autocomplete:,clearable,disabled,editingEnabled,form,icon,iconFlipRtl,label,loading,maxLength,messageOverrides:,minLength,name,pattern,placeholder,prefixText,readOnly,required,scale,status,suffixText,validationIcon,validationMessage,validity:,value;selectText,setFocus"],
@@ -66,7 +66,7 @@ const defineCustomElements = makeDefineCustomElements(runtime, {
   "calcite-menu": [() => import("./components/calcite-menu/customElement.js"), "label,layout,messageOverrides:;setFocus"],
   "calcite-menu-item": [() => import("./components/calcite-menu-item/customElement.js"), "active,breadcrumb,href,iconEnd,iconFlipRtl,iconStart,isTopLevelItem,label,layout,messageOverrides:,open,rel,target,text,topLevelMenuLayout;setFocus"],
   "calcite-meter": [() => import("./components/calcite-meter/customElement.js"), "appearance,disabled,fillType,form,groupSeparator,high,label,low,max,min,name,numberingSystem,rangeLabels,rangeLabelType,scale,unitLabel,value,valueLabel,valueLabelType"],
-  "calcite-modal": [() => import("./components/calcite-modal/customElement.js"), "beforeClose:,closeButtonDisabled,docked,escapeDisabled,focusTrapDisabled,focusTrapOptions:,fullscreen,kind,messageOverrides:,open,opened,outsideCloseDisabled,scale,widthScale;scrollContent,setFocus,updateFocusTrapElements"],
+  "calcite-modal": [() => import("./components/calcite-modal/customElement.js"), "beforeClose:,closeButtonDisabled,docked,embedded,escapeDisabled,focusTrapDisabled,focusTrapOptions:,fullscreen,kind,messageOverrides:,open,opened,outsideCloseDisabled,scale,widthScale;scrollContent,setFocus,updateFocusTrapElements"],
   "calcite-navigation": [() => import("./components/calcite-navigation/customElement.js"), "label,navigationAction;setFocus"],
   "calcite-navigation-logo": [() => import("./components/calcite-navigation-logo/customElement.js"), "active,description,heading,headingLevel,href,icon,iconFlipRtl,label,rel,target,thumbnail;setFocus"],
   "calcite-navigation-user": [() => import("./components/calcite-navigation-user/customElement.js"), "active,fullName,label,textDisabled,thumbnail,userId,username;setFocus"],

package/dist/types/lumina.d.ts

@@ -121,7 +121,7 @@ interface LuminaCalciteAccordionItem extends Partial<Pick<AccordionItem, 'descri
 interface LuminaCalciteAction extends Required<Pick<Action, 'text'>>, Partial<Pick<Action, 'active' | 'alignment' | 'appearance' | 'compact' | 'disabled' | 'icon' | 'iconFlipRtl' | 'indicator' | 'label' | 'loading' | 'messageOverrides' | 'scale' | 'textEnabled'>>, h.JSX.HTMLAttributes<HTMLCalciteActionElement> {
 }
 
-interface LuminaCalciteActionBar extends Partial<Pick<ActionBar, 'actionsEndGroupLabel' | 'expandDisabled' | 'expanded' | 'layout' | 'messageOverrides' | 'overflowActionsDisabled' | 'overlayPositioning' | 'position' | 'scale'>>, h.JSX.HTMLAttributes<HTMLCalciteActionBarElement> {
+interface LuminaCalciteActionBar extends Partial<Pick<ActionBar, 'actionsEndGroupLabel' | 'expandDisabled' | 'expanded' | 'floating' | 'layout' | 'messageOverrides' | 'overflowActionsDisabled' | 'overlayPositioning' | 'position' | 'scale'>>, h.JSX.HTMLAttributes<HTMLCalciteActionBarElement> {
   oncalciteActionBarToggle?: EventHandler<HTMLCalciteActionBarElement["calciteActionBarToggle"]>;
 }
 
@@ -232,7 +232,7 @@ interface LuminaCalciteColorPickerHexInput extends Partial<Pick<ColorPickerHexIn
 interface LuminaCalciteColorPickerSwatch extends Partial<Pick<ColorPickerSwatch, 'active' | 'color' | 'scale'>>, h.JSX.HTMLAttributes<HTMLCalciteColorPickerSwatchElement> {
 }
 
-interface LuminaCalciteCombobox extends Required<Pick<Combobox, 'label'>>, Partial<Pick<Combobox, 'allowCustomValues' | 'clearDisabled' | 'disabled' | 'filterProps' | 'filterText' | 'flipPlacements' | 'form' | 'maxItems' | 'messageOverrides' | 'name' | 'open' | 'overlayPositioning' | 'placeholder' | 'placeholderIcon' | 'placeholderIconFlipRtl' | 'readOnly' | 'required' | 'scale' | 'selectionDisplay' | 'selectionMode' | 'status' | 'validationIcon' | 'validationMessage' | 'value'>>, h.JSX.HTMLAttributes<HTMLCalciteComboboxElement> {
+interface LuminaCalciteCombobox extends Required<Pick<Combobox, 'label'>>, Partial<Pick<Combobox, 'allowCustomValues' | 'clearDisabled' | 'disabled' | 'filterProps' | 'filterText' | 'flipPlacements' | 'form' | 'maxItems' | 'messageOverrides' | 'name' | 'open' | 'overlayPositioning' | 'placeholder' | 'placeholderIcon' | 'placeholderIconFlipRtl' | 'readOnly' | 'required' | 'scale' | 'selectAllEnabled' | 'selectionDisplay' | 'selectionMode' | 'status' | 'validationIcon' | 'validationMessage' | 'value'>>, h.JSX.HTMLAttributes<HTMLCalciteComboboxElement> {
   oncalciteComboboxBeforeClose?: EventHandler<HTMLCalciteComboboxElement["calciteComboboxBeforeClose"]>;
   oncalciteComboboxBeforeOpen?: EventHandler<HTMLCalciteComboboxElement["calciteComboboxBeforeOpen"]>;
   oncalciteComboboxChange?: EventHandler<HTMLCalciteComboboxElement["calciteComboboxChange"]>;
@@ -324,7 +324,7 @@ interface LuminaCalciteInput extends Partial<Pick<Input, 'accept' | 'alignment'
   oncalciteInputInput?: EventHandler<HTMLCalciteInputElement["calciteInputInput"]>;
 }
 
-interface LuminaCalciteInputDatePicker extends Partial<Pick<InputDatePicker, 'disabled' | 'flipPlacements' | 'focusTrapDisabled' | 'form' | 'headingLevel' | 'layout' | 'max' | 'maxAsDate' | 'messageOverrides' | 'min' | 'minAsDate' | 'monthStyle' | 'name' | 'numberingSystem' | 'open' | 'overlayPositioning' | 'placement' | 'proximitySelectionDisabled' | 'range' | 'readOnly' | 'required' | 'scale' | 'status' | 'validationIcon' | 'validationMessage' | 'value' | 'valueAsDate'>>, h.JSX.HTMLAttributes<HTMLCalciteInputDatePickerElement> {
+interface LuminaCalciteInputDatePicker extends Partial<Pick<InputDatePicker, 'disabled' | 'flipPlacements' | 'focusTrapDisabled' | 'form' | 'headingLevel' | 'label' | 'layout' | 'max' | 'maxAsDate' | 'messageOverrides' | 'min' | 'minAsDate' | 'monthStyle' | 'name' | 'numberingSystem' | 'open' | 'overlayPositioning' | 'placement' | 'proximitySelectionDisabled' | 'range' | 'readOnly' | 'required' | 'scale' | 'status' | 'validationIcon' | 'validationMessage' | 'value' | 'valueAsDate'>>, h.JSX.HTMLAttributes<HTMLCalciteInputDatePickerElement> {
   oncalciteInputDatePickerBeforeClose?: EventHandler<HTMLCalciteInputDatePickerElement["calciteInputDatePickerBeforeClose"]>;
   oncalciteInputDatePickerBeforeOpen?: EventHandler<HTMLCalciteInputDatePickerElement["calciteInputDatePickerBeforeOpen"]>;
   oncalciteInputDatePickerChange?: EventHandler<HTMLCalciteInputDatePickerElement["calciteInputDatePickerChange"]>;

package/dist/types/preact.d.ts

@@ -122,7 +122,7 @@ interface PreactCalciteAccordionItem extends Partial<Pick<AccordionItem, 'descri
 interface PreactCalciteAction extends Required<Pick<Action, 'text'>>, Partial<Pick<Action, 'active' | 'alignment' | 'appearance' | 'compact' | 'disabled' | 'icon' | 'iconFlipRtl' | 'indicator' | 'label' | 'loading' | 'messageOverrides' | 'scale' | 'textEnabled'>>, PreactJsx.HTMLAttributes<HTMLCalciteActionElement> {
 }
 
-interface PreactCalciteActionBar extends Partial<Pick<ActionBar, 'actionsEndGroupLabel' | 'expandDisabled' | 'expanded' | 'layout' | 'messageOverrides' | 'overflowActionsDisabled' | 'overlayPositioning' | 'position' | 'scale'>>, PreactJsx.HTMLAttributes<HTMLCalciteActionBarElement> {
+interface PreactCalciteActionBar extends Partial<Pick<ActionBar, 'actionsEndGroupLabel' | 'expandDisabled' | 'expanded' | 'floating' | 'layout' | 'messageOverrides' | 'overflowActionsDisabled' | 'overlayPositioning' | 'position' | 'scale'>>, PreactJsx.HTMLAttributes<HTMLCalciteActionBarElement> {
   oncalciteActionBarToggle?: EventHandler<HTMLCalciteActionBarElement["calciteActionBarToggle"]>;
 }
 
@@ -233,7 +233,7 @@ interface PreactCalciteColorPickerHexInput extends Partial<Pick<ColorPickerHexIn
 interface PreactCalciteColorPickerSwatch extends Partial<Pick<ColorPickerSwatch, 'active' | 'color' | 'scale'>>, PreactJsx.HTMLAttributes<HTMLCalciteColorPickerSwatchElement> {
 }
 
-interface PreactCalciteCombobox extends Required<Pick<Combobox, 'label'>>, Partial<Pick<Combobox, 'allowCustomValues' | 'clearDisabled' | 'disabled' | 'filterProps' | 'filterText' | 'flipPlacements' | 'form' | 'maxItems' | 'messageOverrides' | 'name' | 'open' | 'overlayPositioning' | 'placeholder' | 'placeholderIcon' | 'placeholderIconFlipRtl' | 'readOnly' | 'required' | 'scale' | 'selectionDisplay' | 'selectionMode' | 'status' | 'validationIcon' | 'validationMessage' | 'value'>>, PreactJsx.HTMLAttributes<HTMLCalciteComboboxElement> {
+interface PreactCalciteCombobox extends Required<Pick<Combobox, 'label'>>, Partial<Pick<Combobox, 'allowCustomValues' | 'clearDisabled' | 'disabled' | 'filterProps' | 'filterText' | 'flipPlacements' | 'form' | 'maxItems' | 'messageOverrides' | 'name' | 'open' | 'overlayPositioning' | 'placeholder' | 'placeholderIcon' | 'placeholderIconFlipRtl' | 'readOnly' | 'required' | 'scale' | 'selectAllEnabled' | 'selectionDisplay' | 'selectionMode' | 'status' | 'validationIcon' | 'validationMessage' | 'value'>>, PreactJsx.HTMLAttributes<HTMLCalciteComboboxElement> {
   oncalciteComboboxBeforeClose?: EventHandler<HTMLCalciteComboboxElement["calciteComboboxBeforeClose"]>;
   oncalciteComboboxBeforeOpen?: EventHandler<HTMLCalciteComboboxElement["calciteComboboxBeforeOpen"]>;
   oncalciteComboboxChange?: EventHandler<HTMLCalciteComboboxElement["calciteComboboxChange"]>;
@@ -325,7 +325,7 @@ interface PreactCalciteInput extends Partial<Pick<Input, 'accept' | 'alignment'
   oncalciteInputInput?: EventHandler<HTMLCalciteInputElement["calciteInputInput"]>;
 }
 
-interface PreactCalciteInputDatePicker extends Partial<Pick<InputDatePicker, 'disabled' | 'flipPlacements' | 'focusTrapDisabled' | 'form' | 'headingLevel' | 'layout' | 'max' | 'maxAsDate' | 'messageOverrides' | 'min' | 'minAsDate' | 'monthStyle' | 'name' | 'numberingSystem' | 'open' | 'overlayPositioning' | 'placement' | 'proximitySelectionDisabled' | 'range' | 'readOnly' | 'required' | 'scale' | 'status' | 'validationIcon' | 'validationMessage' | 'value' | 'valueAsDate'>>, PreactJsx.HTMLAttributes<HTMLCalciteInputDatePickerElement> {
+interface PreactCalciteInputDatePicker extends Partial<Pick<InputDatePicker, 'disabled' | 'flipPlacements' | 'focusTrapDisabled' | 'form' | 'headingLevel' | 'label' | 'layout' | 'max' | 'maxAsDate' | 'messageOverrides' | 'min' | 'minAsDate' | 'monthStyle' | 'name' | 'numberingSystem' | 'open' | 'overlayPositioning' | 'placement' | 'proximitySelectionDisabled' | 'range' | 'readOnly' | 'required' | 'scale' | 'status' | 'validationIcon' | 'validationMessage' | 'value' | 'valueAsDate'>>, PreactJsx.HTMLAttributes<HTMLCalciteInputDatePickerElement> {
   oncalciteInputDatePickerBeforeClose?: EventHandler<HTMLCalciteInputDatePickerElement["calciteInputDatePickerBeforeClose"]>;
   oncalciteInputDatePickerBeforeOpen?: EventHandler<HTMLCalciteInputDatePickerElement["calciteInputDatePickerBeforeOpen"]>;
   oncalciteInputDatePickerChange?: EventHandler<HTMLCalciteInputDatePickerElement["calciteInputDatePickerChange"]>;

package/dist/types/react.d.ts

@@ -122,7 +122,7 @@ interface ReactCalciteAccordionItem extends Partial<Pick<AccordionItem, 'descrip
 interface ReactCalciteAction extends Required<Pick<Action, 'text'>>, Partial<Pick<Action, 'active' | 'alignment' | 'appearance' | 'compact' | 'disabled' | 'icon' | 'iconFlipRtl' | 'indicator' | 'label' | 'loading' | 'messageOverrides' | 'scale' | 'textEnabled'>>, HTMLProps<HTMLCalciteActionElement> {
 }
 
-interface ReactCalciteActionBar extends Partial<Pick<ActionBar, 'actionsEndGroupLabel' | 'expandDisabled' | 'expanded' | 'layout' | 'messageOverrides' | 'overflowActionsDisabled' | 'overlayPositioning' | 'position' | 'scale'>>, HTMLProps<HTMLCalciteActionBarElement> {
+interface ReactCalciteActionBar extends Partial<Pick<ActionBar, 'actionsEndGroupLabel' | 'expandDisabled' | 'expanded' | 'floating' | 'layout' | 'messageOverrides' | 'overflowActionsDisabled' | 'overlayPositioning' | 'position' | 'scale'>>, HTMLProps<HTMLCalciteActionBarElement> {
   oncalciteActionBarToggle?: EventHandler<HTMLCalciteActionBarElement["calciteActionBarToggle"]>;
 }
 
@@ -233,7 +233,7 @@ interface ReactCalciteColorPickerHexInput extends Partial<Pick<ColorPickerHexInp
 interface ReactCalciteColorPickerSwatch extends Partial<Pick<ColorPickerSwatch, 'active' | 'color' | 'scale'>>, HTMLProps<HTMLCalciteColorPickerSwatchElement> {
 }
 
-interface ReactCalciteCombobox extends Required<Pick<Combobox, 'label'>>, Partial<Pick<Combobox, 'allowCustomValues' | 'clearDisabled' | 'disabled' | 'filterProps' | 'filterText' | 'flipPlacements' | 'form' | 'maxItems' | 'messageOverrides' | 'name' | 'open' | 'overlayPositioning' | 'placeholder' | 'placeholderIcon' | 'placeholderIconFlipRtl' | 'readOnly' | 'required' | 'scale' | 'selectionDisplay' | 'selectionMode' | 'status' | 'validationIcon' | 'validationMessage' | 'value'>>, HTMLProps<HTMLCalciteComboboxElement> {
+interface ReactCalciteCombobox extends Required<Pick<Combobox, 'label'>>, Partial<Pick<Combobox, 'allowCustomValues' | 'clearDisabled' | 'disabled' | 'filterProps' | 'filterText' | 'flipPlacements' | 'form' | 'maxItems' | 'messageOverrides' | 'name' | 'open' | 'overlayPositioning' | 'placeholder' | 'placeholderIcon' | 'placeholderIconFlipRtl' | 'readOnly' | 'required' | 'scale' | 'selectAllEnabled' | 'selectionDisplay' | 'selectionMode' | 'status' | 'validationIcon' | 'validationMessage' | 'value'>>, HTMLProps<HTMLCalciteComboboxElement> {
   oncalciteComboboxBeforeClose?: EventHandler<HTMLCalciteComboboxElement["calciteComboboxBeforeClose"]>;
   oncalciteComboboxBeforeOpen?: EventHandler<HTMLCalciteComboboxElement["calciteComboboxBeforeOpen"]>;
   oncalciteComboboxChange?: EventHandler<HTMLCalciteComboboxElement["calciteComboboxChange"]>;
@@ -325,7 +325,7 @@ interface ReactCalciteInput extends Partial<Pick<Input, 'accept' | 'alignment' |
   oncalciteInputInput?: EventHandler<HTMLCalciteInputElement["calciteInputInput"]>;
 }
 
-interface ReactCalciteInputDatePicker extends Partial<Pick<InputDatePicker, 'disabled' | 'flipPlacements' | 'focusTrapDisabled' | 'form' | 'headingLevel' | 'layout' | 'max' | 'maxAsDate' | 'messageOverrides' | 'min' | 'minAsDate' | 'monthStyle' | 'name' | 'numberingSystem' | 'open' | 'overlayPositioning' | 'placement' | 'proximitySelectionDisabled' | 'range' | 'readOnly' | 'required' | 'scale' | 'status' | 'validationIcon' | 'validationMessage' | 'value' | 'valueAsDate'>>, HTMLProps<HTMLCalciteInputDatePickerElement> {
+interface ReactCalciteInputDatePicker extends Partial<Pick<InputDatePicker, 'disabled' | 'flipPlacements' | 'focusTrapDisabled' | 'form' | 'headingLevel' | 'label' | 'layout' | 'max' | 'maxAsDate' | 'messageOverrides' | 'min' | 'minAsDate' | 'monthStyle' | 'name' | 'numberingSystem' | 'open' | 'overlayPositioning' | 'placement' | 'proximitySelectionDisabled' | 'range' | 'readOnly' | 'required' | 'scale' | 'status' | 'validationIcon' | 'validationMessage' | 'value' | 'valueAsDate'>>, HTMLProps<HTMLCalciteInputDatePickerElement> {
   oncalciteInputDatePickerBeforeClose?: EventHandler<HTMLCalciteInputDatePickerElement["calciteInputDatePickerBeforeClose"]>;
   oncalciteInputDatePickerBeforeOpen?: EventHandler<HTMLCalciteInputDatePickerElement["calciteInputDatePickerBeforeOpen"]>;
   oncalciteInputDatePickerChange?: EventHandler<HTMLCalciteInputDatePickerElement["calciteInputDatePickerChange"]>;

package/dist/types/stencil.d.ts

@@ -122,7 +122,7 @@ interface StencilCalciteAccordionItem extends Partial<Pick<AccordionItem, 'descr
 interface StencilCalciteAction extends Required<Pick<Action, 'text'>>, Partial<Pick<Action, 'active' | 'alignment' | 'appearance' | 'compact' | 'disabled' | 'icon' | 'iconFlipRtl' | 'indicator' | 'label' | 'loading' | 'messageOverrides' | 'scale' | 'textEnabled'>>, StencilJsx.HTMLAttributes<HTMLCalciteActionElement> {
 }
 
-interface StencilCalciteActionBar extends Partial<Pick<ActionBar, 'actionsEndGroupLabel' | 'expandDisabled' | 'expanded' | 'layout' | 'messageOverrides' | 'overflowActionsDisabled' | 'overlayPositioning' | 'position' | 'scale'>>, StencilJsx.HTMLAttributes<HTMLCalciteActionBarElement> {
+interface StencilCalciteActionBar extends Partial<Pick<ActionBar, 'actionsEndGroupLabel' | 'expandDisabled' | 'expanded' | 'floating' | 'layout' | 'messageOverrides' | 'overflowActionsDisabled' | 'overlayPositioning' | 'position' | 'scale'>>, StencilJsx.HTMLAttributes<HTMLCalciteActionBarElement> {
   onCalciteActionBarToggle?: EventHandler<HTMLCalciteActionBarElement["calciteActionBarToggle"]>;
 }
 
@@ -233,7 +233,7 @@ interface StencilCalciteColorPickerHexInput extends Partial<Pick<ColorPickerHexI
 interface StencilCalciteColorPickerSwatch extends Partial<Pick<ColorPickerSwatch, 'active' | 'color' | 'scale'>>, StencilJsx.HTMLAttributes<HTMLCalciteColorPickerSwatchElement> {
 }
 
-interface StencilCalciteCombobox extends Required<Pick<Combobox, 'label'>>, Partial<Pick<Combobox, 'allowCustomValues' | 'clearDisabled' | 'disabled' | 'filterProps' | 'filterText' | 'flipPlacements' | 'form' | 'maxItems' | 'messageOverrides' | 'name' | 'open' | 'overlayPositioning' | 'placeholder' | 'placeholderIcon' | 'placeholderIconFlipRtl' | 'readOnly' | 'required' | 'scale' | 'selectionDisplay' | 'selectionMode' | 'status' | 'validationIcon' | 'validationMessage' | 'value'>>, StencilJsx.HTMLAttributes<HTMLCalciteComboboxElement> {
+interface StencilCalciteCombobox extends Required<Pick<Combobox, 'label'>>, Partial<Pick<Combobox, 'allowCustomValues' | 'clearDisabled' | 'disabled' | 'filterProps' | 'filterText' | 'flipPlacements' | 'form' | 'maxItems' | 'messageOverrides' | 'name' | 'open' | 'overlayPositioning' | 'placeholder' | 'placeholderIcon' | 'placeholderIconFlipRtl' | 'readOnly' | 'required' | 'scale' | 'selectAllEnabled' | 'selectionDisplay' | 'selectionMode' | 'status' | 'validationIcon' | 'validationMessage' | 'value'>>, StencilJsx.HTMLAttributes<HTMLCalciteComboboxElement> {
   onCalciteComboboxBeforeClose?: EventHandler<HTMLCalciteComboboxElement["calciteComboboxBeforeClose"]>;
   onCalciteComboboxBeforeOpen?: EventHandler<HTMLCalciteComboboxElement["calciteComboboxBeforeOpen"]>;
   onCalciteComboboxChange?: EventHandler<HTMLCalciteComboboxElement["calciteComboboxChange"]>;
@@ -325,7 +325,7 @@ interface StencilCalciteInput extends Partial<Pick<Input, 'accept' | 'alignment'
   onCalciteInputInput?: EventHandler<HTMLCalciteInputElement["calciteInputInput"]>;
 }
 
-interface StencilCalciteInputDatePicker extends Partial<Pick<InputDatePicker, 'disabled' | 'flipPlacements' | 'focusTrapDisabled' | 'form' | 'headingLevel' | 'layout' | 'max' | 'maxAsDate' | 'messageOverrides' | 'min' | 'minAsDate' | 'monthStyle' | 'name' | 'numberingSystem' | 'open' | 'overlayPositioning' | 'placement' | 'proximitySelectionDisabled' | 'range' | 'readOnly' | 'required' | 'scale' | 'status' | 'validationIcon' | 'validationMessage' | 'value' | 'valueAsDate'>>, StencilJsx.HTMLAttributes<HTMLCalciteInputDatePickerElement> {
+interface StencilCalciteInputDatePicker extends Partial<Pick<InputDatePicker, 'disabled' | 'flipPlacements' | 'focusTrapDisabled' | 'form' | 'headingLevel' | 'label' | 'layout' | 'max' | 'maxAsDate' | 'messageOverrides' | 'min' | 'minAsDate' | 'monthStyle' | 'name' | 'numberingSystem' | 'open' | 'overlayPositioning' | 'placement' | 'proximitySelectionDisabled' | 'range' | 'readOnly' | 'required' | 'scale' | 'status' | 'validationIcon' | 'validationMessage' | 'value' | 'valueAsDate'>>, StencilJsx.HTMLAttributes<HTMLCalciteInputDatePickerElement> {
   onCalciteInputDatePickerBeforeClose?: EventHandler<HTMLCalciteInputDatePickerElement["calciteInputDatePickerBeforeClose"]>;
   onCalciteInputDatePickerBeforeOpen?: EventHandler<HTMLCalciteInputDatePickerElement["calciteInputDatePickerBeforeOpen"]>;
   onCalciteInputDatePickerChange?: EventHandler<HTMLCalciteInputDatePickerElement["calciteInputDatePickerChange"]>;

package/dist/utils/dom.d.ts

@@ -349,10 +349,15 @@ type TransitionOrAnimation = "transition" | "animation";
  */
 export declare function whenTransitionOrAnimationDone(targetEl: HTMLElement, transitionPropOrAnimationName: string, type: TransitionOrAnimation, onStart?: () => void, onEnd?: () => void): Promise<void>;
 /**
- * This util helps determine when a string value is a pixel value.
+ * This helper converts a CSS style value (e.g., "px", "vw", "vh") into its pixel equivalent.
  *
- * @param value The value to check.
- * @returns {boolean} Whether the value is a pixel value.
+ * - If the value ends with "px", it parses and returns the numeric value.
+ * - If the value ends with "vw", it calculates the pixel value based on the viewport width.
+ * - If the value ends with "vh", it calculates the pixel value based on the viewport height.
+ * - For unsupported units or invalid values, it returns 0.
+ *
+ * @param {string} value - The CSS style value to convert (e.g., "10px", "50vw", "30vh").
+ * @returns {number} The pixel equivalent of the provided value.
  */
-export declare function isPixelValue(value: string): boolean;
+export declare function getStylePixelValue(value: string): number;
 export {};