@esri/calcite-components 3.0.0-next.98 → 3.0.0

package/dist/docs/vscode.html-custom-data.json

@@ -855,12 +855,12 @@
         },
         {
           "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.",
           "values": []
         },
         {
           "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.",
           "values": []
         },
         {
@@ -887,7 +887,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.",
           "values": []
         },
         {
@@ -931,7 +931,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.",
           "values": []
         },
         {
@@ -1110,7 +1110,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",
@@ -1127,9 +1127,14 @@
           "description": "When `true`, interaction is prevented and the component is displayed with lower opacity.",
           "values": []
         },
+        {
+          "name": "drag-disabled",
+          "description": "When `true`, and a parent Block Group is `dragEnabled`, the component is not draggable.",
+          "values": []
+        },
         {
           "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.",
           "values": []
         },
         {
@@ -1282,6 +1287,11 @@
             }
           ]
         },
+        {
+          "name": "sort-handle-open",
+          "description": "When `true`, displays and positions the sort handle.",
+          "values": []
+        },
         {
           "name": "status",
           "description": "**Deprecated**: Use `icon-start` instead.. Displays a status-related indicator icon.",
@@ -1300,6 +1310,38 @@
       ],
       "references": []
     },
+    {
+      "name": "calcite-block-group",
+      "description": "### Events\n- **calciteBlockGroupDragEnd** - Fires when the component's dragging has ended.\n- **calciteBlockGroupDragStart** - Fires when the component's dragging has started.\n- **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.",
+          "values": []
+        },
+        {
+          "name": "drag-enabled",
+          "description": "When `true`, `calcite-block`s are sortable via a draggable button.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "name": "loading",
+          "description": "When `true`, a busy indicator is displayed.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "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. ",
@@ -1371,7 +1413,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",
@@ -1747,7 +1789,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.",
           "values": []
         },
         {
@@ -2234,7 +2276,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.",
           "values": []
         },
         {
@@ -2404,7 +2446,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",
@@ -2456,12 +2498,12 @@
         },
         {
           "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\"`).",
           "values": []
         },
         {
           "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\"`).",
           "values": []
         },
         {
@@ -2719,7 +2761,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",
@@ -2741,6 +2783,11 @@
           "description": "When `true`, disables the default close on escape behavior.\n\nBy default, an open dialog can be dismissed by pressing the Esc key.",
           "values": []
         },
+        {
+          "name": "focus-trap-disabled",
+          "description": "When `true` and `modal` is `false`, prevents focus trapping.",
+          "values": []
+        },
         {
           "name": "heading",
           "description": "The component header text.",
@@ -3251,13 +3298,13 @@
     },
     {
       "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": [],
       "references": []
     },
     {
       "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",
@@ -3370,7 +3417,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",
@@ -3397,7 +3444,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",
@@ -3461,7 +3508,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",
@@ -3564,22 +3611,22 @@
         },
         {
           "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\"`.",
           "values": []
         },
         {
           "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.",
           "values": []
         },
         {
           "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\"`.",
           "values": []
         },
         {
           "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.",
           "values": []
         },
         {
@@ -3624,7 +3671,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.",
           "values": []
         },
         {
@@ -3644,7 +3691,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.",
           "values": []
         },
         {
@@ -3820,12 +3867,12 @@
         },
         {
           "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\").",
           "values": []
         },
         {
           "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\").",
           "values": []
         },
         {
@@ -3918,7 +3965,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.",
           "values": []
         },
         {
@@ -4079,22 +4126,22 @@
         },
         {
           "name": "max",
-          "description": "Specifies the maximum value.",
+          "description": "When the component resides in a form,\nspecifies the maximum value.",
           "values": []
         },
         {
           "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.",
           "values": []
         },
         {
           "name": "min",
-          "description": "Specifies the minimum value.",
+          "description": "When the component resides in a form,\nspecifies the minimum value.",
           "values": []
         },
         {
           "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.",
           "values": []
         },
         {
@@ -4149,7 +4196,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.",
           "values": []
         },
         {
@@ -4267,12 +4314,12 @@
         },
         {
           "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.",
           "values": []
         },
         {
           "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.",
           "values": []
         },
         {
@@ -4282,7 +4329,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.",
           "values": []
         },
         {
@@ -4302,7 +4349,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.",
           "values": []
         },
         {
@@ -4394,12 +4441,12 @@
         },
         {
           "name": "max",
-          "description": "Specifies the maximum value.",
+          "description": "When the component resides in a form,\nspecifies the maximum value.",
           "values": []
         },
         {
           "name": "min",
-          "description": "Specifies the minimum value.",
+          "description": "When the component resides in a form,\nspecifies the minimum value.",
           "values": []
         },
         {
@@ -4515,7 +4562,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.",
           "values": []
         },
         {
@@ -5397,7 +5444,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",
@@ -5809,7 +5856,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",
@@ -6032,11 +6079,6 @@
             }
           ]
         },
-        {
-          "name": "initial-focus-trap-focus",
-          "description": "Specifies whether focus should move to the popover when the focus trap is activated.\n `@internal`",
-          "values": []
-        },
         {
           "name": "label",
           "description": "Accessible name for the component.",
@@ -6236,7 +6278,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.",
           "values": []
         },
         {
@@ -6293,7 +6335,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.",
           "values": []
         },
         {
@@ -6440,7 +6482,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",
@@ -6486,7 +6528,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.",
           "values": []
         },
         {
@@ -6551,7 +6593,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",
@@ -6607,7 +6649,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.",
           "values": []
         },
         {
@@ -6675,7 +6717,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",
@@ -6853,7 +6895,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",
@@ -7089,7 +7131,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.",
           "values": []
         },
         {
@@ -7255,7 +7297,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",
@@ -8064,14 +8106,19 @@
           "description": "Accessible name for the component.",
           "values": []
         },
+        {
+          "name": "limit-text",
+          "description": "When `true`, prevents input beyond the maximum length, mimicking native `<textarea>` behavior.",
+          "values": []
+        },
         {
           "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.",
           "values": []
         },
         {
           "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.",
           "values": []
         },
         {
@@ -8106,7 +8153,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.",
           "values": []
         },
         {
@@ -8476,7 +8523,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",