@esri/calcite-components 3.0.0-next.99 → 3.0.1

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": "3.0.0-next.99",
+  "version": "3.0.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1380,14 +1380,14 @@
             },
             {
               "name": "max-length",
-              "description": "Specifies the maximum length of text for the component's value.",
+              "description": "When the component resides in a form,\nspecifies the maximum length of text for the component's value.",
               "value": {
                 "type": "number"
               }
             },
             {
               "name": "min-length",
-              "description": "Specifies the minimum length of text for the component's value.",
+              "description": "When the component resides in a form,\nspecifies the minimum length of text for the component's value.",
               "value": {
                 "type": "number"
               }
@@ -1420,7 +1420,7 @@
             },
             {
               "name": "pattern",
-              "description": "Specifies a regex pattern the component's `value` must match for validation.\nRead the native attribute's documentation on MDN for more info.",
+              "description": "When the component resides in a form,\nspecifies a regular expression (regex) pattern the component's `value` must match for validation.\nRead the native attribute's documentation on MDN for more info.",
               "value": {
                 "type": "string"
               }
@@ -1464,7 +1464,7 @@
             },
             {
               "name": "required",
-              "description": "When `true`, the component must have a value in order for the form to submit.",
+              "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
               "default": "false",
               "value": {
                 "type": "boolean"
@@ -1632,7 +1632,7 @@
               },
               {
                 "name": "maxLength",
-                "description": "Specifies the maximum length of text for the component's value.",
+                "description": "When the component resides in a form,\nspecifies the maximum length of text for the component's value.",
                 "type": "number"
               },
               {
@@ -1642,7 +1642,7 @@
               },
               {
                 "name": "minLength",
-                "description": "Specifies the minimum length of text for the component's value.",
+                "description": "When the component resides in a form,\nspecifies the minimum length of text for the component's value.",
                 "type": "number"
               },
               {
@@ -1662,7 +1662,7 @@
               },
               {
                 "name": "pattern",
-                "description": "Specifies a regex pattern the component's `value` must match for validation.\nRead the native attribute's documentation on MDN for more info.",
+                "description": "When the component resides in a form,\nspecifies a regular expression (regex) pattern the component's `value` must match for validation.\nRead the native attribute's documentation on MDN for more info.",
                 "type": "string"
               },
               {
@@ -1687,7 +1687,7 @@
               },
               {
                 "name": "required",
-                "description": "When `true`, the component must have a value in order for the form to submit.",
+                "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
                 "type": "boolean"
               },
               {
@@ -2021,7 +2021,7 @@
         },
         {
           "name": "calcite-block",
-          "description": "### Events\n- **calciteBlockBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteBlockBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteBlockClose** - Fires when the component is closed and animation is complete.\n- **calciteBlockOpen** - Fires when the component is open and animation is complete.\n- **calciteBlockToggle** - Fires when the component's header is clicked.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's first tabbable element.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **actions-end** - A slot for adding actionable `calcite-action` elements after the content of the component. It is recommended to use two or fewer actions.\n- **icon** - [Deprecated] A slot for adding a leading header icon with `calcite-icon`. Use `icon-start` instead.\n- **content-start** - A slot for adding non-actionable elements before content of the component.\n- **control** - [Deprecated] A slot for adding a single HTML input element in a header. Use `actions-end` instead.\n- **header-menu-actions** - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu.\n\n### CSS Properties\n- **--calcite-block-border-color** - Specifies the component's border color. \n- **--calcite-block-header-background-color** - Specifies the component's `heading` background color. \n- **--calcite-block-header-background-color-hover** - Specifies the component's `heading` background color when hovered. \n- **--calcite-block-header-text-color** - Specifies the component's `heading` text color. \n- **--calcite-block-padding** - [Deprecated] Specifies the padding of the component's `default` slot. \n- **--calcite-block-text-color** - Specifies the component's text color. \n- **--calcite-block-text-color-hover** - Specifies the component's text 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- **calciteBlockOpen** - Fires when the component is open and animation is complete.\n- **calciteBlockSortHandleBeforeClose** - Fires when the sort handle is requested to be closed and before the closing transition begins.\n- **calciteBlockSortHandleBeforeOpen** - Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteBlockSortHandleClose** - Fires when the sort handle is closed and animation is complete.\n- **calciteBlockSortHandleOpen** - Fires when the sort handle is open and animation is complete.\n- **calciteBlockToggle** - Fires when the component's header is clicked.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's first tabbable element.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **actions-end** - A slot for adding actionable `calcite-action` elements after the content of the component. It is recommended to use two or fewer actions.\n- **icon** - [Deprecated] A slot for adding a leading header icon with `calcite-icon`. Use `icon-start` instead.\n- **content-start** - A slot for adding non-actionable elements before content of the component.\n- **control** - [Deprecated] A slot for adding a single HTML input element in a header. Use `actions-end` instead.\n- **header-menu-actions** - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu.\n\n### CSS Properties\n- **--calcite-block-border-color** - Specifies the component's border color. \n- **--calcite-block-header-background-color** - Specifies the component's `heading` background color. \n- **--calcite-block-header-background-color-hover** - Specifies the component's `heading` background color when hovered. \n- **--calcite-block-heading-text-color** - Specifies the component's `heading` text color. \n- **--calcite-block-heading-text-color-press** - When the component is `open`, specifies the `heading` text color. \n- **--calcite-block-padding** - [Deprecated] Specifies the padding of the component's `default` slot. \n- **--calcite-block-text-color** - Specifies the component's text color. ",
           "attributes": [
             {
               "name": "collapsible",
@@ -2046,9 +2046,17 @@
                 "type": "boolean"
               }
             },
+            {
+              "name": "drag-disabled",
+              "description": "When `true`, and a parent Block Group is `dragEnabled`, the component is not draggable.",
+              "default": "false",
+              "value": {
+                "type": "boolean"
+              }
+            },
             {
               "name": "drag-handle",
-              "description": "When `true`, displays a drag handle in the header.",
+              "description": "**Deprecated**: No longer necessary. Use Block Group for draggable functionality.. When `true`, the component displays a draggable button.",
               "default": "false",
               "value": {
                 "type": "boolean"
@@ -2164,6 +2172,14 @@
                 ]
               }
             },
+            {
+              "name": "sort-handle-open",
+              "description": "When `true`, displays and positions the sort handle.",
+              "default": "false",
+              "value": {
+                "type": "boolean"
+              }
+            },
             {
               "name": "status",
               "description": "**Deprecated**: Use `icon-start` instead.. Displays a status-related indicator icon.",
@@ -2223,6 +2239,26 @@
               "type": "undefined",
               "description": "Fires when the component is open and animation is complete."
             },
+            {
+              "name": "calciteBlockSortHandleBeforeClose",
+              "type": "undefined",
+              "description": "Fires when the sort handle is requested to be closed and before the closing transition begins."
+            },
+            {
+              "name": "calciteBlockSortHandleBeforeOpen",
+              "type": "undefined",
+              "description": "Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins."
+            },
+            {
+              "name": "calciteBlockSortHandleClose",
+              "type": "undefined",
+              "description": "Fires when the sort handle is closed and animation is complete."
+            },
+            {
+              "name": "calciteBlockSortHandleOpen",
+              "type": "undefined",
+              "description": "Fires when the sort handle is open and animation is complete."
+            },
             {
               "name": "calciteBlockToggle",
               "type": "undefined",
@@ -2246,9 +2282,14 @@
                 "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.",
                 "type": "boolean"
               },
+              {
+                "name": "dragDisabled",
+                "description": "When `true`, and a parent Block Group is `dragEnabled`, the component is not draggable.",
+                "type": "boolean"
+              },
               {
                 "name": "dragHandle",
-                "description": "When `true`, displays a drag handle in the header.",
+                "description": "When `true`, the component displays a draggable button.",
                 "type": "boolean"
               },
               {
@@ -2311,6 +2352,11 @@
                 "description": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.",
                 "type": "\"absolute\" | \"fixed\""
               },
+              {
+                "name": "sortHandleOpen",
+                "description": "When `true`, displays and positions the sort handle.",
+                "type": "boolean"
+              },
               {
                 "name": "status",
                 "description": "Displays a status-related indicator icon.",
@@ -2338,6 +2384,26 @@
                 "type": "undefined",
                 "description": "Fires when the component is open and animation is complete."
               },
+              {
+                "name": "calciteBlockSortHandleBeforeClose",
+                "type": "undefined",
+                "description": "Fires when the sort handle is requested to be closed and before the closing transition begins."
+              },
+              {
+                "name": "calciteBlockSortHandleBeforeOpen",
+                "type": "undefined",
+                "description": "Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins."
+              },
+              {
+                "name": "calciteBlockSortHandleClose",
+                "type": "undefined",
+                "description": "Fires when the sort handle is closed and animation is complete."
+              },
+              {
+                "name": "calciteBlockSortHandleOpen",
+                "type": "undefined",
+                "description": "Fires when the sort handle is open and animation is complete."
+              },
               {
                 "name": "calciteBlockToggle",
                 "type": "undefined",
@@ -2346,6 +2412,129 @@
             ]
           }
         },
