@esri/calcite-components 1.4.0-next.2 → 1.4.0-next.21

package/dist/extras/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-04-28T23:54:12",
+  "timestamp": "2023-05-18T04:55:43",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.22.3",
@@ -652,6 +652,7 @@
         "calcite-action-pad",
         "calcite-flow-item",
         "calcite-list-item",
+        "calcite-menu-item",
         "calcite-panel",
         "calcite-pick-list-item",
         "calcite-popover",
@@ -685,6 +686,9 @@
         "calcite-list-item": [
           "calcite-action"
         ],
+        "calcite-menu-item": [
+          "calcite-action"
+        ],
         "calcite-panel": [
           "calcite-action"
         ],
@@ -2182,7 +2186,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": [
             {
@@ -3711,7 +3731,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 +3838,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 +3864,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 +3992,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 +4025,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": [
@@ -4146,7 +4166,41 @@
           "mutable": false,
           "attr": "allow-empty",
           "reflectToAttr": true,
-          "docs": "When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.\n\nWhen `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`.",
+          "docs": "When `true`, an empty color (`null`) will be allowed as a `value`. When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "alphaChannel",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "alpha-channel",
+          "reflectToAttr": false,
+          "docs": "When true, the component will allow updates to the color's alpha value.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "channelsDisabled",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "channels-disabled",
+          "reflectToAttr": false,
+          "docs": "When true, hides the RGB/HSV channel inputs",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -4187,7 +4241,7 @@
               "text": "\"auto\""
             }
           ],
-          "default": "defaultFormat",
+          "default": "\"auto\"",
           "values": [
             {
               "value": "auto",
@@ -4245,6 +4299,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "hexDisabled",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "hex-disabled",
+          "reflectToAttr": false,
+          "docs": "When true, hides the hex input",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "hideChannels",
           "type": "boolean",
@@ -4252,8 +4323,14 @@
           "attr": "hide-channels",
           "reflectToAttr": true,
           "docs": "When `true`, hides the RGB/HSV channel inputs.",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "use `channelsDisabled` instead"
+            }
+          ],
           "default": "false",
+          "deprecation": "use `channelsDisabled` instead",
           "values": [
             {
               "type": "boolean"
@@ -4268,9 +4345,15 @@
           "mutable": false,
           "attr": "hide-hex",
           "reflectToAttr": true,
-          "docs": "When `true`, hides the Hex input.",
-          "docsTags": [],
+          "docs": "When `true`, hides the hex input.",
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "use `hexDisabled` instead"
+            }
+          ],
           "default": "false",
+          "deprecation": "use `hexDisabled` instead",
           "values": [
             {
               "type": "boolean"
@@ -4286,8 +4369,14 @@
           "attr": "hide-saved",
           "reflectToAttr": true,
           "docs": "When `true`, hides the saved colors section.",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "use `savedDisabled` instead"
+            }
+          ],
           "default": "false",
+          "deprecation": "use `savedDisabled` instead",
           "values": [
             {
               "type": "boolean"
@@ -4412,6 +4501,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "savedDisabled",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "saved-disabled",
+          "reflectToAttr": true,
+          "docs": "When true, hides the saved colors section",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "scale",
           "type": "\"l\" | \"m\" | \"s\"",
@@ -4475,7 +4581,7 @@
               "text": "[ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/color-picker/interfaces.ts#L10)"
             }
           ],
