@esri/calcite-components 5.0.0-next.3 → 5.0.0-next.31

package/dist/docs/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@esri/calcite-components",
-  "version": "5.0.0-next.3",
+  "version": "5.0.0-next.31",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -109,7 +109,7 @@
         },
         {
           "name": "calcite-accordion-item",
-          "description": "### Events\n- **calciteAccordionItemCollapse** - Fires when the component's content area is collapsed.\n- **calciteAccordionItemExpand** - Fires when the component's content area is expanded.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding custom content, including nested `calcite-accordion-item`s.\n- **actions-end** - A slot for adding `calcite-action`s or content to the end side of the component's header.\n- **actions-start** - A slot for adding `calcite-action`s or content to the start side of the component's header.\n- **content-end** - A slot for adding non-actionable elements after the component's header text.\n- **content-start** - A slot for adding non-actionable elements before the component's header text.\n\n### CSS Properties\n- **--calcite-accordion-border-color** - Specifies the component's border color. \n- **--calcite-accordion-background-color** - Specifies the component's background color. \n- **--calcite-accordion-text-color** - Specifies the component's text color. \n- **--calcite-accordion-text-color-hover** - Specifies the component's main text color on hover. \n- **--calcite-accordion-text-color-press** - Specifies the component's main text color when pressed. \n- **--calcite-accordion-item-background-color** - [Deprecated] Use `--calcite-accordion-background-color`. Specifies the component's background color. \n- **--calcite-accordion-item-border-color** - [Deprecated] Use `--calcite-accordion-border-color`. Specifies the component's border color. \n- **--calcite-accordion-item-content-space** - Specifies the component's padding. \n- **--calcite-accordion-item-end-icon-color** - Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color. \n- **--calcite-accordion-item-expand-icon-color** - Specifies the component's expand icon color. \n- **--calcite-accordion-item-header-background-color** - Specifies the component's `heading` background color. \n- **--calcite-accordion-item-header-background-color-hover** - Specifies the component's `heading` background color when hovered. \n- **--calcite-accordion-item-header-background-color-press** - Specifies the component's `heading` background color when pressed. \n- **--calcite-accordion-item-heading-text-color** - Specifies the component's `heading` text color. \n- **--calcite-accordion-item-icon-color** - [Deprecated] Use `--calcite-icon-color`. Specifies the component's default icon color. \n- **--calcite-accordion-item-start-icon-color** - Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color. \n- **--calcite-accordion-item-text-color** - [Deprecated] Use `--calcite-accordion-text-color`. Specifies the component's text color. \n- **--calcite-accordion-item-text-color-hover** - [Deprecated] Use `--calcite-accordion-text-color-hover`. Specifies the component's text color on hover. \n- **--calcite-accordion-item-text-color-press** - [Deprecated] Use `--calcite-accordion-text-color-press`. Specifies the component's text color on press. ",
+          "description": "### Events\n- **calciteAccordionItemCollapse** - Fires when the component's content area is collapsed.\n- **calciteAccordionItemExpand** - Fires when the component's content area is expanded.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding custom content, including nested `calcite-accordion-item`s.\n- **actions-end** - A slot for adding `calcite-action`s or content to the end side of the component's header.\n- **actions-start** - A slot for adding `calcite-action`s or content to the start side of the component's header.\n- **content-end** - A slot for adding non-actionable elements after the component's header text.\n- **content-start** - A slot for adding non-actionable elements before the component's header text.\n\n### CSS Properties\n- **--calcite-accordion-border-color** - Specifies the component's border color. \n- **--calcite-accordion-background-color** - Specifies the component's background color. \n- **--calcite-accordion-text-color** - Specifies the component's text color. \n- **--calcite-accordion-text-color-hover** - Specifies the component's main text color on hover. \n- **--calcite-accordion-text-color-press** - Specifies the component's main text color when pressed. \n- **--calcite-accordion-item-background-color** - [Deprecated] Use `--calcite-accordion-background-color`. Specifies the component's background color. \n- **--calcite-accordion-item-border-color** - [Deprecated] Use `--calcite-accordion-border-color`. Specifies the component's border color. \n- **--calcite-accordion-item-content-space** - Specifies the component's padding. \n- **--calcite-accordion-item-end-icon-color** - Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color. \n- **--calcite-accordion-item-expand-icon-color** - Specifies the component's expand icon color. \n- **--calcite-accordion-item-header-background-color** - Specifies the component's `heading` background color. \n- **--calcite-accordion-item-header-background-color-hover** - Specifies the component's `heading` background color when hovered. \n- **--calcite-accordion-item-header-background-color-press** - Specifies the component's `heading` background color when pressed. \n- **--calcite-accordion-item-heading-text-color** - Specifies the component's `heading` text color. \n- **--calcite-accordion-item-icon-color** - [Deprecated] Use `--calcite-icon-color`. Specifies the component's default icon color. \n- **--calcite-accordion-item-start-icon-color** - Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color. \n- **--calcite-accordion-item-text-color** - [Deprecated] Use `--calcite-accordion-text-color`. Specifies the component's text color. \n- **--calcite-accordion-item-text-color-hover** - [Deprecated] Use `--calcite-accordion-text-color-hover`. Specifies the component's text color on hover. ",
           "attributes": [
             {
               "name": "description",
@@ -286,7 +286,7 @@
             {
               "name": "appearance",
               "description": "Specifies the appearance of the component.",
-              "default": "\"solid\"",
+              "default": "\"transparent\"",
               "value": {
                 "type": [
                   "\"solid\"",
@@ -420,7 +420,7 @@
               {
                 "name": "aria",
                 "description": "Use this property to override or extend ARIA properties and attributes on the component's button.",
-                "type": "{\n    controlsElements?: Array<Element>;\n    describedByElements?: Array<Element>;\n    expanded?: boolean | \"true\" | \"false\";\n    hasPopup?: boolean | \"grid\" | \"tree\" | \"dialog\" | \"menu\" | \"true\" | \"false\" | \"listbox\";\n    labelledByElements?: Array<Element>;\n    ownsElements?: Array<Element>;\n    pressed?: boolean | \"true\" | \"false\" | \"mixed\";\n}"
+                "type": "{\n    checked?: boolean | \"true\" | \"false\" | \"mixed\";\n    controlsElements?: Array<Element>;\n    describedByElements?: Array<Element>;\n    expanded?: boolean | \"true\" | \"false\";\n    hasPopup?: boolean | \"grid\" | \"tree\" | \"dialog\" | \"menu\" | \"true\" | \"false\" | \"listbox\";\n    labelledByElements?: Array<Element>;\n    ownsElements?: Array<Element>;\n    pressed?: boolean | \"true\" | \"false\" | \"mixed\";\n    role?: \"grid\" | \"none\" | \"search\" | \"link\" | \"article\" | \"button\" | \"group\" | \"heading\" | \"list\" | \"presentation\" | \"separator\" | \"switch\" | \"table\" | \"timer\" | \"tree\" | \"meter\" | \"alert\" | \"application\" | \"log\" | \"main\" | \"figure\" | \"document\" | \"form\" | \"note\" | \"slider\" | \"row\" | \"tab\" | \"term\" | \"dialog\" | \"img\" | \"menu\" | \"option\" | \"math\" | \"marquee\" | \"menuitem\" | \"status\" | \"combobox\" | \"tooltip\" | \"checkbox\" | \"navigation\" | \"gridcell\" | \"menuitemcheckbox\" | \"menuitemradio\" | \"progressbar\" | \"radio\" | \"scrollbar\" | \"searchbox\" | \"spinbutton\" | \"tabpanel\" | \"textbox\" | \"treeitem\" | \"listbox\" | \"menubar\" | \"radiogroup\" | \"tablist\" | \"treegrid\" | \"cell\" | \"columnheader\" | \"definition\" | \"directory\" | \"feed\" | \"listitem\" | \"rowgroup\" | \"rowheader\" | \"toolbar\" | \"banner\" | \"complementary\" | \"contentinfo\" | \"region\" | \"alertdialog\";\n}"
               },
               {
                 "name": "compact",
@@ -701,7 +701,7 @@
         },
         {
           "name": "calcite-action-group",
-          "description": "### Events\n- **calciteActionGroupCollapse** - Fires when the component's content area is collapsed.\n- **calciteActionGroupExpand** - Fires when the component's content area is expanded.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding a group of `calcite-action`s.\n- **menu-actions** - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.\n- **menu-tooltip** - A slot for adding a `calcite-tooltip` for the menu.\n\n### CSS Properties\n- **--calcite-action-background-color** - Specifies the component's background color. \n- **--calcite-action-group-border-color** - Specifies the component's border color when used in a `calcite-action-bar` or `calcite-action-menu`. \n- **--calcite-action-group-columns** - When `layout` is `\"grid\"`, specifies the component's grid-template-columns. \n- **--calcite-action-group-gap** - When `layout` is `\"grid\"`, specifies the component's gap. \n- **--calcite-action-group-padding** - [Deprecated] Use `--calcite-action-group-gap`. Specifies the component's padding. ",
+          "description": "### Events\n- **calciteActionGroupCollapse** - Fires when the component's content area is collapsed.\n- **calciteActionGroupExpand** - Fires when the component's content area is expanded.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding a group of `calcite-action`s.\n- **menu-actions** - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.\n- **menu-tooltip** - A slot for adding a `calcite-tooltip` for the menu.\n\n### CSS Properties\n- **--calcite-action-background-color** - Specifies the component's background color. \n- **--calcite-action-group-border-color** - Specifies the component's border color when used in a `calcite-action-bar` or `calcite-action-menu`. \n- **--calcite-action-group-columns** - When `layout` is `\"grid\"`, specifies the component's grid-template-columns. \n- **--calcite-action-group-gap** - When `layout` is `\"grid\"`, specifies the component's gap. ",
           "attributes": [
             {
               "name": "columns",
@@ -803,6 +803,19 @@
                   "\"s\""
                 ]
               }
+            },
+            {
+              "name": "selection-mode",
+              "description": "Specifies the selection mode of the component, where:\n\n`\"multiple\"` allows any number of selections,\n\n`\"single\"` allows only one selection, and\n\n`\"single-persist\"` allows one selection and prevents de-selection.\n\n`\"none\"` disables selection (default).",
+              "default": "\"none\"",
+              "value": {
+                "type": [
+                  "\"multiple\"",
+                  "\"none\"",
+                  "\"single\"",
+                  "\"single-persist\""
+                ]
+              }
             }
           ],
           "slots": [
@@ -882,6 +895,11 @@
                 "name": "scale",
                 "description": "Specifies the size of the `calcite-action-menu`.",
                 "type": "\"l\" | \"m\" | \"s\""
+              },
+              {
+                "name": "selectionMode",
+                "description": "Specifies the selection mode of the component, where:\n\n`\"multiple\"` allows any number of selections,\n\n`\"single\"` allows only one selection, and\n\n`\"single-persist\"` allows one selection and prevents de-selection.\n\n`\"none\"` disables selection (default).",
+                "type": "\"multiple\" | \"none\" | \"single\" | \"single-persist\""
               }
             ],
             "events": [
@@ -2251,7 +2269,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- **calciteBlockCollapse** - Fires when the component's content area is collapsed.\n- **calciteBlockExpand** - Fires when the component's content area is expanded.\n- **calciteBlockOpen** - Fires when the component is open and animation is complete.\n- **calciteBlockSortHandleBeforeClose** - Fires when the sort handle is requested to be closed and before the closing transition begins.\n- **calciteBlockSortHandleBeforeOpen** - Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteBlockSortHandleClose** - Fires when the sort handle is closed and animation is complete.\n- **calciteBlockSortHandleOpen** - Fires when the sort handle is open and animation is complete.\n- **calciteBlockToggle** - Fires when the component's header is clicked.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first tabbable element.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **actions-end** - A slot for adding actionable `calcite-action` elements after the content of the component. It is recommended to use two or fewer actions.\n- **content-start** - A slot for adding non-actionable elements before content of the component.\n- **header-menu-actions** - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu.\n\n### CSS Properties\n- **--calcite-block-border-color** - Specifies the component's border color. \n- **--calcite-block-content-space** - Specifies the space of the component's `default` slot. \n- **--calcite-block-header-background-color** - Specifies the component's `heading` background color. \n- **--calcite-block-header-background-color-hover** - Specifies the component's `heading` background color when hovered. \n- **--calcite-block-header-background-color-press** - Specifies the component's `heading` background color when pressed. \n- **--calcite-block-heading-text-color** - Specifies the component's `heading` text color. \n- **--calcite-block-heading-text-color-press** - [Deprecated]  use `--calcite-block-heading-text-color` instead - When the component is `expanded`, specifies the `heading` text color. \n- **--calcite-block-padding** - [Deprecated] use `--calcite-block-content-space` instead - Specifies the padding of the component's `default` slot. \n- **--calcite-block-text-color** - [Deprecated] Specifies the component's text color. \n- **--calcite-block-description-text-color** - Specifies the component's `description` text color. \n- **--calcite-block-icon-color** - Specifies the component's `collapsible` icon, `iconStart` and `iconEnd` color. \n- **--calcite-block-icon-color-hover** - Specifies the component's `collapsible` icon color when hovered. ",
+          "description": "### Events\n- **calciteBlockBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteBlockBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteBlockClose** - Fires when the component is closed and animation is complete.\n- **calciteBlockCollapse** - Fires when the component's content area is collapsed.\n- **calciteBlockExpand** - Fires when the component's content area is expanded.\n- **calciteBlockOpen** - Fires when the component is open and animation is complete.\n- **calciteBlockSortHandleBeforeClose** - Fires when the sort handle is requested to be closed and before the closing transition begins.\n- **calciteBlockSortHandleBeforeOpen** - Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteBlockSortHandleClose** - Fires when the sort handle is closed and animation is complete.\n- **calciteBlockSortHandleOpen** - Fires when the sort handle is open and animation is complete.\n- **calciteBlockToggle** - Fires when the component's header is clicked.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first tabbable element.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **actions-end** - A slot for adding actionable `calcite-action` elements after the content of the component. It is recommended to use two or fewer actions.\n- **content-end** - A slot for adding non-actionable elements after content of the component.\n- **content-start** - A slot for adding non-actionable elements before content of the component.\n- **header-menu-actions** - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu.\n\n### CSS Properties\n- **--calcite-block-border-color** - Specifies the component's border color. \n- **--calcite-block-content-space** - Specifies the space of the component's `default` slot. \n- **--calcite-block-header-background-color** - Specifies the component's `heading` background color. \n- **--calcite-block-header-background-color-hover** - Specifies the component's `heading` background color when hovered. \n- **--calcite-block-header-background-color-press** - Specifies the component's `heading` background color when pressed. \n- **--calcite-block-heading-text-color** - Specifies the component's `heading` text color. \n- **--calcite-block-heading-text-color-press** - [Deprecated]  use `--calcite-block-heading-text-color` instead - When the component is `expanded`, specifies the `heading` text color. \n- **--calcite-block-padding** - [Deprecated] use `--calcite-block-content-space` instead - Specifies the padding of the component's `default` slot. \n- **--calcite-block-text-color** - [Deprecated] Specifies the component's text color. \n- **--calcite-block-description-text-color** - Specifies the component's `description` text color. \n- **--calcite-block-icon-color** - Specifies the component's `collapsible` icon, `iconStart` and `iconEnd` color. \n- **--calcite-block-icon-color-hover** - Specifies the component's `collapsible` icon color when hovered. ",
           "attributes": [
             {
               "name": "collapsible",
@@ -2447,6 +2465,10 @@
               "name": "actions-end",
               "description": "A slot for adding actionable `calcite-action` elements after the content of the component. It is recommended to use two or fewer actions."
             },
+            {
+              "name": "content-end",
+              "description": "A slot for adding non-actionable elements after content of the component."
+            },
             {
               "name": "content-start",
               "description": "A slot for adding non-actionable elements before content of the component."
@@ -3023,7 +3045,7 @@
         },
         {
           "name": "calcite-button",
-          "description": "Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this.\n\nIt is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission\n--\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding text.\n\n### CSS Properties\n- **--calcite-button-background-color** - Specifies the component's background color. \n- **--calcite-button-border-color** - Specifies the component's border color. \n- **--calcite-button-corner-radius** - Specifies the component's corner radius. \n- **--calcite-button-icon-color** - Specifies the component's `iconStart` and `iconEnd` color. \n- **--calcite-button-loader-color** - Specifies the component's loader color. \n- **--calcite-button-shadow-color** - [Deprecated] Use `--calcite-button-shadow`. Specifies the component's box-shadow color. \n- **--calcite-button-text-color** - Specifies the component's text color. \n- **--calcite-button-shadow** - Specifies the component's shadow. ",
+          "description": "Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this.\n\nIt is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission\n--\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding text.\n\n### CSS Properties\n- **--calcite-button-background-color** - Specifies the component's background color. \n- **--calcite-button-border-color** - Specifies the component's border color. \n- **--calcite-button-corner-radius** - Specifies the component's corner radius. \n- **--calcite-button-icon-color** - Specifies the component's `iconStart` and `iconEnd` color. \n- **--calcite-button-loader-color** - Specifies the component's loader color. \n- **--calcite-button-text-color** - Specifies the component's text color. \n- **--calcite-button-shadow** - Specifies the component's shadow. ",
           "attributes": [
             {
               "name": "alignment",
@@ -3333,7 +3355,7 @@
         },
         {
           "name": "calcite-card",
-          "description": "### Events\n- **calciteCardSelect** - Fires when the deprecated `selectable` is true, or `selectionMode` set on parent `calcite-card-group` is not `none` and the component is selected.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding content.\n- **thumbnail** - A slot for adding a thumbnail.\n- **heading** - A slot for adding a heading.\n- **description** - A slot for adding a description.\n- **footer-start** - A slot for adding a leading footer.\n- **footer-end** - A slot for adding a trailing footer.\n\n### CSS Properties\n- **--calcite-card-accent-color-selected** - Specifies the component's accent color when `selected`. \n- **--calcite-card-background-color** - Specifies the component's background color. \n- **--calcite-card-border-color** - Specifies the component's border color. \n- **--calcite-card-corner-radius** - Specifies the component's corner radius. \n- **--calcite-card-selection-background-color-active** - [Deprecated] Use `--calcite-card-selection-background-color-press`. Specifies the component's selection element background color when active. \n- **--calcite-card-selection-background-color-hover** - Specifies the component's selection element background color when hovered. \n- **--calcite-card-selection-background-color-press** - Specifies the component's selection element background color when active. \n- **--calcite-card-selection-background-color-selected** - [Deprecated] Use `--calcite-card-background-color`. Specifies the component's selection element icon color when `selected`. \n- **--calcite-card-selection-background-color** - [Deprecated] Use `--calcite-card-background-color`. Specifies the component's selection element background color. \n- **--calcite-card-selection-color-hover** - Specifies the component's selection element color when hovered or focused. \n- **--calcite-card-selection-color** - Specifies the component's selection element color. \n- **--calcite-card-selection-icon-color-hover** - [Deprecated] Use `--calcite-card-selection-color-hover`. Specifies the component's selection element icon color when hovered. \n- **--calcite-card-selection-icon-color-selected** - [Deprecated] Use `--calcite-card-accent-color-selected`. Specifies the component's selection element icon color when `selected`. \n- **--calcite-card-selection-icon-color** - [Deprecated] Use `--calcite-card-selection-color`. Specifies the component's selection element icon color. \n- **--calcite-card-shadow** - Specifies the component's shadow. ",
+          "description": "### Events\n- **calciteCardSelect** - Fires when the deprecated `selectable` is true, or `selectionMode` set on parent `calcite-card-group` is not `none` and the component is selected.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding content.\n- **thumbnail** - A slot for adding a thumbnail.\n- **heading** - A slot for adding a heading.\n- **description** - A slot for adding a description.\n- **footer-start** - A slot for adding a leading footer.\n- **footer-end** - A slot for adding a trailing footer.\n\n### CSS Properties\n- **--calcite-card-accent-color-selected** - Specifies the component's accent color when `selected`. \n- **--calcite-card-background-color** - Specifies the component's background color. \n- **--calcite-card-border-color** - Specifies the component's border color. \n- **--calcite-card-corner-radius** - Specifies the component's corner radius. \n- **--calcite-card-selection-background-color-hover** - Specifies the component's selection element background color when hovered. \n- **--calcite-card-selection-background-color-press** - Specifies the component's selection element background color when active. \n- **--calcite-card-selection-background-color** - [Deprecated] Use `--calcite-card-background-color`. Specifies the component's selection element background color. \n- **--calcite-card-selection-color-hover** - Specifies the component's selection element color when hovered or focused. \n- **--calcite-card-selection-color** - Specifies the component's selection element color. \n- **--calcite-card-selection-icon-color-hover** - [Deprecated] Use `--calcite-card-selection-color-hover`. Specifies the component's selection element icon color when hovered. \n- **--calcite-card-selection-icon-color-selected** - [Deprecated] Use `--calcite-card-accent-color-selected`. Specifies the component's selection element icon color when `selected`. \n- **--calcite-card-shadow** - Specifies the component's shadow. ",
           "attributes": [
             {
               "name": "disabled",
@@ -4727,6 +4749,36 @@
                 "type": "boolean"
               }
             },
+            {
+              "name": "placement",
+              "description": "Determines where the component will be positioned relative to the `referenceElement`.",
+              "default": "\"bottom-start\"",
+              "value": {
+                "type": [
+                  "\"auto\"",
+                  "\"auto-end\"",
+                  "\"auto-start\"",
+                  "\"bottom\"",
+                  "\"bottom-end\"",
+                  "\"bottom-start\"",
+                  "\"leading\"",
+                  "\"leading-end\"",
+                  "\"leading-start\"",
+                  "\"left\"",
+                  "\"left-end\"",
+                  "\"left-start\"",
+                  "\"right\"",
+                  "\"right-end\"",
+                  "\"right-start\"",
+                  "\"top\"",
+                  "\"top-end\"",
+                  "\"top-start\"",
+                  "\"trailing\"",
+                  "\"trailing-end\"",
+                  "\"trailing-start\""
+                ]
+              }
+            },
             {
               "name": "read-only",
               "description": "When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.",
@@ -4961,6 +5013,11 @@
                 "description": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).",
                 "type": "boolean"
               },
+              {
+                "name": "placement",
+                "description": "Determines where the component will be positioned relative to the `referenceElement`.",
+                "type": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"leading\" | \"leading-end\" | \"leading-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\" | \"trailing\" | \"trailing-end\" | \"trailing-start\""
+              },
               {
                 "name": "readOnly",
                 "description": "When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.",
@@ -5145,16 +5202,9 @@
                 "type": "string"
               }
             },
-            {
-              "name": "text-label",
-              "description": "**Deprecated**: in v2.12.0, removal target v5.0.0 - Use the `heading` property instead.. The component's text.",
-              "value": {
-                "type": "string"
-              }
-            },
             {
               "name": "value",
-              "description": "The component's value.",
+              "description": "The component's value. Falls back to `heading` if not provided.",
               "value": {
                 "type": "any"
               }
@@ -5248,14 +5298,9 @@
                 "description": "The component's short heading.\n\nWhen provided, the short heading will be displayed in the component's selection.\n\nIt is recommended to use 5 characters or fewer.",
                 "type": "string"
               },
-              {
-                "name": "textLabel",
-                "description": "The component's text.",
-                "type": "string"
-              },
               {
                 "name": "value",
-                "description": "The component's value.",
+                "description": "The component's value. Falls back to `heading` if not provided.",
                 "type": "any"
               }
             ],
@@ -6249,7 +6294,7 @@
               {
                 "name": "focusTrapOptions",
                 "description": "Specifies custom focus trap configuration on the component, where\n\n`\"allowOutsideClick`\" allows outside clicks,\n`\"initialFocus\"` enables initial focus,\n`\"returnFocusOnDeactivate\"` returns focus when not active, and\n`\"extraContainers\"` specifies additional focusable elements external to the trap (e.g., 3rd-party components appending elements to the document body).\n`\"setReturnFocus\"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).",
-                "type": "{\n    initialFocus?: FocusTargetOrFalse | (() => void);\n    returnFocusOnDeactivate?: boolean;\n    allowOutsideClick?: boolean | MouseEventToBoolean;\n    extraContainers?: string | HTMLElement | SVGElement | Array<string | HTMLElement | SVGElement>;\n    setReturnFocus?: FocusTargetValueOrFalse | ((nodeFocusedBeforeActivation: HTMLElement | SVGElement) => FocusTargetValueOrFalse) | ((nodeFocusedBeforeActivation: HTMLElement | SVGElement) => undefined);\n}"
+                "type": "{\n    allowOutsideClick?: boolean | MouseEventToBoolean;\n    initialFocus?: FocusTargetOrFalse | (() => void);\n    returnFocusOnDeactivate?: boolean;\n    extraContainers?: string | HTMLElement | SVGElement | Array<string | HTMLElement | SVGElement>;\n    setReturnFocus?: FocusTargetValueOrFalse | ((nodeFocusedBeforeActivation: HTMLElement | SVGElement) => FocusTargetValueOrFalse) | ((nodeFocusedBeforeActivation: HTMLElement | SVGElement) => undefined);\n}"
               },
               {
                 "name": "heading",
@@ -7690,7 +7735,7 @@
         },
         {
           "name": "calcite-inline-editable",
-          "description": "### Events\n- **calciteInlineEditableEditCancel** - Emits when the component's \"cancel editing\" button is pressed.\n- **calciteInlineEditableEditConfirm** - Emits when the component's \"confirm edits\" button is pressed.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding a `calcite-input`.\n\n### CSS Properties\n- **--calcite-inline-editable-background-color-hover** - Specifies the component's background color when hovered. \n- **--calcite-inline-editable-background-color** - Specifies the component's background color. \n- **--calcite-inline-editable-button-background-color** - Specifies the button element's background color when appearance=\"solid\" or appearance=\"outline-fill\". \n- **--calcite-inline-editable-button-corner-radius** - Specifies the button element's corner radius. \n- **--calcite-inline-editable-button-loader-color** - Specifies the button element's loader color. \n- **--calcite-inline-editable-button-shadow-color** - Specifies the button element's box-shadow color. \n- **--calcite-inline-editable-button-text-color** - Specifies the button element's text color. ",
+          "description": "### Events\n- **calciteInlineEditableEditCancel** - Emits when the component's \"cancel editing\" button is pressed.\n- **calciteInlineEditableEditConfirm** - Emits when the component's \"confirm edits\" button is pressed.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding a `calcite-input`.\n\n### CSS Properties\n- **--calcite-inline-editable-background-color-hover** - Specifies the component's background color when hovered. \n- **--calcite-inline-editable-background-color** - Specifies the component's background color. \n- **--calcite-inline-editable-button-background-color** - Specifies the button element's background color when appearance=\"solid\" or appearance=\"outline-fill\". \n- **--calcite-inline-editable-button-corner-radius** - Specifies the button element's corner radius. \n- **--calcite-inline-editable-button-loader-color** - Specifies the button element's loader color. \n- **--calcite-inline-editable-button-text-color** - Specifies the button element's text color. ",
           "attributes": [
             {
               "name": "controls",
@@ -7831,7 +7876,7 @@
             },
             {
               "name": "clearable",
-              "description": "When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `\"search\"`, `\"time\"`, and `\"date\"` types, and will not display for the `\"textarea\"` type.",
+              "description": "When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `\"search\"`, `\"time\"`, and `\"date\"` types.",
               "default": "false",
               "value": {
                 "type": "boolean"
@@ -8043,7 +8088,7 @@
             },
             {
               "name": "type",
-              "description": "Specifies the component type.\n\nNote that the following `type`s add type-specific icons by default: `\"date\"`, `\"email\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"time\"`.\n\n `\"textarea\"` [Deprecated] use the `calcite-text-area` component instead.",
+              "description": "Specifies the component type.\n\nNote that the following `type`s add type-specific icons by default: `\"date\"`, `\"email\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"time\"`.",
               "default": "\"text\"",
               "value": {
                 "type": [
@@ -8059,7 +8104,6 @@
                   "\"search\"",
                   "\"tel\"",
                   "\"text\"",
-                  "\"textarea\"",
                   "\"time\"",
                   "\"url\"",
                   "\"week\""
@@ -8129,7 +8173,7 @@
               },
               {
                 "name": "clearable",
-                "description": "When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `\"search\"`, `\"time\"`, and `\"date\"` types, and will not display for the `\"textarea\"` type.",
+                "description": "When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `\"search\"`, `\"time\"`, and `\"date\"` types.",
                 "type": "boolean"
               },
               {
@@ -8269,8 +8313,8 @@
               },
               {
                 "name": "type",
-                "description": "Specifies the component type.\n\nNote that the following `type`s add type-specific icons by default: `\"date\"`, `\"email\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"time\"`.\n\n `\"textarea\"` [Deprecated] use the `calcite-text-area` component instead.",
-                "type": "\"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"image\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"textarea\" | \"time\" | \"url\" | \"week\""
+                "description": "Specifies the component type.\n\nNote that the following `type`s add type-specific icons by default: `\"date\"`, `\"email\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"time\"`.",
+                "type": "\"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"image\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\""
               },
               {
                 "name": "validationIcon",
@@ -8309,7 +8353,7 @@
         },
         {
           "name": "calcite-input-date-picker",
-          "description": "### Events\n- **calciteInputDatePickerBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteInputDatePickerBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteInputDatePickerChange** - Fires when the component's `value` changes.\n- **calciteInputDatePickerClose** - Fires when the component is closed and animation is complete.\n- **calciteInputDatePickerOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<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(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **label-content** - A slot for rendering content next to the component's `labelText`.\n\n### CSS Properties\n- **--calcite-input-date-picker-actions-icon-color** - Specifies the component's actions icon color. \n- **--calcite-input-date-picker-actions-icon-color-hover** - Specifies the component's actions icon color on hover. \n- **--calcite-input-date-picker-background-color** - Specifies the component's input background color. \n- **--calcite-input-date-picker-border-color** - Specifies the component's input border color. \n- **--calcite-input-date-picker-calendar-actions-background-color** - Specifies the background color of actions of the calendar. \n- **--calcite-input-date-picker-calendar-actions-background-color-hover** - Specifies the background color of actions of the calendar when hovered. \n- **--calcite-input-date-picker-calendar-actions-background-color-press** - Specifies the background color of actions of the calendar when pressed. \n- **--calcite-input-date-picker-calendar-actions-text-color** - Specifies the text color of the component's calendar actions. \n- **--calcite-input-date-picker-calendar-actions-text-color-press** - Specifies the text color of the component's calendar actions when pressed. \n- **--calcite-input-date-picker-calendar-border-color** - Specifies the component's calendar border color. \n- **--calcite-input-date-picker-calendar-corner-radius** - Specifies the component's calendar corner radius. \n- **--calcite-input-date-picker-calendar-current-day-text-color** - Specifies the text color of current day of the component's date-picker. \n- **--calcite-input-date-picker-calendar-day-background-color** - Specifies the background color of day of the calendar. \n- **--calcite-input-date-picker-calendar-day-background-color-hover** - Specifies the background color of day of the calendar when hovered. \n- **--calcite-input-date-picker-calendar-day-current-text-color** - [Deprecated] Use `--calcite-input-date-picker-calendar-current-day-text-color`. Specifies the text color of current day of the component's date-picker. \n- **--calcite-input-date-picker-calendar-day-range-text-color** - Specifies the text color of select day range of the component's date-picker. \n- **--calcite-input-date-picker-calendar-day-text-color-selected** - Specifies the text color of selected day of the component's date-picker. \n- **--calcite-input-date-picker-calendar-day-outside-range-background-color-hover** - Specifies the background color of day's outside current range of the component's date-picker when hovered. \n- **--calcite-input-date-picker-calendar-day-outside-range-text-color-hover** - Specifies the text color of day's outside current range of the component's date-picker when hovered. \n- **--calcite-input-date-picker-calendar-day-text-color** - Specifies the text color of day of the component's date-picker. \n- **--calcite-input-date-picker-calendar-day-text-color-hover** - Specifies the text color of day of the component's date-picker when hovered. \n- **--calcite-input-date-picker-calendar-selected-background-color** - Specifies the background color of selected day and day range of the calendar. \n- **--calcite-input-date-picker-calendar-shadow** - the component's calendar shadow. \n- **--calcite-input-date-picker-calendar-icon-color** - Specifies the component's calendar icon color. \n- **--calcite-input-date-picker-calendar-icon-color-hover** - Specifies the component's calendar icon color. \n- **--calcite-input-date-picker-calendar-month-select-text-color** - Specifies the text color of month select of the component's date-picker. \n- **--calcite-input-date-picker-calendar-range-divider-color** - Specifies the divider color between the component's date-picker. \n- **--calcite-input-date-picker-calendar-text-color** - Specifies the text color of the component's calendar week, year & suffix. \n- **--calcite-input-date-picker-corner-radius** - Specifies the component's input corner radius. \n- **--calcite-input-date-picker-divider-color** - Specifies the component's divider color between two inputs when in range mode. \n- **--calcite-input-date-picker-icon-color** - Specifies the component's in-field input icon color. \n- **--calcite-input-date-picker-icon-color-hover** - [Deprecated] Specifies the component's in-field input icon color on hover. \n- **--calcite-input-date-picker-placeholder-text-color** - Specifies the component's input placeholder text color. \n- **--calcite-input-date-picker-shadow** - Specifies the component's input shadow. \n- **--calcite-input-date-picker-text-color** - Specifies the component's input text color. ",
+          "description": "### Events\n- **calciteInputDatePickerBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteInputDatePickerBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteInputDatePickerChange** - Fires when the component's `value` changes.\n- **calciteInputDatePickerClose** - Fires when the component is closed and animation is complete.\n- **calciteInputDatePickerOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<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(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **label-content** - A slot for rendering content next to the component's `labelText`.\n\n### CSS Properties\n- **--calcite-input-date-picker-actions-icon-color** - Specifies the component's actions icon color. \n- **--calcite-input-date-picker-actions-icon-color-hover** - Specifies the component's actions icon color on hover. \n- **--calcite-input-date-picker-background-color** - Specifies the component's input background color. \n- **--calcite-input-date-picker-border-color** - Specifies the component's input border color. \n- **--calcite-input-date-picker-calendar-actions-background-color** - Specifies the background color of actions of the calendar. \n- **--calcite-input-date-picker-calendar-actions-background-color-hover** - Specifies the background color of actions of the calendar when hovered. \n- **--calcite-input-date-picker-calendar-actions-background-color-press** - Specifies the background color of actions of the calendar when pressed. \n- **--calcite-input-date-picker-calendar-actions-text-color** - Specifies the text color of the component's calendar actions. \n- **--calcite-input-date-picker-calendar-actions-text-color-press** - Specifies the text color of the component's calendar actions when pressed. \n- **--calcite-input-date-picker-calendar-border-color** - Specifies the component's calendar border color. \n- **--calcite-input-date-picker-calendar-corner-radius** - Specifies the component's calendar corner radius. \n- **--calcite-input-date-picker-calendar-current-day-text-color** - Specifies the text color of current day of the component's date-picker. \n- **--calcite-input-date-picker-calendar-day-background-color** - Specifies the background color of day of the calendar. \n- **--calcite-input-date-picker-calendar-day-background-color-hover** - Specifies the background color of day of the calendar when hovered. \n- **--calcite-input-date-picker-calendar-day-current-text-color** - [Deprecated] Use `--calcite-input-date-picker-calendar-current-day-text-color`. Specifies the text color of current day of the component's date-picker. \n- **--calcite-input-date-picker-calendar-day-range-text-color** - Specifies the text color of select day range of the component's date-picker. \n- **--calcite-input-date-picker-calendar-day-text-color-selected** - Specifies the text color of selected day of the component's date-picker. \n- **--calcite-input-date-picker-calendar-day-outside-range-background-color-hover** - Specifies the background color of day's outside current range of the component's date-picker when hovered. \n- **--calcite-input-date-picker-calendar-day-outside-range-text-color-hover** - Specifies the text color of day's outside current range of the component's date-picker when hovered. \n- **--calcite-input-date-picker-calendar-day-text-color** - Specifies the text color of day of the component's date-picker. \n- **--calcite-input-date-picker-calendar-day-text-color-hover** - Specifies the text color of day of the component's date-picker when hovered. \n- **--calcite-input-date-picker-calendar-selected-background-color** - Specifies the background color of selected day and day range of the calendar. \n- **--calcite-input-date-picker-calendar-shadow** - the component's calendar shadow. \n- **--calcite-input-date-picker-calendar-icon-color** - Specifies the component's calendar icon color. \n- **--calcite-input-date-picker-calendar-icon-color-hover** - Specifies the component's calendar icon color. \n- **--calcite-input-date-picker-calendar-month-select-text-color** - Specifies the text color of month select of the component's date-picker. \n- **--calcite-input-date-picker-calendar-range-divider-color** - Specifies the divider color between the component's date-picker. \n- **--calcite-input-date-picker-calendar-text-color** - Specifies the text color of the component's calendar week, year & suffix. \n- **--calcite-input-date-picker-corner-radius** - Specifies the component's input corner radius. \n- **--calcite-input-date-picker-divider-color** - Specifies the component's divider color between two inputs when in range mode. \n- **--calcite-input-date-picker-icon-color** - Specifies the component's in-field input icon color. \n- **--calcite-input-date-picker-placeholder-text-color** - Specifies the component's input placeholder text color. \n- **--calcite-input-date-picker-shadow** - Specifies the component's input shadow. \n- **--calcite-input-date-picker-text-color** - Specifies the component's input text color. ",
           "attributes": [
             {
               "name": "calendars",
@@ -8761,7 +8805,7 @@
         },
         {
           "name": "calcite-input-message",
-          "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 text.\n\n### CSS Properties\n- **--calcite-input-message-spacing-value** - [Deprecated] Use `--calcite-input-message-spacing`. Specifies the margin spacing at the top of the component. \n- **--calcite-input-message-spacing** - Specifies the margin spacing at the top of the component. \n- **--calcite-input-message-icon-color** - Specifies the component's icon color. ",
+          "description": "**Deprecated**: in v5.0.0, removal target v6.0.0 - Use the `calcite-notice` component with `appearance=\"transparent\"` instead..\n--\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding text.\n\n### CSS Properties\n- **--calcite-input-message-spacing-value** - [Deprecated] Use `--calcite-input-message-spacing`. Specifies the margin spacing at the top of the component. \n- **--calcite-input-message-spacing** - Specifies the margin spacing at the top of the component. \n- **--calcite-input-message-icon-color** - Specifies the component's icon color. ",
           "attributes": [
             {
               "name": "icon",
@@ -10586,6 +10630,7 @@
             {
               "name": "filter-text",
               "description": "Text for the component's filter input field.",
+              "default": "\"\"",
               "value": {
                 "type": "string"
               }
@@ -12219,8 +12264,19 @@
         },
         {
           "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(options?: FocusOptions): 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. ",
+          "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(options?: FocusOptions): 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 when `appearance=\"outline-fill\"`. \n- **--calcite-notice-border-color** - Specifies the component's border color when `appearance=\"outline-fill\"`. \n- **--calcite-notice-corner-radius** - Specifies the component's border radius. \n- **--calcite-notice-close-background-color** - Specifies the background color of the component's close button. \n- **--calcite-notice-close-background-color-focus** - Specifies the background color of the component's close button when focused or hovered. \n- **--calcite-notice-close-background-color-press** - Specifies the background color of the component's close button 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. ",
           "attributes": [
+            {
+              "name": "appearance",
+              "description": "Specifies the appearance of the component.",
+              "default": "\"outline-fill\"",
+              "value": {
+                "type": [
+                  "\"outline-fill\"",
+                  "\"transparent\""
+                ]
+              }
+            },
             {
               "name": "closable",
               "description": "When `true`, a close button is added to the component.",
@@ -12253,6 +12309,7 @@
                   "\"brand\"",
                   "\"danger\"",
                   "\"info\"",
+                  "\"neutral\"",
                   "\"success\"",
                   "\"warning\""
                 ]
@@ -12333,6 +12390,11 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "appearance",
+                "description": "Specifies the appearance of the component.",
+                "type": "\"outline-fill\" | \"transparent\""
+              },
               {
                 "name": "closable",
                 "description": "When `true`, a close button is added to the component.",
@@ -12351,7 +12413,7 @@
               {
                 "name": "kind",
                 "description": "Specifies the kind of the component, which will apply to top border and icon.",
-                "type": "\"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\""
+                "type": "\"brand\" | \"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\""
               },
               {
                 "name": "messageOverrides",
@@ -12993,7 +13055,7 @@
         },
         {
           "name": "calcite-popover",
-          "description": "### Events\n- **calcitePopoverBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calcitePopoverBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calcitePopoverClose** - Fires when the component is closed and animation is complete.\n- **calcitePopoverOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<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(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n- `updateFocusTrapElements(): Promise<void>` - Updates the element(s) that are used within the focus-trap of the component.\n\n### Slots\n- _default_ - A slot for adding custom content.\n\n### CSS Properties\n- **--calcite-popover-background-color** - Specifies the component's background color. \n- **--calcite-popover-border-color** - Specifies the component's border color. \n- **--calcite-popover-corner-radius** - Specifies the component's corner radius. \n- **--calcite-popover-max-size-x** - Specifies the component's maximum width. \n- **--calcite-popover-text-color** - Specifies the component's text color. \n- **--calcite-popover-z-index** - [Deprecated] No longer necessary. Specifies the component's z-index value. ",
+          "description": "### Events\n- **calcitePopoverBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calcitePopoverBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calcitePopoverClose** - Fires when the component is closed and animation is complete.\n- **calcitePopoverOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<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(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n- `updateFocusTrapElements(): Promise<void>` - Updates the element(s) that are used within the focus-trap of the component.\n\n### Slots\n- _default_ - A slot for adding custom content.\n\n### CSS Properties\n- **--calcite-popover-background-color** - Specifies the component's background color. \n- **--calcite-popover-border-color** - Specifies the component's border color. \n- **--calcite-popover-corner-radius** - Specifies the component's corner radius. \n- **--calcite-popover-max-size-x** - Specifies the component's maximum width. \n- **--calcite-popover-text-color** - Specifies the component's text color. ",
           "attributes": [
             {
               "name": "auto-close",
@@ -13214,7 +13276,7 @@
               {
                 "name": "focusTrapOptions",
                 "description": "Specifies custom focus trap configuration on the component, where\n\n`\"allowOutsideClick`\" allows outside clicks,\n`\"initialFocus\"` enables initial focus,\n`\"returnFocusOnDeactivate\"` returns focus when not active, and\n`\"extraContainers\"` specifies additional focusable elements external to the trap (e.g., 3rd-party components appending elements to the document body).\n`\"setReturnFocus\"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).",
-                "type": "{\n    initialFocus?: FocusTargetOrFalse | (() => void);\n    returnFocusOnDeactivate?: boolean;\n    allowOutsideClick?: boolean | MouseEventToBoolean;\n    extraContainers?: string | HTMLElement | SVGElement | Array<string | HTMLElement | SVGElement>;\n    setReturnFocus?: FocusTargetValueOrFalse | ((nodeFocusedBeforeActivation: HTMLElement | SVGElement) => FocusTargetValueOrFalse) | ((nodeFocusedBeforeActivation: HTMLElement | SVGElement) => undefined);\n}"
+                "type": "{\n    allowOutsideClick?: boolean | MouseEventToBoolean;\n    initialFocus?: FocusTargetOrFalse | (() => void);\n    returnFocusOnDeactivate?: boolean;\n    extraContainers?: string | HTMLElement | SVGElement | Array<string | HTMLElement | SVGElement>;\n    setReturnFocus?: FocusTargetValueOrFalse | ((nodeFocusedBeforeActivation: HTMLElement | SVGElement) => FocusTargetValueOrFalse) | ((nodeFocusedBeforeActivation: HTMLElement | SVGElement) => undefined);\n}"
               },
               {
                 "name": "heading",
@@ -13386,7 +13448,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(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### CSS Properties\n- **--calcite-radio-button-background-color** - Specifies the component's background color. \n- **--calcite-radio-button-border-color** - Specifies the component's border color. \n- **--calcite-radio-button-corner-radius** - Specifies the component's corner radius. \n- **--calcite-radio-button-size** - Specifies the component's size. \n- **--calcite-radio-size** - [Deprecated] Use `--calcite-radio-button-size`. Specifies the component's size. ",
+          "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(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### CSS Properties\n- **--calcite-radio-button-background-color** - Specifies the component's background color. \n- **--calcite-radio-button-border-color** - Specifies the component's border color. \n- **--calcite-radio-button-corner-radius** - Specifies the component's corner radius. \n- **--calcite-radio-button-size** - Specifies the component's size. ",
           "attributes": [
             {
               "name": "checked",
@@ -13682,7 +13744,7 @@
         },
         {
           "name": "calcite-rating",
-          "description": "### Events\n- **calciteRatingChange** - Fires when the component's value changes.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **label-content** - A slot for rendering content next to the component's `labelText`.\n\n### CSS Properties\n- **--calcite-rating-spacing-unit** - [Deprecated] Use `--calcite-rating-spacing`. Specifies the amount of left and right margin spacing between each item. \n- **--calcite-rating-spacing** - Specifies the amount of left and right margin spacing between each item. \n- **--calcite-rating-color-hover** - Specifies the component's item color when hovered. \n- **--calcite-rating-color-press** - Specifies the component's item color when active. \n- **--calcite-rating-color** - Specifies the component's item color. \n- **--calcite-rating-average-color** - Specifies the component's item color when average is set. \n- **--calcite-rating-average-text-color** - Specifies the component's average text color. \n- **--calcite-rating-count-text-color** - Specifies the component's count text color. ",
+          "description": "### Events\n- **calciteRatingChange** - Fires when the component's value changes.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component.\n\n### Slots\n- **label-content** - A slot for rendering content next to the component's `labelText`.\n\n### CSS Properties\n- **--calcite-rating-spacing** - Specifies the amount of left and right margin spacing between each item. \n- **--calcite-rating-color-hover** - Specifies the component's item color when hovered. \n- **--calcite-rating-color-press** - Specifies the component's item color when active. \n- **--calcite-rating-color** - Specifies the component's item color. \n- **--calcite-rating-average-color** - Specifies the component's item color when average is set. \n- **--calcite-rating-average-text-color** - Specifies the component's average text color. \n- **--calcite-rating-count-text-color** - Specifies the component's count text color. ",
           "attributes": [
             {
               "name": "average",
@@ -14610,7 +14672,7 @@
               {
                 "name": "focusTrapOptions",
                 "description": "Specifies custom focus trap configuration on the component, where\n\n`\"allowOutsideClick`\" allows outside clicks,\n`\"initialFocus\"` enables initial focus,\n`\"returnFocusOnDeactivate\"` returns focus when not active, and\n`\"extraContainers\"` specifies additional focusable elements external to the trap (e.g., 3rd-party components appending elements to the document body).\n`\"setReturnFocus\"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).",
-                "type": "{\n    initialFocus?: FocusTargetOrFalse | (() => void);\n    returnFocusOnDeactivate?: boolean;\n    allowOutsideClick?: boolean | MouseEventToBoolean;\n    extraContainers?: string | HTMLElement | SVGElement | Array<string | HTMLElement | SVGElement>;\n    setReturnFocus?: FocusTargetValueOrFalse | ((nodeFocusedBeforeActivation: HTMLElement | SVGElement) => FocusTargetValueOrFalse) | ((nodeFocusedBeforeActivation: HTMLElement | SVGElement) => undefined);\n}"
+                "type": "{\n    allowOutsideClick?: boolean | MouseEventToBoolean;\n    initialFocus?: FocusTargetOrFalse | (() => void);\n    returnFocusOnDeactivate?: boolean;\n    extraContainers?: string | HTMLElement | SVGElement | Array<string | HTMLElement | SVGElement>;\n    setReturnFocus?: FocusTargetValueOrFalse | ((nodeFocusedBeforeActivation: HTMLElement | SVGElement) => FocusTargetValueOrFalse) | ((nodeFocusedBeforeActivation: HTMLElement | SVGElement) => undefined);\n}"
               },
               {
                 "name": "height",
@@ -14689,7 +14751,7 @@
         },
         {
           "name": "calcite-shell",
-          "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. This content will appear between any leading and trailing panels added to the component, such as a map.\n- **header** - A slot for adding header content. This content will be positioned at the top of the component.\n- **footer** - A slot for adding footer content. This content will be positioned at the bottom of the component.\n- **panel-start** - A slot for adding the starting `calcite-shell-panel`.\n- **panel-end** - A slot for adding the ending `calcite-shell-panel`.\n- **panel-top** - A slot for adding the top `calcite-shell-panel`.\n- **panel-bottom** - A slot for adding the bottom `calcite-shell-panel`.\n- **modals** - A slot for adding `calcite-modal` components. When placed in this slot, the modal position will be constrained to the extent of the `calcite-shell`.\n- **dialogs** - A slot for adding `calcite-dialog` components. When placed in this slot, the dialog position will be constrained to the extent of the `calcite-shell`.\n- **alerts** - A slot for adding `calcite-alert` components. When placed in this slot, the alert position will be constrained to the extent of the `calcite-shell`.\n- **sheets** - A slot for adding `calcite-sheet` components. When placed in this slot, the sheet position will be constrained to the extent of the `calcite-shell`.\n\n### CSS Properties\n- **--calcite-shell-border-color** - Specifies the component's border color. \n- **--calcite-shell-tip-spacing** - [Deprecated] This component has been deprecated. The left and right spacing of the `calcite-tip-manager` when slotted in the component. ",
+          "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. This content will appear between any leading and trailing panels added to the component, such as a map.\n- **header** - A slot for adding header content. This content will be positioned at the top of the component.\n- **footer** - A slot for adding footer content. This content will be positioned at the bottom of the component.\n- **panel-start** - A slot for adding the starting `calcite-shell-panel`.\n- **panel-end** - A slot for adding the ending `calcite-shell-panel`.\n- **panel-top** - A slot for adding the top `calcite-shell-panel`.\n- **panel-bottom** - A slot for adding the bottom `calcite-shell-panel`.\n- **dialogs** - A slot for adding `calcite-dialog` components. When placed in this slot, the dialog position will be constrained to the extent of the `calcite-shell`.\n- **alerts** - A slot for adding `calcite-alert` components. When placed in this slot, the alert position will be constrained to the extent of the `calcite-shell`.\n- **sheets** - A slot for adding `calcite-sheet` components. When placed in this slot, the sheet position will be constrained to the extent of the `calcite-shell`.\n\n### CSS Properties\n- **--calcite-shell-border-color** - Specifies the component's border color. ",
           "attributes": [
             {
               "name": "content-behind",
@@ -14729,10 +14791,6 @@
               "name": "panel-bottom",
               "description": "A slot for adding the bottom `calcite-shell-panel`."
             },
-            {
-              "name": "modals",
-              "description": "A slot for adding `calcite-modal` components. When placed in this slot, the modal position will be constrained to the extent of the `calcite-shell`."
-            },
             {
               "name": "dialogs",
               "description": "A slot for adding `calcite-dialog` components. When placed in this slot, the dialog position will be constrained to the extent of the `calcite-shell`."
@@ -14760,7 +14818,7 @@
         },
         {
           "name": "calcite-shell-panel",
-          "description": "### Events\n- **calciteShellPanelCollapse** - Fires when the component's content area is collapsed.\n- **calciteShellPanelExpand** - Fires when the component's content area is expanded.\n\n### Methods\n- `componentOnReady(): Promise<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. ",
+          "description": "### Events\n- **calciteShellPanelCollapse** - Fires when the component's content area is collapsed.\n- **calciteShellPanelExpand** - Fires when the component's content area is expanded.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `updateSize(size: { inline?: number | null; block?: number | null; }): Promise<void>`\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the component.\n\n### CSS Properties\n- **--calcite-shell-panel-background-color** - Specifies the 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` or `float-all`, 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",
@@ -16118,7 +16176,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.\n\n### CSS Properties\n- **--calcite-stepper-bar-gap** - Specifies the space between items in the component. \n- **--calcite-stepper-bar-inactive-fill-color** - Specifies the fill color of items in the component. \n- **--calcite-stepper-bar-active-fill-color** - Specifies the fill color of active items in the component. \n- **--calcite-stepper-bar-complete-fill-color** - Specifies the fill color of complete items in the component. \n- **--calcite-stepper-bar-error-fill-color** - Specifies the fill color of error items in the component. ",
+          "description": "### Events\n- **calciteStepperChange** - 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 component. \n- **--calcite-stepper-bar-inactive-fill-color** - Specifies the fill color of items in the component. \n- **--calcite-stepper-bar-active-fill-color** - Specifies the fill color of active items in the component. \n- **--calcite-stepper-bar-complete-fill-color** - Specifies the fill color of complete items in the component. \n- **--calcite-stepper-bar-error-fill-color** - Specifies the fill color of error items in the component. ",
           "attributes": [
             {
               "name": "icon",
@@ -16183,11 +16241,6 @@
               "name": "calciteStepperChange",
               "type": "void",
               "description": "Fires when the active `calcite-stepper-item` changes."
-            },
-            {
-              "name": "calciteStepperItemChange",
-              "type": "void",
-              "description": "Fires when the active `calcite-stepper-item` changes."
             }
           ],
           "js": {
@@ -16233,11 +16286,6 @@
                 "name": "calciteStepperChange",
                 "type": "void",
                 "description": "Fires when the active `calcite-stepper-item` changes."
-              },
-              {
-                "name": "calciteStepperItemChange",
-                "type": "void",
-                "description": "Fires when the active `calcite-stepper-item` changes."
               }
             ]
           }
@@ -18344,7 +18392,7 @@
         },
         {
           "name": "calcite-tooltip",
-          "description": "### Events\n- **calciteTooltipBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteTooltipBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteTooltipClose** - Fires when the component is closed and animation is complete.\n- **calciteTooltipOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise<void>` - Updates the position of the component.\n\n### Slots\n- _default_ - A slot for adding text.\n\n### CSS Properties\n- **--calcite-tooltip-background-color** - Specifies the component's background color. \n- **--calcite-tooltip-border-color** - Specifies the component's border color. \n- **--calcite-tooltip-corner-radius** - Specifies the component's corner radius. \n- **--calcite-tooltip-max-size-x** - Specifies the component's maximum width. \n- **--calcite-tooltip-text-color** - Specifies the component's text color. \n- **--calcite-tooltip-z-index** - [Deprecated] No longer necessary. Specifies the z-index value for the component. ",
+          "description": "### Events\n- **calciteTooltipBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteTooltipBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteTooltipClose** - Fires when the component is closed and animation is complete.\n- **calciteTooltipOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `reposition(delayed?: boolean): Promise<void>` - Updates the position of the component.\n\n### Slots\n- _default_ - A slot for adding text.\n\n### CSS Properties\n- **--calcite-tooltip-background-color** - Specifies the component's background color. \n- **--calcite-tooltip-border-color** - Specifies the component's border color. \n- **--calcite-tooltip-corner-radius** - Specifies the component's corner radius. \n- **--calcite-tooltip-max-size-x** - Specifies the component's maximum width. \n- **--calcite-tooltip-text-color** - Specifies the component's text color. ",
           "attributes": [
             {
               "name": "close-on-click",
@@ -18846,10 +18894,6 @@
           "name": "--calcite-accordion-item-text-color-hover",
           "description": "[Deprecated] Use `--calcite-accordion-text-color-hover`. Specifies the component's text color on hover."
         },
-        {
-          "name": "--calcite-accordion-item-text-color-press",
-          "description": "[Deprecated] Use `--calcite-accordion-text-color-press`. Specifies the component's text color on press."
-        },
         {
           "name": "--calcite-action-background-color-hover",
           "description": "Specifies the component's background color when hovered or focused."
@@ -18938,10 +18982,6 @@
           "name": "--calcite-action-group-gap",
           "description": "When `layout` is `\"grid\"`, specifies the component's gap."
         },
-        {
-          "name": "--calcite-action-group-padding",
-          "description": "[Deprecated] Use `--calcite-action-group-gap`. Specifies the component's padding."
-        },
         {
           "name": "--calcite-action-menu-items-space",
           "description": "Specifies the space between actions in the menu."
@@ -19198,10 +19238,6 @@
           "name": "--calcite-button-loader-color",
           "description": "Specifies the component's loader color."
         },
-        {
-          "name": "--calcite-button-shadow-color",
-          "description": "[Deprecated] Use `--calcite-button-shadow`. Specifies the component's box-shadow color."
-        },
         {
           "name": "--calcite-button-text-color",
           "description": "Specifies the component's text color."
@@ -19226,10 +19262,6 @@
           "name": "--calcite-card-corner-radius",
           "description": "Specifies the component's corner radius."
         },
-        {
-          "name": "--calcite-card-selection-background-color-active",
-          "description": "[Deprecated] Use `--calcite-card-selection-background-color-press`. Specifies the component's selection element background color when active."
-        },
         {
           "name": "--calcite-card-selection-background-color-hover",
           "description": "Specifies the component's selection element background color when hovered."
@@ -19238,10 +19270,6 @@
           "name": "--calcite-card-selection-background-color-press",
           "description": "Specifies the component's selection element background color when active."
         },
-        {
-          "name": "--calcite-card-selection-background-color-selected",
-          "description": "[Deprecated] Use `--calcite-card-background-color`. Specifies the component's selection element icon color when `selected`."
-        },
         {
           "name": "--calcite-card-selection-background-color",
           "description": "[Deprecated] Use `--calcite-card-background-color`. Specifies the component's selection element background color."
@@ -19262,10 +19290,6 @@
           "name": "--calcite-card-selection-icon-color-selected",
           "description": "[Deprecated] Use `--calcite-card-accent-color-selected`. Specifies the component's selection element icon color when `selected`."
         },
-        {
-          "name": "--calcite-card-selection-icon-color",
-          "description": "[Deprecated] Use `--calcite-card-selection-color`. Specifies the component's selection element icon color."
-        },
         {
           "name": "--calcite-card-shadow",
           "description": "Specifies the component's shadow."
@@ -19974,10 +19998,6 @@
           "name": "--calcite-inline-editable-button-loader-color",
           "description": "Specifies the button element's loader color."
         },
-        {
-          "name": "--calcite-inline-editable-button-shadow-color",
-          "description": "Specifies the button element's box-shadow color."
-        },
         {
           "name": "--calcite-inline-editable-button-text-color",
           "description": "Specifies the button element's text color."
@@ -20182,10 +20202,6 @@
           "name": "--calcite-input-date-picker-icon-color",
           "description": "Specifies the component's in-field input icon color."
         },
-        {
-          "name": "--calcite-input-date-picker-icon-color-hover",
-          "description": "[Deprecated] Specifies the component's in-field input icon color on hover."
-        },
         {
           "name": "--calcite-input-date-picker-placeholder-text-color",
           "description": "Specifies the component's input placeholder text color."
@@ -20640,15 +20656,27 @@
         },
         {
           "name": "--calcite-notice-background-color",
-          "description": "Specifies the component's background color."
+          "description": "Specifies the component's background color when `appearance=\"outline-fill\"`."
+        },
+        {
+          "name": "--calcite-notice-border-color",
+          "description": "Specifies the component's border color when `appearance=\"outline-fill\"`."
+        },
+        {
+          "name": "--calcite-notice-corner-radius",
+          "description": "Specifies the component's border radius."
+        },
+        {
+          "name": "--calcite-notice-close-background-color",
+          "description": "Specifies the background color of the component's close button."
         },
         {
           "name": "--calcite-notice-close-background-color-focus",
-          "description": "Specifies the component's background color when focused."
+          "description": "Specifies the background color of the component's close button when focused or hovered."
         },
         {
           "name": "--calcite-notice-close-background-color-press",
-          "description": "Specifies the component's background color when active."
+          "description": "Specifies the background color of the component's close button when active."
         },
         {
           "name": "--calcite-notice-close-icon-color-hover",
@@ -20670,14 +20698,6 @@
           "name": "--calcite-notice-width",
           "description": "[Deprecated] Specifies the component's width."
         },
-        {
-          "name": "--calcite-notice-close-text-color-hover",
-          "description": "[Deprecated] Use `--calcite-notice-close-icon-color-hover`. Specifies the background color of the component's close button when hovered."
-        },
-        {
-          "name": "--calcite-notice-close-text-color",
-          "description": "[Deprecated] Use `--calcite-notice-close-icon-color`. Specifies the text color of the component's close button."
-        },
         {
           "name": "--calcite-pagination-color",
           "description": "Specifies the component's item color."
@@ -20802,10 +20822,6 @@
           "name": "--calcite-popover-text-color",
           "description": "Specifies the component's text color."
         },
-        {
-          "name": "--calcite-popover-z-index",
-          "description": "[Deprecated] No longer necessary. Specifies the component's z-index value."
-        },
         {
           "name": "--calcite-progress-background-color",
           "description": "Specifies the component's background color."
@@ -20834,10 +20850,6 @@
           "name": "--calcite-radio-button-size",
           "description": "Specifies the component's size."
         },
-        {
-          "name": "--calcite-radio-size",
-          "description": "[Deprecated] Use `--calcite-radio-button-size`. Specifies the component's size."
-        },
         {
           "name": "--calcite-radio-button-group-gap",
           "description": "Specifies the space between slotted components in the component."
@@ -20846,10 +20858,6 @@
           "name": "--calcite-radio-button-input-message-spacing",
           "description": "Specifies the margin spacing at the top of the input-message component."
         },
-        {
-          "name": "--calcite-rating-spacing-unit",
-          "description": "[Deprecated] Use `--calcite-rating-spacing`. Specifies the amount of left and right margin spacing between each item."
-        },
         {
           "name": "--calcite-rating-spacing",
           "description": "Specifies the amount of left and right margin spacing between each item."
@@ -20994,10 +21002,6 @@
           "name": "--calcite-shell-border-color",
           "description": "Specifies the component's border color."
         },
-        {
-          "name": "--calcite-shell-tip-spacing",
-          "description": "[Deprecated] This component has been deprecated. The left and right spacing of the `calcite-tip-manager` when slotted in the component."
-        },
         {
           "name": "--calcite-shell-panel-background-color",
           "description": "Specifies the background color of the component."
@@ -21012,7 +21016,7 @@
         },
         {
           "name": "--calcite-shell-panel-height",
-          "description": "When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the height of the component."
+          "description": "When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float` or `float-all`, specifies the height of the component."
         },
         {
           "name": "--calcite-shell-panel-max-height",
@@ -21714,10 +21718,6 @@
           "name": "--calcite-tooltip-text-color",
           "description": "Specifies the component's text color."
         },
-        {
-          "name": "--calcite-tooltip-z-index",
-          "description": "[Deprecated] No longer necessary. Specifies the z-index value for the component."
-        },
         {
           "name": "--calcite-tree-text-color",
           "description": "Specifies the component's text color."