@esri/calcite-components 1.7.0-next.1 → 1.7.0-next.10

package/dist/extras/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-08-22T22:24:22",
+  "timestamp": "2023-08-28T18:37:42",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.22.3",
@@ -739,9 +739,25 @@
         "Actions-end": "The actions-end slot renders `calcite-action`s that stick to the end of the bar prior to the expand/collapse icon.\n\n```html\n<calcite-action-bar>\n  <calcite-action text=\"Information\" icon=\"information\"></calcite-action>\n  <calcite-action text=\"Feedback\" slot=\"actions-end\" icon=\"mega-phone\"></calcite-action>\n</calcite-action-bar>\n```\n",
         "Basic": "Renders `calcite-action`s that stick to the top of the bar.\n\n```html\n<calcite-action-bar>\n  <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n  <calcite-action text=\"Save\" icon=\"save\"></calcite-action>\n</calcite-action-bar>\n```\n",
         "Tooltip": "Renders with a tooltip on the expand action.\n\n```html\n<calcite-action-bar id=\"action-bar-test\">\n  <calcite-tooltip slot=\"expand-tooltip\">Expand</calcite-tooltip>\n  <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n</calcite-action-bar>\n```\n",
-        "With-grouping": "Renders a group of `calcite-action`s contained in a `calcite-action-group`. Actions in a group are visually separated from other groups or actions in the bar.\n\n```html\n<calcite-action-bar>\n  <calcite-action-group>\n    <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n    <calcite-action text=\"Save\" icon=\"save\"></calcite-action>\n  </calcite-action-group>\n\n  <calcite-action-group>\n    <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\n    <calcite-action text=\"Basemaps\" icon=\"layer-basemap\"></calcite-action>\n  </calcite-action-group>\n</calcite-action-bar>\n```\n"
+        "With-grouping": "Renders a group of `calcite-action`s contained in a `calcite-action-group`. Actions in a group are visually separated from other groups or actions in the bar.\n\n```html\n<calcite-action-bar>\n  <calcite-action-group label=\"Manage item\">\n    <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n    <calcite-action text=\"Save\" icon=\"save\"></calcite-action>\n  </calcite-action-group>\n\n  <calcite-action-group label=\"Item types\">\n    <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\n    <calcite-action text=\"Basemaps\" icon=\"layer-basemap\"></calcite-action>\n  </calcite-action-group>\n</calcite-action-bar>\n```\n"
       },
       "props": [
+        {
+          "name": "actionsEndGroupLabel",
+          "type": "string",
+          "mutable": false,
+          "attr": "actions-end-group-label",
+          "reflectToAttr": false,
+          "docs": "Specifies the accessible label for the last action-group.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "expandDisabled",
           "type": "boolean",
@@ -1032,6 +1048,22 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "label",
+          "type": "string",
+          "mutable": false,
+          "attr": "label",
+          "reflectToAttr": false,
+          "docs": "Specifies the label of the component. Required for accessibility.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "layout",
           "type": "\"grid\" | \"horizontal\" | \"vertical\"",
@@ -1547,9 +1579,25 @@
       "usage": {
         "Basic": "Renders a basic action pad with `calcite-action`s.\n\n```html\n<calcite-action-pad>\n  <calcite-action text=\"Undo\" icon=\"undo\"></calcite-action>\n  <calcite-action text=\"Redo\" icon=\"redo\"></calcite-action>\n</calcite-action-pad>\n```\n",
         "Tooltip": "Renders an action pad with a tooltip on the expand action.\n\n```html\n<calcite-action-pad id=\"action-pad-test\">\n  <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n</calcite-action-pad>\n<calcite-tooltip id=\"tooltip\">Expand</calcite-tooltip>\n<script>\n  var actionPad = document.getElementById(\"action-pad-test\");\n  var tooltip = document.getElementById(\"tooltip\");\n  actionPad.tooltipExpand = tooltip;\n</script>\n```\n",
-        "With-grouping": "Renders a group of `calcite-action`s contained in a `calcite-action-group`. Actions in a group are visually separated from other groups or actions in the pad.\n\n```html\n<calcite-action-pad>\n  <calcite-action-group>\n    <calcite-action text=\"Home\" icon=\"home\"></calcite-action>\n    <calcite-action text=\"Styles\" icon=\"add-in-edit\"></calcite-action>\n  </calcite-action-group>\n\n  <calcite-action text=\"Tips\" icon=\"lightbulb\"></calcite-action>\n</calcite-action-pad>\n```\n"
+        "With-grouping": "Renders a group of `calcite-action`s contained in a `calcite-action-group`. Actions in a group are visually separated from other groups or actions in the pad.\n\n```html\n<calcite-action-pad>\n  <calcite-action-group label=\"Manage item\">\n    <calcite-action text=\"Home\" icon=\"home\"></calcite-action>\n    <calcite-action text=\"Styles\" icon=\"add-in-edit\"></calcite-action>\n  </calcite-action-group>\n\n  <calcite-action text=\"Tips\" icon=\"lightbulb\"></calcite-action>\n</calcite-action-pad>\n```\n"
       },
       "props": [
+        {
+          "name": "actionsEndGroupLabel",
+          "type": "string",
+          "mutable": false,
+          "attr": "actions-end-group-label",
+          "reflectToAttr": false,
+          "docs": "Specifies the accessible label for the last action-group.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "expandDisabled",
           "type": "boolean",
@@ -5443,11 +5491,11 @@
         },
         {
           "name": "selectionMode",
-          "type": "\"ancestors\" | \"multiple\" | \"single\"",
+          "type": "\"ancestors\" | \"multiple\" | \"single\" | \"single-persist\"",
           "mutable": false,
           "attr": "selection-mode",
           "reflectToAttr": true,
-          "docs": "specify the selection mode\n- multiple: allow any number of selected items (default)\n- single: only one selection)\n- ancestors: like multiple, but show ancestors of selected items as selected, only deepest children shown in chips",
+          "docs": "Specifies the selection mode:\n- \"multiple\" allows any number of selected items (default),\n- \"single\" allows only one selection,\n- \"single-persist\" allow and require one open item,\n- \"ancestors\" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips.",
           "docsTags": [],
           "default": "\"multiple\"",
           "values": [
@@ -5462,6 +5510,10 @@
             {
               "value": "single",
               "type": "string"
+            },
+            {
+              "value": "single-persist",
+              "type": "string"
             }
           ],
           "optional": false,
@@ -7350,38 +7402,13 @@
           "optional": false,
           "required": false
         },
-        {
-          "name": "scale",
-          "type": "\"l\" | \"m\" | \"s\"",
-          "mutable": false,
-          "attr": "scale",
-          "reflectToAttr": true,
-          "docs": "Specifies the size of the component.",
-          "docsTags": [],
-          "values": [
-            {
-              "value": "l",
-              "type": "string"
-            },
-            {
-              "value": "m",
-              "type": "string"
-            },
-            {
-              "value": "s",
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
         {
           "name": "selectionMode",
           "type": "\"multiple\" | \"none\" | \"single\"",
           "mutable": false,
           "attr": "selection-mode",
           "reflectToAttr": true,
-          "docs": "Specifies the component's selection mode, where\n`\"multiple\"` allows any number of (or no) selected `calcite-dropdown-item`s,\n`\"single\"` allows and requires one selected `calcite-dropdown-item`, and\n`\"none\"` does not allow selection on `calcite-dropdown-item`s.",
+          "docs": "Specifies the selection mode for `calcite-dropdown-item` children, defaults to `single`:\n- `multiple` allows any number of selected items,\n- `single` allows only one selection (default),\n- `none` doesn't allow for any selection.",
           "docsTags": [],
           "default": "\"single\"",
           "values": [
@@ -13745,7 +13772,11 @@
           "signature": "setFocus() => Promise<void>",
           "parameters": [],
           "docs": "Sets focus on the component's first focusable element.",
-          "docsTags": []
+          "docsTags": [
+            {
+              "name": "returns"
+            }
+          ]
         }
       ],
       "events": [
@@ -15301,15 +15332,14 @@
       "props": [
         {
           "name": "beforeClose",
-          "type": "(el: HTMLElement) => Promise<void>",
+          "type": "(el: HTMLCalciteModalElement) => 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>"
+              "type": "(el: HTMLCalciteModalElement) => Promise<void>"
             }
           ],
           "optional": false,
@@ -19381,6 +19411,7 @@
         "calcite-modal",
         "calcite-panel",
         "calcite-pick-list",
+        "calcite-sheet",
         "calcite-value-list"
       ],
       "dependencies": [
@@ -19405,6 +19436,9 @@
         "calcite-pick-list": [
           "calcite-scrim"
         ],
+        "calcite-sheet": [
+          "calcite-scrim"
+        ],
         "calcite-value-list": [
           "calcite-scrim"
         ]
@@ -20008,6 +20042,350 @@
         ]
       }
     },
+    {
+      "filePath": "./src/components/sheet/sheet.tsx",
+      "encapsulation": "shadow",
+      "tag": "calcite-sheet",
+      "readme": "# calcite-sheet\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {
+        "Basic": "```html\n<calcite-sheet open label=\"libero nunc\" position=\"inline-start\">\n  <p>\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna\n    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n  </p>\n</calcite-sheet>\n```\n",
+        "Open": "To open a sheet, add the `open` prop. Once the opening animation is complete, the `calciteSheetOpen` event will be fired.\n\nTo close the sheet, simply remove the attribute. This will run your before close method (if provided, see below) and fire the `calciteSheetClose` event after the animation and teardown is complete.\n\n```html\n<calcite-sheet open\n  >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et\n  dolore</calcite-sheet\n>\n```\n",
+        "Panel": "```html\n<calcite-sheet open label=\"libero nunc\" position=\"inline-start\">\n  <calcite-panel closable heading=\"Ultrices neque\"\n    ><p>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n    </p>\n    <calcite-button slot=\"footer\" width=\"half\" appearance=\"outline\">tincidunt lobortis</calcite-button>\n    <calcite-button slot=\"footer\" width=\"half\" appearance=\"outline\">amet porttitor</calcite-button>\n  </calcite-panel>\n  <script>\n    document.addEventListener(\"calcitePanelClose\", () => {\n      document.querySelector(\"calcite-sheet\").open = false;\n    });\n  </script>\n</calcite-sheet>\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 sheet = document.getElementById(\"my-sheet\");\nsheet.beforeClose = beforeClose;\n```\n"
+      },
+      "props": [
+        {
+          "name": "beforeClose",
+          "type": "(el: HTMLCalciteSheetElement) => Promise<void>",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "Passes a function to run before the component closes.",
+          "docsTags": [
+            {
+              "name": "returns"
+            }
+          ],
+          "values": [
+            {
+              "type": "(el: HTMLCalciteSheetElement) => Promise<void>"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "displayMode",
+          "type": "\"float\" | \"overlay\"",
+          "mutable": false,
+          "attr": "display-mode",
+          "reflectToAttr": true,
+          "docs": "Specifies the display mode - `\"float\"` (content is separated detached),\nor `\"overlay\"` (displays on top of center content).",
+          "docsTags": [],
+          "default": "\"overlay\"",
+          "values": [
+            {
+              "value": "float",
+              "type": "string"
+            },
+            {
+              "value": "overlay",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "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": "heightScale",
+          "type": "\"l\" | \"m\" | \"s\"",
+          "mutable": false,
+          "attr": "height-scale",
+          "reflectToAttr": true,
+          "docs": "When `position` is `\"block-start\"` or `\"block-end\"`, specifies the height of the component.",
+          "docsTags": [],
+          "default": "\"m\"",
+          "values": [
+            {
+              "value": "l",
+              "type": "string"
+            },
+            {
+              "value": "m",
+              "type": "string"
+            },
+            {
+              "value": "s",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "mutable": false,
+          "attr": "label",
+          "reflectToAttr": false,
+          "docs": "Specifies the label of the component.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true
+        },
+        {
+          "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": "position",
+          "type": "\"block-end\" | \"block-start\" | \"inline-end\" | \"inline-start\"",
+          "mutable": false,
+          "attr": "position",
+          "reflectToAttr": true,
+          "docs": "Determines where the component will be positioned.",
+          "docsTags": [],
+          "default": "\"inline-start\"",
+          "values": [
+            {
+              "value": "block-end",
+              "type": "string"
+            },
+            {
+              "value": "block-start",
+              "type": "string"
+            },
+            {
+              "value": "inline-end",
+              "type": "string"
+            },
+            {
+              "value": "inline-start",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "widthScale",
+          "type": "\"l\" | \"m\" | \"s\"",
+          "mutable": false,
+          "attr": "width-scale",
+          "reflectToAttr": true,
+          "docs": "When `position` is `\"inline-start\"` or `\"inline-end\"`, 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": "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": "calciteSheetBeforeClose",
+          "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": "calciteSheetBeforeOpen",
+          "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": "calciteSheetClose",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": false,
+          "composed": true,
+          "docs": "Fires when the component is closed and animation is complete.",
+          "docsTags": []
+        },
+        {
+          "event": "calciteSheetOpen",
+          "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-sheet-height",
+          "annotation": "prop",
+          "docs": "When `position` is `\"block-start\"` or `\"block-end\"`, specifies the height of the component."
+        },
+        {
+          "name": "--calcite-sheet-max-height",
+          "annotation": "prop",
+          "docs": "When `position` is `\"block-start\"` or `\"block-end\"`, specifies the maximum height of the component."
+        },
+        {
+          "name": "--calcite-sheet-max-width",
+          "annotation": "prop",
+          "docs": "When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the maximum width of the component."
+        },
+        {
+          "name": "--calcite-sheet-min-height",
+          "annotation": "prop",
+          "docs": "When `position` is `\"block-start\"` or `\"block-end\"`, specifies the minimum height of the component."
+        },
+        {
+          "name": "--calcite-sheet-min-width",
+          "annotation": "prop",
+          "docs": "When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the minimum width of the component."
+        },
+        {
+          "name": "--calcite-sheet-scrim-background",
+          "annotation": "prop",
+          "docs": "Specifies the background color of the sheet scrim."
+        },
+        {
+          "name": "--calcite-sheet-width",
+          "annotation": "prop",
+          "docs": "When `position` is `\"inline-start\"` or `\"inline-end\"`, specifies the width of the component."
+        }
+      ],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [
+        "calcite-scrim"
+      ],
+      "dependencyGraph": {
+        "calcite-sheet": [
+          "calcite-scrim"
+        ],
+        "calcite-scrim": [
+          "calcite-loader"
+        ]
+      }
+    },
     {
       "filePath": "./src/components/shell/shell.tsx",
       "encapsulation": "shadow",
@@ -20057,7 +20435,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\" 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=\"actions-end\" 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 label=\"Manage item\">\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 label=\"Item types\">\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 label=\"Manage item\">\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 label=\"Item types\">\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=\"actions-end\" 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"