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

package/dist/extras/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-05-04T20:16:03",
+  "timestamp": "2023-05-22T22:12:39",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.22.3",
@@ -652,6 +652,8 @@
         "calcite-action-pad",
         "calcite-flow-item",
         "calcite-list-item",
+        "calcite-menu-item",
+        "calcite-navigation",
         "calcite-panel",
         "calcite-pick-list-item",
         "calcite-popover",
@@ -685,6 +687,12 @@
         "calcite-list-item": [
           "calcite-action"
         ],
+        "calcite-menu-item": [
+          "calcite-action"
+        ],
+        "calcite-navigation": [
+          "calcite-action"
+        ],
         "calcite-panel": [
           "calcite-action"
         ],
@@ -2182,7 +2190,23 @@
           "mutable": false,
           "attr": "full-name",
           "reflectToAttr": true,
-          "docs": "Specifies the full name of the user.",
+          "docs": "Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "mutable": false,
+          "attr": "label",
+          "reflectToAttr": false,
+          "docs": "Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label.",
           "docsTags": [],
           "values": [
             {
@@ -2273,13 +2297,18 @@
       "styles": [],
       "slots": [],
       "parts": [],
-      "dependents": [],
+      "dependents": [
+        "calcite-navigation-user"
+      ],
       "dependencies": [
         "calcite-icon"
       ],
       "dependencyGraph": {
         "calcite-avatar": [
           "calcite-icon"
+        ],
+        "calcite-navigation-user": [
+          "calcite-avatar"
         ]
       }
     },
@@ -3711,7 +3740,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": true,
-          "docs": "When true, interaction is prevented and the component is displayed with lower opacity.",
+          "docs": "When `true`, interaction is prevented and the component is displayed with lower opacity.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -3818,7 +3847,7 @@
           "mutable": false,
           "attr": "scale",
           "reflectToAttr": true,
-          "docs": "Specifies the size of the component.",
+          "docs": "Specifies the size of the component. When contained in a parent `calcite-chip-group` inherits the parent's `scale` value.",
           "docsTags": [],
           "default": "\"m\"",
           "values": [
@@ -3844,7 +3873,7 @@
           "mutable": true,
           "attr": "selected",
           "reflectToAttr": true,
-          "docs": "When true, the component is selected.",
+          "docs": "When `true`, the component is selected.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -3972,7 +4001,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": true,
-          "docs": "When true, interaction is prevented and the component is displayed with lower opacity.",
+          "docs": "When `true`, interaction is prevented and the component is displayed with lower opacity.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -4005,7 +4034,7 @@
           "mutable": false,
           "attr": "scale",
           "reflectToAttr": true,
-          "docs": "Specifies the size of the component.",
+          "docs": "Specifies the size of the component. Child `calcite-chip`s inherit the component's value.",
           "docsTags": [],
           "default": "\"m\"",
           "values": [
@@ -5068,6 +5097,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "clearDisabled",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "clear-disabled",
+          "reflectToAttr": true,
+          "docs": "When `true`, the value-clearing will be disabled.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -5171,14 +5217,14 @@
         },
         {
           "name": "messageOverrides",
-          "type": "{ removeTag?: string; }",
+          "type": "{ clear?: string; removeTag?: string; }",
           "mutable": true,
           "reflectToAttr": false,
           "docs": "Use this property to override individual strings used by the component.",
           "docsTags": [],
           "values": [
             {
-              "type": "{ removeTag?: string; }"
+              "type": "{ clear?: string; removeTag?: string; }"
             }
           ],
           "optional": false,
@@ -8713,6 +8759,7 @@
         "calcite-input-time-picker",
         "calcite-link",
         "calcite-list-item",
+        "calcite-menu-item",
         "calcite-modal",
         "calcite-notice",
         "calcite-pagination",
@@ -8794,6 +8841,9 @@
         "calcite-list-item": [
           "calcite-icon"
         ],
+        "calcite-menu-item": [
+          "calcite-icon"
+        ],
         "calcite-modal": [
           "calcite-icon"
         ],
@@ -12590,7 +12640,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The component's value in UTC (always 24-hour format).",
+          "docs": "The time value in ISO (24-hour) format.",
           "docsTags": [],
           "default": "null",
           "values": [
@@ -13862,87 +13912,118 @@
       }
     },
     {
-      "filePath": "./src/components/modal/modal.tsx",
+      "filePath": "./src/components/menu/menu.tsx",
       "encapsulation": "shadow",
-      "tag": "calcite-modal",
-      "readme": "# calcite-modal\n\n`calcite-modal` allows you to show a modal/dialog to your users. The modal handles fencing focus and animating in/out.\n\n<style>\n  html {\n      overflow:auto !important;\n  }\n</style>",
-      "docs": "`calcite-modal` allows you to show a modal/dialog to your users. The modal handles fencing focus and animating in/out.\n\n<style>\n  html {\n      overflow:auto !important;\n  }\n</style>",
-      "docsTags": [
-        {
-          "name": "slot",
-          "text": "header - A slot for adding header text."
-        },
-        {
-          "name": "slot",
-          "text": "content - A slot for adding the component's content."
-        },
-        {
-          "name": "slot",
-          "text": "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."
-        },
-        {
-          "name": "slot",
-          "text": "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."
-        },
-        {
-          "name": "slot",
-          "text": "primary - A slot for adding a primary button."
-        },
-        {
-          "name": "slot",
-          "text": "secondary - A slot for adding a secondary button."
-        },
-        {
-          "name": "slot",
-          "text": "back - A slot for adding a back button."
-        }
-      ],
-      "usage": {
-        "Basic": "Customize the modal by passing your content into multiple named slots: `header` (title-area of the modal), `content` (main body of the modal), and up to three modal actions: primary, secondary, and back. Notice below we use the `aria-labelledby` attribute, relating it to the title of the modal. In order to ensure good accessibility, it's recommended that you use either an `aria-label` or `aria-labelledby` attribute so screen readers can infer what the subject matter of your modal is.\n\n```html\n<calcite-modal aria-labelledby=\"modal-title\" open>\n  <h3 slot=\"header\" id=\"modal-title\">Title of the modal</h3>\n  <div slot=\"content\">The actual content of the modal</div>\n  <calcite-button slot=\"back\" kind=\"neutral\" appearance=\"outline\" icon=\"chevron-left\" width=\"full\">\n    Back\n  </calcite-button>\n  <calcite-button slot=\"secondary\" width=\"full\" appearance=\"outline\"> Cancel </calcite-button>\n  <calcite-button slot=\"primary\" width=\"full\"> Save </calcite-button>\n</calcite-modal>\n```\n",
-        "Open": "To open a modal, add the `active` prop. Once the opening animation is complete, the `calciteModalOpen` event will be fired.\n\nTo close the modal, simply remove the attribute. This will run your before close method (if provided, see below) and fire the `calciteModalClose` event after the animation and teardown is complete.\n\n```html\n<calcite-modal open></calcite-modal>\n```\n",
-        "Reacting-before-close": "If you'd like to perform some actions prior to closing (ie. warning users they will lose their changes) you can pass a function to the `beforeClose` property. This method will be called prior to close and should return a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise):\n\n```js\nfunction beforeClose() {\n  return new Promise((resolve) => {\n    // do something async\n    resolve(); // this will trigger the close animation\n  });\n}\n\nconst modal = document.getElementById(\"my-modal\");\nmodal.beforeClose = beforeClose;\n```\n"
-      },
+      "tag": "calcite-menu",
+      "readme": "# calcite-menu\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
       "props": [
         {
-          "name": "beforeClose",
-          "type": "(el: HTMLElement) => Promise<void>",
+          "name": "label",
+          "type": "string",
           "mutable": false,
+          "attr": "label",
           "reflectToAttr": false,
-          "docs": "Passes a function to run before the component closes.",
+          "docs": "Accessible name for the component.",
           "docsTags": [],
-          "default": "() => Promise.resolve()",
           "values": [
             {
-              "type": "(el: HTMLElement) => Promise<void>"
+              "type": "string"
             }
           ],
           "optional": false,
-          "required": false
+          "required": true
         },
         {
-          "name": "closeButtonDisabled",
-          "type": "boolean",
+          "name": "layout",
+          "type": "\"horizontal\" | \"vertical\"",
           "mutable": false,
-          "attr": "close-button-disabled",
+          "attr": "layout",
           "reflectToAttr": true,
-          "docs": "When `true`, disables the component's close button.",
+          "docs": "Specifies the layout of the component.",
           "docsTags": [],
-          "default": "false",
+          "default": "\"horizontal\"",
           "values": [
             {
-              "type": "boolean"
+              "value": "horizontal",
+              "type": "string"
+            },
+            {
+              "value": "vertical",
+              "type": "string"
             }
           ],
           "optional": false,
           "required": false
         },
         {
-          "name": "docked",
+          "name": "messageOverrides",
+          "type": "{ more?: string; }",
+          "mutable": true,
+          "reflectToAttr": false,
+          "docs": "Use this property to override individual strings used by the component.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "{ more?: string; }"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "setFocus",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "setFocus() => Promise<void>",
+          "parameters": [],
+          "docs": "Sets focus on the component's first focusable element.",
+          "docsTags": []
+        }
+      ],
+      "events": [],
+      "listeners": [
+        {
+          "event": "calciteInternalMenuItemKeyEvent",
+          "capture": false,
+          "passive": false
+        }
+      ],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [
+        "calcite-menu-item"
+      ],
+      "dependencies": [],
+      "dependencyGraph": {
+        "calcite-menu-item": [
+          "calcite-menu"
+        ]
+      }
+    },
+    {
+      "filePath": "./src/components/menu-item/menu-item.tsx",
+      "encapsulation": "shadow",
+      "tag": "calcite-menu-item",
+      "readme": "# calcite-menu-item\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "active",
           "type": "boolean",
           "mutable": false,
-          "attr": "docked",
+          "attr": "active",
           "reflectToAttr": true,
-          "docs": "When `true`, prevents the component from expanding to the entire screen on mobile devices.",
+          "docs": "When `true`, the component is highlighted.",
           "docsTags": [],
           "values": [
             {
@@ -13953,14 +14034,13 @@
           "required": false
         },
         {
-          "name": "escapeDisabled",
+          "name": "breadcrumb",
           "type": "boolean",
           "mutable": false,
-          "attr": "escape-disabled",
+          "attr": "breadcrumb",
           "reflectToAttr": true,
-          "docs": "When `true`, disables the default close on escape behavior.",
+          "docs": "When `true`, the component displays a breadcrumb trail for use as a navigational aid.",
           "docsTags": [],
-          "default": "false",
           "values": [
             {
               "type": "boolean"
@@ -13970,81 +14050,104 @@
           "required": false
         },
         {
-          "name": "focusTrapDisabled",
-          "type": "boolean",
+          "name": "href",
+          "type": "string",
           "mutable": false,
-          "attr": "focus-trap-disabled",
-          "reflectToAttr": true,
-          "docs": "When `true`, prevents focus trapping.",
+          "attr": "href",
+          "reflectToAttr": false,
+          "docs": "Specifies the URL destination of the component, which can be set as an absolute or relative path.",
           "docsTags": [],
-          "default": "false",
           "values": [
             {
-              "type": "boolean"
+              "type": "string"
             }
           ],
           "optional": false,
           "required": false
         },
         {
-          "name": "fullscreen",
-          "type": "boolean",
+          "name": "iconEnd",
+          "type": "string",
           "mutable": false,
-          "attr": "fullscreen",
+          "attr": "icon-end",
           "reflectToAttr": true,
-          "docs": "Sets the component to always be fullscreen (overrides `width` and `--calcite-modal-width` / `--calcite-modal-height`).",
+          "docs": "Specifies an icon to display at the end of the component.",
           "docsTags": [],
           "values": [
             {
-              "type": "boolean"
+              "type": "string"
             }
           ],
           "optional": false,
           "required": false
         },
         {
-          "name": "kind",
-          "type": "\"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\"",
+          "name": "iconFlipRtl",
+          "type": "\"both\" | \"end\" | \"start\"",
           "mutable": false,
-          "attr": "kind",
+          "attr": "icon-flip-rtl",
           "reflectToAttr": true,
-          "docs": "Specifies the kind of the component (will apply to top border).",
+          "docs": "Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).",
           "docsTags": [],
           "values": [
             {
-              "value": "brand",
+              "value": "both",
               "type": "string"
             },
             {
-              "value": "danger",
+              "value": "end",
               "type": "string"
             },
             {
-              "value": "info",
+              "value": "start",
               "type": "string"
-            },
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "iconStart",
+          "type": "string",
+          "mutable": false,
+          "attr": "icon-start",
+          "reflectToAttr": true,
+          "docs": "Specifies an icon to display at the start of the component.",
+          "docsTags": [],
+          "values": [
             {
-              "value": "success",
               "type": "string"
-            },
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "mutable": false,
+          "attr": "label",
+          "reflectToAttr": false,
+          "docs": "Accessible name for the component.",
+          "docsTags": [],
+          "values": [
             {
-              "value": "warning",
               "type": "string"
             }
           ],
           "optional": false,
-          "required": false
+          "required": true
         },
         {
           "name": "messageOverrides",
-          "type": "{ close?: string; }",
+          "type": "{ submenu?: string; open?: string; }",
           "mutable": true,
           "reflectToAttr": false,
           "docs": "Use this property to override individual strings used by the component.",
           "docsTags": [],
           "values": [
             {
-              "type": "{ close?: string; }"
+              "type": "{ submenu?: string; open?: string; }"
             }
           ],
           "optional": false,
@@ -14056,7 +14159,7 @@
           "mutable": true,
           "attr": "open",
           "reflectToAttr": true,
-          "docs": "When `true`, displays and positions the component.",
+          "docs": "When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -14068,42 +14171,41 @@
           "required": false
         },
         {
-          "name": "outsideCloseDisabled",
-          "type": "boolean",
+          "name": "rel",
+          "type": "string",
           "mutable": false,
-          "attr": "outside-close-disabled",
+          "attr": "rel",
           "reflectToAttr": true,
-          "docs": "When `true`, disables the closing of the component when clicked outside.",
-          "docsTags": [],
-          "default": "false",
+          "docs": "Defines the relationship between the `href` value and the current document.",
+          "docsTags": [
+            {
+              "name": "mdn",
+              "text": "[rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)"
+            }
+          ],
           "values": [
             {
-              "type": "boolean"
+              "type": "string"
             }
           ],
           "optional": false,
           "required": false
         },
         {
-          "name": "scale",
-          "type": "\"l\" | \"m\" | \"s\"",
+          "name": "target",
+          "type": "string",
           "mutable": false,
-          "attr": "scale",
+          "attr": "target",
           "reflectToAttr": true,
-          "docs": "Specifies the size of the component.",
-          "docsTags": [],
-          "default": "\"m\"",
-          "values": [
-            {
-              "value": "l",
-              "type": "string"
-            },
+          "docs": "Specifies where to open the linked document defined in the `href` property.",
+          "docsTags": [
             {
-              "value": "m",
-              "type": "string"
-            },
+              "name": "mdn",
+              "text": "[target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)"
+            }
+          ],
+          "values": [
             {
-              "value": "s",
               "type": "string"
             }
           ],
@@ -14111,25 +14213,15 @@
           "required": false
         },
         {
-          "name": "width",
-          "type": "\"l\" | \"m\" | \"s\"",
+          "name": "text",
+          "type": "string",
           "mutable": false,
-          "attr": "width",
-          "reflectToAttr": true,
-          "docs": "Specifies the width of the component.",
+          "attr": "text",
+          "reflectToAttr": false,
+          "docs": "Specifies the text to display.",
           "docsTags": [],
-          "default": "\"m\"",
           "values": [
             {
-              "value": "l",
-              "type": "string"
-            },
-            {
-              "value": "m",
-              "type": "string"
-            },
-            {
-              "value": "s",
               "type": "string"
             }
           ],
@@ -14138,26 +14230,6 @@
         }
       ],
       "methods": [
-        {
-          "name": "scrollContent",
-          "returns": {
-            "type": "Promise<void>",
-            "docs": ""
-          },
-          "signature": "scrollContent(top?: number, left?: number) => Promise<void>",
-          "parameters": [],
-          "docs": "Sets the scroll top of the component's content.",
-          "docsTags": [
-            {
-              "name": "param",
-              "text": "top"
-            },
-            {
-              "name": "param",
-              "text": "left"
-            }
-          ]
-        },
         {
           "name": "setFocus",
           "returns": {
@@ -14166,137 +14238,922 @@
           },
           "signature": "setFocus() => Promise<void>",
           "parameters": [],
-          "docs": "Sets focus on the component's \"close\" button (the first focusable item).",
-          "docsTags": []
-        },
-        {
-          "name": "updateFocusTrapElements",
-          "returns": {
-            "type": "Promise<void>",
-            "docs": ""
-          },
-          "signature": "updateFocusTrapElements() => Promise<void>",
-          "parameters": [],
-          "docs": "Updates the element(s) that are used within the focus-trap of the component.",
+          "docs": "Sets focus on the component.",
           "docsTags": []
         }
       ],
       "events": [
         {
-          "event": "calciteModalBeforeClose",
-          "detail": "void",
-          "bubbles": true,
-          "cancelable": false,
-          "composed": true,
-          "docs": "Fires when the component is requested to be closed and before the closing transition begins.",
-          "docsTags": []
-        },
-        {
-          "event": "calciteModalBeforeOpen",
-          "detail": "void",
-          "bubbles": true,
-          "cancelable": false,
-          "composed": true,
-          "docs": "Fires when the component is added to the DOM but not rendered, and before the opening transition begins.",
-          "docsTags": []
-        },
-        {
-          "event": "calciteModalClose",
-          "detail": "void",
-          "bubbles": true,
-          "cancelable": false,
-          "composed": true,
-          "docs": "Fires when the component is closed and animation is complete.",
-          "docsTags": []
-        },
-        {
-          "event": "calciteModalOpen",
+          "event": "calciteMenuItemSelect",
           "detail": "void",
           "bubbles": true,
-          "cancelable": false,
+          "cancelable": true,
           "composed": true,
-          "docs": "Fires when the component is open and animation is complete.",
+          "docs": "Emits when the component is selected.",
           "docsTags": []
         }
       ],
       "listeners": [
         {
-          "event": "keydown",
+          "event": "click",
           "target": "window",
           "capture": false,
           "passive": false
+        },
+        {
+          "event": "focusout",
+          "capture": false,
+          "passive": false
         }
       ],
-      "styles": [
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [
+        "calcite-icon",
+        "calcite-action",
+        "calcite-menu"
+      ],
+      "dependencyGraph": {
+        "calcite-menu-item": [
+          "calcite-icon",
+          "calcite-action",
+          "calcite-menu"
+        ],
+        "calcite-action": [
+          "calcite-loader",
+          "calcite-icon"
+        ]
+      }
+    },
+    {
+      "filePath": "./src/components/modal/modal.tsx",
+      "encapsulation": "shadow",
+      "tag": "calcite-modal",
+      "readme": "# calcite-modal\n\n`calcite-modal` allows you to show a modal/dialog to your users. The modal handles fencing focus and animating in/out.\n\n<style>\n  html {\n      overflow:auto !important;\n  }\n</style>",
+      "docs": "`calcite-modal` allows you to show a modal/dialog to your users. The modal handles fencing focus and animating in/out.\n\n<style>\n  html {\n      overflow:auto !important;\n  }\n</style>",
+      "docsTags": [
         {
-          "name": "--calcite-modal-content-background",
-          "annotation": "prop",
-          "docs": "Specifies the background color of content placed in the `content` slot."
+          "name": "slot",
+          "text": "header - A slot for adding header text."
         },
         {
-          "name": "--calcite-modal-content-padding",
-          "annotation": "prop",
-          "docs": "Specifies the padding of the modal `content` slot."
+          "name": "slot",
+          "text": "content - A slot for adding the component's content."
         },
         {
-          "name": "--calcite-modal-height",
-          "annotation": "prop",
-          "docs": "Specifies a height of the modal, using `px`, `em`, `rem`, `vh`, or `%`. Will never exceed the height of the viewport. Will not apply if `fullscreen` if set."
+          "name": "slot",
+          "text": "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."
         },
         {
-          "name": "--calcite-modal-scrim-background",
-          "annotation": "prop",
-          "docs": "Specifies the background color of the modal scrim."
+          "name": "slot",
+          "text": "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."
         },
         {
-          "name": "--calcite-modal-width",
-          "annotation": "prop",
-          "docs": "Specifies a width of the modal, using `px`, `em`, `rem`, `vw`, or `%`. Will never exceed the width of the viewport. Will not apply if `fullscreen` if set."
+          "name": "slot",
+          "text": "primary - A slot for adding a primary button."
+        },
+        {
+          "name": "slot",
+          "text": "secondary - A slot for adding a secondary button."
+        },
+        {
+          "name": "slot",
+          "text": "back - A slot for adding a back button."
         }
       ],
-      "slots": [
+      "usage": {
+        "Basic": "Customize the modal by passing your content into multiple named slots: `header` (title-area of the modal), `content` (main body of the modal), and up to three modal actions: primary, secondary, and back. Notice below we use the `aria-labelledby` attribute, relating it to the title of the modal. In order to ensure good accessibility, it's recommended that you use either an `aria-label` or `aria-labelledby` attribute so screen readers can infer what the subject matter of your modal is.\n\n```html\n<calcite-modal aria-labelledby=\"modal-title\" open>\n  <h3 slot=\"header\" id=\"modal-title\">Title of the modal</h3>\n  <div slot=\"content\">The actual content of the modal</div>\n  <calcite-button slot=\"back\" kind=\"neutral\" appearance=\"outline\" icon=\"chevron-left\" width=\"full\">\n    Back\n  </calcite-button>\n  <calcite-button slot=\"secondary\" width=\"full\" appearance=\"outline\"> Cancel </calcite-button>\n  <calcite-button slot=\"primary\" width=\"full\"> Save </calcite-button>\n</calcite-modal>\n```\n",
+        "Open": "To open a modal, add the `active` prop. Once the opening animation is complete, the `calciteModalOpen` event will be fired.\n\nTo close the modal, simply remove the attribute. This will run your before close method (if provided, see below) and fire the `calciteModalClose` event after the animation and teardown is complete.\n\n```html\n<calcite-modal open></calcite-modal>\n```\n",
+        "Reacting-before-close": "If you'd like to perform some actions prior to closing (ie. warning users they will lose their changes) you can pass a function to the `beforeClose` property. This method will be called prior to close and should return a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise):\n\n```js\nfunction beforeClose() {\n  return new Promise((resolve) => {\n    // do something async\n    resolve(); // this will trigger the close animation\n  });\n}\n\nconst modal = document.getElementById(\"my-modal\");\nmodal.beforeClose = beforeClose;\n```\n"
+      },
+      "props": [
         {
-          "name": "back",
-          "docs": "A slot for adding a back button."
+          "name": "beforeClose",
+          "type": "(el: HTMLElement) => Promise<void>",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "Passes a function to run before the component closes.",
+          "docsTags": [],
+          "default": "() => Promise.resolve()",
+          "values": [
+            {
+              "type": "(el: HTMLElement) => Promise<void>"
+            }
+          ],
+          "optional": false,
+          "required": false
         },
         {
-          "name": "content",
-          "docs": "A slot for adding the component's content."
+          "name": "closeButtonDisabled",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "close-button-disabled",
+          "reflectToAttr": true,
+          "docs": "When `true`, disables the component's close button.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
         },
         {
-          "name": "content-bottom",
-          "docs": "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."
+          "name": "docked",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "docked",
+          "reflectToAttr": true,
+          "docs": "When `true`, prevents the component from expanding to the entire screen on mobile devices.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
         },
         {
-          "name": "content-top",
-          "docs": "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."
+          "name": "escapeDisabled",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "escape-disabled",
+          "reflectToAttr": true,
+          "docs": "When `true`, disables the default close on escape behavior.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "focusTrapDisabled",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "focus-trap-disabled",
+          "reflectToAttr": true,
+          "docs": "When `true`, prevents focus trapping.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "fullscreen",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "fullscreen",
+          "reflectToAttr": true,
+          "docs": "Sets the component to always be fullscreen (overrides `width` and `--calcite-modal-width` / `--calcite-modal-height`).",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "kind",
+          "type": "\"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\"",
+          "mutable": false,
+          "attr": "kind",
+          "reflectToAttr": true,
+          "docs": "Specifies the kind of the component (will apply to top border).",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "brand",
+              "type": "string"
+            },
+            {
+              "value": "danger",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "messageOverrides",
+          "type": "{ close?: string; }",
+          "mutable": true,
+          "reflectToAttr": false,
+          "docs": "Use this property to override individual strings used by the component.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "{ close?: string; }"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "mutable": true,
+          "attr": "open",
+          "reflectToAttr": true,
+          "docs": "When `true`, displays and positions the component.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "outsideCloseDisabled",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "outside-close-disabled",
+          "reflectToAttr": true,
+          "docs": "When `true`, disables the closing of the component when clicked outside.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "scale",
+          "type": "\"l\" | \"m\" | \"s\"",
+          "mutable": false,
+          "attr": "scale",
+          "reflectToAttr": true,
+          "docs": "Specifies the size of the component.",
+          "docsTags": [],
+          "default": "\"m\"",
+          "values": [
+            {
+              "value": "l",
+              "type": "string"
+            },
+            {
+              "value": "m",
+              "type": "string"
+            },
+            {
+              "value": "s",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "width",
+          "type": "\"l\" | \"m\" | \"s\"",
+          "mutable": false,
+          "attr": "width",
+          "reflectToAttr": true,
+          "docs": "Specifies the width of the component.",
+          "docsTags": [],
+          "default": "\"m\"",
+          "values": [
+            {
+              "value": "l",
+              "type": "string"
+            },
+            {
+              "value": "m",
+              "type": "string"
+            },
+            {
+              "value": "s",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "scrollContent",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "scrollContent(top?: number, left?: number) => Promise<void>",
+          "parameters": [],
+          "docs": "Sets the scroll top of the component's content.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "top"
+            },
+            {
+              "name": "param",
+              "text": "left"
+            }
+          ]
+        },
+        {
+          "name": "setFocus",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "setFocus() => Promise<void>",
+          "parameters": [],
+          "docs": "Sets focus on the component's \"close\" button (the first focusable item).",
+          "docsTags": []
+        },
+        {
+          "name": "updateFocusTrapElements",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "updateFocusTrapElements() => Promise<void>",
+          "parameters": [],
+          "docs": "Updates the element(s) that are used within the focus-trap of the component.",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "calciteModalBeforeClose",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": false,
+          "composed": true,
+          "docs": "Fires when the component is requested to be closed and before the closing transition begins.",
+          "docsTags": []
+        },
+        {
+          "event": "calciteModalBeforeOpen",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": false,
+          "composed": true,
+          "docs": "Fires when the component is added to the DOM but not rendered, and before the opening transition begins.",
+          "docsTags": []
+        },
+        {
+          "event": "calciteModalClose",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": false,
+          "composed": true,
+          "docs": "Fires when the component is closed and animation is complete.",
+          "docsTags": []
+        },
+        {
+          "event": "calciteModalOpen",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": false,
+          "composed": true,
+          "docs": "Fires when the component is open and animation is complete.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [
+        {
+          "event": "keydown",
+          "target": "window",
+          "capture": false,
+          "passive": false
+        }
+      ],
+      "styles": [
+        {
+          "name": "--calcite-modal-content-background",
+          "annotation": "prop",
+          "docs": "Specifies the background color of content placed in the `content` slot."
+        },
+        {
+          "name": "--calcite-modal-content-padding",
+          "annotation": "prop",
+          "docs": "Specifies the padding of the modal `content` slot."
+        },
+        {
+          "name": "--calcite-modal-height",
+          "annotation": "prop",
+          "docs": "Specifies a height of the modal, using `px`, `em`, `rem`, `vh`, or `%`. Will never exceed the height of the viewport. Will not apply if `fullscreen` if set."
+        },
+        {
+          "name": "--calcite-modal-scrim-background",
+          "annotation": "prop",
+          "docs": "Specifies the background color of the modal scrim."
+        },
+        {
+          "name": "--calcite-modal-width",
+          "annotation": "prop",
+          "docs": "Specifies a width of the modal, using `px`, `em`, `rem`, `vw`, or `%`. Will never exceed the width of the viewport. Will not apply if `fullscreen` if set."
+        }
+      ],
+      "slots": [
+        {
+          "name": "back",
+          "docs": "A slot for adding a back button."
+        },
+        {
+          "name": "content",
+          "docs": "A slot for adding the component's content."
+        },
+        {
+          "name": "content-bottom",
+          "docs": "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."
+        },
+        {
+          "name": "content-top",
+          "docs": "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."
+        },
+        {
+          "name": "header",
+          "docs": "A slot for adding header text."
+        },
+        {
+          "name": "primary",
+          "docs": "A slot for adding a primary button."
+        },
+        {
+          "name": "secondary",
+          "docs": "A slot for adding a secondary button."
+        }
+      ],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [
+        "calcite-scrim",
+        "calcite-icon"
+      ],
+      "dependencyGraph": {
+        "calcite-modal": [
+          "calcite-scrim",
+          "calcite-icon"
+        ],
+        "calcite-scrim": [
+          "calcite-loader"
+        ]
+      }
+    },
+    {
+      "filePath": "./src/components/navigation/navigation.tsx",
+      "encapsulation": "shadow",
+      "tag": "calcite-navigation",
+      "readme": "# calcite-navigation\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {
+        "Basic": "```html\n<calcite-shell>\n  <calcite-navigation slot=\"header\">\n    <calcite-chip-group slot=\"content-center\">\n      <calcite-chip>nav item 1</calcite-chip>\n      <calcite-chip>nav item 2</calcite-chip>\n      <calcite-chip>nav item 3</calcite-chip>\n    </calcite-chip-group>\n  </calcite-navigation>\n</calcite-shell>\n```\n"
+      },
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "mutable": false,
+          "attr": "label",
+          "reflectToAttr": false,
+          "docs": "When `navigationAction` is `true`, specifies the label of the `calcite-action`.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true
+        },
+        {
+          "name": "navigationAction",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "navigation-action",
+          "reflectToAttr": true,
+          "docs": "When `true`, displays a `calcite-action` and emits a `calciteNavActionSelect` event on selection change.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "setFocus",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "setFocus() => Promise<void>",
+          "parameters": [],
+          "docs": "When `navigation-action` is `true`, sets focus on the component's action element.",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "calciteNavigationActionSelect",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": false,
+          "composed": true,
+          "docs": "When `navigationAction` is true, emits when the displayed action selection changes.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [
+        {
+          "name": "--calcite-navigation-background",
+          "annotation": "prop",
+          "docs": "Specifies the background color of the component."
+        },
+        {
+          "name": "--calcite-navigation-border-color",
+          "annotation": "prop",
+          "docs": "Specifies the border color of the component."
+        },
+        {
+          "name": "--calcite-navigation-width",
+          "annotation": "prop",
+          "docs": "Specifies the width of the component's content area."
+        }
+      ],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [
+        "calcite-action"
+      ],
+      "dependencyGraph": {
+        "calcite-navigation": [
+          "calcite-action"
+        ],
+        "calcite-action": [
+          "calcite-loader",
+          "calcite-icon"
+        ]
+      }
+    },
+    {
+      "filePath": "./src/components/navigation-logo/navigation-logo.tsx",
+      "encapsulation": "shadow",
+      "tag": "calcite-navigation-logo",
+      "readme": "# calcite-navigation-logo\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {
+        "Basic": "```html\n<calcite-navigation-logo active thumbnail=\"./_assets/images/esri-logo.svg\"></calcite-navigation-user>\n```\n"
+      },
+      "props": [
+        {
+          "name": "active",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "active",
+          "reflectToAttr": true,
+          "docs": "When true, the component is highlighted.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "mutable": false,
+          "attr": "description",
+          "reflectToAttr": false,
+          "docs": "A description for the component, which displays below the `heading`.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "heading",
+          "type": "string",
+          "mutable": false,
+          "attr": "heading",
+          "reflectToAttr": false,
+          "docs": "Specifies heading text for the component, such as a product or organization name.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "mutable": false,
+          "attr": "href",
+          "reflectToAttr": true,
+          "docs": "Specifies the URL destination of the component, which can be set as an absolute or relative path.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "mutable": false,
+          "attr": "label",
+          "reflectToAttr": false,
+          "docs": "Describes the appearance or function of the `thumbnail`. If no label is provided, context will not be provided to assistive technologies.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "rel",
+          "type": "string",
+          "mutable": false,
+          "attr": "rel",
+          "reflectToAttr": true,
+          "docs": "Defines the relationship between the `href` value and the current document.",
+          "docsTags": [
+            {
+              "name": "mdn",
+              "text": "[rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)"
+            }
+          ],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "target",
+          "type": "string",
+          "mutable": false,
+          "attr": "target",
+          "reflectToAttr": true,
+          "docs": "Specifies where to open the linked document defined in the `href` property.",
+          "docsTags": [
+            {
+              "name": "mdn",
+              "text": "[target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)"
+            }
+          ],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "thumbnail",
+          "type": "string",
+          "mutable": false,
+          "attr": "thumbnail",
+          "reflectToAttr": false,
+          "docs": "Specifies the `src` to an image.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "setFocus",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "setFocus() => Promise<void>",
+          "parameters": [],
+          "docs": "Sets focus on the component.",
+          "docsTags": []
+        }
+      ],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "./src/components/navigation-user/navigation-user.tsx",
+      "encapsulation": "shadow",
+      "tag": "calcite-navigation-user",
+      "readme": "# calcite-navigation-user\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {
+        "Basic": "```html\n<calcite-navigation-user full-name=\"Jhon Doe\" user-id=\"Jhon123\" active></calcite-navigation-user>\n```\n"
+      },
+      "props": [
+        {
+          "name": "active",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "active",
+          "reflectToAttr": true,
+          "docs": "When true, the component is highlighted.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "fullName",
+          "type": "string",
+          "mutable": false,
+          "attr": "full-name",
+          "reflectToAttr": false,
+          "docs": "Specifies the full name of the user.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "mutable": false,
+          "attr": "label",
+          "reflectToAttr": false,
+          "docs": "Describes the appearance of the avatar. If no label is provided, context will not be provided to assistive technologies.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "textDisabled",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "text-disabled",
+          "reflectToAttr": true,
+          "docs": "When `true`, hides the `fullName` and `username` contents.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "thumbnail",
+          "type": "string",
+          "mutable": false,
+          "attr": "thumbnail",
+          "reflectToAttr": false,
+          "docs": "Specifies the `src` to an image (remember to add a token if the user is private).",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
         },
         {
-          "name": "header",
-          "docs": "A slot for adding header text."
+          "name": "userId",
+          "type": "string",
+          "mutable": false,
+          "attr": "user-id",
+          "reflectToAttr": false,
+          "docs": "Specifies the unique id of the user.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
         },
         {
-          "name": "primary",
-          "docs": "A slot for adding a primary button."
-        },
+          "name": "username",
+          "type": "string",
+          "mutable": false,
+          "attr": "username",
+          "reflectToAttr": false,
+          "docs": "Specifies the username of the user.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [
         {
-          "name": "secondary",
-          "docs": "A slot for adding a secondary button."
+          "name": "setFocus",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "setFocus() => Promise<void>",
+          "parameters": [],
+          "docs": "Sets focus on the component.",
+          "docsTags": []
         }
       ],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
       "parts": [],
       "dependents": [],
       "dependencies": [
-        "calcite-scrim",
-        "calcite-icon"
+        "calcite-avatar"
       ],
       "dependencyGraph": {
-        "calcite-modal": [
-          "calcite-scrim",
-          "calcite-icon"
+        "calcite-navigation-user": [
+          "calcite-avatar"
         ],
-        "calcite-scrim": [
-          "calcite-loader"
+        "calcite-avatar": [
+          "calcite-icon"
         ]
       }
     },
@@ -18144,7 +19001,7 @@
         }
       ],
       "usage": {
-        "Advanced": "Renders a shell with leading and trailing floating panels, action bar/pad, block, flow, tip manager, footer.\n\n```html\n<calcite-shell>\n  <calcite-shell-panel slot=\"panel-start\" position=\"start\" detached>\n    <calcite-action-bar slot=\"action-bar\">\n      <calcite-action-group>\n        <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n        <calcite-action text=\"Save\" disabled icon=\"save\"></calcite-action>\n        <calcite-action text=\"Layers\" active indicator icon=\"layers\"></calcite-action>\n      </calcite-action-group>\n      <calcite-action-group>\n        <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n        <calcite-action text=\"Layers\" indicator icon=\"layers\"></calcite-action>\n      </calcite-action-group>\n    </calcite-action-bar>\n    <calcite-block collapsible  heading=\"Primary Content\" summary=\"This is the primary.\">\n      <calcite-block-content>\n        <calcite-action text=\"Puppies\" text-enabled indicator icon=\"plus\"></calcite-action>\n        <calcite-action text=\"Kittens\" text-enabled icon=\"save\"></calcite-action>\n        <calcite-action text=\"Birds?\" text-enabled icon=\"banana\"></calcite-action>\n      </calcite-block-content>\n    </calcite-block>\n    <calcite-block collapsible  heading=\"Additional Block\" summary=\"Baby shark doo doo doo doo.\">\n      <calcite-block-content>\n          <p>Cool thing.</p>\n      </calcite-block-content>\n    </calcite-block>\n  </calcite-shell-panel>\n\n   <calcite-shell-panel slot=\"panel-end\" position=\"end\" detached height-scale=\"l\">\n      <calcite-action-bar slot=\"action-bar\">\n        <calcite-action-group>\n          <calcite-action text=\"Add\" active icon=\"plus\"></calcite-action>\n          <calcite-action text=\"Save\" disabled icon=\"save\"></calcite-action>\n          <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\n        </calcite-action-group>\n        <calcite-action-group>\n          <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n          <calcite-action text=\"Save\" disabled icon=\"save\"></calcite-action>\n          <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\n        </calcite-action-group>\n        <calcite-action slot=\"bottom-actions\" text=\"Tips\" icon=\"lightbulb\"></calcite-action>\n      </calcite-action-bar>\n      <calcite-flow>\n        <calcite-flow-item heading=\"Layer settings\">\n          <calcite-block collapsible open heading=\"Contextual Content\" summary=\"Select goodness\">\n            <calcite-value-list multiple filter-enabled>\n              <calcite-value-list-item label=\"2018 Population Density (Esri)\" description=\"{POPDENS_CY}\" value=\"POPDENS_CY\">\n                <calcite-action slot=\"actions-end\" icon=\"camera-flash-on\"></calcite-action>\n              </calcite-value-list-item>\n              <calcite-value-list-item label=\"2018 Population Density [Updated]\" description=\"{POPDENS_CY}\" value=\"POPDENS_CY2\">\n                <calcite-action slot=\"actions-end\" icon=\"banana\"></calcite-action>\n              </calcite-value-list-item>\n              <calcite-value-list-item label=\"2018 Total Households (Esri)\" description=\"{TOTHH_CY}\" value=\"TOTHH_CY\">\n                <calcite-action slot=\"actions-end\" icon=\"person2\"></calcite-action>\n              </calcite-value-list-item>\n            </calcite-value-list>\n          </calcite-block>\n        </calcite-flow-item>\n      </calcite-flow>\n  </calcite-shell-panel>\n  <calcite-tip-manager slot=\"center-row\">\n    <calcite-tip heading=\"The Red Rocks and Blue Water\" thumbnail=\"https://placeimg.com/1000/600\" text-thumbnail=\"This is an image of nature.\">\n    <calcite-tip heading=\"The Long Trees\" thumbnail=\"https://placeimg.com/1000/600\" text-thumbnail=\"This is an image of trees.\">\n  </calcite-tip-manager>\n  <footer slot=\"footer\">Footer</footer>\n</calcite-shell>\n```\n",
+        "Advanced": "Renders a shell with leading and trailing floating panels, action bar/pad, block, flow, tip manager, footer.\n\n```html\n<calcite-shell>\n  <calcite-shell-panel slot=\"panel-start\" position=\"start\" display-mode=\"float\">\n    <calcite-action-bar slot=\"action-bar\">\n      <calcite-action-group>\n        <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n        <calcite-action text=\"Save\" disabled icon=\"save\"></calcite-action>\n        <calcite-action text=\"Layers\" active indicator icon=\"layers\"></calcite-action>\n      </calcite-action-group>\n      <calcite-action-group>\n        <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n        <calcite-action text=\"Layers\" indicator icon=\"layers\"></calcite-action>\n      </calcite-action-group>\n    </calcite-action-bar>\n    <calcite-block collapsible  heading=\"Primary Content\" summary=\"This is the primary.\">\n      <calcite-block-content>\n        <calcite-action text=\"Puppies\" text-enabled indicator icon=\"plus\"></calcite-action>\n        <calcite-action text=\"Kittens\" text-enabled icon=\"save\"></calcite-action>\n        <calcite-action text=\"Birds?\" text-enabled icon=\"banana\"></calcite-action>\n      </calcite-block-content>\n    </calcite-block>\n    <calcite-block collapsible  heading=\"Additional Block\" summary=\"Baby shark doo doo doo doo.\">\n      <calcite-block-content>\n          <p>Cool thing.</p>\n      </calcite-block-content>\n    </calcite-block>\n  </calcite-shell-panel>\n\n   <calcite-shell-panel slot=\"panel-end\" position=\"end\" display-mode=\"float\" height-scale=\"l\">\n      <calcite-action-bar slot=\"action-bar\">\n        <calcite-action-group>\n          <calcite-action text=\"Add\" active icon=\"plus\"></calcite-action>\n          <calcite-action text=\"Save\" disabled icon=\"save\"></calcite-action>\n          <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\n        </calcite-action-group>\n        <calcite-action-group>\n          <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n          <calcite-action text=\"Save\" disabled icon=\"save\"></calcite-action>\n          <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\n        </calcite-action-group>\n        <calcite-action slot=\"bottom-actions\" text=\"Tips\" icon=\"lightbulb\"></calcite-action>\n      </calcite-action-bar>\n      <calcite-flow>\n        <calcite-flow-item heading=\"Layer settings\">\n          <calcite-block collapsible open heading=\"Contextual Content\" summary=\"Select goodness\">\n            <calcite-value-list multiple filter-enabled>\n              <calcite-value-list-item label=\"2018 Population Density (Esri)\" description=\"{POPDENS_CY}\" value=\"POPDENS_CY\">\n                <calcite-action slot=\"actions-end\" icon=\"camera-flash-on\"></calcite-action>\n              </calcite-value-list-item>\n              <calcite-value-list-item label=\"2018 Population Density [Updated]\" description=\"{POPDENS_CY}\" value=\"POPDENS_CY2\">\n                <calcite-action slot=\"actions-end\" icon=\"banana\"></calcite-action>\n              </calcite-value-list-item>\n              <calcite-value-list-item label=\"2018 Total Households (Esri)\" description=\"{TOTHH_CY}\" value=\"TOTHH_CY\">\n                <calcite-action slot=\"actions-end\" icon=\"person2\"></calcite-action>\n              </calcite-value-list-item>\n            </calcite-value-list>\n          </calcite-block>\n        </calcite-flow-item>\n      </calcite-flow>\n  </calcite-shell-panel>\n  <calcite-tip-manager slot=\"center-row\">\n    <calcite-tip heading=\"The Red Rocks and Blue Water\" thumbnail=\"https://placeimg.com/1000/600\" text-thumbnail=\"This is an image of nature.\">\n    <calcite-tip heading=\"The Long Trees\" thumbnail=\"https://placeimg.com/1000/600\" text-thumbnail=\"This is an image of trees.\">\n  </calcite-tip-manager>\n  <footer slot=\"footer\">Footer</footer>\n</calcite-shell>\n```\n",
         "Basic": "Renders a basic shell with a header and a footer.\n\n```html\n<calcite-shell>\n  <div slot=\"header\">\n    <header>\n      <h2>Shell Header: My App</h2>\n    </header>\n  </div>\n  <p>Shell Content</p>\n  <!-- insert map or fillable content here -->\n  <footer slot=\"footer\">Footer</footer>\n</calcite-shell>\n```\n",
         "With-panel-and-action-bar": "Renders a single panel with actions in an action bar.\n\n```html\n<calcite-shell>\n  <calcite-shell-panel slot=\"panel-start\" position=\"start\">\n    <img src=\"https://via.placeholder.com/300x200\" alt=\"placeholder\" />\n    <calcite-action-bar slot=\"action-bar\">\n      <calcite-action text=\"Add\" active icon=\"plus\"></calcite-action>\n      <calcite-action text=\"Save\" disabled icon=\"save\"></calcite-action>\n      <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\n    </calcite-action-bar>\n  </calcite-shell-panel>\n</calcite-shell>\n```\n",
         "With-panels": "Renders a shell with a header and panels on the left and right sides of the app.\n\n```html\n<calcite-shell>\n  <calcite-shell-panel slot=\"panel-start\" position=\"start\">\n    Leading panel! (on the left side, since this is a LTR app)\n  </calcite-shell-panel>\n  <calcite-shell-panel slot=\"panel-end\" position=\"end\"> Trailing panel! (right side) </calcite-shell-panel>\n  <calcite-shell-center-row slot=\"center-row\" position=\"end\" height-scale=\"m\">\n    Center Row! (center bottom)\n  </calcite-shell-center-row>\n  <div slot=\"header\">\n    <header>\n      <h2>Shell Header: My App</h2>\n    </header>\n  </div>\n  <p>Shell Content</p>\n  <!-- insert map or fillable content here -->\n</calcite-shell>\n```\n"
@@ -18376,8 +19233,14 @@
           "attr": "detached",
           "reflectToAttr": true,
           "docs": "When `true`, the content area displays like a floating panel.",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "use `displayMode` instead."
+            }
+          ],
           "default": "false",
+          "deprecation": "use `displayMode` instead.",
           "values": [
             {
               "type": "boolean"
@@ -18392,9 +19255,65 @@
           "mutable": false,
           "attr": "detached-height-scale",
           "reflectToAttr": true,
-          "docs": "When `detached`, specifies the maximum height of the component.",
+          "docs": "When `displayMode` is `float`, specifies the maximum height of the component.",
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "use `heightScale` instead."
+            }
+          ],
+          "deprecation": "use `heightScale` instead.",
+          "values": [
+            {
+              "value": "l",
+              "type": "string"
+            },
+            {
+              "value": "m",
+              "type": "string"
+            },
+            {
+              "value": "s",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "displayMode",
+          "type": "\"dock\" | \"float\" | \"overlay\"",
+          "mutable": false,
+          "attr": "display-mode",
+          "reflectToAttr": true,
+          "docs": "Specifies the display mode - `\"dock\"` (full height, displays adjacent to center content), `\"float\"` (not full height, content is separated detached from `calcite-action-bar`, displays on top of center content),\nor `\"overlay\"` (full height, displays on top of center content).",
+          "docsTags": [],
+          "default": "\"dock\"",
+          "values": [
+            {
+              "value": "dock",
+              "type": "string"
+            },
+            {
+              "value": "float",
+              "type": "string"
+            },
+            {
+              "value": "overlay",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "heightScale",
+          "type": "\"l\" | \"m\" | \"s\"",
+          "mutable": false,
+          "attr": "height-scale",
+          "reflectToAttr": true,
+          "docs": "When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component.",
           "docsTags": [],
-          "default": "\"l\"",
           "values": [
             {
               "value": "l",
@@ -18457,6 +19376,7 @@
           "reflectToAttr": true,
           "docs": "Specifies the component's position. Will be flipped when the element direction is right-to-left (`\"rtl\"`).",
           "docsTags": [],
+          "default": "\"start\"",
           "values": [
             {
               "value": "end",
@@ -18476,7 +19396,7 @@
           "mutable": false,
           "attr": "resizable",
           "reflectToAttr": true,
-          "docs": "When `true` and not `detached`, the component's content area is resizable.",
+          "docs": "When `true` and `displayMode` is not `float`, the component's content area is resizable.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -18493,7 +19413,7 @@
           "mutable": false,
           "attr": "width-scale",
           "reflectToAttr": true,
-          "docs": "Specifies the width of the component's content area.",
+          "docs": "When `layout` is `vertical`, specifies the width of the component.",
           "docsTags": [],
           "default": "\"m\"",
           "values": [
@@ -18518,20 +19438,15 @@
       "events": [],
       "listeners": [],
       "styles": [
-        {
-          "name": "--calcite-shell-panel-detached-max-height",
-          "annotation": "prop",
-          "docs": "When `detached` is `true`, specifies the maximum height of the component."
-        },
         {
           "name": "--calcite-shell-panel-height",
           "annotation": "prop",
-          "docs": "When `layout` is `\"horizontal\"`, specifies the height of the component."
+          "docs": "When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the height of the component."
         },
         {
           "name": "--calcite-shell-panel-max-height",
           "annotation": "prop",
-          "docs": "When `layout` is `\"horizontal\"`, specifies the maximum height of the component."
+          "docs": "When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component."
         },
         {
           "name": "--calcite-shell-panel-max-width",
@@ -18541,7 +19456,7 @@
         {
           "name": "--calcite-shell-panel-min-height",
           "annotation": "prop",
-          "docs": "When `layout` is `\"horizontal\"`, specifies the minimum height of the component."
+          "docs": "When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the minimum height of the component."
         },
         {
           "name": "--calcite-shell-panel-min-width",
@@ -19692,6 +20607,98 @@
         ]
       }
     },
+    {
+      "filePath": "./src/components/stack/stack.tsx",
+      "encapsulation": "shadow",
+      "tag": "calcite-stack",
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "- A slot for adding content."
+        },
+        {
+          "name": "slot",
+          "text": "actions-start - A slot for adding actionable `calcite-action` elements before the content of the component."
+        },
+        {
+          "name": "slot",
+          "text": "content-start - A slot for adding non-actionable elements before content of the component."
+        },
+        {
+          "name": "slot",
+          "text": "content-end - A slot for adding non-actionable elements after content of the component."
+        },
+        {
+          "name": "slot",
+          "text": "actions-end - A slot for adding actionable `calcite-action` elements after the content of the component."
+        }
+      ],
+      "usage": {
+        "Basic": "```html\n<calcite-stack>\n  <calcite-action appearance=\"transparent\" text=\"banana\" icon=\"banana\" slot=\"actions-start\"></calcite-action>\n  <calcite-chip slot=\"content-start\" value=\"chip\" scale=\"s\" appearance=\"outline\">My great chip</calcite-chip>\n  Hello World\n  <calcite-avatar slot=\"content-end\" thumbnail=\"http://placekitten.com/105/105\" scale=\"s\"> </calcite-avatar>\n  <calcite-action appearance=\"transparent\" text=\"Close\" icon=\"x\" slot=\"actions-end\"></calcite-action>\n</calcite-stack>\n```\n",
+        "Disabled": "```html\n<calcite-stack disabled>\n  <calcite-action appearance=\"transparent\" text=\"banana\" icon=\"banana\" slot=\"actions-start\"></calcite-action>\n  Hello World\n  <calcite-avatar slot=\"content-end\" thumbnail=\"http://placekitten.com/105/105\" scale=\"s\"> </calcite-avatar>\n  <calcite-chip slot=\"content-start\" value=\"chip\" scale=\"s\" appearance=\"outline\">My great chip</calcite-chip>\n  <calcite-action appearance=\"transparent\" text=\"Close\" icon=\"x\" slot=\"actions-end\"></calcite-action>\n</calcite-stack>\n```\n"
+      },
+      "props": [
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "disabled",
+          "reflectToAttr": true,
+          "docs": "When `true`, content interaction is prevented and displayed with lower opacity.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [
+        {
+          "name": "--calcite-stack-padding-block",
+          "annotation": "prop",
+          "docs": "Specifies the block padding of the component's content."
+        },
+        {
+          "name": "--calcite-stack-padding-inline",
+          "annotation": "prop",
+          "docs": "Specifies the inline padding of the component's content."
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "docs": "A slot for adding content."
+        },
+        {
+          "name": "actions-end",
+          "docs": "A slot for adding actionable `calcite-action` elements after the content of the component."
+        },
+        {
+          "name": "actions-start",
+          "docs": "A slot for adding actionable `calcite-action` elements before the content of the component."
+        },
+        {
+          "name": "content-end",
+          "docs": "A slot for adding non-actionable elements after content of the component."
+        },
+        {
+          "name": "content-start",
+          "docs": "A slot for adding non-actionable elements before content of the component."
+        }
+      ],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "./src/components/stepper/stepper.tsx",
       "encapsulation": "shadow",
@@ -20567,6 +21574,11 @@
           "capture": false,
           "passive": false
         },
+        {
+          "event": "calciteInternalTabsClose",
+          "capture": false,
+          "passive": false
+        },
         {
           "event": "calciteInternalTabTitleRegister",
           "capture": false,
@@ -20616,6 +21628,40 @@
       ],
       "usage": {},
       "props": [
+        {
+          "name": "closable",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "closable",
+          "reflectToAttr": true,
+          "docs": "When `true`, a close button is added to the component.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "closed",
+          "type": "boolean",
+          "mutable": true,
+          "attr": "closed",
+          "reflectToAttr": true,
+          "docs": "When `true`, does not display or position the component.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -20690,6 +21736,21 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "messageOverrides",
+          "type": "{ close?: string; }",
+          "mutable": true,
+          "reflectToAttr": false,
+          "docs": "Use this property to override individual strings used by the component.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "{ close?: string; }"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "selected",
           "type": "boolean",
@@ -20746,6 +21807,15 @@
           "composed": true,
           "docs": "Fires when a `calcite-tab` is selected.",
           "docsTags": []
+        },
+        {
+          "event": "calciteTabsClose",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": false,
+          "composed": true,
+          "docs": "Fires when a `calcite-tab` is closed.",
+          "docsTags": []
         }
       ],
       "listeners": [