-          "default": "defaultValue",
+          "default": "normalizeHex(\n    hexify(DEFAULT_COLOR, this.alphaChannel)\n  )",
           "values": [
             {
               "type": "HSL"
@@ -4556,22 +4662,22 @@
         "calcite-tab-title",
         "calcite-tab",
         "calcite-input",
+        "calcite-color-picker-swatch",
         "calcite-color-picker-hex-input",
         "calcite-tabs",
         "calcite-tab-nav",
-        "calcite-button",
-        "calcite-color-picker-swatch"
+        "calcite-button"
       ],
       "dependencyGraph": {
         "calcite-color-picker": [
           "calcite-tab-title",
           "calcite-tab",
           "calcite-input",
+          "calcite-color-picker-swatch",
           "calcite-color-picker-hex-input",
           "calcite-tabs",
           "calcite-tab-nav",
-          "calcite-button",
-          "calcite-color-picker-swatch"
+          "calcite-button"
         ],
         "calcite-tab-title": [
           "calcite-icon"
@@ -4582,7 +4688,11 @@
         ],
         "calcite-color-picker-hex-input": [
           "calcite-input",
-          "calcite-color-picker-swatch"
+          "calcite-input-number"
+        ],
+        "calcite-input-number": [
+          "calcite-progress",
+          "calcite-icon"
         ],
         "calcite-button": [
           "calcite-loader",
@@ -4616,6 +4726,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "alphaChannel",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "alpha-channel",
+          "reflectToAttr": false,
+          "docs": "When true, the component will allow updates to the color's alpha value.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "hexLabel",
           "type": "string",
@@ -4623,8 +4750,14 @@
           "attr": "hex-label",
           "reflectToAttr": false,
           "docs": "Specifies accessible label for the input field.",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "use `messages` instead"
+            }
+          ],
           "default": "\"Hex\"",
+          "deprecation": "use `messages` instead",
           "values": [
             {
               "type": "string"
@@ -4766,9 +4899,9 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": true,
-          "docs": "The Hex value.",
+          "docs": "The hex value.",
           "docsTags": [],
-          "default": "normalizeHex(DEFAULT_COLOR.hex())",
+          "default": "normalizeHex(\n    hexify(DEFAULT_COLOR, this.alphaChannel),\n    this.alphaChannel,\n    true\n  )",
           "values": [
             {
               "type": "string"
@@ -4802,13 +4935,7 @@
           "docsTags": []
         }
       ],
-      "listeners": [
-        {
-          "event": "keydown",
-          "capture": true,
-          "passive": false
-        }
-      ],
+      "listeners": [],
       "styles": [],
       "slots": [],
       "parts": [],
@@ -4817,17 +4944,21 @@
       ],
       "dependencies": [
         "calcite-input",
-        "calcite-color-picker-swatch"
+        "calcite-input-number"
       ],
       "dependencyGraph": {
         "calcite-color-picker-hex-input": [
           "calcite-input",
-          "calcite-color-picker-swatch"
+          "calcite-input-number"
         ],
         "calcite-input": [
           "calcite-progress",
           "calcite-icon"
         ],
+        "calcite-input-number": [
+          "calcite-progress",
+          "calcite-icon"
+        ],
         "calcite-color-picker": [
           "calcite-color-picker-hex-input"
         ]
@@ -4914,16 +5045,12 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "calcite-color-picker",
-        "calcite-color-picker-hex-input"
+        "calcite-color-picker"
       ],
       "dependencies": [],
       "dependencyGraph": {
         "calcite-color-picker": [
           "calcite-color-picker-swatch"
-        ],
-        "calcite-color-picker-hex-input": [
-          "calcite-color-picker-swatch"
         ]
       }
     },
@@ -7864,7 +7991,7 @@
       ],
       "usage": {
         "Basic": "Renders a basic flow with a couple `calcite-panel`s.\n\n```html\n<calcite-flow>\n  <calcite-panel heading=\"one, two, three, four\">\n    <!-- image -->\n  </calcite-panel>\n  <calcite-panel heading=\"tell me that you love me more\">\n    <!-- image -->\n  </calcite-panel>\n</calcite-flow>\n```\n",
-        "Menu-actions-and-footer-actions": "Renders a flow with menu-actions and footer-actions in the form of buttons.\n\n```html\n<calcite-flow>\n  <calcite-panel heading=\"What are the most popular commute alternatives?\">\n    <button slot=\"header-menu-actions\">Reset</button>\n    <button slot=\"header-menu-actions\">Rename</button>\n    <button slot=\"footer-actions\">Save</button>\n    <button slot=\"footer-actions\">Cancel</button>\n  </calcite-panel>\n</calcite-flow>\n```\n"
+        "Menu-actions-and-footer-actions": "Renders a flow with menu-actions and footer in the form of buttons.\n\n```html\n<calcite-flow>\n  <calcite-panel heading=\"What are the most popular commute alternatives?\">\n    <button slot=\"header-menu-actions\">Reset</button>\n    <button slot=\"header-menu-actions\">Rename</button>\n    <button slot=\"footer\">Save</button>\n    <button slot=\"footer\">Cancel</button>\n  </calcite-panel>\n</calcite-flow>\n```\n"
       },
       "props": [],
       "methods": [
@@ -7937,7 +8064,7 @@
         },
         {
           "name": "slot",
-          "text": "footer-actions - A slot for adding `calcite-button`s to the component's footer."
+          "text": "footer-actions - [Deprecated] A slot for adding `calcite-button`s to the component's footer."
         },
         {
           "name": "slot",
@@ -8194,7 +8321,13 @@
         }
       ],
       "listeners": [],
-      "styles": [],
+      "styles": [
+        {
+          "name": "--calcite-flow-item-footer-padding",
+          "annotation": "prop",
+          "docs": "Specifies the padding of the component's footer."
+        }
+      ],
       "slots": [
         {
           "name": "",
@@ -8214,7 +8347,7 @@
         },
         {
           "name": "footer-actions",
-          "docs": "A slot for adding `calcite-button`s to the component's footer."
+          "docs": "[Deprecated] A slot for adding `calcite-button`s to the component's footer."
         },
         {
           "name": "header-actions-end",
@@ -8600,6 +8733,7 @@
         "calcite-input-time-picker",
         "calcite-link",
         "calcite-list-item",
+        "calcite-menu-item",
         "calcite-modal",
         "calcite-notice",
         "calcite-pagination",
@@ -8681,6 +8815,9 @@
         "calcite-list-item": [
           "calcite-icon"
         ],
+        "calcite-menu-item": [
+          "calcite-icon"
+        ],
         "calcite-modal": [
           "calcite-icon"
         ],
@@ -11460,7 +11597,9 @@
         }
       ],
       "parts": [],