+        {
+          "name": "calcite-block-group",
+          "description": "### Events\n- **calciteBlockGroupDragEnd** - Fires when the component's dragging has ended.\n- **calciteBlockGroupDragStart** - Fires when the component's dragging has started.\n- **calciteBlockGroupOrderChange** - Fires when the component's item order changes.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding `calcite-block` elements.",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.",
+              "default": "false",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "drag-enabled",
+              "description": "When `true`, `calcite-block`s are sortable via a draggable button.",
+              "default": "false",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "group",
+              "description": "The block-group's group identifier.\n\nTo drag elements from one group into another, both groups must have the same group value.",
+              "value": {
+                "type": "string"
+              }
+            },
+            {
+              "name": "label",
+              "description": "Specifies an accessible name for the component.\n\nWhen `dragEnabled` is `true` and multiple group sorting is enabled with `group`, specifies the component's name for dragging between groups.",
+              "value": {
+                "type": "string"
+              }
+            },
+            {
+              "name": "loading",
+              "description": "When `true`, a busy indicator is displayed.",
+              "default": "false",
+              "value": {
+                "type": "boolean"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "A slot for adding `calcite-block` elements."
+            }
+          ],
+          "events": [
+            {
+              "name": "calciteBlockGroupDragEnd",
+              "type": "BlockDragDetail",
+              "description": "Fires when the component's dragging has ended."
+            },
+            {
+              "name": "calciteBlockGroupDragStart",
+              "type": "BlockDragDetail",
+              "description": "Fires when the component's dragging has started."
+            },
+            {
+              "name": "calciteBlockGroupOrderChange",
+              "type": "BlockDragDetail",
+              "description": "Fires when the component's item order changes."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "canPull",
+                "description": "When provided, the method will be called to determine whether the element is sortable in the component.",
+                "type": "(detail: BlockDragDetail) => boolean"
+              },
+              {
+                "name": "canPut",
+                "description": "When provided, the method will be called to determine whether the element can be added from another component.",
+                "type": "(detail: BlockDragDetail) => boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.",
+                "type": "boolean"
+              },
+              {
+                "name": "dragEnabled",
+                "description": "When `true`, `calcite-block`s are sortable via a draggable button.",
+                "type": "boolean"
+              },
+              {
+                "name": "group",
+                "description": "The block-group's group identifier.\n\nTo drag elements from one group into another, both groups must have the same group value.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "Specifies an accessible name for the component.\n\nWhen `dragEnabled` is `true` and multiple group sorting is enabled with `group`, specifies the component's name for dragging between groups.",
+                "type": "string"
+              },
+              {
+                "name": "loading",
+                "description": "When `true`, a busy indicator is displayed.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "calciteBlockGroupDragEnd",
+                "type": "BlockDragDetail",
+                "description": "Fires when the component's dragging has ended."
+              },
+              {
+                "name": "calciteBlockGroupDragStart",
+                "type": "BlockDragDetail",
+                "description": "Fires when the component's dragging has started."
+              },
+              {
+                "name": "calciteBlockGroupOrderChange",
+                "type": "BlockDragDetail",
+                "description": "Fires when the component's item order changes."
+              }
+            ]
+          }
+        },
         {
           "name": "calcite-block-section",
           "description": "### Events\n- **calciteBlockSectionToggle** - Fires when the header has been clicked.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's first tabbable element.\n\n### Slots\n- _default_ - A slot for adding custom content.\n\n### CSS Properties\n- **--calcite-block-section-background-color** - Specifies the component's background color. \n- **--calcite-block-section-border-color** - Specifies the component's border color. When `open`, applies to the component's bottom border. \n- **--calcite-block-section-header-text-color** - Specifies the component's header text color. \n- **--calcite-block-section-text-color** - Specifies the component's text color. \n- **--calcite-block-section-text-color-hover** - Specifies the component's text color on hover. ",
@@ -2480,7 +2669,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(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding text.",
+          "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(): 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 when appearance=\"solid\" or appearance=\"outline-fill\". \n- **--calcite-button-border-color** - Specifies the component's border color when it has appearance=\"outline\" or appearance=\"outline-fill\". \n- **--calcite-button-corner-radius** - Specifies the component's corner radius. \n- **--calcite-button-loader-color** - Specifies the component's loader color. \n- **--calcite-button-shadow-color** - Specifies the component's box-shadow color. \n- **--calcite-button-text-color** - Specifies the component's text color. ",
           "attributes": [
             {
               "name": "alignment",
@@ -3270,7 +3459,7 @@
             },
             {
               "name": "required",
-              "description": "When `true`, the component must have a value in order for the form to submit.",
+              "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
               "default": "false",
               "value": {
                 "type": "boolean"
@@ -3349,7 +3538,7 @@
               },
               {
                 "name": "required",
-                "description": "When `true`, the component must have a value in order for the form to submit.",
+                "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
                 "type": "boolean"
               },
               {
@@ -4182,7 +4371,7 @@
             },
             {
               "name": "required",
-              "description": "When `true`, the component must have a value in order for the form to submit.",
+              "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
               "default": "false",
               "value": {
                 "type": "boolean"
@@ -4399,7 +4588,7 @@
               },
               {
                 "name": "required",
-                "description": "When `true`, the component must have a value in order for the form to submit.",
+                "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
                 "type": "boolean"
               },
               {
@@ -4733,7 +4922,7 @@
         },
         {
           "name": "calcite-date-picker",
-          "description": "### Events\n- **calciteDatePickerChange** - Fires when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`.\n- **calciteDatePickerRangeChange** - Fires when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's first focusable element.",
+          "description": "### Events\n- **calciteDatePickerChange** - Fires when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`.\n- **calciteDatePickerRangeChange** - Fires when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's first focusable element.\n\n### CSS Properties\n- **--calcite-date-picker-border-color** - Specifies the component's border color. \n- **--calcite-date-picker-corner-radius** - Specifies the component's border radius. \n- **--calcite-date-picker-range-calendar-divider-color** - Specifies the divider color between calendar's when `range=\"true\"`. \n- **--calcite-date-picker-week-header-text-color** - Specifies the week header text color. \n- **--calcite-date-picker-header-action-background-color** - Specifies the background color of header action's of the component. \n- **--calcite-date-picker-header-action-background-color-hover** - Specifies the background color of header action's of the component when hovered. \n- **--calcite-date-picker-header-action-background-color-press** - Specifies the background color of header action's of the component when pressed. \n- **--calcite-date-picker-header-action-text-color** - Specifies the text color of header action's of the component. \n- **--calcite-date-picker-header-action-text-color-press** - Specifies the text color of header action's of the component when pressed. \n- **--calcite-date-picker-year-text-color** - Specifies the text color of year & suffix of the component. \n- **--calcite-date-picker-month-select-font-size** - Specifies the font size of month select of the component. \n- **--calcite-date-picker-month-select-text-color** - Specifies the text color of month select of the component. \n- **--calcite-date-picker-month-select-icon-color** - Specifies the icon color of month select of the component. \n- **--calcite-date-picker-month-select-icon-color-hover** - Specifies the icon color of month select of the component when hovered. \n- **--calcite-date-picker-day-background-color** - Specifies the background color of day of the component. \n- **--calcite-date-picker-day-background-color-hover** - Specifies the background color of day of the component when hovered. \n- **--calcite-date-picker-day-text-color** - Specifies the text color of day of the component. \n- **--calcite-date-picker-day-text-color-hover** - Specifies the text color of day of the component when hovered. \n- **--calcite-date-picker-current-day-text-color** - Specifies the text color of current day of the component. \n- **--calcite-date-picker-day-background-color-selected** - Specifies the background color of selected day of the component. \n- **--calcite-date-picker-day-text-color-selected** - Specifies the text color of selected day of the component. \n- **--calcite-date-picker-day-range-text-color** - Specifies the text color of select day range of the component. \n- **--calcite-date-picker-day-range-background-color** - Specifies the background color of select day range of the component. \n- **--calcite-date-picker-day-outside-range-background-color-hover** - Specifies the background color of day's outside current range when hovered. \n- **--calcite-date-picker-day-outside-range-text-color-hover** - Specifies the text color of day's outside current range when hovered. ",
           "attributes": [
             {
               "name": "active-range",
@@ -4772,14 +4961,14 @@
             },
             {
               "name": "max",
-              "description": "Specifies the latest allowed date (`\"yyyy-mm-dd\"`).",
+              "description": "When the component resides in a form,\nspecifies the latest allowed date (`\"yyyy-mm-dd\"`).",
               "value": {
                 "type": "string"
               }
             },
             {
               "name": "min",
-              "description": "Specifies the earliest allowed date (`\"yyyy-mm-dd\"`).",
+              "description": "When the component resides in a form,\nspecifies the earliest allowed date (`\"yyyy-mm-dd\"`).",
               "value": {
                 "type": "string"
               }
@@ -4878,7 +5067,7 @@
               },
               {
                 "name": "max",
-                "description": "Specifies the latest allowed date (`\"yyyy-mm-dd\"`).",
+                "description": "When the component resides in a form,\nspecifies the latest allowed date (`\"yyyy-mm-dd\"`).",
                 "type": "string"
               },
               {
@@ -4893,7 +5082,7 @@
               },
               {
                 "name": "min",
-                "description": "Specifies the earliest allowed date (`\"yyyy-mm-dd\"`).",
+                "description": "When the component resides in a form,\nspecifies the earliest allowed date (`\"yyyy-mm-dd\"`).",
                 "type": "string"
               },
               {
@@ -5312,7 +5501,7 @@
         },
         {
           "name": "calcite-dialog",
-          "description": "### Events\n- **calciteDialogBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteDialogBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteDialogClose** - Fires when the component is closed and animation is complete.\n- **calciteDialogOpen** - Fires when the component is open and animation is complete.\n- **calciteDialogScroll** - Fires when the content is scrolled.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `scrollContentTo(options?: ScrollToOptions): Promise<void>` - Scrolls the component's content to a specified set of coordinates.\n- `setFocus(): Promise<void>` - Sets focus on the component's \"close\" button (the first focusable item).\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 content.\n- **content** - A slot for adding custom content.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the component.\n- **alerts** - A slot for adding `calcite-alert`s to the component.\n- **content-bottom** - A slot for adding content below the unnamed (default) slot and - if populated - the `footer` slot.\n- **content-top** - A slot for adding content above the unnamed (default) slot and - if populated - below the `action-bar` slot.\n- **header-actions-start** - A slot for adding actions or content to the starting side of the component's header.\n- **header-actions-end** - A slot for adding actions or content to the ending side of the component's header.\n- **header-content** - A slot for adding custom content to the component's header.\n- **header-menu-actions** - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.\n- **fab** - A slot for adding a `calcite-fab` (floating action button) to perform an action.\n- **footer** - A slot for adding custom content to the component's footer. Should not be used with the `\"footer-start\"` or `\"footer-end\"` slots.\n- **footer-end** - A slot for adding a trailing footer custom content. Should not be used with the `\"footer\"` slot.\n- **footer-start** - A slot for adding a leading footer custom content. Should not be used with the `\"footer\"` slot.\n\n### CSS Properties\n- **--calcite-dialog-scrim-background-color** - Specifies the background color of the component's scrim. \n- **--calcite-dialog-size-x** - Specifies the width of the component, using `px`, `em`, `rem`, `vw`, or `%`. Does not exceed the viewport's width - applies when `placement=\"cover\"` is set. \n- **--calcite-dialog-min-size-x** - Specifies the minimum width of the component, using `px`, `em`, `rem`, `vw`, or `%`. \n- **--calcite-dialog-max-size-x** - Specifies the maximum width of the component, using `px`, `em`, `rem`, `vw`, or `%`. \n- **--calcite-dialog-size-y** - Specifies the height of the component, using `px`, `em`, `rem`, `vh`, or `%`. Does not exceed the viewport's height - applies when `placement=\"cover\"` is set. \n- **--calcite-dialog-min-size-y** - Specifies the minimum height of the component, using `px`, `em`, `rem`, `vh`, or `%`. \n- **--calcite-dialog-max-size-y** - Specifies the maximum height of the component, using `px`, `em`, `rem`, `vh`, or `%`. \n- **--calcite-dialog-content-space** - Specifies the padding of the component's content. \n- **--calcite-dialog-footer-space** - Specifies the padding of the component's footer. \n- **--calcite-dialog-border-color** - Specifies the component's border color. \n- **--calcite-dialog-offset-x** - Specifies the horizontal offset of the component. \n- **--calcite-dialog-offset-y** - Specifies the vertical offset of the component. \n- **--calcite-dialog-background-color** - Specifies the background color of the component. ",
+          "description": "### Events\n- **calciteDialogBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteDialogBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteDialogClose** - Fires when the component is closed and animation is complete.\n- **calciteDialogOpen** - Fires when the component is open and animation is complete.\n- **calciteDialogScroll** - Fires when the content is scrolled.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `scrollContentTo(options?: ScrollToOptions): Promise<void>` - Scrolls the component's content to a specified set of coordinates.\n- `setFocus(): Promise<void>` - Sets focus on the component's \"close\" button (the first focusable item).\n- `updateFocusTrapElements(extraContainers?: FocusTrapOptions[\"extraContainers\"]): Promise<void>` - Updates the element(s) that are included in the focus-trap of the component.\n\n### Slots\n- _default_ - A slot for adding content.\n- **content** - [Deprecated] Use `custom-content` slot instead.\n- **custom-content** - A slot for displaying custom content. Will prevent the rendering of any default Dialog UI, except for `box-shadow` and `corner-radius`.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the component.\n- **alerts** - A slot for adding `calcite-alert`s to the component.\n- **content-bottom** - A slot for adding content below the unnamed (default) slot and - if populated - the `footer` slot.\n- **content-top** - A slot for adding content above the unnamed (default) slot and - if populated - below the `action-bar` slot.\n- **header-actions-start** - A slot for adding actions or content to the starting side of the component's header.\n- **header-actions-end** - A slot for adding actions or content to the ending side of the component's header.\n- **header-content** - A slot for adding custom content to the component's header.\n- **header-menu-actions** - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.\n- **fab** - A slot for adding a `calcite-fab` (floating action button) to perform an action.\n- **footer** - A slot for adding custom content to the component's footer. Should not be used with the `\"footer-start\"` or `\"footer-end\"` slots.\n- **footer-end** - A slot for adding a trailing footer custom content. Should not be used with the `\"footer\"` slot.\n- **footer-start** - A slot for adding a leading footer custom content. Should not be used with the `\"footer\"` slot.\n\n### CSS Properties\n- **--calcite-dialog-scrim-background-color** - Specifies the background color of the component's scrim. \n- **--calcite-dialog-size-x** - Specifies the width of the component, using `px`, `em`, `rem`, `vw`, or `%`. Does not exceed the viewport's width - applies when `placement=\"cover\"` is set. \n- **--calcite-dialog-min-size-x** - Specifies the minimum width of the component, using `px`, `em`, `rem`, `vw`, or `%`. \n- **--calcite-dialog-max-size-x** - Specifies the maximum width of the component, using `px`, `em`, `rem`, `vw`, or `%`. \n- **--calcite-dialog-size-y** - Specifies the height of the component, using `px`, `em`, `rem`, `vh`, or `%`. Does not exceed the viewport's height - applies when `placement=\"cover\"` is set. \n- **--calcite-dialog-min-size-y** - Specifies the minimum height of the component, using `px`, `em`, `rem`, `vh`, or `%`. \n- **--calcite-dialog-max-size-y** - Specifies the maximum height of the component, using `px`, `em`, `rem`, `vh`, or `%`. \n- **--calcite-dialog-content-space** - Specifies the padding of the component's content. \n- **--calcite-dialog-footer-space** - Specifies the padding of the component's footer. \n- **--calcite-dialog-border-color** - Specifies the component's border color. \n- **--calcite-dialog-offset-x** - Specifies the horizontal offset of the component. \n- **--calcite-dialog-offset-y** - Specifies the vertical offset of the component. \n- **--calcite-dialog-background-color** - Specifies the background color of the component. ",
           "attributes": [
             {
               "name": "close-disabled",
@@ -5345,6 +5534,14 @@
                 "type": "boolean"
               }
             },
+            {
+              "name": "focus-trap-disabled",
+              "description": "When `true` and `modal` is `false`, prevents focus trapping.",
+              "default": "false",
+              "value": {
+                "type": "boolean"
+              }
+            },
             {
               "name": "heading",
               "description": "The component header text.",
@@ -5498,7 +5695,11 @@
             },
             {
               "name": "content",
-              "description": "A slot for adding custom content."
+              "description": "[Deprecated] Use `custom-content` slot instead."
+            },
+            {
+              "name": "custom-content",
+              "description": "A slot for displaying custom content. Will prevent the rendering of any default Dialog UI, except for `box-shadow` and `corner-radius`."
             },
             {
               "name": "action-bar",
@@ -5603,6 +5804,16 @@
                 "description": "When `true`, disables the default close on escape behavior.\n\nBy default, an open dialog can be dismissed by pressing the Esc key.",
                 "type": "boolean"
               },
+              {
+                "name": "focusTrapDisabled",
+                "description": "When `true` and `modal` is `false`, prevents focus trapping.",
+                "type": "boolean"
+              },
+              {
+                "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).",
+                "type": "{\n    initialFocus?: FocusTargetOrFalse | (() => void);\n    returnFocusOnDeactivate?: boolean;\n    allowOutsideClick?: boolean | MouseEventToBoolean;\n    extraContainers?: string | HTMLElement | SVGElement | Array<string | HTMLElement | SVGElement>;\n}"
+              },
               {
                 "name": "heading",
                 "description": "The component header text.",
@@ -6400,7 +6611,7 @@
         },
         {
           "name": "calcite-flow",
-          "description": "### Methods\n- `back(): Promise<FlowItem[\"el\"] | FlowItemLikeElement>` - Removes the currently active `calcite-flow-item`.\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-flow-item` elements to the component.",
+          "description": "### Methods\n- `back(): Promise<FlowItem[\"el\"] | FlowItemLikeElement>` - Removes the currently active `calcite-flow-item`.\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-flow-item` elements to the component.\n\n### CSS Properties\n- **--calcite-flow-background-color** - Specifies the component's background color. ",
           "attributes": [],
           "slots": [
             {
@@ -6416,7 +6627,7 @@
         },
         {
           "name": "calcite-flow-item",
-          "description": "### Events\n- **calciteFlowItemBack** - Fires when the back button is clicked.\n- **calciteFlowItemClose** - Fires when the close button is clicked.\n- **calciteFlowItemScroll** - Fires when the content is scrolled.\n- **calciteFlowItemToggle** - Fires when the collapse button is clicked.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `scrollContentTo(options?: ScrollToOptions): Promise<void>` - Scrolls the component's content to a specified set of coordinates.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the component.\n- **alerts** - A slot for adding `calcite-alert`s to the component.\n- **content-top** - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).\n- **content-bottom** - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)\n- **header-actions-start** - A slot for adding `calcite-action`s or content to the start side of the component's header.\n- **header-actions-end** - A slot for adding `calcite-action`s or content to the end side of the component's header.\n- **header-content** - A slot for adding custom content to the component's header.\n- **header-menu-actions** - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.\n- **fab** - A slot for adding a `calcite-fab` (floating action button) to perform an action.\n- **footer** - A slot for adding custom content to the component's footer. Should not be used with the `\"footer-start\"` or `\"footer-end\"` slots.\n- **footer-actions** - [Deprecated] Use the `\"footer\"` slot instead. A slot for adding `calcite-button`s to the component's footer.\n- **footer-end** - A slot for adding a trailing footer custom content. Should not be used with the `\"footer\"` slot.\n- **footer-start** - A slot for adding a leading footer custom content. Should not be used with the `\"footer\"` slot.\n\n### CSS Properties\n- **--calcite-flow-item-footer-padding** - Specifies the padding of the component's footer. \n- **--calcite-flow-item-header-border-block-end** - Specifies the component header's block end border. ",
+          "description": "### Events\n- **calciteFlowItemBack** - Fires when the back button is clicked.\n- **calciteFlowItemClose** - Fires when the close button is clicked.\n- **calciteFlowItemScroll** - Fires when the content is scrolled.\n- **calciteFlowItemToggle** - Fires when the collapse button is clicked.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `scrollContentTo(options?: ScrollToOptions): Promise<void>` - Scrolls the component's content to a specified set of coordinates.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the component.\n- **alerts** - A slot for adding `calcite-alert`s to the component.\n- **content-top** - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).\n- **content-bottom** - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)\n- **header-actions-start** - A slot for adding `calcite-action`s or content to the start side of the component's header.\n- **header-actions-end** - A slot for adding `calcite-action`s or content to the end side of the component's header.\n- **header-content** - A slot for adding custom content to the component's header.\n- **header-menu-actions** - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.\n- **fab** - A slot for adding a `calcite-fab` (floating action button) to perform an action.\n- **footer** - A slot for adding custom content to the component's footer. Should not be used with the `\"footer-start\"` or `\"footer-end\"` slots.\n- **footer-actions** - [Deprecated] Use the `\"footer\"` slot instead. A slot for adding `calcite-button`s to the component's footer.\n- **footer-end** - A slot for adding a trailing footer custom content. Should not be used with the `\"footer\"` slot.\n- **footer-start** - A slot for adding a leading footer custom content. Should not be used with the `\"footer\"` slot.\n\n### CSS Properties\n- **--calcite-flow-item-footer-padding** - [Deprecated] Use `--calcite-flow-footer-space` instead. Specifies the padding of the component's footer. \n- **--calcite-flow-item-header-border-block-end** - [Deprecated] Use `--calcite-flow-border-color` instead. Specifies the component header's block end border. \n- **--calcite-flow-corner-radius** - Specifies the component's corner radius. \n- **--calcite-flow-heading-text-color** - Specifies the text color of the component's `heading`. \n- **--calcite-flow-description-text-color** - Specifies the text color of the component's `description`. \n- **--calcite-flow-border-color** - Specifies the component's border color. \n- **--calcite-flow-background-color** - Specifies the component's background color. \n- **--calcite-flow-header-background-color** - Specifies the background color of the component's header. \n- **--calcite-flow-footer-background-color** - Specifies the background color of the component's footer. \n- **--calcite-flow-space** - Specifies the padding of the component's `\"unnamed (default)\"` slot. \n- **--calcite-flow-header-content-space** - Specifies the padding of the `\"header-content\"` slot. \n- **--calcite-flow-footer-space** - Specifies the padding of the component's footer. \n- **--calcite-action-background-color** - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s. \n- **--calcite-action-background-color-hover** - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s. \n- **--calcite-action-background-color-pressed** - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s. \n- **--calcite-action-text-color-hover** - Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s. \n- **--calcite-action-text-color-pressed** - Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s. \n- **--calcite-popover-border-color** - Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s. \n- **--calcite-flow-header-action-background-color-hover** - Specifies the background color of the component's `calcite-action` items  in the flow item header when hovered. \n- **--calcite-flow-header-action-background-color-press** - Specifies the background color of the component's `calcite-action` items  in the flow item header when pressed. \n- **--calcite-flow-header-action-background-color** - Specifies the background color of the component's `calcite-action` items  in the flow item header. \n- **--calcite-flow-header-action-indicator-color** - Specifies the color of the component's `calcite-action` items' indicator in the flow item header. \n- **--calcite-flow-header-action-text-color-press** - Specifies the text color of the component's `calcite-action` items in the flow item header when pressed. \n- **--calcite-flow-header-action-text-color** - Specifies the text color of the component's `calcite-action` items in the flow item header. ",
           "attributes": [
             {
               "name": "closable",
@@ -6736,7 +6947,7 @@
         },
         {
           "name": "calcite-graph",
-          "description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.",
+          "description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### CSS Properties\n- **--calcite-graph-highlight-fill-color** - Specifies the fill color of the `highlight` element, when present. ",
           "attributes": [
             {
               "name": "highlight-max",
@@ -6806,7 +7017,7 @@
         },
         {
           "name": "calcite-handle",
-          "description": "### Events\n- **calciteHandleChange** - Fires whenever the component is selected or unselected.\n- **calciteHandleNudge** - Fires when the handle is selected and the up or down arrow key is pressed.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### CSS Properties\n- **--calcite-handle-background-color** - Specifies the component's background color. \n- **--calcite-handle-background-color-hover** - Specifies the component's background color on hover. \n- **--calcite-handle-background-color-selected** - Specifies the component's background color when selected. \n- **--calcite-handle-icon-color** - Specifies the component's icon color. \n- **--calcite-handle-icon-color-hover** - Specifies the component's icon color on hover. \n- **--calcite-handle-icon-color-selected** - Specifies the component's icon color when selected. ",
+          "description": "**Deprecated**: Use the `calcite-sort-handle` component instead..\n--\n\n### Events\n- **calciteHandleChange** - Fires whenever the component is selected or unselected.\n- **calciteHandleNudge** - Fires when the handle is selected and the up or down arrow key is pressed.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### CSS Properties\n- **--calcite-handle-background-color** - Specifies the component's background color. \n- **--calcite-handle-background-color-hover** - Specifies the component's background color on hover. \n- **--calcite-handle-background-color-selected** - Specifies the component's background color when selected. \n- **--calcite-handle-icon-color** - Specifies the component's icon color. \n- **--calcite-handle-icon-color-hover** - Specifies the component's icon color on hover. \n- **--calcite-handle-icon-color-selected** - Specifies the component's icon color when selected. ",
           "attributes": [
             {
               "name": "disabled",
@@ -6962,7 +7173,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(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding a `calcite-input`.",
+          "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(): 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. ",
           "attributes": [
             {
               "name": "controls",
@@ -7166,28 +7377,28 @@
             },
             {
               "name": "max",
-              "description": "Specifies the maximum value for type \"number\".",
+              "description": "When the component resides in a form,\nspecifies the maximum value for `type=\"number\"`.",
               "value": {
                 "type": "number"
               }
             },
             {
               "name": "max-length",
-              "description": "Specifies the maximum length of text for the component's value.",
+              "description": "When the component resides in a form,\nspecifies the maximum length of text for the component's value.",
               "value": {
                 "type": "number"
               }
             },
             {
               "name": "min",
-              "description": "Specifies the minimum value for `type=\"number\"`.",
+              "description": "When the component resides in a form,\nspecifies the minimum value for `type=\"number\"`.",
               "value": {
                 "type": "number"
               }
             },
             {
               "name": "min-length",
-              "description": "Specifies the minimum length of text for the component's value.",
+              "description": "When the component resides in a form,\nspecifies the minimum length of text for the component's value.",
               "value": {
                 "type": "number"
               }
@@ -7232,7 +7443,7 @@
             },
             {
               "name": "pattern",
-              "description": "Specifies a regex pattern the component's `value` must match for validation.\nRead the native attribute's documentation on MDN for more info.",
+              "description": "When the component resides in a form,\nspecifies a regular expression (regex) pattern the component's `value` must match for validation.\nRead the native attribute's documentation on MDN for more info.",
               "value": {
                 "type": "string"
               }
@@ -7261,7 +7472,7 @@
             },
             {
               "name": "required",
-              "description": "When `true`, the component must have a value in order for the form to submit.",
+              "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
               "default": "false",
               "value": {
                 "type": "boolean"
@@ -7440,12 +7651,12 @@
               },
               {
                 "name": "max",
-                "description": "Specifies the maximum value for type \"number\".",
+                "description": "When the component resides in a form,\nspecifies the maximum value for `type=\"number\"`.",
                 "type": "number"
               },
               {
                 "name": "maxLength",
-                "description": "Specifies the maximum length of text for the component's value.",
+                "description": "When the component resides in a form,\nspecifies the maximum length of text for the component's value.",
                 "type": "number"
               },
               {
@@ -7455,12 +7666,12 @@
               },
               {
                 "name": "min",
-                "description": "Specifies the minimum value for `type=\"number\"`.",
+                "description": "When the component resides in a form,\nspecifies the minimum value for `type=\"number\"`.",
                 "type": "number"
               },
               {
                 "name": "minLength",
-                "description": "Specifies the minimum length of text for the component's value.",
+                "description": "When the component resides in a form,\nspecifies the minimum length of text for the component's value.",
                 "type": "number"
               },
               {
@@ -7485,7 +7696,7 @@
               },
               {
                 "name": "pattern",
-                "description": "Specifies a regex pattern the component's `value` must match for validation.\nRead the native attribute's documentation on MDN for more info.",
+                "description": "When the component resides in a form,\nspecifies a regular expression (regex) pattern the component's `value` must match for validation.\nRead the native attribute's documentation on MDN for more info.",
                 "type": "string"
               },
               {
@@ -7505,7 +7716,7 @@
               },
               {
                 "name": "required",
-                "description": "When `true`, the component must have a value in order for the form to submit.",
+                "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
                 "type": "boolean"
               },
               {
@@ -7622,14 +7833,14 @@
             },
             {
               "name": "max",
-              "description": "Specifies the latest allowed date (\"yyyy-mm-dd\").",
+              "description": "When the component resides in a form,\nspecifies the latest allowed date (\"yyyy-mm-dd\").",
               "value": {
                 "type": "string"
               }
             },
             {
               "name": "min",
-              "description": "Specifies the earliest allowed date (\"yyyy-mm-dd\").",
+              "description": "When the component resides in a form,\nspecifies the earliest allowed date (\"yyyy-mm-dd\").",
               "value": {
                 "type": "string"
               }
@@ -7723,7 +7934,7 @@
             },
             {
               "name": "required",
-              "description": "When `true`, the component must have a value in order for the form to submit.",
+              "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
               "default": "false",
               "value": {
                 "type": "boolean"
@@ -7839,7 +8050,7 @@
               },
               {
                 "name": "max",
-                "description": "Specifies the latest allowed date (\"yyyy-mm-dd\").",
+                "description": "When the component resides in a form,\nspecifies the latest allowed date (\"yyyy-mm-dd\").",
                 "type": "string"
               },
               {
@@ -7854,7 +8065,7 @@
               },
               {
                 "name": "min",
-                "description": "Specifies the earliest allowed date (\"yyyy-mm-dd\").",
+                "description": "When the component resides in a form,\nspecifies the earliest allowed date (\"yyyy-mm-dd\").",
                 "type": "string"
               },
               {
@@ -7909,7 +8120,7 @@
               },
               {
                 "name": "required",
-                "description": "When `true`, the component must have a value in order for the form to submit.",
+                "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
                 "type": "boolean"
               },
               {
@@ -8146,28 +8357,28 @@
             },
             {
               "name": "max",
-              "description": "Specifies the maximum value.",
+              "description": "When the component resides in a form,\nspecifies the maximum value.",
               "value": {
                 "type": "number"
               }
             },
             {
               "name": "max-length",
-              "description": "**Deprecated**: This property has no effect on the component.. Specifies the maximum length of text for the component's value.",
+              "description": "**Deprecated**: This property has no effect on the component.. When the component resides in a form,\nspecifies the maximum length of text for the component's value.",
               "value": {
                 "type": "number"
               }
             },
             {
               "name": "min",
-              "description": "Specifies the minimum value.",
+              "description": "When the component resides in a form,\nspecifies the minimum value.",
               "value": {
                 "type": "number"
               }
             },
             {
               "name": "min-length",
-              "description": "**Deprecated**: This property has no effect on the component.. Specifies the minimum length of text for the component's value.",
+              "description": "**Deprecated**: This property has no effect on the component.. When the component resides in a form,\nspecifies the minimum length of text for the component's value.",
               "value": {
                 "type": "number"
               }
@@ -8226,7 +8437,7 @@
             },
             {
               "name": "required",
-              "description": "When `true`, the component must have a value in order for the form to submit.",
+              "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
               "default": "false",
               "value": {
                 "type": "boolean"
@@ -8375,12 +8586,12 @@
               },
               {
                 "name": "max",
-                "description": "Specifies the maximum value.",
+                "description": "When the component resides in a form,\nspecifies the maximum value.",
                 "type": "number"
               },
               {
                 "name": "maxLength",
-                "description": "Specifies the maximum length of text for the component's value.",
+                "description": "When the component resides in a form,\nspecifies the maximum length of text for the component's value.",
                 "type": "number"
               },
               {
@@ -8390,12 +8601,12 @@
               },
               {
                 "name": "min",
-                "description": "Specifies the minimum value.",
+                "description": "When the component resides in a form,\nspecifies the minimum value.",
                 "type": "number"
               },
               {
                 "name": "minLength",
-                "description": "Specifies the minimum length of text for the component's value.",
+                "description": "When the component resides in a form,\nspecifies the minimum length of text for the component's value.",
                 "type": "number"
               },
               {
@@ -8430,7 +8641,7 @@
               },
               {
                 "name": "required",
-                "description": "When `true`, the component must have a value in order for the form to submit.",
+                "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
                 "type": "boolean"
               },
               {
@@ -8561,14 +8772,14 @@
             },
             {
               "name": "max-length",
-              "description": "Specifies the maximum length of text for the component's value.",
+              "description": "When the component resides in a form,\nspecifies the maximum length of text for the component's value.",
               "value": {
                 "type": "number"
               }
             },
             {
               "name": "min-length",
-              "description": "Specifies the minimum length of text for the component's value.",
+              "description": "When the component resides in a form,\nspecifies the minimum length of text for the component's value.",
               "value": {
                 "type": "number"
               }
@@ -8582,7 +8793,7 @@
             },
             {
               "name": "pattern",
-              "description": "Specifies a regex pattern the component's `value` must match for validation.\nRead the native attribute's documentation on MDN for more info.",
+              "description": "When the component resides in a form,\nspecifies a regular expression (regex) pattern the component's `value` must match for validation.\nRead the native attribute's documentation on MDN for more info.",
               "value": {
                 "type": "string"
               }
@@ -8611,7 +8822,7 @@
             },
             {
               "name": "required",
-              "description": "When `true`, the component must have a value in order for the form to submit.",
+              "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
               "default": "false",
               "value": {
                 "type": "boolean"
@@ -8740,7 +8951,7 @@
               },
               {
                 "name": "maxLength",
-                "description": "Specifies the maximum length of text for the component's value.",
+                "description": "When the component resides in a form,\nspecifies the maximum length of text for the component's value.",
                 "type": "number"
               },
               {
@@ -8750,7 +8961,7 @@
               },
               {
                 "name": "minLength",
-                "description": "Specifies the minimum length of text for the component's value.",
+                "description": "When the component resides in a form,\nspecifies the minimum length of text for the component's value.",
                 "type": "number"
               },
               {
@@ -8760,7 +8971,7 @@
               },
               {
                 "name": "pattern",
-                "description": "Specifies a regex pattern the component's `value` must match for validation.\nRead the native attribute's documentation on MDN for more info.",
+                "description": "When the component resides in a form,\nspecifies a regular expression (regex) pattern the component's `value` must match for validation.\nRead the native attribute's documentation on MDN for more info.",
                 "type": "string"
               },
               {
@@ -8780,7 +8991,7 @@
               },
               {
                 "name": "required",
-                "description": "When `true`, the component must have a value in order for the form to submit.",
+                "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
                 "type": "boolean"
               },
               {
@@ -8874,14 +9085,14 @@
             },
             {
               "name": "max",
-              "description": "Specifies the maximum value.",
+              "description": "When the component resides in a form,\nspecifies the maximum value.",
               "value": {
                 "type": "string"
               }
             },
             {
               "name": "min",
-              "description": "Specifies the minimum value.",
+              "description": "When the component resides in a form,\nspecifies the minimum value.",
               "value": {
                 "type": "string"
               }
@@ -8963,7 +9174,7 @@
             },
             {
               "name": "required",
-              "description": "When `true`, the component must have a value in order for the form to submit.",
+              "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
               "default": "false",
               "value": {
                 "type": "boolean"
@@ -9077,7 +9288,7 @@
               },
               {
                 "name": "max",
-                "description": "Specifies the maximum value.",
+                "description": "When the component resides in a form,\nspecifies the maximum value.",
                 "type": "string"
               },
               {
@@ -9087,7 +9298,7 @@
               },
               {
                 "name": "min",
-                "description": "Specifies the minimum value.",
+                "description": "When the component resides in a form,\nspecifies the minimum value.",
                 "type": "string"
               },
               {
@@ -9122,7 +9333,7 @@
               },
               {
                 "name": "required",
-                "description": "When `true`, the component must have a value in order for the form to submit.",
+                "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
                 "type": "boolean"
               },
               {
@@ -10408,11 +10619,11 @@
         },
         {
           "name": "calcite-loader",
-          "description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### CSS Properties\n- **--calcite-loader-font-size** - Specifies the font size of the loading percentage when type is `\"determinate\"`. \n- **--calcite-loader-size** - Specifies the width and height of the component when not set to inline. \n- **--calcite-loader-size-inline** - [Deprecated] Use `--calcite-loader-size`. Specifies the width and height of the component when set to inline. \n- **--calcite-loader-spacing** - Specifies the the component's padding. \n- **--calcite-loader-progress-color-inline** - Specifies the width and height of the component when set to inline. \n- **--calcite-loader-text-spacing** - Specifies the component's text margin. \n- **--calcite-loader-text-weight** - Specifies the component's font weight. \n- **--calcite-loader-text-color** - Specifies the component's text color. \n- **--calcite-loader-progress-color** - Specifies the component's progress ring color. \n- **--calcite-loader-track-color** - Specifies the component's track color. ",
+          "description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### CSS Properties\n- **--calcite-loader-font-size** - When `type` is not `\"indeterminate\"` or `inline`, specifies the font size of the loading percentage. \n- **--calcite-loader-size** - When `inline` is not set, specifies the component's width and height. \n- **--calcite-loader-size-inline** - [Deprecated] Use `--calcite-loader-size`. Specifies the width and height of the component when set to inline. \n- **--calcite-loader-spacing** - Specifies the the component's padding. \n- **--calcite-loader-progress-color-inline** - When `inline`, specifies the component's progress ring color. \n- **--calcite-loader-text-spacing** - When not `inline`, specifies the component's `text` margin. \n- **--calcite-loader-text-weight** - When not `inline` and `text` is provided, specifies the component's `text` font weight. \n- **--calcite-loader-text-color** - When not `inline` and `text` is provided, specifies the component's `text` color. \n- **--calcite-loader-progress-color** - When not `inline`, specifies the component's progress ring color. \n- **--calcite-loader-track-color** - Specifies the component's track color. ",
           "attributes": [
             {
               "name": "inline",
-              "description": "When `true`, displays smaller and appears to the left of the text.",
+              "description": "When `true`, the component displays smaller.",
               "default": "false",
               "value": {
                 "type": "boolean"
@@ -10439,7 +10650,7 @@
             },
             {
               "name": "text",
-              "description": "Text that displays under the component's indicator.",
+              "description": "When not `inline`, displays text under the component's indicator.",
               "default": "\"\"",
               "value": {
                 "type": "string"
@@ -10471,7 +10682,7 @@
             "properties": [
               {
                 "name": "inline",
-                "description": "When `true`, displays smaller and appears to the left of the text.",
+                "description": "When `true`, the component displays smaller.",
                 "type": "boolean"
               },
               {
@@ -10486,7 +10697,7 @@
               },
               {
                 "name": "text",
-                "description": "Text that displays under the component's indicator.",
+                "description": "When not `inline`, displays text under the component's indicator.",
                 "type": "string"
               },
               {
@@ -10997,7 +11208,7 @@
         },
         {
           "name": "calcite-modal",
-          "description": "**Deprecated**: Use the `calcite-dialog` component instead..\n--\n\n### Events\n- **calciteModalBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteModalBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteModalClose** - Fires when the component is closed and animation is complete.\n- **calciteModalOpen** - 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- `scrollContent(top?: number, left?: number): Promise<void>` - Sets the scroll top of the component's content.\n- `setFocus(): Promise<void>` - Sets focus on the component's \"close\" button (the first focusable item).\n- `updateFocusTrapElements(): Promise<void>` - Updates the element(s) that are used within the focus-trap of the component.\n\n### Slots\n- **header** - A slot for adding header text.\n- **content** - A slot for adding the component's content.\n- **content-top** - A slot for adding content to the component's sticky header, where content remains at the top of the component when scrolling up and down.\n- **content-bottom** - A slot for adding content to the component's sticky footer, where content remains at the bottom of the component when scrolling up and down.\n- **primary** - A slot for adding a primary button.\n- **secondary** - A slot for adding a secondary button.\n- **back** - A slot for adding a back button.\n\n### CSS Properties\n- **--calcite-modal-content-background** - Specifies the background color of content placed in the component's `\"content\"` slot. \n- **--calcite-modal-content-padding** - Specifies the padding of the component's `\"content\"` slot. \n- **--calcite-modal-scrim-background** - Specifies the background color of the component's scrim. \n- **--calcite-modal-width** - Specifies the width of the component, using `px`, `em`, `rem`, `vw`, or `%`. Will never exceed the width of the viewport. Will not apply if `fullscreen` if set. \n- **--calcite-modal-height** - Specifies the height of the component, using `px`, `em`, `rem`, `vh`, or `%`. Will never exceed the height of the viewport. Will not apply if `fullscreen` if set. ",
+          "description": "**Deprecated**: Use the `calcite-dialog` component instead..\n--\n\n### Events\n- **calciteModalBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteModalBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteModalClose** - Fires when the component is closed and animation is complete.\n- **calciteModalOpen** - 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- `scrollContent(top?: number, left?: number): Promise<void>` - Sets the scroll top of the component's content.\n- `setFocus(): Promise<void>` - Sets focus on the component's \"close\" button (the first focusable item).\n- `updateFocusTrapElements(extraContainers?: FocusTrapOptions[\"extraContainers\"]): Promise<void>` - Updates the element(s) that are included in the focus-trap of the component.\n\n### Slots\n- **header** - A slot for adding header text.\n- **content** - A slot for adding the component's content.\n- **content-top** - A slot for adding content to the component's sticky header, where content remains at the top of the component when scrolling up and down.\n- **content-bottom** - A slot for adding content to the component's sticky footer, where content remains at the bottom of the component when scrolling up and down.\n- **primary** - A slot for adding a primary button.\n- **secondary** - A slot for adding a secondary button.\n- **back** - A slot for adding a back button.\n\n### CSS Properties\n- **--calcite-modal-content-background** - Specifies the background color of content placed in the component's `\"content\"` slot. \n- **--calcite-modal-content-padding** - Specifies the padding of the component's `\"content\"` slot. \n- **--calcite-modal-scrim-background** - Specifies the background color of the component's scrim. \n- **--calcite-modal-width** - Specifies the width of the component, using `px`, `em`, `rem`, `vw`, or `%`. Will never exceed the width of the viewport. Will not apply if `fullscreen` if set. \n- **--calcite-modal-height** - Specifies the height of the component, using `px`, `em`, `rem`, `vh`, or `%`. Will never exceed the height of the viewport. Will not apply if `fullscreen` if set. ",
           "attributes": [
             {
               "name": "close-button-disabled",
@@ -11172,6 +11383,11 @@
                 "description": "When `true`, prevents focus trapping.",
                 "type": "boolean"
               },
+              {
+                "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).",
+                "type": "{\n    initialFocus?: FocusTargetOrFalse | (() => void);\n    returnFocusOnDeactivate?: boolean;\n    allowOutsideClick?: boolean | MouseEventToBoolean;\n    extraContainers?: string | HTMLElement | SVGElement | Array<string | HTMLElement | SVGElement>;\n}"
+              },
               {
                 "name": "fullscreen",
                 "description": "Sets the component to always be fullscreen. Overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`.",
@@ -11975,7 +12191,7 @@
         },
         {
           "name": "calcite-panel",
-          "description": "### Events\n- **calcitePanelClose** - Fires when the close button is clicked.\n- **calcitePanelScroll** - Fires when the content is scrolled.\n- **calcitePanelToggle** - Fires when the collapse button is clicked.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `scrollContentTo(options?: ScrollToOptions): Promise<void>` - Scrolls the component's content to a specified set of coordinates.\n- `setFocus(): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the component.\n- **alerts** - A slot for adding `calcite-alert`s to the component.\n- **content-bottom** - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)\n- **content-top** - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).\n- **header-actions-start** - A slot for adding actions or content to the start side of the header.\n- **header-actions-end** - A slot for adding actions or content to the end side of the header.\n- **header-content** - A slot for adding custom content to the header.\n- **header-menu-actions** - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.\n- **fab** - A slot for adding a `calcite-fab` (floating action button) to perform an action.\n- **footer** - A slot for adding custom content to the component's footer. Should not be used with the `\"footer-start\"` or `\"footer-end\"` slots.\n- **footer-actions** - [Deprecated] Use the `footer-start` and `footer-end` slots instead. A slot for adding `calcite-button`s to the component's footer.\n- **footer-end** - A slot for adding a trailing footer custom content. Should not be used with the `\"footer\"` slot.\n- **footer-start** - A slot for adding a leading footer custom content. Should not be used with the `\"footer\"` slot.\n\n### CSS Properties\n- **--calcite-panel-corner-radius** - Specifies the component's corner radius. \n- **--calcite-panel-heading-text-color** - Specifies the text color of the component's `heading`. \n- **--calcite-panel-description-text-color** - Specifies the text color of the component's `description`. \n- **--calcite-panel-border-color** - Specifies the component's border color. \n- **--calcite-panel-background-color** - Specifies the component's background color. \n- **--calcite-panel-header-background-color** - Specifies the background color of the component's header. \n- **--calcite-panel-footer-background-color** - Specifies the background color of the component's footer. \n- **--calcite-panel-space** - Specifies the padding of the component's `\"unnamed (default)\"` slot. \n- **--calcite-panel-header-content-space** - Specifies the padding of the `\"header-content\"` slot. \n- **--calcite-panel-footer-space** - Specifies the padding of the component's footer. \n- **--calcite-action-background-color** - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s. \n- **--calcite-action-background-color-hover** - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s. \n- **--calcite-action-background-color-pressed** - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s. \n- **--calcite-action-text-color-hover** - Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s. \n- **--calcite-action-text-color-pressed** - Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s. \n- **--calcite-popover-border-color** - Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s. \n- **--calcite-panel-content-space** - [Deprecated] Use `--calcite-panel-space` instead. Specifies the padding of the component's content. \n- **--calcite-panel-footer-padding** - [Deprecated] Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer. \n- **--calcite-panel-header-border-block-end** - [Deprecated] Use `--calcite-panel-border-color` instead. Specifies the component header's block end border. ",
+          "description": "### Events\n- **calcitePanelClose** - Fires when the close button is clicked.\n- **calcitePanelScroll** - Fires when the content is scrolled.\n- **calcitePanelToggle** - Fires when the collapse button is clicked.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `scrollContentTo(options?: ScrollToOptions): Promise<void>` - Scrolls the component's content to a specified set of coordinates.\n- `setFocus(): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the component.\n- **alerts** - A slot for adding `calcite-alert`s to the component.\n- **content-bottom** - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)\n- **content-top** - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).\n- **header-actions-start** - A slot for adding actions or content to the start side of the header.\n- **header-actions-end** - A slot for adding actions or content to the end side of the header.\n- **header-content** - A slot for adding custom content to the header.\n- **header-menu-actions** - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.\n- **fab** - A slot for adding a `calcite-fab` (floating action button) to perform an action.\n- **footer** - A slot for adding custom content to the component's footer. Should not be used with the `\"footer-start\"` or `\"footer-end\"` slots.\n- **footer-actions** - [Deprecated] Use the `footer-start` and `footer-end` slots instead. A slot for adding `calcite-button`s to the component's footer.\n- **footer-end** - A slot for adding a trailing footer custom content. Should not be used with the `\"footer\"` slot.\n- **footer-start** - A slot for adding a leading footer custom content. Should not be used with the `\"footer\"` slot.\n\n### CSS Properties\n- **--calcite-panel-corner-radius** - Specifies the component's corner radius. \n- **--calcite-panel-heading-text-color** - Specifies the text color of the component's `heading`. \n- **--calcite-panel-description-text-color** - Specifies the text color of the component's `description`. \n- **--calcite-panel-border-color** - Specifies the component's border color. \n- **--calcite-panel-background-color** - Specifies the component's background color. \n- **--calcite-panel-header-background-color** - Specifies the background color of the component's header. \n- **--calcite-panel-footer-background-color** - Specifies the background color of the component's footer. \n- **--calcite-panel-space** - Specifies the padding of the component's `\"unnamed (default)\"` slot. \n- **--calcite-panel-header-content-space** - Specifies the padding of the `\"header-content\"` slot. \n- **--calcite-panel-footer-space** - Specifies the padding of the component's footer. \n- **--calcite-action-background-color** - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s. \n- **--calcite-action-background-color-hover** - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s. \n- **--calcite-action-background-color-pressed** - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s. \n- **--calcite-action-text-color-hover** - Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s. \n- **--calcite-action-text-color-pressed** - Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s. \n- **--calcite-popover-border-color** - Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s. \n- **--calcite-panel-content-space** - [Deprecated] Use `--calcite-panel-space` instead. Specifies the padding of the component's content. \n- **--calcite-panel-footer-padding** - [Deprecated] Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer. \n- **--calcite-panel-header-border-block-end** - [Deprecated] Use `--calcite-panel-border-color` instead. Specifies the component header's block end border. \n- **--calcite-panel-header-action-background-color-hover** - Specifies the background color of the component's `calcite-action` items  in the panel header when hovered. \n- **--calcite-panel-header-action-background-color-press** - Specifies the background color of the component's `calcite-action` items  in the panel header when pressed. \n- **--calcite-panel-header-action-background-color** - Specifies the background color of the component's `calcite-action` items  in the panel header. \n- **--calcite-panel-header-action-indicator-color** - Specifies the color of the component's `calcite-action` items' indicator in the panel header. \n- **--calcite-panel-header-action-text-color-press** - Specifies the text color of the component's `calcite-action` items in the panel header when pressed. \n- **--calcite-panel-header-action-text-color** - Specifies the text color of the component's `calcite-action` items in the panel header. ",
           "attributes": [
             {
               "name": "closable",
@@ -12349,16 +12565,6 @@
                 ]
               }
             },
-            {
-              "name": "initial-focus-trap-focus",
-              "description": "Specifies whether focus should move to the popover when the focus trap is activated.\n `@internal`",
-              "value": {
-                "type": [
-                  "boolean",
-                  "string"
-                ]
-              }
-            },
             {
               "name": "label",
               "description": "Accessible name for the component.",
@@ -12522,6 +12728,11 @@
                 "description": "When `true`, prevents focus trapping.",
                 "type": "boolean"
               },
+              {
+                "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).",
+                "type": "{\n    initialFocus?: FocusTargetOrFalse | (() => void);\n    returnFocusOnDeactivate?: boolean;\n    allowOutsideClick?: boolean | MouseEventToBoolean;\n    extraContainers?: string | HTMLElement | SVGElement | Array<string | HTMLElement | SVGElement>;\n}"
+              },
               {
                 "name": "heading",
                 "description": "The component header text.",
@@ -12532,11 +12743,6 @@
                 "description": "Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.",
                 "type": "1 | 2 | 3 | 4 | 5 | 6"
               },
-              {
-                "name": "initialFocusTrapFocus",
-                "description": "Specifies whether focus should move to the popover when the focus trap is activated.\n `@internal`",
-                "type": "((() => FocusTargetValueOrFalse)) | HTMLElement | SVGElement | boolean | string"
-              },
               {
                 "name": "label",
                 "description": "Accessible name for the component.",
@@ -12731,7 +12937,7 @@
             },
             {
               "name": "required",
-              "description": "When `true`, the component must have a value selected from the `calcite-radio-button-group` in order for the form to submit.",
+              "description": "When `true` and the component resides in a form,\nthe component must have a value selected from the `calcite-radio-button-group` in order for the form to submit.",
               "default": "false",
               "value": {
                 "type": "boolean"
@@ -12788,7 +12994,7 @@
               },
               {
                 "name": "required",
-                "description": "When `true`, the component must have a value selected from the `calcite-radio-button-group` in order for the form to submit.",
+                "description": "When `true` and the component resides in a form,\nthe component must have a value selected from the `calcite-radio-button-group` in order for the form to submit.",
                 "type": "boolean"
               },
               {
@@ -12844,7 +13050,7 @@
             },
             {
               "name": "required",
-              "description": "When `true`, the component must have a value in order for the form to submit.",
+              "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
               "default": "false",
               "value": {
                 "type": "boolean"
@@ -12924,7 +13130,7 @@
               },
               {
                 "name": "required",
-                "description": "When `true`, the component must have a value in order for the form to submit.",
+                "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
                 "type": "boolean"
               },
               {
@@ -13194,7 +13400,7 @@
         },
         {
           "name": "calcite-segmented-control",
-          "description": "### Events\n- **calciteSegmentedControlChange** - Fires when the `calcite-segmented-control-item` selection changes.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-segmented-control-item`s.",
+          "description": "### Events\n- **calciteSegmentedControlChange** - Fires when the `calcite-segmented-control-item` selection changes.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component.\n\n### Slots\n- _default_ - A slot for adding `calcite-segmented-control-item`s.\n\n### CSS Properties\n- **--calcite-segmented-control-border-color** - Specifies the component's border color. ",
           "attributes": [
             {
               "name": "appearance",
@@ -13243,7 +13449,7 @@
             },
             {
               "name": "required",
-              "description": "When `true`, the component must have a value in order for the form to submit.",
+              "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
               "default": "false",
               "value": {
                 "type": "boolean"
@@ -13351,7 +13557,7 @@
               },
               {
                 "name": "required",
-                "description": "When `true`, the component must have a value in order for the form to submit.",
+                "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
                 "type": "boolean"
               },
               {
@@ -13406,7 +13612,7 @@
         },
         {
           "name": "calcite-segmented-control-item",
-          "description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.",
+          "description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### CSS Properties\n- **--calcite-segmented-control-color** - Specifies the component's color. \n- **--calcite-segmented-control-background-color** - Specifies the component's background color. \n- **--calcite-segmented-control-border-color** - Specifies the component's border color. \n- **--calcite-segmented-control-shadow** - Specifies the component's shadow. \n- **--calcite-segmented-control-icon-color** - Specifies the icons's color. ",
           "attributes": [
             {
               "name": "checked",
@@ -13513,7 +13719,7 @@
             },
             {
               "name": "required",
-              "description": "When `true`, the component must have a value in order for the form to submit.",
+              "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
               "default": "false",
               "value": {
                 "type": "boolean"
@@ -13617,7 +13823,7 @@
               },
               {
                 "name": "required",
-                "description": "When `true`, the component must have a value in order for the form to submit.",
+                "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
                 "type": "boolean"
               },
               {
@@ -13672,7 +13878,7 @@
         },
         {
           "name": "calcite-sheet",
-          "description": "### Events\n- **calciteSheetBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteSheetBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteSheetClose** - Fires when the component is closed and animation is complete.\n- **calciteSheetOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's \"close\" button - the first focusable item.\n- `updateFocusTrapElements(): Promise<void>` - Updates the element(s) that are used within the focus-trap of the component.\n\n### CSS Properties\n- **--calcite-sheet-scrim-background** - Specifies the background color of the sheet scrim. \n- **--calcite-sheet-width** - When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the width of the component. \n- **--calcite-sheet-max-width** - When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the maximum width of the component. \n- **--calcite-sheet-min-width** - When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the minimum width of the component. \n- **--calcite-sheet-height** - When `position` is `\"block-start\"` or `\"block-end\"`, specifies the height of the component. \n- **--calcite-sheet-max-height** - When `position` is `\"block-start\"` or `\"block-end\"`, specifies the maximum height of the component. \n- **--calcite-sheet-min-height** - When `position` is `\"block-start\"` or `\"block-end\"`, specifies the minimum height of the component. ",
+          "description": "### Events\n- **calciteSheetBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteSheetBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteSheetClose** - Fires when the component is closed and animation is complete.\n- **calciteSheetOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's \"close\" button - the first focusable item.\n- `updateFocusTrapElements(extraContainers?: FocusTrapOptions[\"extraContainers\"]): Promise<void>` - Updates the element(s) that are included in the focus-trap of the component.\n\n### Slots\n- _default_ - A slot for adding custom content.\n\n### CSS Properties\n- **--calcite-sheet-scrim-background** - Specifies the background color of the sheet scrim. \n- **--calcite-sheet-width** - When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the width of the component. \n- **--calcite-sheet-max-width** - When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the maximum width of the component. \n- **--calcite-sheet-min-width** - When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the minimum width of the component. \n- **--calcite-sheet-height** - When `position` is `\"block-start\"` or `\"block-end\"`, specifies the height of the component. \n- **--calcite-sheet-max-height** - When `position` is `\"block-start\"` or `\"block-end\"`, specifies the maximum height of the component. \n- **--calcite-sheet-min-height** - When `position` is `\"block-start\"` or `\"block-end\"`, specifies the minimum height of the component. ",
           "attributes": [
             {
               "name": "display-mode",
@@ -13792,6 +13998,12 @@
               }
             }
           ],
+          "slots": [
+            {
+              "name": "",
+              "description": "A slot for adding custom content."
+            }
+          ],
           "events": [
             {
               "name": "calciteSheetBeforeClose",
@@ -13836,6 +14048,11 @@
                 "description": "When `true`, prevents focus trapping.",
                 "type": "boolean"
               },
+              {
+                "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).",
+                "type": "{\n    initialFocus?: FocusTargetOrFalse | (() => void);\n    returnFocusOnDeactivate?: boolean;\n    allowOutsideClick?: boolean | MouseEventToBoolean;\n    extraContainers?: string | HTMLElement | SVGElement | Array<string | HTMLElement | SVGElement>;\n}"
+              },
               {
                 "name": "height",
                 "description": "Specifies the height of the component.",
@@ -14056,7 +14273,7 @@
         },
         {
           "name": "calcite-shell-panel",
-          "description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the component.\n\n### CSS Properties\n- **--calcite-shell-panel-width** - Specifies the width of the component. \n- **--calcite-shell-panel-max-width** - Specifies the maximum width of the component. \n- **--calcite-shell-panel-min-width** - Specifies the minimum width of the component. \n- **--calcite-shell-panel-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the height of the component. \n- **--calcite-shell-panel-max-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the maximum height of the component. \n- **--calcite-shell-panel-min-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the minimum height of the component. \n- **--calcite-shell-panel-z-index** - Specifies the z-index value for the component. ",
+          "description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding custom content.\n- **action-bar** - A slot for adding a `calcite-action-bar` to the component.\n\n### CSS Properties\n- **--calcite-shell-panel-width** - Specifies the width of the component. \n- **--calcite-shell-panel-max-width** - Specifies the maximum width of the component. \n- **--calcite-shell-panel-min-width** - Specifies the minimum width of the component. \n- **--calcite-shell-panel-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the height of the component. \n- **--calcite-shell-panel-max-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the maximum height of the component. \n- **--calcite-shell-panel-min-height** - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the minimum height of the component. \n- **--calcite-shell-panel-z-index** - Specifies the z-index value for the component. \n- **--calcite-shell-panel-border-color** - When `displayMode` is `\"float-all\"`, specifies the component's border color. \n- **--calcite-shell-panel-corner-radius** - When `displayMode` is `\"float-all\"`, specifies the component's corner radius \n- **--calcite-shell-panel-shadow** - When `displayMode` is `\"float-all\"`, specifies the component's shadow. ",
           "attributes": [
             {
               "name": "collapsed",
@@ -14373,7 +14590,7 @@
             },
             {
               "name": "required",
-              "description": "When `true`, the component must have a value in order for the form to submit.",
+              "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
               "default": "false",
               "value": {
                 "type": "boolean"
@@ -14573,7 +14790,7 @@
               },
               {
                 "name": "required",
-                "description": "When `true`, the component must have a value in order for the form to submit.",
+                "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
                 "type": "boolean"
               },
               {
@@ -14858,7 +15075,7 @@
         },
         {
           "name": "calcite-sortable-list",
-          "description": "### Events\n- **calciteListOrderChange** - Emitted when the order of the list has changed.\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 sortable items.",
+          "description": "**Deprecated**: Use the `calcite-block-group` component instead..\n--\n\n### Events\n- **calciteListOrderChange** - Emitted when the order of the list has changed.\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 sortable items.",
           "attributes": [
             {
               "name": "disabled",
@@ -16527,16 +16744,24 @@
                 "type": "string"
               }
             },
+            {
+              "name": "limit-text",
+              "description": "When `true`, prevents input beyond the maximum length, mimicking native `<textarea>` behavior.",
+              "default": "false",
+              "value": {
+                "type": "boolean"
+              }
+            },
             {
               "name": "max-length",
-              "description": "Specifies the maximum number of characters allowed.",
+              "description": "When the component resides in a form,\nspecifies the maximum number of characters allowed.",
               "value": {
                 "type": "number"
               }
             },
             {
               "name": "min-length",
-              "description": "Specifies the minimum number of characters allowed.",
+              "description": "When the component resides in a form,\nspecifies the minimum number of characters allowed.",
               "value": {
                 "type": "number"
               }
@@ -16576,7 +16801,7 @@
             },
             {
               "name": "required",
-              "description": "When `true`, the component must have a value in order for the form to submit.",
+              "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
               "default": "false",
               "value": {
                 "type": "boolean"
@@ -16716,9 +16941,14 @@
                 "description": "Accessible name for the component.",
                 "type": "string"
               },
+              {
+                "name": "limitText",
+                "description": "When `true`, prevents input beyond the maximum length, mimicking native `<textarea>` behavior.",
+                "type": "boolean"
+              },
               {
                 "name": "maxLength",
-                "description": "Specifies the maximum number of characters allowed.",
+                "description": "When the component resides in a form,\nspecifies the maximum number of characters allowed.",
                 "type": "number"
               },
               {
@@ -16728,7 +16958,7 @@
               },
               {
                 "name": "minLength",
-                "description": "Specifies the minimum number of characters allowed.",
+                "description": "When the component resides in a form,\nspecifies the minimum number of characters allowed.",
                 "type": "number"
               },
               {
@@ -16753,7 +16983,7 @@
               },
               {
                 "name": "required",
-                "description": "When `true`, the component must have a value in order for the form to submit.",
+                "description": "When `true` and the component resides in a form,\nthe component must have a value in order for the form to submit.",
                 "type": "boolean"
               },
               {
@@ -17398,7 +17628,7 @@
         },
         {
           "name": "calcite-time-picker",
-          "description": "### Events\n- **calciteTimePickerChange**\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's first focusable element.",
+          "description": "### Events\n- **calciteTimePickerChange** - Fires when a user changes the component's time\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise<void>` - Sets focus on the component's first focusable element.",
           "attributes": [
             {
               "name": "hour-format",
@@ -17454,7 +17684,8 @@
           "events": [
             {
               "name": "calciteTimePickerChange",
-              "type": "undefined"
+              "type": "undefined",
+              "description": "Fires when a user changes the component's time"
             }
           ],
           "js": {
@@ -17493,7 +17724,8 @@
             "events": [
               {
                 "name": "calciteTimePickerChange",
-                "type": "undefined"
+                "type": "undefined",
+                "description": "Fires when a user changes the component's time"
               }
             ]
           }
@@ -18423,9 +18655,13 @@
           "description": "Specifies the component's `heading` background color when hovered."
         },
         {
-          "name": "--calcite-block-header-text-color",
+          "name": "--calcite-block-heading-text-color",
           "description": "Specifies the component's `heading` text color."
         },
+        {
+          "name": "--calcite-block-heading-text-color-press",
+          "description": "When the component is `open`, specifies the `heading` text color."
+        },
         {
           "name": "--calcite-block-padding",
           "description": "[Deprecated] Specifies the padding of the component's `default` slot."
@@ -18434,10 +18670,6 @@
           "name": "--calcite-block-text-color",
           "description": "Specifies the component's text color."
         },
-        {
-          "name": "--calcite-block-text-color-hover",
-          "description": "Specifies the component's text color when hovered."
-        },
         {
           "name": "--calcite-block-section-background-color",
           "description": "Specifies the component's background color."
@@ -18458,6 +18690,30 @@
           "name": "--calcite-block-section-text-color-hover",
           "description": "Specifies the component's text color on hover."
         },
+        {
+          "name": "--calcite-button-background-color",
+          "description": "Specifies the component's background color when appearance=\"solid\" or appearance=\"outline-fill\"."
+        },
+        {
+          "name": "--calcite-button-border-color",
+          "description": "Specifies the component's border color when it has appearance=\"outline\" or appearance=\"outline-fill\"."
+        },
+        {
+          "name": "--calcite-button-corner-radius",
+          "description": "Specifies the component's corner radius."
+        },
+        {
+          "name": "--calcite-button-loader-color",
+          "description": "Specifies the component's loader color."
+        },
+        {
+          "name": "--calcite-button-shadow-color",
+          "description": "Specifies the component's box-shadow color."
+        },
+        {
+          "name": "--calcite-button-text-color",
+          "description": "Specifies the component's text color."
+        },
         {
           "name": "--calcite-card-accent-color-selected",
           "description": "Specifies the component's accent color when `selected`."
@@ -18578,6 +18834,106 @@
           "name": "--calcite-combobox-input-height",
           "description": "Specifies the height of the component's input."
         },
+        {
+          "name": "--calcite-date-picker-border-color",
+          "description": "Specifies the component's border color."
+        },
+        {
+          "name": "--calcite-date-picker-corner-radius",
+          "description": "Specifies the component's border radius."
+        },
+        {
+          "name": "--calcite-date-picker-range-calendar-divider-color",
+          "description": "Specifies the divider color between calendar's when `range=\"true\"`."
+        },
+        {
+          "name": "--calcite-date-picker-week-header-text-color",
+          "description": "Specifies the week header text color."
+        },
+        {
+          "name": "--calcite-date-picker-header-action-background-color",
+          "description": "Specifies the background color of header action's of the component."
+        },
+        {
+          "name": "--calcite-date-picker-header-action-background-color-hover",
+          "description": "Specifies the background color of header action's of the component when hovered."
+        },
+        {
+          "name": "--calcite-date-picker-header-action-background-color-press",
+          "description": "Specifies the background color of header action's of the component when pressed."
+        },
+        {
+          "name": "--calcite-date-picker-header-action-text-color",
+          "description": "Specifies the text color of header action's of the component."
+        },
+        {
+          "name": "--calcite-date-picker-header-action-text-color-press",
+          "description": "Specifies the text color of header action's of the component when pressed."
+        },
+        {
+          "name": "--calcite-date-picker-year-text-color",
+          "description": "Specifies the text color of year & suffix of the component."
+        },
+        {
+          "name": "--calcite-date-picker-month-select-font-size",
+          "description": "Specifies the font size of month select of the component."
+        },
+        {
+          "name": "--calcite-date-picker-month-select-text-color",
+          "description": "Specifies the text color of month select of the component."
+        },
+        {
+          "name": "--calcite-date-picker-month-select-icon-color",
+          "description": "Specifies the icon color of month select of the component."
+        },
+        {
+          "name": "--calcite-date-picker-month-select-icon-color-hover",
+          "description": "Specifies the icon color of month select of the component when hovered."
+        },
+        {
+          "name": "--calcite-date-picker-day-background-color",
+          "description": "Specifies the background color of day of the component."
+        },
+        {
+          "name": "--calcite-date-picker-day-background-color-hover",
+          "description": "Specifies the background color of day of the component when hovered."
+        },
+        {
+          "name": "--calcite-date-picker-day-text-color",
+          "description": "Specifies the text color of day of the component."
+        },
+        {
+          "name": "--calcite-date-picker-day-text-color-hover",
+          "description": "Specifies the text color of day of the component when hovered."
+        },
+        {
+          "name": "--calcite-date-picker-current-day-text-color",
+          "description": "Specifies the text color of current day of the component."
+        },
+        {
+          "name": "--calcite-date-picker-day-background-color-selected",
+          "description": "Specifies the background color of selected day of the component."
+        },
+        {
+          "name": "--calcite-date-picker-day-text-color-selected",
+          "description": "Specifies the text color of selected day of the component."
+        },
+        {
+          "name": "--calcite-date-picker-day-range-text-color",
+          "description": "Specifies the text color of select day range of the component."
+        },
+        {
+          "name": "--calcite-date-picker-day-range-background-color",
+          "description": "Specifies the background color of select day range of the component."
+        },
+        {
+          "name": "--calcite-date-picker-day-outside-range-background-color-hover",
+          "description": "Specifies the background color of day's outside current range when hovered."
+        },
+        {
+          "name": "--calcite-date-picker-day-outside-range-text-color-hover",
+          "description": "Specifies the text color of day's outside current range when hovered."
+        },
         {
           "name": "--calcite-dialog-scrim-background-color",
           "description": "Specifies the background color of the component's scrim."
@@ -18634,13 +18990,109 @@
           "name": "--calcite-dropdown-width",
           "description": "Specifies the width of the component's wrapper."
         },
+        {
+          "name": "--calcite-flow-background-color",
+          "description": "Specifies the component's background color."
+        },
         {
           "name": "--calcite-flow-item-footer-padding",
-          "description": "Specifies the padding of the component's footer."
+          "description": "[Deprecated] Use `--calcite-flow-footer-space` instead. Specifies the padding of the component's footer."
         },
         {
           "name": "--calcite-flow-item-header-border-block-end",
-          "description": "Specifies the component header's block end border."
+          "description": "[Deprecated] Use `--calcite-flow-border-color` instead. Specifies the component header's block end border."
+        },
+        {
+          "name": "--calcite-flow-corner-radius",
+          "description": "Specifies the component's corner radius."
+        },
+        {
+          "name": "--calcite-flow-heading-text-color",
+          "description": "Specifies the text color of the component's `heading`."
+        },
+        {
+          "name": "--calcite-flow-description-text-color",
+          "description": "Specifies the text color of the component's `description`."
+        },
+        {
+          "name": "--calcite-flow-border-color",
+          "description": "Specifies the component's border color."
+        },
+        {
+          "name": "--calcite-flow-background-color",
+          "description": "Specifies the component's background color."
+        },
+        {
+          "name": "--calcite-flow-header-background-color",
+          "description": "Specifies the background color of the component's header."
+        },
+        {
+          "name": "--calcite-flow-footer-background-color",
+          "description": "Specifies the background color of the component's footer."
+        },
+        {
+          "name": "--calcite-flow-space",
+          "description": "Specifies the padding of the component's `\"unnamed (default)\"` slot."
+        },
+        {
+          "name": "--calcite-flow-header-content-space",
+          "description": "Specifies the padding of the `\"header-content\"` slot."
+        },
+        {
+          "name": "--calcite-flow-footer-space",
+          "description": "Specifies the padding of the component's footer."
+        },
+        {
+          "name": "--calcite-action-background-color",
+          "description": "Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s."
+        },
+        {
+          "name": "--calcite-action-background-color-hover",
+          "description": "Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s."
+        },
+        {
+          "name": "--calcite-action-background-color-pressed",
+          "description": "Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s."
+        },
+        {
+          "name": "--calcite-action-text-color-hover",
+          "description": "Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s."
+        },
+        {
+          "name": "--calcite-action-text-color-pressed",
+          "description": "Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s."
+        },
+        {
+          "name": "--calcite-popover-border-color",
+          "description": "Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s."
+        },
+        {
+          "name": "--calcite-flow-header-action-background-color-hover",
+          "description": "Specifies the background color of the component's `calcite-action` items  in the flow item header when hovered."
+        },
+        {
+          "name": "--calcite-flow-header-action-background-color-press",
+          "description": "Specifies the background color of the component's `calcite-action` items  in the flow item header when pressed."
+        },
+        {
+          "name": "--calcite-flow-header-action-background-color",
+          "description": "Specifies the background color of the component's `calcite-action` items  in the flow item header."
+        },
+        {
+          "name": "--calcite-flow-header-action-indicator-color",
+          "description": "Specifies the color of the component's `calcite-action` items' indicator in the flow item header."
+        },
+        {
+          "name": "--calcite-flow-header-action-text-color-press",
+          "description": "Specifies the text color of the component's `calcite-action` items in the flow item header when pressed."
+        },
+        {
+          "name": "--calcite-flow-header-action-text-color",
+          "description": "Specifies the text color of the component's `calcite-action` items in the flow item header."
+        },
+        {
+          "name": "--calcite-graph-highlight-fill-color",
+          "description": "Specifies the fill color of the `highlight` element, when present."
         },
         {
           "name": "--calcite-handle-background-color",
@@ -18674,6 +19126,34 @@
           "name": "--calcite-icon-color",
           "description": "Specifies the component's color. Defaults to current color."
         },
+        {
+          "name": "--calcite-inline-editable-background-color-hover",
+          "description": "Specifies the component's background color when hovered."
+        },
+        {
+          "name": "--calcite-inline-editable-background-color",
+          "description": "Specifies the component's background color."
+        },
+        {
+          "name": "--calcite-inline-editable-button-background-color",
+          "description": "Specifies the button element's background color when appearance=\"solid\" or appearance=\"outline-fill\"."
+        },
+        {
+          "name": "--calcite-inline-editable-button-corner-radius",
+          "description": "Specifies the button element's corner radius."
+        },
+        {
+          "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."
+        },
         {
           "name": "--calcite-input-prefix-size",
           "description": "Specifies the component's prefix width, when present."
@@ -18840,11 +19320,11 @@
         },
         {
           "name": "--calcite-loader-font-size",
-          "description": "Specifies the font size of the loading percentage when type is `\"determinate\"`."
+          "description": "When `type` is not `\"indeterminate\"` or `inline`, specifies the font size of the loading percentage."
         },
         {
           "name": "--calcite-loader-size",
-          "description": "Specifies the width and height of the component when not set to inline."
+          "description": "When `inline` is not set, specifies the component's width and height."
         },
         {
           "name": "--calcite-loader-size-inline",
@@ -18856,23 +19336,23 @@
         },
         {
           "name": "--calcite-loader-progress-color-inline",
-          "description": "Specifies the width and height of the component when set to inline."
+          "description": "When `inline`, specifies the component's progress ring color."
         },
         {
           "name": "--calcite-loader-text-spacing",
-          "description": "Specifies the component's text margin."
+          "description": "When not `inline`, specifies the component's `text` margin."
         },
         {
           "name": "--calcite-loader-text-weight",
-          "description": "Specifies the component's font weight."
+          "description": "When not `inline` and `text` is provided, specifies the component's `text` font weight."
         },
         {
           "name": "--calcite-loader-text-color",
-          "description": "Specifies the component's text color."
+          "description": "When not `inline` and `text` is provided, specifies the component's `text` color."
         },
         {
           "name": "--calcite-loader-progress-color",
-          "description": "Specifies the component's progress ring color."
+          "description": "When not `inline`, specifies the component's progress ring color."
         },
         {
           "name": "--calcite-loader-track-color",
@@ -19102,6 +19582,30 @@
           "name": "--calcite-panel-header-border-block-end",
           "description": "[Deprecated] Use `--calcite-panel-border-color` instead. Specifies the component header's block end border."
         },
+        {
+          "name": "--calcite-panel-header-action-background-color-hover",
+          "description": "Specifies the background color of the component's `calcite-action` items  in the panel header when hovered."
+        },
+        {
+          "name": "--calcite-panel-header-action-background-color-press",
+          "description": "Specifies the background color of the component's `calcite-action` items  in the panel header when pressed."
+        },
+        {
+          "name": "--calcite-panel-header-action-background-color",
+          "description": "Specifies the background color of the component's `calcite-action` items  in the panel header."
+        },
+        {
+          "name": "--calcite-panel-header-action-indicator-color",
+          "description": "Specifies the color of the component's `calcite-action` items' indicator in the panel header."
+        },
+        {
+          "name": "--calcite-panel-header-action-text-color-press",
+          "description": "Specifies the text color of the component's `calcite-action` items in the panel header when pressed."
+        },
+        {
+          "name": "--calcite-panel-header-action-text-color",
+          "description": "Specifies the text color of the component's `calcite-action` items in the panel header."
+        },
         {
           "name": "--calcite-popover-background-color",
           "description": "Specifies the component's background color."
@@ -19166,6 +19670,30 @@
           "name": "--calcite-scrim-background",
           "description": "Specifies the background color of the scrim."
         },
+        {
+          "name": "--calcite-segmented-control-border-color",
+          "description": "Specifies the component's border color."
+        },
+        {
+          "name": "--calcite-segmented-control-color",
+          "description": "Specifies the component's color."
+        },
+        {
+          "name": "--calcite-segmented-control-background-color",
+          "description": "Specifies the component's background color."
+        },
+        {
+          "name": "--calcite-segmented-control-border-color",
+          "description": "Specifies the component's border color."
+        },
+        {
+          "name": "--calcite-segmented-control-shadow",
+          "description": "Specifies the component's shadow."
+        },
+        {
+          "name": "--calcite-segmented-control-icon-color",
+          "description": "Specifies the icons's color."
+        },
         {
           "name": "--calcite-select-font-size",
           "description": "Specifies the font size of `calcite-option`s in the component."
@@ -19246,6 +19774,18 @@
           "name": "--calcite-shell-panel-z-index",
           "description": "Specifies the z-index value for the component."
         },
+        {
+          "name": "--calcite-shell-panel-border-color",
+          "description": "When `displayMode` is `\"float-all\"`, specifies the component's border color."
+        },
+        {
+          "name": "--calcite-shell-panel-corner-radius",
+          "description": "When `displayMode` is `\"float-all\"`, specifies the component's corner radius"
+        },
+        {
+          "name": "--calcite-shell-panel-shadow",
+          "description": "When `displayMode` is `\"float-all\"`, specifies the component's shadow."
+        },
         {
           "name": "--calcite-slider-text-color",
           "description": "Specifies the component's text color."