-      "dependents": [],
+      "dependents": [
+        "calcite-color-picker-hex-input"
+      ],
       "dependencies": [
         "calcite-progress",
         "calcite-icon"
@@ -11469,6 +11608,9 @@
         "calcite-input-number": [
           "calcite-progress",
           "calcite-icon"
+        ],
+        "calcite-color-picker-hex-input": [
+          "calcite-input-number"
         ]
       }
     },
@@ -12472,7 +12614,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": [
@@ -13147,6 +13289,15 @@
         }
       ],
       "events": [
+        {
+          "event": "calciteListChange",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": false,
+          "composed": true,
+          "docs": "Emits when any of the list item selections have changed.",
+          "docsTags": []
+        },
         {
           "event": "calciteListFilter",
           "detail": "void",
@@ -13168,6 +13319,11 @@
           "capture": false,
           "passive": false
         },
+        {
+          "event": "calciteListItemSelect",
+          "capture": false,
+          "passive": false
+        },
         {
           "event": "calciteInternalListItemSelect",
           "capture": false,
@@ -13730,91 +13886,467 @@
       }
     },
     {
-      "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-nav-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",
-          "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"
+          "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-nav-menu-item\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "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": "breadcrumb",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "breadcrumb",
+          "reflectToAttr": true,
+          "docs": "When `true`, the component displays a breadcrumb trail for use as a navigational aid.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "mutable": false,
+          "attr": "href",
+          "reflectToAttr": false,
+          "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": "iconEnd",
+          "type": "string",
+          "mutable": false,
+          "attr": "icon-end",
+          "reflectToAttr": true,
+          "docs": "Specifies an icon to display at the end of the component.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "iconFlipRtl",
+          "type": "\"both\" | \"end\" | \"start\"",
+          "mutable": false,
+          "attr": "icon-flip-rtl",
+          "reflectToAttr": true,
+          "docs": "Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "both",
+              "type": "string"
+            },
+            {
+              "value": "end",
+              "type": "string"
+            },
+            {
+              "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": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "mutable": false,
+          "attr": "label",
+          "reflectToAttr": false,
+          "docs": "Accessible name for the component.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true
+        },
+        {
+          "name": "messageOverrides",
+          "type": "{ submenu?: string; open?: string; }",
+          "mutable": true,
+          "reflectToAttr": false,
+          "docs": "Use this property to override individual strings used by the component.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "{ submenu?: string; open?: string; }"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "mutable": true,
+          "attr": "open",
+          "reflectToAttr": true,
+          "docs": "When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "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": "text",
+          "type": "string",
+          "mutable": false,
+          "attr": "text",
+          "reflectToAttr": false,
+          "docs": "Specifies the text to display.",
+          "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": [
+        {
+          "event": "calciteMenuItemSelect",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emits when the component is selected.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [
+        {
+          "event": "click",
+          "target": "window",
+          "capture": false,
+          "passive": false
+        },
+        {
+          "event": "focusout",
+          "capture": false,
+          "passive": false
+        }
+      ],
+      "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": "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"
+      },
+      "props": [
+        {
+          "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": "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": "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,
@@ -14906,7 +15438,7 @@
         },
         {
           "name": "slot",
-          "text": "footer-actions - A slot for adding buttons to the footer."
+          "text": "footer-actions - [Deprecated] A slot for adding buttons to the footer."
         },
         {
           "name": "slot",
@@ -15144,7 +15676,13 @@
         }
       ],
       "listeners": [],
-      "styles": [],
+      "styles": [
+        {
+          "name": "--calcite-panel-footer-padding",
+          "annotation": "prop",
+          "docs": "Specifies the padding of the component's footer."
+        }
+      ],
       "slots": [
         {
           "name": "",
@@ -15164,7 +15702,7 @@
         },
         {
           "name": "footer-actions",
-          "docs": "A slot for adding buttons to the footer."
+          "docs": "[Deprecated] A slot for adding buttons to the footer."
         },
         {
           "name": "header-actions-end",
@@ -18006,7 +18544,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"
@@ -18238,8 +18776,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"
@@ -18254,9 +18798,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",
@@ -18319,6 +18919,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",
@@ -18338,7 +18939,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": [
@@ -18355,7 +18956,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": [
@@ -18380,20 +18981,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",
@@ -18403,7 +18999,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",